@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.7 → 0.2.9

package/dist/hooks/use-device-loading-states.esm.js

@@ -0,0 +1,416 @@
+import { useState, useCallback, useRef, useEffect } from 'react'
+
+export interface DeviceLoadingStatesConfig {
+  enableMobileStates?}
+
+export interface LoadingState {
+  id}
+
+export interface DeviceSpecificState {
+  deviceType]
+  activeState}
+
+export interface DeviceLoadingStatesCallbacks {
+  onLoadingStateChanged?) => void
+  onDeviceStateChanged?) => void
+  onAdaptiveBehaviorEnabled?) => void
+  onPerformanceAdapted?) => void
+}
+
+export const useDeviceLoadingStates = (
+  config= {},
+  callbacks= {}
+) => {
+  const {
+    enableMobileStates = true,
+    enableTabletStates = true,
+    enableDesktopStates = true,
+    enableAdaptiveBehavior= true,
+    enablePerformanceAdaptation = true
+  } = config
+
+  const [deviceState, setDeviceState] = useState<DeviceSpecificState>({
+    deviceType,
+    orientation,
+    screenSize,
+    performanceLevel,
+    batteryLevel,
+    loadingStates],
+    activeState,
+    adaptiveBehavior})
+
+  const [isAdapting, setIsAdapting] = useState(false)
+  const [adaptations, setAdaptations] = useState<string[]>([])
+  const [performanceMetrics, setPerformanceMetrics] = useState({
+    frameRate,
+    renderTime,
+    memoryUsage,
+    batteryDrain})
+
+
+  const performanceTimerRef = useRef<number | null>(null)
+  const batteryCheckRef = useRef<number | null>(null)
+
+  // Device detection
+  const detectDevice = useCallback(() => {
+    const width = window.innerWidth
+    const height = window.innerHeight
+    const isPortrait = height > width
+    
+    let deviceType= 768) {
+      deviceType = 'mobile'
+      screenSize = 'small'
+      performanceLevel = 'low'
+    } else if (width <= 1024) {
+      deviceType = 'tablet'
+      screenSize = 'medium'
+      performanceLevel = 'medium'
+    } else {
+      deviceType = 'desktop'
+      screenSize = 'large'
+      performanceLevel = 'high'
+    }
+
+    const newDeviceState= {
+      ...deviceState,
+      deviceType,
+      orientation,
+      screenSize,
+      performanceLevel
+    }
+
+    setDeviceState(newDeviceState)
+    callbacks.onDeviceStateChanged?.(newDeviceState)
+
+    return newDeviceState
+  }, [deviceState, callbacks])
+
+  // Create loading states
+  const createLoadingState = useCallback((
+    state, 'id'>
+  ) => {
+    const id = `loading-state-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+    const newState= {
+      ...state,
+      id
+    }
+
+    setDeviceState(prev => ({
+      ...prev,
+      loadingStates, newState]
+    }))
+
+    return id
+  }, [])
+
+  // Generate device-specific loading states
+  const generateDeviceLoadingStates = useCallback(() => {
+    const mobileStates] = [
+      {
+        id,
+        name,
+        type,
+        duration,
+        complexity,
+        mobileOptimized,
+        tabletOptimized,
+        desktopOptimized,
+        orientation,
+        performance},
+      {
+        id,
+        name,
+        type,
+        duration,
+        complexity,
+        mobileOptimized,
+        tabletOptimized,
+        desktopOptimized,
+        orientation,
+        performance}
+    ]
+
+    const tabletStates] = [
+      {
+        id,
+        name,
+        type,
+        duration,
+        complexity,
+        mobileOptimized,
+        tabletOptimized,
+        desktopOptimized,
+        orientation,
+        performance},
+      {
+        id,
+        name,
+        type,
+        duration,
+        complexity,
+        mobileOptimized,
+        tabletOptimized,
+        desktopOptimized,
+        orientation,
+        performance}
+    ]
+
+    const desktopStates] = [
+      {
+        id,
+        name,
+        type,
+        duration,
+        complexity,
+        mobileOptimized,
+        tabletOptimized,
+        desktopOptimized,
+        orientation,
+        performance},
+      {
+        id,
+        name,
+        type,
+        duration,
+        complexity,
+        mobileOptimized,
+        tabletOptimized,
+        desktopOptimized,
+        orientation,
+        performance}
+    ]
+
+    const allStates = [
+      ...(enableMobileStates ? mobileStates ]),
+      ...(enableTabletStates ? tabletStates ]),
+      ...(enableDesktopStates ? desktopStates ])
+    ]
+
+    setDeviceState(prev => ({
+      ...prev,
+      loadingStates}))
+
+    return allStates
+  }, [enableMobileStates, enableTabletStates, enableDesktopStates])
+
+  // Set active loading state
+  const setActiveLoadingState = useCallback((stateId) => {
+    const state = deviceState.loadingStates.find(s => s.id === stateId)
+    if (state) {
+      setDeviceState(prev => ({
+        ...prev,
+        activeState}))
+      callbacks.onLoadingStateChanged?.(state)
+    }
+  }, [deviceState.loadingStates, callbacks])
+
+  // Adaptive behavior
+  const enableAdaptiveBehavior = useCallback(() => {
+    if (!enableAdaptiveBehaviorConfig) return
+
+    setIsAdapting(true)
+    
+    setTimeout(() => {
+      const adaptiveFeatures = [
+        'Device-specific loading state adaptation enabled',
+        'Performance-based state selection active',
+        'Battery-conscious state switching enabled',
+        'Orientation-aware state adaptation active'
+      ]
+      
+      setAdaptations(prev => [...prev, ...adaptiveFeatures])
+      setDeviceState(prev => ({
+        ...prev,
+        adaptiveBehavior}))
+      setIsAdapting(false)
+      
+      adaptiveFeatures.forEach(feature => {
+        callbacks.onAdaptiveBehaviorEnabled?.(feature)
+      })
+    }, 300)
+  }, [enableAdaptiveBehaviorConfig, callbacks])
+
+  // Performance adaptation
+  const adaptToPerformance = useCallback(() => {
+    if (!enablePerformanceAdaptation) return
+
+    setIsAdapting(true)
+    
+    setTimeout(() => {
+      const performanceAdaptations = [
+        'Loading state complexity adapted to performance',
+        'Animation duration optimized for device capability',
+        'Memory usage optimized for loading states',
+        'Frame rate adaptation for smooth animations'
+      ]
+      
+      setAdaptations(prev => [...prev, ...performanceAdaptations])
+      setIsAdapting(false)
+      
+      performanceAdaptations.forEach(adaptation => {
+        callbacks.onPerformanceAdapted?.(adaptation)
+      })
+    }, 250)
+  }, [enablePerformanceAdaptation, callbacks])
+
+  // Auto-adapt based on device state
+  const autoAdapt = useCallback(() => {
+    if (deviceState.adaptiveBehavior) {
+      enableAdaptiveBehavior()
+      adaptToPerformance()
+    }
+  }, [deviceState.adaptiveBehavior, enableAdaptiveBehavior, adaptToPerformance])
+
+  // Performance monitoring
+  const startPerformanceMonitoring = useCallback(() => {
+    if (!enablePerformanceAdaptation) return () => {}
+
+    let frameCount = 0
+    let lastTime = performance.now()
+
+    const measurePerformance = () => {
+      const currentTime = performance.now()
+      frameCount++
+      
+      if (currentTime - lastTime >= 1000) {
+        const fps = Math.round((frameCount * 1000) / (currentTime - lastTime))
+        const renderTime = currentTime - lastTime
+        
+        setPerformanceMetrics(prev => ({
+          ...prev,
+          frameRate,
+          renderTime
+        }))
+        
+        frameCount = 0
+        lastTime = currentTime
+      }
+      
+      performanceTimerRef.current = window.setTimeout(measurePerformance, 16)
+    }
+    
+    performanceTimerRef.current = window.setTimeout(measurePerformance, 16)
+    
+    return () => {
+      if (performanceTimerRef.current) {
+        clearTimeout(performanceTimerRef.current)
+      }
+    }
+  }, [enablePerformanceAdaptation])
+
+  // Battery monitoring
+  const startBatteryMonitoring = useCallback(() => {
+    if (!enablePerformanceAdaptation) return () => {}
+
+    const checkBattery = async () => {
+      try {
+        if ('getBattery' in navigator) {
+          const battery = await (navigator as any).getBattery()
+          const level = battery.level
+          
+          let batteryLevel= 0.1) batteryLevel = 'critical'
+          else if (level <= 0.3) batteryLevel = 'low'
+          else if (level <= 0.7) batteryLevel = 'medium'
+          else batteryLevel = 'high'
+          
+          setDeviceState(prev => ({
+            ...prev,
+            batteryLevel
+          }))
+        }
+      } catch (error) {
+        console.warn('Battery monitoring failed, error)
+      }
+    }
+    
+    batteryCheckRef.current = window.setInterval(checkBattery, 10000)
+    
+    return () => {
+      if (batteryCheckRef.current) {
+        clearInterval(batteryCheckRef.current)
+      }
+    }
+  }, [enablePerformanceAdaptation])
+
+  // Initialize device detection and loading states
+  useEffect(() => {
+    detectDevice()
+    generateDeviceLoadingStates()
+    
+    // Set up resize listener
+    const handleResize = () => {
+      detectDevice()
+    }
+    
+    window.addEventListener('resize', handleResize)
+    
+    // Set up orientation change listener
+    const handleOrientationChange = () => {
+      setTimeout(detectDevice, 100)
+    }
+    
+    window.addEventListener('orientationchange', handleOrientationChange)
+    
+    return () => {
+      window.removeEventListener('resize', handleResize)
+      window.removeEventListener('orientationchange', handleOrientationChange)
+    }
+  }, [detectDevice, generateDeviceLoadingStates])
+
+  // Auto-adapt when device state changes
+  useEffect(() => {
+    autoAdapt()
+  }, [autoAdapt])
+
+  // Start monitoring
+  useEffect(() => {
+    const stopPerformanceMonitoring = startPerformanceMonitoring()
+    const stopBatteryMonitoring = startBatteryMonitoring()
+    
+    return () => {
+      stopPerformanceMonitoring()
+      stopBatteryMonitoring()
+    }
+  }, [startPerformanceMonitoring, startBatteryMonitoring])
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (performanceTimerRef.current) {
+        clearTimeout(performanceTimerRef.current)
+      }
+      if (batteryCheckRef.current) {
+        clearInterval(batteryCheckRef.current)
+      }
+    }
+  }, [])
+
+  return {
+    // State
+    deviceState,
+    isAdapting,
+    adaptations,
+    performanceMetrics,
+    
+    // Functions
+    createLoadingState,
+    generateDeviceLoadingStates,
+    setActiveLoadingState,
+    enableAdaptiveBehavior,
+    adaptToPerformance,
+    autoAdapt,
+    
+    // Utility functions
+    isMobileDevice) => deviceState.deviceType === 'mobile',
+    isTabletDevice) => deviceState.deviceType === 'tablet',
+    isDesktopDevice) => deviceState.deviceType === 'desktop',
+    getActiveState) => deviceState.activeState,
+    getLoadingStatesForDevice) => deviceState.loadingStates.filter(state => {
+      switch (deviceState.deviceType) {
+        case 'mobile'}
+    }),
+    clearAdaptations) => setAdaptations([])
+  }
+}
+
+export default useDeviceLoadingStates