updated the state with proper Functionality

src/components/flow/components/new.tsx

@@ -6,6 +6,8 @@ import {
   PlusIcon
 } from "@heroicons/react/24/outline";
 import { Fragment, useState } from "react";
+import { RFState, useFlowStore } from "stores/flow.store";
+import { shallow } from "zustand/shallow";
 
 export const New: React.FC<any> = () => {
   let options = [
@@ -31,6 +33,13 @@ export const New: React.FC<any> = () => {
     }
   ];
   const [open, setOpen] = useState(false);
+  const { addNewNode, nodes } = useFlowStore(
+    (state: RFState) => ({
+      addNewNode: state.addNewNode,
+      nodes: state.nodes
+    }),
+    shallow
+  );
   return (
     <Listbox>
       <Listbox.Button
@@ -62,6 +71,7 @@ export const New: React.FC<any> = () => {
                 "text-gray-900 relative cursor-pointer select-none py-2 pl-3 pr-9 hover:bg-indigo-600 hover:text-white"
               }
               value={item}
+              onClick={() => addNewNode([])}
             >
               <div className="flex items-center">
                 {item["icon"]}

src/components/flow/edge/general.tsx

@@ -1,17 +1,10 @@
-import { Listbox, Transition } from "@headlessui/react";
 import {
   ArrowPathRoundedSquareIcon,
   CodeBracketSquareIcon,
-  HashtagIcon,
-  PlusIcon
+  HashtagIcon
 } from "@heroicons/react/24/outline";
-import { Fragment, useState } from "react";
-import {
-  BaseEdge,
-  EdgeLabelRenderer,
-  EdgeProps,
-  getStraightPath
-} from "reactflow";
+import { useState } from "react";
+import { BaseEdge, EdgeProps, getSmoothStepPath } from "reactflow";
 
 // export default function CustomEdge() {
 export const DefaultEdge: React.FC<EdgeProps> = ({
@@ -41,7 +34,7 @@ export const DefaultEdge: React.FC<EdgeProps> = ({
     }
   ];
   const [open, setOpen] = useState(false);
-  const [edgePath, labelX, labelY] = getStraightPath({
+  const [edgePath, labelX, labelY] = getSmoothStepPath({
     sourceX,
     sourceY,
     targetX,
@@ -53,7 +46,7 @@ export const DefaultEdge: React.FC<EdgeProps> = ({
   return (
     <>
       <BaseEdge id={id} path={edgePath} style={{ backgroundColor: "black" }} />
-      <EdgeLabelRenderer>
+      {/* <EdgeLabelRenderer>
         <div
           style={{
             position: "absolute",
@@ -65,12 +58,6 @@ export const DefaultEdge: React.FC<EdgeProps> = ({
           }}
           className="nodrag nopan"
         >
-          {/* <button
-            className="edgebutton"
-            onClick={() => console.log("Got click")}
-          >
-            ×
-          </button> */}
           <Listbox>
             <Listbox.Button
               className="relative rounded-full p-1 text-blue-600 shadow-sm hover:shadow-md bg-white font-bold"
@@ -118,7 +105,7 @@ export const DefaultEdge: React.FC<EdgeProps> = ({
             </Transition>
           </Listbox>
         </div>
-      </EdgeLabelRenderer>
+      </EdgeLabelRenderer> */}
     </>
   );
 };

src/components/flow/edge/no.tsx

@@ -1,11 +1,5 @@
 import { useState } from "react";
-import {
-  BaseEdge,
-  EdgeLabelRenderer,
-  EdgeProps,
-  getSmoothStepPath
-} from "reactflow";
-import { New } from "../components";
+import { BaseEdge, EdgeProps, getSmoothStepPath } from "reactflow";
 
 export const NoEdge: React.FC<EdgeProps> = ({
   id,
@@ -29,7 +23,7 @@ export const NoEdge: React.FC<EdgeProps> = ({
   return (
     <>
       <BaseEdge id={id} path={edgePath} style={{ backgroundColor: "black" }} />
-      <EdgeLabelRenderer>
+      {/* <EdgeLabelRenderer>
         <div
           style={{
             position: "absolute",
@@ -44,7 +38,7 @@ export const NoEdge: React.FC<EdgeProps> = ({
         >
           <New></New>
         </div>
-      </EdgeLabelRenderer>
+      </EdgeLabelRenderer> */}
     </>
   );
 };

src/components/flow/edge/yes.tsx

@@ -1,10 +1,4 @@
-import {
-  BaseEdge,
-  EdgeLabelRenderer,
-  EdgeProps,
-  getSmoothStepPath
-} from "reactflow";
-import { New } from "../components";
+import { BaseEdge, EdgeProps, getSmoothStepPath } from "reactflow";
 
 export type GetSpecialPathParams = {
   sourceX: number;
@@ -56,7 +50,7 @@ export const YesEdge: React.FC<EdgeProps> = ({
   return (
     <>
       <BaseEdge id={id} path={edgePath} style={{ backgroundColor: "black" }} />
-      <EdgeLabelRenderer>
+      {/* <EdgeLabelRenderer>
         <div
           style={{
             position: "absolute",
@@ -70,16 +64,9 @@ export const YesEdge: React.FC<EdgeProps> = ({
           }}
           className="nodrag nopan"
         >
-          {/* <button
-            className="edgebutton"
-            onClick={() => console.log("Got click")}
-          >
-            ×
-          </button> */}
-
           <New></New>
         </div>
-      </EdgeLabelRenderer>
+      </EdgeLabelRenderer> */}
     </>
   );
 };

src/components/flow/form.tsx

@@ -0,0 +1,79 @@
+import { Typography } from "@material-tailwind/react";
+
+function classNames(...classes: any) {
+  return classes.filter(Boolean).join(" ");
+}
+export interface WorkflowFormParm {
+  title: string;
+}
+
+export const WorkflowForm: React.FC<WorkflowFormParm> = ({ title }) => {
+  return (
+    <>
+      <div className="pl-4 py-4 shadow-md lg:flex lg:items-center lg:justify-between">
+        <div className="min-w-0">
+          <h2 className="text-lg font-bold leading-7 text-gray-900 sm:truncate sm:tracking-tight">
+            Back End Developer
+          </h2>
+        </div>
+        <div className="mt-5 flex lg:ml-4 lg:mt-0">
+          {/* <span className="hidden sm:block">
+            <button
+              type="button"
+              className="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+            >
+              <PencilIcon
+                className="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400"
+                aria-hidden="true"
+              />
+            </button>
+          </span> */}
+
+          {/* <span className="sm:ml-3">
+            <button
+              type="button"
+              className="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+            >
+              <CheckIcon
+                className="-ml-0.5 mr-1.5 h-5 w-5"
+                aria-hidden="true"
+              />
+              Save
+            </button>
+          </span> */}
+        </div>
+      </div>
+      <div className="flex ">
+        <Typography variant="h5" color="blue-gray">
+          Recent Transactions
+        </Typography>
+      </div>
+      {/* <Card className="w-full">
+        <CardHeader
+          floated={false}
+          shadow={false}
+          className="rounded-none bg-indigo-200"
+        >
+          <div className="mb-4 flex ">
+            <Typography variant="h5" color="blue-gray">
+              Recent Transactions
+            </Typography>
+          </div>
+        </CardHeader>
+        <CardBody>
+          <Typography variant="h5" color="blue-gray" className="mb-2">
+            UI/UX Review Check
+          </Typography>
+          <Typography>
+            The place is close to Barceloneta Beach and bus stop just 2 min by
+            walk and near to &quot;Naviglio&quot; where you can enjoy the main
+            night life in Barcelona.
+          </Typography>
+        </CardBody>
+        <CardFooter className="pt-0">
+          <Button>Read More</Button>
+        </CardFooter>
+      </Card> */}
+    </>
+  );
+};

src/components/flow/node/action.tsx

@@ -1,12 +1,18 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { NodeProps, Position, useNodeId } from "reactflow";
+import { classNames } from "..";
 import CustomHandle from "../handler/test";
 
 export const ActionNode: React.FC<NodeProps> = ({ data, xPos, yPos }) => {
   const [selected, setValueSelected] = useState({} as any);
   const [open, setOpen] = useState(false);
   const nodeId = useNodeId();
-  console.log("x - ", xPos, ", y -", yPos);
+  let bgColor =
+    data?.payload?.type_field == "Assertion" ? "bg-red-100" : "bg-indigo-100";
+
+  useEffect(() => {
+    classNames;
+  }, [data]);
   return (
     <>
       <CustomHandle
@@ -17,9 +23,14 @@ export const ActionNode: React.FC<NodeProps> = ({ data, xPos, yPos }) => {
         isConnectable={true}
         isConnectableStart={false}
       />
-      <div className="h-10 w-44 border-white bg-indigo-400 rounded-lg shadow-sm hover:shadow-md">
-        <div className="self-center p-2 align-middle text-center">
-          [ {data.label} ]{/* [ {data?.payload?.type_field} ] */}
+      <div
+        className={classNames(
+          "h-10 w-44 border-white rounded-lg shadow-sm hover:shadow-md",
+          bgColor
+        )}
+      >
+        <div className="self-center p-2 align-middle text-center ">
+          [ {data?.payload?.type_field} ] - {data?.payload?.name}
         </div>
       </div>
 

src/components/flow/node/condition.tsx

@@ -6,7 +6,6 @@ export const ConditionalNode: React.FC<NodeProps> = ({ data, xPos, yPos }) => {
   const [selected, setValueSelected] = useState({} as any);
   const [open, setOpen] = useState(false);
   const nodeId = useNodeId();
-  console.log("x - ", xPos, ", y -", yPos);
   return (
     <>
       <CustomHandle
@@ -17,9 +16,12 @@ export const ConditionalNode: React.FC<NodeProps> = ({ data, xPos, yPos }) => {
         isConnectable={true}
         isConnectableStart={false}
       />
-      <div className="h-10 w-44 border-white bg-indigo-400 rounded-lg shadow-sm hover:shadow-md">
-        <div className="self-center p-2 align-middle text-center">
-          If Condition
+      <div className="w-96 h-10 border-white bg-orange-100 rounded-lg shadow-sm hover:shadow-md">
+        <div className="self-center p-2 align-middle text-center ">
+          <h3 className=" text-ellipsis text-nowrap ">
+            If new more content comming into this Node[ Condition ] -{" "}
+            {data?.payload?.name}
+          </h3>
         </div>
       </div>