@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.4 → 0.1.5

package/src/hooks/use-advanced-transition-system.ts

@@ -0,0 +1,393 @@
+import { useState, useCallback, useRef, useEffect } from 'react'
+
+export interface TransitionConfig {
+  duration?: number
+  easing?: 'ease-out' | 'ease-in' | 'ease-in-out' | 'ease-out-quint' | 'ease-in-quint' | 'ease-in-out-quint' | 'ease-out-expo' | 'ease-in-expo' | 'ease-in-out-expo' | 'ease-out-circ' | 'ease-in-circ' | 'ease-in-out-circ'
+  delay?: number
+  performance?: boolean
+  deviceOptimization?: boolean
+  accessibility?: boolean
+  batteryAware?: boolean
+}
+
+export interface TransitionState {
+  isTransitioning: boolean
+  currentEasing: string
+  currentDuration: number
+  currentDelay: number
+  performanceScore: number
+  deviceType: 'mobile' | 'tablet' | 'desktop'
+  batteryLevel: 'normal' | 'low' | 'critical'
+  reducedMotion: boolean
+}
+
+export interface TransitionPerformanceMetrics {
+  frameRate: number
+  memoryUsage: number
+  transitionTime: number
+  smoothness: number
+  batteryImpact: number
+}
+
+export interface AdvancedTransitionSystemCallbacks {
+  onTransitionStart?: (config: TransitionConfig) => void
+  onTransitionComplete?: (duration: number) => void
+  onPerformanceOptimized?: (metrics: TransitionPerformanceMetrics) => void
+  onDeviceOptimized?: (deviceType: string) => void
+  onAccessibilityEnhanced?: (feature: string) => void
+}
+
+export const useAdvancedTransitionSystem = (
+  config: TransitionConfig = {},
+  callbacks: AdvancedTransitionSystemCallbacks = {}
+) => {
+  const {
+    duration = 300,
+    easing = 'ease-out',
+    delay = 0,
+    performance: enablePerformance = true,
+    deviceOptimization = true,
+    accessibility = true,
+    batteryAware = true
+  } = config
+
+  const [transitionState, setTransitionState] = useState<TransitionState>({
+    isTransitioning: false,
+    currentEasing: easing,
+    currentDuration: duration,
+    currentDelay: delay,
+    performanceScore: 0,
+    deviceType: 'desktop',
+    batteryLevel: 'normal',
+    reducedMotion: false
+  })
+
+  const [performanceMetrics, setPerformanceMetrics] = useState<TransitionPerformanceMetrics>({
+    frameRate: 60,
+    memoryUsage: 0,
+    transitionTime: 0,
+    smoothness: 0,
+    batteryImpact: 0
+  })
+
+  const [isOptimizing, setIsOptimizing] = useState(false)
+  const [optimizations, setOptimizations] = useState<string[]>([])
+
+  const transitionStartTimeRef = useRef(0)
+  const frameCountRef = useRef(0)
+  const lastFrameTimeRef = useRef(0)
+  const performanceTimerRef = useRef<number | null>(null)
+
+
+  // Detect device type and optimize transitions accordingly
+  const detectDeviceType = useCallback(() => {
+    const width = window.innerWidth
+    
+    let deviceType: TransitionState['deviceType'] = 'desktop'
+    
+    if (width <= 480) {
+      deviceType = 'mobile'
+    } else if (width <= 768) {
+      deviceType = 'tablet'
+    } else {
+      deviceType = 'desktop'
+    }
+    
+    setTransitionState(prev => ({
+      ...prev,
+      deviceType
+    }))
+    
+    return deviceType
+  }, [])
+
+  // Detect reduced motion preference
+  const detectReducedMotion = useCallback(() => {
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    
+    setTransitionState(prev => ({
+      ...prev,
+      reducedMotion: prefersReducedMotion
+    }))
+    
+    return prefersReducedMotion
+  }, [])
+
+  // Simulate battery level detection (in real app, use Battery API)
+  const detectBatteryLevel = useCallback(() => {
+    // Simulate battery levels for demo purposes
+    const batteryLevels = ['normal', 'low', 'critical'] as const
+    const randomLevel = batteryLevels[Math.floor(Math.random() * batteryLevels.length)]
+    
+    setTransitionState(prev => ({
+      ...prev,
+      batteryLevel: randomLevel
+    }))
+    
+    return randomLevel
+  }, [])
+
+  // Optimize transition duration based on device and battery
+  const optimizeTransitionDuration = useCallback((baseDuration: number) => {
+    let optimizedDuration = baseDuration
+    
+    // Device-specific optimization
+    if (deviceOptimization) {
+      switch (transitionState.deviceType) {
+        case 'mobile':
+          optimizedDuration = Math.min(baseDuration, 200)
+          break
+        case 'tablet':
+          optimizedDuration = Math.min(baseDuration, 300)
+          break
+        case 'desktop':
+          optimizedDuration = baseDuration
+          break
+      }
+    }
+    
+    // Battery-aware optimization
+    if (batteryAware) {
+      switch (transitionState.batteryLevel) {
+        case 'low':
+          optimizedDuration = Math.min(optimizedDuration, 150)
+          break
+        case 'critical':
+          optimizedDuration = Math.min(optimizedDuration, 100)
+          break
+        case 'normal':
+        default:
+          break
+      }
+    }
+    
+    // Reduced motion optimization
+    if (transitionState.reducedMotion) {
+      optimizedDuration = 0
+    }
+    
+    return optimizedDuration
+  }, [deviceOptimization, batteryAware, transitionState.deviceType, transitionState.batteryLevel, transitionState.reducedMotion])
+
+  // Start a transition with optimization
+  const startTransition = useCallback((customConfig?: Partial<TransitionConfig>) => {
+    const finalConfig = { ...config, ...customConfig }
+    const optimizedDuration = optimizeTransitionDuration(finalConfig.duration || duration)
+    
+    setTransitionState(prev => ({
+      ...prev,
+      isTransitioning: true,
+      currentDuration: optimizedDuration,
+      currentDelay: finalConfig.delay || delay,
+      currentEasing: finalConfig.easing || easing
+    }))
+    
+    transitionStartTimeRef.current = performance.now()
+    frameCountRef.current = 0
+    lastFrameTimeRef.current = performance.now()
+    
+    callbacks.onTransitionStart?.(finalConfig)
+    
+    // Complete transition after duration
+    setTimeout(() => {
+      setTransitionState(prev => ({
+        ...prev,
+        isTransitioning: false
+      }))
+      
+      const actualDuration = performance.now() - transitionStartTimeRef.current
+      callbacks.onTransitionComplete?.(actualDuration)
+    }, optimizedDuration + (finalConfig.delay || delay))
+  }, [config, duration, delay, easing, optimizeTransitionDuration, callbacks])
+
+  // Performance monitoring
+  const startPerformanceMonitoring = useCallback(() => {
+    if (!enablePerformance) return () => {}
+    
+    const measurePerformance = () => {
+      const currentTime = performance.now()
+      const deltaTime = currentTime - lastFrameTimeRef.current
+      
+      if (deltaTime > 0) {
+        frameCountRef.current++
+        const currentFrameRate = 1000 / deltaTime
+        
+        // Calculate smoothness based on frame rate consistency
+        const smoothness = Math.max(0, 100 - Math.abs(currentFrameRate - 60))
+        
+        // Simulate memory usage (in real app, use Performance API)
+        const memoryUsage = Math.random() * 100
+        
+        // Calculate transition time if transitioning
+        const transitionTime = transitionState.isTransitioning 
+          ? currentTime - transitionStartTimeRef.current 
+          : 0
+        
+        // Calculate battery impact based on performance
+        const batteryImpact = Math.max(0, 100 - (currentFrameRate * 0.5) - memoryUsage * 0.3)
+        
+        setPerformanceMetrics({
+          frameRate: Math.round(currentFrameRate),
+          memoryUsage: Math.round(memoryUsage),
+          transitionTime: Math.round(transitionTime),
+          smoothness: Math.round(smoothness),
+          batteryImpact: Math.round(batteryImpact)
+        })
+        
+        // Update performance score
+        const overallScore = Math.round((smoothness + batteryImpact) / 2)
+        setTransitionState(prev => ({
+          ...prev,
+          performanceScore: overallScore
+        }))
+        
+        lastFrameTimeRef.current = currentTime
+        
+        callbacks.onPerformanceOptimized?.({
+          frameRate: Math.round(currentFrameRate),
+          memoryUsage: Math.round(memoryUsage),
+          transitionTime: Math.round(transitionTime),
+          smoothness: Math.round(smoothness),
+          batteryImpact: Math.round(batteryImpact)
+        })
+      }
+      
+      performanceTimerRef.current = requestAnimationFrame(measurePerformance)
+    }
+    
+    performanceTimerRef.current = requestAnimationFrame(measurePerformance)
+    
+    return () => {
+      if (performanceTimerRef.current) {
+        cancelAnimationFrame(performanceTimerRef.current)
+      }
+    }
+  }, [performance, transitionState.isTransitioning, callbacks])
+
+  // Device optimization
+  const optimizeForDevice = useCallback(() => {
+    if (!deviceOptimization) return
+    
+    const deviceType = detectDeviceType()
+    const optimizations: string[] = []
+    
+    switch (deviceType) {
+      case 'mobile':
+        optimizations.push('Mobile-optimized transitions (200ms max)')
+        optimizations.push('Reduced animation complexity')
+        optimizations.push('Touch-friendly timing')
+        break
+      case 'tablet':
+        optimizations.push('Tablet-optimized transitions (300ms max)')
+        optimizations.push('Balanced performance and smoothness')
+        break
+      case 'desktop':
+        optimizations.push('Desktop-optimized transitions (full duration)')
+        optimizations.push('Maximum visual quality')
+        break
+    }
+    
+    setOptimizations(prev => [...prev, ...optimizations])
+    callbacks.onDeviceOptimized?.(deviceType)
+  }, [deviceOptimization, detectDeviceType, callbacks])
+
+  // Accessibility enhancement
+  const enhanceAccessibility = useCallback(() => {
+    if (!accessibility) return
+    
+    const enhancements = [
+      'Reduced motion support',
+      'Screen reader compatibility',
+      'Focus management during transitions',
+      'ARIA transition states',
+      'Keyboard navigation support'
+    ]
+    
+    enhancements.forEach(enhancement => {
+      callbacks.onAccessibilityEnhanced?.(enhancement)
+    })
+  }, [accessibility, callbacks])
+
+  // Auto-optimize on mount
+  const autoOptimize = useCallback(() => {
+    setIsOptimizing(true)
+    
+    setTimeout(() => {
+      detectDeviceType()
+      detectReducedMotion()
+      detectBatteryLevel()
+      optimizeForDevice()
+      enhanceAccessibility()
+      
+      setIsOptimizing(false)
+    }, 200)
+  }, [detectDeviceType, detectReducedMotion, detectBatteryLevel, optimizeForDevice, enhanceAccessibility])
+
+  // Initialize on mount
+  useEffect(() => {
+    autoOptimize()
+    
+    const stopPerformanceMonitoring = startPerformanceMonitoring()
+    
+    // Listen for device changes
+    const handleResize = () => {
+      detectDeviceType()
+    }
+    
+    // Listen for reduced motion changes
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
+    const handleMotionChange = () => {
+      detectReducedMotion()
+    }
+    
+    window.addEventListener('resize', handleResize)
+    mediaQuery.addEventListener('change', handleMotionChange)
+    
+    return () => {
+      stopPerformanceMonitoring()
+      window.removeEventListener('resize', handleResize)
+      mediaQuery.removeEventListener('change', handleMotionChange)
+    }
+  }, [autoOptimize, startPerformanceMonitoring, detectDeviceType, detectReducedMotion])
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (performanceTimerRef.current) {
+        cancelAnimationFrame(performanceTimerRef.current)
+      }
+    }
+  }, [])
+
+  return {
+    // State
+    transitionState,
+    performanceMetrics,
+    isOptimizing,
+    optimizations,
+    
+    // Functions
+    startTransition,
+    optimizeForDevice,
+    enhanceAccessibility,
+    startPerformanceMonitoring,
+    autoOptimize,
+    
+    // Utility functions
+    getTransitionDuration: () => transitionState.currentDuration,
+    getTransitionEasing: () => transitionState.currentEasing,
+    getTransitionDelay: () => transitionState.currentDelay,
+    isTransitionActive: () => transitionState.isTransitioning,
+    getDeviceType: () => transitionState.deviceType,
+    getBatteryLevel: () => transitionState.batteryLevel,
+    getReducedMotion: () => transitionState.reducedMotion,
+    getPerformanceScore: () => transitionState.performanceScore,
+    isPerformanceOptimal: () => transitionState.performanceScore >= 80,
+    getFrameRate: () => performanceMetrics.frameRate,
+    getSmoothness: () => performanceMetrics.smoothness,
+    getBatteryImpact: () => performanceMetrics.batteryImpact,
+    clearOptimizations: () => setOptimizations([])
+  }
+}
+
+export default useAdvancedTransitionSystem

package/src/hooks/use-animation-profile.ts

@@ -0,0 +1,288 @@
+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
+}
+
+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)
+        }
+      }
+    }
+
+    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 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 useAnimationClasses = () => {
+  const { getAnimationClasses } = useAnimationProfile()
+  return getAnimationClasses()
+}
+
+export const usePerformanceMode = () => {
+  const { performanceMode, shouldOptimizeForBattery } = useAnimationProfile()
+  return { performanceMode, shouldOptimizeForBattery }
+}