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

package/src/hooks/use-form-performance.ts

@@ -0,0 +1,513 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+
+export interface PerformanceConfig {
+  enableValidationThrottling: boolean
+  enableTouchEventOptimization: boolean
+  enableMemoryManagement: boolean
+  enableBatteryOptimization: boolean
+  validationThrottleDelay: number
+  touchEventThrottleDelay: number
+  memoryCleanupInterval: number
+  performanceMonitoringInterval: number
+}
+
+export interface PerformanceCallbacks {
+  onPerformanceWarning?: (warning: string, metrics: PerformanceMetrics) => void
+  onMemoryWarning?: (usage: number, threshold: number) => void
+  onBatteryWarning?: (level: number, isLow: boolean) => void
+  onOptimizationApplied?: (type: string, success: boolean) => void
+}
+
+export interface PerformanceMetrics {
+  validationCount: number
+  touchEventCount: number
+  memoryUsage: number
+  batteryLevel: number
+  isLowPowerMode: boolean
+  averageResponseTime: number
+  lastOptimization: number
+  optimizationScore: number
+}
+
+export interface FormPerformanceState {
+  isOptimized: boolean
+  currentOptimizations: string[]
+  performanceMetrics: PerformanceMetrics
+  warnings: string[]
+  lastUpdate: number
+}
+
+export const useFormPerformance = (
+  callbacks: PerformanceCallbacks = {},
+  config: Partial<PerformanceConfig> = {}
+) => {
+  const defaultConfig: PerformanceConfig = {
+    enableValidationThrottling: true,
+    enableTouchEventOptimization: true,
+    enableMemoryManagement: true,
+    enableBatteryOptimization: true,
+    validationThrottleDelay: 300,
+    touchEventThrottleDelay: 16, // ~60fps
+    memoryCleanupInterval: 30000, // 30 seconds
+    performanceMonitoringInterval: 5000, // 5 seconds
+    ...config
+  }
+
+  const [performanceState, setPerformanceState] = useState<FormPerformanceState>({
+    isOptimized: false,
+    currentOptimizations: [],
+    performanceMetrics: {
+      validationCount: 0,
+      touchEventCount: 0,
+      memoryUsage: 0,
+      batteryLevel: 1,
+      isLowPowerMode: false,
+      averageResponseTime: 0,
+      lastOptimization: 0,
+      optimizationScore: 0
+    },
+    warnings: [],
+    lastUpdate: Date.now()
+  })
+
+  const validationThrottleTimerRef = useRef<NodeJS.Timeout | null>(null)
+  const touchEventThrottleTimerRef = useRef<NodeJS.Timeout | null>(null)
+  const memoryCleanupTimerRef = useRef<NodeJS.Timeout | null>(null)
+  const performanceMonitorTimerRef = useRef<NodeJS.Timeout | null>(null)
+  const batteryLevelRef = useRef<number>(1)
+  const isLowPowerModeRef = useRef<boolean>(false)
+
+  // Check battery status
+  const checkBatteryStatus = useCallback(async () => {
+    if (!defaultConfig.enableBatteryOptimization || !('getBattery' in navigator)) return
+
+    try {
+      const battery = await (navigator as any).getBattery()
+      batteryLevelRef.current = battery.level
+      isLowPowerModeRef.current = battery.level < 0.2
+
+      setPerformanceState(prev => ({
+        ...prev,
+        performanceMetrics: {
+          ...prev.performanceMetrics,
+          batteryLevel: battery.level,
+          isLowPowerMode: battery.level < 0.2
+        }
+      }))
+
+      if (battery.level < 0.2) {
+        callbacks.onBatteryWarning?.(battery.level, true)
+      }
+    } catch (error) {
+      console.warn('Battery API not supported:', error)
+    }
+  }, [defaultConfig.enableBatteryOptimization, callbacks])
+
+  // Check memory usage
+  const checkMemoryUsage = useCallback(() => {
+    if (!defaultConfig.enableMemoryManagement || !('memory' in performance)) return
+
+    try {
+      const memory = (performance as any).memory
+      const usage = memory.usedJSHeapSize / memory.jsHeapSizeLimit
+
+      setPerformanceState(prev => ({
+        ...prev,
+        performanceMetrics: {
+          ...prev.performanceMetrics,
+          memoryUsage: usage
+        }
+      }))
+
+      if (usage > 0.8) {
+        callbacks.onMemoryWarning?.(usage, 0.8)
+        triggerMemoryCleanup()
+      }
+    } catch (error) {
+      console.warn('Memory API not supported:', error)
+    }
+  }, [defaultConfig.enableMemoryManagement, callbacks])
+
+  // Trigger memory cleanup
+  const triggerMemoryCleanup = useCallback(() => {
+    if (!defaultConfig.enableMemoryManagement) return
+
+    try {
+      // Force garbage collection if available
+      if ('gc' in window) {
+        (window as any).gc()
+      }
+
+      // Clear any cached data
+      if ('caches' in window) {
+        caches.keys().then(names => {
+          names.forEach(name => {
+            if (name.includes('form-cache')) {
+              caches.delete(name)
+            }
+          })
+        })
+      }
+
+      setPerformanceState(prev => ({
+        ...prev,
+        currentOptimizations: [...prev.currentOptimizations, 'memory-cleanup'],
+        lastUpdate: Date.now()
+      }))
+
+      callbacks.onOptimizationApplied?.('memory-cleanup', true)
+    } catch (error) {
+      console.warn('Memory cleanup failed:', error)
+      callbacks.onOptimizationApplied?.('memory-cleanup', false)
+    }
+  }, [defaultConfig.enableMemoryManagement, callbacks])
+
+  // Validation throttling
+  const throttledValidation = useCallback((
+    validationFunction: () => void,
+    delay?: number
+  ) => {
+    if (!defaultConfig.enableValidationThrottling) {
+      validationFunction()
+      return
+    }
+
+    const throttleDelay = delay || defaultConfig.validationThrottleDelay
+
+    if (validationThrottleTimerRef.current) {
+      clearTimeout(validationThrottleTimerRef.current)
+    }
+
+    validationThrottleTimerRef.current = setTimeout(() => {
+      const startTime = performance.now()
+      validationFunction()
+      const endTime = performance.now()
+      const responseTime = endTime - startTime
+
+      setPerformanceState(prev => ({
+        ...prev,
+        performanceMetrics: {
+          ...prev.performanceMetrics,
+          validationCount: prev.performanceMetrics.validationCount + 1,
+          averageResponseTime: (prev.performanceMetrics.averageResponseTime * prev.performanceMetrics.validationCount + responseTime) / (prev.performanceMetrics.validationCount + 1)
+        }
+      }))
+    }, throttleDelay)
+  }, [defaultConfig.enableValidationThrottling, defaultConfig.validationThrottleDelay])
+
+  // Touch event optimization
+  const optimizedTouchEvent = useCallback((
+    touchFunction: () => void,
+    delay?: number
+  ) => {
+    if (!defaultConfig.enableTouchEventOptimization) {
+      touchFunction()
+      return
+    }
+
+    const throttleDelay = delay || defaultConfig.touchEventThrottleDelay
+
+    if (touchEventThrottleTimerRef.current) {
+      clearTimeout(touchEventThrottleTimerRef.current)
+    }
+
+    touchEventThrottleTimerRef.current = setTimeout(() => {
+      touchFunction()
+      
+      setPerformanceState(prev => ({
+        ...prev,
+        performanceMetrics: {
+          ...prev.performanceMetrics,
+          touchEventCount: prev.performanceMetrics.touchEventCount + 1
+        }
+      }))
+    }, throttleDelay)
+  }, [defaultConfig.enableTouchEventOptimization, defaultConfig.touchEventThrottleDelay])
+
+  // Calculate performance score
+  const calculatePerformanceScore = useCallback((): number => {
+    const { performanceMetrics } = performanceState
+    let score = 0
+
+    // Response time score (40% weight)
+    if (performanceMetrics.averageResponseTime < 50) {
+      score += 0.4
+    } else if (performanceMetrics.averageResponseTime < 100) {
+      score += 0.3
+    } else if (performanceMetrics.averageResponseTime < 200) {
+      score += 0.2
+    } else if (performanceMetrics.averageResponseTime < 500) {
+      score += 0.1
+    }
+
+    // Memory usage score (30% weight)
+    if (performanceMetrics.memoryUsage < 0.5) {
+      score += 0.3
+    } else if (performanceMetrics.memoryUsage < 0.7) {
+      score += 0.2
+    } else if (performanceMetrics.memoryUsage < 0.9) {
+      score += 0.1
+    }
+
+    // Battery optimization score (20% weight)
+    if (!performanceMetrics.isLowPowerMode) {
+      score += 0.2
+    } else if (performanceMetrics.batteryLevel > 0.5) {
+      score += 0.1
+    }
+
+    // Event count score (10% weight)
+    if (performanceMetrics.touchEventCount < 100) {
+      score += 0.1
+    } else if (performanceMetrics.touchEventCount < 500) {
+      score += 0.05
+    }
+
+    return Math.min(score, 1)
+  }, [performanceState.performanceMetrics])
+
+  // Apply performance optimizations
+  const applyOptimizations = useCallback(() => {
+    const optimizations: string[] = []
+    let success = true
+
+    try {
+      // Apply validation throttling
+      if (defaultConfig.enableValidationThrottling) {
+        optimizations.push('validation-throttling')
+      }
+
+      // Apply touch event optimization
+      if (defaultConfig.enableTouchEventOptimization) {
+        optimizations.push('touch-event-optimization')
+      }
+
+      // Apply memory management
+      if (defaultConfig.enableMemoryManagement) {
+        triggerMemoryCleanup()
+        optimizations.push('memory-management')
+      }
+
+      // Apply battery optimization
+      if (defaultConfig.enableBatteryOptimization && isLowPowerModeRef.current) {
+        // Reduce update frequency in low power mode
+        if (performanceMonitorTimerRef.current) {
+          clearInterval(performanceMonitorTimerRef.current)
+          performanceMonitorTimerRef.current = setInterval(() => {
+            checkMemoryUsage()
+          }, defaultConfig.performanceMonitoringInterval * 2)
+        }
+        optimizations.push('battery-optimization')
+      }
+
+      const optimizationScore = calculatePerformanceScore()
+      const isOptimized = optimizationScore >= 0.7
+
+      setPerformanceState(prev => ({
+        ...prev,
+        isOptimized,
+        currentOptimizations: optimizations,
+        performanceMetrics: {
+          ...prev.performanceMetrics,
+          optimizationScore,
+          lastOptimization: Date.now()
+        },
+        lastUpdate: Date.now()
+      }))
+
+      callbacks.onOptimizationApplied?.('performance', success)
+    } catch (error) {
+      console.error('Performance optimization failed:', error)
+      success = false
+      callbacks.onOptimizationApplied?.('performance', false)
+    }
+  }, [
+    defaultConfig,
+    triggerMemoryCleanup,
+    calculatePerformanceScore,
+    callbacks
+  ])
+
+  // Monitor performance
+  const startPerformanceMonitoring = useCallback(() => {
+    if (performanceMonitorTimerRef.current) {
+      clearInterval(performanceMonitorTimerRef.current)
+    }
+
+    performanceMonitorTimerRef.current = setInterval(() => {
+      checkMemoryUsage()
+      checkBatteryStatus()
+
+      const score = calculatePerformanceScore()
+      if (score < 0.5) {
+        const warning = `Performance score is low: ${(score * 100).toFixed(1)}%`
+        setPerformanceState(prev => ({
+          ...prev,
+          warnings: [...prev.warnings, warning]
+        }))
+        callbacks.onPerformanceWarning?.(warning, performanceState.performanceMetrics)
+      }
+    }, defaultConfig.performanceMonitoringInterval)
+  }, [
+    defaultConfig.performanceMonitoringInterval,
+    checkMemoryUsage,
+    checkBatteryStatus,
+    calculatePerformanceScore,
+    performanceState.performanceMetrics,
+    callbacks
+  ])
+
+  // Stop performance monitoring
+  const stopPerformanceMonitoring = useCallback(() => {
+    if (performanceMonitorTimerRef.current) {
+      clearInterval(performanceMonitorTimerRef.current)
+      performanceMonitorTimerRef.current = null
+    }
+  }, [])
+
+  // Reset performance state
+  const resetPerformance = useCallback(() => {
+    setPerformanceState({
+      isOptimized: false,
+      currentOptimizations: [],
+      performanceMetrics: {
+        validationCount: 0,
+        touchEventCount: 0,
+        memoryUsage: 0,
+        batteryLevel: 1,
+        isLowPowerMode: false,
+        averageResponseTime: 0,
+        lastOptimization: 0,
+        optimizationScore: 0
+      },
+      warnings: [],
+      lastUpdate: Date.now()
+    })
+  }, [])
+
+  // Get performance report
+  const getPerformanceReport = useCallback(() => {
+    const { performanceMetrics, currentOptimizations, warnings } = performanceState
+    
+    return {
+      metrics: performanceMetrics,
+      optimizations: currentOptimizations,
+      warnings,
+      recommendations: getPerformanceRecommendations()
+    }
+  }, [performanceState])
+
+  // Get performance recommendations
+  const getPerformanceRecommendations = useCallback(() => {
+    const { performanceMetrics } = performanceState
+    const recommendations: string[] = []
+
+    if (performanceMetrics.averageResponseTime > 200) {
+      recommendations.push('Consider increasing validation throttle delay')
+      recommendations.push('Optimize validation logic for better performance')
+    }
+
+    if (performanceMetrics.memoryUsage > 0.7) {
+      recommendations.push('Enable memory cleanup more frequently')
+      recommendations.push('Reduce cached data size')
+    }
+
+    if (performanceMetrics.isLowPowerMode) {
+      recommendations.push('Reduce update frequency in low power mode')
+      recommendations.push('Disable non-essential optimizations')
+    }
+
+    if (performanceMetrics.touchEventCount > 500) {
+      recommendations.push('Increase touch event throttle delay')
+      recommendations.push('Consider debouncing touch events')
+    }
+
+    return recommendations
+  }, [performanceState.performanceMetrics])
+
+  // Set up initial monitoring
+  useEffect(() => {
+    checkBatteryStatus()
+    checkMemoryUsage()
+    startPerformanceMonitoring()
+
+    return () => {
+      stopPerformanceMonitoring()
+    }
+  }, [checkBatteryStatus, checkMemoryUsage, startPerformanceMonitoring, stopPerformanceMonitoring])
+
+  // Set up memory cleanup interval
+  useEffect(() => {
+    if (defaultConfig.enableMemoryManagement) {
+      memoryCleanupTimerRef.current = setInterval(() => {
+        checkMemoryUsage()
+      }, defaultConfig.memoryCleanupInterval)
+    }
+
+    return () => {
+      if (memoryCleanupTimerRef.current) {
+        clearInterval(memoryCleanupTimerRef.current)
+      }
+    }
+  }, [defaultConfig.enableMemoryManagement, defaultConfig.memoryCleanupInterval, checkMemoryUsage])
+
+  // Clean up timers on unmount
+  useEffect(() => {
+    return () => {
+      if (validationThrottleTimerRef.current) {
+        clearTimeout(validationThrottleTimerRef.current)
+      }
+      if (touchEventThrottleTimerRef.current) {
+        clearTimeout(touchEventThrottleTimerRef.current)
+      }
+      if (memoryCleanupTimerRef.current) {
+        clearInterval(memoryCleanupTimerRef.current)
+      }
+      if (performanceMonitorTimerRef.current) {
+        clearInterval(performanceMonitorTimerRef.current)
+      }
+    }
+  }, [])
+
+  return {
+    performanceState,
+    throttledValidation,
+    optimizedTouchEvent,
+    applyOptimizations,
+    startPerformanceMonitoring,
+    stopPerformanceMonitoring,
+    resetPerformance,
+    getPerformanceReport,
+    getPerformanceRecommendations,
+    checkMemoryUsage,
+    checkBatteryStatus
+  }
+}
+
+// Convenience hook for basic performance optimization
+export const useBasicFormPerformance = () => {
+  return useFormPerformance({}, {
+    enableValidationThrottling: true,
+    enableTouchEventOptimization: false,
+    enableMemoryManagement: false,
+    enableBatteryOptimization: false,
+    validationThrottleDelay: 500,
+    touchEventThrottleDelay: 32,
+    memoryCleanupInterval: 60000,
+    performanceMonitoringInterval: 10000
+  })
+}
+
+// Convenience hook for enhanced performance optimization
+export const useEnhancedFormPerformance = () => {
+  return useFormPerformance({}, {
+    enableValidationThrottling: true,
+    enableTouchEventOptimization: true,
+    enableMemoryManagement: true,
+    enableBatteryOptimization: true,
+    validationThrottleDelay: 300,
+    touchEventThrottleDelay: 16,
+    memoryCleanupInterval: 30000,
+    performanceMonitoringInterval: 5000
+  })
+}