Starting migration to shadUI

package.json

@@ -1,5 +1,14 @@
 {
   "dependencies": {
+    "add": "^2.0.6",
+    "class-variance-authority": "^0.6.0",
+    "clsx": "^1.2.1",
+    "lucide-react": "^0.233.0",
+    "shadcn-ui": "^0.1.3",
+    "switch": "^0.0.0",
+    "table": "^6.8.1",
+    "tailwind-merge": "^1.13.0",
+    "tailwindcss-animate": "^1.0.5",
     "vite-plugin-svgr": "^3.2.0"
   }
 }

src/frontend/src/components/ui/table.tsx

@@ -0,0 +1,113 @@
+import * as React from "react"
+import { cn } from "./lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn("bg-primary font-medium text-primary-foreground", className)}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

src/frontend/src/index.css

@@ -2,6 +2,84 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+	:root {
+	  --background: 0 0% 100%;
+	  --foreground: 222.2 47.4% 11.2%;
+   
+	  --muted: 210 40% 96.1%;
+	  --muted-foreground: 215.4 16.3% 46.9%;
+   
+	  --popover: 0 0% 100%;
+	  --popover-foreground: 222.2 47.4% 11.2%;
+   
+	  --card: 0 0% 100%;
+	  --card-foreground: 222.2 47.4% 11.2%;
+   
+	  --border: 214.3 31.8% 91.4%;
+	  --input: 214.3 31.8% 91.4%;
+   
+	  --primary: 222.2 47.4% 11.2%;
+	  --primary-foreground: 210 40% 98%;
+   
+	  --secondary: 210 40% 96.1%;
+	  --secondary-foreground: 222.2 47.4% 11.2%;
+   
+	  --accent: 210 40% 96.1%;
+	  --accent-foreground: 222.2 47.4% 11.2%;
+   
+	  --destructive: 0 100% 50%;
+	  --destructive-foreground: 210 40% 98%;
+   
+	  --ring: 215 20.2% 65.1%;
+   
+	  --radius: 0.5rem;
+	}
+   
+	.dark {
+	  --background: 224 71% 4%;
+	  --foreground: 213 31% 91%;
+   
+	  --muted: 223 47% 11%;
+	  --muted-foreground: 215.4 16.3% 56.9%;
+   
+	  --popover: 224 71% 4%;
+	  --popover-foreground: 215 20.2% 65.1%;
+   
+	  --card: 224 71% 4%;
+	  --card-foreground: 213 31% 91%;
+   
+	  --border: 216 34% 17%;
+	  --input: 216 34% 17%;
+   
+	  --primary: 210 40% 98%;
+	  --primary-foreground: 222.2 47.4% 1.2%;
+   
+	  --secondary: 222.2 47.4% 11.2%;
+	  --secondary-foreground: 210 40% 98%;
+   
+	  --accent: 216 34% 17%;
+	  --accent-foreground: 210 40% 98%;
+   
+	  --destructive: 0 63% 31%;
+	  --destructive-foreground: 210 40% 98%;
+   
+	  --ring: 216 34% 17%;
+   
+	  --radius: 0.5rem;
+	}
+  }
+   
+  @layer base {
+	* {
+	  @apply border-border;
+	}
+	body {
+	  @apply bg-background text-foreground;
+	  font-feature-settings: "rlig" 1, "calt" 1;
+	}
+  }
+
 body {
 	margin: 0;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
@@ -15,3 +93,9 @@ code {
 	font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
 		monospace;
 }
+
+/* The style below sets the cursor property of the element with the class .react-flow__pane to the default cursor.
+The cursor: default; property value restores the browser's default cursor style for the targeted element. By applying this style, the element will no longer have a custom cursor appearance such as "grab" or any other custom cursor defined elsewhere in the application. Instead, it will revert to the default cursor style determined by the browser, typically an arrow-shaped cursor. */
+.react-flow__pane {
+  cursor: default;
+}

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -1,4 +1,4 @@
-import { Dialog, Transition } from "@headlessui/react";
+import { Dialog, Switch, Transition } from "@headlessui/react";
 import {
   ChevronDoubleLeftIcon,
   ChevronDoubleRightIcon,
@@ -11,22 +11,63 @@ import { NodeDataType } from "../../types/flow";
 import {
   classNames,
   limitScrollFieldsModal,
-  nodeColors,
   nodeIcons,
-  toNormalCase,
-  toTitleCase,
 } from "../../utils";
 import { typesContext } from "../../contexts/typesContext";
-import { useUpdateNodeInternals } from "reactflow";
+import {
-const people = [
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../components/ui/table"
+
+const invoices = [
   {
-    name: "Lindsay Walton",
+    invoice: "INV001",
-    title: "Front-end Developer",
+    paymentStatus: "Paid",
-    email: "lindsay.walton@example.com",
+    totalAmount: "$250.00",
-    role: "Member",
+    paymentMethod: "Credit Card",
   },
-  // More people...
+  {
-];
+    invoice: "INV002",
+    paymentStatus: "Pending",
+    totalAmount: "$150.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV003",
+    paymentStatus: "Unpaid",
+    totalAmount: "$350.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV004",
+    paymentStatus: "Paid",
+    totalAmount: "$450.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV005",
+    paymentStatus: "Paid",
+    totalAmount: "$550.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV006",
+    paymentStatus: "Pending",
+    totalAmount: "$200.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV007",
+    paymentStatus: "Unpaid",
+    totalAmount: "$300.00",
+    paymentMethod: "Credit Card",
+  },
+]
 
 export default function EditNodeModal({ data }: { data: NodeDataType }) {
   const [open, setOpen] = useState(true);
@@ -43,6 +84,8 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
   }
   const [advanced, setAdvanced] = useState([]);
   const [parameters, setParameters] = useState([]);
+  const [enabled, setEnabled] = useState(false)
+
   const updateAdvancedParameters = () => {
     setAdvanced(
       Object.keys(data.node.template).filter(
@@ -69,9 +112,13 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
       )
     );
   };
+  
   useEffect(() => {
     updateAdvancedParameters();
   }, [data.node.template]);
+
+  console.log("DATA", data.node.template);
+  
   const Icon = nodeIcons[types[data.type]];
   return (
     <Transition.Root show={open} appear={true} as={Fragment}>
@@ -156,142 +203,88 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                         )}
                       >
                         <div className="flex flex-col h-full gap-5 h-fit	">
-                          <table className="table-fixed w-full divide-y divide-gray-300 border-b-[1px] rounded-b-lg h-full">
+
-                            <thead>
+
-                              <tr className="divide-x divide-gray-200">
+                        <Table>
-                                <th
+      <TableCaption>A list of your recent invoices.</TableCaption>
-                                  scope="col"
+      <TableHeader>
-                                  className="py-3.5 px-4 text-center text-sm font-semibold text-gray-900"
+        <TableRow>
-                                >
+          <TableHead className="w-[100px]">Invoice</TableHead>
-                                  Parameters
+          <TableHead>Status</TableHead>
-                                </th>
+          <TableHead>Method</TableHead>
-                                <th
+          <TableHead className="text-right">Amount</TableHead>
-                                  scope="col"
+        </TableRow>
-                                  className="px-4 py-3.5 text-center text-sm font-semibold text-gray-900"
+      </TableHeader>
-                                >
+      <TableBody>
-                                  Advanced
+        {invoices.map((invoice) => (
-                                </th>
+          <TableRow key={invoice.invoice}>
-                              </tr>
+            <TableCell className="font-medium">{invoice.invoice}</TableCell>
-                            </thead>
+            <TableCell>{invoice.paymentStatus}</TableCell>
-                            <tbody className="divide-y divide-gray-200 bg-white align-top">
+            <TableCell>{invoice.paymentMethod}</TableCell>
-                              {advanced.length > parameters.length
+            <TableCell className="text-right">{invoice.totalAmount}</TableCell>
-                                ? advanced.map((t, idx) => (
+          </TableRow>
-                                    <tr
+        ))}
-                                      key={idx}
+      </TableBody>
-                                      className="divide-x divide-gray-200"
+    </Table>
-                                    >
+
-                                      <td className="gap-3 py-4 px-4 text-sm font-medium text-gray-900 truncate h-1">
+
-                                        {data.node.template[parameters[idx]] ? (
+                        <table className="min-w-full divide-y divide-gray-300">
-                                          <button
+                <thead className="bg-gray-50">
-                                            className="flex gap-3 w-full items-center"
+                  <tr>
-                                            onClick={() => {
+                    <th scope="col" className="py-1 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
-                                              data.node.template[
+                      Param
-                                                parameters[idx]
+                    </th>
-                                              ].advanced = true;
+                    <th scope="col" className="px-3 py-1 text-left text-sm font-semibold text-gray-900">
-                                              updateAdvancedParameters();
+                      Value
-                                            }}
+                    </th>
-                                          >
+                    <th scope="col" className="px-3 py-1 text-left text-sm font-semibold text-gray-900">
-                                            {data.node.template[parameters[idx]]
+                      Show
-                                              .display_name
+                    </th>
-                                              ? data.node.template[
+                  </tr>
-                                                  parameters[idx]
+                </thead>
-                                                ].display_name
+                <tbody className="divide-y divide-gray-200 bg-white">
-                                              : data.node.template[
+
-                                                  parameters[idx]
+                {
-                                                ].name
+                Object.keys(data.node.template).filter(
-                                              ? toTitleCase(
+                  (t) =>
-                                                  data.node.template[
+                    t.charAt(0) !== "_"
-                                                    parameters[idx]
+                ).map((n, i) => (
-                                                  ].name
+                  <tr key={i}>
-                                                )
+                  <td className="whitespace-nowrap py-1 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
-                                              : toTitleCase(t)}
+                    {data.node.template[n].name ? data.node.template[n].name : data.node.template[n].display_name }
-                                            <ChevronDoubleRightIcon className="h-5 w-5 text-gray-900" />
+                  </td>
-                                          </button>
+                  <td className="whitespace-nowrap px-3 py-1 text-sm text-gray-500">{data.node.template[n].value ? data.node.template[n].value : '-'}</td>
-                                        ) : (
+                  <td className="whitespace-nowrap px-3 py-1 text-sm text-gray-500">
-                                          <></>
+                  <Switch
-                                        )}
+      checked={enabled}
-                                      </td>
+      onChange={setEnabled}
-                                      <td className="p-4 text-sm text-right font-medium text-gray-900 truncate h-1">
+      className="group relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
-                                        <button
+    >
-                                          className="w-full flex justify-end gap-3 items-center"
+      <span className="sr-only">Use setting</span>
-                                          onClick={() => {
+      <span aria-hidden="true" className="pointer-events-none absolute h-full w-full rounded-md bg-white" />
-                                            data.node.template[t].advanced =
+      <span
-                                              false;
+        aria-hidden="true"
-                                            updateAdvancedParameters();
+        className={classNames(
-                                          }}
+          enabled ? 'bg-indigo-600' : 'bg-gray-200',
-                                        >
+          'pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out'
-                                          <ChevronDoubleLeftIcon className="h-5 w-5 text-gray-900" />
+        )}
-                                          {data.node.template[t].display_name
+      />
-                                            ? data.node.template[t].display_name
+      <span
-                                            : data.node.template[t].name
+        aria-hidden="true"
-                                            ? toTitleCase(
+        className={classNames(
-                                                data.node.template[t].name
+          enabled ? 'translate-x-5' : 'translate-x-0',
-                                              )
+          'pointer-events-none absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow ring-0 transition-transform duration-200 ease-in-out'
-                                            : toTitleCase(t)}
+        )}
-                                        </button>
+      />
-                                      </td>
+    </Switch>
-                                    </tr>
+
-                                  ))
+                  </td>
-                                : parameters.map((t, idx) => (
+                </tr>
-                                    <tr
+                ))}
-                                      key={idx}
+                
-                                      className="divide-x divide-gray-200"
+                </tbody>
-                                    >
+              </table>
-                                      <td className="gap-3 py-4 px-4 text-sm font-medium text-gray-900">
+
-                                        <button
-                                          className="
-                                          flex gap-3 w-full items-center"
-                                          onClick={() => {
-                                            data.node.template[t].advanced =
-                                              true;
-                                            updateAdvancedParameters();
-                                          }}
-                                        >
-                                          {data.node.template[t].display_name
-                                            ? data.node.template[t].display_name
-                                            : data.node.template[t].name
-                                            ? toTitleCase(
-                                                data.node.template[t].name
-                                              )
-                                            : toTitleCase(t)}
-                                          <ChevronDoubleRightIcon className="h-5 w-5 text-gray-900" />
-                                        </button>
-                                      </td>
-                                      <td className="p-4 text-sm text-right font-medium text-gray-900">
-                                        {data.node.template[advanced[idx]] ? (
-                                          <button
-                                            className="w-full flex justify-end gap-3 items-center"
-                                            onClick={() => {
-                                              data.node.template[
-                                                advanced[idx]
-                                              ].advanced = false;
-                                              updateAdvancedParameters();
-                                            }}
-                                          >
-                                            <ChevronDoubleLeftIcon className="h-5 w-5 text-gray-900" />
-                                            {data.node.template[advanced[idx]]
-                                              .display_name
-                                              ? data.node.template[
-                                                  advanced[idx]
-                                                ].display_name
-                                              : data.node.template[
-                                                  advanced[idx]
-                                                ].name
-                                              ? toTitleCase(
-                                                  data.node.template[
-                                                    advanced[idx]
-                                                  ].name
-                                                )
-                                              : toTitleCase(t)}
-                                          </button>
-                                        ) : (
-                                          <></>
-                                        )}
-                                      </td>
-                                    </tr>
-                                  ))}
-                            </tbody>
-                          </table>
                         </div>
                       </div>
                     </div>

src/frontend/tailwind.config.js

@@ -1,11 +1,83 @@
 /** @type {import('tailwindcss').Config} */
+const { fontFamily } = require("tailwindcss/defaultTheme")
+
 import plugin from "tailwindcss/plugin";
 module.exports = {
   content: ["./index.html", "./src/**/*.{js,ts,tsx,jsx}"],
   darkMode: "class",
   important: true,
   theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
     extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: `var(--radius)`,
+        md: `calc(var(--radius) - 2px)`,
+        sm: "calc(var(--radius) - 4px)",
+      },
+      fontFamily: {
+        sans: ["var(--font-sans)", ...fontFamily.sans],
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+        pulseGreen: {
+          "0%": { boxShadow: "0 0 0 0 rgba(72, 187, 120, 0.7)" },
+          "100%": { boxShadow: "0 0 0 10px rgba(72, 187, 120, 0)" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        "pulse-green": "pulseGreen 1s linear",
+        'spin-once': 'spin 1s linear 0.7'
+      },
       borderColor: {
         "red-outline": "rgba(255, 0, 0, 0.8)",
         "green-outline": "rgba(72, 187, 120, 0.7)",
@@ -14,17 +86,6 @@ module.exports = {
         "red-outline": "0 0 5px rgba(255, 0, 0, 0.5)",
         "green-outline": "0 0 5px rgba(72, 187, 120, 0.7)",
       },
-
-      animation: {
-        "pulse-green": "pulseGreen 1s linear",
-        'spin-once': 'spin 1s linear 0.7'
-      },
-      keyframes: {
-        pulseGreen: {
-          "0%": { boxShadow: "0 0 0 0 rgba(72, 187, 120, 0.7)" },
-          "100%": { boxShadow: "0 0 0 10px rgba(72, 187, 120, 0)" },
-        },
-      },
     },
   },
   plugins: [
@@ -87,6 +148,7 @@ module.exports = {
         },
         ".dark .theme-attribution .react-flow__attribution": {
           backgroundColor: "rgba(255, 255, 255, 0.2)",
+          padding: "0px 5px",
         },
         ".dark .theme-attribution .react-flow__attribution a": {
           color: "black",

src/frontend/tsconfig.json

@@ -1,5 +1,9 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    },
     "target": "es5",
     "lib": [
       "dom",