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

package/dist/hooks/use-touch-optimization.esm.js

@@ -1,50 +1,70 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
 
 export interface TouchOptimizationConfig {
-  enablePassiveListeners}
+  enablePassiveListeners: boolean
+  enableTouchActionOptimization: boolean
+  enableBatteryOptimization: boolean
+  enablePerformanceMonitoring: boolean
+  touchActionMode: 'auto' | 'manipulation' | 'pan-x' | 'pan-y' | 'none'
+  maxTouchPoints: number
+  touchEventThrottling: number
+}
 
 export interface TouchPerformanceMetrics {
-  touchEventCount}
+  touchEventCount: number
+  averageTouchDuration: number
+  touchEventLatency: number
+  batteryImpact: 'low' | 'medium' | 'high'
+  performanceScore: 'excellent' | 'good' | 'fair' | 'poor'
+}
 
 export interface TouchOptimizationCallbacks {
-  onTouchPerformanceWarning?) => void
-  onBatteryOptimization?) => void
-  onTouchEventThrottling?) => void
+  onTouchPerformanceWarning?: (metrics: TouchPerformanceMetrics) => void
+  onBatteryOptimization?: (enabled: boolean) => void
+  onTouchEventThrottling?: (enabled: boolean) => void
 }
 
 export interface TouchOptimizationState {
-  isOptimized}
+  isOptimized: boolean
+  currentTouchAction: string
+  passiveListenersEnabled: boolean
+  batteryOptimizationEnabled: boolean
+  throttlingEnabled: boolean
+  lastOptimization: Date | null
+}
 
 export const useTouchOptimization = (
-  elementRef,
-  callbacks= {},
-  config= {}
+  elementRef: React.RefObject<HTMLElement>,
+  callbacks: TouchOptimizationCallbacks = {},
+  config: Partial<TouchOptimizationConfig> = {}
 ) => {
-  const defaultConfig= {
-    enablePassiveListeners,
-    enableTouchActionOptimization,
-    enableBatteryOptimization,
-    enablePerformanceMonitoring,
-    touchActionMode,
-    maxTouchPoints,
-    touchEventThrottling, // ~60fps
+  const defaultConfig: TouchOptimizationConfig = {
+    enablePassiveListeners: true,
+    enableTouchActionOptimization: true,
+    enableBatteryOptimization: true,
+    enablePerformanceMonitoring: true,
+    touchActionMode: 'manipulation',
+    maxTouchPoints: 5,
+    touchEventThrottling: 16, // ~60fps
     ...config
   }
 
   const [optimizationState, setOptimizationState] = useState<TouchOptimizationState>({
-    isOptimized,
-    currentTouchAction,
-    passiveListenersEnabled,
-    batteryOptimizationEnabled,
-    throttlingEnabled,
-    lastOptimization})
+    isOptimized: false,
+    currentTouchAction: defaultConfig.touchActionMode,
+    passiveListenersEnabled: false,
+    batteryOptimizationEnabled: false,
+    throttlingEnabled: false,
+    lastOptimization: null
+  })
 
   const [performanceMetrics, setPerformanceMetrics] = useState<TouchPerformanceMetrics>({
-    touchEventCount,
-    averageTouchDuration,
-    touchEventLatency,
-    batteryImpact,
-    performanceScore})
+    touchEventCount: 0,
+    averageTouchDuration: 0,
+    touchEventLatency: 0,
+    batteryImpact: 'low',
+    performanceScore: 'excellent'
+  })
 
   const touchEventTimesRef = useRef<number[]>([])
   const lastTouchEventRef = useRef<number>(0)
@@ -62,11 +82,11 @@ export const useTouchOptimization = (
           isLowPowerModeRef.current = battery.level < 0.2
           
           if (defaultConfig.enableBatteryOptimization && isLowPowerModeRef.current) {
-            setOptimizationState(prev => ({ ...prev, batteryOptimizationEnabled}))
+            setOptimizationState(prev => ({ ...prev, batteryOptimizationEnabled: true }))
             callbacks.onBatteryOptimization?.(true)
           }
         } catch (error) {
-          console.warn('Battery API not supported, error)
+          console.warn('Battery API not supported:', error)
         }
       }
     }
@@ -75,7 +95,7 @@ export const useTouchOptimization = (
   }, [defaultConfig.enableBatteryOptimization, callbacks])
 
   // Calculate performance score
-  const calculatePerformanceScore = useCallback((metrics)=> {
+  const calculatePerformanceScore = useCallback((metrics: TouchPerformanceMetrics): 'excellent' | 'good' | 'fair' | 'poor' => {
     if (metrics.touchEventLatency < 16 && metrics.averageTouchDuration < 50) return 'excellent'
     if (metrics.touchEventLatency < 32 && metrics.averageTouchDuration < 100) return 'good'
     if (metrics.touchEventLatency < 64 && metrics.averageTouchDuration < 200) return 'fair'
@@ -83,7 +103,7 @@ export const useTouchOptimization = (
   }, [])
 
   // Update performance metrics
-  const updatePerformanceMetrics = useCallback((touchDuration, latency) => {
+  const updatePerformanceMetrics = useCallback((touchDuration: number, latency: number) => {
     const currentTime = Date.now()
     touchEventTimesRef.current.push(currentTime)
     
@@ -97,12 +117,15 @@ export const useTouchOptimization = (
       const newAverageDuration = (prev.averageTouchDuration * prev.touchEventCount + touchDuration) / newCount
       const newAverageLatency = (prev.touchEventLatency * prev.touchEventCount + latency) / newCount
       
-      const batteryImpact= isLowPowerModeRef.current ? 'high' = {
-        touchEventCount,
-        averageTouchDuration,
-        touchEventLatency,
+      const batteryImpact: 'low' | 'medium' | 'high' = isLowPowerModeRef.current ? 'high' : batteryLevelRef.current && batteryLevelRef.current < 0.5 ? 'medium' : 'low'
+      
+      const newMetrics: TouchPerformanceMetrics = {
+        touchEventCount: newCount,
+        averageTouchDuration: newAverageDuration,
+        touchEventLatency: newAverageLatency,
         batteryImpact,
-        performanceScore}
+        performanceScore: 'excellent'
+      }
       
       newMetrics.performanceScore = calculatePerformanceScore(newMetrics)
       
@@ -126,8 +149,8 @@ export const useTouchOptimization = (
       element.style.touchAction = defaultConfig.touchActionMode
       setOptimizationState(prev => ({ 
         ...prev, 
-        currentTouchAction,
-        lastOptimization)
+        currentTouchAction: defaultConfig.touchActionMode,
+        lastOptimization: new Date()
       }))
     }
   }, [elementRef, defaultConfig.enableTouchActionOptimization, defaultConfig.touchActionMode])
@@ -141,7 +164,7 @@ export const useTouchOptimization = (
     let supportsPassive = false
     try {
       const opts = Object.defineProperty({}, 'passive', {
-        get) => { supportsPassive = true; return true; }
+        get: () => { supportsPassive = true; return true; }
       })
       // Use a dummy event listener to test passive support
       const testListener = () => {}
@@ -152,7 +175,7 @@ export const useTouchOptimization = (
     }
 
     if (supportsPassive) {
-      setOptimizationState(prev => ({ ...prev, passiveListenersEnabled}))
+      setOptimizationState(prev => ({ ...prev, passiveListenersEnabled: true }))
     }
   }, [elementRef, defaultConfig.enablePassiveListeners])
 
@@ -160,12 +183,12 @@ export const useTouchOptimization = (
   const enableTouchEventThrottling = useCallback(() => {
     if (!defaultConfig.enablePerformanceMonitoring) return
 
-    setOptimizationState(prev => ({ ...prev, throttlingEnabled}))
+    setOptimizationState(prev => ({ ...prev, throttlingEnabled: true }))
     callbacks.onTouchEventThrottling?.(true)
   }, [defaultConfig.enablePerformanceMonitoring, callbacks])
 
   // Optimize touch event handling
-  const optimizeTouchEventHandling = useCallback((event) => {
+  const optimizeTouchEventHandling = useCallback((event: TouchEvent) => {
     const currentTime = Date.now()
     const touchDuration = currentTime - lastTouchEventRef.current
     const latency = performance.now() - event.timeStamp
@@ -199,8 +222,8 @@ export const useTouchOptimization = (
 
     setOptimizationState(prev => ({ 
       ...prev, 
-      isOptimized,
-      lastOptimization)
+      isOptimized: true,
+      lastOptimization: new Date()
     }))
   }, [
     optimizeTouchAction, 
@@ -217,19 +240,21 @@ export const useTouchOptimization = (
     }
 
     setOptimizationState({
-      isOptimized,
-      currentTouchAction,
-      passiveListenersEnabled,
-      batteryOptimizationEnabled,
-      throttlingEnabled,
-      lastOptimization})
+      isOptimized: false,
+      currentTouchAction: 'auto',
+      passiveListenersEnabled: false,
+      batteryOptimizationEnabled: false,
+      throttlingEnabled: false,
+      lastOptimization: null
+    })
 
     setPerformanceMetrics({
-      touchEventCount,
-      averageTouchDuration,
-      touchEventLatency,
-      batteryImpact,
-      performanceScore})
+      touchEventCount: 0,
+      averageTouchDuration: 0,
+      touchEventLatency: 0,
+      batteryImpact: 'low',
+      performanceScore: 'excellent'
+    })
 
     if (touchEventThrottleTimerRef.current) {
       clearTimeout(touchEventThrottleTimerRef.current)
@@ -246,13 +271,13 @@ export const useTouchOptimization = (
     applyOptimizations()
 
     // Add touch event listener
-    const handleTouchEvent = (event) => {
+    const handleTouchEvent = (event: TouchEvent) => {
       if (defaultConfig.enablePerformanceMonitoring) {
         optimizeTouchEventHandling(event)
       }
     }
 
-    const eventOptions = optimizationState.passiveListenersEnabled ? { passive} }
+    const eventOptions = optimizationState.passiveListenersEnabled ? { passive: true } : {}
     element.addEventListener('touchstart', handleTouchEvent, eventOptions)
     element.addEventListener('touchmove', handleTouchEvent, eventOptions)
     element.addEventListener('touchend', handleTouchEvent, eventOptions)
@@ -293,14 +318,14 @@ export const useTouchOptimization = (
   // Utility functions
   const getOptimizationReport = useCallback(() => {
     return {
-      state,
-      metrics,
-      recommendations)
+      state: optimizationState,
+      metrics: performanceMetrics,
+      recommendations: getOptimizationRecommendations()
     }
   }, [optimizationState, performanceMetrics])
 
   const getOptimizationRecommendations = useCallback(() => {
-    const recommendations] = []
+    const recommendations: string[] = []
     
     if (performanceMetrics.performanceScore === 'poor') {
       recommendations.push('Consider enabling touch event throttling')
@@ -330,19 +355,21 @@ export const useTouchOptimization = (
 }
 
 // Convenience hook for basic touch optimization
-export const useBasicTouchOptimization = (elementRef) => {
+export const useBasicTouchOptimization = (elementRef: React.RefObject<HTMLElement>) => {
   return useTouchOptimization(elementRef, {}, {
-    enablePassiveListeners,
-    enableTouchActionOptimization,
-    enableBatteryOptimization,
-    enablePerformanceMonitoring})
+    enablePassiveListeners: true,
+    enableTouchActionOptimization: true,
+    enableBatteryOptimization: false,
+    enablePerformanceMonitoring: false
+  })
 }
 
 // Convenience hook for battery-aware touch optimization
-export const useBatteryAwareTouchOptimization = (elementRef) => {
+export const useBatteryAwareTouchOptimization = (elementRef: React.RefObject<HTMLElement>) => {
   return useTouchOptimization(elementRef, {}, {
-    enablePassiveListeners,
-    enableTouchActionOptimization,
-    enableBatteryOptimization,
-    enablePerformanceMonitoring})
+    enablePassiveListeners: true,
+    enableTouchActionOptimization: true,
+    enableBatteryOptimization: true,
+    enablePerformanceMonitoring: true
+  })
 }

package/dist/hooks/use-touch-optimization.js

@@ -1,50 +1,70 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
 
 export interface TouchOptimizationConfig {
-  enablePassiveListeners}
+  enablePassiveListeners: boolean
+  enableTouchActionOptimization: boolean
+  enableBatteryOptimization: boolean
+  enablePerformanceMonitoring: boolean
+  touchActionMode: 'auto' | 'manipulation' | 'pan-x' | 'pan-y' | 'none'
+  maxTouchPoints: number
+  touchEventThrottling: number
+}
 
 export interface TouchPerformanceMetrics {
-  touchEventCount}
+  touchEventCount: number
+  averageTouchDuration: number
+  touchEventLatency: number
+  batteryImpact: 'low' | 'medium' | 'high'
+  performanceScore: 'excellent' | 'good' | 'fair' | 'poor'
+}
 
 export interface TouchOptimizationCallbacks {
-  onTouchPerformanceWarning?) => void
-  onBatteryOptimization?) => void
-  onTouchEventThrottling?) => void
+  onTouchPerformanceWarning?: (metrics: TouchPerformanceMetrics) => void
+  onBatteryOptimization?: (enabled: boolean) => void
+  onTouchEventThrottling?: (enabled: boolean) => void
 }
 
 export interface TouchOptimizationState {
-  isOptimized}
+  isOptimized: boolean
+  currentTouchAction: string
+  passiveListenersEnabled: boolean
+  batteryOptimizationEnabled: boolean
+  throttlingEnabled: boolean
+  lastOptimization: Date | null
+}
 
 export const useTouchOptimization = (
-  elementRef,
-  callbacks= {},
-  config= {}
+  elementRef: React.RefObject<HTMLElement>,
+  callbacks: TouchOptimizationCallbacks = {},
+  config: Partial<TouchOptimizationConfig> = {}
 ) => {
-  const defaultConfig= {
-    enablePassiveListeners,
-    enableTouchActionOptimization,
-    enableBatteryOptimization,
-    enablePerformanceMonitoring,
-    touchActionMode,
-    maxTouchPoints,
-    touchEventThrottling, // ~60fps
+  const defaultConfig: TouchOptimizationConfig = {
+    enablePassiveListeners: true,
+    enableTouchActionOptimization: true,
+    enableBatteryOptimization: true,
+    enablePerformanceMonitoring: true,
+    touchActionMode: 'manipulation',
+    maxTouchPoints: 5,
+    touchEventThrottling: 16, // ~60fps
     ...config
   }
 
   const [optimizationState, setOptimizationState] = useState<TouchOptimizationState>({
-    isOptimized,
-    currentTouchAction,
-    passiveListenersEnabled,
-    batteryOptimizationEnabled,
-    throttlingEnabled,
-    lastOptimization})
+    isOptimized: false,
+    currentTouchAction: defaultConfig.touchActionMode,
+    passiveListenersEnabled: false,
+    batteryOptimizationEnabled: false,
+    throttlingEnabled: false,
+    lastOptimization: null
+  })
 
   const [performanceMetrics, setPerformanceMetrics] = useState<TouchPerformanceMetrics>({
-    touchEventCount,
-    averageTouchDuration,
-    touchEventLatency,
-    batteryImpact,
-    performanceScore})
+    touchEventCount: 0,
+    averageTouchDuration: 0,
+    touchEventLatency: 0,
+    batteryImpact: 'low',
+    performanceScore: 'excellent'
+  })
 
   const touchEventTimesRef = useRef<number[]>([])
   const lastTouchEventRef = useRef<number>(0)
@@ -62,11 +82,11 @@ export const useTouchOptimization = (
           isLowPowerModeRef.current = battery.level < 0.2
           
           if (defaultConfig.enableBatteryOptimization && isLowPowerModeRef.current) {
-            setOptimizationState(prev => ({ ...prev, batteryOptimizationEnabled}))
+            setOptimizationState(prev => ({ ...prev, batteryOptimizationEnabled: true }))
             callbacks.onBatteryOptimization?.(true)
           }
         } catch (error) {
-          console.warn('Battery API not supported, error)
+          console.warn('Battery API not supported:', error)
         }
       }
     }
@@ -75,7 +95,7 @@ export const useTouchOptimization = (
   }, [defaultConfig.enableBatteryOptimization, callbacks])
 
   // Calculate performance score
-  const calculatePerformanceScore = useCallback((metrics)=> {
+  const calculatePerformanceScore = useCallback((metrics: TouchPerformanceMetrics): 'excellent' | 'good' | 'fair' | 'poor' => {
     if (metrics.touchEventLatency < 16 && metrics.averageTouchDuration < 50) return 'excellent'
     if (metrics.touchEventLatency < 32 && metrics.averageTouchDuration < 100) return 'good'
     if (metrics.touchEventLatency < 64 && metrics.averageTouchDuration < 200) return 'fair'
@@ -83,7 +103,7 @@ export const useTouchOptimization = (
   }, [])
 
   // Update performance metrics
-  const updatePerformanceMetrics = useCallback((touchDuration, latency) => {
+  const updatePerformanceMetrics = useCallback((touchDuration: number, latency: number) => {
     const currentTime = Date.now()
     touchEventTimesRef.current.push(currentTime)
     
@@ -97,12 +117,15 @@ export const useTouchOptimization = (
       const newAverageDuration = (prev.averageTouchDuration * prev.touchEventCount + touchDuration) / newCount
       const newAverageLatency = (prev.touchEventLatency * prev.touchEventCount + latency) / newCount
       
-      const batteryImpact= isLowPowerModeRef.current ? 'high' = {
-        touchEventCount,
-        averageTouchDuration,
-        touchEventLatency,
+      const batteryImpact: 'low' | 'medium' | 'high' = isLowPowerModeRef.current ? 'high' : batteryLevelRef.current && batteryLevelRef.current < 0.5 ? 'medium' : 'low'
+      
+      const newMetrics: TouchPerformanceMetrics = {
+        touchEventCount: newCount,
+        averageTouchDuration: newAverageDuration,
+        touchEventLatency: newAverageLatency,
         batteryImpact,
-        performanceScore}
+        performanceScore: 'excellent'
+      }
       
       newMetrics.performanceScore = calculatePerformanceScore(newMetrics)
       
@@ -126,8 +149,8 @@ export const useTouchOptimization = (
       element.style.touchAction = defaultConfig.touchActionMode
       setOptimizationState(prev => ({ 
         ...prev, 
-        currentTouchAction,
-        lastOptimization)
+        currentTouchAction: defaultConfig.touchActionMode,
+        lastOptimization: new Date()
       }))
     }
   }, [elementRef, defaultConfig.enableTouchActionOptimization, defaultConfig.touchActionMode])
@@ -141,7 +164,7 @@ export const useTouchOptimization = (
     let supportsPassive = false
     try {
       const opts = Object.defineProperty({}, 'passive', {
-        get) => { supportsPassive = true; return true; }
+        get: () => { supportsPassive = true; return true; }
       })
       // Use a dummy event listener to test passive support
       const testListener = () => {}
@@ -152,7 +175,7 @@ export const useTouchOptimization = (
     }
 
     if (supportsPassive) {
-      setOptimizationState(prev => ({ ...prev, passiveListenersEnabled}))
+      setOptimizationState(prev => ({ ...prev, passiveListenersEnabled: true }))
     }
   }, [elementRef, defaultConfig.enablePassiveListeners])
 
@@ -160,12 +183,12 @@ export const useTouchOptimization = (
   const enableTouchEventThrottling = useCallback(() => {
     if (!defaultConfig.enablePerformanceMonitoring) return
 
-    setOptimizationState(prev => ({ ...prev, throttlingEnabled}))
+    setOptimizationState(prev => ({ ...prev, throttlingEnabled: true }))
     callbacks.onTouchEventThrottling?.(true)
   }, [defaultConfig.enablePerformanceMonitoring, callbacks])
 
   // Optimize touch event handling
-  const optimizeTouchEventHandling = useCallback((event) => {
+  const optimizeTouchEventHandling = useCallback((event: TouchEvent) => {
     const currentTime = Date.now()
     const touchDuration = currentTime - lastTouchEventRef.current
     const latency = performance.now() - event.timeStamp
@@ -199,8 +222,8 @@ export const useTouchOptimization = (
 
     setOptimizationState(prev => ({ 
       ...prev, 
-      isOptimized,
-      lastOptimization)
+      isOptimized: true,
+      lastOptimization: new Date()
     }))
   }, [
     optimizeTouchAction, 
@@ -217,19 +240,21 @@ export const useTouchOptimization = (
     }
 
     setOptimizationState({
-      isOptimized,
-      currentTouchAction,
-      passiveListenersEnabled,
-      batteryOptimizationEnabled,
-      throttlingEnabled,
-      lastOptimization})
+      isOptimized: false,
+      currentTouchAction: 'auto',
+      passiveListenersEnabled: false,
+      batteryOptimizationEnabled: false,
+      throttlingEnabled: false,
+      lastOptimization: null
+    })
 
     setPerformanceMetrics({
-      touchEventCount,
-      averageTouchDuration,
-      touchEventLatency,
-      batteryImpact,
-      performanceScore})
+      touchEventCount: 0,
+      averageTouchDuration: 0,
+      touchEventLatency: 0,
+      batteryImpact: 'low',
+      performanceScore: 'excellent'
+    })
 
     if (touchEventThrottleTimerRef.current) {
       clearTimeout(touchEventThrottleTimerRef.current)
@@ -246,13 +271,13 @@ export const useTouchOptimization = (
     applyOptimizations()
 
     // Add touch event listener
-    const handleTouchEvent = (event) => {
+    const handleTouchEvent = (event: TouchEvent) => {
       if (defaultConfig.enablePerformanceMonitoring) {
         optimizeTouchEventHandling(event)
       }
     }
 
-    const eventOptions = optimizationState.passiveListenersEnabled ? { passive} }
+    const eventOptions = optimizationState.passiveListenersEnabled ? { passive: true } : {}
     element.addEventListener('touchstart', handleTouchEvent, eventOptions)
     element.addEventListener('touchmove', handleTouchEvent, eventOptions)
     element.addEventListener('touchend', handleTouchEvent, eventOptions)
@@ -293,14 +318,14 @@ export const useTouchOptimization = (
   // Utility functions
   const getOptimizationReport = useCallback(() => {
     return {
-      state,
-      metrics,
-      recommendations)
+      state: optimizationState,
+      metrics: performanceMetrics,
+      recommendations: getOptimizationRecommendations()
     }
   }, [optimizationState, performanceMetrics])
 
   const getOptimizationRecommendations = useCallback(() => {
-    const recommendations] = []
+    const recommendations: string[] = []
     
     if (performanceMetrics.performanceScore === 'poor') {
       recommendations.push('Consider enabling touch event throttling')
@@ -330,19 +355,21 @@ export const useTouchOptimization = (
 }
 
 // Convenience hook for basic touch optimization
-export const useBasicTouchOptimization = (elementRef) => {
+export const useBasicTouchOptimization = (elementRef: React.RefObject<HTMLElement>) => {
   return useTouchOptimization(elementRef, {}, {
-    enablePassiveListeners,
-    enableTouchActionOptimization,
-    enableBatteryOptimization,
-    enablePerformanceMonitoring})
+    enablePassiveListeners: true,
+    enableTouchActionOptimization: true,
+    enableBatteryOptimization: false,
+    enablePerformanceMonitoring: false
+  })
 }
 
 // Convenience hook for battery-aware touch optimization
-export const useBatteryAwareTouchOptimization = (elementRef) => {
+export const useBatteryAwareTouchOptimization = (elementRef: React.RefObject<HTMLElement>) => {
   return useTouchOptimization(elementRef, {}, {
-    enablePassiveListeners,
-    enableTouchActionOptimization,
-    enableBatteryOptimization,
-    enablePerformanceMonitoring})
+    enablePassiveListeners: true,
+    enableTouchActionOptimization: true,
+    enableBatteryOptimization: true,
+    enablePerformanceMonitoring: true
+  })
 }