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

package/dist/hooks/use-animation-profile.d.ts

@@ -0,0 +1,285 @@
+export interface AnimationProfile {
+  duration: {
+    fast: string
+    normal: string
+    slow: string
+  }
+  easing: {
+    ease: string
+    easeIn: string
+    easeOut: string
+    easeInOut: string
+    bounce: string
+  }
+  performance: {
+    mode: 'high' | 'medium' | 'low'
+    batteryOptimized: boolean
+    reducedMotion: boolean
+  }
+}
+
+export interface PerformanceMetrics {
+  fps: number
+  memoryUsage?: number
+  batteryLevel?: number
+  isLowPowerMode?: boolean
+}
+
+export declare const useAnimationProfile: () => {
+  const deviceInfo = useDevice()
+  const [performanceMetrics, setPerformanceMetrics] = useState<PerformanceMetrics>({
+    fps: 60,
+    memoryUsage: undefined,
+    batteryLevel: undefined,
+    isLowPowerMode: false
+  })
+  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: reduce)')
+        setIsReducedMotion(reducedMotionQuery.matches)
+
+        reducedMotionQuery.addEventListener('change', (e) => {
+          setIsReducedMotion(e.matches)
+        })
+      }
+    }
+
+    checkReducedMotion()
+  }, [])
+
+  // Monitor frame rate
+  useEffect(() => {
+    let frameCount = 0
+    let lastTime = performance.now()
+    let animationId: number
+
+    const measureFPS = () => {
+      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: memory.usedJSHeapSize / memory.jsHeapSizeLimit
+        }))
+      }
+    }
+
+    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: battery.level,
+            isLowPowerMode: battery.level < 0.2
+          }))
+
+          battery.addEventListener('levelchange', () => {
+            setPerformanceMetrics(prev => ({
+              ...prev,
+              batteryLevel: battery.level,
+              isLowPowerMode: battery.level < 0.2
+            }))
+          })
+        } 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((): AnimationProfile => {
+    const baseProfile: AnimationProfile = {
+      duration: {
+        fast: '0.15s',
+        normal: '0.3s',
+        slow: '0.5s'
+      },
+      easing: {
+        ease: 'ease',
+        easeIn: 'ease-in',
+        easeOut: 'ease-out',
+        easeInOut: 'ease-in-out',
+        bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
+      },
+      performance: {
+        mode: performanceMode,
+        batteryOptimized: shouldOptimizeForBattery,
+        reducedMotion: isReducedMotion
+      }
+    }
+
+    // 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: 'fast' | 'normal' | 'slow' = 'normal') => {
+    const profile = getAnimationProfile()
+    return profile.duration[type]
+  }, [getAnimationProfile])
+
+  // Get optimized easing for specific use case
+  const getOptimizedEasing = useCallback((type: keyof AnimationProfile['easing'] = '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: getAnimationProfile(),
+    performanceMetrics,
+    deviceInfo,
+    getAnimationClasses,
+    getOptimizedDuration,
+    getOptimizedEasing,
+    shouldDisableAnimations,
+    isReducedMotion,
+    performanceMode,
+    shouldOptimizeForBattery
+  }
+}
+
+// Convenience hooks for specific use cases
+export declare const useAnimationDuration: (type: 'fast' | 'normal' | 'slow' = 'normal') => {
+  const { getOptimizedDuration } = useAnimationProfile()
+  return getOptimizedDuration(type)
+}
+
+export declare const useAnimationEasing: (type: keyof AnimationProfile['easing'] = 'ease') => {
+  const { getOptimizedEasing } = useAnimationProfile()
+  return getOptimizedEasing(type)
+}
+
+export declare const useAnimationClasses: () => {
+  const { getAnimationClasses } = useAnimationProfile()
+  return getAnimationClasses()
+}
+
+export declare const usePerformanceMode: () => {
+  const { performanceMode, shouldOptimizeForBattery } = useAnimationProfile()
+  return { performanceMode, shouldOptimizeForBattery }
+}

package/dist/hooks/use-animation-profile.esm.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 }
+}