@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.17

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

@@ -1,288 +1,226 @@
-import { useState, useEffect, useCallback, useMemo } from 'react'
-import { useDevice } from './use-device'
-
-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
-}
-
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useDevice } from './use-device';
 export 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)
+    const deviceInfo = useDevice();
+    const [performanceMetrics, setPerformanceMetrics] = useState({
+        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;
+        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.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.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(() => {
+        const baseProfile = {
+            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';
         }
-      }
-    }
-
-    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
-  }
-}
-
+        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: getAnimationProfile(),
+        performanceMetrics,
+        deviceInfo,
+        getAnimationClasses,
+        getOptimizedDuration,
+        getOptimizedEasing,
+        shouldDisableAnimations,
+        isReducedMotion,
+        performanceMode,
+        shouldOptimizeForBattery
+    };
+};
 // Convenience hooks for specific use cases
-export const useAnimationDuration = (type: 'fast' | 'normal' | 'slow' = 'normal') => {
-  const { getOptimizedDuration } = useAnimationProfile()
-  return getOptimizedDuration(type)
-}
-
-export const useAnimationEasing = (type: keyof AnimationProfile['easing'] = 'ease') => {
-  const { getOptimizedEasing } = useAnimationProfile()
-  return getOptimizedEasing(type)
-}
-
+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()
-}
-
+    const { getAnimationClasses } = useAnimationProfile();
+    return getAnimationClasses();
+};
 export const usePerformanceMode = () => {
-  const { performanceMode, shouldOptimizeForBattery } = useAnimationProfile()
-  return { performanceMode, shouldOptimizeForBattery }
-}
+    const { performanceMode, shouldOptimizeForBattery } = useAnimationProfile();
+    return { performanceMode, shouldOptimizeForBattery };
+};