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

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

@@ -1,40 +1,62 @@
 import { useState, useCallback, useEffect, ComponentType, CSSProperties } from 'react'
 
 export interface ReusableArchitectureConfig {
-  enableComponentComposition?}
+  enableComponentComposition?: boolean
+  enablePatternSharing?: boolean
+  enableStyleSharing?: boolean
+  enableBehaviorSharing?: boolean
+  enableTemplateSystem?: boolean
+  enableComponentRegistry?: boolean
+}
 
 export interface ComponentTemplate {
-  id, any>
-  styles]
-  patterns]
+  id: string
+  name: string
+  component: ComponentType<any>
+  props: Record<string, any>
+  styles: CSSProperties
+  behaviors: string[]
+  patterns: string[]
 }
 
 export interface SharedPattern {
-  id]
-  category}
+  id: string
+  name: string
+  description: string
+  implementation: string
+  usage: string[]
+  category: 'composition' | 'styling' | 'behavior' | 'performance'
+}
 
 export interface SharedStyle {
-  id, string>
-  breakpoints, string>
-  usage]
+  id: string
+  name: string
+  css: string
+  variables: Record<string, string>
+  breakpoints: Record<string, string>
+  usage: string[]
 }
 
 export interface SharedBehavior {
-  id]
-  usage]
+  id: string
+  name: string
+  description: string
+  hook: string
+  dependencies: string[]
+  usage: string[]
 }
 
 export interface ReusableArchitectureCallbacks {
-  onTemplateCreated?) => void
-  onPatternShared?) => void
-  onStyleShared?) => void
-  onBehaviorShared?) => void
-  onArchitectureOptimized?) => void
+  onTemplateCreated?: (template: ComponentTemplate) => void
+  onPatternShared?: (pattern: SharedPattern) => void
+  onStyleShared?: (style: SharedStyle) => void
+  onBehaviorShared?: (behavior: SharedBehavior) => void
+  onArchitectureOptimized?: (optimization: string) => void
 }
 
 export const useReusableArchitecture = (
-  config= {},
-  callbacks= {}
+  config: ReusableArchitectureConfig = {},
+  callbacks: ReusableArchitectureCallbacks = {}
 ) => {
   const {
     enableComponentComposition = true,
@@ -54,8 +76,8 @@ export const useReusableArchitecture = (
 
   // Component composition
   const composeComponent = useCallback((
-    baseComponent,
-    enhancements) => ComponentType<any>>
+    baseComponent: ComponentType<any>,
+    enhancements: Array<(Component: ComponentType<any>) => ComponentType<any>>
   ) => {
     if (!enableComponentComposition) return baseComponent
 
@@ -74,12 +96,12 @@ export const useReusableArchitecture = (
 
   // Template system
   const createTemplate = useCallback((
-    template, 'id'>
+    template: Omit<ComponentTemplate, 'id'>
   ) => {
     if (!enableTemplateSystem) return null
 
     const id = `template-${Date.now()}`
-    const newTemplate= {
+    const newTemplate: ComponentTemplate = {
       ...template,
       id
     }
@@ -92,13 +114,14 @@ export const useReusableArchitecture = (
     return id
   }, [enableTemplateSystem, templates, callbacks])
 
-  const getTemplate = useCallback((id) => {
+  const getTemplate = useCallback((id: string) => {
     return templates.get(id)
   }, [templates])
 
   const updateTemplate = useCallback((
-    id,
-    updates) => {
+    id: string,
+    updates: Partial<ComponentTemplate>
+  ) => {
     const template = templates.get(id)
     if (!template) return false
     
@@ -109,7 +132,7 @@ export const useReusableArchitecture = (
     return true
   }, [templates])
 
-  const deleteTemplate = useCallback((id) => {
+  const deleteTemplate = useCallback((id: string) => {
     const deleted = templates.delete(id)
     if (deleted) {
       setTemplates(new Map(templates))
@@ -119,12 +142,12 @@ export const useReusableArchitecture = (
 
   // Pattern sharing
   const sharePattern = useCallback((
-    pattern, 'id'>
+    pattern: Omit<SharedPattern, 'id'>
   ) => {
     if (!enablePatternSharing) return null
 
     const id = `pattern-${Date.now()}`
-    const newPattern= {
+    const newPattern: SharedPattern = {
       ...pattern,
       id
     }
@@ -137,22 +160,22 @@ export const useReusableArchitecture = (
     return id
   }, [enablePatternSharing, sharedPatterns, callbacks])
 
-  const getPattern = useCallback((id) => {
+  const getPattern = useCallback((id: string) => {
     return sharedPatterns.get(id)
   }, [sharedPatterns])
 
-  const findPatternsByCategory = useCallback((category) => {
+  const findPatternsByCategory = useCallback((category: string) => {
     return Array.from(sharedPatterns.values()).filter(pattern => pattern.category === category)
   }, [sharedPatterns])
 
   // Style sharing
   const shareStyle = useCallback((
-    style, 'id'>
+    style: Omit<SharedStyle, 'id'>
   ) => {
     if (!enableStyleSharing) return null
 
     const id = `style-${Date.now()}`
-    const newStyle= {
+    const newStyle: SharedStyle = {
       ...style,
       id
     }
@@ -165,13 +188,14 @@ export const useReusableArchitecture = (
     return id
   }, [enableStyleSharing, sharedStyles, callbacks])
 
-  const getStyle = useCallback((id) => {
+  const getStyle = useCallback((id: string) => {
     return sharedStyles.get(id)
   }, [sharedStyles])
 
   const applyStyle = useCallback((
-    styleId,
-    targetComponent) => {
+    styleId: string,
+    targetComponent: string
+  ) => {
     const style = sharedStyles.get(styleId)
     if (!style) return false
     
@@ -187,12 +211,12 @@ export const useReusableArchitecture = (
 
   // Behavior sharing
   const shareBehavior = useCallback((
-    behavior, 'id'>
+    behavior: Omit<SharedBehavior, 'id'>
   ) => {
     if (!enableBehaviorSharing) return null
 
     const id = `behavior-${Date.now()}`
-    const newBehavior= {
+    const newBehavior: SharedBehavior = {
       ...behavior,
       id
     }
@@ -205,13 +229,14 @@ export const useReusableArchitecture = (
     return id
   }, [enableBehaviorSharing, sharedBehaviors, callbacks])
 
-  const getBehavior = useCallback((id) => {
+  const getBehavior = useCallback((id: string) => {
     return sharedBehaviors.get(id)
   }, [sharedBehaviors])
 
   const applyBehavior = useCallback((
-    behaviorId,
-    targetComponent) => {
+    behaviorId: string,
+    targetComponent: string
+  ) => {
     const behavior = sharedBehaviors.get(behaviorId)
     if (!behavior) return false
     
@@ -227,21 +252,25 @@ export const useReusableArchitecture = (
 
   // Component registry
   const registerComponent = useCallback((
-    id,
-    component,
-    metadata]
+    id: string,
+    component: ComponentType<any>,
+    metadata: {
+      name: string
+      description: string
+      category: string
+      tags: string[]
     }
   ) => {
     if (!enableComponentRegistry) return false
     
-    const template= {
+    const template: ComponentTemplate = {
       id,
-      name,
+      name: metadata.name,
       component,
-      props},
-      styles},
-      behaviors],
-      patterns]
+      props: {},
+      styles: {},
+      behaviors: [],
+      patterns: []
     }
     
     templates.set(id, template)
@@ -253,13 +282,13 @@ export const useReusableArchitecture = (
   // Architecture analysis
   const analyzeArchitecture = useCallback(() => {
     const analysis = {
-      totalTemplates,
-      totalPatterns,
-      totalStyles,
-      totalBehaviors,
-      compositionLevel,
-      reusabilityScore,
-      recommendations] as string[]
+      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
@@ -335,10 +364,10 @@ export const useReusableArchitecture = (
 
   return {
     // State
-    templates)),
-    sharedPatterns)),
-    sharedStyles)),
-    sharedBehaviors)),
+    templates: Array.from(templates.values()),
+    sharedPatterns: Array.from(sharedPatterns.values()),
+    sharedStyles: Array.from(sharedStyles.values()),
+    sharedBehaviors: Array.from(sharedBehaviors.values()),
     isOptimizing,
     optimizations,
     
@@ -374,11 +403,11 @@ export const useReusableArchitecture = (
     optimizeArchitecture,
     
     // Utility functions
-    hasTemplate) => templates.has(id),
-    hasPattern) => sharedPatterns.has(id),
-    hasStyle) => sharedStyles.has(id),
-    hasBehavior) => sharedBehaviors.has(id),
-    clearOptimizations) => setOptimizations([])
+    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([])
   }
 }
 

package/dist/hooks/use-semantic-input-types.esm.js

@@ -1,21 +1,42 @@
 import { useState, useCallback, useRef, useEffect } from 'react'
 
 export interface SemanticInputConfig {
-  type}
+  type: string
+  inputMode: 'text' | 'email' | 'tel' | 'url' | 'numeric' | 'decimal' | 'search'
+  autoCapitalize: 'off' | 'on' | 'sentences' | 'words' | 'characters' | 'none'
+  autoComplete: string
+  autoCorrect: 'on' | 'off'
+  spellCheck: boolean
+  pattern?: string
+  minLength?: number
+  maxLength?: number
+  placeholder?: string
+  required?: boolean
+  disabled?: boolean
+  readOnly?: boolean
+  tabIndex?: number
+}
 
 export interface SemanticInputType {
-  id}
+  id: string
+  name: string
+  config: SemanticInputConfig
+  mobileOptimized: boolean
+  touchFriendly: boolean
+  accessibilityEnhanced: boolean
+  performanceOptimized: boolean
+}
 
 export interface SemanticInputTypesCallbacks {
-  onInputTypeSelected?) => void
-  onConfigApplied?) => void
-  onMobileOptimizationApplied?) => void
-  onTouchOptimizationApplied?) => void
-  onAccessibilityEnhanced?) => void
+  onInputTypeSelected?: (inputType: SemanticInputType) => void
+  onConfigApplied?: (config: SemanticInputConfig) => void
+  onMobileOptimizationApplied?: (optimization: string) => void
+  onTouchOptimizationApplied?: (optimization: string) => void
+  onAccessibilityEnhanced?: (feature: string) => void
 }
 
 export const useSemanticInputTypes = (
-  callbacks= {}
+  callbacks: SemanticInputTypesCallbacks = {}
 ) => {
   const [inputTypes, setInputTypes] = useState<SemanticInputType[]>([])
   const [selectedType, setSelectedType] = useState<SemanticInputType | null>(null)
@@ -26,121 +47,142 @@ export const useSemanticInputTypes = (
   const optimizationTimerRef = useRef<number | null>(null)
 
   // Semantic input type configurations
-  const semanticInputConfigs, SemanticInputConfig> = {
-    name,
-      inputMode,
-      autoCapitalize,
-      autoComplete,
-      autoCorrect,
-      spellCheck,
-      minLength,
-      maxLength,
-      placeholder,
-      required},
-    email,
-      inputMode,
-      autoCapitalize,
-      autoComplete,
-      autoCorrect,
-      spellCheck,
-      pattern]+@[a-z0-9.-]+\\.[a-z]{2,}$',
-      placeholder,
-      required},
-    phone,
-      inputMode,
-      autoCapitalize,
-      autoComplete,
-      autoCorrect,
-      spellCheck,
-      pattern)\\s]+',
-      placeholder,
-      required},
-    creditCard,
-      inputMode,
-      autoCapitalize,
-      autoComplete,
-      autoCorrect,
-      spellCheck,
-      pattern]+',
-      minLength,
-      maxLength,
-      placeholder,
-      required},
-    amount,
-      inputMode,
-      autoCapitalize,
-      autoComplete,
-      autoCorrect,
-      spellCheck,
-      minLength,
-      maxLength,
-      placeholder,
-      required},
-    password,
-      inputMode,
-      autoCapitalize,
-      autoComplete,
-      autoCorrect,
-      spellCheck,
-      minLength,
-      maxLength,
-      placeholder,
-      required},
-    search,
-      inputMode,
-      autoCapitalize,
-      autoComplete,
-      autoCorrect,
-      spellCheck,
-      placeholder,
-      required},
-    url,
-      inputMode,
-      autoCapitalize,
-      autoComplete,
-      autoCorrect,
-      spellCheck,
-      placeholder,
-      required},
-    username,
-      inputMode,
-      autoCapitalize,
-      autoComplete,
-      autoCorrect,
-      spellCheck,
-      minLength,
-      maxLength,
-      placeholder,
-      required},
-    address,
-      inputMode,
-      autoCapitalize,
-      autoComplete,
-      autoCorrect,
-      spellCheck,
-      minLength,
-      maxLength,
-      placeholder,
-      required}
+  const semanticInputConfigs: Record<string, SemanticInputConfig> = {
+    name: {
+      type: 'text',
+      inputMode: 'text',
+      autoCapitalize: 'words',
+      autoComplete: 'name',
+      autoCorrect: 'on',
+      spellCheck: true,
+      minLength: 2,
+      maxLength: 50,
+      placeholder: 'Enter your full name',
+      required: true
+    },
+    email: {
+      type: 'email',
+      inputMode: 'email',
+      autoCapitalize: 'none',
+      autoComplete: 'email',
+      autoCorrect: 'off',
+      spellCheck: false,
+      pattern: '[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}$',
+      placeholder: 'Enter your email address',
+      required: true
+    },
+    phone: {
+      type: 'tel',
+      inputMode: 'tel',
+      autoCapitalize: 'none',
+      autoComplete: 'tel',
+      autoCorrect: 'off',
+      spellCheck: false,
+      pattern: '[0-9\\-\\+\\(\\)\\s]+',
+      placeholder: 'Enter your phone number',
+      required: true
+    },
+    creditCard: {
+      type: 'text',
+      inputMode: 'numeric',
+      autoCapitalize: 'none',
+      autoComplete: 'cc-number',
+      autoCorrect: 'off',
+      spellCheck: false,
+      pattern: '[0-9\\s]+',
+      minLength: 13,
+      maxLength: 19,
+      placeholder: 'Enter card number',
+      required: true
+    },
+    amount: {
+      type: 'number',
+      inputMode: 'decimal',
+      autoCapitalize: 'none',
+      autoComplete: 'off',
+      autoCorrect: 'off',
+      spellCheck: false,
+      minLength: 1,
+      maxLength: 10,
+      placeholder: 'Enter amount',
+      required: true
+    },
+    password: {
+      type: 'password',
+      inputMode: 'text',
+      autoCapitalize: 'none',
+      autoComplete: 'current-password',
+      autoCorrect: 'off',
+      spellCheck: false,
+      minLength: 8,
+      maxLength: 128,
+      placeholder: 'Enter your password',
+      required: true
+    },
+    search: {
+      type: 'search',
+      inputMode: 'search',
+      autoCapitalize: 'none',
+      autoComplete: 'off',
+      autoCorrect: 'off',
+      spellCheck: true,
+      placeholder: 'Search...',
+      required: false
+    },
+    url: {
+      type: 'url',
+      inputMode: 'url',
+      autoCapitalize: 'none',
+      autoComplete: 'url',
+      autoCorrect: 'off',
+      spellCheck: false,
+      placeholder: 'Enter website URL',
+      required: false
+    },
+    username: {
+      type: 'text',
+      inputMode: 'text',
+      autoCapitalize: 'none',
+      autoComplete: 'username',
+      autoCorrect: 'off',
+      spellCheck: false,
+      minLength: 3,
+      maxLength: 30,
+      placeholder: 'Enter username',
+      required: true
+    },
+    address: {
+      type: 'text',
+      inputMode: 'text',
+      autoCapitalize: 'words',
+      autoComplete: 'street-address',
+      autoCorrect: 'on',
+      spellCheck: true,
+      minLength: 10,
+      maxLength: 200,
+      placeholder: 'Enter your address',
+      required: true
+    }
   }
 
   // Initialize semantic input types
   const initializeInputTypes = useCallback(() => {
-    const types] = Object.entries(semanticInputConfigs).map(([key, config]) => ({
-      id,
-      name).toUpperCase() + key.slice(1),
+    const types: SemanticInputType[] = Object.entries(semanticInputConfigs).map(([key, config]) => ({
+      id: key,
+      name: key.charAt(0).toUpperCase() + key.slice(1),
       config,
-      mobileOptimized,
-      touchFriendly,
-      accessibilityEnhanced,
-      performanceOptimized}))
+      mobileOptimized: true,
+      touchFriendly: true,
+      accessibilityEnhanced: true,
+      performanceOptimized: true
+    }))
 
     setInputTypes(types)
     return types
   }, [])
 
   // Select input type
-  const selectInputType = useCallback((typeId) => {
+  const selectInputType = useCallback((typeId: string) => {
     const type = inputTypes.find(t => t.id === typeId)
     if (type) {
       setSelectedType(type)
@@ -151,7 +193,7 @@ export const useSemanticInputTypes = (
   }, [inputTypes, callbacks])
 
   // Apply input configuration
-  const applyInputConfig = useCallback((config) => {
+  const applyInputConfig = useCallback((config: SemanticInputConfig) => {
     if (inputRef.current) {
       // Apply all configuration properties
       Object.entries(config).forEach(([key, value]) => {
@@ -243,13 +285,13 @@ export const useSemanticInputTypes = (
   }, [selectedType, applyInputConfig, applyMobileOptimization, applyTouchOptimization, enhanceAccessibility])
 
   // Get input type by name
-  const getInputTypeByName = useCallback((name) => {
+  const getInputTypeByName = useCallback((name: string) => {
     return inputTypes.find(t => t.name.toLowerCase() === name.toLowerCase())
   }, [inputTypes])
 
   // Validate input configuration
-  const validateInputConfig = useCallback((config) => {
-    const errors] = []
+  const validateInputConfig = useCallback((config: SemanticInputConfig) => {
+    const errors: string[] = []
     
     if (!config.type) errors.push('Input type is required')
     if (!config.inputMode) errors.push('Input mode is required')
@@ -299,15 +341,15 @@ export const useSemanticInputTypes = (
     validateInputConfig,
     
     // Utility functions
-    getInputConfig) => semanticInputConfigs[typeId],
-    isTypeSelected) => selectedType?.id === typeId,
-    getOptimizationStatus) => ({
-      mobile=> o.includes('Mobile')),
-      touch=> o.includes('Touch')),
-      accessibility=> o.includes('ARIA') || o.includes('Screen reader')),
-      performance=> o.includes('Performance'))
+    getInputConfig: (typeId: string) => semanticInputConfigs[typeId],
+    isTypeSelected: (typeId: string) => selectedType?.id === typeId,
+    getOptimizationStatus: () => ({
+      mobile: optimizations.some(o => o.includes('Mobile')),
+      touch: optimizations.some(o => o.includes('Touch')),
+      accessibility: optimizations.some(o => o.includes('ARIA') || o.includes('Screen reader')),
+      performance: optimizations.some(o => o.includes('Performance'))
     }),
-    clearOptimizations) => setOptimizations([])
+    clearOptimizations: () => setOptimizations([])
   }
 }