@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.16

package/dist/hooks/use-reusable-architecture.js

@@ -1,414 +1,261 @@
-import { useState, useCallback, useEffect, ComponentType, CSSProperties } from 'react'
-
-export interface ReusableArchitectureConfig {
-  enableComponentComposition?: boolean
-  enablePatternSharing?: boolean
-  enableStyleSharing?: boolean
-  enableBehaviorSharing?: boolean
-  enableTemplateSystem?: boolean
-  enableComponentRegistry?: boolean
-}
-
-export interface ComponentTemplate {
-  id: string
-  name: string
-  component: ComponentType<any>
-  props: Record<string, any>
-  styles: CSSProperties
-  behaviors: string[]
-  patterns: string[]
-}
-
-export interface SharedPattern {
-  id: string
-  name: string
-  description: string
-  implementation: string
-  usage: string[]
-  category: 'composition' | 'styling' | 'behavior' | 'performance'
-}
-
-export interface SharedStyle {
-  id: string
-  name: string
-  css: string
-  variables: Record<string, string>
-  breakpoints: Record<string, string>
-  usage: string[]
-}
-
-export interface SharedBehavior {
-  id: string
-  name: string
-  description: string
-  hook: string
-  dependencies: string[]
-  usage: string[]
-}
-
-export interface ReusableArchitectureCallbacks {
-  onTemplateCreated?: (template: ComponentTemplate) => void
-  onPatternShared?: (pattern: SharedPattern) => void
-  onStyleShared?: (style: SharedStyle) => void
-  onBehaviorShared?: (behavior: SharedBehavior) => void
-  onArchitectureOptimized?: (optimization: string) => void
-}
-
-export const useReusableArchitecture = (
-  config: ReusableArchitectureConfig = {},
-  callbacks: ReusableArchitectureCallbacks = {}
-) => {
-  const {
-    enableComponentComposition = true,
-    enablePatternSharing = true,
-    enableStyleSharing = true,
-    enableBehaviorSharing = true,
-    enableTemplateSystem = true,
-    enableComponentRegistry = true
-  } = config
-
-  const [templates, setTemplates] = useState<Map<string, ComponentTemplate>>(new Map())
-  const [sharedPatterns, setSharedPatterns] = useState<Map<string, SharedPattern>>(new Map())
-  const [sharedStyles, setSharedStyles] = useState<Map<string, SharedStyle>>(new Map())
-  const [sharedBehaviors, setSharedBehaviors] = useState<Map<string, SharedBehavior>>(new Map())
-  const [isOptimizing, setIsOptimizing] = useState(false)
-  const [optimizations, setOptimizations] = useState<string[]>([])
-
-  // Component composition
-  const composeComponent = useCallback((
-    baseComponent: ComponentType<any>,
-    enhancements: Array<(Component: ComponentType<any>) => ComponentType<any>>
-  ) => {
-    if (!enableComponentComposition) return baseComponent
-
-    let composedComponent = baseComponent
-    
-    enhancements.forEach(enhancement => {
-      composedComponent = enhancement(composedComponent)
-    })
-    
-    const optimization = `Component composition applied with ${enhancements.length} enhancements`
-    setOptimizations(prev => [...prev, optimization])
-    callbacks.onArchitectureOptimized?.(optimization)
-    
-    return composedComponent
-  }, [enableComponentComposition, callbacks])
-
-  // Template system
-  const createTemplate = useCallback((
-    template: Omit<ComponentTemplate, 'id'>
-  ) => {
-    if (!enableTemplateSystem) return null
-
-    const id = `template-${Date.now()}`
-    const newTemplate: ComponentTemplate = {
-      ...template,
-      id
-    }
-    
-    templates.set(id, newTemplate)
-    setTemplates(new Map(templates))
-    
-    callbacks.onTemplateCreated?.(newTemplate)
-    
-    return id
-  }, [enableTemplateSystem, templates, callbacks])
-
-  const getTemplate = useCallback((id: string) => {
-    return templates.get(id)
-  }, [templates])
-
-  const updateTemplate = useCallback((
-    id: string,
-    updates: Partial<ComponentTemplate>
-  ) => {
-    const template = templates.get(id)
-    if (!template) return false
-    
-    const updatedTemplate = { ...template, ...updates }
-    templates.set(id, updatedTemplate)
-    setTemplates(new Map(templates))
-    
-    return true
-  }, [templates])
-
-  const deleteTemplate = useCallback((id: string) => {
-    const deleted = templates.delete(id)
-    if (deleted) {
-      setTemplates(new Map(templates))
-    }
-    return deleted
-  }, [templates])
-
-  // Pattern sharing
-  const sharePattern = useCallback((
-    pattern: Omit<SharedPattern, 'id'>
-  ) => {
-    if (!enablePatternSharing) return null
-
-    const id = `pattern-${Date.now()}`
-    const newPattern: SharedPattern = {
-      ...pattern,
-      id
-    }
-    
-    sharedPatterns.set(id, newPattern)
-    setSharedPatterns(new Map(sharedPatterns))
-    
-    callbacks.onPatternShared?.(newPattern)
-    
-    return id
-  }, [enablePatternSharing, sharedPatterns, callbacks])
-
-  const getPattern = useCallback((id: string) => {
-    return sharedPatterns.get(id)
-  }, [sharedPatterns])
-
-  const findPatternsByCategory = useCallback((category: string) => {
-    return Array.from(sharedPatterns.values()).filter(pattern => pattern.category === category)
-  }, [sharedPatterns])
-
-  // Style sharing
-  const shareStyle = useCallback((
-    style: Omit<SharedStyle, 'id'>
-  ) => {
-    if (!enableStyleSharing) return null
-
-    const id = `style-${Date.now()}`
-    const newStyle: SharedStyle = {
-      ...style,
-      id
-    }
-    
-    sharedStyles.set(id, newStyle)
-    setSharedStyles(new Map(sharedStyles))
-    
-    callbacks.onStyleShared?.(newStyle)
-    
-    return id
-  }, [enableStyleSharing, sharedStyles, callbacks])
-
-  const getStyle = useCallback((id: string) => {
-    return sharedStyles.get(id)
-  }, [sharedStyles])
-
-  const applyStyle = useCallback((
-    styleId: string,
-    targetComponent: string
-  ) => {
-    const style = sharedStyles.get(styleId)
-    if (!style) return false
-    
-    // Update style usage
-    if (!style.usage.includes(targetComponent)) {
-      style.usage.push(targetComponent)
-      sharedStyles.set(styleId, style)
-      setSharedStyles(new Map(sharedStyles))
-    }
-    
-    return true
-  }, [sharedStyles])
-
-  // Behavior sharing
-  const shareBehavior = useCallback((
-    behavior: Omit<SharedBehavior, 'id'>
-  ) => {
-    if (!enableBehaviorSharing) return null
-
-    const id = `behavior-${Date.now()}`
-    const newBehavior: SharedBehavior = {
-      ...behavior,
-      id
-    }
-    
-    sharedBehaviors.set(id, newBehavior)
-    setSharedBehaviors(new Map(sharedBehaviors))
-    
-    callbacks.onBehaviorShared?.(newBehavior)
-    
-    return id
-  }, [enableBehaviorSharing, sharedBehaviors, callbacks])
-
-  const getBehavior = useCallback((id: string) => {
-    return sharedBehaviors.get(id)
-  }, [sharedBehaviors])
-
-  const applyBehavior = useCallback((
-    behaviorId: string,
-    targetComponent: string
-  ) => {
-    const behavior = sharedBehaviors.get(behaviorId)
-    if (!behavior) return false
-    
-    // Update behavior usage
-    if (!behavior.usage.includes(targetComponent)) {
-      behavior.usage.push(targetComponent)
-      sharedBehaviors.set(behaviorId, behavior)
-      setSharedBehaviors(new Map(sharedBehaviors))
-    }
-    
-    return true
-  }, [sharedBehaviors])
-
-  // Component registry
-  const registerComponent = useCallback((
-    id: string,
-    component: ComponentType<any>,
-    metadata: {
-      name: string
-      description: string
-      category: string
-      tags: string[]
-    }
-  ) => {
-    if (!enableComponentRegistry) return false
-    
-    const template: ComponentTemplate = {
-      id,
-      name: metadata.name,
-      component,
-      props: {},
-      styles: {},
-      behaviors: [],
-      patterns: []
-    }
-    
-    templates.set(id, template)
-    setTemplates(new Map(templates))
-    
-    return true
-  }, [enableComponentRegistry, templates])
-
-  // Architecture analysis
-  const analyzeArchitecture = useCallback(() => {
-    const analysis = {
-      totalTemplates: templates.size,
-      totalPatterns: sharedPatterns.size,
-      totalStyles: sharedStyles.size,
-      totalBehaviors: sharedBehaviors.size,
-      compositionLevel: 'none' as 'none' | 'basic' | 'intermediate' | 'advanced',
-      reusabilityScore: 0,
-      recommendations: [] as string[]
-    }
-    
-    // Calculate composition level
-    if (templates.size > 10) {
-      analysis.compositionLevel = 'advanced'
-    } else if (templates.size > 5) {
-      analysis.compositionLevel = 'intermediate'
-    } else if (templates.size > 0) {
-      analysis.compositionLevel = 'basic'
-    }
-    
-    // Calculate reusability score
-    const totalUsage = Array.from(sharedStyles.values()).reduce((sum, style) => sum + style.usage.length, 0) +
-                      Array.from(sharedBehaviors.values()).reduce((sum, behavior) => sum + behavior.usage.length, 0)
-    
-    analysis.reusabilityScore = Math.min(100, (totalUsage / Math.max(1, sharedStyles.size + sharedBehaviors.size)) * 20)
-    
-    // Generate recommendations
-    if (templates.size === 0) {
-      analysis.recommendations.push('Create component templates for reusable components')
-    }
-    
-    if (sharedPatterns.size === 0) {
-      analysis.recommendations.push('Share common patterns for consistency')
-    }
-    
-    if (sharedStyles.size === 0) {
-      analysis.recommendations.push('Create shared style systems')
-    }
-    
-    if (sharedBehaviors.size === 0) {
-      analysis.recommendations.push('Share common behaviors and hooks')
-    }
-    
-    if (analysis.reusabilityScore < 50) {
-      analysis.recommendations.push('Increase component reusability through better composition')
-    }
-    
-    return analysis
-  }, [templates, sharedPatterns, sharedStyles, sharedBehaviors])
-
-  // Architecture optimization
-  const optimizeArchitecture = useCallback(() => {
-    setIsOptimizing(true)
-    
-    setTimeout(() => {
-      const architectureOptimizations = [
-        'Component composition patterns optimized',
-        'Pattern sharing system enhanced',
-        'Style sharing architecture improved',
-        'Behavior sharing system optimized',
-        'Template system performance enhanced'
-      ]
-      
-      setOptimizations(prev => [...prev, ...architectureOptimizations])
-      setIsOptimizing(false)
-      
-      architectureOptimizations.forEach(optimization => {
-        callbacks.onArchitectureOptimized?.(optimization)
-      })
-    }, 400)
-  }, [callbacks])
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      templates.clear()
-      sharedPatterns.clear()
-      sharedStyles.clear()
-      sharedBehaviors.clear()
-    }
-  }, [templates, sharedPatterns, sharedStyles, sharedBehaviors])
-
-  return {
-    // State
-    templates: Array.from(templates.values()),
-    sharedPatterns: Array.from(sharedPatterns.values()),
-    sharedStyles: Array.from(sharedStyles.values()),
-    sharedBehaviors: Array.from(sharedBehaviors.values()),
-    isOptimizing,
-    optimizations,
-    
+import { useState, useCallback, useEffect } from 'react';
+export const useReusableArchitecture = (config = {}, callbacks = {}) => {
+    const { enableComponentComposition = true, enablePatternSharing = true, enableStyleSharing = true, enableBehaviorSharing = true, enableTemplateSystem = true, enableComponentRegistry = true } = config;
+    const [templates, setTemplates] = useState(new Map());
+    const [sharedPatterns, setSharedPatterns] = useState(new Map());
+    const [sharedStyles, setSharedStyles] = useState(new Map());
+    const [sharedBehaviors, setSharedBehaviors] = useState(new Map());
+    const [isOptimizing, setIsOptimizing] = useState(false);
+    const [optimizations, setOptimizations] = useState([]);
     // Component composition
-    composeComponent,
-    
+    const composeComponent = useCallback((baseComponent, enhancements) => {
+        if (!enableComponentComposition)
+            return baseComponent;
+        let composedComponent = baseComponent;
+        enhancements.forEach(enhancement => {
+            composedComponent = enhancement(composedComponent);
+        });
+        const optimization = `Component composition applied with ${enhancements.length} enhancements`;
+        setOptimizations(prev => [...prev, optimization]);
+        callbacks.onArchitectureOptimized?.(optimization);
+        return composedComponent;
+    }, [enableComponentComposition, callbacks]);
     // Template system
-    createTemplate,
-    getTemplate,
-    updateTemplate,
-    deleteTemplate,
-    
+    const createTemplate = useCallback((template) => {
+        if (!enableTemplateSystem)
+            return null;
+        const id = `template-${Date.now()}`;
+        const newTemplate = {
+            ...template,
+            id
+        };
+        templates.set(id, newTemplate);
+        setTemplates(new Map(templates));
+        callbacks.onTemplateCreated?.(newTemplate);
+        return id;
+    }, [enableTemplateSystem, templates, callbacks]);
+    const getTemplate = useCallback((id) => {
+        return templates.get(id);
+    }, [templates]);
+    const updateTemplate = useCallback((id, updates) => {
+        const template = templates.get(id);
+        if (!template)
+            return false;
+        const updatedTemplate = { ...template, ...updates };
+        templates.set(id, updatedTemplate);
+        setTemplates(new Map(templates));
+        return true;
+    }, [templates]);
+    const deleteTemplate = useCallback((id) => {
+        const deleted = templates.delete(id);
+        if (deleted) {
+            setTemplates(new Map(templates));
+        }
+        return deleted;
+    }, [templates]);
     // Pattern sharing
-    sharePattern,
-    getPattern,
-    findPatternsByCategory,
-    
+    const sharePattern = useCallback((pattern) => {
+        if (!enablePatternSharing)
+            return null;
+        const id = `pattern-${Date.now()}`;
+        const newPattern = {
+            ...pattern,
+            id
+        };
+        sharedPatterns.set(id, newPattern);
+        setSharedPatterns(new Map(sharedPatterns));
+        callbacks.onPatternShared?.(newPattern);
+        return id;
+    }, [enablePatternSharing, sharedPatterns, callbacks]);
+    const getPattern = useCallback((id) => {
+        return sharedPatterns.get(id);
+    }, [sharedPatterns]);
+    const findPatternsByCategory = useCallback((category) => {
+        return Array.from(sharedPatterns.values()).filter(pattern => pattern.category === category);
+    }, [sharedPatterns]);
     // Style sharing
-    shareStyle,
-    getStyle,
-    applyStyle,
-    
+    const shareStyle = useCallback((style) => {
+        if (!enableStyleSharing)
+            return null;
+        const id = `style-${Date.now()}`;
+        const newStyle = {
+            ...style,
+            id
+        };
+        sharedStyles.set(id, newStyle);
+        setSharedStyles(new Map(sharedStyles));
+        callbacks.onStyleShared?.(newStyle);
+        return id;
+    }, [enableStyleSharing, sharedStyles, callbacks]);
+    const getStyle = useCallback((id) => {
+        return sharedStyles.get(id);
+    }, [sharedStyles]);
+    const applyStyle = useCallback((styleId, targetComponent) => {
+        const style = sharedStyles.get(styleId);
+        if (!style)
+            return false;
+        // Update style usage
+        if (!style.usage.includes(targetComponent)) {
+            style.usage.push(targetComponent);
+            sharedStyles.set(styleId, style);
+            setSharedStyles(new Map(sharedStyles));
+        }
+        return true;
+    }, [sharedStyles]);
     // Behavior sharing
-    shareBehavior,
-    getBehavior,
-    applyBehavior,
-    
+    const shareBehavior = useCallback((behavior) => {
+        if (!enableBehaviorSharing)
+            return null;
+        const id = `behavior-${Date.now()}`;
+        const newBehavior = {
+            ...behavior,
+            id
+        };
+        sharedBehaviors.set(id, newBehavior);
+        setSharedBehaviors(new Map(sharedBehaviors));
+        callbacks.onBehaviorShared?.(newBehavior);
+        return id;
+    }, [enableBehaviorSharing, sharedBehaviors, callbacks]);
+    const getBehavior = useCallback((id) => {
+        return sharedBehaviors.get(id);
+    }, [sharedBehaviors]);
+    const applyBehavior = useCallback((behaviorId, targetComponent) => {
+        const behavior = sharedBehaviors.get(behaviorId);
+        if (!behavior)
+            return false;
+        // Update behavior usage
+        if (!behavior.usage.includes(targetComponent)) {
+            behavior.usage.push(targetComponent);
+            sharedBehaviors.set(behaviorId, behavior);
+            setSharedBehaviors(new Map(sharedBehaviors));
+        }
+        return true;
+    }, [sharedBehaviors]);
     // Component registry
-    registerComponent,
-    
-    // Analysis and optimization
-    analyzeArchitecture,
-    optimizeArchitecture,
-    
-    // Utility functions
-    hasTemplate: (id: string) => templates.has(id),
-    hasPattern: (id: string) => sharedPatterns.has(id),
-    hasStyle: (id: string) => sharedStyles.has(id),
-    hasBehavior: (id: string) => sharedBehaviors.has(id),
-    clearOptimizations: () => setOptimizations([])
-  }
-}
-
-export default useReusableArchitecture
+    const registerComponent = useCallback((id, component, metadata) => {
+        if (!enableComponentRegistry)
+            return false;
+        const template = {
+            id,
+            name: metadata.name,
+            component,
+            props: {},
+            styles: {},
+            behaviors: [],
+            patterns: []
+        };
+        templates.set(id, template);
+        setTemplates(new Map(templates));
+        return true;
+    }, [enableComponentRegistry, templates]);
+    // Architecture analysis
+    const analyzeArchitecture = useCallback(() => {
+        const analysis = {
+            totalTemplates: templates.size,
+            totalPatterns: sharedPatterns.size,
+            totalStyles: sharedStyles.size,
+            totalBehaviors: sharedBehaviors.size,
+            compositionLevel: 'none',
+            reusabilityScore: 0,
+            recommendations: []
+        };
+        // Calculate composition level
+        if (templates.size > 10) {
+            analysis.compositionLevel = 'advanced';
+        }
+        else if (templates.size > 5) {
+            analysis.compositionLevel = 'intermediate';
+        }
+        else if (templates.size > 0) {
+            analysis.compositionLevel = 'basic';
+        }
+        // Calculate reusability score
+        const totalUsage = Array.from(sharedStyles.values()).reduce((sum, style) => sum + style.usage.length, 0) +
+            Array.from(sharedBehaviors.values()).reduce((sum, behavior) => sum + behavior.usage.length, 0);
+        analysis.reusabilityScore = Math.min(100, (totalUsage / Math.max(1, sharedStyles.size + sharedBehaviors.size)) * 20);
+        // Generate recommendations
+        if (templates.size === 0) {
+            analysis.recommendations.push('Create component templates for reusable components');
+        }
+        if (sharedPatterns.size === 0) {
+            analysis.recommendations.push('Share common patterns for consistency');
+        }
+        if (sharedStyles.size === 0) {
+            analysis.recommendations.push('Create shared style systems');
+        }
+        if (sharedBehaviors.size === 0) {
+            analysis.recommendations.push('Share common behaviors and hooks');
+        }
+        if (analysis.reusabilityScore < 50) {
+            analysis.recommendations.push('Increase component reusability through better composition');
+        }
+        return analysis;
+    }, [templates, sharedPatterns, sharedStyles, sharedBehaviors]);
+    // Architecture optimization
+    const optimizeArchitecture = useCallback(() => {
+        setIsOptimizing(true);
+        setTimeout(() => {
+            const architectureOptimizations = [
+                'Component composition patterns optimized',
+                'Pattern sharing system enhanced',
+                'Style sharing architecture improved',
+                'Behavior sharing system optimized',
+                'Template system performance enhanced'
+            ];
+            setOptimizations(prev => [...prev, ...architectureOptimizations]);
+            setIsOptimizing(false);
+            architectureOptimizations.forEach(optimization => {
+                callbacks.onArchitectureOptimized?.(optimization);
+            });
+        }, 400);
+    }, [callbacks]);
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            templates.clear();
+            sharedPatterns.clear();
+            sharedStyles.clear();
+            sharedBehaviors.clear();
+        };
+    }, [templates, sharedPatterns, sharedStyles, sharedBehaviors]);
+    return {
+        // State
+        templates: Array.from(templates.values()),
+        sharedPatterns: Array.from(sharedPatterns.values()),
+        sharedStyles: Array.from(sharedStyles.values()),
+        sharedBehaviors: Array.from(sharedBehaviors.values()),
+        isOptimizing,
+        optimizations,
+        // Component composition
+        composeComponent,
+        // Template system
+        createTemplate,
+        getTemplate,
+        updateTemplate,
+        deleteTemplate,
+        // Pattern sharing
+        sharePattern,
+        getPattern,
+        findPatternsByCategory,
+        // Style sharing
+        shareStyle,
+        getStyle,
+        applyStyle,
+        // Behavior sharing
+        shareBehavior,
+        getBehavior,
+        applyBehavior,
+        // Component registry
+        registerComponent,
+        // Analysis and optimization
+        analyzeArchitecture,
+        optimizeArchitecture,
+        // Utility functions
+        hasTemplate: (id) => templates.has(id),
+        hasPattern: (id) => sharedPatterns.has(id),
+        hasStyle: (id) => sharedStyles.has(id),
+        hasBehavior: (id) => sharedBehaviors.has(id),
+        clearOptimizations: () => setOptimizations([])
+    };
+};
+export default useReusableArchitecture;