@flowuent-org/diagramming-core 1.0.5

package/packages/diagrams/src/lib/contexts/undo.ts

@@ -0,0 +1,163 @@
+// undoRedo.ts
+import {
+  applyEdgeChanges,
+  applyNodeChanges,
+  Edge,
+  EdgeChange,
+  NodeChange,
+} from '@xyflow/react';
+import { ICardNode } from '../types/card-node';
+import {
+  DiagramStore,
+  HistoryEvent,
+  OnChangeEventHandler,
+  UndoRedoChange,
+  ComplexChange,
+} from './diagramStoreTypes';
+
+// Generic function to navigate to a specific history index
+export const goToHistoryIndex = (
+  set: (fn: (state: DiagramStore) => DiagramStore) => void,
+  get: () => DiagramStore,
+  targetIndex: number,
+) => {
+  const state = get();
+  const history = state.history;
+  const currentIndex = state.historyIndex;
+
+  // Validate target index
+  if (targetIndex < -1 || targetIndex >= history.length) {
+    return;
+  }
+
+  // If we're going backwards (undo)
+  if (targetIndex < currentIndex) {
+    const stepsToUndo = currentIndex - targetIndex;
+    let newState = { ...state };
+
+    for (let i = 0; i < stepsToUndo; i++) {
+      const historyIndex = currentIndex - i;
+      if (historyIndex >= 0 && history[historyIndex]) {
+        const historyEvent = history[historyIndex];
+        newState = applyChange(newState, historyEvent.backward);
+      }
+    }
+
+    set(() => ({
+      ...newState,
+      historyIndex: targetIndex,
+    }));
+  }
+  // If we're going forwards (redo)
+  else if (targetIndex > currentIndex) {
+    const stepsToRedo = targetIndex - currentIndex;
+    let newState = { ...state };
+
+    for (let i = 0; i < stepsToRedo; i++) {
+      const historyIndex = currentIndex + i + 1;
+      if (historyIndex < history.length && history[historyIndex]) {
+        const historyEvent = history[historyIndex];
+        newState = applyChange(newState, historyEvent.forward);
+      }
+    }
+
+    set(() => ({
+      ...newState,
+      historyIndex: targetIndex,
+    }));
+  }
+};
+
+function applyChange(
+  state: DiagramStore,
+  change: UndoRedoChange,
+): DiagramStore {
+  switch (change.t) {
+    case 'node-change':
+      return applyNodeChange(state, change);
+    case 'edge-change':
+      return applyEdgeChange(state, change);
+    case 'complex-change':
+      return applyComplexChange(state, change);
+    default:
+      return state;
+  }
+}
+
+function applyNodeChange(
+  state: DiagramStore,
+  change: NodeChange & { t: 'node-change' },
+): DiagramStore {
+  switch (change.type) {
+    case 'position':
+      return {
+        ...state,
+        nodes: state.nodes.map((node) =>
+          node.id === change.id
+            ? {
+                ...node,
+                position:
+                  change.position || change.positionAbsolute || node.position,
+              }
+            : node,
+        ),
+      };
+    case 'remove':
+      return {
+        ...state,
+        nodes: state.nodes.filter((node) => node.id !== change.id),
+      };
+    case 'add':
+      return {
+        ...state,
+        nodes: [...state.nodes, change.item as ICardNode],
+      };
+    case 'replace':
+      return {
+        ...state,
+        nodes: state.nodes.map((node) =>
+          node.id === change.item.id ? (change.item as ICardNode) : node,
+        ),
+      };
+    default:
+      return state;
+  }
+}
+
+function applyEdgeChange(
+  state: DiagramStore,
+  change: EdgeChange & { t: 'edge-change' },
+): DiagramStore {
+  switch (change.type) {
+    case 'remove':
+      return {
+        ...state,
+        edges: state.edges.filter((edge) => edge.id !== change.id),
+      };
+    case 'add':
+      return {
+        ...state,
+        edges: [...state.edges, change.item as Edge],
+      };
+    case 'replace':
+      return {
+        ...state,
+        edges: state.edges.map((edge) =>
+          edge.id === change.item.id ? (change.item as Edge) : edge,
+        ),
+      };
+    default:
+      return state;
+  }
+}
+
+function applyComplexChange(
+  state: DiagramStore,
+  change: ComplexChange & { t: 'complex-change' },
+): DiagramStore {
+  return {
+    ...state,
+    nodes: change.nodesAndEdges.nodes,
+    edges: change.nodesAndEdges.edges,
+  };
+}

package/packages/diagrams/src/lib/contexts/updateNodeSetting.ts

@@ -0,0 +1,17 @@
+// diagramHandlers/updateNodeSetting.ts
+
+import { NodeSettings } from './diagramStoreTypes';
+import { DiagramStore } from './diagramStoreTypes';
+
+export const updateNodeSetting =
+  (set: (fn: (state: DiagramStore) => DiagramStore) => void) =>
+  (nodeId: string, key: keyof NodeSettings, value: boolean) => {
+    set((state) => ({
+      ...state,
+      nodes: state.nodes.map((node) =>
+        node.id === nodeId
+          ? { ...node, data: { ...node.data, [key]: value } }
+          : node,
+      ),
+    }));
+  };

package/packages/diagrams/src/lib/examples/GoogleSheetsConfigurationExamples.ts

@@ -0,0 +1,306 @@
+// Google Sheets API Configuration Examples
+// This file shows how to configure the automation sheet node with real Google Sheets API
+
+export const googleSheetsConfigExamples = {
+  // Example 1: Service Account Authentication
+  serviceAccountExample: {
+    spreadsheetId: '1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms',
+    sheetName: 'Data Export',
+    range: 'A1:Z1000',
+    credentials: {
+      type: 'service-account' as const,
+      serviceAccountKey: JSON.stringify({
+        type: 'service_account',
+        project_id: 'your-project-id',
+        private_key_id: 'your-private-key-id',
+        private_key:
+          '-----BEGIN PRIVATE KEY-----\nYOUR_PRIVATE_KEY_HERE\n-----END PRIVATE KEY-----\n',
+        client_email:
+          'your-service-account@your-project.iam.gserviceaccount.com',
+        client_id: 'your-client-id',
+        auth_uri: 'https://accounts.google.com/o/oauth2/auth',
+        token_uri: 'https://oauth2.googleapis.com/token',
+        auth_provider_x509_cert_url:
+          'https://www.googleapis.com/oauth2/v1/certs',
+        client_x509_cert_url:
+          'https://www.googleapis.com/robot/v1/metadata/x509/your-service-account%40your-project.iam.gserviceaccount.com',
+      }),
+      // Alternative: separate fields
+      clientEmail: 'your-service-account@your-project.iam.gserviceaccount.com',
+      privateKey:
+        '-----BEGIN PRIVATE KEY-----\nYOUR_PRIVATE_KEY_HERE\n-----END PRIVATE KEY-----\n',
+    },
+  },
+
+  // Example 2: API Key Authentication (read-only access)
+  apiKeyExample: {
+    spreadsheetId: '1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms',
+    sheetName: 'Public Data',
+    range: 'A1:F100',
+    credentials: {
+      type: 'api-key' as const,
+      apiKey: 'YOUR_GOOGLE_API_KEY_HERE',
+    },
+  },
+
+  // Example 3: OAuth Authentication (user consent required)
+  oauthExample: {
+    spreadsheetId: '1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms',
+    sheetName: 'User Data',
+    range: 'A1:Z1000',
+    credentials: {
+      type: 'oauth' as const,
+      oauthToken: 'ya29.a0AfH6SMC...', // OAuth 2.0 access token
+    },
+  },
+};
+
+export const dataMappingExamples = {
+  // Example 1: News Analysis Data
+  newsAnalysis: {
+    headers: [
+      { column: 'A', sourceField: 'title', dataType: 'string' as const },
+      { column: 'B', sourceField: 'author', dataType: 'string' as const },
+      { column: 'C', sourceField: 'published_date', dataType: 'date' as const },
+      { column: 'D', sourceField: 'summary', dataType: 'string' as const },
+      { column: 'E', sourceField: 'topics', dataType: 'string' as const },
+      { column: 'F', sourceField: 'confidence', dataType: 'number' as const },
+      { column: 'G', sourceField: 'sentiment', dataType: 'string' as const },
+      { column: 'H', sourceField: 'word_count', dataType: 'number' as const },
+    ],
+    appendMode: true,
+    clearSheet: false,
+  },
+
+  // Example 2: User Data Export
+  userData: {
+    headers: [
+      { column: 'A', sourceField: 'id', dataType: 'string' as const },
+      { column: 'B', sourceField: 'name', dataType: 'string' as const },
+      { column: 'C', sourceField: 'email', dataType: 'string' as const },
+      { column: 'D', sourceField: 'created_at', dataType: 'date' as const },
+      { column: 'E', sourceField: 'is_active', dataType: 'boolean' as const },
+      { column: 'F', sourceField: 'profile.age', dataType: 'number' as const },
+      {
+        column: 'G',
+        sourceField: 'profile.location',
+        dataType: 'string' as const,
+      },
+    ],
+    appendMode: false,
+    clearSheet: true,
+  },
+
+  // Example 3: Financial Data
+  financialData: {
+    headers: [
+      {
+        column: 'A',
+        sourceField: 'transaction_id',
+        dataType: 'string' as const,
+      },
+      { column: 'B', sourceField: 'date', dataType: 'date' as const },
+      { column: 'C', sourceField: 'amount', dataType: 'number' as const },
+      { column: 'D', sourceField: 'currency', dataType: 'string' as const },
+      { column: 'E', sourceField: 'category', dataType: 'string' as const },
+      { column: 'F', sourceField: 'description', dataType: 'string' as const },
+      {
+        column: 'G',
+        sourceField: 'is_recurring',
+        dataType: 'boolean' as const,
+      },
+    ],
+    appendMode: true,
+    clearSheet: false,
+  },
+};
+
+export const exportOptionsExamples = {
+  // Example 1: Email to multiple recipients with Excel export
+  emailExcelExport: {
+    emailRecipients: [
+      'manager@company.com',
+      'analyst@company.com',
+      'stakeholder@company.com',
+    ],
+    fileName: 'monthly_report_2024.xlsx',
+    exportFormat: 'excel' as const,
+    includeHeaders: true,
+    sendEmailNotification: true,
+  },
+
+  // Example 2: Google Sheets only with email notification
+  sheetsOnlyExport: {
+    emailRecipients: ['team@company.com'],
+    fileName: 'shared_data_sheet',
+    exportFormat: 'sheets' as const,
+    includeHeaders: true,
+    sendEmailNotification: true,
+  },
+
+  // Example 3: Both formats with multiple recipients
+  bothFormatsExport: {
+    emailRecipients: [
+      'ceo@company.com',
+      'cto@company.com',
+      'finance@company.com',
+    ],
+    fileName: 'quarterly_analysis_report',
+    exportFormat: 'both' as const,
+    includeHeaders: true,
+    sendEmailNotification: true,
+  },
+
+  // Example 4: Local download only (no email)
+  localDownloadOnly: {
+    emailRecipients: [],
+    fileName: 'local_backup_data.xlsx',
+    exportFormat: 'excel' as const,
+    includeHeaders: true,
+    sendEmailNotification: false,
+  },
+};
+
+// Complete automation sheet node configuration example
+export const completeAutomationSheetsNodeExample = {
+  nodeId: 'google-sheets-export-node',
+  title: 'Google Sheets Export',
+  type: 'sheets' as const,
+  inputVariable: 'processedData',
+  sheetsConfig: googleSheetsConfigExamples.serviceAccountExample,
+  dataMapping: dataMappingExamples.newsAnalysis,
+  exportOptions: exportOptionsExamples.bothFormatsExport,
+  outputVariable: 'sheetsResponse',
+  errorHandling: {
+    onError: 'retry' as const,
+    maxRetries: 3,
+    fallbackAction: 'log' as const,
+  },
+  isPinned: false,
+  isBlock: false,
+  blocks: [],
+  parallelChildrenCount: 0,
+  conditions: {
+    combinator: 'and' as const,
+    rules: [],
+  },
+};
+
+// Sample input data for testing
+export const sampleInputData = [
+  {
+    title: 'Breaking: New AI Technology Announced',
+    author: 'John Smith',
+    published_date: '2024-01-15',
+    summary:
+      'A revolutionary AI technology has been announced that could change the industry.',
+    topics: 'AI, Technology, Innovation',
+    confidence: 0.95,
+    sentiment: 'positive',
+    word_count: 250,
+  },
+  {
+    title: 'Market Analysis: Tech Stocks Rise',
+    author: 'Jane Doe',
+    published_date: '2024-01-14',
+    summary:
+      "Technology stocks showed significant gains in today's trading session.",
+    topics: 'Finance, Technology, Market',
+    confidence: 0.87,
+    sentiment: 'neutral',
+    word_count: 180,
+  },
+  {
+    title: 'Climate Change Summit Results',
+    author: 'Mike Johnson',
+    published_date: '2024-01-13',
+    summary:
+      'World leaders reached new agreements on climate change initiatives.',
+    topics: 'Environment, Politics, Climate',
+    confidence: 0.92,
+    sentiment: 'positive',
+    word_count: 320,
+  },
+];
+
+// Usage instructions
+export const usageInstructions = `
+# Google Sheets Automation Node Usage Guide
+
+## Setup Instructions
+
+### 1. Google Cloud Console Setup
+1. Go to Google Cloud Console (https://console.cloud.google.com/)
+2. Create a new project or select existing one
+3. Enable Google Sheets API and Google Drive API
+4. Create service account credentials:
+   - Go to IAM & Admin > Service Accounts
+   - Create new service account
+   - Download JSON key file
+   - Share your Google Sheet with the service account email
+
+### 2. Authentication Methods
+
+#### Service Account (Recommended)
+- Most secure for automated processes
+- No user interaction required
+- Use the JSON key file content in serviceAccountKey field
+
+#### API Key
+- Read-only access only
+- Good for public data access
+- Limited functionality
+
+#### OAuth
+- Full user access
+- Requires user consent
+- Good for user-specific data
+
+### 3. Configuration
+
+#### Spreadsheet Configuration
+- spreadsheetId: Found in Google Sheets URL
+- sheetName: Name of the specific sheet tab
+- range: Cell range (e.g., 'A1:Z1000')
+
+#### Data Mapping
+- Map your input data fields to spreadsheet columns
+- Support nested fields with dot notation (e.g., 'profile.age')
+- Choose appropriate data types: string, number, date, boolean
+
+#### Export Options
+- emailRecipients: Array of email addresses
+- fileName: Name for downloaded files
+- exportFormat: 'sheets', 'excel', or 'both'
+- includeHeaders: Whether to include column headers
+- sendEmailNotification: Whether to send email notifications
+
+### 4. Error Handling
+- onError: 'stop', 'retry', or 'continue'
+- maxRetries: Number of retry attempts
+- fallbackAction: 'skip', 'log', or 'notify'
+
+## Example Workflow
+
+1. Configure the automation sheet node with your Google Sheets credentials
+2. Set up data mapping for your input data structure
+3. Configure export options (email recipients, file name, format)
+4. Connect the node to your data source
+5. Execute the workflow
+6. Check email for notifications and download links
+
+## Troubleshooting
+
+### Common Issues
+1. Authentication errors: Check service account permissions
+2. Spreadsheet not found: Verify spreadsheet ID and sharing permissions
+3. Data mapping errors: Check field names and data types
+4. Email delivery issues: Verify email service configuration
+
+### Best Practices
+1. Use service account authentication for production
+2. Test with small datasets first
+3. Set appropriate error handling strategies
+4. Monitor execution logs for issues
+5. Keep credentials secure and rotate regularly
+`;

package/packages/diagrams/src/lib/examples/TwilioWhatsAppConfigExample.ts

@@ -0,0 +1,128 @@
+// Example Twilio WhatsApp Configuration
+// Copy this configuration to your automation node data
+
+export const exampleTwilioWhatsAppConfig = {
+  // Basic WhatsApp settings
+  whatsapp: {
+    enabled: true,
+    phoneNumber: '+1234567890', // Replace with recipient's WhatsApp number
+    messageTemplate:
+      'Automation {{fileName}} completed successfully! Rows processed: {{rowsAdded}}.',
+    includeDataMode: 'summary' as const,
+
+    // Twilio API configuration
+    twilio: {
+      enabled: true,
+      accountSid: 'ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', // Your Twilio Account SID
+      authToken: 'your_auth_token_here', // Your Twilio Auth Token
+      fromNumber: 'whatsapp:+14155238886', // Twilio sandbox number (or your business number)
+      isSandbox: true, // Set to false for production
+
+      // Optional: Template configuration for production
+      templateSid: 'HXxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', // Your approved template SID
+      templateVariables: {
+        fileName: '{{fileName}}',
+        rowsAdded: '{{rowsAdded}}',
+        timestamp: '{{timestamp}}',
+      },
+    },
+  },
+};
+
+// Environment variables example (.env file)
+export const environmentVariablesExample = `
+# Twilio Configuration
+TWILIO_ACCOUNT_SID=ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+TWILIO_AUTH_TOKEN=your_auth_token_here
+TWILIO_WHATSAPP_FROM_NUMBER=whatsapp:+14155238886
+TWILIO_WHATSAPP_SANDBOX=true
+
+# WhatsApp Recipients
+WHATSAPP_RECIPIENT_1=+1234567890
+WHATSAPP_RECIPIENT_2=+0987654321
+`;
+
+// Production configuration example
+export const productionTwilioConfig = {
+  whatsapp: {
+    enabled: true,
+    phoneNumber: '+1234567890',
+    messageTemplate: 'Your automation has completed successfully!',
+    includeDataMode: 'summary' as const,
+
+    twilio: {
+      enabled: true,
+      accountSid: process.env.TWILIO_ACCOUNT_SID || '',
+      authToken: process.env.TWILIO_AUTH_TOKEN || '',
+      fromNumber:
+        process.env.TWILIO_WHATSAPP_FROM_NUMBER || 'whatsapp:+1234567890',
+      isSandbox: false, // Production mode
+
+      // Required for production: approved template
+      templateSid: 'HXxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
+      templateVariables: {
+        customerName: '{{customerName}}',
+        automationName: '{{automationName}}',
+        resultCount: '{{resultCount}}',
+        timestamp: '{{timestamp}}',
+      },
+    },
+  },
+};
+
+// Test configuration for development
+export const testTwilioConfig = {
+  whatsapp: {
+    enabled: true,
+    phoneNumber: '+1234567890', // Your test number
+    messageTemplate: 'Test message: {{message}}',
+    includeDataMode: 'custom' as const,
+
+    twilio: {
+      enabled: true,
+      accountSid: 'ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
+      authToken: 'your_auth_token_here',
+      fromNumber: 'whatsapp:+14155238886', // Sandbox number
+      isSandbox: true, // Sandbox mode
+    },
+  },
+};
+
+// Usage example in your automation workflow
+export const usageExample = `
+// In your automation node configuration
+const nodeData = {
+  // ... other node data
+  formData: {
+    // ... other form data
+    exportOptions: {
+      // ... other export options
+      whatsapp: exampleTwilioWhatsAppConfig.whatsapp,
+    },
+  },
+};
+
+// Test the configuration
+import { TwilioWhatsAppService } from './services/TwilioWhatsAppService';
+
+const twilioService = new TwilioWhatsAppService({
+  accountSid: exampleTwilioWhatsAppConfig.whatsapp.twilio.accountSid,
+  authToken: exampleTwilioWhatsAppConfig.whatsapp.twilio.authToken,
+  fromNumber: exampleTwilioWhatsAppConfig.whatsapp.twilio.fromNumber,
+  isSandbox: exampleTwilioWhatsAppConfig.whatsapp.twilio.isSandbox,
+});
+
+// Validate configuration
+const validation = twilioService.validateConfig();
+if (!validation.valid) {
+  console.error('Twilio configuration errors:', validation.errors);
+}
+
+// Send test message
+const result = await twilioService.sendMessage({
+  to: exampleTwilioWhatsAppConfig.whatsapp.phoneNumber,
+  message: 'Test message from automation workflow!',
+});
+
+// Message sent result available in result.success
+`;

package/packages/diagrams/src/lib/externals.ts

@@ -0,0 +1,4 @@
+import { MiniMap } from '@xyflow/react';
+import Controls from './atoms/DiagramControls';
+
+export { Controls, MiniMap };

package/packages/diagrams/src/lib/hooks/customUseReactFlow.tsx

@@ -0,0 +1,90 @@
+import {
+  Node,
+  ReactFlowInstance,
+  useReactFlow as useOriginalReactFlow,
+} from '@xyflow/react';
+import { ICardNode } from '../types/card-node';
+import { useCallback, useMemo } from 'react';
+
+type SetNodesFn<T> = (nodes: T[] | ((nodes: T[]) => T[])) => void;
+
+interface CustomReactFlowInstance
+  extends Omit<
+    ReactFlowInstance,
+    'getNodes' | 'setNodes' | 'addNodes' | 'getNode'
+  > {
+  getNodes: () => ICardNode[];
+  setNodes: SetNodesFn<ICardNode>;
+  addNodes: (nodes: ICardNode | ICardNode[]) => void;
+  getNode: (id: string) => ICardNode | null;
+}
+
+function convertToICardNode(node: Node): ICardNode {
+  return {
+    ...node,
+    parentId: node.parentId ?? node.data?.parentId ?? undefined,
+    subParentId: node.data?.subParentId ?? undefined,
+    type: (node.type as 'entity' | 'workflow') || 'workflow',
+    data: node.data,
+  } as ICardNode;
+}
+
+function convertToNode(node: ICardNode): Node {
+  const { parentId, subParentId, type, draggable, width, height, ...rest } = node;
+  return {
+    ...rest,
+    parentId,
+    type,
+    data: { ...node.data, draggable, width, height, subParentId },
+  };
+}
+
+export function useCustomReactFlow(): CustomReactFlowInstance {
+  const instance = useOriginalReactFlow();
+
+  const getNodes = useCallback(
+    () => instance.getNodes().map(convertToICardNode),
+    [instance],
+  );
+
+  const setNodes = useCallback<SetNodesFn<ICardNode>>(
+    (nodes) => {
+      if (typeof nodes === 'function') {
+        instance.setNodes((currentNodes) => {
+          const cardNodes = currentNodes.map(convertToICardNode);
+          return nodes(cardNodes).map(convertToNode);
+        });
+      } else {
+        instance.setNodes(nodes.map(convertToNode));
+      }
+    },
+    [instance],
+  );
+
+  const addNodes = useCallback(
+    (nodes: ICardNode | ICardNode[]) => {
+      const nodeArray = Array.isArray(nodes) ? nodes : [nodes];
+      instance.addNodes(nodeArray.map(convertToNode));
+    },
+    [instance],
+  );
+
+  const getNode = useCallback(
+    (id: string) => {
+      const node = instance.getNode(id);
+      return node ? convertToICardNode(node) : null;
+    },
+    [instance],
+  );
+
+  return useMemo(
+    () => ({
+      ...instance,
+      getNodes,
+      setNodes,
+      addNodes,
+      getNode,
+    }),
+    [instance, getNodes, setNodes, addNodes, getNode],
+  );
+}