feat: work on the script node

src/components/Workflow/ScriptNode.tsx

@@ -10,7 +10,9 @@ import NodeParams from "./NodeParams";
 import NodeToolbar from "./NodeToolbar";
 import { NodeMeta, Params } from "./types";
 
-interface IScriptNodeProps {}
+interface IScriptNodeProps {
+  script: string;
+}
 
 const Icon = (props: SVGProps<SVGSVGElement>) => (
   <svg
@@ -36,7 +38,7 @@ const Icon = (props: SVGProps<SVGSVGElement>) => (
   </svg>
 );
 
-const ScriptNode: FC<IScriptNodeProps> = () => {
+const ScriptNode: FC<IScriptNodeProps> = ({ script: scr }) => {
   const [open, setOpen] = useState(false);
 
   const handleToggleCollapse = useCallback(() => {
@@ -52,10 +54,7 @@ const ScriptNode: FC<IScriptNodeProps> = () => {
     [setName]
   );
 
-  const [script, setScript] = useState(`export default function main() {
-  console.log("Hello World!");
-}
-`);
+  const [script, setScript] = useState(scr);
 
   const [params, setParams] = useState<Params>({});
   const [result, setResult] = useState<Params>({});

src/pages/Workflow/WorkflowPage.tsx

@@ -1,4 +1,11 @@
-import { Button, ListItemIcon, Menu, MenuItem, Stack } from "@mui/material";
+import {
+  Button,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Stack,
+} from "@mui/material";
 import {
   Api as ApiIcon,
   ClockOutline as ClockOutlineIcon,
@@ -17,6 +24,103 @@ import {
   usePopupState,
 } from "material-ui-popup-state/hooks";
 import { Fragment, useState } from "react";
+import { transform } from "sucrase";
+
+const addDoc = `export default function addDoc({ path }) {
+  // TODO:
+}
+
+export const meta = {
+  name: "Add Document",
+  description:
+    "Adds a new document to the Firestore collection that you specify",
+};
+
+export const params = {
+  path: {
+    type: "string",
+    label: "Collection Path",
+    description:
+      "The path of the collection to which you want to add the document",
+  },
+  doc: {
+    type: "object",
+    label: "Document Data",
+    description: "The data object to add",
+  },
+};
+`;
+
+const setDoc = `export default function setDoc({ path }) {
+  // TODO:
+}
+
+export const meta = {
+  name: "Set Document",
+  description: "Creates a document to the Firestore document path you specify",
+};
+
+export const params = {
+  path: {
+    type: "string",
+    label: "Document Path",
+    description: "The path of the document you want to create",
+  },
+  merge: {
+    type: "select",
+    label: "Merge Docs",
+    description:
+      "Do you want to merge the new document with the existing document?",
+    options: [
+      { label: "Yes", value: true },
+      { label: "No", value: false },
+    ],
+  },
+  doc: {
+    type: "object",
+    label: "Document Data",
+    description: "The data object to create",
+  },
+};
+`;
+
+const deleteDoc = `export default function deleteDoc({ path }) {
+  // TODO:
+}
+
+export const meta = {
+  name: "Delete Document",
+  description: "Deletes a document from Firestore",
+};
+
+export const params = {
+  path: {
+    type: "string",
+    label: "Document Path",
+    description: "The path of the document you want to delete",
+  },
+};
+`;
+
+const stepsBlocks = [addDoc, setDoc, deleteDoc].map((script) => {
+  const transformedScript = transform(script, {
+    transforms: ["imports", "typescript"],
+  }).code;
+
+  const scriptWithExports = `
+      var exports = {};
+      ${transformedScript}
+      exports;`;
+
+  const {
+    default: fn,
+    meta = {},
+    params = {},
+    result = {},
+  } = eval(scriptWithExports);
+
+  return { fn, meta, params, result, script };
+});
 
 const stepsAtom = atom<any[]>([]);
 
@@ -26,6 +130,11 @@ export default function WorkflowPage() {
     popupId: "addTrigger",
   });
 
+  const addStepPopupState = usePopupState({
+    variant: "popover",
+    popupId: "addStep",
+  });
+
   const [trigger, setTrigger] = useState({
     type: "http",
     method: "get",
@@ -75,17 +184,32 @@ export default function WorkflowPage() {
       <Arrow />
       {steps.map((step, index) => (
         <Fragment key={index}>
-          <ScriptNode key={index} />
+          <ScriptNode key={index} script={step.script} />
           <Arrow />
         </Fragment>
       ))}
-      <Button
-        onClick={() => {
-          setSteps((steps) => [...steps, {}]);
-        }}
+      <Button {...bindToggle(addStepPopupState)}>Add Step</Button>
+      <Menu
+        {...bindPopover(addStepPopupState)}
+        anchorOrigin={{ horizontal: "center", vertical: "bottom" }}
+        transformOrigin={{ horizontal: "center", vertical: "top" }}
       >
-        Add Step
-      </Button>
+        {stepsBlocks.map((step, index) => (
+          <MenuItem
+            key={index}
+            onClick={() => {
+              setSteps((steps) => [...steps, { script: step.script }]);
+              addStepPopupState.close();
+            }}
+            sx={{ width: 300 }}
+          >
+            <ListItemText
+              primary={step.meta.name}
+              secondary={step.meta.description}
+            />
+          </MenuItem>
+        ))}
+      </Menu>
     </Stack>
   );
 }