@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/apps/diagramming/src/sample-workflow-content.ts

@@ -1,55 +1,55 @@
-// Define the structure of the form data
-import { FormElementBase } from '@flowuent-labs/diagrams';
-
-export const sampleWorkflowContent: FormElementBase = {
-  type: "Form",
-  props: {
-    title: "User Registration", // Title for the form
-    children: [
-      /*{
-        type: "TextField",
-        props: {
-          name: "fullName",
-          label: "Full Name",
-        },
-      },
-      {
-        type: "TextField",
-        props: {
-          name: "email",
-          label: "Email Address",
-          type: "email",
-        },
-      },
-      {
-        type: "TextField",
-        props: {
-          name: "age",
-          label: "Age",
-          type: "number",
-        },
-      },
-      {
-        type: "Switch",
-        props: {
-          name: "notifications",
-          label: "Enable Notifications",
-        },
-      },
-      {
-        type: "Select",
-        props: {
-          name: "country",
-          label: "Country",
-          options: [
-            { value: "us", label: "United States" },
-            { value: "ca", label: "Canada" },
-            { value: "uk", label: "United Kingdom" },
-            { value: "au", label: "Australia" },
-          ],
-        },
-      },*/
-    ],
-  },
-};
-
+// Define the structure of the form data
+import { FormElementBase } from '@flowuent-labs/diagrams';
+
+export const sampleWorkflowContent: FormElementBase = {
+  type: "Form",
+  props: {
+    title: "User Registration", // Title for the form
+    children: [
+      /*{
+        type: "TextField",
+        props: {
+          name: "fullName",
+          label: "Full Name",
+        },
+      },
+      {
+        type: "TextField",
+        props: {
+          name: "email",
+          label: "Email Address",
+          type: "email",
+        },
+      },
+      {
+        type: "TextField",
+        props: {
+          name: "age",
+          label: "Age",
+          type: "number",
+        },
+      },
+      {
+        type: "Switch",
+        props: {
+          name: "notifications",
+          label: "Enable Notifications",
+        },
+      },
+      {
+        type: "Select",
+        props: {
+          name: "country",
+          label: "Country",
+          options: [
+            { value: "us", label: "United States" },
+            { value: "ca", label: "Canada" },
+            { value: "uk", label: "United Kingdom" },
+            { value: "au", label: "Australia" },
+          ],
+        },
+      },*/
+    ],
+  },
+};
+

package/apps/diagramming/src/stencil-items.ts

@@ -1,31 +1,31 @@
-import { StencilItemType } from './stencil-item';
-
-export const stencilItems: StencilItemType[] = [
-  {
-    id: 'stencil-text-component',
-    data: { type: '', data: { label: 'text' } },
-    label: 'Field',
-    iconName: 'field',
-  },
-  {
-    id: 'workflow-node',
-    data: { type: 'workflow', data: { label: 'text' } },
-    label: 'workflow-node',
-    iconName: 'entity',
-  },
-  {
-    id: 'stencil-block-component',
-    data: {
-      type: 'entity',
-      data: { title: 'Block', color: 'green', isBlock: true },
-    }, //optional data that we can use on drop
-    label: 'Entity',
-    iconName: 'entity',
-  },
-  {
-    id: 'stencil-connector-component',
-    data: { type: 'connector', data: { label: 'text' } },
-    label: 'Connector',
-    iconName: 'connector',
-  },
-];
+import { StencilItemType } from './stencil-item';
+
+export const stencilItems: StencilItemType[] = [
+  {
+    id: 'stencil-text-component',
+    data: { type: '', data: { label: 'text' } },
+    label: 'Field',
+    iconName: 'field',
+  },
+  {
+    id: 'workflow-node',
+    data: { type: 'workflow', data: { label: 'text' } },
+    label: 'workflow-node',
+    iconName: 'entity',
+  },
+  {
+    id: 'stencil-block-component',
+    data: {
+      type: 'entity',
+      data: { title: 'Block', color: 'green', isBlock: true },
+    }, //optional data that we can use on drop
+    label: 'Entity',
+    iconName: 'entity',
+  },
+  {
+    id: 'stencil-connector-component',
+    data: { type: 'connector', data: { label: 'text' } },
+    label: 'Connector',
+    iconName: 'connector',
+  },
+];

package/apps/diagramming/src/style.css

@@ -1,13 +1,13 @@
-/*.react-flow__edge-path-selector:hover {*/
-/*    cursor: pointer;*/
-/*}*/
-/*.react-flow__edge-path-selector:hover + .react-flow__edge-path,*/
-/*.react-flow__edge-path:hover {*/
-/*    stroke: #555;*/
-/*    cursor: pointer;*/
-/*}*/
-/*.react-flow__edge-path-selector {*/
-/*    fill: none;*/
-/*    stroke: transparent;*/
-/*    stroke-width: 28;*/
-/*}*/
+/*.react-flow__edge-path-selector:hover {*/
+/*    cursor: pointer;*/
+/*}*/
+/*.react-flow__edge-path-selector:hover + .react-flow__edge-path,*/
+/*.react-flow__edge-path:hover {*/
+/*    stroke: #555;*/
+/*    cursor: pointer;*/
+/*}*/
+/*.react-flow__edge-path-selector {*/
+/*    fill: none;*/
+/*    stroke: transparent;*/
+/*    stroke-width: 28;*/
+/*}*/

package/apps/diagramming/src/tabsStore.tsx

@@ -1,152 +1,152 @@
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-import { createSelectors } from './createSelecors';
-import { ICardNode } from '../../../packages/diagrams/src/lib/types/card-node';
-import { Edge, Node } from '@xyflow/react';
-import { Node as ReactFlowNode } from 'reactflow';
-
-interface FunctionObject {
-  id: string;
-  name: string;
-  args: string[];
-  code: string;
-}
-
-// Generic type for nodes that can be either ICardNode, Node from @xyflow/react, or Node from reactflow
-type GenericNode = ICardNode | Node | ReactFlowNode;
-
-interface Tab {
-  id: number;
-  title: string;
-  nodes: GenericNode[];
-  edges: Edge[];
-}
-
-interface TabStore {
-  tabs: Tab[];
-  currentTab: number;
-  availableFunctions: FunctionObject[];
-  setTabs: (tabs: Tab[]) => void;
-  addTab: (defaultNodes: GenericNode[], defaultEdges: Edge[]) => void;
-  removeTab: (index: number) => void;
-  updateTabData: (id: number, newNodes: GenericNode[], newEdges: Edge[]) => void;
-  setCurrentTab: (index: number) => void;
-  addFunction: (id: string, code: string) => void;
-  removeFunction: (id: string) => void;
-  updateFunction: (id: string, code: string) => void;
-  functionExists: (name: string) => boolean;
-}
-
-const parseFunction = (code: string): { name?: string; args?: string[] } => {
-  const functionPattern = /function\s+(\w+)\s*\(([^)]*)\)/;
-  const arrowFunctionPattern = /(\w+)\s*=\s*\(([^)]*)\)\s*=>/;
-  const match = functionPattern.exec(code) || arrowFunctionPattern.exec(code);
-
-  if (match) {
-    const name = match[1];
-    const args = match[2].split(',').map((arg) => arg.trim());
-    return { name, args };
-  }
-
-  return {};
-};
-
-const useTabStoreBase = create<TabStore>()(
-  persist(
-    (set, get) => ({
-      tabs: [
-        {
-          id: 1,
-          title: 'Diagram 1',
-          nodes: [],
-          edges: [],
-        },
-      ],
-      currentTab: 0,
-      availableFunctions: [],
-      setTabs: (tabs) => set({ tabs }),
-      addTab: (defaultNodes, defaultEdges) =>
-        set((state) => ({
-          tabs: [
-            ...state.tabs,
-            {
-              id: state.tabs.length + 1,
-              title: `Diagram ${state.tabs.length + 1}`,
-              nodes: defaultNodes,
-              edges: defaultEdges,
-            },
-          ],
-          currentTab: state.tabs.length, // Focus on new tab
-        })),
-      removeTab: (index) =>
-        set((state) => {
-          const newTabs = state.tabs.filter((_, i) => i !== index);
-          return {
-            tabs: newTabs,
-            currentTab:
-              state.currentTab === index
-                ? Math.max(0, state.currentTab - 1)
-                : state.currentTab,
-          };
-        }),
-      updateTabData: (id, newNodes, newEdges) =>
-        set((state) => ({
-          tabs: state.tabs.map((tab) =>
-            tab.id === id ? { ...tab, nodes: newNodes, edges: newEdges } : tab,
-          ),
-        })),
-      setCurrentTab: (index) => set({ currentTab: index }),
-      addFunction: (id, code) => {
-        const { name, args } = parseFunction(code);
-        if (name && args) {
-          const newFunction = { id, code, args, name };
-          set((state) => ({
-            availableFunctions: [...state.availableFunctions, newFunction],
-          }));
-        }
-      },
-      removeFunction: (id) =>
-        set((state) => ({
-          availableFunctions: state.availableFunctions.filter(
-            (func) => func.id !== id,
-          ),
-        })),
-      updateFunction: (id, code) => {
-        const { name, args } = parseFunction(code);
-        if (name && args) {
-          set((state) => {
-            const functionExists = state.availableFunctions.some(
-              (func) => func.id === id,
-            );
-            if (functionExists) {
-              return {
-                availableFunctions: state.availableFunctions.map((func) =>
-                  func.id === id ? { ...func, id, code, name, args } : func,
-                ),
-              };
-            } else {
-              const newFunction = { id, code, name, args };
-              return {
-                availableFunctions: [...state.availableFunctions, newFunction],
-              };
-            }
-          });
-        }
-      },
-      functionExists: (name) => {
-        const functions = get().availableFunctions;
-        return functions.some((func) => func.name === name);
-      },
-    }),
-    {
-      name: 'tabs-storage', // Name for local storage key
-      partialize: (state) => ({
-        tabs: state.tabs,
-        currentTab: state.currentTab,
-      }), // Exclude `availableFunctions` from persistence
-    },
-  ),
-);
-
-// Apply the createSelectors function to your store
-export const useTabStore = createSelectors(useTabStoreBase);
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { createSelectors } from './createSelecors';
+import { ICardNode } from '../../../packages/diagrams/src/lib/types/card-node';
+import { Edge, Node } from '@xyflow/react';
+import { Node as ReactFlowNode } from 'reactflow';
+
+interface FunctionObject {
+  id: string;
+  name: string;
+  args: string[];
+  code: string;
+}
+
+// Generic type for nodes that can be either ICardNode, Node from @xyflow/react, or Node from reactflow
+type GenericNode = ICardNode | Node | ReactFlowNode;
+
+interface Tab {
+  id: number;
+  title: string;
+  nodes: GenericNode[];
+  edges: Edge[];
+}
+
+interface TabStore {
+  tabs: Tab[];
+  currentTab: number;
+  availableFunctions: FunctionObject[];
+  setTabs: (tabs: Tab[]) => void;
+  addTab: (defaultNodes: GenericNode[], defaultEdges: Edge[]) => void;
+  removeTab: (index: number) => void;
+  updateTabData: (id: number, newNodes: GenericNode[], newEdges: Edge[]) => void;
+  setCurrentTab: (index: number) => void;
+  addFunction: (id: string, code: string) => void;
+  removeFunction: (id: string) => void;
+  updateFunction: (id: string, code: string) => void;
+  functionExists: (name: string) => boolean;
+}
+
+const parseFunction = (code: string): { name?: string; args?: string[] } => {
+  const functionPattern = /function\s+(\w+)\s*\(([^)]*)\)/;
+  const arrowFunctionPattern = /(\w+)\s*=\s*\(([^)]*)\)\s*=>/;
+  const match = functionPattern.exec(code) || arrowFunctionPattern.exec(code);
+
+  if (match) {
+    const name = match[1];
+    const args = match[2].split(',').map((arg) => arg.trim());
+    return { name, args };
+  }
+
+  return {};
+};
+
+const useTabStoreBase = create<TabStore>()(
+  persist(
+    (set, get) => ({
+      tabs: [
+        {
+          id: 1,
+          title: 'Diagram 1',
+          nodes: [],
+          edges: [],
+        },
+      ],
+      currentTab: 0,
+      availableFunctions: [],
+      setTabs: (tabs) => set({ tabs }),
+      addTab: (defaultNodes, defaultEdges) =>
+        set((state) => ({
+          tabs: [
+            ...state.tabs,
+            {
+              id: state.tabs.length + 1,
+              title: `Diagram ${state.tabs.length + 1}`,
+              nodes: defaultNodes,
+              edges: defaultEdges,
+            },
+          ],
+          currentTab: state.tabs.length, // Focus on new tab
+        })),
+      removeTab: (index) =>
+        set((state) => {
+          const newTabs = state.tabs.filter((_, i) => i !== index);
+          return {
+            tabs: newTabs,
+            currentTab:
+              state.currentTab === index
+                ? Math.max(0, state.currentTab - 1)
+                : state.currentTab,
+          };
+        }),
+      updateTabData: (id, newNodes, newEdges) =>
+        set((state) => ({
+          tabs: state.tabs.map((tab) =>
+            tab.id === id ? { ...tab, nodes: newNodes, edges: newEdges } : tab,
+          ),
+        })),
+      setCurrentTab: (index) => set({ currentTab: index }),
+      addFunction: (id, code) => {
+        const { name, args } = parseFunction(code);
+        if (name && args) {
+          const newFunction = { id, code, args, name };
+          set((state) => ({
+            availableFunctions: [...state.availableFunctions, newFunction],
+          }));
+        }
+      },
+      removeFunction: (id) =>
+        set((state) => ({
+          availableFunctions: state.availableFunctions.filter(
+            (func) => func.id !== id,
+          ),
+        })),
+      updateFunction: (id, code) => {
+        const { name, args } = parseFunction(code);
+        if (name && args) {
+          set((state) => {
+            const functionExists = state.availableFunctions.some(
+              (func) => func.id === id,
+            );
+            if (functionExists) {
+              return {
+                availableFunctions: state.availableFunctions.map((func) =>
+                  func.id === id ? { ...func, id, code, name, args } : func,
+                ),
+              };
+            } else {
+              const newFunction = { id, code, name, args };
+              return {
+                availableFunctions: [...state.availableFunctions, newFunction],
+              };
+            }
+          });
+        }
+      },
+      functionExists: (name) => {
+        const functions = get().availableFunctions;
+        return functions.some((func) => func.name === name);
+      },
+    }),
+    {
+      name: 'tabs-storage', // Name for local storage key
+      partialize: (state) => ({
+        tabs: state.tabs,
+        currentTab: state.currentTab,
+      }), // Exclude `availableFunctions` from persistence
+    },
+  ),
+);
+
+// Apply the createSelectors function to your store
+export const useTabStore = createSelectors(useTabStoreBase);

package/apps/diagramming/src/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />

package/apps/diagramming/tsconfig.app.json

@@ -1,23 +1,23 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "types": [
-      "node",
-      "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts",
-      "vite/client"
-    ]
-  },
-  "exclude": [
-    "src/**/*.spec.ts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.js",
-    "src/**/*.test.js",
-    "src/**/*.spec.jsx",
-    "src/**/*.test.jsx"
-  ],
-  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
-}
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ]
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

package/apps/diagramming/tsconfig.json

@@ -1,21 +1,21 @@
-{
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "allowJs": false,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "types": ["vite/client", "vitest"]
-  },
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ],
-  "extends": "../../tsconfig.base.json"
-}
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "types": ["vite/client", "vitest"]
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

package/apps/diagramming/tsconfig.spec.json

@@ -1,28 +1,28 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "types": [
-      "vitest/globals",
-      "vitest/importMeta",
-      "vite/client",
-      "node",
-      "vitest",
-      "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts"
-    ]
-  },
-  "include": [
-    "vite.config.ts",
-    "vitest.config.ts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.ts",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.js",
-    "src/**/*.spec.js",
-    "src/**/*.test.jsx",
-    "src/**/*.spec.jsx",
-    "src/**/*.d.ts"
-  ]
-}
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vitest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}