@flowuent-org/diagramming-core 1.3.9 → 1.4.0

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

@@ -1,664 +0,0 @@
-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

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