@superleapai/flow-ui 1.0.0

package/index.d.ts

@@ -0,0 +1,458 @@
+/**
+ * TypeScript definitions for @superleap/superleap-flow
+ */
+
+declare module "@superleap/superleap-flow" {
+  // ============================================================================
+  // SUPERLEAP SDK
+  // ============================================================================
+  
+  export interface SuperLeapConfig {
+    apiKey?: string;
+    baseUrl?: string;
+    clientId?: string;
+    clientSecret?: string;
+    cache?: {
+      enabled?: boolean;
+      maxSize?: number;
+      defaultTTL?: number;
+      ttl?: {
+        schema?: number;
+        records?: number;
+        count?: number;
+        user?: number;
+      };
+    };
+  }
+
+  export interface SuperLeap {
+    init(config?: SuperLeapConfig): void;
+    getSdk(): any;
+    isAvailable(): boolean;
+    getDefaultConfig(): SuperLeapConfig;
+  }
+
+  export const SuperLeap: SuperLeap;
+
+  // ============================================================================
+  // STATE MANAGEMENT
+  // ============================================================================
+  
+  export interface FlowUIState {
+    [key: string]: any;
+  }
+
+  export interface ButtonConfig {
+    text?: string;
+    label?: string;
+    variant?: "primary" | "outline" | "ghost" | "link" | "primaryDestructive" | "outlineDestructive" | "ghostDestructive" | "dashed" | "toggleOff" | "toggleOn" | "ghostInline" | "linkInline";
+    size?: "small" | "medium" | "default" | "large";
+    type?: "button" | "submit" | "reset";
+    disabled?: boolean;
+    onClick?: (event: MouseEvent) => void;
+    icon?: string;
+    iconPosition?: "left" | "right";
+    loading?: boolean;
+  }
+
+  export interface InputConfig {
+    label: string;
+    fieldId: string;
+    placeholder?: string;
+    required?: boolean;
+    type?: "text" | "email" | "number" | "password" | "tel" | "url";
+    helpText?: string;
+    variant?: "default" | "error" | "warning" | "success" | "borderless" | "inline";
+    inputSize?: "default" | "large" | "small";
+    disabled?: boolean;
+    showReadOnlyIcon?: boolean;
+  }
+
+  export interface TextareaConfig {
+    label: string;
+    fieldId: string;
+    placeholder?: string;
+    required?: boolean;
+    helpText?: string;
+    variant?: "default" | "borderless" | "inline" | "error" | "warning";
+    rows?: number;
+    disabled?: boolean;
+  }
+
+  export interface SelectOption {
+    value: string;
+    label: string;
+    slug?: string;
+    id?: string;
+    name?: string;
+  }
+
+  export interface SelectConfig {
+    label: string;
+    fieldId: string;
+    options: SelectOption[];
+    required?: boolean;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    helpText?: string;
+  }
+
+  export interface TimePickerConfig {
+    label: string;
+    fieldId: string;
+    value?: string;
+    placeholder?: string;
+    required?: boolean;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    use24Hour?: boolean;
+    helpText?: string;
+  }
+
+  export interface DateTimePickerConfig {
+    label: string;
+    fieldId: string;
+    value?: Date | string | null;
+    placeholder?: string;
+    required?: boolean;
+    onChange?: (date: Date | undefined) => void;
+    disabled?: boolean;
+    hourCycle?: 12 | 24;
+    granularity?: "day" | "hour" | "minute" | "second";
+    size?: "small" | "default" | "large";
+    fromDate?: Date;
+    toDate?: Date;
+    helpText?: string;
+  }
+
+  export interface RadioGroupConfig {
+    label: string;
+    fieldId: string;
+    options: Array<{ value: string; label?: string; disabled?: boolean }>;
+    required?: boolean;
+    onChange?: (value: string) => void;
+    helpText?: string;
+    orientation?: "horizontal" | "vertical";
+    disabled?: boolean;
+  }
+
+  export interface MultiSelectConfig {
+    label: string;
+    fieldId: string;
+    options: SelectOption[];
+    required?: boolean;
+    onChange?: (values: string[]) => void;
+    placeholder?: string;
+    helpText?: string;
+    variant?: "default" | "error" | "warning" | "borderless" | "inline";
+    size?: "default" | "large" | "small";
+    type?: "default" | "tags";
+    disabled?: boolean;
+  }
+
+  export interface RecordSelectConfig {
+    label: string;
+    fieldId: string;
+    objectSlug: string;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    required?: boolean;
+    onChange?: (value: string, record?: any) => void;
+    disabled?: boolean;
+    variant?: "default" | "error" | "warning" | "borderless" | "inline";
+    size?: "default" | "large" | "small";
+    canClear?: boolean;
+    initialLimit?: number;
+    helpText?: string;
+  }
+
+  export interface RecordMultiSelectConfig {
+    label: string;
+    fieldId: string;
+    objectSlug: string;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    required?: boolean;
+    onChange?: (values: string[], records?: any[]) => void;
+    disabled?: boolean;
+    variant?: "default" | "error" | "warning" | "borderless" | "inline";
+    size?: "default" | "large" | "small";
+    initialLimit?: number;
+    displayFields?: string[];
+    helpText?: string;
+  }
+
+  export interface EnumSelectConfig {
+    label: string;
+    fieldId: string;
+    objectSlug: string;
+    columnSlug: string;
+    placeholder?: string;
+    required?: boolean;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    variant?: "default" | "error" | "warning" | "borderless" | "inline";
+    size?: "default" | "large" | "small";
+    canClear?: boolean;
+    currentRecordData?: Record<string, any>;
+    helpText?: string;
+  }
+
+  export interface EnumMultiSelectConfig {
+    label: string;
+    fieldId: string;
+    objectSlug: string;
+    columnSlug: string;
+    placeholder?: string;
+    required?: boolean;
+    onChange?: (values: string[]) => void;
+    disabled?: boolean;
+    variant?: "default" | "error" | "warning" | "borderless" | "inline";
+    size?: "default" | "large" | "small";
+    canClear?: boolean;
+    currentRecordData?: Record<string, any>;
+    helpText?: string;
+  }
+
+  export interface DurationConfig {
+    label: string;
+    fieldId: string;
+    value?: number | null;
+    formatType?: "seconds" | "milliseconds";
+    placeholder?: string;
+    required?: boolean;
+    onChange?: (value: number | null) => void;
+    disabled?: boolean;
+    variant?: "default" | "error" | "warning" | "success" | "borderless" | "inline";
+    size?: "small" | "default" | "large";
+    helpText?: string;
+  }
+
+  export interface EnumerationConfig {
+    label: string;
+    fieldId: string;
+    totalElements: number;
+    enabledIcon: string | HTMLElement;
+    disabledIcon: string | HTMLElement;
+    defaultValue?: number;
+    required?: boolean;
+    onChange?: (count: number) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    variant?: "default" | "error" | "warning" | "success" | "borderless" | "inline";
+    size?: "default" | "large" | "small";
+    helpText?: string;
+  }
+
+  export interface FileUploadConfig {
+    label: string;
+    fieldId: string;
+    multiple?: boolean;
+    accept?: string;
+    required?: boolean;
+    helpText?: string;
+    isPrivate?: boolean;
+    maxFiles?: number;
+    maxFileSize?: number;
+  }
+
+  export interface CurrencyConfig {
+    label?: string;
+    fieldId: string;
+    column?: {
+      properties?: {
+        currency?: {
+          currency?: string;
+        };
+      };
+      placeholder?: string;
+    };
+    placeholder?: string;
+    required?: boolean;
+    helpText?: string;
+    variant?: "inline" | "default" | "borderless" | "error" | "warning";
+    size?: "small" | "default" | "large";
+    disabled?: boolean;
+    onChange?: (value: number | null) => void;
+  }
+
+  export interface PhoneInputConfig {
+    label: string;
+    fieldId: string;
+    defaultCountryCode?: string;
+    placeholder?: string;
+    required?: boolean;
+    helpText?: string;
+    variant?: "default" | "error" | "warning" | "borderless" | "inline";
+    inputSize?: "default" | "large" | "small";
+    disabled?: boolean;
+    disableCountrySelect?: boolean;
+    hideCountrySelect?: boolean;
+    onChange?: (fullValue: string, country: any) => void;
+  }
+
+  export interface CheckboxConfig {
+    label: string;
+    fieldId: string;
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    helpText?: string;
+    size?: "default" | "small" | "large";
+    align?: "left" | "right";
+    isLabelCaps?: boolean;
+    onChange?: (isChecked: boolean) => void;
+  }
+
+  export interface DataTableConfig {
+    columns: Array<{ key: string; label: string }>;
+    data: any[];
+    fieldId: string;
+    idKey?: string;
+    onSelect?: (row: any) => void;
+  }
+
+  export interface SearchInputConfig {
+    placeholder?: string;
+    fieldId: string;
+    onSearch?: (query: string) => void;
+  }
+
+  export interface TableColumnConfig {
+    header: string;
+    accessor?: string;
+    cell?: (row: any) => string | HTMLElement;
+    width?: string;
+  }
+
+  export interface TableConfig {
+    data: any[];
+    columns: TableColumnConfig[];
+    showHeader?: boolean;
+    headerSize?: "small" | "default" | "large";
+    hasBorder?: boolean;
+    onRowClick?: (rowId: string) => void;
+    onFetch?: () => void;
+    hasMore?: boolean;
+    isLoading?: boolean;
+    emptyMessage?: string;
+  }
+
+  export interface BadgeConfig {
+    variant?: "default" | "primary";
+    color?: "default" | "info" | "warning" | "error" | "success";
+    size?: "small" | "medium" | "large";
+    startIcon?: string | HTMLElement;
+    endIcon?: string | HTMLElement;
+    icon?: string | HTMLElement;
+    content?: string | HTMLElement;
+    className?: string;
+  }
+
+  export interface AvatarUser {
+    id: number;
+    name: string;
+    image?: string;
+  }
+
+  export interface AvatarConfig {
+    name?: string;
+    image?: string;
+    size?: "small" | "default" | "large" | "custom";
+    shape?: "circle" | "square";
+    className?: string;
+  }
+
+  export interface AvatarGroupConfig {
+    users: AvatarUser[];
+    size?: "small" | "default" | "large" | "custom";
+    className?: string;
+  }
+
+  export interface LoaderConfig {
+    size?: "small" | "medium" | "large";
+    color?: string;
+    text?: string;
+  }
+
+  export interface StepConfig {
+    id: string;
+    label: string;
+  }
+
+  export interface ToastAPI {
+    close: () => void;
+    element: HTMLElement | null;
+  }
+
+  export interface FlowUI {
+    // State management
+    initState(initialState: FlowUIState, onChangeCallback?: (state: FlowUIState) => void): void;
+    getState(): FlowUIState;
+    setState(partial: Partial<FlowUIState>): void;
+    get(key: string): any;
+    set(key: string, value: any): void;
+
+    // Internal component access (for advanced use in clean globals mode)
+    _getComponent(name: string): any;
+
+    // Screen utilities
+    createScreen(title: string, description: string): HTMLElement;
+    createGrid(): HTMLElement;
+    createFieldWrapper(label: string, required?: boolean, helpText?: string | null): HTMLElement;
+
+    // Form components
+    createInput(config: InputConfig): HTMLElement;
+    createTextarea(config: TextareaConfig): HTMLElement;
+    createSelect(config: SelectConfig): HTMLElement;
+    createTimePicker(config: TimePickerConfig): HTMLElement;
+    createDateTimePicker(config: DateTimePickerConfig): HTMLElement;
+    createRadioGroup(config: RadioGroupConfig): HTMLElement;
+    createMultiSelect(config: MultiSelectConfig): HTMLElement;
+    createRecordSelect(config: RecordSelectConfig): HTMLElement;
+    createRecordMultiSelect(config: RecordMultiSelectConfig): HTMLElement;
+    createEnumSelect(config: EnumSelectConfig): HTMLElement;
+    createEnumMultiSelect(config: EnumMultiSelectConfig): HTMLElement;
+    createDuration(config: DurationConfig): HTMLElement;
+    createEnumeration(config: EnumerationConfig): HTMLElement;
+    createFileUpload(config: FileUploadConfig): HTMLElement;
+    createCurrency(config: CurrencyConfig): HTMLElement;
+    createPhoneInput(config: PhoneInputConfig): HTMLElement;
+    createCheckbox(config: CheckboxConfig): HTMLElement;
+    createButton(config: ButtonConfig): HTMLElement;
+
+    // Stepper
+    renderStepper(container: HTMLElement, steps: StepConfig[], currentStepId: string): void;
+
+    // Alerts & Toasts
+    showToast(message: string, type?: "success" | "error" | "warning" | "info" | "loading", duration?: number): ToastAPI;
+    renderAlerts(container: HTMLElement, messages?: (string | { title?: string; description?: string })[], type?: "error" | "info" | "success" | "warning" | "destructive" | "default"): void;
+
+    // Table
+    createDataTable(config: DataTableConfig): HTMLElement;
+    createTable(config: TableConfig): HTMLElement | any;
+    createSearchInput(config: SearchInputConfig): HTMLElement;
+
+    // Summary
+    createSummaryRow(label: string, value: string): HTMLElement;
+
+    // Badge & Loader
+    createBadge(config: BadgeConfig): HTMLElement;
+    createLoader(config?: LoaderConfig): HTMLElement;
+
+    // Avatar
+    createAvatar(config: AvatarConfig): HTMLElement;
+    createVividAvatar(config: AvatarConfig): HTMLElement;
+    createAvatarGroup(config: AvatarGroupConfig): HTMLElement;
+    createVividAvatarGroup(config: AvatarGroupConfig): HTMLElement;
+  }
+
+  export const FlowUI: FlowUI;
+}
+
+declare global {
+  interface Window {
+    FlowUI: FlowUI;
+    SuperLeap: SuperLeap;
+  }
+}

package/index.js

@@ -0,0 +1,253 @@
+/**
+ * Superleap-Flow Library Entry Point
+ * @superleap/superleap-flow
+ * 
+ * Single-file bundle that includes SuperLeap SDK and all components.
+ * Only FlowUI and SuperLeap are exposed to global scope.
+ * 
+ * Usage:
+ * 
+ * Browser (via CDN or script tag):
+ * <script src="path/to/superleap-flow/index.js"></script>
+ * <script>
+ *   // Initialize SuperLeap SDK
+ *   SuperLeap.init({ apiKey: 'YOUR_API_KEY' });
+ *   
+ *   // Use FlowUI
+ *   FlowUI.initState({ name: '' });
+ * </script>
+ * 
+ * ES Module:
+ * import { FlowUI, SuperLeap } from '@superleap/superleap-flow';
+ * 
+ * CommonJS:
+ * const { FlowUI, SuperLeap } = require('@superleap/superleap-flow');
+ */
+
+(function(global) {
+  'use strict';
+
+  // Check if we're in a browser environment
+  const isBrowser = typeof window !== 'undefined';
+  const isNode = typeof require !== 'undefined' && typeof module !== 'undefined';
+
+  // In Node.js/CommonJS environment, load all modules
+  if (isNode && !isBrowser) {
+    // Note: In Node.js, SuperLeap SDK should be installed separately via npm
+    // npm install superleap-sdk
+    try {
+      global.createSuperLeapSDK = require('superleap-sdk');
+    } catch (e) {
+      console.warn('[Superleap-Flow] SuperLeap SDK not found. Install with: npm install superleap-sdk');
+    }
+    
+    // Load core modules
+    require('./core/superleapClient.js');
+    require('./components/label.js');
+    require('./core/flow.js');
+    
+    // Load components in dependency order
+    require('./components/toast.js');
+    require('./components/alert.js');
+    require('./components/button.js');
+    require('./components/spinner.js');
+    require('./components/popover.js');
+    require('./components/select.js');
+    require('./components/enum-select.js');
+    require('./components/record-select.js');
+    require('./components/record-multiselect.js');
+    require('./components/time-picker.js');
+    require('./components/input.js');
+    require('./components/currency.js');
+    require('./components/textarea.js');
+    require('./components/duration/duration-utils.js');
+    require('./components/duration/duration-constants.js');
+    require('./components/duration/duration.js');
+    require('./components/date-time-picker/date-time-picker-utils.js');
+    require('./components/date-time-picker/date-time-picker.js');
+    require('./components/enumeration.js');
+    require('./components/multiselect.js');
+    require('./components/enum-multiselect.js');
+    require('./components/badge.js');
+    require('./components/avatar.js');
+    require('./components/icon.js');
+    require('./components/file-input.js');
+    require('./components/phone-input/phone-utils.js');
+    require('./components/phone-input/phone-input.js');
+    require('./components/checkbox.js');
+    require('./components/radio-group.js');
+    require('./components/table.js');
+    
+    // Export FlowUI and SuperLeap from global scope
+    if (typeof global !== 'undefined' && global.FlowUI) {
+      // Create SuperLeap export
+      const SuperLeap = global.superleapClient ? {
+        init: global.superleapClient.init,
+        getSdk: global.superleapClient.getSdk,
+        isAvailable: global.superleapClient.isAvailable,
+        getDefaultConfig: global.superleapClient.getDefaultConfig
+      } : null;
+      
+      module.exports = {
+        FlowUI: global.FlowUI,
+        SuperLeap: SuperLeap
+      };
+    } else if (typeof window !== 'undefined' && window.FlowUI) {
+      // Create SuperLeap export
+      const SuperLeap = window.superleapClient ? {
+        init: window.superleapClient.init,
+        getSdk: window.superleapClient.getSdk,
+        isAvailable: window.superleapClient.isAvailable,
+        getDefaultConfig: window.superleapClient.getDefaultConfig
+      } : null;
+      
+      module.exports = {
+        FlowUI: window.FlowUI,
+        SuperLeap: SuperLeap
+      };
+    }
+  } else if (isBrowser) {
+    // Browser environment - load all scripts dynamically
+    console.log("[Superleap-Flow] Initializing library...");
+    
+    // Internal component storage (keeps components in closure)
+    const _components = {};
+    
+    // Get the script's base path
+    const scripts = document.getElementsByTagName('script');
+    const currentScript = scripts[scripts.length - 1];
+    const basePath = currentScript.src.substring(0, currentScript.src.lastIndexOf('/') + 1);
+    
+    // List of scripts to load in order
+    const scriptsToLoad = [
+      // Load SuperLeap SDK first
+      'https://cdn.jsdelivr.net/npm/superleap-sdk@2.4.1/superleap.js',
+      'core/superleapClient.js',
+      'components/toast.js',
+      'components/alert.js',
+      'components/label.js',
+      'core/flow.js',
+      'components/button.js',
+      'components/spinner.js',
+      'components/popover.js',
+      'components/select.js',
+      'components/enum-select.js',
+      'components/record-select.js',
+      'components/record-multiselect.js',
+      'components/time-picker.js',
+      'components/input.js',
+      'components/currency.js',
+      'components/textarea.js',
+      'components/duration/duration-utils.js',
+      'components/duration/duration-constants.js',
+      'components/duration/duration.js',
+      'components/date-time-picker/date-time-picker-utils.js',
+      'components/date-time-picker/date-time-picker.js',
+      'components/enumeration.js',
+      'components/multiselect.js',
+      'components/enum-multiselect.js',
+      'components/badge.js',
+      'components/avatar.js',
+      'components/icon.js',
+      'components/file-input.js',
+      'components/phone-input/phone-utils.js',
+      'components/phone-input/phone-input.js',
+      'components/checkbox.js',
+      'components/radio-group.js',
+      'components/table.js',
+    ];
+    
+    // Load scripts sequentially
+    let loadedCount = 0;
+    
+    // Capture components from global scope into internal storage
+    function captureComponents() {
+      const componentNames = [
+        'superleapClient', 'Toast', 'Alert', 'Label', 'Button', 'Loader', 'Popover', 'Tooltip',
+        'Select', 'EnumSelect', 'RecordSelect', 'RecordMultiSelect', 'TimePicker',
+        'InputComponent', 'CurrencyComponent', 'TextareaComponent', 'Duration',
+        'DateTimePicker',         'Enumeration', 'MultiSelect', 'EnumMultiSelect', 'Badge', 'Avatar', 'Icon',
+        'FileInput', 'PhoneInput', 'Checkbox', 'RadioGroup', 'SuperleapTable'
+      ];
+      
+      componentNames.forEach(name => {
+        if (window[name]) {
+          _components[name] = window[name];
+          
+          // Clean up global scope - remove all component globals
+          // Only FlowUI and SuperLeap will remain
+          delete window[name];
+        }
+      });
+      
+      // Add helper method to FlowUI for accessing internal components (advanced use)
+      if (window.FlowUI) {
+        window.FlowUI._getComponent = function(name) {
+          return _components[name];
+        };
+      }
+      
+      // Expose SuperLeap from captured superleapClient (must use _components - superleapClient was already deleted from window)
+      const client = _components['superleapClient'];
+      if (client) {
+        window.SuperLeap = {
+          init: client.init.bind(client),
+          getSdk: client.getSdk.bind(client),
+          isAvailable: client.isAvailable.bind(client),
+          getDefaultConfig: client.getDefaultConfig.bind(client)
+        };
+      }
+    }
+    
+    function loadScript(index) {
+      if (index >= scriptsToLoad.length) {
+        console.log("[Superleap-Flow] All components loaded successfully");
+        
+        // Capture components into internal storage (also sets window.SuperLeap)
+        captureComponents();
+        
+        // Dispatch custom event when library is ready
+        if (typeof CustomEvent !== 'undefined') {
+          const event = new CustomEvent('superleap-flow:ready', {
+            detail: { 
+              FlowUI: window.FlowUI,
+              SuperLeap: window.SuperLeap,
+              components: _components
+            }
+          });
+          document.dispatchEvent(event);
+        }
+        return;
+      }
+      
+      const script = document.createElement('script');
+      // Handle CDN URLs vs local paths
+      const scriptPath = scriptsToLoad[index];
+      script.src = scriptPath.startsWith('http') ? scriptPath : basePath + scriptPath;
+      script.async = false; // Ensure sequential loading
+      
+      script.onload = function() {
+        loadedCount++;
+        loadScript(index + 1);
+      };
+      
+      script.onerror = function() {
+        console.error('[Superleap-Flow] Failed to load:', scriptsToLoad[index]);
+        loadScript(index + 1); // Continue loading other scripts
+      };
+      
+      document.head.appendChild(script);
+    }
+    
+    // Start loading scripts
+    loadScript(0);
+  }
+
+  // ES Module export (for bundlers like webpack, rollup, vite)
+  if (typeof window !== 'undefined' && window.FlowUI) {
+    if (typeof exports !== 'undefined') {
+      exports.FlowUI = window.FlowUI;
+      exports.SuperLeap = window.SuperLeap;
+    }
+  }
+})(typeof window !== 'undefined' ? window : this);