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

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

@@ -1,21 +1,36 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
 
 export interface PerformanceThrottlingConfig {
-  enablePerformanceMonitoring?}
+  enablePerformanceMonitoring?: boolean
+  enableAutomaticThrottling?: boolean
+  enableUserExperienceOptimization?: boolean
+  enableBatteryPreservation?: boolean
+  performanceThreshold?: number
+  frameRateTarget?: number
+  memoryThreshold?: number
+  cpuThreshold?: number
+}
 
 export interface PerformanceMetrics {
-  fps}
+  fps: number
+  frameTime: number
+  memoryUsage: number
+  cpuUsage: number
+  performanceScore: number
+  isThrottling: boolean
+  throttleReason: string
+}
 
 export interface PerformanceThrottlingCallbacks {
-  onPerformanceWarning?) => void
-  onThrottlingApplied?, reason) => void
-  onPerformanceRecovery?) => void
-  onUserExperienceOptimized?) => void
+  onPerformanceWarning?: (metrics: PerformanceMetrics) => void
+  onThrottlingApplied?: (level: string, reason: string) => void
+  onPerformanceRecovery?: (metrics: PerformanceMetrics) => void
+  onUserExperienceOptimized?: (optimization: string) => void
 }
 
 export const usePerformanceThrottling = (
-  config= {},
-  callbacks= {}
+  config: PerformanceThrottlingConfig = {},
+  callbacks: PerformanceThrottlingCallbacks = {}
 ) => {
   const {
     enablePerformanceMonitoring = true,
@@ -29,13 +44,14 @@ export const usePerformanceThrottling = (
   } = config
 
   const [metrics, setMetrics] = useState<PerformanceMetrics>({
-    fps,
-    frameTime,
-    memoryUsage,
-    cpuUsage,
-    performanceScore,
-    isThrottling,
-    throttleReason})
+    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[]>([])
@@ -82,7 +98,7 @@ export const usePerformanceThrottling = (
         else if (memoryUsage > memoryThreshold) throttleReason = 'high_memory'
         else if (cpuUsage > cpuThreshold) throttleReason = 'high_cpu'
         
-        const newMetrics= {
+        const newMetrics: PerformanceMetrics = {
           fps,
           frameTime,
           memoryUsage,
@@ -105,7 +121,7 @@ export const usePerformanceThrottling = (
         lastFrameTimeRef.current = now
       }
     } catch (error) {
-      console.warn('Performance measurement failed, error)
+      console.warn('Performance measurement failed:', error)
     }
   }, [enablePerformanceMonitoring, performanceThreshold, frameRateTarget, memoryThreshold, cpuThreshold, callbacks, metrics.isThrottling])
 
@@ -116,25 +132,25 @@ export const usePerformanceThrottling = (
     setIsOptimizing(true)
     
     setTimeout(() => {
-      let newThrottleLevel= 'none'
-      let optimizations] = []
+      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)
+        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)
+        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)
+        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')
@@ -142,13 +158,13 @@ export const usePerformanceThrottling = (
       
       // Battery preservation considerations
       if (enableBatteryPreservation && newThrottleLevel !== 'none') {
-        optimizations.push('Battery preservation)
+        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)
+        optimizations.push('User experience: Smooth performance prioritized')
         optimizations.push('Animation quality balanced with performance')
         optimizations.push('Responsive interactions maintained')
       }
@@ -170,33 +186,33 @@ export const usePerformanceThrottling = (
     const recommendations = []
     
     if (metrics.performanceScore < 50) {
-      recommendations.push('Critical)
+      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)
+      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)
+      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)
+      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)
+      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)
+      recommendations.push('High CPU: Reduce computational complexity')
       recommendations.push('Use CSS animations instead of JavaScript')
       recommendations.push('Implement animation pausing when not visible')
     }
@@ -207,32 +223,37 @@ export const usePerformanceThrottling = (
   // Get optimal performance settings
   const getOptimalPerformanceSettings = useCallback(() => {
     const settings = {
-      maxConcurrentAnimations,
-      frameRateLimit,
-      animationQuality,
-      memoryOptimization,
-      cpuOptimization}
+      maxConcurrentAnimations: 5,
+      frameRateLimit: 60,
+      animationQuality: 'high',
+      memoryOptimization: false,
+      cpuOptimization: false
+    }
     
     switch (throttleLevel) {
-      case 'aggressive'= 1
+      case 'aggressive':
+        settings.maxConcurrentAnimations = 1
         settings.frameRateLimit = 30
         settings.animationQuality = 'minimal'
         settings.memoryOptimization = true
         settings.cpuOptimization = true
         break
-      case 'moderate'= 2
+      case 'moderate':
+        settings.maxConcurrentAnimations = 2
         settings.frameRateLimit = 45
         settings.animationQuality = 'medium'
         settings.memoryOptimization = true
         settings.cpuOptimization = true
         break
-      case 'light'= 3
+      case 'light':
+        settings.maxConcurrentAnimations = 3
         settings.frameRateLimit = 55
         settings.animationQuality = 'high'
         settings.memoryOptimization = true
         settings.cpuOptimization = false
         break
-      default= 5
+      default:
+        settings.maxConcurrentAnimations = 5
         settings.frameRateLimit = 60
         settings.animationQuality = 'high'
         settings.memoryOptimization = false
@@ -248,8 +269,9 @@ export const usePerformanceThrottling = (
     setOptimizations([])
     setMetrics(prev => ({
       ...prev,
-      isThrottling,
-      throttleReason}))
+      isThrottling: false,
+      throttleReason: 'none'
+    }))
   }, [])
 
   // Initialize performance monitoring
@@ -265,7 +287,7 @@ export const usePerformanceThrottling = (
         }
       }
     } catch (error) {
-      console.warn('Performance monitoring initialization failed, error)
+      console.warn('Performance monitoring initialization failed:', error)
     }
   }, [enablePerformanceMonitoring, measurePerformance])
 
@@ -304,14 +326,16 @@ export const usePerformanceThrottling = (
     resetThrottling,
     
     // Computed values
-    isThrottling== 'none',
-    performanceLevel= 90 ? 'excellent' = 80 ? 'good' = 70 ? 'fair' ,
-    needsOptimization,
-    recommendations),
-    performanceSettings),
+    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) => {
+    getPerformanceHealth: () => {
       if (metrics.performanceScore >= 90) return 'excellent'
       if (metrics.performanceScore >= 80) return 'good'
       if (metrics.performanceScore >= 70) return 'fair'

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

@@ -1,35 +1,66 @@
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
 
 export interface PerformanceMetrics {
-  fps}
+  fps: number
+  frameTime: number
+  memoryUsage?: number
+  memoryLimit?: number
+  memoryPercentage?: number
+  batteryLevel?: number
+  isLowPowerMode?: boolean
+  isCharging?: boolean
+  performanceMode: 'high' | 'medium' | 'low'
+  throttlingEnabled: boolean
+  throttlingReason?: string
+}
 
 export interface PerformanceThresholds {
-  fps}
-  memory}
-  battery}
+  fps: {
+    warning: number
+    critical: number
+  }
+  memory: {
+    warning: number
+    critical: number
+  }
+  battery: {
+    low: number
+    critical: number
+  }
 }
 
 export interface PerformanceCallbacks {
-  onFPSWarning?) => void
-  onMemoryWarning?) => void
-  onBatteryLow?) => void
-  onPerformanceModeChange?]) => void
-  onThrottlingChange?, reason?) => void
+  onFPSWarning?: (fps: number) => void
+  onMemoryWarning?: (usage: number) => void
+  onBatteryLow?: (level: number) => void
+  onPerformanceModeChange?: (mode: PerformanceMetrics['performanceMode']) => void
+  onThrottlingChange?: (enabled: boolean, reason?: string) => void
 }
 
 export interface PerformanceOptions {
-  updateInterval?}
+  updateInterval?: number
+  thresholds?: Partial<PerformanceThresholds>
+  enableThrottling?: boolean
+  enableBatteryOptimization?: boolean
+  callbacks?: PerformanceCallbacks
+}
 
-const DEFAULT_THRESHOLDS= {
-  fps,
-    critical},
-  memory,
-    critical},
-  battery,
-    critical}
+const DEFAULT_THRESHOLDS: PerformanceThresholds = {
+  fps: {
+    warning: 45,
+    critical: 30
+  },
+  memory: {
+    warning: 0.7,
+    critical: 0.85
+  },
+  battery: {
+    low: 0.3,
+    critical: 0.15
+  }
 }
 
-export const usePerformance = (options= {}) => {
+export const usePerformance = (options: PerformanceOptions = {}) => {
   const {
     updateInterval = 1000,
     thresholds = {},
@@ -39,10 +70,11 @@ export const usePerformance = (options= {}) => {
   } = options
 
   const [metrics, setMetrics] = useState<PerformanceMetrics>({
-    fps,
-    frameTime,
-    performanceMode,
-    throttlingEnabled})
+    fps: 60,
+    frameTime: 16.67,
+    performanceMode: 'high',
+    throttlingEnabled: false
+  })
 
   const [isMonitoring, setIsMonitoring] = useState(false)
   const frameCountRef = useRef(0)
@@ -92,8 +124,9 @@ export const usePerformance = (options= {}) => {
       setMetrics(prev => ({
         ...prev,
         memoryUsage,
-        memoryLimit,
-        memoryPercentage}))
+        memoryLimit: memory.jsHeapSizeLimit,
+        memoryPercentage: memoryUsage * 100
+      }))
 
       // Check memory thresholds
       if (memoryUsage >= finalThresholds.memory.critical && callbacks.onMemoryWarning) {
@@ -110,22 +143,23 @@ export const usePerformance = (options= {}) => {
         
         setMetrics(prev => ({
           ...prev,
-          batteryLevel,
-          isLowPowerMode,
-          isCharging}))
+          batteryLevel: battery.level,
+          isLowPowerMode: battery.level < finalThresholds.battery.low,
+          isCharging: battery.charging
+        }))
 
         // Check battery thresholds
         if (battery.level <= finalThresholds.battery.critical && callbacks.onBatteryLow) {
           callbacks.onBatteryLow(battery.level)
         }
       } catch (error) {
-        console.warn('Battery API not available, error)
+        console.warn('Battery API not available:', error)
       }
     }
   }, [finalThresholds.battery.low, finalThresholds.battery.critical, callbacks.onBatteryLow])
 
   // Performance mode determination
-  const determinePerformanceMode = useCallback((fps, memoryUsage?)] => {
+  const determinePerformanceMode = useCallback((fps: number, memoryUsage?: number): PerformanceMetrics['performanceMode'] => {
     if (fps < finalThresholds.fps.critical || (memoryUsage && memoryUsage > finalThresholds.memory.critical)) {
       return 'low'
     }
@@ -136,37 +170,38 @@ export const usePerformance = (options= {}) => {
   }, [finalThresholds])
 
   // Performance throttling logic
-  const shouldThrottle = useCallback((); reason?} => {
+  const shouldThrottle = useCallback((): { should: boolean; reason?: string } => {
     const { fps, memoryPercentage, batteryLevel, isLowPowerMode } = metrics
     
     // FPS-based throttling
     if (fps < finalThresholds.fps.critical) {
-      return { should, reason}
+      return { should: true, reason: 'Low FPS' }
     }
     
     // Memory-based throttling
     if (memoryPercentage && memoryPercentage > finalThresholds.memory.critical * 100) {
-      return { should, reason}
+      return { should: true, reason: 'High memory usage' }
     }
     
     // Battery-based throttling
     if (enableBatteryOptimization && (isLowPowerMode || (batteryLevel && batteryLevel < finalThresholds.battery.low))) {
-      return { should, reason}
+      return { should: true, reason: 'Low battery' }
     }
     
-    return { should}
+    return { should: false }
   }, [metrics, finalThresholds, enableBatteryOptimization])
 
   // Update performance mode and throttling
   useEffect(() => {
     const newMode = determinePerformanceMode(metrics.fps, metrics.memoryUsage)
-    const { should, reason } = shouldThrottle()
+    const { should: shouldThrottleNow, reason } = shouldThrottle()
     
     setMetrics(prev => ({
       ...prev,
-      performanceMode,
-      throttlingEnabled,
-      throttlingReason}))
+      performanceMode: newMode,
+      throttlingEnabled: enableThrottling && shouldThrottleNow,
+      throttlingReason: reason
+    }))
 
     // Notify callbacks
     if (newMode !== metrics.performanceMode && callbacks.onPerformanceModeChange) {
@@ -213,7 +248,7 @@ export const usePerformance = (options= {}) => {
 
   // Performance optimization recommendations
   const getOptimizationRecommendations = useCallback(() => {
-    const recommendations] = []
+    const recommendations: string[] = []
     
     if (metrics.fps < finalThresholds.fps.warning) {
       recommendations.push('Consider reducing animation complexity or enabling performance mode')
@@ -234,15 +269,17 @@ export const usePerformance = (options= {}) => {
   const enableThrottlingMode = useCallback(() => {
     setMetrics(prev => ({
       ...prev,
-      throttlingEnabled,
-      throttlingReason}))
+      throttlingEnabled: true,
+      throttlingReason: 'Manual override'
+    }))
   }, [])
 
   const disableThrottlingMode = useCallback(() => {
     setMetrics(prev => ({
       ...prev,
-      throttlingEnabled,
-      throttlingReason}))
+      throttlingEnabled: false,
+      throttlingReason: undefined
+    }))
   }, [])
 
   return {
@@ -255,24 +292,25 @@ export const usePerformance = (options= {}) => {
     isMonitoring,
     
     // Throttling
-    throttlingEnabled,
-    throttlingReason,
+    throttlingEnabled: metrics.throttlingEnabled,
+    throttlingReason: metrics.throttlingReason,
     enableThrottlingMode,
     disableThrottlingMode,
     
     // Performance mode
-    performanceMode,
+    performanceMode: metrics.performanceMode,
     
     // Recommendations
     getOptimizationRecommendations,
     
     // Thresholds
-    thresholds,
+    thresholds: finalThresholds,
     
     // Raw values for advanced usage
-    fps,
-    frameTime,
-    memoryUsage,
-    batteryLevel,
-    isLowPowerMode}
+    fps: metrics.fps,
+    frameTime: metrics.frameTime,
+    memoryUsage: metrics.memoryUsage,
+    batteryLevel: metrics.batteryLevel,
+    isLowPowerMode: metrics.isLowPowerMode
+  }
 }