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

package/dist/hooks/use-device-loading-states.d.ts

@@ -0,0 +1,456 @@
+export interface DeviceLoadingStatesConfig {
+  enableMobileStates?: boolean
+  enableTabletStates?: boolean
+  enableDesktopStates?: boolean
+  enableAdaptiveBehavior?: boolean
+  enableOrientationSupport?: boolean
+  enablePerformanceAdaptation?: boolean
+}
+
+export interface LoadingState {
+  id: string
+  name: string
+  type: 'skeleton' | 'spinner' | 'progress' | 'skeleton-spinner' | 'custom'
+  duration: number
+  complexity: 'low' | 'medium' | 'high'
+  mobileOptimized: boolean
+  tabletOptimized: boolean
+  desktopOptimized: boolean
+  orientation: 'portrait' | 'landscape' | 'both'
+  performance: 'low' | 'medium' | 'high'
+}
+
+export interface DeviceSpecificState {
+  deviceType: 'mobile' | 'tablet' | 'desktop'
+  orientation: 'portrait' | 'landscape'
+  screenSize: 'small' | 'medium' | 'large'
+  performanceLevel: 'low' | 'medium' | 'high'
+  batteryLevel: 'critical' | 'low' | 'medium' | 'high'
+  loadingStates: LoadingState[]
+  activeState: LoadingState | null
+  adaptiveBehavior: boolean
+}
+
+export interface DeviceLoadingStatesCallbacks {
+  onLoadingStateChanged?: (state: LoadingState) => void
+  onDeviceStateChanged?: (deviceState: DeviceSpecificState) => void
+  onAdaptiveBehaviorEnabled?: (behavior: string) => void
+  onPerformanceAdapted?: (adaptation: string) => void
+}
+
+export declare const useDeviceLoadingStates: (
+  config: DeviceLoadingStatesConfig = {},
+  callbacks: DeviceLoadingStatesCallbacks = {}
+) => {
+  const {
+    enableMobileStates = true,
+    enableTabletStates = true,
+    enableDesktopStates = true,
+    enableAdaptiveBehavior: enableAdaptiveBehaviorConfig = true,
+    enablePerformanceAdaptation = true
+  } = config
+
+  const [deviceState, setDeviceState] = useState<DeviceSpecificState>({
+    deviceType: 'desktop',
+    orientation: 'landscape',
+    screenSize: 'large',
+    performanceLevel: 'high',
+    batteryLevel: 'high',
+    loadingStates: [],
+    activeState: null,
+    adaptiveBehavior: false
+  })
+
+  const [isAdapting, setIsAdapting] = useState(false)
+  const [adaptations, setAdaptations] = useState<string[]>([])
+  const [performanceMetrics, setPerformanceMetrics] = useState({
+    frameRate: 60,
+    renderTime: 0,
+    memoryUsage: 0,
+    batteryDrain: 'low'
+  })
+
+  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: 'mobile' | 'tablet' | 'desktop'
+    let screenSize: 'small' | 'medium' | 'large'
+    let performanceLevel: 'low' | 'medium' | 'high'
+
+    if (width <= 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: DeviceSpecificState = {
+      ...deviceState,
+      deviceType,
+      orientation: isPortrait ? 'portrait' : 'landscape',
+      screenSize,
+      performanceLevel
+    }
+
+    setDeviceState(newDeviceState)
+    callbacks.onDeviceStateChanged?.(newDeviceState)
+
+    return newDeviceState
+  }, [deviceState, callbacks])
+
+  // Create loading states
+  const createLoadingState = useCallback((
+    state: Omit<LoadingState, 'id'>
+  ) => {
+    const id = `loading-state-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+    const newState: LoadingState = {
+      ...state,
+      id
+    }
+
+    setDeviceState(prev => ({
+      ...prev,
+      loadingStates: [...prev.loadingStates, newState]
+    }))
+
+    return id
+  }, [])
+
+  // Generate device-specific loading states
+  const generateDeviceLoadingStates = useCallback(() => {
+    const mobileStates: LoadingState[] = [
+      {
+        id: 'mobile-skeleton',
+        name: 'Mobile Skeleton',
+        type: 'skeleton',
+        duration: 1000,
+        complexity: 'low',
+        mobileOptimized: true,
+        tabletOptimized: false,
+        desktopOptimized: false,
+        orientation: 'both',
+        performance: 'low'
+      },
+      {
+        id: 'mobile-spinner',
+        name: 'Mobile Spinner',
+        type: 'spinner',
+        duration: 800,
+        complexity: 'low',
+        mobileOptimized: true,
+        tabletOptimized: false,
+        desktopOptimized: false,
+        orientation: 'both',
+        performance: 'low'
+      }
+    ]
+
+    const tabletStates: LoadingState[] = [
+      {
+        id: 'tablet-skeleton-spinner',
+        name: 'Tablet Skeleton + Spinner',
+        type: 'skeleton-spinner',
+        duration: 1200,
+        complexity: 'medium',
+        mobileOptimized: false,
+        tabletOptimized: true,
+        desktopOptimized: false,
+        orientation: 'both',
+        performance: 'medium'
+      },
+      {
+        id: 'tablet-progress',
+        name: 'Tablet Progress',
+        type: 'progress',
+        duration: 1500,
+        complexity: 'medium',
+        mobileOptimized: false,
+        tabletOptimized: true,
+        desktopOptimized: false,
+        orientation: 'both',
+        performance: 'medium'
+      }
+    ]
+
+    const desktopStates: LoadingState[] = [
+      {
+        id: 'desktop-skeleton',
+        name: 'Desktop Skeleton',
+        type: 'skeleton',
+        duration: 2000,
+        complexity: 'high',
+        mobileOptimized: false,
+        tabletOptimized: false,
+        desktopOptimized: true,
+        orientation: 'both',
+        performance: 'high'
+      },
+      {
+        id: 'desktop-custom',
+        name: 'Desktop Custom',
+        type: 'custom',
+        duration: 2500,
+        complexity: 'high',
+        mobileOptimized: false,
+        tabletOptimized: false,
+        desktopOptimized: true,
+        orientation: 'both',
+        performance: 'high'
+      }
+    ]
+
+    const allStates = [
+      ...(enableMobileStates ? mobileStates : []),
+      ...(enableTabletStates ? tabletStates : []),
+      ...(enableDesktopStates ? desktopStates : [])
+    ]
+
+    setDeviceState(prev => ({
+      ...prev,
+      loadingStates: allStates
+    }))
+
+    return allStates
+  }, [enableMobileStates, enableTabletStates, enableDesktopStates])
+
+  // Set active loading state
+  const setActiveLoadingState = useCallback((stateId: string) => {
+    const state = deviceState.loadingStates.find(s => s.id === stateId)
+    if (state) {
+      setDeviceState(prev => ({
+        ...prev,
+        activeState: state
+      }))
+      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: true
+      }))
+      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: fps,
+          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: 'critical' | 'low' | 'medium' | 'high'
+          if (level <= 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': return state.mobileOptimized
+        case 'tablet': return state.tabletOptimized
+        case 'desktop': return state.desktopOptimized
+        default: return false
+      }
+    }),
+    clearAdaptations: () => setAdaptations([])
+  }
+}
+
+export default useDeviceLoadingStates