@flowuent-org/diagramming-core 1.3.10 → 1.4.0

package/apps/diagramming/src/CollaborationDiagramData.ts

@@ -1,127 +0,0 @@
-// Default nodes for the collaboration diagram
-export const collaborationNodes = [
-  {
-    id: 'actor-1',
-    type: 'actor',
-    position: { x: 60, y: 60 },
-    data: { label: 'User' },
-    measured: { width: 0, height: 0 },
-  },
-  {
-    id: 'signin',
-    type: 'collabObject',
-    position: { x: 220, y: 40 },
-    data: { label: 'SignInProcess', variant: 'normal', color: '#2196f3' },
-    measured: { width: 0, height: 0 },
-  },
-  {
-    id: 'admin',
-    type: 'collabObject',
-    position: { x: 420, y: 120 },
-    data: { label: 'AdminPanel', variant: 'normal', color: '#ffe066' },
-    measured: { width: 0, height: 0 },
-  },
-  {
-    id: 'addsubcat',
-    type: 'collabObject',
-    position: { x: 80, y: 220 },
-    data: { label: 'AddingSubCategory', variant: 'normal' },
-    measured: { width: 0, height: 0 },
-  },
-  {
-    id: 'addproducts',
-    type: 'collabObject',
-    position: { x: 220, y: 320 },
-    data: { label: 'AddProducts', variant: 'normal' },
-    measured: { width: 0, height: 0 },
-  },
-  {
-    id: 'logout',
-    type: 'collabObject',
-    position: { x: 420, y: 320 },
-    data: { label: 'Logout()', variant: 'normal' },
-    measured: { width: 0, height: 0 },
-  },
-  {
-    id: 'profile',
-    type: 'collabObject',
-    position: { x: 600, y: 320 },
-    data: { label: 'ProfileManagement', variant: 'normal' },
-    measured: { width: 0, height: 0 },
-  },
-  {
-    id: 'catmgmt',
-    type: 'collabObject',
-    position: { x: 600, y: 220 },
-    data: { label: 'CategoryManagement', variant: 'normal' },
-    measured: { width: 0, height: 0 },
-  },
-];
-
-// Default edges for the collaboration diagram
-export const collaborationEdges = [
-  // Actor to SignInProcess
-  {
-    id: 'e1',
-    source: 'actor-1',
-    target: 'signin',
-    type: 'collabEdge',
-    data: { variant: 'message', label: '1 : UniqueID()' },
-  },
-  {
-    id: 'e2',
-    source: 'actor-1',
-    target: 'signin',
-    type: 'collabEdge',
-    data: { variant: 'message', label: '2 : SecretPasscode()' },
-  },
-  {
-    id: 'e3',
-    source: 'signin',
-    target: 'admin',
-    type: 'collabEdge',
-    data: { variant: 'message', label: '3 : IsPassedAuthentication' },
-  },
-  {
-    id: 'e4',
-    source: 'signin',
-    target: 'actor-1',
-    type: 'collabEdge',
-    data: { variant: 'message', label: '4 : IfInvalid()' },
-  },
-  {
-    id: 'e5',
-    source: 'admin',
-    target: 'catmgmt',
-    type: 'collabEdge',
-    data: { variant: 'message', label: '5 : CategoryManagement()' },
-  },
-  {
-    id: 'e6',
-    source: 'admin',
-    target: 'addsubcat',
-    type: 'collabEdge',
-    data: { variant: 'message', label: '6 : AddSubCategory()' },
-  },
-  {
-    id: 'e7',
-    source: 'admin',
-    target: 'addproducts',
-    type: 'collabEdge',
-    data: { variant: 'message', label: '7 : AddProduct()' },
-  },
-  {
-    id: 'e8',
-    source: 'admin',
-    target: 'profile',
-    type: 'collabEdge',
-    data: { variant: 'message', label: '8 : ProfileManagement()' },
-  },
-  {
-    id: 'e9',
-    source: 'admin',
-    target: 'logout',
-    type: 'collabEdge',
-    data: { variant: 'message', label: '9 : LogoutProcess()' },
-  },
-];

package/apps/diagramming/src/CustomIconExamples.ts

@@ -1,233 +0,0 @@
-// Example: How to use fully customizable icons in automation nodes
-// This file demonstrates the usage of configurable icons with complete user control
-
-import { automationDefaultNodes } from './AutomationDiagramData';
-
-// Example 1: Set up your icon library first
-import {
-  getIconByName,
-  getAvailableIconNames,
-  iconExists,
-  addCustomIcon,
-  addCustomIcons,
-} from '../../../packages/diagrams/src/lib/utils/iconMapper';
-import {
-  PlayArrow as PlayArrowIcon,
-  AccountTree,
-  Timeline,
-  Home,
-  Cloud,
-  Storage as Database,
-  Email,
-  Settings,
-  Stop,
-  Api,
-  Article,
-} from '@mui/icons-material';
-
-// Add your custom icons - this is REQUIRED since there are no default icons
-addCustomIcons({
-  // Basic automation icons
-  PlayArrow: PlayArrowIcon,
-  Stop: Stop,
-  Api: Api,
-  Article: Article,
-
-  // Custom icons for your use case
-  Home: Home,
-  Cloud: Cloud,
-  Database: Database,
-  Email: Email,
-  Settings: Settings,
-  AccountTree: AccountTree,
-  Timeline: Timeline,
-});
-
-// Example 2: Modify existing nodes with custom icons
-export const customIconNodes = automationDefaultNodes.map((node) => {
-  // Add custom icons based on node type
-  let customIconName: string;
-
-  switch (node.type) {
-    case 'AutomationStartNode':
-      customIconName = 'Home'; // Use Home icon
-      break;
-    case 'AutomationApiNode':
-      customIconName = 'Cloud'; // Use Cloud icon
-      break;
-    case 'AutomationFormattingNode':
-      customIconName = 'AccountTree'; // Use AccountTree icon
-      break;
-    case 'AutomationEndNode':
-      customIconName = 'Settings'; // Use Settings icon
-      break;
-    default:
-      customIconName = 'Settings'; // Default fallback
-  }
-
-  return {
-    ...node,
-    data: {
-      ...node.data,
-      iconName: customIconName,
-    },
-  };
-});
-
-// Example 3: Create completely new nodes with specific icons
-export const exampleCustomNodes = [
-  {
-    id: 'email-trigger-node',
-    type: 'AutomationStartNode',
-    position: { x: 50, y: 300 },
-    data: {
-      label: 'Email Trigger',
-      description: 'Triggered when new email arrives',
-      status: 'Ready',
-      backgroundColor: '#1e3a8a',
-      textColor: '#ffffff',
-      borderColor: '#3b82f6',
-      lastRun: 'Never',
-      duration: '0.0s',
-      iconName: 'Email', // Custom email icon
-      // ... other configuration
-    },
-  },
-  {
-    id: 'database-query-node',
-    type: 'AutomationApiNode',
-    position: { x: 400, y: 300 },
-    data: {
-      label: 'Database Query',
-      description: 'Query user data from database',
-      status: 'Ready',
-      backgroundColor: '#1e40af',
-      textColor: '#ffffff',
-      borderColor: '#3b82f6',
-      lastRun: '2 minutes ago',
-      duration: '0.5s',
-      iconName: 'Database', // Custom database icon
-      // ... other configuration
-    },
-  },
-  {
-    id: 'ai-analysis-node',
-    type: 'AutomationFormattingNode',
-    position: { x: 750, y: 300 },
-    data: {
-      label: 'AI Analysis',
-      description: 'Analyze data using AI models',
-      status: 'Ready',
-      backgroundColor: '#1e40af',
-      textColor: '#ffffff',
-      borderColor: '#3b82f6',
-      lastRun: '1 minute ago',
-      duration: '2.1s',
-      iconName: 'AccountTree', // Custom AI icon
-      // ... other configuration
-    },
-  },
-  {
-    id: 'notification-end-node',
-    type: 'AutomationEndNode',
-    position: { x: 1100, y: 300 },
-    data: {
-      label: 'Send Notification',
-      description: 'Send notification to user',
-      status: 'Ready',
-      backgroundColor: '#1e3a8a',
-      textColor: '#ffffff',
-      borderColor: '#3b82f6',
-      lastRun: '30 seconds ago',
-      duration: '0.2s',
-      iconName: 'Settings', // Custom notification icon
-      // ... other configuration
-    },
-  },
-];
-
-// Example 4: Dynamic icon selection based on data
-export const createNodeWithDynamicIcon = (nodeType: string, nodeData: any) => {
-  // Select icon based on node data or type
-  let iconName: string;
-
-  // Use switch case for category-based icon selection
-  switch (nodeData.category) {
-    case 'communication':
-      iconName = 'Email';
-      break;
-    case 'data':
-      iconName = 'Database';
-      break;
-    case 'ai':
-      iconName = 'AccountTree';
-      break;
-    case 'security':
-      iconName = 'Settings';
-      break;
-    default:
-      // Default based on node type
-      switch (nodeType) {
-        case 'AutomationStartNode':
-          iconName = 'PlayArrow';
-          break;
-        case 'AutomationApiNode':
-          iconName = 'Api';
-          break;
-        case 'AutomationFormattingNode':
-          iconName = 'Article';
-          break;
-        case 'AutomationEndNode':
-          iconName = 'Stop';
-          break;
-        default:
-          iconName = 'Settings';
-      }
-      break;
-  }
-
-  return {
-    ...nodeData,
-    iconName,
-  };
-};
-
-// Example 5: Using the icon mapper utility directly
-// Check if an icon exists before using it
-const safeIconName = iconExists('CustomIcon') ? 'CustomIcon' : 'Settings';
-
-// Get all available icon names for a dropdown/selector
-const availableIcons = getAvailableIconNames();
-console.log('Available icons:', availableIcons);
-
-// Get icon component for rendering
-const IconComponent = getIconByName('Home');
-
-// Example 6: Adding more custom icons dynamically
-// Add a single custom icon
-addCustomIcon('Timeline', Timeline);
-
-// Add multiple custom icons at once
-addCustomIcons({
-  Timeline: Timeline,
-  CustomWorkflow: AccountTree,
-});
-
-// Now you can use these custom icons in your nodes
-const customIconNode = {
-  id: 'custom-workflow-node',
-  type: 'AutomationStartNode',
-  position: { x: 50, y: 400 },
-  data: {
-    label: 'Custom Workflow',
-    description: 'A workflow with custom icons',
-    status: 'Ready',
-    backgroundColor: '#1e3a8a',
-    textColor: '#ffffff',
-    borderColor: '#3b82f6',
-    lastRun: 'Never',
-    duration: '0.0s',
-    iconName: 'AccountTree', // Now this will work!
-    // ... other configuration
-  },
-};

package/apps/diagramming/src/DiagramTabs.tsx

@@ -1,205 +0,0 @@
-import React, { useEffect } from 'react';
-import { Button, Card, IconButton, Tab, Tabs } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
-import {
-  DiagrammingPage,
-  DownloadPanel,
-  NodeForm,
-  PropertiesPane,
-  useDiagramEdges,
-  useDiagramId,
-  useDiagramNodes,
-  FunctionSignature,
-  FunctionParameter,
-} from '@flowuent-labs/diagrams';
-import { useTabStore } from './tabsStore'; // Import the Zustand store
-import { AddNodeView } from './components/AddNodeView';
-import { conditionBuilderData } from './node-data';
-import DiagramTypes from '../../../packages/diagrams/src/lib/types/diagram-types';
-import { AppBar, Toolbar, Box } from '@mui/material';
-import HomeIcon from '@mui/icons-material/Home';
-import AccountCircleIcon from '@mui/icons-material/AccountCircle';
-import { ICardNode } from '../../../packages/diagrams/src/lib/types/card-node';
-import { Edge, Node } from '@xyflow/react';
-import { Node as ReactFlowNode } from 'reactflow';
-import { ICardNodeData } from '../../../packages/diagrams/src/lib/types/card-node';
-import {
-  WorkflowNodeContentType,
-  RenderAddNodeViewType,
-  GetDefaultNodeDataType,
-  OnChangeEventHandler,
-  ConditionBuilderState,
-} from '../../../packages/diagrams/src/lib/contexts/diagramStoreTypes';
-import { AvailableVariable } from '../../../packages/diagrams/src/lib/types/available-variables';
-
-// Define the interface for diagram page props
-interface DiagramPageProps {
-  onChange?: OnChangeEventHandler;
-  availableFunctions: FunctionSignature[];
-  availableVariables?: AvailableVariable[];
-  id: number;
-  workflowNodeContent?: WorkflowNodeContentType;
-  renderAddNodeView?: RenderAddNodeViewType;
-  getDefaultNodeData?: GetDefaultNodeDataType;
-  conditionBuilderStates?: ConditionBuilderState;
-}
-
-// Generic type for nodes that can be either ICardNode, Node from @xyflow/react, or Node from reactflow
-type GenericNode = ICardNode | Node | ReactFlowNode;
-
-const NodeGetter = () => {
-  const updateTabData = useTabStore.use.updateTabData();
-  const nodes = useDiagramNodes();
-  const edges = useDiagramEdges();
-  const id = useDiagramId();
-  useEffect(() => {
-    //updateTabData(id, nodes, edges);
-  }, [nodes, edges, id, updateTabData]);
-
-  return <div></div>;
-};
-
-// Transform FunctionObject[] to FunctionSignature[]
-const transformFunctions = (functionObjects: Array<{
-  id: string;
-  name: string;
-  args: string[];
-  code: string;
-}>): FunctionSignature[] => {
-  return functionObjects.map(func => ({
-    id: func.id,
-    name: func.name,
-    code: func.code,
-    args: func.args.map((arg: string): FunctionParameter => ({
-      name: arg,
-      type: 'any'
-    }))
-  }));
-};
-
-const DiagramTabs = ({
-  defaultNodes,
-  defaultEdges,
-  children,
-  diagramType,
-  diagramPageProps = {},
-}: {
-  defaultNodes: GenericNode[];
-  defaultEdges: Edge[];
-  children?: React.ReactNode;
-  diagramType: DiagramTypes;
-  diagramPageProps?: Partial<DiagramPageProps>;
-}) => {
-  const {
-    tabs,
-    currentTab,
-    addTab,
-    removeTab,
-    availableFunctions,
-    setCurrentTab,
-    setTabs,
-  } = useTabStore();
-
-  // Ensure the first tab is initialized with default nodes/edges
-  useEffect(() => {
-    if (
-      tabs.length === 1 &&
-      tabs[0].nodes.length === 0 &&
-      tabs[0].edges.length === 0 &&
-      (defaultNodes.length > 0 || defaultEdges.length > 0)
-    ) {
-      setTabs([
-        {
-          ...tabs[0],
-          nodes: defaultNodes,
-          edges: defaultEdges,
-        },
-      ]);
-    }
-  }, [tabs, defaultNodes, defaultEdges, setTabs]);
-
-  // Reset tabs when diagramType changes
-  useEffect(() => {
-    setTabs([
-      {
-        id: Date.now(),
-        title: diagramType.charAt(0).toUpperCase() + diagramType.slice(1) + ' Diagram',
-        nodes: defaultNodes,
-        edges: defaultEdges,
-      },
-    ]);
-    setCurrentTab(0);
-  }, [diagramType, defaultNodes, defaultEdges, setTabs, setCurrentTab]);
-
-  return (
-    <div>
-      {/* Tab Navigation - now using AppBar */}
-      <AppBar position="fixed" sx={{ bgcolor: '#1C1616', boxShadow: 2, borderBottom: '1px solid #23232a', top: 0, width: '100%', zIndex: 1000 }}>
-        <Toolbar sx={{ minHeight: 56, px: 2, display: 'flex', justifyContent: 'space-between' }}>
-          <Box sx={{ display: 'flex', alignItems: 'center' }}>
-            <IconButton edge="start" color="inherit" aria-label="home" sx={{ mr: 2 }}>
-              <HomeIcon sx={{ color: '#fff' }} />
-            </IconButton>
-            <Tabs
-              value={currentTab}
-              onChange={(_, newValue) => setCurrentTab(newValue)}
-              textColor="inherit"
-              indicatorColor="secondary"
-              sx={{ minHeight: 40, '& .MuiTab-root': { color: '#fff', minWidth: 120, borderRadius: 2, mx: 1, bgcolor: '#23232a', fontWeight: 500 }, '& .Mui-selected': { bgcolor: '#111', color: '#fff' }, }}
-            >
-              {tabs.map((tab, index) => (
-                <Tab
-                  key={tab.id}
-                  label={
-                    <div style={{ display: 'flex', alignItems: 'center' }}>
-                      <span>{tab.title}</span>
-                      <IconButton
-                        size="small"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          removeTab(index);
-                        }}
-                        style={{ marginLeft: '8px', padding: '2px' }}
-                      >
-                        <CloseIcon fontSize="small" />
-                      </IconButton>
-                    </div>
-                  }
-                  sx={{ textTransform: 'none', fontSize: 16 }}
-                />
-              ))}
-            </Tabs>
-            <Button onClick={() => addTab(defaultNodes, defaultEdges)} sx={{ ml: 2, bgcolor: '#6B04F1', color: '#fff', borderRadius: 2, px: 2, fontWeight: 600, textTransform: 'none', boxShadow: 'none', '&:hover': { bgcolor: '#a084ff' } }}>
-              Add Tab
-            </Button>
-          </Box>
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-            <Button variant="contained" sx={{ bgcolor: '#6B04F1', color: '#fff', borderRadius: 2, px: 3, fontWeight: 600, textTransform: 'none', boxShadow: 'none', '&:hover': { bgcolor: '#a084ff' } }}>Share</Button>
-            <IconButton color="inherit">
-              <AccountCircleIcon sx={{ color: '#fff' }} />
-            </IconButton>
-          </Box>
-        </Toolbar>
-      </AppBar>
-
-      {/* Render Active Diagram */}
-      {tabs.map((tab, index) =>
-        index === currentTab ? (
-          <DiagrammingPage
-            availableFunctions={transformFunctions(availableFunctions)}
-            id={tab.id}
-            key={tab.id}
-            defaultNodes={tab.nodes as ICardNode[]}
-            defaultEdges={tab.edges}
-            diagramType={diagramType}
-            {...diagramPageProps}
-          >
-            {children}
-          </DiagrammingPage>
-        ) : null,
-      )}
-    </div>
-  );
-};
-
-export default DiagramTabs;

package/apps/diagramming/src/Pages/DevPlayground.tsx

@@ -1,3 +0,0 @@
-export default function DevPlayground() {
-  return <></>;
-}

package/apps/diagramming/src/Pages/Home.tsx

@@ -1,112 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import {
-  Box,
-  Typography,
-  Card,
-  CardActionArea,
-  CardContent,
-} from '@mui/material';
-import {
-  RiFlowChart,
-  RiDatabase2Fill,
-  RiDraftFill,
-  RiArrowLeftRightLine,
-  RiArrowRightSLine,
-  RiFunctionLine,
-  RiUserLine,
-  RiCloudLine,
-  RiChatSmile2Line,
-  RiRobotLine,
-} from 'react-icons/ri';
-const HomePage = () => {
-  const pages = [
-
-    { path: "/flow", icon: <RiFlowChart size={40} />, label: "Flow" },
-    { path: "/erd", icon: <RiDatabase2Fill size={40} />, label: "ERD" },
-    { path: "/workflow", icon: <RiDraftFill size={40} />, label: "Workflow" },
-    { path: "/sequence", icon: <RiArrowLeftRightLine size={40} />, label: "Sequence" },
-    { path: "/stateMachine", icon: <RiFunctionLine size={40} />, label: "State Machine" },
-    { path: "/systemFlow", icon: <RiFlowChart size={40} />, label: "System Flow" },
-    { path: "/arch", icon: <RiArrowRightSLine size={40} />, label: "Arch" },
-    { path: "/case", icon: <RiUserLine size={40} />, label: "Case" },
-    { path: "/automation", icon: <RiRobotLine size={40} />, label: "Automation" },
-    // Temporarily disabled cloud architecture diagram
-    // {
-    //   path: 'cloud-architecture',
-    //   icon: <RiCloudLine size={40} />,
-    //   label: 'Cloud Architecture',
-    // },
-    {
-      path: 'collaboration',
-      icon: <RiChatSmile2Line size={40} />,
-      label: 'Collaboration',
-    },
-  ];
-
-  return (
-    <Box
-      className="container"
-      sx={{
-        minHeight: '100vh',
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: '#f0f4f8',
-        gap: 4,
-      }}
-    >
-      <Typography
-        variant="h3"
-        sx={{ fontWeight: 'bold', color: '#333', mb: 4 }}
-      >
-        Welcome to the Dashboard
-      </Typography>
-
-      <Box
-        sx={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
-          gap: 3,
-          width: '80%',
-        }}
-      >
-        {pages.map((page, index) => (
-          <Card
-            key={index}
-            sx={{
-              borderRadius: 2,
-              boxShadow: 3,
-              ':hover': { transform: 'scale(1.05)', transition: '0.3s' },
-            }}
-          >
-            <CardActionArea component={Link} to={page.path}>
-              <CardContent
-                sx={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  textAlign: 'center',
-                  padding: 3,
-                  gap: 2,
-                }}
-              >
-                {page.icon}
-                <Typography
-                  variant="h6"
-                  sx={{ fontWeight: 'medium', color: '#555' }}
-                >
-                  {page.label}
-                </Typography>
-              </CardContent>
-            </CardActionArea>
-          </Card>
-        ))}
-      </Box>
-    </Box>
-  );
-};
-
-export default HomePage;