@flowuent-org/diagramming-core 1.0.5

package/apps/diagramming/src/node-data.ts

@@ -0,0 +1,664 @@
+import { v4 as uuidv4 } from 'uuid';
+import { Edge, MarkerType } from '@xyflow/react';
+import { ICardNode } from '@flowuent-labs/diagrams';
+
+const nodeColors = {
+  blue: 'rgba(100, 181, 246, 0.6)',
+  green: 'rgba(76, 175, 80, 0.6)',
+  orange: 'rgba(255, 152, 0, 0.6)',
+  purple: 'rgba(156, 39, 176, 0.6)',
+  pink: 'rgba(240, 98, 146, 0.6)',
+};
+
+export const classDefaultEdges: Edge[] = [
+  {
+    id: 'edge1',
+    source: 'parentId',
+    target: 'child1Id',
+    type: 'default',
+  },
+  {
+    id: 'edge2',
+    source: 'parentId',
+    target: 'child2Id',
+    type: 'default',
+  },
+  {
+    id: 'edge3',
+    source: 'parentId',
+    target: 'posts',
+    type: 'default',
+  },
+  {
+    id: 'edge4',
+    source: 'posts',
+    target: 'comments',
+    type: 'default',
+  },
+  {
+    id: 'edge5',
+    source: 'parentId',
+    target: 'notifications',
+    type: 'default',
+  },
+];
+
+export const classDefaultNodes: ICardNode[] = [
+  {
+    id: 'parentId',
+    type: 'entity',
+    position: { x: 0, y: 0 },
+    data: {
+      isBlock: true,
+      nodeId: 'parentId',
+      color: 'red',
+      title: 'User',
+      blocks: [
+        { color: 'red', id: uuidv4(), title: 'firstname', type: 'String' },
+        { color: 'red', id: uuidv4(), title: 'lastname', type: 'String' },
+        { color: 'red', id: uuidv4(), title: 'age', type: 'Number' },
+        { color: 'red', id: uuidv4(), title: 'birthdate', type: 'Date' },
+        { color: 'red', id: uuidv4(), title: 'email', type: 'String' },
+        { color: 'red', id: uuidv4(), title: 'password', type: 'String' },
+      ],
+    },
+  },
+  {
+    id: 'child1Id',
+    type: 'entity',
+    position: { x: 50, y: 500 },
+    data: {
+      isBlock: true,
+      nodeId: 'child1Id',
+      color: 'green',
+      title: 'Profile',
+      blocks: [
+        { color: 'red', id: uuidv4(), title: 'bio', type: 'String' },
+        { color: 'red', id: uuidv4(), title: 'avatar', type: 'String' },
+        { color: 'red', id: uuidv4(), title: 'socialLinks', type: 'Array' },
+        { color: 'red', id: uuidv4(), title: 'location', type: 'String' },
+      ],
+    },
+  },
+  {
+    id: 'child2Id',
+    type: 'entity',
+    position: { x: 350, y: 250 },
+    data: {
+      isBlock: true,
+      nodeId: 'child2Id',
+      color: 'green',
+      title: 'Authentication',
+      blocks: [
+        { color: 'red', id: uuidv4(), title: 'token', type: 'String' },
+        { color: 'red', id: uuidv4(), title: 'refreshToken', type: 'String' },
+        { color: 'red', id: uuidv4(), title: 'expiresAt', type: 'Date' },
+        { color: 'red', id: uuidv4(), title: 'lastLogin', type: 'Date' },
+      ],
+    },
+  },
+  {
+    id: 'posts',
+    type: 'entity',
+    position: { x: -300, y: 250 },
+    data: {
+      isBlock: true,
+      nodeId: 'posts',
+      color: 'blue',
+      title: 'Post',
+      blocks: [
+        { color: 'red', id: uuidv4(), title: 'title', type: 'String' },
+        { color: 'red', id: uuidv4(), title: 'content', type: 'String' },
+        { color: 'red', id: uuidv4(), title: 'createdAt', type: 'Date' },
+        { color: 'red', id: uuidv4(), title: 'updatedAt', type: 'Date' },
+        { color: 'red', id: uuidv4(), title: 'tags', type: 'Array' },
+      ],
+    },
+  },
+  {
+    id: 'comments',
+    type: 'entity',
+    position: { x: -300, y: 500 },
+    data: {
+      isBlock: true,
+      nodeId: 'comments',
+      color: 'purple',
+      title: 'Comment',
+      blocks: [
+        { color: 'red', id: uuidv4(), title: 'content', type: 'String' },
+        { color: 'red', id: uuidv4(), title: 'createdAt', type: 'Date' },
+        { color: 'red', id: uuidv4(), title: 'likes', type: 'Number' },
+      ],
+    },
+  },
+  {
+    id: 'notifications',
+    type: 'entity',
+    position: { x: 350, y: 500 },
+    data: {
+      isBlock: true,
+      nodeId: 'notifications',
+      color: 'orange',
+      title: 'Notification',
+      blocks: [
+        { color: 'red', id: uuidv4(), title: 'type', type: 'String' },
+        { color: 'red', id: uuidv4(), title: 'message', type: 'String' },
+        { color: 'red', id: uuidv4(), title: 'isRead', type: 'Boolean' },
+        { color: 'red', id: uuidv4(), title: 'createdAt', type: 'Date' },
+      ],
+    },
+  },
+];
+
+export const workflowDefaultNodesAndEdges = {
+  nodes: [
+    {
+      id: 'workflow-node-main-function',
+      type: 'workflow',
+      position: {
+        x: 1004,
+        y: 200,
+      },
+      draggable: false,
+      data: {
+        formData: {
+          type: 'function',
+          parameters: [{ name: 'limit', type: 'number' }],
+          name: 'categorizeNumbers',
+          body: [],
+        },
+        title: 'workflow',
+        type: 'function',
+        nodeId: 'workflow-node-main-function',
+        isPinned: false,
+        isBlock: false,
+        blocks: [],
+        parallelChildrenCount: 0,
+        conditions: {
+          combinator: 'and',
+          rules: [],
+        },
+      },
+      style: {
+        width: 336,
+        height: 316.46875,
+      },
+      width: 336,
+      height: 316.46875,
+      selected: false,
+    },
+    {
+      id: 'workflow-node-api-call',
+      type: 'workflow',
+      position: {
+        x: 1400,
+        y: 200,
+      },
+      draggable: false,
+      data: {
+        formData: {
+          type: 'api',
+          method: 'GET',
+          url: 'https://jsonplaceholder.typicode.com/posts',
+          headers: [
+            { key: 'Content-Type', value: 'application/json', enabled: true },
+            {
+              key: 'Authorization',
+              value: 'Bearer your-token-here',
+              enabled: false,
+            },
+            { key: 'Accept', value: 'application/json', enabled: true },
+          ],
+          queryParams: [
+            { key: 'limit', value: '10', enabled: true },
+            { key: 'page', value: '1', enabled: true },
+            { key: 'sort', value: 'desc', enabled: false },
+          ],
+          body: '',
+          bodyType: 'json',
+          responseVariable: 'postsData',
+          responseDataType: 'Array',
+        },
+        title: 'Fetch Posts API',
+        type: 'api',
+        nodeId: 'workflow-node-api-call',
+        isPinned: false,
+        isBlock: false,
+        blocks: [],
+        parallelChildrenCount: 0,
+        conditions: {
+          combinator: 'and',
+          rules: [],
+        },
+      },
+      style: {
+        width: 336,
+        height: 400,
+      },
+      width: 336,
+      height: 400,
+      selected: false,
+    },
+    {
+      id: 'workflow-node-post-api',
+      type: 'workflow',
+      position: {
+        x: 1800,
+        y: 200,
+      },
+      draggable: false,
+      data: {
+        formData: {
+          type: 'api',
+          method: 'POST',
+          url: 'https://jsonplaceholder.typicode.com/posts',
+          headers: [
+            { key: 'Content-Type', value: 'application/json', enabled: true },
+            {
+              key: 'Authorization',
+              value: 'Bearer your-token-here',
+              enabled: true,
+            },
+            { key: 'Accept', value: 'application/json', enabled: true },
+          ],
+          queryParams: [],
+          body: '{\n  "title": "New Post",\n  "body": "This is the content of the new post",\n  "userId": 1\n}',
+          bodyType: 'json',
+          responseVariable: 'newPost',
+          responseDataType: 'Object',
+        },
+        title: 'Create Post API',
+        type: 'api',
+        nodeId: 'workflow-node-post-api',
+        isPinned: false,
+        isBlock: false,
+        blocks: [],
+        parallelChildrenCount: 0,
+        conditions: {
+          combinator: 'and',
+          rules: [],
+        },
+      },
+      style: {
+        width: 336,
+        height: 400,
+      },
+      width: 336,
+      height: 400,
+      selected: false,
+    },
+    {
+      id: 'workflow-node-put-api',
+      type: 'workflow',
+      position: {
+        x: 2200,
+        y: 200,
+      },
+      draggable: false,
+      data: {
+        formData: {
+          type: 'api',
+          method: 'PUT',
+          url: 'https://jsonplaceholder.typicode.com/posts/1',
+          headers: [
+            { key: 'Content-Type', value: 'application/json', enabled: true },
+            {
+              key: 'Authorization',
+              value: 'Bearer your-token-here',
+              enabled: true,
+            },
+            { key: 'Accept', value: 'application/json', enabled: true },
+          ],
+          queryParams: [],
+          body: '{\n  "id": 1,\n  "title": "Updated Post",\n  "body": "This is the updated content of the post",\n  "userId": 1\n}',
+          bodyType: 'json',
+          responseVariable: 'updatedPost',
+          responseDataType: 'Object',
+        },
+        title: 'Update Post API',
+        type: 'api',
+        nodeId: 'workflow-node-put-api',
+        isPinned: false,
+        isBlock: false,
+        blocks: [],
+        parallelChildrenCount: 0,
+        conditions: {
+          combinator: 'and',
+          rules: [],
+        },
+      },
+      style: {
+        width: 336,
+        height: 400,
+      },
+      width: 336,
+      height: 400,
+      selected: false,
+    },
+    {
+      id: 'workflow-node-patch-api',
+      type: 'workflow',
+      position: {
+        x: 2600,
+        y: 200,
+      },
+      draggable: false,
+      data: {
+        formData: {
+          type: 'api',
+          method: 'PATCH',
+          url: 'https://jsonplaceholder.typicode.com/posts/1',
+          headers: [
+            { key: 'Content-Type', value: 'application/json', enabled: true },
+            {
+              key: 'Authorization',
+              value: 'Bearer your-token-here',
+              enabled: true,
+            },
+            { key: 'Accept', value: 'application/json', enabled: true },
+          ],
+          queryParams: [],
+          body: '{\n  "title": "Partially Updated Post"\n}',
+          bodyType: 'json',
+          responseVariable: 'patchedPost',
+          responseDataType: 'Object',
+        },
+        title: 'Patch Post API',
+        type: 'api',
+        nodeId: 'workflow-node-patch-api',
+        isPinned: false,
+        isBlock: false,
+        blocks: [],
+        parallelChildrenCount: 0,
+        conditions: {
+          combinator: 'and',
+          rules: [],
+        },
+      },
+      style: {
+        width: 336,
+        height: 400,
+      },
+      width: 336,
+      height: 400,
+      selected: false,
+    },
+    {
+      id: 'workflow-node-delete-api',
+      type: 'workflow',
+      position: {
+        x: 3000,
+        y: 200,
+      },
+      draggable: false,
+      data: {
+        formData: {
+          type: 'api',
+          method: 'DELETE',
+          url: 'https://jsonplaceholder.typicode.com/posts/1',
+          headers: [
+            { key: 'Content-Type', value: 'application/json', enabled: true },
+            {
+              key: 'Authorization',
+              value: 'Bearer your-token-here',
+              enabled: true,
+            },
+            { key: 'Accept', value: 'application/json', enabled: true },
+          ],
+          queryParams: [],
+          body: '',
+          bodyType: 'json',
+          responseVariable: 'deleteResult',
+          responseDataType: 'Object',
+        },
+        title: 'Delete Post API',
+        type: 'api',
+        nodeId: 'workflow-node-delete-api',
+        isPinned: false,
+        isBlock: false,
+        blocks: [],
+        parallelChildrenCount: 0,
+        conditions: {
+          combinator: 'and',
+          rules: [],
+        },
+      },
+      style: {
+        width: 336,
+        height: 400,
+      },
+      width: 336,
+      height: 400,
+      selected: false,
+    },
+  ],
+  edges: [
+    {
+      id: 'edge-main-function-to-api-call',
+      source: 'workflow-node-main-function',
+      target: 'workflow-node-api-call',
+      type: 'default',
+      sourceHandle: 'workflow-node-main-function-bottom',
+      markerEnd: {
+        type: 'arrow',
+        color: 'black',
+        strokeWidth: 2,
+      },
+    },
+    {
+      id: 'edge-get-api-to-post-api',
+      source: 'workflow-node-api-call',
+      target: 'workflow-node-post-api',
+      type: 'default',
+      sourceHandle: 'workflow-node-api-call-bottom',
+      markerEnd: {
+        type: 'arrow',
+        color: 'black',
+        strokeWidth: 2,
+      },
+    },
+    {
+      id: 'edge-post-api-to-put-api',
+      source: 'workflow-node-post-api',
+      target: 'workflow-node-put-api',
+      type: 'default',
+      sourceHandle: 'workflow-node-post-api-bottom',
+      markerEnd: {
+        type: 'arrow',
+        color: 'black',
+        strokeWidth: 2,
+      },
+    },
+    {
+      id: 'edge-put-api-to-patch-api',
+      source: 'workflow-node-put-api',
+      target: 'workflow-node-patch-api',
+      type: 'default',
+      sourceHandle: 'workflow-node-put-api-bottom',
+      markerEnd: {
+        type: 'arrow',
+        color: 'black',
+        strokeWidth: 2,
+      },
+    },
+    {
+      id: 'edge-patch-api-to-delete-api',
+      source: 'workflow-node-patch-api',
+      target: 'workflow-node-delete-api',
+      type: 'default',
+      sourceHandle: 'workflow-node-patch-api-bottom',
+      markerEnd: {
+        type: 'arrow',
+        color: 'black',
+        strokeWidth: 2,
+      },
+    },
+  ],
+};
+
+export const conditionBuilderData = {
+  states: [
+    {
+      id: 1,
+      label: 'personal_details',
+      value: {
+        lastName: 'Majid',
+        firstName: 'Abdul',
+        contactDetails: {
+          email: 'a.majid1025@gmail.com',
+          phone: '03040430789',
+          address: {
+            city: 'Lahore',
+            street: '115 C-1 Nespak Society College Road',
+            country: 'Pakistan',
+            postalCode: '54700',
+          },
+        },
+      },
+    },
+  ],
+  envVar: [
+    {
+      id: 1,
+      label: 'port',
+    },
+  ],
+};
+
+export const archNodes = [
+  {
+    id: 'gateway',
+    type: 'serviceNode',
+    position: { x: 400, y: 100 },
+    data: {
+      label: 'API Gateway',
+      service: 'api-gateway',
+      handles: ['bottom'],
+    },
+    style: {
+      background: 'rgba(240, 98, 146, 0.6)',
+      border: '1px solid #777',
+      borderRadius: '8px',
+      padding: '10px',
+      width: 130,
+      height: 40,
+      zIndex: 2,
+    },
+  },
+  {
+    id: 'auth-service',
+    type: 'serviceNode',
+    position: { x: 200, y: 250 },
+    data: {
+      label: 'Auth Service',
+      service: 'auth',
+      handles: ['top', 'bottom'],
+    },
+    style: {
+      background: 'rgba(100, 181, 246, 0.6)',
+      border: '1px solid #777',
+      borderRadius: '8px',
+      padding: '10px',
+      width: 130,
+      height: 40,
+      zIndex: 2,
+    },
+  },
+  {
+    id: 'user-service',
+    type: 'serviceNode',
+    position: { x: 400, y: 250 },
+    data: {
+      label: 'User Service',
+      service: 'user',
+      handles: ['top', 'bottom'],
+    },
+    style: {
+      background: 'rgba(100, 181, 246, 0.6)',
+      border: '1px solid #777',
+      borderRadius: '8px',
+      padding: '10px',
+      width: 130,
+      height: 40,
+      zIndex: 2,
+    },
+  },
+  {
+    id: 'database',
+    type: 'serviceNode',
+    position: { x: 300, y: 400 },
+    data: {
+      label: 'Database',
+      service: 'database',
+      handles: ['top'],
+    },
+    style: {
+      background: 'rgba(255, 183, 77, 0.6)',
+      border: '1px solid #777',
+      borderRadius: '8px',
+      padding: '10px',
+      width: 130,
+      height: 40,
+      zIndex: 2,
+    },
+  },
+];
+
+export const archEdges = [
+  {
+    id: 'e1',
+    source: 'gateway',
+    target: 'auth-service',
+    type: 'smoothstep',
+    animated: false,
+    style: { stroke: '#555', strokeWidth: 2 },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      width: 20,
+      height: 20,
+      color: '#555',
+    },
+  },
+  {
+    id: 'e2',
+    source: 'gateway',
+    target: 'user-service',
+    type: 'smoothstep',
+    animated: false,
+    style: { stroke: '#555', strokeWidth: 2 },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      width: 20,
+      height: 20,
+      color: '#555',
+    },
+  },
+  {
+    id: 'e3',
+    source: 'auth-service',
+    target: 'database',
+    type: 'smoothstep',
+    animated: false,
+    style: { stroke: '#555', strokeWidth: 2 },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      width: 20,
+      height: 20,
+      color: '#555',
+    },
+  },
+  {
+    id: 'e4',
+    source: 'user-service',
+    target: 'database',
+    type: 'smoothstep',
+    animated: false,
+    style: { stroke: '#555', strokeWidth: 2 },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      width: 20,
+      height: 20,
+      color: '#555',
+    },
+  },
+];

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

@@ -0,0 +1,54 @@
+// 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" },
+          ],
+        },
+      },*/
+    ],
+  },
+};