feat: redid the chart ui

Amaxa-Impact · Aug 8, 2024 · 4b5c73c · 4b5c73c
1 parent c695f4e
commit 4b5c73c
Show file tree

Hide file tree

Showing 7 changed files with 6,971 additions and 5,508 deletions.
diff --git a/apps/nextjs/src/app/(dashboard)/project/[id]/(tasks)/tasks/_components/context-wrapper.tsx b/apps/nextjs/src/app/(dashboard)/project/[id]/(tasks)/tasks/_components/context-wrapper.tsx
diff --git a/apps/nextjs/src/app/(dashboard)/project/[id]/(tasks)/tasks/_components/custom-node.tsx b/apps/nextjs/src/app/(dashboard)/project/[id]/(tasks)/tasks/_components/custom-node.tsx
@@ -5,12 +5,10 @@ import React, { memo } from "react";
 import { Handle, Position } from "@xyflow/react";
 
 import type { TaskStatus } from "@amaxa/db/schema";
-import { Avatar, AvatarFallback } from "@amaxa/ui/avatar";
 import { Button } from "@amaxa/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@amaxa/ui/card";
 import { Input } from "@amaxa/ui/input";
 import { Label } from "@amaxa/ui/label";
-import { Popover, PopoverContent, PopoverTrigger } from "@amaxa/ui/popover";
 import {
   Select,
   SelectContent,
@@ -22,7 +20,6 @@ import { Textarea } from "@amaxa/ui/textarea";
 
 import type { NodeType } from "~/lib/types/flowcart";
 import useStore from "~/lib/store";
-import { ChangeStatus } from "./change-status";
 
 const getCardClassName = (status: string) => {
   switch (status) {
@@ -37,11 +34,12 @@ const getCardClassName = (status: string) => {
 
 const TaskNode = ({ data, isConnectable }: NodeProps<NodeType>) => {
   const [isEdit, setIsEdit] = React.useState(false);
-  const authorInitials =
+  /* const authorInitials =
     data.assigne.name
       ?.split(" ")
       .map((n) => n[0])
       .join("") ?? "S";
+      */
 
   const changeNode = useStore((state) => state.changeNode);
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
@@ -63,48 +61,41 @@ const TaskNode = ({ data, isConnectable }: NodeProps<NodeType>) => {
           type="target"
           position={Position.Left}
           isConnectable={isConnectable}
-          style={{ left: "-8px", top: "50%", transform: "translateY(-50%)" }}
+          style={{
+            left: "-4px",
+            top: "50%",
+            height: "20px",
+            width: "1px",
+            transform: "translateY(-50%)",
+          }}
         />
-        <Card className={`${getCardClassName(data.status)} min-w-[200px]`}>
+        <Card
+          className={`${getCardClassName(data.status)} min-w-[250px]`}
+          onDoubleClick={() => setIsEdit(true)}
+        >
           <CardHeader>
             <CardTitle className="flex flex-row items-center gap-2">
-              <p>{data.title}</p>
-              <p>&#8226;</p>
-              <Popover>
-                <PopoverTrigger>
-                  <Avatar>
-                    <AvatarFallback>{authorInitials}</AvatarFallback>
-                  </Avatar>
-                </PopoverTrigger>
-                <PopoverContent className="flex flex-col">
-                  <div className="flex flex-row items-center gap-4">
-                    <Avatar>
-                      <AvatarFallback>{authorInitials}</AvatarFallback>
-                    </Avatar>
-                    <p className="text-xl font-bold">
-                      {data.assigne.name ?? "System"}
-                    </p>
-                  </div>
-                </PopoverContent>
-              </Popover>
+              <p className="text-2xl">{data.title}</p>
             </CardTitle>
           </CardHeader>
-          <CardContent className="flex w-full flex-col gap-3">
-            <ChangeStatus id={data.id} defaultValue={data.status} />
-            <Button onClick={() => setIsEdit(true)}>Edit</Button>
-          </CardContent>
         </Card>
         <Handle
           type="source"
           position={Position.Right}
           isConnectable={isConnectable}
-          style={{ right: "-8px", top: "50%", transform: "translateY(-50%)" }}
+          style={{
+            right: "-4px",
+            top: "50%",
+            height: "20px",
+            width: "1px",
+            transform: "translateY(-50%)",
+          }}
         />
       </div>
     );
   } else {
     return (
-      <Card className="w-min-[400px] h-min-[200px]">
+      <Card className="h-min-[200px] w-[400px]">
         <CardHeader>
           <CardTitle>Edit Task</CardTitle>
         </CardHeader>

diff --git a/apps/nextjs/src/app/layout.tsx b/apps/nextjs/src/app/layout.tsx
@@ -46,7 +46,7 @@ export default function RootLayout(props: { children: React.ReactNode }) {
           GeistMono.variable,
         )}
       >
-        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+        <ThemeProvider defaultTheme="light">
           <TRPCReactProvider>
             <FlowProvider>{props.children}</FlowProvider>
           </TRPCReactProvider>

diff --git a/apps/website/src/lib/hooks/use-outside-click.tsx b/apps/website/src/lib/hooks/use-outside-click.tsx
@@ -1,4 +1,5 @@
-import { RefObject, useEffect } from "react";
+import type { RefObject } from "react";
+import { useEffect } from "react";
 
 export const useOutsideClick = (
   ref: RefObject<HTMLDivElement>,

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -25,6 +25,7 @@
     "@radix-ui/react-context-menu": "^2.2.1",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-hover-card": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-navigation-menu": "^1.2.0",

diff --git a/packages/ui/src/hover-card.tsx b/packages/ui/src/hover-card.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+
+import { cn } from "@amaxa/ui";
+
+const HoverCard = HoverCardPrimitive.Root;
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };