@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/packages/diagrams/src/lib/services/TwilioWhatsAppService.ts

@@ -1,273 +1,273 @@
-export interface TwilioConfig {
-  accountSid: string;
-  authToken: string;
-  fromNumber: string; // WhatsApp number from Twilio (e.g., whatsapp:+14155238886)
-  isSandbox: boolean; // true for sandbox, false for production
-}
-
-export interface TwilioMessageOptions {
-  to: string; // Recipient's WhatsApp number (e.g., whatsapp:+1234567890)
-  message?: string; // Optional for template messages
-  templateSid?: string; // For template messages (required for production)
-  templateVariables?: Record<string, string>; // Variables for template
-}
-
-export interface TwilioMessageResult {
-  success: boolean;
-  messageSid?: string;
-  error?: string;
-  status?: string;
-}
-
-export interface TwilioValidationResult {
-  valid: boolean;
-  errors: string[];
-}
-
-export class TwilioWhatsAppService {
-  private config: TwilioConfig;
-
-  constructor(config: TwilioConfig) {
-    this.config = config;
-  }
-
-  /**
-   * Validates the Twilio configuration
-   */
-  public validateConfig(config?: TwilioConfig): TwilioValidationResult {
-    const configToValidate = config || this.config;
-    const errors: string[] = [];
-
-    if (!configToValidate.accountSid) {
-      errors.push('Account SID is required');
-    } else if (!configToValidate.accountSid.startsWith('AC')) {
-      errors.push('Account SID must start with "AC"');
-    }
-
-    if (!configToValidate.authToken) {
-      errors.push('Auth Token is required');
-    } else if (configToValidate.authToken.length < 32) {
-      errors.push('Auth Token appears to be invalid (too short)');
-    }
-
-    if (!configToValidate.fromNumber) {
-      errors.push('From number is required');
-    } else if (!configToValidate.fromNumber.startsWith('whatsapp:')) {
-      errors.push('From number must start with "whatsapp:"');
-    }
-
-    return {
-      valid: errors.length === 0,
-      errors,
-    };
-  }
-
-  /**
-   * Sends a WhatsApp message using Twilio API
-   */
-  public async sendMessage(
-    options: TwilioMessageOptions,
-  ): Promise<TwilioMessageResult> {
-    try {
-      // Validate configuration
-      const validation = this.validateConfig();
-      if (!validation.valid) {
-        return {
-          success: false,
-          error: `Configuration validation failed: ${validation.errors.join(', ')}`,
-        };
-      }
-
-      // Validate message options
-
-      if (!options.to) {
-        return {
-          success: false,
-          error: 'Recipient number is required',
-        };
-      }
-
-      if (!options.message && !options.templateSid) {
-        return {
-          success: false,
-          error: 'Message content or template SID is required',
-        };
-      }
-
-      // Format recipient number
-      const formattedTo = this.formatPhoneNumber(options.to);
-
-      // Prepare message payload
-      const messagePayload: any = {
-        from: this.config.fromNumber,
-        to: formattedTo,
-      };
-
-      // Use template if provided, otherwise use regular message
-      if (options.templateSid) {
-        messagePayload.contentSid = options.templateSid;
-        if (options.templateVariables) {
-          messagePayload.contentVariables = JSON.stringify(
-            options.templateVariables,
-          );
-        }
-      } else {
-        messagePayload.body = options.message;
-      }
-
-      // Make API call to Twilio
-      const response = await this.makeTwilioApiCall(messagePayload);
-
-      if (response.success) {
-        return {
-          success: true,
-          messageSid: response.messageSid,
-          status: response.status,
-        };
-      } else {
-        return {
-          success: false,
-          error: response.error,
-        };
-      }
-    } catch (error) {
-      return {
-        success: false,
-        error:
-          error instanceof Error ? error.message : 'Unknown error occurred',
-      };
-    }
-  }
-
-  /**
-   * Formats phone number to WhatsApp format
-   */
-  private formatPhoneNumber(phoneNumber: string): string {
-    // Remove all non-digit characters
-    const cleaned = phoneNumber.replace(/[^\d]/g, '');
-
-    // Add whatsapp: prefix if not present
-    if (!phoneNumber.startsWith('whatsapp:')) {
-      return `whatsapp:+${cleaned}`;
-    }
-
-    return phoneNumber;
-  }
-
-  /**
-   * Makes the actual API call to Twilio
-   */
-  private async makeTwilioApiCall(payload: any): Promise<{
-    success: boolean;
-    messageSid?: string;
-    status?: string;
-    error?: string;
-  }> {
-    try {
-      // Create basic auth header
-      const credentials = btoa(
-        `${this.config.accountSid}:${this.config.authToken}`,
-      );
-
-      // Prepare request
-      const requestBody = new URLSearchParams();
-      Object.keys(payload).forEach((key) => {
-        // Twilio expects capitalized field names for template messages
-        const fieldName =
-          key === 'from'
-            ? 'From'
-            : key === 'to'
-              ? 'To'
-              : key === 'contentSid'
-                ? 'ContentSid'
-                : key === 'contentVariables'
-                  ? 'ContentVariables'
-                  : key === 'body'
-                    ? 'Body'
-                    : key;
-        requestBody.append(fieldName, payload[key]);
-      });
-
-      const response = await fetch(
-        `https://api.twilio.com/2010-04-01/Accounts/${this.config.accountSid}/Messages.json`,
-        {
-          method: 'POST',
-          headers: {
-            Authorization: `Basic ${credentials}`,
-            'Content-Type': 'application/x-www-form-urlencoded',
-          },
-          body: requestBody.toString(),
-        },
-      );
-
-      const responseData = await response.json();
-
-      if (response.ok) {
-        return {
-          success: true,
-          messageSid: responseData.sid,
-          status: responseData.status,
-        };
-      } else {
-        return {
-          success: false,
-          error:
-            responseData.message ||
-            `HTTP ${response.status}: ${response.statusText}`,
-        };
-      }
-    } catch (error) {
-      return {
-        success: false,
-        error: error instanceof Error ? error.message : 'Network error',
-      };
-    }
-  }
-
-  /**
-   * Sends a template message (for production use)
-   */
-  public async sendTemplateMessage(
-    to: string,
-    templateSid: string,
-    templateVariables: Record<string, string>,
-  ): Promise<TwilioMessageResult> {
-    return this.sendMessage({
-      to,
-      templateSid,
-      templateVariables,
-    });
-  }
-
-  /**
-   * Checks if the service is configured for sandbox mode
-   */
-  public isSandboxMode(): boolean {
-    return this.config.isSandbox;
-  }
-
-  /**
-   * Gets the configured from number
-   */
-  public getFromNumber(): string {
-    return this.config.fromNumber;
-  }
-
-  /**
-   * Updates the configuration
-   */
-  public updateConfig(newConfig: Partial<TwilioConfig>): void {
-    this.config = { ...this.config, ...newConfig };
-  }
-
-  /**
-   * Gets the current configuration (without sensitive data)
-   */
-  public getConfig(): Omit<TwilioConfig, 'authToken'> {
-    return {
-      accountSid: this.config.accountSid,
-      fromNumber: this.config.fromNumber,
-      isSandbox: this.config.isSandbox,
-    };
-  }
-}
+export interface TwilioConfig {
+  accountSid: string;
+  authToken: string;
+  fromNumber: string; // WhatsApp number from Twilio (e.g., whatsapp:+14155238886)
+  isSandbox: boolean; // true for sandbox, false for production
+}
+
+export interface TwilioMessageOptions {
+  to: string; // Recipient's WhatsApp number (e.g., whatsapp:+1234567890)
+  message?: string; // Optional for template messages
+  templateSid?: string; // For template messages (required for production)
+  templateVariables?: Record<string, string>; // Variables for template
+}
+
+export interface TwilioMessageResult {
+  success: boolean;
+  messageSid?: string;
+  error?: string;
+  status?: string;
+}
+
+export interface TwilioValidationResult {
+  valid: boolean;
+  errors: string[];
+}
+
+export class TwilioWhatsAppService {
+  private config: TwilioConfig;
+
+  constructor(config: TwilioConfig) {
+    this.config = config;
+  }
+
+  /**
+   * Validates the Twilio configuration
+   */
+  public validateConfig(config?: TwilioConfig): TwilioValidationResult {
+    const configToValidate = config || this.config;
+    const errors: string[] = [];
+
+    if (!configToValidate.accountSid) {
+      errors.push('Account SID is required');
+    } else if (!configToValidate.accountSid.startsWith('AC')) {
+      errors.push('Account SID must start with "AC"');
+    }
+
+    if (!configToValidate.authToken) {
+      errors.push('Auth Token is required');
+    } else if (configToValidate.authToken.length < 32) {
+      errors.push('Auth Token appears to be invalid (too short)');
+    }
+
+    if (!configToValidate.fromNumber) {
+      errors.push('From number is required');
+    } else if (!configToValidate.fromNumber.startsWith('whatsapp:')) {
+      errors.push('From number must start with "whatsapp:"');
+    }
+
+    return {
+      valid: errors.length === 0,
+      errors,
+    };
+  }
+
+  /**
+   * Sends a WhatsApp message using Twilio API
+   */
+  public async sendMessage(
+    options: TwilioMessageOptions,
+  ): Promise<TwilioMessageResult> {
+    try {
+      // Validate configuration
+      const validation = this.validateConfig();
+      if (!validation.valid) {
+        return {
+          success: false,
+          error: `Configuration validation failed: ${validation.errors.join(', ')}`,
+        };
+      }
+
+      // Validate message options
+
+      if (!options.to) {
+        return {
+          success: false,
+          error: 'Recipient number is required',
+        };
+      }
+
+      if (!options.message && !options.templateSid) {
+        return {
+          success: false,
+          error: 'Message content or template SID is required',
+        };
+      }
+
+      // Format recipient number
+      const formattedTo = this.formatPhoneNumber(options.to);
+
+      // Prepare message payload
+      const messagePayload: any = {
+        from: this.config.fromNumber,
+        to: formattedTo,
+      };
+
+      // Use template if provided, otherwise use regular message
+      if (options.templateSid) {
+        messagePayload.contentSid = options.templateSid;
+        if (options.templateVariables) {
+          messagePayload.contentVariables = JSON.stringify(
+            options.templateVariables,
+          );
+        }
+      } else {
+        messagePayload.body = options.message;
+      }
+
+      // Make API call to Twilio
+      const response = await this.makeTwilioApiCall(messagePayload);
+
+      if (response.success) {
+        return {
+          success: true,
+          messageSid: response.messageSid,
+          status: response.status,
+        };
+      } else {
+        return {
+          success: false,
+          error: response.error,
+        };
+      }
+    } catch (error) {
+      return {
+        success: false,
+        error:
+          error instanceof Error ? error.message : 'Unknown error occurred',
+      };
+    }
+  }
+
+  /**
+   * Formats phone number to WhatsApp format
+   */
+  private formatPhoneNumber(phoneNumber: string): string {
+    // Remove all non-digit characters
+    const cleaned = phoneNumber.replace(/[^\d]/g, '');
+
+    // Add whatsapp: prefix if not present
+    if (!phoneNumber.startsWith('whatsapp:')) {
+      return `whatsapp:+${cleaned}`;
+    }
+
+    return phoneNumber;
+  }
+
+  /**
+   * Makes the actual API call to Twilio
+   */
+  private async makeTwilioApiCall(payload: any): Promise<{
+    success: boolean;
+    messageSid?: string;
+    status?: string;
+    error?: string;
+  }> {
+    try {
+      // Create basic auth header
+      const credentials = btoa(
+        `${this.config.accountSid}:${this.config.authToken}`,
+      );
+
+      // Prepare request
+      const requestBody = new URLSearchParams();
+      Object.keys(payload).forEach((key) => {
+        // Twilio expects capitalized field names for template messages
+        const fieldName =
+          key === 'from'
+            ? 'From'
+            : key === 'to'
+              ? 'To'
+              : key === 'contentSid'
+                ? 'ContentSid'
+                : key === 'contentVariables'
+                  ? 'ContentVariables'
+                  : key === 'body'
+                    ? 'Body'
+                    : key;
+        requestBody.append(fieldName, payload[key]);
+      });
+
+      const response = await fetch(
+        `https://api.twilio.com/2010-04-01/Accounts/${this.config.accountSid}/Messages.json`,
+        {
+          method: 'POST',
+          headers: {
+            Authorization: `Basic ${credentials}`,
+            'Content-Type': 'application/x-www-form-urlencoded',
+          },
+          body: requestBody.toString(),
+        },
+      );
+
+      const responseData = await response.json();
+
+      if (response.ok) {
+        return {
+          success: true,
+          messageSid: responseData.sid,
+          status: responseData.status,
+        };
+      } else {
+        return {
+          success: false,
+          error:
+            responseData.message ||
+            `HTTP ${response.status}: ${response.statusText}`,
+        };
+      }
+    } catch (error) {
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Network error',
+      };
+    }
+  }
+
+  /**
+   * Sends a template message (for production use)
+   */
+  public async sendTemplateMessage(
+    to: string,
+    templateSid: string,
+    templateVariables: Record<string, string>,
+  ): Promise<TwilioMessageResult> {
+    return this.sendMessage({
+      to,
+      templateSid,
+      templateVariables,
+    });
+  }
+
+  /**
+   * Checks if the service is configured for sandbox mode
+   */
+  public isSandboxMode(): boolean {
+    return this.config.isSandbox;
+  }
+
+  /**
+   * Gets the configured from number
+   */
+  public getFromNumber(): string {
+    return this.config.fromNumber;
+  }
+
+  /**
+   * Updates the configuration
+   */
+  public updateConfig(newConfig: Partial<TwilioConfig>): void {
+    this.config = { ...this.config, ...newConfig };
+  }
+
+  /**
+   * Gets the current configuration (without sensitive data)
+   */
+  public getConfig(): Omit<TwilioConfig, 'authToken'> {
+    return {
+      accountSid: this.config.accountSid,
+      fromNumber: this.config.fromNumber,
+      isSandbox: this.config.isSandbox,
+    };
+  }
+}

package/packages/diagrams/src/lib/styles.css

@@ -1,56 +1,56 @@
-.react-flow__edges {
-  z-index: 20 !important;
-}
-
-/* Connection Handle Styles */
-.react-flow__handle {
-  transition: all 0.2s ease-in-out;
-}
-
-.react-flow__handle.connection-handle {
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  border: 3px solid #10B981;
-  background-color: #1a1a2e;
-  cursor: crosshair;
-  z-index: 10;
-}
-
-.react-flow__handle.connection-handle:hover {
-  transform: scale(1.3);
-  background-color: #10B981;
-  box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
-}
-
-.react-flow__handle.connection-handle:active,
-.react-flow__handle.connection-handle.connecting {
-  transform: scale(1.1);
-  background-color: #059669;
-}
-
-/* Pulse animation for selected node handles */
-@keyframes handle-pulse {
-  0%, 100% {
-    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
-  }
-  50% {
-    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
-  }
-}
-
-.react-flow__node.selected .connection-handle {
-  animation: handle-pulse 1.5s ease-in-out infinite;
-}
-
-/* Connection line styles when drawing */
-.react-flow__connectionline {
-  stroke: #10B981;
-  stroke-width: 2;
-}
-
-/* Valid connection target highlight */
-.react-flow__handle.connectionindicator {
-  background-color: #10B981;
-  border-color: #fff;
+.react-flow__edges {
+  z-index: 20 !important;
+}
+
+/* Connection Handle Styles */
+.react-flow__handle {
+  transition: all 0.2s ease-in-out;
+}
+
+.react-flow__handle.connection-handle {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 3px solid #10B981;
+  background-color: #1a1a2e;
+  cursor: crosshair;
+  z-index: 10;
+}
+
+.react-flow__handle.connection-handle:hover {
+  transform: scale(1.3);
+  background-color: #10B981;
+  box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
+}
+
+.react-flow__handle.connection-handle:active,
+.react-flow__handle.connection-handle.connecting {
+  transform: scale(1.1);
+  background-color: #059669;
+}
+
+/* Pulse animation for selected node handles */
+@keyframes handle-pulse {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
+  }
+  50% {
+    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
+  }
+}
+
+.react-flow__node.selected .connection-handle {
+  animation: handle-pulse 1.5s ease-in-out infinite;
+}
+
+/* Connection line styles when drawing */
+.react-flow__connectionline {
+  stroke: #10B981;
+  stroke-width: 2;
+}
+
+/* Valid connection target highlight */
+.react-flow__handle.connectionindicator {
+  background-color: #10B981;
+  border-color: #fff;
 }

package/packages/diagrams/src/lib/templates/PageLinks.tsx

@@ -1,13 +1,13 @@
-import { Link } from 'react-router-dom';
-
-const PageLinks = () => {
-  return (
-    <div className="container">
-      <Link to="/flow">Flow</Link>
-      <Link to="/erd">ERD</Link>
-      <Link to="/workflow">Workflow</Link>
-    </div>
-  );
-};
-
-export default PageLinks;
+import { Link } from 'react-router-dom';
+
+const PageLinks = () => {
+  return (
+    <div className="container">
+      <Link to="/flow">Flow</Link>
+      <Link to="/erd">ERD</Link>
+      <Link to="/workflow">Workflow</Link>
+    </div>
+  );
+};
+
+export default PageLinks;