flowstudio 0.0.1 → 0.0.2

package/dist/zustand/store.d.ts

@@ -0,0 +1,414 @@
+export declare const useConfigStore: import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<{
+    pageTitle: any;
+    setPageTitle: (title: any) => any;
+    appTheme: any;
+    setAppTheme: (theme: any) => any;
+    stateType: any;
+    setStateType: (state: any) => any;
+    showContextMenu: boolean;
+    setShowContextMenu: () => any;
+    contextMenuPosition: {
+        x: number;
+        y: number;
+    };
+    setContextMenuPosition: () => any;
+    nodesData: any;
+    setNodesData: (payload: any) => any;
+    edgesData: {
+        id: string;
+        source: string;
+        sourceHandle: string;
+        target: string;
+        type: string;
+        animated: boolean;
+    }[];
+    setEdgesData: (payload: any) => any;
+    updateEdgesAnimated: () => any;
+}>, "setState"> & {
+    setState(partial: {
+        pageTitle: any;
+        setPageTitle: (title: any) => any;
+        appTheme: any;
+        setAppTheme: (theme: any) => any;
+        stateType: any;
+        setStateType: (state: any) => any;
+        showContextMenu: boolean;
+        setShowContextMenu: () => any;
+        contextMenuPosition: {
+            x: number;
+            y: number;
+        };
+        setContextMenuPosition: () => any;
+        nodesData: any;
+        setNodesData: (payload: any) => any;
+        edgesData: {
+            id: string;
+            source: string;
+            sourceHandle: string;
+            target: string;
+            type: string;
+            animated: boolean;
+        }[];
+        setEdgesData: (payload: any) => any;
+        updateEdgesAnimated: () => any;
+    } | Partial<{
+        pageTitle: any;
+        setPageTitle: (title: any) => any;
+        appTheme: any;
+        setAppTheme: (theme: any) => any;
+        stateType: any;
+        setStateType: (state: any) => any;
+        showContextMenu: boolean;
+        setShowContextMenu: () => any;
+        contextMenuPosition: {
+            x: number;
+            y: number;
+        };
+        setContextMenuPosition: () => any;
+        nodesData: any;
+        setNodesData: (payload: any) => any;
+        edgesData: {
+            id: string;
+            source: string;
+            sourceHandle: string;
+            target: string;
+            type: string;
+            animated: boolean;
+        }[];
+        setEdgesData: (payload: any) => any;
+        updateEdgesAnimated: () => any;
+    }> | ((state: {
+        pageTitle: any;
+        setPageTitle: (title: any) => any;
+        appTheme: any;
+        setAppTheme: (theme: any) => any;
+        stateType: any;
+        setStateType: (state: any) => any;
+        showContextMenu: boolean;
+        setShowContextMenu: () => any;
+        contextMenuPosition: {
+            x: number;
+            y: number;
+        };
+        setContextMenuPosition: () => any;
+        nodesData: any;
+        setNodesData: (payload: any) => any;
+        edgesData: {
+            id: string;
+            source: string;
+            sourceHandle: string;
+            target: string;
+            type: string;
+            animated: boolean;
+        }[];
+        setEdgesData: (payload: any) => any;
+        updateEdgesAnimated: () => any;
+    }) => {
+        pageTitle: any;
+        setPageTitle: (title: any) => any;
+        appTheme: any;
+        setAppTheme: (theme: any) => any;
+        stateType: any;
+        setStateType: (state: any) => any;
+        showContextMenu: boolean;
+        setShowContextMenu: () => any;
+        contextMenuPosition: {
+            x: number;
+            y: number;
+        };
+        setContextMenuPosition: () => any;
+        nodesData: any;
+        setNodesData: (payload: any) => any;
+        edgesData: {
+            id: string;
+            source: string;
+            sourceHandle: string;
+            target: string;
+            type: string;
+            animated: boolean;
+        }[];
+        setEdgesData: (payload: any) => any;
+        updateEdgesAnimated: () => any;
+    } | Partial<{
+        pageTitle: any;
+        setPageTitle: (title: any) => any;
+        appTheme: any;
+        setAppTheme: (theme: any) => any;
+        stateType: any;
+        setStateType: (state: any) => any;
+        showContextMenu: boolean;
+        setShowContextMenu: () => any;
+        contextMenuPosition: {
+            x: number;
+            y: number;
+        };
+        setContextMenuPosition: () => any;
+        nodesData: any;
+        setNodesData: (payload: any) => any;
+        edgesData: {
+            id: string;
+            source: string;
+            sourceHandle: string;
+            target: string;
+            type: string;
+            animated: boolean;
+        }[];
+        setEdgesData: (payload: any) => any;
+        updateEdgesAnimated: () => any;
+    }>), replace?: false | undefined, action?: (string | {
+        [x: string]: unknown;
+        [x: number]: unknown;
+        [x: symbol]: unknown;
+        type: string;
+    }) | undefined): void;
+    setState(state: {
+        pageTitle: any;
+        setPageTitle: (title: any) => any;
+        appTheme: any;
+        setAppTheme: (theme: any) => any;
+        stateType: any;
+        setStateType: (state: any) => any;
+        showContextMenu: boolean;
+        setShowContextMenu: () => any;
+        contextMenuPosition: {
+            x: number;
+            y: number;
+        };
+        setContextMenuPosition: () => any;
+        nodesData: any;
+        setNodesData: (payload: any) => any;
+        edgesData: {
+            id: string;
+            source: string;
+            sourceHandle: string;
+            target: string;
+            type: string;
+            animated: boolean;
+        }[];
+        setEdgesData: (payload: any) => any;
+        updateEdgesAnimated: () => any;
+    } | ((state: {
+        pageTitle: any;
+        setPageTitle: (title: any) => any;
+        appTheme: any;
+        setAppTheme: (theme: any) => any;
+        stateType: any;
+        setStateType: (state: any) => any;
+        showContextMenu: boolean;
+        setShowContextMenu: () => any;
+        contextMenuPosition: {
+            x: number;
+            y: number;
+        };
+        setContextMenuPosition: () => any;
+        nodesData: any;
+        setNodesData: (payload: any) => any;
+        edgesData: {
+            id: string;
+            source: string;
+            sourceHandle: string;
+            target: string;
+            type: string;
+            animated: boolean;
+        }[];
+        setEdgesData: (payload: any) => any;
+        updateEdgesAnimated: () => any;
+    }) => {
+        pageTitle: any;
+        setPageTitle: (title: any) => any;
+        appTheme: any;
+        setAppTheme: (theme: any) => any;
+        stateType: any;
+        setStateType: (state: any) => any;
+        showContextMenu: boolean;
+        setShowContextMenu: () => any;
+        contextMenuPosition: {
+            x: number;
+            y: number;
+        };
+        setContextMenuPosition: () => any;
+        nodesData: any;
+        setNodesData: (payload: any) => any;
+        edgesData: {
+            id: string;
+            source: string;
+            sourceHandle: string;
+            target: string;
+            type: string;
+            animated: boolean;
+        }[];
+        setEdgesData: (payload: any) => any;
+        updateEdgesAnimated: () => any;
+    }), replace: true, action?: (string | {
+        [x: string]: unknown;
+        [x: number]: unknown;
+        [x: symbol]: unknown;
+        type: string;
+    }) | undefined): void;
+}, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<{
+            pageTitle: any;
+            setPageTitle: (title: any) => any;
+            appTheme: any;
+            setAppTheme: (theme: any) => any;
+            stateType: any;
+            setStateType: (state: any) => any;
+            showContextMenu: boolean;
+            setShowContextMenu: () => any;
+            contextMenuPosition: {
+                x: number;
+                y: number;
+            };
+            setContextMenuPosition: () => any;
+            nodesData: any;
+            setNodesData: (payload: any) => any;
+            edgesData: {
+                id: string;
+                source: string;
+                sourceHandle: string;
+                target: string;
+                type: string;
+                animated: boolean;
+            }[];
+            setEdgesData: (payload: any) => any;
+            updateEdgesAnimated: () => any;
+        }, {
+            pageTitle: any;
+            setPageTitle: (title: any) => any;
+            appTheme: any;
+            setAppTheme: (theme: any) => any;
+            stateType: any;
+            setStateType: (state: any) => any;
+            showContextMenu: boolean;
+            setShowContextMenu: () => any;
+            contextMenuPosition: {
+                x: number;
+                y: number;
+            };
+            setContextMenuPosition: () => any;
+            nodesData: any;
+            setNodesData: (payload: any) => any;
+            edgesData: {
+                id: string;
+                source: string;
+                sourceHandle: string;
+                target: string;
+                type: string;
+                animated: boolean;
+            }[];
+            setEdgesData: (payload: any) => any;
+            updateEdgesAnimated: () => any;
+        }>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: {
+            pageTitle: any;
+            setPageTitle: (title: any) => any;
+            appTheme: any;
+            setAppTheme: (theme: any) => any;
+            stateType: any;
+            setStateType: (state: any) => any;
+            showContextMenu: boolean;
+            setShowContextMenu: () => any;
+            contextMenuPosition: {
+                x: number;
+                y: number;
+            };
+            setContextMenuPosition: () => any;
+            nodesData: any;
+            setNodesData: (payload: any) => any;
+            edgesData: {
+                id: string;
+                source: string;
+                sourceHandle: string;
+                target: string;
+                type: string;
+                animated: boolean;
+            }[];
+            setEdgesData: (payload: any) => any;
+            updateEdgesAnimated: () => any;
+        }) => void) => () => void;
+        onFinishHydration: (fn: (state: {
+            pageTitle: any;
+            setPageTitle: (title: any) => any;
+            appTheme: any;
+            setAppTheme: (theme: any) => any;
+            stateType: any;
+            setStateType: (state: any) => any;
+            showContextMenu: boolean;
+            setShowContextMenu: () => any;
+            contextMenuPosition: {
+                x: number;
+                y: number;
+            };
+            setContextMenuPosition: () => any;
+            nodesData: any;
+            setNodesData: (payload: any) => any;
+            edgesData: {
+                id: string;
+                source: string;
+                sourceHandle: string;
+                target: string;
+                type: string;
+                animated: boolean;
+            }[];
+            setEdgesData: (payload: any) => any;
+            updateEdgesAnimated: () => any;
+        }) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<{
+            pageTitle: any;
+            setPageTitle: (title: any) => any;
+            appTheme: any;
+            setAppTheme: (theme: any) => any;
+            stateType: any;
+            setStateType: (state: any) => any;
+            showContextMenu: boolean;
+            setShowContextMenu: () => any;
+            contextMenuPosition: {
+                x: number;
+                y: number;
+            };
+            setContextMenuPosition: () => any;
+            nodesData: any;
+            setNodesData: (payload: any) => any;
+            edgesData: {
+                id: string;
+                source: string;
+                sourceHandle: string;
+                target: string;
+                type: string;
+                animated: boolean;
+            }[];
+            setEdgesData: (payload: any) => any;
+            updateEdgesAnimated: () => any;
+        }, {
+            pageTitle: any;
+            setPageTitle: (title: any) => any;
+            appTheme: any;
+            setAppTheme: (theme: any) => any;
+            stateType: any;
+            setStateType: (state: any) => any;
+            showContextMenu: boolean;
+            setShowContextMenu: () => any;
+            contextMenuPosition: {
+                x: number;
+                y: number;
+            };
+            setContextMenuPosition: () => any;
+            nodesData: any;
+            setNodesData: (payload: any) => any;
+            edgesData: {
+                id: string;
+                source: string;
+                sourceHandle: string;
+                target: string;
+                type: string;
+                animated: boolean;
+            }[];
+            setEdgesData: (payload: any) => any;
+            updateEdgesAnimated: () => any;
+        }>>;
+    };
+}>;

package/dist/zustand/store.js

@@ -0,0 +1,47 @@
+import { create } from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+const configStore = (set) => ({
+    pageTitle: ``,
+    setPageTitle: (title) => set(() => ({ pageTitle: `${title}` })),
+    appTheme: `light`,
+    setAppTheme: (theme) => set(() => ({ appTheme: `${theme}` })),
+    stateType: `build`,
+    setStateType: (state) => set(() => ({ stateType: `${state}` })),
+    showContextMenu: false,
+    setShowContextMenu: () => set((state) => ({ showContextMenu: state })),
+    contextMenuPosition: { x: 0, y: 0 },
+    setContextMenuPosition: () => set((state) => ({ contextMenuPosition: state })),
+    nodesData: [
+        { id: 'node-1', type: 'startNode', dragHandle: '.drag-handle', position: { x: 100, y: 200 }, data: { id: 1, type: "start", value: 123, message: 'Welcome [Michelle] to Grow For Me:', inputs: [{ id: 1, type: 'choice', text: 'I want to Fund/Sponsor' }, { id: 2, type: 'choice', text: 'Check Fund Updates' }, { id: 3, type: 'choice', text: 'I want to Buy' }, { id: 4, type: 'choice', text: 'I want to Sell' }, { id: 5, type: 'choice', text: 'I am a Farmer' }] } },
+        { id: 'node-2', type: 'normalNode', dragHandle: '.drag-handle', position: { x: 450, y: 50 }, data: { id: 2, type: "normal", value: 321, message: 'Will you like to Sponsor/Fund a Campaign?', inputs: [{ id: 1, type: 'choice', text: 'Yes' }, { id: 2, type: 'choice', text: 'No' }] } },
+        { id: 'node-3', type: 'normalNode', dragHandle: '.drag-handle', position: { x: 500, y: 500 }, data: { id: 3, type: "normal", value: 321, message: 'Will you like to check your Fund Updates?', inputs: [{ id: 1, type: 'choice', text: 'Yes' }, { id: 2, type: 'choice', text: 'No' }] } },
+        { id: 'node-4', type: 'normalNode', dragHandle: '.drag-handle', position: { x: 800, y: 60 }, data: { id: 4, type: "normal", value: 321, message: 'How many units will you like to fund?', inputs: [{ id: 1, type: 'user_input', text: '', inputType: 'number' }] } },
+        { id: 'node-5', type: 'normalNode', dragHandle: '.drag-handle', position: { x: 830, y: 370 }, data: { id: 5, type: "normal", value: 3281, message: 'Is that all you be doing for now?', inputs: [{ id: 1, type: 'choice', text: 'Yes for now' }, { id: 2, type: 'choice', text: 'No, I want to see more' }] } },
+        { id: 'node-6', type: 'endNode', dragHandle: '.drag-handle', position: { x: 1500, y: 200 }, data: { id: 6, type: "end", value: 3121, message: 'Thank you for trying our service.' } },
+        { id: 'node-7', type: 'endNode', dragHandle: '.drag-handle', position: { x: 1300, y: 600 }, data: { id: 7, type: "end", value: 3122, message: 'We will surely get back to you with more information' } },
+    ],
+    setNodesData: (payload) => set((state) => ({ ...state, nodesData: payload })),
+    // edgesData: [],
+    edgesData: [
+        { id: 'e1-1', source: 'node-1', sourceHandle: '1', target: 'node-2', type: 'smoothstep', animated: false },
+        { id: 'e1-2', source: 'node-1', sourceHandle: '2', target: 'node-3', type: 'smoothstep', animated: true },
+        { id: 'e1-3', source: 'node-2', sourceHandle: '1', target: 'node-4', type: 'smoothstep', animated: false },
+        { id: 'e1-4', source: 'node-3', sourceHandle: '1', target: 'node-5', type: 'smoothstep', animated: true },
+        { id: 'e1-5', source: 'node-3', sourceHandle: '2', target: 'node-6', type: 'smoothstep', animated: false },
+        { id: 'e1-6', source: 'node-4', sourceHandle: '1', target: 'node-6', type: 'smoothstep', animated: false },
+        { id: 'e1-7', source: 'node-5', sourceHandle: '1', target: 'node-6', type: 'smoothstep', animated: false },
+        { id: 'e1-8', source: 'node-5', sourceHandle: '2', target: 'node-7', type: 'smoothstep', animated: true },
+    ],
+    setEdgesData: (payload) => set((state) => ({ ...state, edgesData: payload })),
+    updateEdgesAnimated: () => set((state) => ({
+        edgesData: state.edgesData.map((edge) => ({
+            ...edge,
+            animated: state.stateType === 'build' ? false : true,
+        }))
+    })),
+});
+// Apply middlewares (devtools and persist)
+export const useConfigStore = create(devtools(persist(configStore, { name: 'uxxd_config' })));
+// configStore = devtools(configStore);
+// configStore = persist(configStore, { name: 'uxxd_config' });
+// export const useConfigStore = create(configStore)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowstudio",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": false,
   "description": "Enterprise Flow Designer",
   "license": "MIT",
@@ -14,10 +14,21 @@
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
+    "@hookform/resolvers": "latest",
+    "@radix-ui/react-form": "latest",
+    "@radix-ui/react-icons": "latest",
+    "@radix-ui/themes": "latest",
+    "@tanstack/react-query": "latest",
     "@types/node": "latest",
-    "@types/react": "^19.0.12",
+    "@types/react": "latest",
+    "@xyflow/react": "latest",
+    "html-react-parser": "^5.2.2",
+    "lucide-react": "latest",
+    "react-hook-form": "latest",
     "react-icons": "latest",
-    "typescript": "latest"
+    "typescript": "latest",
+    "yup": "latest",
+    "zustand": "latest"
   },
   "files": [
     "dist/**/*"