feat: work on the node param components

src/components/Workflow/NodeParam/NodeBooleanParam.tsx

@@ -0,0 +1,24 @@
+import { Switch } from "@mui/material";
+import { NodeParamProps } from "./NodeParam";
+
+interface Props extends NodeParamProps {
+  value: boolean;
+
+  onChange: (value: boolean) => void;
+}
+
+export default function NodeBooleanParam({
+  htmlFor,
+  paramKey,
+  paramConfig,
+  value,
+  onChange,
+}: Props) {
+  return (
+    <Switch
+      id={htmlFor}
+      checked={value}
+      onChange={(e) => onChange(e.target.checked)}
+    />
+  );
+}

src/components/Workflow/NodeParam/NodeJsonParam.tsx

@@ -0,0 +1,111 @@
+import { useAtom } from "jotai";
+import stringify from "json-stable-stringify-without-jsonify";
+import { useState } from "react";
+
+import { Typography } from "@mui/material";
+import CodeEditor from "@src/components/CodeEditor";
+import ReactJson, { InteractionProps } from "react-json-view";
+
+import TabContext from "@mui/lab/TabContext";
+import TabList from "@mui/lab/TabList";
+import TabPanel from "@mui/lab/TabPanel";
+import { Box, FormHelperText, Tab, useTheme } from "@mui/material";
+
+import { jsonEditorAtom, projectScope } from "@src/atoms/projectScope";
+import { fieldSx } from "@src/components/SideDrawer/utils";
+
+const isValidJson = (val: any) => {
+  try {
+    if (typeof val === "string") JSON.parse(val);
+    else JSON.stringify(val);
+  } catch (error) {
+    return false;
+  }
+  return true;
+};
+
+export default function Json() {
+  const theme = useTheme();
+
+  const [editor, setEditor] = useAtom(jsonEditorAtom, projectScope);
+  const [codeValid, setCodeValid] = useState(true);
+
+  let isArray = true;
+
+  const baseValue = isArray ? [] : {};
+  const formattedJson = stringify(baseValue, { space: 2 });
+  const sanitizedValue = JSON.parse(formattedJson);
+
+  const handleEdit = (edit: InteractionProps) => {};
+
+  return (
+    <TabContext value={editor}>
+      <TabList
+        onChange={(_, newValue) => {
+          setEditor(newValue);
+          setCodeValid(true);
+        }}
+        aria-label="JSON editor"
+        variant="standard"
+        sx={{
+          minHeight: 32,
+          //   mt: -32 / 8,
+          ".MuiPopover-root &": { mt: 0 }, // Don’t have margins in popover cell
+
+          "& .MuiTabs-flexContainer": {
+            justifyContent: "flex-end",
+            ".MuiPopover-root &": {
+              justifyContent: "center",
+            },
+          },
+          "& .MuiTab-root": { minHeight: 32, py: 0 },
+        }}
+      >
+        <Tab label="Tree" value="tree" />
+        <Tab label="Code" value="code" />
+      </TabList>
+
+      <TabPanel value="tree" sx={{ p: 0 }}>
+        <Box sx={[fieldSx, { overflowX: "auto", typography: "caption" }]}>
+          <ReactJson
+            src={sanitizedValue}
+            onEdit={handleEdit}
+            onAdd={handleEdit}
+            onDelete={handleEdit}
+            theme={theme.palette.mode === "dark" ? "monokai" : "rjv-default"}
+            iconStyle="triangle"
+            style={{
+              fontFamily: theme.typography.fontFamilyMono,
+              backgroundColor: "transparent",
+              minHeight: 100 - 4 - 4,
+            }}
+            quotesOnKeys={false}
+            sortKeys
+          />
+        </Box>
+      </TabPanel>
+
+      <TabPanel value="code" sx={{ p: 0 }}>
+        <CodeEditor
+          defaultLanguage="json"
+          value={formattedJson || "{\n  \n}"}
+          onValidStatusUpdate={({ isValid }) => setCodeValid(isValid)}
+          error={!codeValid}
+          width={undefined}
+          fullScreenTitle={
+            <>
+              <Typography variant="h6" component="div" style={{ flexGrow: 1 }}>
+                JSON editor
+              </Typography>
+            </>
+          }
+        />
+        {!codeValid && (
+          <FormHelperText error variant="filled">
+            Invalid JSON
+          </FormHelperText>
+        )}
+      </TabPanel>
+    </TabContext>
+  );
+}

src/components/Workflow/NodeParam/NodeNullParam.tsx

@@ -0,0 +1,22 @@
+import { Typography } from "@mui/material";
+import { NodeParamProps } from "./NodeParam";
+
+interface Props extends NodeParamProps {
+  value: string;
+
+  onChange: (value: string) => void;
+}
+
+export default function NodeNullParam({
+  htmlFor,
+  paramKey,
+  paramConfig,
+  value,
+  onChange,
+}: Props) {
+  return (
+    <Typography component="code" variant="body2">
+      null
+    </Typography>
+  );
+}

src/components/Workflow/NodeParam/NodeNumberParam.tsx

@@ -0,0 +1,33 @@
+import { Box } from "@mui/material";
+import { NodeParamProps } from "./NodeParam";
+
+interface Props extends NodeParamProps {
+  value: string;
+
+  onChange: (value: number) => void;
+}
+
+export default function NodeNumberParam({
+  htmlFor,
+  paramKey,
+  paramConfig,
+  value,
+  onChange,
+}: Props) {
+  return (
+    <Box
+      component="input"
+      id={htmlFor}
+      type="number"
+      value={value}
+      onChange={(e) => onChange(Number(e.target.value))}
+      height={24}
+      width={140}
+      px={1}
+      border={0}
+      borderRadius={1}
+      bgcolor="background.default"
+      sx={(theme) => ({ outlineColor: theme.palette.primary.main })}
+    />
+  );
+}

src/components/Workflow/NodeParam/NodeParam.tsx

@@ -22,6 +22,16 @@ const NodeParam: FC<NodeParamProps> = ({
   value,
   onChange,
 }) => {
+  if (paramConfig.type === "object" || paramConfig.type === "array")
+    return (
+      <NodeParamField
+        htmlFor={htmlFor}
+        paramKey={paramKey}
+        paramConfig={paramConfig}
+        value={value}
+        onChange={onChange}
+      />
+    );
   return (
     <Stack direction="row">
       <Tooltip title={paramConfig.description}>

src/components/Workflow/NodeParam/NodeParamField.tsx

@@ -1,6 +1,10 @@
 import NodeStringParam from "@src/components/Workflow/NodeParam/NodeStringParam";
 import { ParamConfig } from "@src/components/Workflow/type";
 import { FC } from "react";
+import NodeBooleanParam from "./NodeBooleanParam";
+import NodeJsonParam from "./NodeJsonParam";
+import NodeNullParam from "./NodeNullParam";
+import NodeNumberParam from "./NodeNumberParam";
 import NodeSelectParam from "./NodeSelectParam";
 
 interface Props {
@@ -30,11 +34,39 @@ const NodeParamField: FC<Props> = ({
         />
       );
     case "number":
+      return (
+        <NodeNumberParam
+          htmlFor={htmlFor}
+          paramKey={paramKey}
+          paramConfig={paramConfig}
+          value={value}
+          onChange={onChange}
+        />
+      );
     case "boolean":
+      return (
+        <NodeBooleanParam
+          htmlFor={htmlFor}
+          paramKey={paramKey}
+          paramConfig={paramConfig}
+          value={value}
+          onChange={onChange}
+        />
+      );
     case "object":
     case "array":
+      return <NodeJsonParam />;
     case "null":
-    case "any":
+      return (
+        <NodeNullParam
+          htmlFor={htmlFor}
+          paramKey={paramKey}
+          paramConfig={paramConfig}
+          value={value}
+          onChange={onChange}
+        />
+      );
+
     case "select":
       return (
         <NodeSelectParam
@@ -46,6 +78,7 @@ const NodeParamField: FC<Props> = ({
         />
       );
     case "steps":
+    case "any":
       return <div>TODO</div>;
   }
 };

src/components/fields/Json/SideDrawerField.tsx

@@ -1,21 +1,21 @@
-import { useState } from "react";
+import { ISideDrawerFieldProps } from "@src/components/fields/types";
 import { useAtom } from "jotai";
 import stringify from "json-stable-stringify-without-jsonify";
-import { ISideDrawerFieldProps } from "@src/components/fields/types";
+import { useState } from "react";
 
-import ReactJson, { InteractionProps } from "react-json-view";
-import CodeEditor from "@src/components/CodeEditor";
-import { Typography, Tooltip } from "@mui/material";
-import VisibilityOffIcon from "@mui/icons-material/VisibilityOffOutlined";
 import LockIcon from "@mui/icons-material/LockOutlined";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOffOutlined";
+import { Tooltip, Typography } from "@mui/material";
+import CodeEditor from "@src/components/CodeEditor";
+import ReactJson, { InteractionProps } from "react-json-view";
 
-import { useTheme, Box, Tab, FormHelperText } from "@mui/material";
 import TabContext from "@mui/lab/TabContext";
 import TabList from "@mui/lab/TabList";
 import TabPanel from "@mui/lab/TabPanel";
+import { Box, FormHelperText, Tab, useTheme } from "@mui/material";
 
-import { fieldSx, getFieldId } from "@src/components/SideDrawer/utils";
-import { projectScope, jsonEditorAtom } from "@src/atoms/projectScope";
+import { jsonEditorAtom, projectScope } from "@src/atoms/projectScope";
+import { fieldSx } from "@src/components/SideDrawer/utils";
 import config from ".";
 
 const isValidJson = (val: any) => {