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

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

@@ -0,0 +1,348 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+
+export interface TouchOptimizationConfig {
+  enablePassiveListeners}
+
+export interface TouchPerformanceMetrics {
+  touchEventCount}
+
+export interface TouchOptimizationCallbacks {
+  onTouchPerformanceWarning?) => void
+  onBatteryOptimization?) => void
+  onTouchEventThrottling?) => void
+}
+
+export interface TouchOptimizationState {
+  isOptimized}
+
+export const useTouchOptimization = (
+  elementRef,
+  callbacks= {},
+  config= {}
+) => {
+  const defaultConfig= {
+    enablePassiveListeners,
+    enableTouchActionOptimization,
+    enableBatteryOptimization,
+    enablePerformanceMonitoring,
+    touchActionMode,
+    maxTouchPoints,
+    touchEventThrottling, // ~60fps
+    ...config
+  }
+
+  const [optimizationState, setOptimizationState] = useState<TouchOptimizationState>({
+    isOptimized,
+    currentTouchAction,
+    passiveListenersEnabled,
+    batteryOptimizationEnabled,
+    throttlingEnabled,
+    lastOptimization})
+
+  const [performanceMetrics, setPerformanceMetrics] = useState<TouchPerformanceMetrics>({
+    touchEventCount,
+    averageTouchDuration,
+    touchEventLatency,
+    batteryImpact,
+    performanceScore})
+
+  const touchEventTimesRef = useRef<number[]>([])
+  const lastTouchEventRef = useRef<number>(0)
+  const touchEventThrottleTimerRef = useRef<NodeJS.Timeout | null>(null)
+  const batteryLevelRef = useRef<number | null>(null)
+  const isLowPowerModeRef = useRef<boolean>(false)
+
+  // Check battery status for optimization
+  useEffect(() => {
+    const checkBatteryStatus = async () => {
+      if ('getBattery' in navigator) {
+        try {
+          const battery = await (navigator as any).getBattery()
+          batteryLevelRef.current = battery.level
+          isLowPowerModeRef.current = battery.level < 0.2
+          
+          if (defaultConfig.enableBatteryOptimization && isLowPowerModeRef.current) {
+            setOptimizationState(prev => ({ ...prev, batteryOptimizationEnabled}))
+            callbacks.onBatteryOptimization?.(true)
+          }
+        } catch (error) {
+          console.warn('Battery API not supported, error)
+        }
+      }
+    }
+
+    checkBatteryStatus()
+  }, [defaultConfig.enableBatteryOptimization, callbacks])
+
+  // Calculate performance score
+  const calculatePerformanceScore = useCallback((metrics)=> {
+    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'
+    return 'poor'
+  }, [])
+
+  // Update performance metrics
+  const updatePerformanceMetrics = useCallback((touchDuration, latency) => {
+    const currentTime = Date.now()
+    touchEventTimesRef.current.push(currentTime)
+    
+    // Keep only last 100 touch events for averaging
+    if (touchEventTimesRef.current.length > 100) {
+      touchEventTimesRef.current.shift()
+    }
+
+    setPerformanceMetrics(prev => {
+      const newCount = prev.touchEventCount + 1
+      const newAverageDuration = (prev.averageTouchDuration * prev.touchEventCount + touchDuration) / newCount
+      const newAverageLatency = (prev.touchEventLatency * prev.touchEventCount + latency) / newCount
+      
+      const batteryImpact= isLowPowerModeRef.current ? 'high' = {
+        touchEventCount,
+        averageTouchDuration,
+        touchEventLatency,
+        batteryImpact,
+        performanceScore}
+      
+      newMetrics.performanceScore = calculatePerformanceScore(newMetrics)
+      
+      // Check for performance warnings
+      if (newMetrics.performanceScore === 'poor' || newMetrics.touchEventLatency > 100) {
+        callbacks.onTouchPerformanceWarning?.(newMetrics)
+      }
+      
+      return newMetrics
+    })
+  }, [callbacks, calculatePerformanceScore])
+
+  // Optimize touch action CSS
+  const optimizeTouchAction = useCallback(() => {
+    const element = elementRef.current
+    if (!element || !defaultConfig.enableTouchActionOptimization) return
+
+    const currentTouchAction = getComputedStyle(element).touchAction
+    
+    if (currentTouchAction !== defaultConfig.touchActionMode) {
+      element.style.touchAction = defaultConfig.touchActionMode
+      setOptimizationState(prev => ({ 
+        ...prev, 
+        currentTouchAction,
+        lastOptimization)
+      }))
+    }
+  }, [elementRef, defaultConfig.enableTouchActionOptimization, defaultConfig.touchActionMode])
+
+  // Enable passive listeners for better performance
+  const enablePassiveListeners = useCallback(() => {
+    const element = elementRef.current
+    if (!element || !defaultConfig.enablePassiveListeners) return
+
+    // Check if passive listeners are supported
+    let supportsPassive = false
+    try {
+      const opts = Object.defineProperty({}, 'passive', {
+        get) => { supportsPassive = true; return true; }
+      })
+      // Use a dummy event listener to test passive support
+      const testListener = () => {}
+      window.addEventListener('test', testListener, opts)
+      window.removeEventListener('test', testListener, opts)
+    } catch (e) {
+      // Passive listeners not supported
+    }
+
+    if (supportsPassive) {
+      setOptimizationState(prev => ({ ...prev, passiveListenersEnabled}))
+    }
+  }, [elementRef, defaultConfig.enablePassiveListeners])
+
+  // Touch event throttling for performance
+  const enableTouchEventThrottling = useCallback(() => {
+    if (!defaultConfig.enablePerformanceMonitoring) return
+
+    setOptimizationState(prev => ({ ...prev, throttlingEnabled}))
+    callbacks.onTouchEventThrottling?.(true)
+  }, [defaultConfig.enablePerformanceMonitoring, callbacks])
+
+  // Optimize touch event handling
+  const optimizeTouchEventHandling = useCallback((event) => {
+    const currentTime = Date.now()
+    const touchDuration = currentTime - lastTouchEventRef.current
+    const latency = performance.now() - event.timeStamp
+
+    // Update performance metrics
+    updatePerformanceMetrics(touchDuration, latency)
+
+    // Apply throttling if enabled
+    if (optimizationState.throttlingEnabled && touchEventThrottleTimerRef.current) {
+      return // Skip this event due to throttling
+    }
+
+    // Set up throttling for next event
+    if (optimizationState.throttlingEnabled) {
+      touchEventThrottleTimerRef.current = setTimeout(() => {
+        touchEventThrottleTimerRef.current = null
+      }, defaultConfig.touchEventThrottling)
+    }
+
+    lastTouchEventRef.current = currentTime
+  }, [optimizationState.throttlingEnabled, updatePerformanceMetrics, defaultConfig.touchEventThrottling])
+
+  // Apply all optimizations
+  const applyOptimizations = useCallback(() => {
+    optimizeTouchAction()
+    enablePassiveListeners()
+    
+    if (defaultConfig.enableBatteryOptimization && isLowPowerModeRef.current) {
+      enableTouchEventThrottling()
+    }
+
+    setOptimizationState(prev => ({ 
+      ...prev, 
+      isOptimized,
+      lastOptimization)
+    }))
+  }, [
+    optimizeTouchAction, 
+    enablePassiveListeners, 
+    enableTouchEventThrottling, 
+    defaultConfig.enableBatteryOptimization
+  ])
+
+  // Reset optimizations
+  const resetOptimizations = useCallback(() => {
+    const element = elementRef.current
+    if (element) {
+      element.style.touchAction = 'auto'
+    }
+
+    setOptimizationState({
+      isOptimized,
+      currentTouchAction,
+      passiveListenersEnabled,
+      batteryOptimizationEnabled,
+      throttlingEnabled,
+      lastOptimization})
+
+    setPerformanceMetrics({
+      touchEventCount,
+      averageTouchDuration,
+      touchEventLatency,
+      batteryImpact,
+      performanceScore})
+
+    if (touchEventThrottleTimerRef.current) {
+      clearTimeout(touchEventThrottleTimerRef.current)
+      touchEventThrottleTimerRef.current = null
+    }
+  }, [elementRef])
+
+  // Set up touch event listeners with optimization
+  useEffect(() => {
+    const element = elementRef.current
+    if (!element) return
+
+    // Apply initial optimizations
+    applyOptimizations()
+
+    // Add touch event listener
+    const handleTouchEvent = (event) => {
+      if (defaultConfig.enablePerformanceMonitoring) {
+        optimizeTouchEventHandling(event)
+      }
+    }
+
+    const eventOptions = optimizationState.passiveListenersEnabled ? { passive} }
+    element.addEventListener('touchstart', handleTouchEvent, eventOptions)
+    element.addEventListener('touchmove', handleTouchEvent, eventOptions)
+    element.addEventListener('touchend', handleTouchEvent, eventOptions)
+
+    return () => {
+      element.removeEventListener('touchstart', handleTouchEvent)
+      element.removeEventListener('touchmove', handleTouchEvent)
+      element.removeEventListener('touchend', handleTouchEvent)
+      
+      if (touchEventThrottleTimerRef.current) {
+        clearTimeout(touchEventThrottleTimerRef.current)
+      }
+    }
+  }, [
+    elementRef, 
+    applyOptimizations, 
+    optimizationState.passiveListenersEnabled, 
+    defaultConfig.enablePerformanceMonitoring,
+    optimizeTouchEventHandling
+  ])
+
+  // Monitor battery changes
+  useEffect(() => {
+    const handleBatteryChange = () => {
+      if (defaultConfig.enableBatteryOptimization) {
+        applyOptimizations()
+      }
+    }
+
+    if ('getBattery' in navigator) {
+      // Battery change events are not widely supported, so we'll check periodically
+      const batteryCheckInterval = setInterval(handleBatteryChange, 30000) // Check every 30 seconds
+      
+      return () => clearInterval(batteryCheckInterval)
+    }
+  }, [defaultConfig.enableBatteryOptimization, applyOptimizations])
+
+  // Utility functions
+  const getOptimizationReport = useCallback(() => {
+    return {
+      state,
+      metrics,
+      recommendations)
+    }
+  }, [optimizationState, performanceMetrics])
+
+  const getOptimizationRecommendations = useCallback(() => {
+    const recommendations] = []
+    
+    if (performanceMetrics.performanceScore === 'poor') {
+      recommendations.push('Consider enabling touch event throttling')
+      recommendations.push('Reduce touch event complexity')
+    }
+    
+    if (performanceMetrics.batteryImpact === 'high') {
+      recommendations.push('Enable battery optimization mode')
+      recommendations.push('Reduce touch event frequency')
+    }
+    
+    if (!optimizationState.passiveListenersEnabled) {
+      recommendations.push('Enable passive event listeners for better performance')
+    }
+    
+    return recommendations
+  }, [performanceMetrics, optimizationState])
+
+  return {
+    optimizationState,
+    performanceMetrics,
+    applyOptimizations,
+    resetOptimizations,
+    getOptimizationReport,
+    getOptimizationRecommendations
+  }
+}
+
+// Convenience hook for basic touch optimization
+export const useBasicTouchOptimization = (elementRef) => {
+  return useTouchOptimization(elementRef, {}, {
+    enablePassiveListeners,
+    enableTouchActionOptimization,
+    enableBatteryOptimization,
+    enablePerformanceMonitoring})
+}
+
+// Convenience hook for battery-aware touch optimization
+export const useBatteryAwareTouchOptimization = (elementRef) => {
+  return useTouchOptimization(elementRef, {}, {
+    enablePassiveListeners,
+    enableTouchActionOptimization,
+    enableBatteryOptimization,
+    enablePerformanceMonitoring})
+}

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

@@ -0,0 +1,348 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+
+export interface TouchOptimizationConfig {
+  enablePassiveListeners}
+
+export interface TouchPerformanceMetrics {
+  touchEventCount}
+
+export interface TouchOptimizationCallbacks {
+  onTouchPerformanceWarning?) => void
+  onBatteryOptimization?) => void
+  onTouchEventThrottling?) => void
+}
+
+export interface TouchOptimizationState {
+  isOptimized}
+
+export const useTouchOptimization = (
+  elementRef,
+  callbacks= {},
+  config= {}
+) => {
+  const defaultConfig= {
+    enablePassiveListeners,
+    enableTouchActionOptimization,
+    enableBatteryOptimization,
+    enablePerformanceMonitoring,
+    touchActionMode,
+    maxTouchPoints,
+    touchEventThrottling, // ~60fps
+    ...config
+  }
+
+  const [optimizationState, setOptimizationState] = useState<TouchOptimizationState>({
+    isOptimized,
+    currentTouchAction,
+    passiveListenersEnabled,
+    batteryOptimizationEnabled,
+    throttlingEnabled,
+    lastOptimization})
+
+  const [performanceMetrics, setPerformanceMetrics] = useState<TouchPerformanceMetrics>({
+    touchEventCount,
+    averageTouchDuration,
+    touchEventLatency,
+    batteryImpact,
+    performanceScore})
+
+  const touchEventTimesRef = useRef<number[]>([])
+  const lastTouchEventRef = useRef<number>(0)
+  const touchEventThrottleTimerRef = useRef<NodeJS.Timeout | null>(null)
+  const batteryLevelRef = useRef<number | null>(null)
+  const isLowPowerModeRef = useRef<boolean>(false)
+
+  // Check battery status for optimization
+  useEffect(() => {
+    const checkBatteryStatus = async () => {
+      if ('getBattery' in navigator) {
+        try {
+          const battery = await (navigator as any).getBattery()
+          batteryLevelRef.current = battery.level
+          isLowPowerModeRef.current = battery.level < 0.2
+          
+          if (defaultConfig.enableBatteryOptimization && isLowPowerModeRef.current) {
+            setOptimizationState(prev => ({ ...prev, batteryOptimizationEnabled}))
+            callbacks.onBatteryOptimization?.(true)
+          }
+        } catch (error) {
+          console.warn('Battery API not supported, error)
+        }
+      }
+    }
+
+    checkBatteryStatus()
+  }, [defaultConfig.enableBatteryOptimization, callbacks])
+
+  // Calculate performance score
+  const calculatePerformanceScore = useCallback((metrics)=> {
+    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'
+    return 'poor'
+  }, [])
+
+  // Update performance metrics
+  const updatePerformanceMetrics = useCallback((touchDuration, latency) => {
+    const currentTime = Date.now()
+    touchEventTimesRef.current.push(currentTime)
+    
+    // Keep only last 100 touch events for averaging
+    if (touchEventTimesRef.current.length > 100) {
+      touchEventTimesRef.current.shift()
+    }
+
+    setPerformanceMetrics(prev => {
+      const newCount = prev.touchEventCount + 1
+      const newAverageDuration = (prev.averageTouchDuration * prev.touchEventCount + touchDuration) / newCount
+      const newAverageLatency = (prev.touchEventLatency * prev.touchEventCount + latency) / newCount
+      
+      const batteryImpact= isLowPowerModeRef.current ? 'high' = {
+        touchEventCount,
+        averageTouchDuration,
+        touchEventLatency,
+        batteryImpact,
+        performanceScore}
+      
+      newMetrics.performanceScore = calculatePerformanceScore(newMetrics)
+      
+      // Check for performance warnings
+      if (newMetrics.performanceScore === 'poor' || newMetrics.touchEventLatency > 100) {
+        callbacks.onTouchPerformanceWarning?.(newMetrics)
+      }
+      
+      return newMetrics
+    })
+  }, [callbacks, calculatePerformanceScore])
+
+  // Optimize touch action CSS
+  const optimizeTouchAction = useCallback(() => {
+    const element = elementRef.current
+    if (!element || !defaultConfig.enableTouchActionOptimization) return
+
+    const currentTouchAction = getComputedStyle(element).touchAction
+    
+    if (currentTouchAction !== defaultConfig.touchActionMode) {
+      element.style.touchAction = defaultConfig.touchActionMode
+      setOptimizationState(prev => ({ 
+        ...prev, 
+        currentTouchAction,
+        lastOptimization)
+      }))
+    }
+  }, [elementRef, defaultConfig.enableTouchActionOptimization, defaultConfig.touchActionMode])
+
+  // Enable passive listeners for better performance
+  const enablePassiveListeners = useCallback(() => {
+    const element = elementRef.current
+    if (!element || !defaultConfig.enablePassiveListeners) return
+
+    // Check if passive listeners are supported
+    let supportsPassive = false
+    try {
+      const opts = Object.defineProperty({}, 'passive', {
+        get) => { supportsPassive = true; return true; }
+      })
+      // Use a dummy event listener to test passive support
+      const testListener = () => {}
+      window.addEventListener('test', testListener, opts)
+      window.removeEventListener('test', testListener, opts)
+    } catch (e) {
+      // Passive listeners not supported
+    }
+
+    if (supportsPassive) {
+      setOptimizationState(prev => ({ ...prev, passiveListenersEnabled}))
+    }
+  }, [elementRef, defaultConfig.enablePassiveListeners])
+
+  // Touch event throttling for performance
+  const enableTouchEventThrottling = useCallback(() => {
+    if (!defaultConfig.enablePerformanceMonitoring) return
+
+    setOptimizationState(prev => ({ ...prev, throttlingEnabled}))
+    callbacks.onTouchEventThrottling?.(true)
+  }, [defaultConfig.enablePerformanceMonitoring, callbacks])
+
+  // Optimize touch event handling
+  const optimizeTouchEventHandling = useCallback((event) => {
+    const currentTime = Date.now()
+    const touchDuration = currentTime - lastTouchEventRef.current
+    const latency = performance.now() - event.timeStamp
+
+    // Update performance metrics
+    updatePerformanceMetrics(touchDuration, latency)
+
+    // Apply throttling if enabled
+    if (optimizationState.throttlingEnabled && touchEventThrottleTimerRef.current) {
+      return // Skip this event due to throttling
+    }
+
+    // Set up throttling for next event
+    if (optimizationState.throttlingEnabled) {
+      touchEventThrottleTimerRef.current = setTimeout(() => {
+        touchEventThrottleTimerRef.current = null
+      }, defaultConfig.touchEventThrottling)
+    }
+
+    lastTouchEventRef.current = currentTime
+  }, [optimizationState.throttlingEnabled, updatePerformanceMetrics, defaultConfig.touchEventThrottling])
+
+  // Apply all optimizations
+  const applyOptimizations = useCallback(() => {
+    optimizeTouchAction()
+    enablePassiveListeners()
+    
+    if (defaultConfig.enableBatteryOptimization && isLowPowerModeRef.current) {
+      enableTouchEventThrottling()
+    }
+
+    setOptimizationState(prev => ({ 
+      ...prev, 
+      isOptimized,
+      lastOptimization)
+    }))
+  }, [
+    optimizeTouchAction, 
+    enablePassiveListeners, 
+    enableTouchEventThrottling, 
+    defaultConfig.enableBatteryOptimization
+  ])
+
+  // Reset optimizations
+  const resetOptimizations = useCallback(() => {
+    const element = elementRef.current
+    if (element) {
+      element.style.touchAction = 'auto'
+    }
+
+    setOptimizationState({
+      isOptimized,
+      currentTouchAction,
+      passiveListenersEnabled,
+      batteryOptimizationEnabled,
+      throttlingEnabled,
+      lastOptimization})
+
+    setPerformanceMetrics({
+      touchEventCount,
+      averageTouchDuration,
+      touchEventLatency,
+      batteryImpact,
+      performanceScore})
+
+    if (touchEventThrottleTimerRef.current) {
+      clearTimeout(touchEventThrottleTimerRef.current)
+      touchEventThrottleTimerRef.current = null
+    }
+  }, [elementRef])
+
+  // Set up touch event listeners with optimization
+  useEffect(() => {
+    const element = elementRef.current
+    if (!element) return
+
+    // Apply initial optimizations
+    applyOptimizations()
+
+    // Add touch event listener
+    const handleTouchEvent = (event) => {
+      if (defaultConfig.enablePerformanceMonitoring) {
+        optimizeTouchEventHandling(event)
+      }
+    }
+
+    const eventOptions = optimizationState.passiveListenersEnabled ? { passive} }
+    element.addEventListener('touchstart', handleTouchEvent, eventOptions)
+    element.addEventListener('touchmove', handleTouchEvent, eventOptions)
+    element.addEventListener('touchend', handleTouchEvent, eventOptions)
+
+    return () => {
+      element.removeEventListener('touchstart', handleTouchEvent)
+      element.removeEventListener('touchmove', handleTouchEvent)
+      element.removeEventListener('touchend', handleTouchEvent)
+      
+      if (touchEventThrottleTimerRef.current) {
+        clearTimeout(touchEventThrottleTimerRef.current)
+      }
+    }
+  }, [
+    elementRef, 
+    applyOptimizations, 
+    optimizationState.passiveListenersEnabled, 
+    defaultConfig.enablePerformanceMonitoring,
+    optimizeTouchEventHandling
+  ])
+
+  // Monitor battery changes
+  useEffect(() => {
+    const handleBatteryChange = () => {
+      if (defaultConfig.enableBatteryOptimization) {
+        applyOptimizations()
+      }
+    }
+
+    if ('getBattery' in navigator) {
+      // Battery change events are not widely supported, so we'll check periodically
+      const batteryCheckInterval = setInterval(handleBatteryChange, 30000) // Check every 30 seconds
+      
+      return () => clearInterval(batteryCheckInterval)
+    }
+  }, [defaultConfig.enableBatteryOptimization, applyOptimizations])
+
+  // Utility functions
+  const getOptimizationReport = useCallback(() => {
+    return {
+      state,
+      metrics,
+      recommendations)
+    }
+  }, [optimizationState, performanceMetrics])
+
+  const getOptimizationRecommendations = useCallback(() => {
+    const recommendations] = []
+    
+    if (performanceMetrics.performanceScore === 'poor') {
+      recommendations.push('Consider enabling touch event throttling')
+      recommendations.push('Reduce touch event complexity')
+    }
+    
+    if (performanceMetrics.batteryImpact === 'high') {
+      recommendations.push('Enable battery optimization mode')
+      recommendations.push('Reduce touch event frequency')
+    }
+    
+    if (!optimizationState.passiveListenersEnabled) {
+      recommendations.push('Enable passive event listeners for better performance')
+    }
+    
+    return recommendations
+  }, [performanceMetrics, optimizationState])
+
+  return {
+    optimizationState,
+    performanceMetrics,
+    applyOptimizations,
+    resetOptimizations,
+    getOptimizationReport,
+    getOptimizationRecommendations
+  }
+}
+
+// Convenience hook for basic touch optimization
+export const useBasicTouchOptimization = (elementRef) => {
+  return useTouchOptimization(elementRef, {}, {
+    enablePassiveListeners,
+    enableTouchActionOptimization,
+    enableBatteryOptimization,
+    enablePerformanceMonitoring})
+}
+
+// Convenience hook for battery-aware touch optimization
+export const useBatteryAwareTouchOptimization = (elementRef) => {
+  return useTouchOptimization(elementRef, {}, {
+    enablePassiveListeners,
+    enableTouchActionOptimization,
+    enableBatteryOptimization,
+    enablePerformanceMonitoring})
+}