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

package/dist/hooks/use-animation-profile.js

@@ -0,0 +1,259 @@
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import { useDevice } from './use-device'
+
+export interface AnimationProfile {
+  duration}
+  easing}
+  performance}
+}
+
+export interface PerformanceMetrics {
+  fps}
+
+export const useAnimationProfile = () => {
+  const deviceInfo = useDevice()
+  const [performanceMetrics, setPerformanceMetrics] = useState<PerformanceMetrics>({
+    fps,
+    memoryUsage,
+    batteryLevel,
+    isLowPowerMode})
+  const [isReducedMotion, setIsReducedMotion] = useState(false)
+
+  // Check for reduced motion preference
+  useEffect(() => {
+    const checkReducedMotion = () => {
+      if (typeof window !== 'undefined' && window.matchMedia) {
+        const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion)')
+        setIsReducedMotion(reducedMotionQuery.matches)
+        
+        reducedMotionQuery.addEventListener('change', (e) => {
+          setIsReducedMotion(e.matches)
+        })
+      }
+    }
+    
+    checkReducedMotion()
+  }, [])
+
+  // Monitor frame rate
+  useEffect(() => {
+    let frameCount = 0
+    let lastTime = performance.now()
+    let animationId= () => {
+      frameCount++
+      const currentTime = performance.now()
+      
+      if (currentTime - lastTime >= 1000) {
+        const fps = Math.round((frameCount * 1000) / (currentTime - lastTime))
+        setPerformanceMetrics(prev => ({ ...prev, fps }))
+        frameCount = 0
+        lastTime = currentTime
+      }
+      
+      animationId = requestAnimationFrame(measureFPS)
+    }
+
+    animationId = requestAnimationFrame(measureFPS)
+
+    return () => {
+      if (animationId) {
+        cancelAnimationFrame(animationId)
+      }
+    }
+  }, [])
+
+  // Monitor memory usage (if available)
+  useEffect(() => {
+    const updateMemoryInfo = () => {
+      if ('memory' in performance) {
+        const memory = (performance as any).memory
+        setPerformanceMetrics(prev => ({
+          ...prev,
+          memoryUsage}))
+      }
+    }
+
+    const interval = setInterval(updateMemoryInfo, 5000)
+    updateMemoryInfo()
+
+    return () => clearInterval(interval)
+  }, [])
+
+  // Monitor battery status (if available)
+  useEffect(() => {
+    const updateBatteryInfo = async () => {
+      if ('getBattery' in navigator) {
+        try {
+          const battery = await (navigator as any).getBattery()
+          setPerformanceMetrics(prev => ({
+            ...prev,
+            batteryLevel,
+            isLowPowerMode}))
+
+          battery.addEventListener('levelchange', () => {
+            setPerformanceMetrics(prev => ({
+              ...prev,
+              batteryLevel,
+              isLowPowerMode}))
+          })
+        } catch (error) {
+          console.warn('Battery API not available, error)
+        }
+      }
+    }
+
+    updateBatteryInfo()
+  }, [])
+
+  // Determine performance mode based on metrics
+  const performanceMode = useMemo(() => {
+    if (performanceMetrics.fps < 30) return 'low'
+    if (performanceMetrics.fps < 50) return 'medium'
+    return 'high'
+  }, [performanceMetrics.fps])
+
+  // Determine if battery optimization should be enabled
+  const shouldOptimizeForBattery = useMemo(() => {
+    return (
+      performanceMetrics.isLowPowerMode ||
+      (performanceMetrics.batteryLevel !== undefined && performanceMetrics.batteryLevel < 0.3) ||
+      performanceMode === 'low'
+    )
+  }, [performanceMetrics.isLowPowerMode, performanceMetrics.batteryLevel, performanceMode])
+
+  // Get device-specific animation profile
+  const getAnimationProfile = useCallback(()=> {
+    const baseProfile= {
+      duration,
+        normal,
+        slow},
+      easing,
+        easeIn,
+        easeOut,
+        easeInOut,
+        bounce, -0.55, 0.265, 1.55)'
+      },
+      performance,
+        batteryOptimized,
+        reducedMotion}
+    }
+
+    // Apply device-specific optimizations
+    if (deviceInfo.isMobile) {
+      baseProfile.duration.fast = '0.1s'
+      baseProfile.duration.normal = '0.2s'
+      baseProfile.duration.slow = '0.3s'
+    } else if (deviceInfo.isTablet) {
+      baseProfile.duration.fast = '0.15s'
+      baseProfile.duration.normal = '0.25s'
+      baseProfile.duration.slow = '0.4s'
+    }
+
+    // Apply performance-based optimizations
+    if (performanceMode === 'low' || shouldOptimizeForBattery) {
+      baseProfile.duration.fast = '0.05s'
+      baseProfile.duration.normal = '0.1s'
+      baseProfile.duration.slow = '0.15s'
+    }
+
+    // Apply reduced motion preferences
+    if (isReducedMotion) {
+      baseProfile.duration.fast = '0.01s'
+      baseProfile.duration.normal = '0.01s'
+      baseProfile.duration.slow = '0.01s'
+      baseProfile.easing.ease = 'linear'
+      baseProfile.easing.easeIn = 'linear'
+      baseProfile.easing.easeOut = 'linear'
+      baseProfile.easing.easeInOut = 'linear'
+      baseProfile.easing.bounce = 'linear'
+    }
+
+    return baseProfile
+  }, [deviceInfo.isMobile, deviceInfo.isTablet, performanceMode, shouldOptimizeForBattery, isReducedMotion])
+
+  // Get CSS classes for the current animation profile
+  const getAnimationClasses = useCallback(() => {
+    const profile = getAnimationProfile()
+    const classes = []
+
+    // Device-specific classes
+    if (deviceInfo.isMobile) {
+      classes.push('coach-stan-mobile-animation')
+    } else if (deviceInfo.isTablet) {
+      classes.push('coach-stan-tablet-animation')
+    } else {
+      classes.push('coach-stan-desktop-animation')
+    }
+
+    // Performance-based classes
+    if (profile.performance.mode === 'low' || profile.performance.batteryOptimized) {
+      classes.push('coach-stan-performance-mode')
+    }
+
+    if (profile.performance.batteryOptimized) {
+      classes.push('coach-stan-battery-saver')
+    }
+
+    // Reduced motion classes
+    if (profile.performance.reducedMotion) {
+      classes.push('reduced-motion')
+    }
+
+    return classes.join(' ')
+  }, [deviceInfo.isMobile, deviceInfo.isTablet, getAnimationProfile])
+
+  // Get optimized duration for specific use case
+  const getOptimizedDuration = useCallback((type= 'normal') => {
+    const profile = getAnimationProfile()
+    return profile.duration[type]
+  }, [getAnimationProfile])
+
+  // Get optimized easing for specific use case
+  const getOptimizedEasing = useCallback((type] = 'ease') => {
+    const profile = getAnimationProfile()
+    return profile.easing[type]
+  }, [getAnimationProfile])
+
+  // Check if animations should be disabled
+  const shouldDisableAnimations = useCallback(() => {
+    return (
+      isReducedMotion ||
+      performanceMode === 'low' ||
+      shouldOptimizeForBattery
+    )
+  }, [isReducedMotion, performanceMode, shouldOptimizeForBattery])
+
+  return {
+    profile),
+    performanceMetrics,
+    deviceInfo,
+    getAnimationClasses,
+    getOptimizedDuration,
+    getOptimizedEasing,
+    shouldDisableAnimations,
+    isReducedMotion,
+    performanceMode,
+    shouldOptimizeForBattery
+  }
+}
+
+// Convenience hooks for specific use cases
+export const useAnimationDuration = (type= 'normal') => {
+  const { getOptimizedDuration } = useAnimationProfile()
+  return getOptimizedDuration(type)
+}
+
+export const useAnimationEasing = (type] = 'ease') => {
+  const { getOptimizedEasing } = useAnimationProfile()
+  return getOptimizedEasing(type)
+}
+
+export const useAnimationClasses = () => {
+  const { getAnimationClasses } = useAnimationProfile()
+  return getAnimationClasses()
+}
+
+export const usePerformanceMode = () => {
+  const { performanceMode, shouldOptimizeForBattery } = useAnimationProfile()
+  return { performanceMode, shouldOptimizeForBattery }
+}

package/dist/hooks/use-battery-animations.d.ts

@@ -0,0 +1,382 @@
+export interface BatteryAnimationConfig {
+  enableBatteryMonitoring?: boolean
+  enablePerformanceThrottling?: boolean
+  enableReducedMotion?: boolean
+  enableUserPreferences?: boolean
+  enableAutomaticOptimization?: boolean
+  lowBatteryThreshold?: number
+  criticalBatteryThreshold?: number
+  performanceThrottleThreshold?: number
+  animationComplexityLevels?: 'low' | 'medium' | 'high'
+}
+
+export interface BatteryAnimationState {
+  batteryLevel: number
+  isLowBattery: boolean
+  isCriticalBattery: boolean
+  isCharging: boolean
+  performanceScore: number
+  shouldThrottle: boolean
+  throttleLevel: 'none' | 'light' | 'moderate' | 'aggressive'
+  reducedMotion: boolean
+  userPreference: 'performance' | 'balanced' | 'battery' | 'accessibility'
+}
+
+export interface BatteryAnimationCallbacks {
+  onBatteryLevelChange?: (level: number, isLow: boolean) => void
+  onPerformanceWarning?: (score: number, shouldThrottle: boolean) => void
+  onAnimationThrottled?: (level: string, reason: string) => void
+  onUserPreferenceChange?: (preference: string) => void
+  onReducedMotionChange?: (enabled: boolean) => void
+}
+
+export declare const useBatteryAnimations: (
+  config: BatteryAnimationConfig = {},
+  callbacks: BatteryAnimationCallbacks = {}
+) => {
+  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: 1,
+    isLowBattery: false,
+    isCriticalBattery: false,
+    isCharging: false,
+    performanceScore: 100,
+    shouldThrottle: false,
+    throttleLevel: 'none',
+    reducedMotion: false,
+    userPreference: 'balanced'
+  })
+
+  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 (): Promise<void> => {
+    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: reduce)').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' | 'light' | 'moderate' | 'aggressive' = 'none'
+      let optimizations: string[] = []
+
+      // Battery-based throttling
+      if (state.isCriticalBattery) {
+        throttleLevel = 'aggressive'
+        optimizations.push('Critical battery: Maximum animation throttling applied')
+        optimizations.push('All non-essential animations disabled')
+        optimizations.push('Only essential UI transitions enabled')
+      } else if (state.isLowBattery) {
+        throttleLevel = 'moderate'
+        optimizations.push('Low battery: Enhanced animation throttling applied')
+        optimizations.push('Animation complexity reduced by 60%')
+        optimizations.push('Performance optimizations enabled')
+      } else if (state.batteryLevel < 0.5) {
+        throttleLevel = 'light'
+        optimizations.push('Medium battery: Light animation throttling applied')
+        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: Battery optimization enabled')
+      } else if (state.userPreference === 'accessibility') {
+        if (throttleLevel === 'none') throttleLevel = 'light'
+        optimizations.push('User preference: Accessibility optimization enabled')
+      }
+
+      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: Disable all animations except essential transitions')
+      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: Reduce animation complexity significantly')
+      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: Consider light animation optimization')
+      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: Reduce animation frame rate')
+      recommendations.push('Use requestAnimationFrame for smooth animations')
+      recommendations.push('Implement animation debouncing')
+    }
+
+    if (state.reducedMotion) {
+      recommendations.push('Accessibility: Respect reduced motion preference')
+      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: 300,
+      easing: 'ease-out',
+      shouldAnimate: true,
+      complexity: 'medium',
+      frameRate: 60
+    }
+
+    switch (state.throttleLevel) {
+      case 'aggressive':
+        settings.duration = 150
+        settings.easing = 'linear'
+        settings.shouldAnimate = false
+        settings.complexity = 'minimal'
+        settings.frameRate = 30
+        break
+      case 'moderate':
+        settings.duration = 200
+        settings.easing = 'ease-out'
+        settings.shouldAnimate = true
+        settings.complexity = 'low'
+        settings.frameRate = 45
+        break
+      case 'light':
+        settings.duration = 250
+        settings.easing = 'ease-out'
+        settings.shouldAnimate = true
+        settings.complexity = 'medium'
+        settings.frameRate = 50
+        break
+      default:
+        settings.duration = 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: string) => {
+    if (!enableUserPreferences) return
+
+    setState(prev => ({
+      ...prev,
+      userPreference: preference as any
+    }))
+
+    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: reduce)')
+        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: Math.round(state.batteryLevel * 100),
+    shouldDisableAnimations: state.throttleLevel === 'aggressive' || state.reducedMotion,
+    animationSettings: getOptimalAnimationSettings(),
+    recommendations: getAnimationRecommendations(),
+
+    // 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