@fabio.caffarello/react-design-system 1.7.0 → 1.9.0

package/src/ui/extensions/flow/providers/FlowProviderComposition.tsx

@@ -0,0 +1,265 @@
+/**
+ * Flow Provider Composition
+ * 
+ * Composes all Flow providers in a hierarchical structure.
+ */
+
+'use client';
+
+import type { ReactNode } from 'react';
+import { ReactFlowProvider } from '@xyflow/react';
+import { FlowProvider, type FlowProviderProps } from '../organisms/FlowProvider';
+import { FlowStyleProvider, type FlowStyleProviderProps } from './FlowStyleProvider';
+import { FlowEventProvider, type FlowEventProviderProps } from './FlowEventProvider';
+import { FlowPerformanceProvider, type FlowPerformanceProviderProps } from './FlowPerformanceProvider';
+import { FlowDebugProvider, type FlowDebugProviderProps } from './FlowDebugProvider';
+
+/**
+ * Flow Provider Composition Props
+ */
+export interface FlowProviderCompositionProps
+  extends Omit<FlowProviderProps, 'children'>,
+    Partial<Omit<FlowStyleProviderProps, 'children'>>,
+    Partial<Omit<FlowEventProviderProps, 'children'>>,
+    Partial<Omit<FlowPerformanceProviderProps, 'children'>>,
+    Partial<Omit<FlowDebugProviderProps, 'children'>> {
+  children: ReactNode;
+  /**
+   * Enable debug provider (defaults to development mode)
+   */
+  enableDebug?: boolean;
+  /**
+   * Enable performance provider
+   */
+  enablePerformance?: boolean;
+  /**
+   * Enable event provider
+   */
+  enableEvents?: boolean;
+  /**
+   * Enable style provider
+   */
+  enableStyles?: boolean;
+}
+
+/**
+ * Flow Provider Composition
+ * 
+ * Composes all Flow providers in the correct order:
+ * 
+ * ReactFlowProvider (base)
+ *   └── FlowProvider (base)
+ *       ├── FlowStyleProvider (optional)
+ *       ├── FlowEventProvider (optional)
+ *       ├── FlowPerformanceProvider (optional)
+ *       └── FlowDebugProvider (optional, dev only)
+ */
+export function FlowProviderComposition({
+  children,
+  enableStyles = true,
+  enableEvents = true,
+  enablePerformance = true,
+  enableDebug = process.env.NODE_ENV === 'development',
+  // FlowProvider props
+  nodes,
+  edges,
+  defaultNodes,
+  defaultEdges,
+  onNodesChange,
+  onEdgesChange,
+  onConnect,
+  onBeforeDelete,
+  theme,
+  validationRules,
+  connectionRules,
+  layoutStrategy,
+  layoutOptions,
+  onNodeAdd,
+  onNodeRemove,
+  onNodeUpdate,
+  onEdgeAdd,
+  onEdgeRemove,
+  onEdgeUpdate,
+  // FlowStyleProvider props
+  initialTheme,
+  initialOverrides,
+  onThemeChange,
+  // FlowEventProvider props
+  maxHistorySize,
+  enableHistory,
+  // FlowPerformanceProvider props
+  initialOptions,
+  onMetricsUpdate,
+  // FlowDebugProvider props
+  initialDebugState,
+  ...rest
+}: FlowProviderCompositionProps) {
+  // Determine theme from FlowProvider or FlowStyleProvider
+  const finalTheme = theme || initialTheme || 'light';
+  
+  return (
+    <ReactFlowProvider>
+      <FlowProvider
+        nodes={nodes}
+        edges={edges}
+        defaultNodes={defaultNodes}
+        defaultEdges={defaultEdges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        onBeforeDelete={onBeforeDelete}
+        theme={finalTheme}
+        validationRules={validationRules}
+        connectionRules={connectionRules}
+        layoutStrategy={layoutStrategy}
+        layoutOptions={layoutOptions}
+        onNodeAdd={onNodeAdd}
+        onNodeRemove={onNodeRemove}
+        onNodeUpdate={onNodeUpdate}
+        onEdgeAdd={onEdgeAdd}
+        onEdgeRemove={onEdgeRemove}
+        onEdgeUpdate={onEdgeUpdate}
+      >
+        {enableStyles ? (
+          <FlowStyleProvider
+            initialTheme={finalTheme}
+            initialOverrides={initialOverrides}
+            onThemeChange={onThemeChange}
+          >
+            {enableEvents ? (
+              <FlowEventProvider
+                maxHistorySize={maxHistorySize}
+                enableHistory={enableHistory}
+              >
+                {enablePerformance ? (
+                  <FlowPerformanceProvider
+                    initialOptions={initialOptions}
+                    onMetricsUpdate={onMetricsUpdate}
+                  >
+                    {enableDebug ? (
+                      <FlowDebugProvider
+                        nodes={nodes || []}
+                        edges={edges || []}
+                        initialDebugState={initialDebugState}
+                        enabled={enableDebug}
+                      >
+                        {children}
+                      </FlowDebugProvider>
+                    ) : (
+                      children
+                    )}
+                  </FlowPerformanceProvider>
+                ) : enableDebug ? (
+                  <FlowDebugProvider
+                    nodes={nodes || []}
+                    edges={edges || []}
+                    initialDebugState={initialDebugState}
+                    enabled={enableDebug}
+                  >
+                    {children}
+                  </FlowDebugProvider>
+                ) : (
+                  children
+                )}
+              </FlowEventProvider>
+            ) : enablePerformance ? (
+              <FlowPerformanceProvider
+                initialOptions={initialOptions}
+                onMetricsUpdate={onMetricsUpdate}
+              >
+                {enableDebug ? (
+                  <FlowDebugProvider
+                    nodes={nodes || []}
+                    edges={edges || []}
+                    initialDebugState={initialDebugState}
+                    enabled={enableDebug}
+                  >
+                    {children}
+                  </FlowDebugProvider>
+                ) : (
+                  children
+                )}
+              </FlowPerformanceProvider>
+            ) : enableDebug ? (
+              <FlowDebugProvider
+                nodes={nodes || []}
+                edges={edges || []}
+                initialDebugState={initialDebugState}
+                enabled={enableDebug}
+              >
+                {children}
+              </FlowDebugProvider>
+            ) : (
+              children
+            )}
+          </FlowStyleProvider>
+        ) : enableEvents ? (
+          <FlowEventProvider
+            maxHistorySize={maxHistorySize}
+            enableHistory={enableHistory}
+          >
+            {enablePerformance ? (
+              <FlowPerformanceProvider
+                initialOptions={initialOptions}
+                onMetricsUpdate={onMetricsUpdate}
+              >
+                {enableDebug ? (
+                  <FlowDebugProvider
+                    nodes={nodes || []}
+                    edges={edges || []}
+                    initialDebugState={initialDebugState}
+                    enabled={enableDebug}
+                  >
+                    {children}
+                  </FlowDebugProvider>
+                ) : (
+                  children
+                )}
+              </FlowPerformanceProvider>
+            ) : enableDebug ? (
+              <FlowDebugProvider
+                nodes={nodes || []}
+                edges={edges || []}
+                initialDebugState={initialDebugState}
+                enabled={enableDebug}
+              >
+                {children}
+              </FlowDebugProvider>
+            ) : (
+              children
+            )}
+          </FlowEventProvider>
+        ) : enablePerformance ? (
+          <FlowPerformanceProvider
+            initialOptions={initialOptions}
+            onMetricsUpdate={onMetricsUpdate}
+          >
+            {enableDebug ? (
+              <FlowDebugProvider
+                nodes={nodes || []}
+                edges={edges || []}
+                initialDebugState={initialDebugState}
+                enabled={enableDebug}
+              >
+                {children}
+              </FlowDebugProvider>
+            ) : (
+              children
+            )}
+          </FlowPerformanceProvider>
+        ) : enableDebug ? (
+          <FlowDebugProvider
+            nodes={nodes || []}
+            edges={edges || []}
+            initialDebugState={initialDebugState}
+            enabled={enableDebug}
+          >
+            {children}
+          </FlowDebugProvider>
+        ) : (
+          children
+        )}
+      </FlowProvider>
+    </ReactFlowProvider>
+  );
+}

package/src/ui/extensions/flow/providers/FlowStyleProvider.tsx

@@ -0,0 +1,9 @@
+/**
+ * Flow Style Provider
+ * 
+ * Provider for CSS variables and theming.
+ * Re-exports FlowStyleProvider from context for convenience.
+ */
+
+export { FlowStyleProvider, useFlowStyleContext } from '../context/FlowStyleContext';
+export type { FlowStyleProviderProps, FlowStyleContextValue } from '../context/FlowStyleContext';

package/src/ui/extensions/flow/providers/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Flow Providers
+ * 
+ * Provider implementations for Flow components.
+ */
+
+export { FlowProvider, type FlowProviderProps } from '../organisms/FlowProvider';
+export { FlowStyleProvider, type FlowStyleProviderProps } from './FlowStyleProvider';
+export { FlowEventProvider, type FlowEventProviderProps } from './FlowEventProvider';
+export { FlowPerformanceProvider, type FlowPerformanceProviderProps } from './FlowPerformanceProvider';
+export { FlowDebugProvider, type FlowDebugProviderProps } from './FlowDebugProvider';
+export { FlowProviderComposition, type FlowProviderCompositionProps } from './FlowProviderComposition';

package/src/ui/extensions/flow/registries/LayoutRegistry.ts

@@ -0,0 +1,181 @@
+/**
+ * Layout Registry
+ * 
+ * Registry pattern for managing layout strategies.
+ */
+
+import type { LayoutStrategyName, LayoutOptions, LayoutResult } from '../organisms/FlowTypes';
+import type { Node, Edge } from '@xyflow/react';
+import { layoutEngine } from '../utils/layoutEngine';
+
+/**
+ * Layout Strategy Definition
+ */
+export interface LayoutStrategyDefinition {
+  name: LayoutStrategyName;
+  calculate: (nodes: Node[], edges: Edge[], options?: LayoutOptions) => Promise<LayoutResult>;
+  getDefaultOptions: () => LayoutOptions;
+  validate?: (options: LayoutOptions) => boolean;
+  metadata?: {
+    description?: string;
+    supportsDirection?: boolean;
+    supportsSpacing?: boolean;
+  };
+}
+
+/**
+ * Default layout strategies
+ */
+const defaultStrategies: Record<LayoutStrategyName, LayoutStrategyDefinition> = {
+  dagre: {
+    name: 'dagre',
+    calculate: async (nodes, edges, options) => {
+      return layoutEngine.calculate('dagre', nodes, edges, options);
+    },
+    getDefaultOptions: () => ({
+      direction: 'TB',
+      nodeWidth: 150,
+      nodeHeight: 100,
+      spacing: 50,
+    }),
+    validate: (options) => {
+      return ['TB', 'BT', 'LR', 'RL'].includes(options.direction || 'TB');
+    },
+    metadata: {
+      description: 'Hierarchical layout using Dagre algorithm',
+      supportsDirection: true,
+      supportsSpacing: true,
+    },
+  },
+  elk: {
+    name: 'elk',
+    calculate: async (nodes, edges, options) => {
+      return layoutEngine.calculate('elk', nodes, edges, options);
+    },
+    getDefaultOptions: () => ({
+      direction: 'TB',
+      nodeWidth: 150,
+      nodeHeight: 100,
+      spacing: 50,
+    }),
+    validate: (options) => {
+      return ['TB', 'BT', 'LR', 'RL'].includes(options.direction || 'TB');
+    },
+    metadata: {
+      description: 'Advanced hierarchical layout using ELK algorithm',
+      supportsDirection: true,
+      supportsSpacing: true,
+    },
+  },
+  force: {
+    name: 'force',
+    calculate: async (nodes, edges, options) => {
+      return layoutEngine.calculate('force', nodes, edges, options);
+    },
+    getDefaultOptions: () => ({
+      spacing: 100,
+    }),
+    validate: () => true,
+    metadata: {
+      description: 'Force-directed layout using physics simulation',
+      supportsDirection: false,
+      supportsSpacing: true,
+    },
+  },
+};
+
+/**
+ * Layout Registry
+ * 
+ * Manages registration and retrieval of layout strategies.
+ */
+export class LayoutRegistry {
+  private static registry: Map<LayoutStrategyName, LayoutStrategyDefinition> = new Map();
+
+  /**
+   * Initialize with default strategies
+   */
+  static initialize() {
+    if (this.registry.size === 0) {
+      Object.values(defaultStrategies).forEach((strategy) => {
+        this.registry.set(strategy.name, strategy);
+      });
+    }
+  }
+
+  /**
+   * Register a new layout strategy
+   */
+  static register(strategy: LayoutStrategyDefinition): void {
+    this.registry.set(strategy.name, strategy);
+  }
+
+  /**
+   * Get a layout strategy
+   */
+  static get(name: LayoutStrategyName): LayoutStrategyDefinition | undefined {
+    this.initialize();
+    return this.registry.get(name);
+  }
+
+  /**
+   * Get all registered strategies
+   */
+  static getAll(): LayoutStrategyDefinition[] {
+    this.initialize();
+    return Array.from(this.registry.values());
+  }
+
+  /**
+   * Get all strategy names
+   */
+  static getNames(): LayoutStrategyName[] {
+    this.initialize();
+    return Array.from(this.registry.keys());
+  }
+
+  /**
+   * Check if a strategy is registered
+   */
+  static has(name: LayoutStrategyName): boolean {
+    this.initialize();
+    return this.registry.has(name);
+  }
+
+  /**
+   * Remove a layout strategy
+   */
+  static unregister(name: LayoutStrategyName): boolean {
+    return this.registry.delete(name);
+  }
+
+  /**
+   * Calculate layout using a registered strategy
+   */
+  static async calculateLayout(
+    name: LayoutStrategyName,
+    nodes: Node[],
+    edges: Edge[],
+    options?: LayoutOptions
+  ): Promise<LayoutResult> {
+    const strategy = this.get(name);
+    if (!strategy) {
+      throw new Error(`Layout strategy "${name}" not found`);
+    }
+
+    // Validate options if validator exists
+    if (strategy.validate && options) {
+      if (!strategy.validate(options)) {
+        throw new Error(`Invalid options for layout strategy "${name}"`);
+      }
+    }
+
+    // Merge with default options
+    const finalOptions = {
+      ...strategy.getDefaultOptions(),
+      ...options,
+    };
+
+    return strategy.calculate(nodes, edges, finalOptions);
+  }
+}

package/src/ui/extensions/flow/registries/PluginRegistry.ts

@@ -0,0 +1,159 @@
+/**
+ * Plugin Registry
+ * 
+ * Registry pattern for managing Flow plugins/extensions.
+ */
+
+/**
+ * Plugin Definition
+ */
+export interface PluginDefinition {
+  id: string;
+  name: string;
+  version: string;
+  description?: string;
+  nodeTypes?: Record<string, React.ComponentType<unknown>>;
+  edgeTypes?: Record<string, React.ComponentType<unknown>>;
+  hooks?: Record<string, (...args: unknown[]) => unknown>;
+  utils?: Record<string, (...args: unknown[]) => unknown>;
+  onRegister?: () => void;
+  onUnregister?: () => void;
+  dependencies?: string[];
+}
+
+/**
+ * Plugin Registry
+ * 
+ * Manages registration and retrieval of Flow plugins.
+ */
+export class PluginRegistry {
+  private static registry: Map<string, PluginDefinition> = new Map();
+  private static loadOrder: string[] = [];
+
+  /**
+   * Register a plugin
+   */
+  static register(plugin: PluginDefinition): void {
+    // Check dependencies
+    if (plugin.dependencies) {
+      const missingDeps = plugin.dependencies.filter((dep) => !this.registry.has(dep));
+      if (missingDeps.length > 0) {
+        throw new Error(`Plugin "${plugin.id}" has missing dependencies: ${missingDeps.join(', ')}`);
+      }
+    }
+
+    // Register plugin
+    this.registry.set(plugin.id, plugin);
+    this.loadOrder.push(plugin.id);
+
+    // Call onRegister hook
+    plugin.onRegister?.();
+  }
+
+  /**
+   * Get a plugin
+   */
+  static get(id: string): PluginDefinition | undefined {
+    return this.registry.get(id);
+  }
+
+  /**
+   * Get all registered plugins
+   */
+  static getAll(): PluginDefinition[] {
+    return Array.from(this.registry.values());
+  }
+
+  /**
+   * Get all plugin IDs
+   */
+  static getIds(): string[] {
+    return Array.from(this.registry.keys());
+  }
+
+  /**
+   * Check if a plugin is registered
+   */
+  static has(id: string): boolean {
+    return this.registry.has(id);
+  }
+
+  /**
+   * Unregister a plugin
+   */
+  static unregister(id: string): boolean {
+    const plugin = this.registry.get(id);
+    if (!plugin) {
+      return false;
+    }
+
+    // Call onUnregister hook
+    plugin.onUnregister?.();
+
+    // Remove from load order
+    this.loadOrder = this.loadOrder.filter((pluginId) => pluginId !== id);
+
+    return this.registry.delete(id);
+  }
+
+  /**
+   * Get all node types from all plugins
+   */
+  static getAllNodeTypes(): Record<string, React.ComponentType<unknown>> {
+    const nodeTypes: Record<string, React.ComponentType<unknown>> = {};
+    
+    this.loadOrder.forEach((pluginId) => {
+      const plugin = this.registry.get(pluginId);
+      if (plugin?.nodeTypes) {
+        Object.assign(nodeTypes, plugin.nodeTypes);
+      }
+    });
+
+    return nodeTypes;
+  }
+
+  /**
+   * Get all edge types from all plugins
+   */
+  static getAllEdgeTypes(): Record<string, React.ComponentType<unknown>> {
+    const edgeTypes: Record<string, React.ComponentType<unknown>> = {};
+    
+    this.loadOrder.forEach((pluginId) => {
+      const plugin = this.registry.get(pluginId);
+      if (plugin?.edgeTypes) {
+        Object.assign(edgeTypes, plugin.edgeTypes);
+      }
+    });
+
+    return edgeTypes;
+  }
+
+  /**
+   * Get a hook from a plugin
+   */
+  static getHook(pluginId: string, hookName: string): ((...args: unknown[]) => unknown) | undefined {
+    const plugin = this.registry.get(pluginId);
+    return plugin?.hooks?.[hookName];
+  }
+
+  /**
+   * Get a utility from a plugin
+   */
+  static getUtil(pluginId: string, utilName: string): ((...args: unknown[]) => unknown) | undefined {
+    const plugin = this.registry.get(pluginId);
+    return plugin?.utils?.[utilName];
+  }
+
+  /**
+   * Clear all plugins
+   */
+  static clear(): void {
+    // Call onUnregister for all plugins
+    this.registry.forEach((plugin) => {
+      plugin.onUnregister?.();
+    });
+
+    this.registry.clear();
+    this.loadOrder = [];
+  }
+}

package/src/ui/extensions/flow/registries/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Flow Registries
+ * 
+ * Registry pattern implementations for Flow components.
+ */
+
+export { NodeTypeRegistry } from '../utils/nodeTypes';
+export { EdgeTypeRegistry } from '../utils/edgeTypes';
+export { LayoutRegistry } from './LayoutRegistry';
+export { PluginRegistry } from './PluginRegistry';
+export type { NodeTypeDefinition } from '../utils/nodeTypes';
+export type { EdgeTypeDefinition } from '../utils/edgeTypes';
+export type { LayoutStrategyDefinition } from './LayoutRegistry';
+export type { PluginDefinition } from './PluginRegistry';