Merge pull request #7 from jakemoresca/reactflow_editor

Drawer and modal mockup
jakemoresca · Jul 13, 2024 · bfc42a0 · bfc42a0
2 parents 4a43e25 + 3a4e6a7
commit bfc42a0
Show file tree

Hide file tree

Showing 8 changed files with 1,169 additions and 107 deletions.
diff --git a/actionFlow.editor/package-lock.json b/actionFlow.editor/package-lock.json
diff --git a/actionFlow.editor/package.json b/actionFlow.editor/package.json
@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@xyflow/react": "^12.0.0",
+    "flowbite": "^2.4.1",
+    "flowbite-react": "^0.10.1",
     "next": "14.1.3",
     "react": "^18",
     "react-dom": "^18"
@@ -18,8 +20,11 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8",
     "eslint-config-next": "14.1.3",
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.4",
     "typescript": "^5"
   }
 }
diff --git a/actionFlow.editor/postcss.config.js b/actionFlow.editor/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/actionFlow.editor/src/app/globals.css b/actionFlow.editor/src/app/globals.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   --max-width: 1100px;
   --font-mono: ui-monospace, Menlo, Monaco;
@@ -24,3 +28,7 @@ a {
   color: inherit;
   text-decoration: none;
 }
+
+.selected {
+  @apply rounded-lg ring ring-blue-500;
+}
diff --git a/actionFlow.editor/src/components/Flow.tsx b/actionFlow.editor/src/components/Flow.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import {
   Background,
   Controls,
@@ -8,12 +8,14 @@ import {
   useNodesState,
   useEdgesState,
   type OnConnect,
+  Panel,
 } from "@xyflow/react";
 
 import "@xyflow/react/dist/style.css";
 
 import { initialNodes, nodeTypes, type CustomNodeType } from "./nodes";
 import { initialEdges, edgeTypes, type CustomEdgeType } from "./edges";
+import { Button, Drawer, Modal } from "flowbite-react";
 
 export default function App() {
   const [nodes, , onNodesChange] = useNodesState<CustomNodeType>(initialNodes);
@@ -24,6 +26,12 @@ export default function App() {
     [setEdges]
   );
 
+  const [openModal, setOpenModal] = useState(false);
+
+  const actionIcon = (<svg className="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+    <path fillRule="evenodd" d="M3 4a1 1 0 0 0-.822 1.57L6.632 12l-4.454 6.43A1 1 0 0 0 3 20h13.153a1 1 0 0 0 .822-.43l4.847-7a1 1 0 0 0 0-1.14l-4.847-7a1 1 0 0 0-.822-.43H3Z" clipRule="evenodd" />
+  </svg>)
+
   return (
     <ReactFlow<CustomNodeType, CustomEdgeType>
       nodes={nodes}
@@ -33,13 +41,107 @@ export default function App() {
       edgeTypes={edgeTypes}
       onEdgesChange={onEdgesChange}
       onConnect={onConnect}
-      edgesReconnectable={false}
-      edgesFocusable={false}
+      nodesConnectable={true}
+      nodesDraggable={true}
+      elementsSelectable={true}
       fitView
+      className="bg-white dark:bg-gray-900 antialiased"
     >
       <Background />
       <MiniMap />
+
+      <Panel position="top-left">
+
+        <Drawer open={true} onClose={() => { }} backdrop={false}>
+          <Drawer.Header title="Drawer" />
+          <Drawer.Items>
+            <p className="mb-6 text-sm text-gray-500 dark:text-gray-400">
+              Supercharge your hiring by taking advantage of our&nbsp;
+              <a href="#" className="text-cyan-600 underline hover:no-underline dark:text-cyan-500">
+                limited-time sale
+              </a>
+              &nbsp;for Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design
+              job board.
+            </p>
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+              <a
+                href="#"
+                className="rounded-lg border border-gray-200 bg-white px-4 py-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-cyan-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
+              >
+                Learn more
+              </a>
+              <a
+                href="#"
+                className="inline-flex items-center rounded-lg bg-cyan-700 px-4 py-2 text-center text-sm font-medium text-white hover:bg-cyan-800 focus:outline-none focus:ring-4 focus:ring-cyan-300 dark:bg-cyan-600 dark:hover:bg-cyan-700 dark:focus:ring-cyan-800"
+              >
+                Get access&nbsp;
+                <svg
+                  className="ms-2 h-3.5 w-3.5 rtl:rotate-180"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 14 10"
+                >
+                  <path
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M1 5h12m0 0L9 1m4 4L9 9"
+                  />
+                </svg>
+              </a>
+            </div>
+
+            <Button.Group>
+              <Button color="gray" onClick={() => setOpenModal(true)}>Add</Button>
+              <Button color="gray">Delete</Button>
+            </Button.Group>
+
+          </Drawer.Items>
+        </Drawer>
+      </Panel>
+
       <Controls />
+
+      <Modal show={openModal} size="xl" onClose={() => setOpenModal(false)} popup>
+        <Modal.Header />
+        <Modal.Body>
+          <div className="grid grid-cols-3 gap-4 p-4 lg:grid-cols-4">
+            <div className="cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600">
+              <div className="mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600">
+                {actionIcon}
+              </div>
+              <div className="text-center font-medium text-gray-500 dark:text-gray-400">Set Variable</div>
+            </div>
+            <div className="cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600">
+              <div className="mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600">
+                {actionIcon}
+              </div>
+              <div className="text-center font-medium text-gray-500 dark:text-gray-400">Loop</div>
+            </div>
+            <div className="cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600">
+              <div className="mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600">
+                {actionIcon}
+              </div>
+              <div className="text-center font-medium text-gray-500 dark:text-gray-400">Http Call</div>
+            </div>
+            <div className="cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600">
+              <div className="mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600">
+                {actionIcon}
+              </div>
+              <div className="text-center font-medium text-gray-500 dark:text-gray-400">Control Flow</div>
+            </div>
+            <div className="cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600">
+              <div className="mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600">
+                {actionIcon}
+              </div>
+              <div className="text-center font-medium text-gray-500 dark:text-gray-400">Call Workflow</div>
+            </div>
+          </div>
+        </Modal.Body>
+      </Modal>
+
     </ReactFlow>
   );
 }
diff --git a/actionFlow.editor/src/components/nodes/ConditionSection.tsx b/actionFlow.editor/src/components/nodes/ConditionSection.tsx
@@ -4,5 +4,5 @@ export type ConditionSectionData = {
 }
 
 export default function ConditionSection({condition}: ConditionSectionData) {
-    return (condition ? <div>{condition}</div> : <div></div>)
+    return (condition ? <p className="text-xs font-normal text-gray-700 dark:text-gray-400">If {condition}</p> : <div></div>)
 }
diff --git a/actionFlow.editor/src/components/nodes/VariableNode.tsx b/actionFlow.editor/src/components/nodes/VariableNode.tsx
@@ -17,21 +17,30 @@ export default function VariableNode({
   const renderProperties = (data: VariableNodeData) => {
     var properties: React.ReactNode[] = [];
 
-    if(data.properties == null)
+    if (data.properties == null)
       return properties;
 
     for (const key in data.properties) {
-      properties.push(<div key={`variable_1_${key}`}>{key} = {data.properties[key]} </div>)
+      properties.push(<li key={`variable_1_${key}`} className="flex space-x-2 rtl:space-x-reverse items-center">
+        <span className="leading-tight text-xs">{key} = {data.properties[key]}</span>
+      </li>)
     }
 
-    return properties;
+    var list = (
+      <>
+        <ul role="list" className="text-gray-500 dark:text-gray-400">
+          {properties}
+        </ul>
+      </>)
+
+    return list;
   }
 
   return (
     // We add this class to use the same styles as React Flow's default nodes.
-    <div className="react-flow__node-default">
+    <div className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
       <Handle type="target" position={Position.Top} />
-      <div>{data.label}</div>
+      <h5 className="text-xs font-bold dark:text-white">{data.label}</h5>
 
       <ConditionSection condition={data.condition} />
       {renderProperties(data)}

diff --git a/actionFlow.editor/tailwind.config.js b/actionFlow.editor/tailwind.config.js
@@ -0,0 +1,19 @@
+/** @type {import('tailwindcss').Config} */
+
+const flowbite = require("flowbite-react/tailwind");
+
+module.exports = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+    flowbite.content()
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    flowbite.plugin()
+  ],
+  important: true,
+  darkMode: 'media'
+}
+