@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.6 → 0.2.8

package/dist/hooks/use-performance-throttling.d.ts

@@ -0,0 +1,346 @@
+export interface PerformanceThrottlingConfig {
+  enablePerformanceMonitoring?: boolean
+  enableAutomaticThrottling?: boolean
+  enableUserExperienceOptimization?: boolean
+  enableBatteryPreservation?: boolean
+  performanceThreshold?: number
+  frameRateTarget?: number
+  memoryThreshold?: number
+  cpuThreshold?: number
+}
+
+export interface PerformanceMetrics {
+  fps: number
+  frameTime: number
+  memoryUsage: number
+  cpuUsage: number
+  performanceScore: number
+  isThrottling: boolean
+  throttleReason: string
+}
+
+export interface PerformanceThrottlingCallbacks {
+  onPerformanceWarning?: (metrics: PerformanceMetrics) => void
+  onThrottlingApplied?: (level: string, reason: string) => void
+  onPerformanceRecovery?: (metrics: PerformanceMetrics) => void
+  onUserExperienceOptimized?: (optimization: string) => void
+}
+
+export declare const usePerformanceThrottling: (
+  config: PerformanceThrottlingConfig = {},
+  callbacks: PerformanceThrottlingCallbacks = {}
+) => {
+  const {
+    enablePerformanceMonitoring = true,
+    enableAutomaticThrottling = true,
+    enableUserExperienceOptimization = true,
+    enableBatteryPreservation = true,
+    performanceThreshold = 70,
+    frameRateTarget = 60,
+    memoryThreshold = 80,
+    cpuThreshold = 80
+  } = config
+
+  const [metrics, setMetrics] = useState<PerformanceMetrics>({
+    fps: 60,
+    frameTime: 16.67,
+    memoryUsage: 0,
+    cpuUsage: 0,
+    performanceScore: 100,
+    isThrottling: false,
+    throttleReason: 'none'
+  })
+
+  const [isOptimizing, setIsOptimizing] = useState(false)
+  const [optimizations, setOptimizations] = useState<string[]>([])
+  const [throttleLevel, setThrottleLevel] = useState<'none' | 'light' | 'moderate' | 'aggressive'>('none')
+
+  const frameCountRef = useRef(0)
+  const lastFrameTimeRef = useRef(performance.now())
+  const performanceTimerRef = useRef<number | null>(null)
+  const throttlingTimerRef = useRef<number | null>(null)
+
+  // Performance monitoring
+  const measurePerformance = useCallback(() => {
+    if (!enablePerformanceMonitoring) return
+
+    try {
+      const now = performance.now()
+      frameCountRef.current++
+
+      if (now - lastFrameTimeRef.current >= 1000) {
+        const fps = Math.round((frameCountRef.current * 1000) / (now - lastFrameTimeRef.current))
+        const frameTime = 1000 / fps
+
+        // Simulate memory and CPU usage
+        const memoryUsage = Math.random() * 100
+        const cpuUsage = Math.random() * 100
+
+        // Calculate performance score
+        const fpsScore = Math.min((fps / frameRateTarget) * 100, 100)
+        const timeScore = Math.max(100 - (frameTime - 16.67) * 10, 0)
+        const memoryScore = Math.max(100 - memoryUsage, 0)
+        const cpuScore = Math.max(100 - cpuUsage, 0)
+
+        const performanceScore = Math.round((fpsScore + timeScore + memoryScore + cpuScore) / 4)
+
+        // Determine if throttling is needed
+        const isThrottling = performanceScore < performanceThreshold || 
+                           fps < frameRateTarget * 0.8 || 
+                           memoryUsage > memoryThreshold || 
+                           cpuUsage > cpuThreshold
+
+        let throttleReason = 'none'
+        if (performanceScore < performanceThreshold) throttleReason = 'low_performance'
+        else if (fps < frameRateTarget * 0.8) throttleReason = 'low_fps'
+        else if (memoryUsage > memoryThreshold) throttleReason = 'high_memory'
+        else if (cpuUsage > cpuThreshold) throttleReason = 'high_cpu'
+
+        const newMetrics: PerformanceMetrics = {
+          fps,
+          frameTime,
+          memoryUsage,
+          cpuUsage,
+          performanceScore,
+          isThrottling,
+          throttleReason
+        }
+
+        setMetrics(newMetrics)
+
+        // Trigger callbacks
+        if (isThrottling) {
+          callbacks.onPerformanceWarning?.(newMetrics)
+        } else if (metrics.isThrottling) {
+          callbacks.onPerformanceRecovery?.(newMetrics)
+        }
+
+        frameCountRef.current = 0
+        lastFrameTimeRef.current = now
+      }
+    } catch (error) {
+      console.warn('Performance measurement failed:', error)
+    }
+  }, [enablePerformanceMonitoring, performanceThreshold, frameRateTarget, memoryThreshold, cpuThreshold, callbacks, metrics.isThrottling])
+
+  // Automatic throttling
+  const applyPerformanceThrottling = useCallback(() => {
+    if (!enableAutomaticThrottling) return
+
+    setIsOptimizing(true)
+
+    setTimeout(() => {
+      let newThrottleLevel: 'none' | 'light' | 'moderate' | 'aggressive' = 'none'
+      let optimizations: string[] = []
+
+      // Determine throttle level based on performance metrics
+      if (metrics.performanceScore < 50 || metrics.fps < 30) {
+        newThrottleLevel = 'aggressive'
+        optimizations.push('Critical performance: Maximum throttling applied')
+        optimizations.push('All non-essential animations disabled')
+        optimizations.push('Frame rate limited to 30fps')
+        optimizations.push('Memory usage optimized')
+      } else if (metrics.performanceScore < 70 || metrics.fps < 45) {
+        newThrottleLevel = 'moderate'
+        optimizations.push('Performance issue: Moderate throttling applied')
+        optimizations.push('Animation complexity reduced by 50%')
+        optimizations.push('Frame rate limited to 45fps')
+        optimizations.push('Memory optimization enabled')
+      } else if (metrics.performanceScore < 85 || metrics.fps < 55) {
+        newThrottleLevel = 'light'
+        optimizations.push('Performance warning: Light throttling applied')
+        optimizations.push('Animation complexity reduced by 25%')
+        optimizations.push('Frame rate limited to 55fps')
+        optimizations.push('Performance monitoring enhanced')
+      }
+
+      // Battery preservation considerations
+      if (enableBatteryPreservation && newThrottleLevel !== 'none') {
+        optimizations.push('Battery preservation: Animation efficiency optimized')
+        optimizations.push('GPU usage minimized for power efficiency')
+      }
+
+      // User experience optimization
+      if (enableUserExperienceOptimization && newThrottleLevel !== 'none') {
+        optimizations.push('User experience: Smooth performance prioritized')
+        optimizations.push('Animation quality balanced with performance')
+        optimizations.push('Responsive interactions maintained')
+      }
+
+      setThrottleLevel(newThrottleLevel)
+      setOptimizations(prev => [...prev, ...optimizations])
+      setIsOptimizing(false)
+
+      callbacks.onThrottlingApplied?.(newThrottleLevel, metrics.throttleReason)
+
+      optimizations.forEach(optimization => {
+        callbacks.onUserExperienceOptimized?.(optimization)
+      })
+    }, 200)
+  }, [enableAutomaticThrottling, enableBatteryPreservation, enableUserExperienceOptimization, metrics, callbacks])
+
+  // Get throttling recommendations
+  const getThrottlingRecommendations = useCallback(() => {
+    const recommendations = []
+
+    if (metrics.performanceScore < 50) {
+      recommendations.push('Critical: Disable all animations and complex UI operations')
+      recommendations.push('Use static UI elements and minimal interactions')
+      recommendations.push('Implement aggressive memory cleanup')
+    } else if (metrics.performanceScore < 70) {
+      recommendations.push('High: Significantly reduce animation complexity')
+      recommendations.push('Limit concurrent animations to 2-3 maximum')
+      recommendations.push('Use CSS transforms instead of JavaScript animations')
+    } else if (metrics.performanceScore < 85) {
+      recommendations.push('Medium: Consider light performance optimization')
+      recommendations.push('Monitor animation frame rates closely')
+      recommendations.push('Implement animation debouncing')
+    }
+
+    if (metrics.fps < frameRateTarget * 0.8) {
+      recommendations.push('Low FPS: Reduce animation frame rate')
+      recommendations.push('Use requestAnimationFrame for smooth animations')
+      recommendations.push('Implement frame skipping for complex animations')
+    }
+
+    if (metrics.memoryUsage > memoryThreshold) {
+      recommendations.push('High Memory: Optimize memory usage')
+      recommendations.push('Clean up animation references')
+      recommendations.push('Use object pooling for repeated animations')
+    }
+
+    if (metrics.cpuUsage > cpuThreshold) {
+      recommendations.push('High CPU: Reduce computational complexity')
+      recommendations.push('Use CSS animations instead of JavaScript')
+      recommendations.push('Implement animation pausing when not visible')
+    }
+
+    return recommendations
+  }, [metrics, frameRateTarget, memoryThreshold, cpuThreshold])
+
+  // Get optimal performance settings
+  const getOptimalPerformanceSettings = useCallback(() => {
+    const settings = {
+      maxConcurrentAnimations: 5,
+      frameRateLimit: 60,
+      animationQuality: 'high',
+      memoryOptimization: false,
+      cpuOptimization: false
+    }
+
+    switch (throttleLevel) {
+      case 'aggressive':
+        settings.maxConcurrentAnimations = 1
+        settings.frameRateLimit = 30
+        settings.animationQuality = 'minimal'
+        settings.memoryOptimization = true
+        settings.cpuOptimization = true
+        break
+      case 'moderate':
+        settings.maxConcurrentAnimations = 2
+        settings.frameRateLimit = 45
+        settings.animationQuality = 'medium'
+        settings.memoryOptimization = true
+        settings.cpuOptimization = true
+        break
+      case 'light':
+        settings.maxConcurrentAnimations = 3
+        settings.frameRateLimit = 55
+        settings.animationQuality = 'high'
+        settings.memoryOptimization = true
+        settings.cpuOptimization = false
+        break
+      default:
+        settings.maxConcurrentAnimations = 5
+        settings.frameRateLimit = 60
+        settings.animationQuality = 'high'
+        settings.memoryOptimization = false
+        settings.cpuOptimization = false
+    }
+
+    return settings
+  }, [throttleLevel])
+
+  // Reset throttling
+  const resetThrottling = useCallback(() => {
+    setThrottleLevel('none')
+    setOptimizations([])
+    setMetrics(prev => ({
+      ...prev,
+      isThrottling: false,
+      throttleReason: 'none'
+    }))
+  }, [])
+
+  // Initialize performance monitoring
+  useEffect(() => {
+    if (!enablePerformanceMonitoring) return
+
+    try {
+      performanceTimerRef.current = window.setInterval(measurePerformance, 1000)
+
+      return () => {
+        if (performanceTimerRef.current) {
+          clearInterval(performanceTimerRef.current)
+        }
+      }
+    } catch (error) {
+      console.warn('Performance monitoring initialization failed:', error)
+    }
+  }, [enablePerformanceMonitoring, measurePerformance])
+
+  // Apply throttling when performance degrades
+  useEffect(() => {
+    if (enableAutomaticThrottling && metrics.isThrottling) {
+      throttlingTimerRef.current = window.setTimeout(applyPerformanceThrottling, 1000)
+
+      return () => {
+        if (throttlingTimerRef.current) {
+          clearTimeout(throttlingTimerRef.current)
+        }
+      }
+    }
+  }, [enableAutomaticThrottling, metrics.isThrottling, applyPerformanceThrottling])
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (throttlingTimerRef.current) {
+        clearTimeout(throttlingTimerRef.current)
+      }
+    }
+  }, [])
+
+  return {
+    // State
+    metrics,
+    isOptimizing,
+    optimizations,
+    throttleLevel,
+
+    // Actions
+    measurePerformance,
+    applyPerformanceThrottling,
+    resetThrottling,
+
+    // Computed values
+    isThrottling: throttleLevel !== 'none',
+    performanceLevel: metrics.performanceScore >= 90 ? 'excellent' : 
+                     metrics.performanceScore >= 80 ? 'good' : 
+                     metrics.performanceScore >= 70 ? 'fair' : 'poor',
+    needsOptimization: metrics.performanceScore < 70,
+    recommendations: getThrottlingRecommendations(),
+    performanceSettings: getOptimalPerformanceSettings(),
+
+    // Utility functions
+    getPerformanceHealth: () => {
+      if (metrics.performanceScore >= 90) return 'excellent'
+      if (metrics.performanceScore >= 80) return 'good'
+      if (metrics.performanceScore >= 70) return 'fair'
+      if (metrics.performanceScore >= 50) return 'poor'
+      return 'critical'
+    }
+  }
+}
+
+export default usePerformanceThrottling

package/dist/hooks/use-performance-throttling.esm.js

@@ -0,0 +1,324 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+
+export interface PerformanceThrottlingConfig {
+  enablePerformanceMonitoring?}
+
+export interface PerformanceMetrics {
+  fps}
+
+export interface PerformanceThrottlingCallbacks {
+  onPerformanceWarning?) => void
+  onThrottlingApplied?, reason) => void
+  onPerformanceRecovery?) => void
+  onUserExperienceOptimized?) => void
+}
+
+export const usePerformanceThrottling = (
+  config= {},
+  callbacks= {}
+) => {
+  const {
+    enablePerformanceMonitoring = true,
+    enableAutomaticThrottling = true,
+    enableUserExperienceOptimization = true,
+    enableBatteryPreservation = true,
+    performanceThreshold = 70,
+    frameRateTarget = 60,
+    memoryThreshold = 80,
+    cpuThreshold = 80
+  } = config
+
+  const [metrics, setMetrics] = useState<PerformanceMetrics>({
+    fps,
+    frameTime,
+    memoryUsage,
+    cpuUsage,
+    performanceScore,
+    isThrottling,
+    throttleReason})
+
+  const [isOptimizing, setIsOptimizing] = useState(false)
+  const [optimizations, setOptimizations] = useState<string[]>([])
+  const [throttleLevel, setThrottleLevel] = useState<'none' | 'light' | 'moderate' | 'aggressive'>('none')
+  
+  const frameCountRef = useRef(0)
+  const lastFrameTimeRef = useRef(performance.now())
+  const performanceTimerRef = useRef<number | null>(null)
+  const throttlingTimerRef = useRef<number | null>(null)
+
+  // Performance monitoring
+  const measurePerformance = useCallback(() => {
+    if (!enablePerformanceMonitoring) return
+
+    try {
+      const now = performance.now()
+      frameCountRef.current++
+      
+      if (now - lastFrameTimeRef.current >= 1000) {
+        const fps = Math.round((frameCountRef.current * 1000) / (now - lastFrameTimeRef.current))
+        const frameTime = 1000 / fps
+        
+        // Simulate memory and CPU usage
+        const memoryUsage = Math.random() * 100
+        const cpuUsage = Math.random() * 100
+        
+        // Calculate performance score
+        const fpsScore = Math.min((fps / frameRateTarget) * 100, 100)
+        const timeScore = Math.max(100 - (frameTime - 16.67) * 10, 0)
+        const memoryScore = Math.max(100 - memoryUsage, 0)
+        const cpuScore = Math.max(100 - cpuUsage, 0)
+        
+        const performanceScore = Math.round((fpsScore + timeScore + memoryScore + cpuScore) / 4)
+        
+        // Determine if throttling is needed
+        const isThrottling = performanceScore < performanceThreshold || 
+                           fps < frameRateTarget * 0.8 || 
+                           memoryUsage > memoryThreshold || 
+                           cpuUsage > cpuThreshold
+        
+        let throttleReason = 'none'
+        if (performanceScore < performanceThreshold) throttleReason = 'low_performance'
+        else if (fps < frameRateTarget * 0.8) throttleReason = 'low_fps'
+        else if (memoryUsage > memoryThreshold) throttleReason = 'high_memory'
+        else if (cpuUsage > cpuThreshold) throttleReason = 'high_cpu'
+        
+        const newMetrics= {
+          fps,
+          frameTime,
+          memoryUsage,
+          cpuUsage,
+          performanceScore,
+          isThrottling,
+          throttleReason
+        }
+        
+        setMetrics(newMetrics)
+        
+        // Trigger callbacks
+        if (isThrottling) {
+          callbacks.onPerformanceWarning?.(newMetrics)
+        } else if (metrics.isThrottling) {
+          callbacks.onPerformanceRecovery?.(newMetrics)
+        }
+        
+        frameCountRef.current = 0
+        lastFrameTimeRef.current = now
+      }
+    } catch (error) {
+      console.warn('Performance measurement failed, error)
+    }
+  }, [enablePerformanceMonitoring, performanceThreshold, frameRateTarget, memoryThreshold, cpuThreshold, callbacks, metrics.isThrottling])
+
+  // Automatic throttling
+  const applyPerformanceThrottling = useCallback(() => {
+    if (!enableAutomaticThrottling) return
+
+    setIsOptimizing(true)
+    
+    setTimeout(() => {
+      let newThrottleLevel= 'none'
+      let optimizations] = []
+      
+      // Determine throttle level based on performance metrics
+      if (metrics.performanceScore < 50 || metrics.fps < 30) {
+        newThrottleLevel = 'aggressive'
+        optimizations.push('Critical performance)
+        optimizations.push('All non-essential animations disabled')
+        optimizations.push('Frame rate limited to 30fps')
+        optimizations.push('Memory usage optimized')
+      } else if (metrics.performanceScore < 70 || metrics.fps < 45) {
+        newThrottleLevel = 'moderate'
+        optimizations.push('Performance issue)
+        optimizations.push('Animation complexity reduced by 50%')
+        optimizations.push('Frame rate limited to 45fps')
+        optimizations.push('Memory optimization enabled')
+      } else if (metrics.performanceScore < 85 || metrics.fps < 55) {
+        newThrottleLevel = 'light'
+        optimizations.push('Performance warning)
+        optimizations.push('Animation complexity reduced by 25%')
+        optimizations.push('Frame rate limited to 55fps')
+        optimizations.push('Performance monitoring enhanced')
+      }
+      
+      // Battery preservation considerations
+      if (enableBatteryPreservation && newThrottleLevel !== 'none') {
+        optimizations.push('Battery preservation)
+        optimizations.push('GPU usage minimized for power efficiency')
+      }
+      
+      // User experience optimization
+      if (enableUserExperienceOptimization && newThrottleLevel !== 'none') {
+        optimizations.push('User experience)
+        optimizations.push('Animation quality balanced with performance')
+        optimizations.push('Responsive interactions maintained')
+      }
+      
+      setThrottleLevel(newThrottleLevel)
+      setOptimizations(prev => [...prev, ...optimizations])
+      setIsOptimizing(false)
+      
+      callbacks.onThrottlingApplied?.(newThrottleLevel, metrics.throttleReason)
+      
+      optimizations.forEach(optimization => {
+        callbacks.onUserExperienceOptimized?.(optimization)
+      })
+    }, 200)
+  }, [enableAutomaticThrottling, enableBatteryPreservation, enableUserExperienceOptimization, metrics, callbacks])
+
+  // Get throttling recommendations
+  const getThrottlingRecommendations = useCallback(() => {
+    const recommendations = []
+    
+    if (metrics.performanceScore < 50) {
+      recommendations.push('Critical)
+      recommendations.push('Use static UI elements and minimal interactions')
+      recommendations.push('Implement aggressive memory cleanup')
+    } else if (metrics.performanceScore < 70) {
+      recommendations.push('High)
+      recommendations.push('Limit concurrent animations to 2-3 maximum')
+      recommendations.push('Use CSS transforms instead of JavaScript animations')
+    } else if (metrics.performanceScore < 85) {
+      recommendations.push('Medium)
+      recommendations.push('Monitor animation frame rates closely')
+      recommendations.push('Implement animation debouncing')
+    }
+    
+    if (metrics.fps < frameRateTarget * 0.8) {
+      recommendations.push('Low FPS)
+      recommendations.push('Use requestAnimationFrame for smooth animations')
+      recommendations.push('Implement frame skipping for complex animations')
+    }
+    
+    if (metrics.memoryUsage > memoryThreshold) {
+      recommendations.push('High Memory)
+      recommendations.push('Clean up animation references')
+      recommendations.push('Use object pooling for repeated animations')
+    }
+    
+    if (metrics.cpuUsage > cpuThreshold) {
+      recommendations.push('High CPU)
+      recommendations.push('Use CSS animations instead of JavaScript')
+      recommendations.push('Implement animation pausing when not visible')
+    }
+    
+    return recommendations
+  }, [metrics, frameRateTarget, memoryThreshold, cpuThreshold])
+
+  // Get optimal performance settings
+  const getOptimalPerformanceSettings = useCallback(() => {
+    const settings = {
+      maxConcurrentAnimations,
+      frameRateLimit,
+      animationQuality,
+      memoryOptimization,
+      cpuOptimization}
+    
+    switch (throttleLevel) {
+      case 'aggressive'= 1
+        settings.frameRateLimit = 30
+        settings.animationQuality = 'minimal'
+        settings.memoryOptimization = true
+        settings.cpuOptimization = true
+        break
+      case 'moderate'= 2
+        settings.frameRateLimit = 45
+        settings.animationQuality = 'medium'
+        settings.memoryOptimization = true
+        settings.cpuOptimization = true
+        break
+      case 'light'= 3
+        settings.frameRateLimit = 55
+        settings.animationQuality = 'high'
+        settings.memoryOptimization = true
+        settings.cpuOptimization = false
+        break
+      default= 5
+        settings.frameRateLimit = 60
+        settings.animationQuality = 'high'
+        settings.memoryOptimization = false
+        settings.cpuOptimization = false
+    }
+    
+    return settings
+  }, [throttleLevel])
+
+  // Reset throttling
+  const resetThrottling = useCallback(() => {
+    setThrottleLevel('none')
+    setOptimizations([])
+    setMetrics(prev => ({
+      ...prev,
+      isThrottling,
+      throttleReason}))
+  }, [])
+
+  // Initialize performance monitoring
+  useEffect(() => {
+    if (!enablePerformanceMonitoring) return
+
+    try {
+      performanceTimerRef.current = window.setInterval(measurePerformance, 1000)
+      
+      return () => {
+        if (performanceTimerRef.current) {
+          clearInterval(performanceTimerRef.current)
+        }
+      }
+    } catch (error) {
+      console.warn('Performance monitoring initialization failed, error)
+    }
+  }, [enablePerformanceMonitoring, measurePerformance])
+
+  // Apply throttling when performance degrades
+  useEffect(() => {
+    if (enableAutomaticThrottling && metrics.isThrottling) {
+      throttlingTimerRef.current = window.setTimeout(applyPerformanceThrottling, 1000)
+      
+      return () => {
+        if (throttlingTimerRef.current) {
+          clearTimeout(throttlingTimerRef.current)
+        }
+      }
+    }
+  }, [enableAutomaticThrottling, metrics.isThrottling, applyPerformanceThrottling])
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (throttlingTimerRef.current) {
+        clearTimeout(throttlingTimerRef.current)
+      }
+    }
+  }, [])
+
+  return {
+    // State
+    metrics,
+    isOptimizing,
+    optimizations,
+    throttleLevel,
+    
+    // Actions
+    measurePerformance,
+    applyPerformanceThrottling,
+    resetThrottling,
+    
+    // Computed values
+    isThrottling== 'none',
+    performanceLevel= 90 ? 'excellent' = 80 ? 'good' = 70 ? 'fair' ,
+    needsOptimization,
+    recommendations),
+    performanceSettings),
+    
+    // Utility functions
+    getPerformanceHealth) => {
+      if (metrics.performanceScore >= 90) return 'excellent'
+      if (metrics.performanceScore >= 80) return 'good'
+      if (metrics.performanceScore >= 70) return 'fair'
+      if (metrics.performanceScore >= 50) return 'poor'
+      return 'critical'
+    }
+  }
+}
+
+export default usePerformanceThrottling