@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/packages/diagrams/src/lib/components/automation/index.ts

@@ -1,25 +1,14 @@
 export { AutomationStartNode } from './AutomationStartNode';
 export { AutomationApiNode } from './AutomationApiNode';
 export { AutomationFormattingNode } from './AutomationFormattingNode';
-export { AutomationSheetsNode } from './AutomationSheetsNode';
 export { AutomationEndNode } from './AutomationEndNode';
-export { AutomationNoteNode } from './AutomationNoteNode';
 export { AutomationNavigationNode } from './AutomationNavigationNode';
 export { AutomationExecutionPanel } from './AutomationExecutionPanel';
-export { AutomationAISuggestionNode } from './AutomationAISuggestionNode';
 export { AISuggestionsModal, showAISuggestionsModal } from './AISuggestionsModal';
 export { AISuggestionsPanel } from './AISuggestionsPanel';
 export { NodeActionButtons } from './NodeActionButtons';
 export { NodeAIAssistantPopup, showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
 export type { AISuggestion } from './AISuggestionsModal';
-// Google Services Node (Docs, Slides, Meet, Gmail, Sheets, Calendar)
-export { AutomationGoogleServicesNode } from './AutomationGoogleServicesNode';
-export type {
-  GoogleServiceType,
-  GoogleTokenData,
-  AutomationGoogleServicesNodeData,
-  AutomationGoogleServicesNodeProps,
-} from './AutomationGoogleServicesNode';
 // Slack Integration Node
 export { AutomationSlackNode } from './AutomationSlackNode';
 export type {
@@ -43,14 +32,6 @@ export type {
   AutomationInteractionNodeData,
   AutomationInteractionNodeProps,
 } from './AutomationInteractionNode';
-// Email Node
-export { AutomationEmailNode } from './AutomationEmailNode';
-export type {
-  EmailOperationType,
-  EmailTokenData,
-  AutomationEmailNodeData,
-  AutomationEmailNodeProps,
-} from './AutomationEmailNode';
 // Monitoring Node
 export { AutomationMonitoringNode } from './AutomationMonitoringNode';
 export type {
@@ -64,3 +45,32 @@ export {
     getNodeAIAssistantHeaders,
     configureNodeAIAssistant,
 } from '../../utils/nodeAIAssistantConfig';
+// Decision / branching node
+export { AutomationDecisionNode } from './AutomationDecisionNode';
+export type {
+  AutomationDecisionNodeData,
+  AutomationDecisionNodeProps,
+} from './AutomationDecisionNode';
+// SMS node
+export { AutomationSmsNode } from './AutomationSmsNode';
+export type {
+  AutomationSmsNodeData,
+  AutomationSmsNodeProps,
+} from './AutomationSmsNode';
+// Voice call node
+export { AutomationVoiceCallNode } from './AutomationVoiceCallNode';
+export type {
+  AutomationVoiceCallNodeData,
+  AutomationVoiceCallNodeProps,
+} from './AutomationVoiceCallNode';
+// Sub-workflow node
+export { AutomationWorkflowNode } from './AutomationWorkflowNode';
+export type {
+  AutomationWorkflowNodeData,
+  AutomationWorkflowNodeProps,
+} from './AutomationWorkflowNode';
+export { AutomationNodeCard } from './AutomationNodeCard';
+export type {
+  AutomationNodeCardData,
+  AutomationNodeCardProps,
+} from './AutomationNodeCard';

package/packages/diagrams/src/lib/components/automation/statusColors.ts

@@ -1,124 +1,124 @@
-/**
- * Centralized configuration for automation node status colors
- * 
- * This configuration allows easy customization of status badge colors
- * across all automation nodes. Modify the colors here to update
- * the appearance of status badges throughout the application.
- */
-
-export interface StatusColorConfig {
-  color: string;      // Text color for the status badge
-  bgColor: string;    // Background color for the status badge
-  label: string;      // Display label for the status
-}
-
-export interface AutomationStatusColors {
-  running: StatusColorConfig;
-  completed: StatusColorConfig;
-  success: StatusColorConfig;  // Alias for completed (used in some nodes)
-  error: StatusColorConfig;
-  failed: StatusColorConfig;  // Alias for error
-  ready: StatusColorConfig;
-  'need to config': StatusColorConfig;  // Status when configuration is needed
-  authenticated?: StatusColorConfig;  // Optional, used in auth-enabled nodes
-}
-
-/**
- * Default status color configuration
- * 
- * Colors are designed to be visually distinct and accessible:
- * - Running: Blue (#2563EB) - indicates active execution
- * - Completed/Success: Yellow (#FCD34D) - indicates successful completion
- * - Error/Failed: Red (#EF4444) - indicates failure
- * - Ready: Green (#86EFAC) - indicates ready to execute
- * - Need to Config: Yellow (#FBBF24) - indicates configuration required
- */
-export const automationStatusColors: AutomationStatusColors = {
-  running: {
-    color: '#2563EB',
-    bgColor: '#2563EB33',
-    label: 'Running',
-  },
-  completed: {
-    color: '#FCD34D',
-    bgColor: 'rgba(251, 191, 36, 0.1)',
-    label: 'Completed',
-  },
-  success: {
-    color: '#FCD34D',
-    bgColor: 'rgba(251, 191, 36, 0.1)',
-    label: 'Success',
-  },
-  error: {
-    color: '#EF4444',
-    bgColor: 'rgba(239, 68, 68, 0.1)',
-    label: 'Error',
-  },
-  failed: {
-    color: '#EF4444',
-    bgColor: 'rgba(239, 68, 68, 0.1)',
-    label: 'Failed',
-  },
-  ready: {
-    color: '#86EFAC',
-    bgColor: 'rgba(16, 185, 129, 0.1)',
-    label: 'Ready',
-  },
-  'need to config': {
-    color: '#FBBF24',
-    bgColor: 'rgba(251, 191, 36, 0.1)',
-    label: 'Need to Config',
-  },
-  authenticated: {
-    color: '#0088cc',
-    bgColor: 'rgba(0, 136, 204, 0.1)',
-    label: 'Connected',
-  },
-};
-
-/**
- * Get status color configuration for a given status
- * 
- * @param status - The status string (case-insensitive)
- * @param defaultStatus - Default status to use if status not found
- * @returns StatusColorConfig object with color, bgColor, and label
- */
-export const getStatusColor = (
-  status: string,
-  defaultStatus: keyof AutomationStatusColors = 'ready'
-): StatusColorConfig => {
-  const normalizedStatus = status.toLowerCase();
-  
-  // Map various status formats to our configuration keys
-  const statusMap: Record<string, keyof AutomationStatusColors> = {
-    'running': 'running',
-    'completed': 'completed',
-    'success': 'success',
-    'error': 'error',
-    'failed': 'failed',
-    'ready': 'ready',
-    'idle': 'ready', // Map idle to ready
-    'need to config': 'need to config',
-    'need_to_config': 'need to config',
-    'not_ready': 'need to config',
-    'not ready': 'need to config',
-    'authenticated': 'authenticated',
-    'connected': 'authenticated',
-  };
-
-  const configKey = statusMap[normalizedStatus] || defaultStatus;
-  const config = automationStatusColors[configKey];
-  if (config) {
-    return config;
-  }
-  return automationStatusColors[defaultStatus];
-};
-
-/**
- * Helper function to get status config for nodes using the old format
- * (for backward compatibility)
- */
-export const getStatusConfig = (status: string): StatusColorConfig => {
-  return getStatusColor(status, 'ready');
-};
-
+/**
+ * Centralized configuration for automation node status colors
+ * 
+ * This configuration allows easy customization of status badge colors
+ * across all automation nodes. Modify the colors here to update
+ * the appearance of status badges throughout the application.
+ */
+
+export interface StatusColorConfig {
+  color: string;      // Text color for the status badge
+  bgColor: string;    // Background color for the status badge
+  label: string;      // Display label for the status
+}
+
+export interface AutomationStatusColors {
+  running: StatusColorConfig;
+  completed: StatusColorConfig;
+  success: StatusColorConfig;  // Alias for completed (used in some nodes)
+  error: StatusColorConfig;
+  failed: StatusColorConfig;  // Alias for error
+  ready: StatusColorConfig;
+  'need to config': StatusColorConfig;  // Status when configuration is needed
+  authenticated?: StatusColorConfig;  // Optional, used in auth-enabled nodes
+}
+
+/**
+ * Default status color configuration
+ * 
+ * Colors are designed to be visually distinct and accessible:
+ * - Running: Blue (#2563EB) - indicates active execution
+ * - Completed/Success: Yellow (#FCD34D) - indicates successful completion
+ * - Error/Failed: Red (#EF4444) - indicates failure
+ * - Ready: Green (#86EFAC) - indicates ready to execute
+ * - Need to Config: Yellow (#FBBF24) - indicates configuration required
+ */
+export const automationStatusColors: AutomationStatusColors = {
+  running: {
+    color: '#2563EB',
+    bgColor: '#2563EB33',
+    label: 'Running',
+  },
+  completed: {
+    color: '#FCD34D',
+    bgColor: 'rgba(251, 191, 36, 0.1)',
+    label: 'Completed',
+  },
+  success: {
+    color: '#FCD34D',
+    bgColor: 'rgba(251, 191, 36, 0.1)',
+    label: 'Success',
+  },
+  error: {
+    color: '#EF4444',
+    bgColor: 'rgba(239, 68, 68, 0.1)',
+    label: 'Error',
+  },
+  failed: {
+    color: '#EF4444',
+    bgColor: 'rgba(239, 68, 68, 0.1)',
+    label: 'Failed',
+  },
+  ready: {
+    color: '#86EFAC',
+    bgColor: 'rgba(16, 185, 129, 0.1)',
+    label: 'Ready',
+  },
+  'need to config': {
+    color: '#FBBF24',
+    bgColor: 'rgba(251, 191, 36, 0.1)',
+    label: 'Need to Config',
+  },
+  authenticated: {
+    color: '#0088cc',
+    bgColor: 'rgba(0, 136, 204, 0.1)',
+    label: 'Connected',
+  },
+};
+
+/**
+ * Get status color configuration for a given status
+ * 
+ * @param status - The status string (case-insensitive)
+ * @param defaultStatus - Default status to use if status not found
+ * @returns StatusColorConfig object with color, bgColor, and label
+ */
+export const getStatusColor = (
+  status: string,
+  defaultStatus: keyof AutomationStatusColors = 'ready'
+): StatusColorConfig => {
+  const normalizedStatus = status.toLowerCase();
+  
+  // Map various status formats to our configuration keys
+  const statusMap: Record<string, keyof AutomationStatusColors> = {
+    'running': 'running',
+    'completed': 'completed',
+    'success': 'success',
+    'error': 'error',
+    'failed': 'failed',
+    'ready': 'ready',
+    'idle': 'ready', // Map idle to ready
+    'need to config': 'need to config',
+    'need_to_config': 'need to config',
+    'not_ready': 'need to config',
+    'not ready': 'need to config',
+    'authenticated': 'authenticated',
+    'connected': 'authenticated',
+  };
+
+  const configKey = statusMap[normalizedStatus] || defaultStatus;
+  const config = automationStatusColors[configKey];
+  if (config) {
+    return config;
+  }
+  return automationStatusColors[defaultStatus];
+};
+
+/**
+ * Helper function to get status config for nodes using the old format
+ * (for backward compatibility)
+ */
+export const getStatusConfig = (status: string): StatusColorConfig => {
+  return getStatusColor(status, 'ready');
+};
+

package/packages/diagrams/src/lib/contexts/CardDataProvider.tsx

@@ -1,111 +1,111 @@
-import React, { createContext, useContext, useRef } from 'react';
-import { create } from 'zustand';
-import { useReactFlow, useNodesData } from '@xyflow/react';
-import { ICardNodeData } from '../types/card-node';
-
-// Define the store interface
-interface CardNodeStore {
-  nodeId: string | null; // Store nodeId in the store
-  setNodeId: (id: string | null) => void;
-  draggedCard: string | null;
-  setDraggedCard: (id: string | null) => void;
-  isAddingBlock: boolean;
-  setAddingBlock: (isAddingBlock: boolean) => void;
-}
-
-// Function to create a unique Zustand store for a node
-const createCardNodeStore = (initialNodeId: string) =>
-  create<CardNodeStore>((set) => ({
-    nodeId: initialNodeId, // Initialize with the provided nodeId
-    setNodeId: (id) => set({ nodeId: id }),
-    draggedCard: null,
-    setDraggedCard: (id) => set({ draggedCard: id }),
-    isAddingBlock: false,
-    setAddingBlock: (isAddingBlock) => set({ isAddingBlock }),
-  }));
-
-// Create a context for the store
-const CardNodeStoreContext = createContext<ReturnType<typeof createCardNodeStore> | null>(null);
-
-// Create a provider component
-export const CardDataProvider = ({
-  children,
-  nodeId,
-}: {
-  children: React.ReactNode;
-  nodeId: string; // Pass nodeId to the provider
-}) => {
-  // Create a unique store for this node
-  const storeRef = useRef(createCardNodeStore(nodeId));
-
-  return (
-    <CardNodeStoreContext.Provider value={storeRef.current}>
-      {children}
-    </CardNodeStoreContext.Provider>
-  );
-};
-
-// Custom hook to access the store within the context
-export const useCardNodeStoreContext = () => {
-  const store = useContext(CardNodeStoreContext);
-  if (!store) {
-    throw new Error('useCardNodeStoreContext must be used within a CardDataProvider');
-  }
-  return store;
-};
-
-// Selectors for the store
-export const useNodeId = () => useCardNodeStoreContext()((state) => state.nodeId);
-export const useDraggedCard = () => useCardNodeStoreContext()((state) => state.draggedCard);
-export const useSetDraggedCard = () => useCardNodeStoreContext()((state) => state.setDraggedCard);
-export const useIsAddingBlock = () => useCardNodeStoreContext()((state) => state.isAddingBlock);
-export const useSetAddingBlock = () => useCardNodeStoreContext()((state) => state.setAddingBlock);
-
-// Hook to access node data using useNodesData from @xyflow/react
-export const useNodeData = () => {
-  const nodeId = useNodeId();
-  const nodeData = useNodesData(nodeId ?? '');
-  return nodeData?.data as unknown as ICardNodeData;
-};
-
-// Hook to update node data
-export const useSetNodeData = () => {
-  const { setNodes } = useReactFlow();
-  const nodeId = useNodeId();
-
-  return (newData: Partial<ICardNodeData>) => {
-    if (!nodeId) return; // Ensure nodeId is available
-    setNodes((nodes) =>
-      nodes.map((node) => {
-        if (node.id === nodeId) {
-          return {
-            ...node,
-            data: { ...node.data, ...newData },
-          };
-        }
-        return node;
-      }),
-    );
-  };
-};
-
-// Selectors for ICardNodeData fields
-export const useNodeIsPinned = () => useNodeData()?.isPinned;
-export const useNodeIsBlock = () => useNodeData()?.isBlock;
-export const useNodeBlocks = () => useNodeData()?.blocks;
-export const useNodeTitle = () => useNodeData()?.title;
-export const useNodeColor = () => useNodeData()?.color;
-export const useNodeSideHandles = () => useNodeData()?.sideHandles;
-export const useNodeImg = () => useNodeData()?.img;
-export const useNodeCaseCount = () => useNodeData()?.caseCount;
-export const useNodeFalseCase = () => useNodeData()?.falseCase;
-export const useNodeTrueCase = () => useNodeData()?.trueCase;
-export const useNodeLabel = () => useNodeData()?.label;
-export const useNodeVariant = () => useNodeData()?.variant;
-export const useNodeBranchIndex = () => useNodeData()?.branchIndex;
-export const useNodeParallelColIndex = () => useNodeData()?.parallelColIndex;
-export const useNodeParallelChildrenCount = () => useNodeData()?.parallelChildrenCount;
-export const useNodeIsRoot = () => useNodeData()?.isRoot;
-export const useNodeFinalNodeId = () => useNodeData()?.finalNodeId;
-export const useNodeType = () => useNodeData()?.type;
-export const useNodeFormData = () => useNodeData()?.formData;
+import React, { createContext, useContext, useRef } from 'react';
+import { create } from 'zustand';
+import { useReactFlow, useNodesData } from '@xyflow/react';
+import { ICardNodeData } from '../types/card-node';
+
+// Define the store interface
+interface CardNodeStore {
+  nodeId: string | null; // Store nodeId in the store
+  setNodeId: (id: string | null) => void;
+  draggedCard: string | null;
+  setDraggedCard: (id: string | null) => void;
+  isAddingBlock: boolean;
+  setAddingBlock: (isAddingBlock: boolean) => void;
+}
+
+// Function to create a unique Zustand store for a node
+const createCardNodeStore = (initialNodeId: string) =>
+  create<CardNodeStore>((set) => ({
+    nodeId: initialNodeId, // Initialize with the provided nodeId
+    setNodeId: (id) => set({ nodeId: id }),
+    draggedCard: null,
+    setDraggedCard: (id) => set({ draggedCard: id }),
+    isAddingBlock: false,
+    setAddingBlock: (isAddingBlock) => set({ isAddingBlock }),
+  }));
+
+// Create a context for the store
+const CardNodeStoreContext = createContext<ReturnType<typeof createCardNodeStore> | null>(null);
+
+// Create a provider component
+export const CardDataProvider = ({
+  children,
+  nodeId,
+}: {
+  children: React.ReactNode;
+  nodeId: string; // Pass nodeId to the provider
+}) => {
+  // Create a unique store for this node
+  const storeRef = useRef(createCardNodeStore(nodeId));
+
+  return (
+    <CardNodeStoreContext.Provider value={storeRef.current}>
+      {children}
+    </CardNodeStoreContext.Provider>
+  );
+};
+
+// Custom hook to access the store within the context
+export const useCardNodeStoreContext = () => {
+  const store = useContext(CardNodeStoreContext);
+  if (!store) {
+    throw new Error('useCardNodeStoreContext must be used within a CardDataProvider');
+  }
+  return store;
+};
+
+// Selectors for the store
+export const useNodeId = () => useCardNodeStoreContext()((state) => state.nodeId);
+export const useDraggedCard = () => useCardNodeStoreContext()((state) => state.draggedCard);
+export const useSetDraggedCard = () => useCardNodeStoreContext()((state) => state.setDraggedCard);
+export const useIsAddingBlock = () => useCardNodeStoreContext()((state) => state.isAddingBlock);
+export const useSetAddingBlock = () => useCardNodeStoreContext()((state) => state.setAddingBlock);
+
+// Hook to access node data using useNodesData from @xyflow/react
+export const useNodeData = () => {
+  const nodeId = useNodeId();
+  const nodeData = useNodesData(nodeId ?? '');
+  return nodeData?.data as unknown as ICardNodeData;
+};
+
+// Hook to update node data
+export const useSetNodeData = () => {
+  const { setNodes } = useReactFlow();
+  const nodeId = useNodeId();
+
+  return (newData: Partial<ICardNodeData>) => {
+    if (!nodeId) return; // Ensure nodeId is available
+    setNodes((nodes) =>
+      nodes.map((node) => {
+        if (node.id === nodeId) {
+          return {
+            ...node,
+            data: { ...node.data, ...newData },
+          };
+        }
+        return node;
+      }),
+    );
+  };
+};
+
+// Selectors for ICardNodeData fields
+export const useNodeIsPinned = () => useNodeData()?.isPinned;
+export const useNodeIsBlock = () => useNodeData()?.isBlock;
+export const useNodeBlocks = () => useNodeData()?.blocks;
+export const useNodeTitle = () => useNodeData()?.title;
+export const useNodeColor = () => useNodeData()?.color;
+export const useNodeSideHandles = () => useNodeData()?.sideHandles;
+export const useNodeImg = () => useNodeData()?.img;
+export const useNodeCaseCount = () => useNodeData()?.caseCount;
+export const useNodeFalseCase = () => useNodeData()?.falseCase;
+export const useNodeTrueCase = () => useNodeData()?.trueCase;
+export const useNodeLabel = () => useNodeData()?.label;
+export const useNodeVariant = () => useNodeData()?.variant;
+export const useNodeBranchIndex = () => useNodeData()?.branchIndex;
+export const useNodeParallelColIndex = () => useNodeData()?.parallelColIndex;
+export const useNodeParallelChildrenCount = () => useNodeData()?.parallelChildrenCount;
+export const useNodeIsRoot = () => useNodeData()?.isRoot;
+export const useNodeFinalNodeId = () => useNodeData()?.finalNodeId;
+export const useNodeType = () => useNodeData()?.type;
+export const useNodeFormData = () => useNodeData()?.formData;