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

package/dist/hooks/use-battery-animations.esm.js

@@ -0,0 +1,359 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+
+export interface BatteryAnimationConfig {
+  enableBatteryMonitoring?}
+
+export interface BatteryAnimationState {
+  batteryLevel}
+
+export interface BatteryAnimationCallbacks {
+  onBatteryLevelChange?, isLow) => void
+  onPerformanceWarning?, shouldThrottle) => void
+  onAnimationThrottled?, reason) => void
+  onUserPreferenceChange?) => void
+  onReducedMotionChange?) => void
+}
+
+export const useBatteryAnimations = (
+  config= {},
+  callbacks= {}
+) => {
+  const {
+    enableBatteryMonitoring = true,
+    enablePerformanceThrottling = true,
+    enableReducedMotion = true,
+    enableUserPreferences = true,
+    enableAutomaticOptimization = true,
+    lowBatteryThreshold = 0.2,
+    criticalBatteryThreshold = 0.1,
+    performanceThrottleThreshold = 70
+  } = config
+
+  const [state, setState] = useState<BatteryAnimationState>({
+    batteryLevel,
+    isLowBattery,
+    isCriticalBattery,
+    isCharging,
+    performanceScore,
+    shouldThrottle,
+    throttleLevel,
+    reducedMotion,
+    userPreference})
+
+  const [isOptimizing, setIsOptimizing] = useState(false)
+  const [optimizations, setOptimizations] = useState<string[]>([])
+  const batteryRef = useRef<any>(null)
+  const performanceTimerRef = useRef<number | null>(null)
+  const batteryCheckIntervalRef = useRef<number | null>(null)
+
+  // Battery level detection
+  const getBatteryStatus = useCallback(async ()=> {
+    if (!enableBatteryMonitoring || !('getBattery' in navigator)) return
+
+    try {
+      const battery = await (navigator as any).getBattery()
+      batteryRef.current = battery
+      
+      const batteryLevel = battery.level
+      const isCharging = battery.charging
+      const isLowBattery = batteryLevel <= lowBatteryThreshold
+      const isCriticalBattery = batteryLevel <= criticalBatteryThreshold
+      
+      setState(prev => ({
+        ...prev,
+        batteryLevel,
+        isLowBattery,
+        isCriticalBattery,
+        isCharging
+      }))
+      
+      callbacks.onBatteryLevelChange?.(batteryLevel, isLowBattery)
+    } catch (error) {
+      console.warn('Battery API not available, error)
+    }
+  }, [enableBatteryMonitoring, lowBatteryThreshold, criticalBatteryThreshold, callbacks])
+
+  // Performance monitoring
+  const measurePerformance = useCallback(() => {
+    if (!enablePerformanceThrottling) return
+
+    try {
+      // Simulate performance measurement
+      const performanceScore = Math.random() * 100
+      const shouldThrottle = performanceScore < performanceThrottleThreshold
+      
+      setState(prev => ({
+        ...prev,
+        performanceScore,
+        shouldThrottle
+      }))
+      
+      if (shouldThrottle) {
+        callbacks.onPerformanceWarning?.(performanceScore, shouldThrottle)
+      }
+    } catch (error) {
+      console.warn('Performance measurement failed, error)
+    }
+  }, [enablePerformanceThrottling, performanceThrottleThreshold, callbacks])
+
+  // Reduced motion detection
+  const checkReducedMotion = useCallback(() => {
+    if (!enableReducedMotion) return
+
+    try {
+      const reducedMotion = window.matchMedia('(prefers-reduced-motion)').matches
+      
+      setState(prev => ({
+        ...prev,
+        reducedMotion
+      }))
+      
+      callbacks.onReducedMotionChange?.(reducedMotion)
+    } catch (error) {
+      console.warn('Reduced motion detection failed, error)
+    }
+  }, [enableReducedMotion, callbacks])
+
+  // Animation throttling based on battery and performance
+  const applyAnimationThrottling = useCallback(() => {
+    if (!enablePerformanceThrottling) return
+
+    setIsOptimizing(true)
+    
+    setTimeout(() => {
+      let throttleLevel= 'none'
+      let optimizations] = []
+      
+      // Battery-based throttling
+      if (state.isCriticalBattery) {
+        throttleLevel = 'aggressive'
+        optimizations.push('Critical battery)
+        optimizations.push('All non-essential animations disabled')
+        optimizations.push('Only essential UI transitions enabled')
+      } else if (state.isLowBattery) {
+        throttleLevel = 'moderate'
+        optimizations.push('Low battery)
+        optimizations.push('Animation complexity reduced by 60%')
+        optimizations.push('Performance optimizations enabled')
+      } else if (state.batteryLevel < 0.5) {
+        throttleLevel = 'light'
+        optimizations.push('Medium battery)
+        optimizations.push('Animation complexity reduced by 30%')
+        optimizations.push('Battery optimization enabled')
+      }
+      
+      // Performance-based throttling
+      if (state.shouldThrottle) {
+        if (throttleLevel === 'none') throttleLevel = 'light'
+        optimizations.push('Performance-based throttling applied')
+        optimizations.push('Animation frame rate optimized')
+      }
+      
+      // Reduced motion support
+      if (state.reducedMotion) {
+        if (throttleLevel === 'none') throttleLevel = 'light'
+        optimizations.push('Reduced motion preference respected')
+        optimizations.push('Animation duration minimized')
+      }
+      
+      // User preference consideration
+      if (state.userPreference === 'battery') {
+        if (throttleLevel === 'none') throttleLevel = 'light'
+        optimizations.push('User preference)
+      } else if (state.userPreference === 'accessibility') {
+        if (throttleLevel === 'none') throttleLevel = 'light'
+        optimizations.push('User preference)
+      }
+      
+      setState(prev => ({
+        ...prev,
+        throttleLevel
+      }))
+      
+      setOptimizations(prev => [...prev, ...optimizations])
+      setIsOptimizing(false)
+      
+      callbacks.onAnimationThrottled?.(throttleLevel, 'Battery and performance optimization')
+      
+      optimizations.forEach(optimization => {
+        console.log('Animation optimization, optimization)
+      })
+    }, 300)
+  }, [enablePerformanceThrottling, state, callbacks])
+
+  // Get animation recommendations
+  const getAnimationRecommendations = useCallback(() => {
+    const recommendations = []
+    
+    if (state.isCriticalBattery) {
+      recommendations.push('Critical battery)
+      recommendations.push('Use static UI elements instead of animated ones')
+      recommendations.push('Minimize DOM updates and reflows')
+    } else if (state.isLowBattery) {
+      recommendations.push('Low battery)
+      recommendations.push('Use simple transforms instead of complex animations')
+      recommendations.push('Limit animation duration to under 300ms')
+    } else if (state.batteryLevel < 0.5) {
+      recommendations.push('Medium battery)
+      recommendations.push('Use CSS transforms instead of JavaScript animations')
+      recommendations.push('Implement animation pausing when not in viewport')
+    }
+    
+    if (state.shouldThrottle) {
+      recommendations.push('Performance issue)
+      recommendations.push('Use requestAnimationFrame for smooth animations')
+      recommendations.push('Implement animation debouncing')
+    }
+    
+    if (state.reducedMotion) {
+      recommendations.push('Accessibility)
+      recommendations.push('Provide alternative non-animated experiences')
+      recommendations.push('Use subtle transitions instead of animations')
+    }
+    
+    return recommendations
+  }, [state])
+
+  // Get optimal animation settings
+  const getOptimalAnimationSettings = useCallback(() => {
+    const settings = {
+      duration,
+      easing,
+      shouldAnimate,
+      complexity,
+      frameRate}
+    
+    switch (state.throttleLevel) {
+      case 'aggressive'= 150
+        settings.easing = 'linear'
+        settings.shouldAnimate = false
+        settings.complexity = 'minimal'
+        settings.frameRate = 30
+        break
+      case 'moderate'= 200
+        settings.easing = 'ease-out'
+        settings.shouldAnimate = true
+        settings.complexity = 'low'
+        settings.frameRate = 45
+        break
+      case 'light'= 250
+        settings.easing = 'ease-out'
+        settings.shouldAnimate = true
+        settings.complexity = 'medium'
+        settings.frameRate = 50
+        break
+      default= 300
+        settings.easing = 'ease-out'
+        settings.shouldAnimate = true
+        settings.complexity = 'high'
+        settings.frameRate = 60
+    }
+    
+    // Override for reduced motion
+    if (state.reducedMotion) {
+      settings.duration = 100
+      settings.easing = 'linear'
+      settings.complexity = 'minimal'
+      settings.frameRate = 30
+    }
+    
+    return settings
+  }, [state.throttleLevel, state.reducedMotion])
+
+  // Update user preferences
+  const updateUserPreference = useCallback((preference) => {
+    if (!enableUserPreferences) return
+
+    setState(prev => ({
+      ...prev,
+      userPreference}))
+    
+    callbacks.onUserPreferenceChange?.(preference)
+    
+    // Apply optimizations based on new preference
+    setTimeout(() => {
+      applyAnimationThrottling()
+    }, 100)
+  }, [enableUserPreferences, callbacks, applyAnimationThrottling])
+
+  // Initialize monitoring
+  useEffect(() => {
+    try {
+      // Get initial battery status
+      if (enableBatteryMonitoring) {
+        getBatteryStatus()
+        batteryCheckIntervalRef.current = window.setInterval(getBatteryStatus, 10000)
+      }
+      
+      // Set up performance monitoring
+      if (enablePerformanceThrottling) {
+        performanceTimerRef.current = window.setInterval(measurePerformance, 5000)
+      }
+      
+      // Check reduced motion preference
+      if (enableReducedMotion) {
+        checkReducedMotion()
+        
+        // Listen for preference changes
+        const mediaQuery = window.matchMedia('(prefers-reduced-motion)')
+        const handleChange = () => checkReducedMotion()
+        mediaQuery.addEventListener('change', handleChange)
+        
+        return () => mediaQuery.removeEventListener('change', handleChange)
+      }
+    } catch (error) {
+      console.warn('Battery animation initialization failed, error)
+    }
+  }, [enableBatteryMonitoring, enablePerformanceThrottling, enableReducedMotion, getBatteryStatus, measurePerformance, checkReducedMotion])
+
+  // Apply throttling when state changes
+  useEffect(() => {
+    if (enableAutomaticOptimization) {
+      applyAnimationThrottling()
+    }
+  }, [enableAutomaticOptimization, applyAnimationThrottling])
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (performanceTimerRef.current) {
+        clearInterval(performanceTimerRef.current)
+      }
+      if (batteryCheckIntervalRef.current) {
+        clearInterval(batteryCheckIntervalRef.current)
+      }
+    }
+  }, [])
+
+  return {
+    // State
+    state,
+    isOptimizing,
+    optimizations,
+    
+    // Actions
+    getBatteryStatus,
+    measurePerformance,
+    checkReducedMotion,
+    applyAnimationThrottling,
+    updateUserPreference,
+    
+    // Computed values
+    batteryPercentage),
+    shouldDisableAnimations=== 'aggressive' || state.reducedMotion,
+    animationSettings),
+    recommendations),
+    
+    // Utility functions
+    isAnimationOptimized) => state.throttleLevel !== 'none',
+    getBatteryHealth) => {
+      if (state.batteryLevel >= 0.8) return 'excellent'
+      if (state.batteryLevel >= 0.6) return 'good'
+      if (state.batteryLevel >= 0.4) return 'fair'
+      if (state.batteryLevel >= 0.2) return 'poor'
+      return 'critical'
+    }
+  }
+}
+
+export default useBatteryAnimations

package/dist/hooks/use-battery-animations.js

@@ -0,0 +1,359 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+
+export interface BatteryAnimationConfig {
+  enableBatteryMonitoring?}
+
+export interface BatteryAnimationState {
+  batteryLevel}
+
+export interface BatteryAnimationCallbacks {
+  onBatteryLevelChange?, isLow) => void
+  onPerformanceWarning?, shouldThrottle) => void
+  onAnimationThrottled?, reason) => void
+  onUserPreferenceChange?) => void
+  onReducedMotionChange?) => void
+}
+
+export const useBatteryAnimations = (
+  config= {},
+  callbacks= {}
+) => {
+  const {
+    enableBatteryMonitoring = true,
+    enablePerformanceThrottling = true,
+    enableReducedMotion = true,
+    enableUserPreferences = true,
+    enableAutomaticOptimization = true,
+    lowBatteryThreshold = 0.2,
+    criticalBatteryThreshold = 0.1,
+    performanceThrottleThreshold = 70
+  } = config
+
+  const [state, setState] = useState<BatteryAnimationState>({
+    batteryLevel,
+    isLowBattery,
+    isCriticalBattery,
+    isCharging,
+    performanceScore,
+    shouldThrottle,
+    throttleLevel,
+    reducedMotion,
+    userPreference})
+
+  const [isOptimizing, setIsOptimizing] = useState(false)
+  const [optimizations, setOptimizations] = useState<string[]>([])
+  const batteryRef = useRef<any>(null)
+  const performanceTimerRef = useRef<number | null>(null)
+  const batteryCheckIntervalRef = useRef<number | null>(null)
+
+  // Battery level detection
+  const getBatteryStatus = useCallback(async ()=> {
+    if (!enableBatteryMonitoring || !('getBattery' in navigator)) return
+
+    try {
+      const battery = await (navigator as any).getBattery()
+      batteryRef.current = battery
+      
+      const batteryLevel = battery.level
+      const isCharging = battery.charging
+      const isLowBattery = batteryLevel <= lowBatteryThreshold
+      const isCriticalBattery = batteryLevel <= criticalBatteryThreshold
+      
+      setState(prev => ({
+        ...prev,
+        batteryLevel,
+        isLowBattery,
+        isCriticalBattery,
+        isCharging
+      }))
+      
+      callbacks.onBatteryLevelChange?.(batteryLevel, isLowBattery)
+    } catch (error) {
+      console.warn('Battery API not available, error)
+    }
+  }, [enableBatteryMonitoring, lowBatteryThreshold, criticalBatteryThreshold, callbacks])
+
+  // Performance monitoring
+  const measurePerformance = useCallback(() => {
+    if (!enablePerformanceThrottling) return
+
+    try {
+      // Simulate performance measurement
+      const performanceScore = Math.random() * 100
+      const shouldThrottle = performanceScore < performanceThrottleThreshold
+      
+      setState(prev => ({
+        ...prev,
+        performanceScore,
+        shouldThrottle
+      }))
+      
+      if (shouldThrottle) {
+        callbacks.onPerformanceWarning?.(performanceScore, shouldThrottle)
+      }
+    } catch (error) {
+      console.warn('Performance measurement failed, error)
+    }
+  }, [enablePerformanceThrottling, performanceThrottleThreshold, callbacks])
+
+  // Reduced motion detection
+  const checkReducedMotion = useCallback(() => {
+    if (!enableReducedMotion) return
+
+    try {
+      const reducedMotion = window.matchMedia('(prefers-reduced-motion)').matches
+      
+      setState(prev => ({
+        ...prev,
+        reducedMotion
+      }))
+      
+      callbacks.onReducedMotionChange?.(reducedMotion)
+    } catch (error) {
+      console.warn('Reduced motion detection failed, error)
+    }
+  }, [enableReducedMotion, callbacks])
+
+  // Animation throttling based on battery and performance
+  const applyAnimationThrottling = useCallback(() => {
+    if (!enablePerformanceThrottling) return
+
+    setIsOptimizing(true)
+    
+    setTimeout(() => {
+      let throttleLevel= 'none'
+      let optimizations] = []
+      
+      // Battery-based throttling
+      if (state.isCriticalBattery) {
+        throttleLevel = 'aggressive'
+        optimizations.push('Critical battery)
+        optimizations.push('All non-essential animations disabled')
+        optimizations.push('Only essential UI transitions enabled')
+      } else if (state.isLowBattery) {
+        throttleLevel = 'moderate'
+        optimizations.push('Low battery)
+        optimizations.push('Animation complexity reduced by 60%')
+        optimizations.push('Performance optimizations enabled')
+      } else if (state.batteryLevel < 0.5) {
+        throttleLevel = 'light'
+        optimizations.push('Medium battery)
+        optimizations.push('Animation complexity reduced by 30%')
+        optimizations.push('Battery optimization enabled')
+      }
+      
+      // Performance-based throttling
+      if (state.shouldThrottle) {
+        if (throttleLevel === 'none') throttleLevel = 'light'
+        optimizations.push('Performance-based throttling applied')
+        optimizations.push('Animation frame rate optimized')
+      }
+      
+      // Reduced motion support
+      if (state.reducedMotion) {
+        if (throttleLevel === 'none') throttleLevel = 'light'
+        optimizations.push('Reduced motion preference respected')
+        optimizations.push('Animation duration minimized')
+      }
+      
+      // User preference consideration
+      if (state.userPreference === 'battery') {
+        if (throttleLevel === 'none') throttleLevel = 'light'
+        optimizations.push('User preference)
+      } else if (state.userPreference === 'accessibility') {
+        if (throttleLevel === 'none') throttleLevel = 'light'
+        optimizations.push('User preference)
+      }
+      
+      setState(prev => ({
+        ...prev,
+        throttleLevel
+      }))
+      
+      setOptimizations(prev => [...prev, ...optimizations])
+      setIsOptimizing(false)
+      
+      callbacks.onAnimationThrottled?.(throttleLevel, 'Battery and performance optimization')
+      
+      optimizations.forEach(optimization => {
+        console.log('Animation optimization, optimization)
+      })
+    }, 300)
+  }, [enablePerformanceThrottling, state, callbacks])
+
+  // Get animation recommendations
+  const getAnimationRecommendations = useCallback(() => {
+    const recommendations = []
+    
+    if (state.isCriticalBattery) {
+      recommendations.push('Critical battery)
+      recommendations.push('Use static UI elements instead of animated ones')
+      recommendations.push('Minimize DOM updates and reflows')
+    } else if (state.isLowBattery) {
+      recommendations.push('Low battery)
+      recommendations.push('Use simple transforms instead of complex animations')
+      recommendations.push('Limit animation duration to under 300ms')
+    } else if (state.batteryLevel < 0.5) {
+      recommendations.push('Medium battery)
+      recommendations.push('Use CSS transforms instead of JavaScript animations')
+      recommendations.push('Implement animation pausing when not in viewport')
+    }
+    
+    if (state.shouldThrottle) {
+      recommendations.push('Performance issue)
+      recommendations.push('Use requestAnimationFrame for smooth animations')
+      recommendations.push('Implement animation debouncing')
+    }
+    
+    if (state.reducedMotion) {
+      recommendations.push('Accessibility)
+      recommendations.push('Provide alternative non-animated experiences')
+      recommendations.push('Use subtle transitions instead of animations')
+    }
+    
+    return recommendations
+  }, [state])
+
+  // Get optimal animation settings
+  const getOptimalAnimationSettings = useCallback(() => {
+    const settings = {
+      duration,
+      easing,
+      shouldAnimate,
+      complexity,
+      frameRate}
+    
+    switch (state.throttleLevel) {
+      case 'aggressive'= 150
+        settings.easing = 'linear'
+        settings.shouldAnimate = false
+        settings.complexity = 'minimal'
+        settings.frameRate = 30
+        break
+      case 'moderate'= 200
+        settings.easing = 'ease-out'
+        settings.shouldAnimate = true
+        settings.complexity = 'low'
+        settings.frameRate = 45
+        break
+      case 'light'= 250
+        settings.easing = 'ease-out'
+        settings.shouldAnimate = true
+        settings.complexity = 'medium'
+        settings.frameRate = 50
+        break
+      default= 300
+        settings.easing = 'ease-out'
+        settings.shouldAnimate = true
+        settings.complexity = 'high'
+        settings.frameRate = 60
+    }
+    
+    // Override for reduced motion
+    if (state.reducedMotion) {
+      settings.duration = 100
+      settings.easing = 'linear'
+      settings.complexity = 'minimal'
+      settings.frameRate = 30
+    }
+    
+    return settings
+  }, [state.throttleLevel, state.reducedMotion])
+
+  // Update user preferences
+  const updateUserPreference = useCallback((preference) => {
+    if (!enableUserPreferences) return
+
+    setState(prev => ({
+      ...prev,
+      userPreference}))
+    
+    callbacks.onUserPreferenceChange?.(preference)
+    
+    // Apply optimizations based on new preference
+    setTimeout(() => {
+      applyAnimationThrottling()
+    }, 100)
+  }, [enableUserPreferences, callbacks, applyAnimationThrottling])
+
+  // Initialize monitoring
+  useEffect(() => {
+    try {
+      // Get initial battery status
+      if (enableBatteryMonitoring) {
+        getBatteryStatus()
+        batteryCheckIntervalRef.current = window.setInterval(getBatteryStatus, 10000)
+      }
+      
+      // Set up performance monitoring
+      if (enablePerformanceThrottling) {
+        performanceTimerRef.current = window.setInterval(measurePerformance, 5000)
+      }
+      
+      // Check reduced motion preference
+      if (enableReducedMotion) {
+        checkReducedMotion()
+        
+        // Listen for preference changes
+        const mediaQuery = window.matchMedia('(prefers-reduced-motion)')
+        const handleChange = () => checkReducedMotion()
+        mediaQuery.addEventListener('change', handleChange)
+        
+        return () => mediaQuery.removeEventListener('change', handleChange)
+      }
+    } catch (error) {
+      console.warn('Battery animation initialization failed, error)
+    }
+  }, [enableBatteryMonitoring, enablePerformanceThrottling, enableReducedMotion, getBatteryStatus, measurePerformance, checkReducedMotion])
+
+  // Apply throttling when state changes
+  useEffect(() => {
+    if (enableAutomaticOptimization) {
+      applyAnimationThrottling()
+    }
+  }, [enableAutomaticOptimization, applyAnimationThrottling])
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (performanceTimerRef.current) {
+        clearInterval(performanceTimerRef.current)
+      }
+      if (batteryCheckIntervalRef.current) {
+        clearInterval(batteryCheckIntervalRef.current)
+      }
+    }
+  }, [])
+
+  return {
+    // State
+    state,
+    isOptimizing,
+    optimizations,
+    
+    // Actions
+    getBatteryStatus,
+    measurePerformance,
+    checkReducedMotion,
+    applyAnimationThrottling,
+    updateUserPreference,
+    
+    // Computed values
+    batteryPercentage),
+    shouldDisableAnimations=== 'aggressive' || state.reducedMotion,
+    animationSettings),
+    recommendations),
+    
+    // Utility functions
+    isAnimationOptimized) => state.throttleLevel !== 'none',
+    getBatteryHealth) => {
+      if (state.batteryLevel >= 0.8) return 'excellent'
+      if (state.batteryLevel >= 0.6) return 'good'
+      if (state.batteryLevel >= 0.4) return 'fair'
+      if (state.batteryLevel >= 0.2) return 'poor'
+      return 'critical'
+    }
+  }
+}
+
+export default useBatteryAnimations