frontend

frontend/app/globals.css

@@ -2,6 +2,68 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-  background-color: #fffdf9;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --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%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 }

frontend/app/zap/create/_components/custom-handle.tsx

@@ -0,0 +1,40 @@
+import { useEditor } from "@/providers/editor-provider";
+import { Handle, HandleProps } from "reactflow";
+import React, { CSSProperties } from "react";
+
+type Props = HandleProps & { style?: CSSProperties };
+
+const selector = (s: any) => ({
+  nodeInternals: s.nodeInternals,
+  edges: s.edges,
+});
+
+const CustomHandle = (props: Props) => {
+  const { state } = useEditor();
+
+  return (
+    <Handle
+      {...props}
+      isValidConnection={(e) => {
+        const sourcesFromHandleInState = state.editor.edges.filter(
+          (edge) => edge.source === e.source
+        ).length;
+        const sourceNode = state.editor.elements.find(
+          (node) => node.id === e.source
+        );
+        //target
+        const targetFromHandleInState = state.editor.edges.filter(
+          (edge) => edge.target === e.target
+        ).length;
+
+        if (targetFromHandleInState === 1) return false;
+        if (sourceNode?.type === "Condition") return true;
+        if (sourcesFromHandleInState < 1) return true;
+        return false;
+      }}
+      className="!-bottom-2 !h-4 !w-4 dark:bg-neutral-800"
+    />
+  );
+};
+
+export default CustomHandle;

frontend/app/zap/create/_components/editor-canvas-card-icon-hepler.tsx

@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import {
+  Calendar,
+  CircuitBoard,
+  Database,
+  GitBranch,
+  HardDrive,
+  Mail,
+  MousePointerClickIcon,
+  Plus,
+  Slack,
+  Timer,
+  Webhook,
+  Zap,
+} from "lucide-react";
+import { EditorCanvasTypes } from "@/lib/types";
+
+type Props = { type: EditorCanvasTypes };
+
+const EditorCanvasIconHelper = ({ type }: Props) => {
+  switch (type) {
+    case "Email":
+      return <Mail className="flex-shrink-0" size={30} />;
+    case "Condition":
+      return <GitBranch className="flex-shrink-0" size={30} />;
+    case "AI":
+      return <CircuitBoard className="flex-shrink-0" size={30} />;
+    case "Slack":
+      return <Plus className="flex-shrink-0" size={30} />;
+    case "Google Drive":
+      return <HardDrive className="flex-shrink-0" size={30} />;
+    case "Notion":
+      return <Database className="flex-shrink-0" size={30} />;
+    case "Custom Webhook":
+      return <Webhook className="flex-shrink-0" size={30} />;
+    case "Google Calendar":
+      return <Calendar className="flex-shrink-0" size={30} />;
+    case "Trigger":
+      return <MousePointerClickIcon className="flex-shrink-0" size={30} />;
+    case "Action":
+      return <Zap className="flex-shrink-0" size={30} />;
+    case "Wait":
+      return <Timer className="flex-shrink-0" size={30} />;
+    default:
+      return <Zap className="flex-shrink-0" size={30} />;
+  }
+};
+
+export default EditorCanvasIconHelper;

frontend/app/zap/create/_components/editor-canvas-card-single.tsx

@@ -0,0 +1,79 @@
+import { EditorCanvasCardType } from "@/lib/types";
+import { useEditor } from "@/providers/editor-provider";
+import React, { useMemo } from "react";
+import { Position, useNodeId } from "reactflow";
+import EditorCanvasIconHelper from "./editor-canvas-card-icon-hepler";
+
+import { Badge } from "@/components/ui/badge";
+
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import clsx from "clsx";
+import CustomHandle from "./custom-handle";
+
+type Props = {};
+
+const EditorCanvasCardSingle = ({ data }: { data: EditorCanvasCardType }) => {
+  const { dispatch, state } = useEditor();
+  const nodeId = useNodeId();
+  const logo = useMemo(() => {
+    return <EditorCanvasIconHelper type={data.type} />;
+  }, [data]);
+
+  return (
+    <>
+      {data.type !== "Trigger" && data.type !== "Google Drive" && (
+        <CustomHandle
+          type="target"
+          position={Position.Top}
+          style={{ zIndex: 100 }}
+        />
+      )}
+      <Card
+        onClick={(e) => {
+          e.stopPropagation();
+          const val = state.editor.elements.find((n) => n.id === nodeId);
+          if (val)
+            dispatch({
+              type: "SELECTED_ELEMENT",
+              payload: {
+                element: val,
+              },
+            });
+        }}
+        className="relative max-w-[400px] dark:border-muted-foreground/70"
+      >
+        <CardHeader className="flex flex-row items-center gap-4">
+          <div>{logo}</div>
+          <div>
+            <CardTitle className="text-md">{data.title}</CardTitle>
+            <CardDescription>
+              <p className="text-xs text-muted-foreground/50">
+                <b className="text-muted-foreground/80">ID: </b>
+                {nodeId}
+              </p>
+              <p>{data.description}</p>
+            </CardDescription>
+          </div>
+        </CardHeader>
+        <Badge variant="secondary" className="absolute right-2 top-2">
+          {data.type}
+        </Badge>
+        <div
+          className={clsx("absolute left-3 top-4 h-2 w-2 rounded-full", {
+            "bg-green-500": Math.random() < 0.6,
+            "bg-orange-500": Math.random() >= 0.6 && Math.random() < 0.8,
+            "bg-red-500": Math.random() >= 0.8,
+          })}
+        ></div>
+      </Card>
+      <CustomHandle type="source" position={Position.Bottom} id="a" />
+    </>
+  );
+};
+
+export default EditorCanvasCardSingle;

frontend/app/zap/create/_components/editor-canvas-sidebar.tsx

@@ -0,0 +1,61 @@
+"use client";
+import { EditorCanvasTypes, EditorNodeType } from "@/lib/types";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+import React, { useEffect } from "react";
+import { Separator } from "@/components/ui/separator";
+import { EditorCanvasDefaultCardTypes } from "@/lib/constants";
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { onDragStart } from "@/lib/editor-utils";
+import EditorCanvasIconHelper from "./editor-canvas-card-icon-hepler";
+
+type Props = {
+  nodes: EditorNodeType[];
+};
+
+const EditorCanvasSidebar = ({ nodes }: Props) => {
+  return (
+    <aside>
+      <Tabs defaultValue="actions" className="h-screen overflow-scroll pb-24">
+        <TabsList className="bg-transparent">
+          <TabsTrigger value="actions">Actions</TabsTrigger>
+          <TabsTrigger value="settings">Settings</TabsTrigger>
+        </TabsList>
+        <Separator />
+        <TabsContent value="actions" className="flex flex-col gap-4 p-4">
+          {Object.entries(EditorCanvasDefaultCardTypes)
+            .filter(
+              ([_, cardType]) =>
+                (!nodes.length && cardType.type === "Trigger") ||
+                (nodes.length && cardType.type === "Action")
+            )
+            .map(([cardKey, cardValue]) => (
+              <Card
+                key={cardKey}
+                draggable
+                className="w-full cursor-grab border-black bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-900"
+                onDragStart={(event) =>
+                  onDragStart(event, cardKey as EditorCanvasTypes)
+                }
+              >
+                <CardHeader className="flex flex-row items-center gap-4 p-4">
+                  <EditorCanvasIconHelper type={cardKey as EditorCanvasTypes} />
+                  <CardTitle className="text-md">
+                    {cardKey}
+                    <CardDescription>{cardValue.description}</CardDescription>
+                  </CardTitle>
+                </CardHeader>
+              </Card>
+            ))}
+        </TabsContent>
+      </Tabs>
+    </aside>
+  );
+};
+
+export default EditorCanvasSidebar;