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

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

@@ -1,52 +1,73 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
 
 export interface PerformanceConfig {
-  enableValidationThrottling}
+  enableValidationThrottling: boolean
+  enableTouchEventOptimization: boolean
+  enableMemoryManagement: boolean
+  enableBatteryOptimization: boolean
+  validationThrottleDelay: number
+  touchEventThrottleDelay: number
+  memoryCleanupInterval: number
+  performanceMonitoringInterval: number
+}
 
 export interface PerformanceCallbacks {
-  onPerformanceWarning?, metrics) => void
-  onMemoryWarning?, threshold) => void
-  onBatteryWarning?, isLow) => void
-  onOptimizationApplied?, success) => void
+  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}
+  validationCount: number
+  touchEventCount: number
+  memoryUsage: number
+  batteryLevel: number
+  isLowPowerMode: boolean
+  averageResponseTime: number
+  lastOptimization: number
+  optimizationScore: number
+}
 
 export interface FormPerformanceState {
-  isOptimized]
-  performanceMetrics]
-  lastUpdate}
+  isOptimized: boolean
+  currentOptimizations: string[]
+  performanceMetrics: PerformanceMetrics
+  warnings: string[]
+  lastUpdate: number
+}
 
 export const useFormPerformance = (
-  callbacks= {},
-  config= {}
+  callbacks: PerformanceCallbacks = {},
+  config: Partial<PerformanceConfig> = {}
 ) => {
-  const defaultConfig= {
-    enableValidationThrottling,
-    enableTouchEventOptimization,
-    enableMemoryManagement,
-    enableBatteryOptimization,
-    validationThrottleDelay,
-    touchEventThrottleDelay, // ~60fps
-    memoryCleanupInterval, // 30 seconds
-    performanceMonitoringInterval, // 5 seconds
+  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,
-    currentOptimizations],
-    performanceMetrics,
-      touchEventCount,
-      memoryUsage,
-      batteryLevel,
-      isLowPowerMode,
-      averageResponseTime,
-      lastOptimization,
-      optimizationScore},
-    warnings],
-    lastUpdate)
+    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)
@@ -67,16 +88,18 @@ export const useFormPerformance = (
 
       setPerformanceState(prev => ({
         ...prev,
-        performanceMetrics,
-          batteryLevel,
-          isLowPowerMode}
+        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)
+      console.warn('Battery API not supported:', error)
     }
   }, [defaultConfig.enableBatteryOptimization, callbacks])
 
@@ -90,8 +113,10 @@ export const useFormPerformance = (
 
       setPerformanceState(prev => ({
         ...prev,
-        performanceMetrics,
-          memoryUsage}
+        performanceMetrics: {
+          ...prev.performanceMetrics,
+          memoryUsage: usage
+        }
       }))
 
       if (usage > 0.8) {
@@ -99,7 +124,7 @@ export const useFormPerformance = (
         triggerMemoryCleanup()
       }
     } catch (error) {
-      console.warn('Memory API not supported, error)
+      console.warn('Memory API not supported:', error)
     }
   }, [defaultConfig.enableMemoryManagement, callbacks])
 
@@ -126,21 +151,22 @@ export const useFormPerformance = (
 
       setPerformanceState(prev => ({
         ...prev,
-        currentOptimizations, 'memory-cleanup'],
-        lastUpdate)
+        currentOptimizations: [...prev.currentOptimizations, 'memory-cleanup'],
+        lastUpdate: Date.now()
       }))
 
       callbacks.onOptimizationApplied?.('memory-cleanup', true)
     } catch (error) {
-      console.warn('Memory cleanup failed, error)
+      console.warn('Memory cleanup failed:', error)
       callbacks.onOptimizationApplied?.('memory-cleanup', false)
     }
   }, [defaultConfig.enableMemoryManagement, callbacks])
 
   // Validation throttling
   const throttledValidation = useCallback((
-    validationFunction) => void,
-    delay?) => {
+    validationFunction: () => void,
+    delay?: number
+  ) => {
     if (!defaultConfig.enableValidationThrottling) {
       validationFunction()
       return
@@ -160,9 +186,10 @@ export const useFormPerformance = (
 
       setPerformanceState(prev => ({
         ...prev,
-        performanceMetrics,
-          validationCount,
-          averageResponseTime) / (prev.performanceMetrics.validationCount + 1)
+        performanceMetrics: {
+          ...prev.performanceMetrics,
+          validationCount: prev.performanceMetrics.validationCount + 1,
+          averageResponseTime: (prev.performanceMetrics.averageResponseTime * prev.performanceMetrics.validationCount + responseTime) / (prev.performanceMetrics.validationCount + 1)
         }
       }))
     }, throttleDelay)
@@ -170,8 +197,9 @@ export const useFormPerformance = (
 
   // Touch event optimization
   const optimizedTouchEvent = useCallback((
-    touchFunction) => void,
-    delay?) => {
+    touchFunction: () => void,
+    delay?: number
+  ) => {
     if (!defaultConfig.enableTouchEventOptimization) {
       touchFunction()
       return
@@ -188,14 +216,16 @@ export const useFormPerformance = (
       
       setPerformanceState(prev => ({
         ...prev,
-        performanceMetrics,
-          touchEventCount}
+        performanceMetrics: {
+          ...prev.performanceMetrics,
+          touchEventCount: prev.performanceMetrics.touchEventCount + 1
+        }
       }))
     }, throttleDelay)
   }, [defaultConfig.enableTouchEventOptimization, defaultConfig.touchEventThrottleDelay])
 
   // Calculate performance score
-  const calculatePerformanceScore = useCallback(()=> {
+  const calculatePerformanceScore = useCallback((): number => {
     const { performanceMetrics } = performanceState
     let score = 0
 
@@ -238,7 +268,7 @@ export const useFormPerformance = (
 
   // Apply performance optimizations
   const applyOptimizations = useCallback(() => {
-    const optimizations] = []
+    const optimizations: string[] = []
     let success = true
 
     try {
@@ -276,17 +306,18 @@ export const useFormPerformance = (
       setPerformanceState(prev => ({
         ...prev,
         isOptimized,
-        currentOptimizations,
-        performanceMetrics,
+        currentOptimizations: optimizations,
+        performanceMetrics: {
+          ...prev.performanceMetrics,
           optimizationScore,
-          lastOptimization)
+          lastOptimization: Date.now()
         },
-        lastUpdate)
+        lastUpdate: Date.now()
       }))
 
       callbacks.onOptimizationApplied?.('performance', success)
     } catch (error) {
-      console.error('Performance optimization failed, error)
+      console.error('Performance optimization failed:', error)
       success = false
       callbacks.onOptimizationApplied?.('performance', false)
     }
@@ -309,10 +340,10 @@ export const useFormPerformance = (
 
       const score = calculatePerformanceScore()
       if (score < 0.5) {
-        const warning = `Performance score is low).toFixed(1)}%`
+        const warning = `Performance score is low: ${(score * 100).toFixed(1)}%`
         setPerformanceState(prev => ({
           ...prev,
-          warnings, warning]
+          warnings: [...prev.warnings, warning]
         }))
         callbacks.onPerformanceWarning?.(warning, performanceState.performanceMetrics)
       }
@@ -337,18 +368,20 @@ export const useFormPerformance = (
   // Reset performance state
   const resetPerformance = useCallback(() => {
     setPerformanceState({
-      isOptimized,
-      currentOptimizations],
-      performanceMetrics,
-        touchEventCount,
-        memoryUsage,
-        batteryLevel,
-        isLowPowerMode,
-        averageResponseTime,
-        lastOptimization,
-        optimizationScore},
-      warnings],
-      lastUpdate)
+      isOptimized: false,
+      currentOptimizations: [],
+      performanceMetrics: {
+        validationCount: 0,
+        touchEventCount: 0,
+        memoryUsage: 0,
+        batteryLevel: 1,
+        isLowPowerMode: false,
+        averageResponseTime: 0,
+        lastOptimization: 0,
+        optimizationScore: 0
+      },
+      warnings: [],
+      lastUpdate: Date.now()
     })
   }, [])
 
@@ -357,17 +390,17 @@ export const useFormPerformance = (
     const { performanceMetrics, currentOptimizations, warnings } = performanceState
     
     return {
-      metrics,
-      optimizations,
+      metrics: performanceMetrics,
+      optimizations: currentOptimizations,
       warnings,
-      recommendations)
+      recommendations: getPerformanceRecommendations()
     }
   }, [performanceState])
 
   // Get performance recommendations
   const getPerformanceRecommendations = useCallback(() => {
     const { performanceMetrics } = performanceState
-    const recommendations] = []
+    const recommendations: string[] = []
 
     if (performanceMetrics.averageResponseTime > 200) {
       recommendations.push('Consider increasing validation throttle delay')
@@ -454,25 +487,27 @@ export const useFormPerformance = (
 // Convenience hook for basic performance optimization
 export const useBasicFormPerformance = () => {
   return useFormPerformance({}, {
-    enableValidationThrottling,
-    enableTouchEventOptimization,
-    enableMemoryManagement,
-    enableBatteryOptimization,
-    validationThrottleDelay,
-    touchEventThrottleDelay,
-    memoryCleanupInterval,
-    performanceMonitoringInterval})
+    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,
-    enableTouchEventOptimization,
-    enableMemoryManagement,
-    enableBatteryOptimization,
-    validationThrottleDelay,
-    touchEventThrottleDelay,
-    memoryCleanupInterval,
-    performanceMonitoringInterval})
+    enableValidationThrottling: true,
+    enableTouchEventOptimization: true,
+    enableMemoryManagement: true,
+    enableBatteryOptimization: true,
+    validationThrottleDelay: 300,
+    touchEventThrottleDelay: 16,
+    memoryCleanupInterval: 30000,
+    performanceMonitoringInterval: 5000
+  })
 }

package/dist/hooks/use-frame-rate.esm.js

@@ -1,28 +1,44 @@
 import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
 
 export interface FrameRateMetrics {
-  fps}
+  fps: number
+  frameTime: number
+  frameCount: number
+  averageFPS: number
+  minFPS: number
+  maxFPS: number
+  droppedFrames: number
+  performanceScore: 'excellent' | 'good' | 'fair' | 'poor'
+}
 
 export interface FrameRateThresholds {
-  warning}
+  warning: number
+  critical: number
+  excellent: number
+}
 
 export interface FrameRateCallbacks {
-  onFPSWarning?) => void
-  onFPSDrop?, previousFPS) => void
-  onPerformanceScoreChange?]) => void
+  onFPSWarning?: (fps: number) => void
+  onFPSDrop?: (fps: number, previousFPS: number) => void
+  onPerformanceScoreChange?: (score: FrameRateMetrics['performanceScore']) => void
 }
 
 export interface FrameRateOptions {
-  updateInterval?}
+  updateInterval?: number
+  sampleSize?: number
+  thresholds?: Partial<FrameRateThresholds>
+  callbacks?: FrameRateCallbacks
+}
 
-const DEFAULT_THRESHOLDS= {
-  warning,
-  critical,
-  excellent}
+const DEFAULT_THRESHOLDS: FrameRateThresholds = {
+  warning: 45,
+  critical: 30,
+  excellent: 55
+}
 
 const DEFAULT_SAMPLE_SIZE = 60 // 1 second at 60fps
 
-export const useFrameRate = (options= {}) => {
+export const useFrameRate = (options: FrameRateOptions = {}) => {
   const {
     updateInterval = 1000,
     sampleSize = DEFAULT_SAMPLE_SIZE,
@@ -31,14 +47,15 @@ export const useFrameRate = (options= {}) => {
   } = options
 
   const [metrics, setMetrics] = useState<FrameRateMetrics>({
-    fps,
-    frameTime,
-    frameCount,
-    averageFPS,
-    minFPS,
-    maxFPS,
-    droppedFrames,
-    performanceScore})
+    fps: 60,
+    frameTime: 16.67,
+    frameCount: 0,
+    averageFPS: 60,
+    minFPS: 60,
+    maxFPS: 60,
+    droppedFrames: 0,
+    performanceScore: 'excellent'
+  })
 
   const [isMonitoring, setIsMonitoring] = useState(false)
   const frameCountRef = useRef(0)
@@ -55,7 +72,7 @@ export const useFrameRate = (options= {}) => {
   }), [thresholds])
 
   // Calculate performance score based on FPS
-  const calculatePerformanceScore = useCallback((fps)] => {
+  const calculatePerformanceScore = useCallback((fps: number): FrameRateMetrics['performanceScore'] => {
     if (fps >= finalThresholds.excellent) return 'excellent'
     if (fps >= finalThresholds.warning) return 'good'
     if (fps >= finalThresholds.critical) return 'fair'
@@ -63,7 +80,7 @@ export const useFrameRate = (options= {}) => {
   }, [finalThresholds])
 
   // Update FPS history and calculate statistics
-  const updateFPSHistory = useCallback((fps) => {
+  const updateFPSHistory = useCallback((fps: number) => {
     fpsHistoryRef.current.push(fps)
     
     // Keep only the last sampleSize frames
@@ -82,7 +99,7 @@ export const useFrameRate = (options= {}) => {
   }, [sampleSize])
 
   // Detect dropped frames
-  const detectDroppedFrames = useCallback((fps, previousFPS) => {
+  const detectDroppedFrames = useCallback((fps: number, previousFPS: number) => {
     if (fps < previousFPS && previousFPS >= finalThresholds.warning) {
       const drop = previousFPS - fps
       if (drop > 10) { // Significant drop
@@ -110,10 +127,10 @@ export const useFrameRate = (options= {}) => {
       // Calculate performance score
       const performanceScore = calculatePerformanceScore(fps)
       
-      const newMetrics= {
+      const newMetrics: FrameRateMetrics = {
         fps,
         frameTime,
-        frameCount,
+        frameCount: frameCountRef.current,
         averageFPS,
         minFPS,
         maxFPS,
@@ -172,10 +189,11 @@ export const useFrameRate = (options= {}) => {
     fpsHistoryRef.current = []
     setMetrics(prev => ({
       ...prev,
-      averageFPS,
-      minFPS,
-      maxFPS,
-      droppedFrames}))
+      averageFPS: 60,
+      minFPS: 60,
+      maxFPS: 60,
+      droppedFrames: 0
+    }))
   }, [])
 
   // Auto-start monitoring on mount
@@ -186,7 +204,7 @@ export const useFrameRate = (options= {}) => {
 
   // Performance insights
   const getPerformanceInsights = useCallback(() => {
-    const insights] = []
+    const insights: string[] = []
     
     if (metrics.fps < finalThresholds.critical) {
       insights.push('Critical FPS drop detected - consider reducing animation complexity')
@@ -216,17 +234,18 @@ export const useFrameRate = (options= {}) => {
     resetStats,
     
     // Performance analysis
-    performanceScore,
+    performanceScore: metrics.performanceScore,
     getPerformanceInsights,
     
     // Raw values
-    fps,
-    frameTime,
-    averageFPS,
-    minFPS,
-    maxFPS,
-    droppedFrames,
+    fps: metrics.fps,
+    frameTime: metrics.frameTime,
+    averageFPS: metrics.averageFPS,
+    minFPS: metrics.minFPS,
+    maxFPS: metrics.maxFPS,
+    droppedFrames: metrics.droppedFrames,
     
     // Thresholds
-    thresholds}
+    thresholds: finalThresholds
+  }
 }