@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.3 → 0.1.5

package/src/hooks/use-adaptive-layout.ts

@@ -0,0 +1,289 @@
+import { useState, useEffect, useCallback, useMemo } from 'react'
+
+export type DeviceType = 'mobile' | 'tablet' | 'desktop'
+export type Orientation = 'portrait' | 'landscape'
+export type ScreenSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+
+export interface AdaptiveLayoutState {
+  deviceType: DeviceType
+  orientation: Orientation
+  screenSize: ScreenSize
+  width: number
+  height: number
+  isTouchDevice: boolean
+  isHighDensity: boolean
+  isLowPower: boolean
+  performanceScore: number
+}
+
+export interface AdaptiveLayoutConfig {
+  enablePerformanceOptimization?: boolean
+  enableTouchOptimization?: boolean
+  enableBatteryOptimization?: boolean
+  enableMemoryOptimization?: boolean
+  breakpoints?: {
+    xs: number
+    sm: number
+    md: number
+    lg: number
+    xl: number
+    '2xl': number
+  }
+}
+
+export interface AdaptiveLayoutCallbacks {
+  onDeviceChange?: (deviceType: DeviceType) => void
+  onOrientationChange?: (orientation: Orientation) => void
+  onScreenSizeChange?: (screenSize: ScreenSize) => void
+  onPerformanceChange?: (score: number) => void
+  onBatteryChange?: (isLow: boolean) => void
+}
+
+export const useAdaptiveLayout = (
+  config: AdaptiveLayoutConfig = {},
+  callbacks: AdaptiveLayoutCallbacks = {}
+) => {
+  const {
+    enablePerformanceOptimization = true,
+    enableTouchOptimization = true,
+    enableBatteryOptimization = true,
+    enableMemoryOptimization = true,
+    breakpoints = {
+      xs: 0,
+      sm: 640,
+      md: 768,
+      lg: 1024,
+      xl: 1280,
+      '2xl': 1536
+    }
+  } = config
+
+  const [state, setState] = useState<AdaptiveLayoutState>({
+    deviceType: 'desktop',
+    orientation: 'landscape',
+    screenSize: 'lg',
+    width: 0,
+    height: 0,
+    isTouchDevice: false,
+    isHighDensity: false,
+    isLowPower: false,
+    performanceScore: 100
+  })
+
+  // Device detection
+  const detectDevice = useCallback((width: number, _height: number): DeviceType => {
+    if (width < breakpoints.md) return 'mobile'
+    if (width < breakpoints.lg) return 'tablet'
+    return 'desktop'
+  }, [breakpoints])
+
+  // Screen size detection
+  const detectScreenSize = useCallback((width: number): ScreenSize => {
+    if (width < breakpoints.sm) return 'xs'
+    if (width < breakpoints.md) return 'sm'
+    if (width < breakpoints.lg) return 'md'
+    if (width < breakpoints.xl) return 'lg'
+    if (width < breakpoints['2xl']) return 'xl'
+    return '2xl'
+  }, [breakpoints])
+
+  // Touch device detection
+  const detectTouchDevice = useCallback((): boolean => {
+    return 'ontouchstart' in window || navigator.maxTouchPoints > 0
+  }, [])
+
+  // High density display detection
+  const detectHighDensity = useCallback((): boolean => {
+    return window.devicePixelRatio > 1
+  }, [])
+
+  // Battery status detection
+  const detectBatteryStatus = useCallback(async (): Promise<boolean> => {
+    if ('getBattery' in navigator) {
+      try {
+        const battery = await (navigator as any).getBattery()
+        return battery.level < 0.2
+      } catch {
+        return false
+      }
+    }
+    return false
+  }, [])
+
+  // Performance monitoring
+  const measurePerformance = useCallback(async (): Promise<number> => {
+    if (!enablePerformanceOptimization) return 100
+
+    const startTime = performance.now()
+    
+    // Simulate performance measurement
+    await new Promise(resolve => setTimeout(resolve, 10))
+    
+    const endTime = performance.now()
+    const renderTime = endTime - startTime
+    
+    // Calculate performance score (lower render time = higher score)
+    const baseScore = 100
+    const timePenalty = Math.min(renderTime * 10, 50)
+    const score = Math.max(baseScore - timePenalty, 0)
+    
+    return Math.round(score)
+  }, [enablePerformanceOptimization])
+
+  // Memory usage monitoring
+  const measureMemoryUsage = useCallback((): number => {
+    if (!enableMemoryOptimization || !('memory' in performance)) return 0
+    
+    const memory = (performance as any).memory
+    return (memory.usedJSHeapSize / memory.jsHeapSizeLimit) * 100
+  }, [enableMemoryOptimization])
+
+  // Update layout state
+  const updateLayout = useCallback(async () => {
+    const width = window.innerWidth
+    const height = window.innerHeight
+    const deviceType = detectDevice(width, height)
+    const screenSize = detectScreenSize(width)
+    const orientation = width > height ? 'landscape' : 'portrait'
+    const isTouchDevice = detectTouchDevice()
+    const isHighDensity = detectHighDensity()
+    const isLowPower = await detectBatteryStatus()
+    const performanceScore = await measurePerformance()
+
+    const newState: AdaptiveLayoutState = {
+      deviceType,
+      orientation,
+      screenSize,
+      width,
+      height,
+      isTouchDevice,
+      isHighDensity,
+      isLowPower,
+      performanceScore
+    }
+
+    setState(newState)
+
+    // Trigger callbacks
+    if (callbacks.onDeviceChange && deviceType !== state.deviceType) {
+      callbacks.onDeviceChange(deviceType)
+    }
+    if (callbacks.onOrientationChange && orientation !== state.orientation) {
+      callbacks.onOrientationChange(orientation)
+    }
+    if (callbacks.onScreenSizeChange && screenSize !== state.screenSize) {
+      callbacks.onScreenSizeChange(screenSize)
+    }
+    if (callbacks.onPerformanceChange && performanceScore !== state.performanceScore) {
+      callbacks.onPerformanceChange(performanceScore)
+    }
+    if (callbacks.onBatteryChange && isLowPower !== state.isLowPower) {
+      callbacks.onBatteryChange(isLowPower)
+    }
+  }, [
+    detectDevice,
+    detectScreenSize,
+    detectTouchDevice,
+    detectHighDensity,
+    detectBatteryStatus,
+    measurePerformance,
+    callbacks,
+    state.deviceType,
+    state.orientation,
+    state.screenSize,
+    state.performanceScore,
+    state.isLowPower
+  ])
+
+  // Initialize and set up event listeners
+  useEffect(() => {
+    updateLayout()
+
+    const handleResize = () => updateLayout()
+    const handleOrientationChange = () => updateLayout()
+
+    window.addEventListener('resize', handleResize)
+    window.addEventListener('orientationchange', handleOrientationChange)
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+      window.removeEventListener('orientationchange', handleOrientationChange)
+    }
+  }, [updateLayout])
+
+  // Performance monitoring interval
+  useEffect(() => {
+    if (!enablePerformanceOptimization) return
+
+    const interval = setInterval(updateLayout, 5000)
+    return () => clearInterval(interval)
+  }, [enablePerformanceOptimization, updateLayout])
+
+  // Battery monitoring
+  useEffect(() => {
+    if (!enableBatteryOptimization) return
+
+    const interval = setInterval(updateLayout, 30000) // Check every 30 seconds
+    return () => clearInterval(interval)
+  }, [enableBatteryOptimization, updateLayout])
+
+  // Computed values
+  const isMobile = useMemo(() => state.deviceType === 'mobile', [state.deviceType])
+  const isTablet = useMemo(() => state.deviceType === 'tablet', [state.deviceType])
+  const isDesktop = useMemo(() => state.deviceType === 'desktop', [state.deviceType])
+  const isPortrait = useMemo(() => state.orientation === 'portrait', [state.orientation])
+  const isLandscape = useMemo(() => state.orientation === 'landscape', [state.orientation])
+
+  // Layout recommendations
+  const layoutRecommendations = useMemo(() => {
+    const recommendations = []
+
+    if (state.isLowPower && enableBatteryOptimization) {
+      recommendations.push('Reduce animations and effects for better battery life')
+    }
+
+    if (state.performanceScore < 70 && enablePerformanceOptimization) {
+      recommendations.push('Consider reducing layout complexity for better performance')
+    }
+
+    if (state.isTouchDevice && enableTouchOptimization) {
+      recommendations.push('Touch-friendly interactions enabled')
+    }
+
+    if (state.isHighDensity) {
+      recommendations.push('High-density display detected - using optimized assets')
+    }
+
+    return recommendations
+  }, [
+    state.isLowPower,
+    state.performanceScore,
+    state.isTouchDevice,
+    state.isHighDensity,
+    enableBatteryOptimization,
+    enablePerformanceOptimization,
+    enableTouchOptimization
+  ])
+
+  return {
+    // State
+    ...state,
+    
+    // Computed values
+    isMobile,
+    isTablet,
+    isDesktop,
+    isPortrait,
+    isLandscape,
+    
+    // Layout recommendations
+    layoutRecommendations,
+    
+    // Actions
+    updateLayout,
+    measurePerformance,
+    measureMemoryUsage
+  }
+}
+
+export default useAdaptiveLayout

package/src/hooks/use-advanced-patterns.ts

@@ -0,0 +1,294 @@
+import { useState, useCallback, useRef, useEffect, ReactNode, ComponentType } from 'react'
+
+export interface AdvancedPatternsConfig {
+  enableCompoundComponents?: boolean
+  enableRenderProps?: boolean
+  enableHigherOrderComponents?: boolean
+  enableCustomHooks?: boolean
+  enablePerformanceOptimization?: boolean
+  enableAccessibilitySupport?: boolean
+}
+
+export interface CompoundComponentContext {
+  registerComponent: (id: string, component: ReactNode) => void
+  unregisterComponent: (id: string) => void
+  getComponent: (id: string) => ReactNode | undefined
+  getAllComponents: () => ReactNode[]
+}
+
+export interface RenderPropsConfig<T = any> {
+  data: T
+  loading: boolean
+  error: Error | null
+  render: (props: T) => ReactNode
+  fallback?: ReactNode
+}
+
+export interface HigherOrderComponentConfig {
+  component: ComponentType<any>
+  props: Record<string, any>
+  enhancers: Array<(Component: ComponentType<any>) => ComponentType<any>>
+}
+
+export interface AdvancedPatternsCallbacks {
+  onPatternApplied?: (pattern: string, component: string) => void
+  onPerformanceOptimized?: (optimization: string) => void
+  onAccessibilityEnhanced?: (feature: string) => void
+}
+
+export const useAdvancedPatterns = (
+  config: AdvancedPatternsConfig = {},
+  callbacks: AdvancedPatternsCallbacks = {}
+) => {
+  const {
+    enableCompoundComponents = true,
+    enableRenderProps = true,
+    enableHigherOrderComponents = true,
+    enableCustomHooks = true,
+    enablePerformanceOptimization = true,
+    enableAccessibilitySupport = true
+  } = config
+
+  const [patterns, setPatterns] = useState<string[]>([])
+  const [isOptimizing, setIsOptimizing] = useState(false)
+  const componentsRef = useRef<Map<string, ReactNode>>(new Map())
+  const performanceMetricsRef = useRef<Map<string, number>>(new Map())
+
+  // Compound Components Pattern
+  const createCompoundComponent = useCallback((
+    baseComponent: ComponentType<any>,
+    subComponents: Record<string, ComponentType<any>>
+  ) => {
+    if (!enableCompoundComponents) return baseComponent
+
+    const compoundComponent = Object.assign(baseComponent, subComponents)
+    
+    setPatterns(prev => [...prev, 'Compound Components'])
+    callbacks.onPatternApplied?.('Compound Components', baseComponent.displayName || 'Unknown')
+    
+    return compoundComponent
+  }, [enableCompoundComponents, callbacks])
+
+  // Render Props Pattern
+  const createRenderPropsComponent = useCallback(<T,>(
+    config: RenderPropsConfig<T>
+  ) => {
+    if (!enableRenderProps) return null
+
+    const { data, loading, error, render, fallback } = config
+    
+    if (loading) {
+      return { type: 'loading', fallback }
+    }
+    
+    if (error) {
+      return { type: 'error', message: error.message }
+    }
+    
+    setPatterns(prev => [...prev, 'Render Props'])
+    callbacks.onPatternApplied?.('Render Props', 'RenderPropsComponent')
+    
+    return { type: 'success', data, render }
+  }, [enableRenderProps, callbacks])
+
+  // Higher-Order Component Pattern
+  const createHigherOrderComponent = useCallback((
+    config: HigherOrderComponentConfig
+  ) => {
+    if (!enableHigherOrderComponents) return config.component
+
+    const { component: Component, props, enhancers } = config
+    
+    let EnhancedComponent = Component
+    
+    enhancers.forEach(enhancer => {
+      EnhancedComponent = enhancer(EnhancedComponent)
+    })
+    
+    setPatterns(prev => [...prev, 'Higher-Order Components'])
+    callbacks.onPatternApplied?.('Higher-Order Components', Component.displayName || 'Unknown')
+    
+    return { component: EnhancedComponent, props, enhanced: true }
+  }, [enableHigherOrderComponents, callbacks])
+
+  // Custom Hooks Pattern
+  const createCustomHook = useCallback(<T>(
+    hookName: string,
+    hookLogic: () => T
+  ) => {
+    if (!enableCustomHooks) return hookLogic()
+
+    setPatterns(prev => [...prev, 'Custom Hooks'])
+    callbacks.onPatternApplied?.('Custom Hooks', hookName)
+    
+    return hookLogic()
+  }, [enableCustomHooks, callbacks])
+
+  // Performance Optimization
+  const optimizeComponent = useCallback((
+    componentId: string,
+    optimizationType: 'memoization' | 'lazy-loading' | 'virtualization'
+  ) => {
+    if (!enablePerformanceOptimization) return
+
+    setIsOptimizing(true)
+    
+    setTimeout(() => {
+      const optimization = `${optimizationType} applied to ${componentId}`
+      setPatterns(prev => [...prev, optimization])
+      callbacks.onPerformanceOptimized?.(optimization)
+      setIsOptimizing(false)
+    }, 200)
+  }, [enablePerformanceOptimization, callbacks])
+
+  // Accessibility Enhancement
+  const enhanceAccessibility = useCallback((
+    componentId: string,
+    feature: 'aria' | 'keyboard' | 'screen-reader' | 'focus'
+  ) => {
+    if (!enableAccessibilitySupport) return
+
+    const enhancement = `${feature} accessibility enhanced for ${componentId}`
+    setPatterns(prev => [...prev, enhancement])
+    callbacks.onAccessibilityEnhanced?.(enhancement)
+  }, [enableAccessibilitySupport, callbacks])
+
+  // Component Registry
+  const registerComponent = useCallback((id: string, component: ReactNode) => {
+    componentsRef.current.set(id, component)
+  }, [])
+
+  const unregisterComponent = useCallback((id: string) => {
+    componentsRef.current.delete(id)
+  }, [])
+
+  const getComponent = useCallback((id: string) => {
+    return componentsRef.current.get(id)
+  }, [])
+
+  const getAllComponents = useCallback(() => {
+    return Array.from(componentsRef.current.values())
+  }, [])
+
+  // Performance Monitoring
+  const measurePerformance = useCallback((componentId: string, operation: string) => {
+    const startTime = performance.now()
+    
+    return () => {
+      const endTime = performance.now()
+      const duration = endTime - startTime
+      performanceMetricsRef.current.set(`${componentId}-${operation}`, duration)
+    }
+  }, [])
+
+  // Pattern Analysis
+  const analyzePatterns = useCallback(() => {
+    const patternCounts = patterns.reduce((acc, pattern) => {
+      acc[pattern] = (acc[pattern] || 0) + 1
+      return acc
+    }, {} as Record<string, number>)
+
+    return {
+      totalPatterns: patterns.length,
+      patternCounts,
+      uniquePatterns: Object.keys(patternCounts).length,
+      performanceMetrics: Object.fromEntries(performanceMetricsRef.current)
+    }
+  }, [patterns])
+
+  // Pattern Recommendations
+  const getPatternRecommendations = useCallback(() => {
+    const recommendations = []
+    
+    if (patterns.length === 0) {
+      recommendations.push('Consider implementing compound components for complex UI structures')
+      recommendations.push('Use render props for flexible component composition')
+      recommendations.push('Apply higher-order components for cross-cutting concerns')
+      recommendations.push('Create custom hooks for reusable logic')
+    }
+    
+    if (!patterns.includes('Performance Optimization')) {
+      recommendations.push('Implement memoization for expensive computations')
+      recommendations.push('Use lazy loading for large component trees')
+      recommendations.push('Consider virtualization for long lists')
+    }
+    
+    if (!patterns.includes('Accessibility Support')) {
+      recommendations.push('Add ARIA labels and roles to components')
+      recommendations.push('Implement keyboard navigation support')
+      recommendations.push('Ensure screen reader compatibility')
+      recommendations.push('Add focus management features')
+    }
+    
+    return recommendations
+  }, [patterns])
+
+  // Pattern Validation
+  const validatePatterns = useCallback(() => {
+    const validation = {
+      isValid: true,
+      errors: [] as string[],
+      warnings: [] as string[]
+    }
+    
+    // Check for pattern conflicts
+    if (patterns.includes('Compound Components') && patterns.includes('Higher-Order Components')) {
+      validation.warnings.push('Compound Components and Higher-Order Components can be used together but may increase complexity')
+    }
+    
+    // Check for missing optimizations
+    if (patterns.length > 3 && !patterns.includes('Performance Optimization')) {
+      validation.warnings.push('Multiple patterns detected without performance optimization')
+    }
+    
+    // Check for accessibility compliance
+    if (patterns.length > 2 && !patterns.includes('Accessibility Support')) {
+      validation.warnings.push('Multiple patterns detected without accessibility support')
+    }
+    
+    return validation
+  }, [patterns])
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      componentsRef.current.clear()
+      performanceMetricsRef.current.clear()
+    }
+  }, [])
+
+  return {
+    // State
+    patterns,
+    isOptimizing,
+    
+    // Pattern Creators
+    createCompoundComponent,
+    createRenderPropsComponent,
+    createHigherOrderComponent,
+    createCustomHook,
+    
+    // Optimization
+    optimizeComponent,
+    enhanceAccessibility,
+    measurePerformance,
+    
+    // Component Registry
+    registerComponent,
+    unregisterComponent,
+    getComponent,
+    getAllComponents,
+    
+    // Analysis
+    analyzePatterns,
+    getPatternRecommendations,
+    validatePatterns,
+    
+    // Utility functions
+    hasPattern: (pattern: string) => patterns.includes(pattern),
+    getPatternCount: (pattern: string) => patterns.filter(p => p === pattern).length,
+    clearPatterns: () => setPatterns([])
+  }
+}
+
+export default useAdvancedPatterns