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

package/dist/hooks/use-advanced-transition-system.esm.js

@@ -0,0 +1,352 @@
+import { useState, useCallback, useRef, useEffect } from 'react'
+
+export interface TransitionConfig {
+  duration?}
+
+export interface TransitionState {
+  isTransitioning}
+
+export interface TransitionPerformanceMetrics {
+  frameRate}
+
+export interface AdvancedTransitionSystemCallbacks {
+  onTransitionStart?) => void
+  onTransitionComplete?) => void
+  onPerformanceOptimized?) => void
+  onDeviceOptimized?) => void
+  onAccessibilityEnhanced?) => void
+}
+
+export const useAdvancedTransitionSystem = (
+  config= {},
+  callbacks= {}
+) => {
+  const {
+    duration = 300,
+    easing = 'ease-out',
+    delay = 0,
+    performance= true,
+    deviceOptimization = true,
+    accessibility = true,
+    batteryAware = true
+  } = config
+
+  const [transitionState, setTransitionState] = useState<TransitionState>({
+    isTransitioning,
+    currentEasing,
+    currentDuration,
+    currentDelay,
+    performanceScore,
+    deviceType,
+    batteryLevel,
+    reducedMotion})
+
+  const [performanceMetrics, setPerformanceMetrics] = useState<TransitionPerformanceMetrics>({
+    frameRate,
+    memoryUsage,
+    transitionTime,
+    smoothness,
+    batteryImpact})
+
+  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] = '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)').matches
+    
+    setTransitionState(prev => ({
+      ...prev,
+      reducedMotion}))
+    
+    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}))
+    
+    return randomLevel
+  }, [])
+
+  // Optimize transition duration based on device and battery
+  const optimizeTransitionDuration = useCallback((baseDuration) => {
+    let optimizedDuration = baseDuration
+    
+    // Device-specific optimization
+    if (deviceOptimization) {
+      switch (transitionState.deviceType) {
+        case 'mobile'= Math.min(baseDuration, 200)
+          break
+        case 'tablet'= Math.min(baseDuration, 300)
+          break
+        case 'desktop'= baseDuration
+          break
+      }
+    }
+    
+    // Battery-aware optimization
+    if (batteryAware) {
+      switch (transitionState.batteryLevel) {
+        case 'low'= Math.min(optimizedDuration, 150)
+          break
+        case 'critical'= Math.min(optimizedDuration, 100)
+          break
+        case 'normal'}
+    }
+    
+    // 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?) => {
+    const finalConfig = { ...config, ...customConfig }
+    const optimizedDuration = optimizeTransitionDuration(finalConfig.duration || duration)
+    
+    setTransitionState(prev => ({
+      ...prev,
+      isTransitioning,
+      currentDuration,
+      currentDelay,
+      currentEasing}))
+    
+    transitionStartTimeRef.current = performance.now()
+    frameCountRef.current = 0
+    lastFrameTimeRef.current = performance.now()
+    
+    callbacks.onTransitionStart?.(finalConfig)
+    
+    // Complete transition after duration
+    setTimeout(() => {
+      setTransitionState(prev => ({
+        ...prev,
+        isTransitioning}))
+      
+      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 
+          = Math.max(0, 100 - (currentFrameRate * 0.5) - memoryUsage * 0.3)
+        
+        setPerformanceMetrics({
+          frameRate),
+          memoryUsage),
+          transitionTime),
+          smoothness),
+          batteryImpact)
+        })
+        
+        // Update performance score
+        const overallScore = Math.round((smoothness + batteryImpact) / 2)
+        setTransitionState(prev => ({
+          ...prev,
+          performanceScore}))
+        
+        lastFrameTimeRef.current = currentTime
+        
+        callbacks.onPerformanceOptimized?.({
+          frameRate),
+          memoryUsage),
+          transitionTime),
+          smoothness),
+          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] = []
+    
+    switch (deviceType) {
+      case 'mobile')')
+        optimizations.push('Reduced animation complexity')
+        optimizations.push('Touch-friendly timing')
+        break
+      case 'tablet')')
+        optimizations.push('Balanced performance and smoothness')
+        break
+      case 'desktop')')
+        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)')
+    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/dist/hooks/use-advanced-transition-system.js

@@ -0,0 +1,352 @@
+import { useState, useCallback, useRef, useEffect } from 'react'
+
+export interface TransitionConfig {
+  duration?}
+
+export interface TransitionState {
+  isTransitioning}
+
+export interface TransitionPerformanceMetrics {
+  frameRate}
+
+export interface AdvancedTransitionSystemCallbacks {
+  onTransitionStart?) => void
+  onTransitionComplete?) => void
+  onPerformanceOptimized?) => void
+  onDeviceOptimized?) => void
+  onAccessibilityEnhanced?) => void
+}
+
+export const useAdvancedTransitionSystem = (
+  config= {},
+  callbacks= {}
+) => {
+  const {
+    duration = 300,
+    easing = 'ease-out',
+    delay = 0,
+    performance= true,
+    deviceOptimization = true,
+    accessibility = true,
+    batteryAware = true
+  } = config
+
+  const [transitionState, setTransitionState] = useState<TransitionState>({
+    isTransitioning,
+    currentEasing,
+    currentDuration,
+    currentDelay,
+    performanceScore,
+    deviceType,
+    batteryLevel,
+    reducedMotion})
+
+  const [performanceMetrics, setPerformanceMetrics] = useState<TransitionPerformanceMetrics>({
+    frameRate,
+    memoryUsage,
+    transitionTime,
+    smoothness,
+    batteryImpact})
+
+  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] = '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)').matches
+    
+    setTransitionState(prev => ({
+      ...prev,
+      reducedMotion}))
+    
+    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}))
+    
+    return randomLevel
+  }, [])
+
+  // Optimize transition duration based on device and battery
+  const optimizeTransitionDuration = useCallback((baseDuration) => {
+    let optimizedDuration = baseDuration
+    
+    // Device-specific optimization
+    if (deviceOptimization) {
+      switch (transitionState.deviceType) {
+        case 'mobile'= Math.min(baseDuration, 200)
+          break
+        case 'tablet'= Math.min(baseDuration, 300)
+          break
+        case 'desktop'= baseDuration
+          break
+      }
+    }
+    
+    // Battery-aware optimization
+    if (batteryAware) {
+      switch (transitionState.batteryLevel) {
+        case 'low'= Math.min(optimizedDuration, 150)
+          break
+        case 'critical'= Math.min(optimizedDuration, 100)
+          break
+        case 'normal'}
+    }
+    
+    // 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?) => {
+    const finalConfig = { ...config, ...customConfig }
+    const optimizedDuration = optimizeTransitionDuration(finalConfig.duration || duration)
+    
+    setTransitionState(prev => ({
+      ...prev,
+      isTransitioning,
+      currentDuration,
+      currentDelay,
+      currentEasing}))
+    
+    transitionStartTimeRef.current = performance.now()
+    frameCountRef.current = 0
+    lastFrameTimeRef.current = performance.now()
+    
+    callbacks.onTransitionStart?.(finalConfig)
+    
+    // Complete transition after duration
+    setTimeout(() => {
+      setTransitionState(prev => ({
+        ...prev,
+        isTransitioning}))
+      
+      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 
+          = Math.max(0, 100 - (currentFrameRate * 0.5) - memoryUsage * 0.3)
+        
+        setPerformanceMetrics({
+          frameRate),
+          memoryUsage),
+          transitionTime),
+          smoothness),
+          batteryImpact)
+        })
+        
+        // Update performance score
+        const overallScore = Math.round((smoothness + batteryImpact) / 2)
+        setTransitionState(prev => ({
+          ...prev,
+          performanceScore}))
+        
+        lastFrameTimeRef.current = currentTime
+        
+        callbacks.onPerformanceOptimized?.({
+          frameRate),
+          memoryUsage),
+          transitionTime),
+          smoothness),
+          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] = []
+    
+    switch (deviceType) {
+      case 'mobile')')
+        optimizations.push('Reduced animation complexity')
+        optimizations.push('Touch-friendly timing')
+        break
+      case 'tablet')')
+        optimizations.push('Balanced performance and smoothness')
+        break
+      case 'desktop')')
+        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)')
+    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