@rakeyshgidwani/roger-ui-bank-theme-jeremy 0.5.3

package/src/hooks/use-device-loading-states.ts

@@ -0,0 +1,459 @@
+import { useState, useCallback, useRef, useEffect } from 'react'
+
+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 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

package/src/hooks/use-device.tsx

@@ -0,0 +1,119 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+
+export interface DeviceInfo {
+  isMobile: boolean
+  isTablet: boolean
+  isDesktop: boolean
+  isLargeDisplay: boolean
+  screenSize: 'mobile' | 'tablet' | 'desktop' | 'largeDisplay'
+  orientation: 'portrait' | 'landscape'
+  touchDevice: boolean
+}
+
+// Updated breakpoints to align with Phase 1 Enhanced Breakpoint System
+// xs: 475px, sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px, 3xl: 1920px
+const BREAKPOINTS = {
+  mobile: 768,      // xs-sm range (475-768px)
+  tablet: 1024,     // md range (768-1024px)
+  desktop: 1536     // lg-xl range (1024-1536px), largeDisplay starts at 1536px+ (2xl-3xl)
+} as const
+
+/**
+ * Enhanced device detection hook with tablet-specific support
+ * Provides detailed device information including orientation and touch capabilities
+ */
+export const useDevice = (): DeviceInfo => {
+  const [deviceInfo, setDeviceInfo] = useState<DeviceInfo>({
+    isMobile: false,
+    isTablet: false,
+    isDesktop: false,
+    isLargeDisplay: false,
+    screenSize: 'desktop',
+    orientation: 'landscape',
+    touchDevice: false
+  })
+
+  useEffect(() => {
+    const updateDeviceInfo = () => {
+      const width = window.innerWidth
+      const height = window.innerHeight
+      
+      // Determine device type based on width (aligned with new breakpoint system)
+      const isMobile = width < BREAKPOINTS.mobile
+      const isTablet = width >= BREAKPOINTS.mobile && width < BREAKPOINTS.tablet
+      const isDesktop = width >= BREAKPOINTS.tablet && width < BREAKPOINTS.desktop
+      const isLargeDisplay = width >= BREAKPOINTS.desktop
+
+      // Determine screen size category
+      let screenSize: DeviceInfo['screenSize']
+      if (isMobile) screenSize = 'mobile'
+      else if (isTablet) screenSize = 'tablet'
+      else if (isDesktop) screenSize = 'desktop'
+      else screenSize = 'largeDisplay'
+      
+      // Determine orientation
+      const orientation: DeviceInfo['orientation'] = width > height ? 'landscape' : 'portrait'
+      
+      // Detect touch capability
+      const touchDevice = 'ontouchstart' in window || 
+                         navigator.maxTouchPoints > 0 ||
+                         // @ts-ignore - some browsers use this property
+                         navigator.msMaxTouchPoints > 0
+
+      const newDeviceInfo = {
+        isMobile,
+        isTablet,
+        isDesktop,
+        isLargeDisplay,
+        screenSize,
+        orientation,
+        touchDevice
+      }
+
+      setDeviceInfo(newDeviceInfo)
+    }
+
+    // Initial detection
+    updateDeviceInfo()
+
+    // Listen for resize events
+    window.addEventListener('resize', updateDeviceInfo)
+    
+    // Listen for orientation changes
+    window.addEventListener('orientationchange', () => {
+      // Small delay to ensure dimensions are updated
+      setTimeout(updateDeviceInfo, 100)
+    })
+
+    return () => {
+      window.removeEventListener('resize', updateDeviceInfo)
+      window.removeEventListener('orientationchange', updateDeviceInfo)
+    }
+  }, [])
+
+  return deviceInfo
+}
+
+// Convenience hooks for specific use cases
+export const useIsMobile = () => useDevice().isMobile
+export const useIsTablet = () => useDevice().isTablet
+export const useIsDesktop = () => useDevice().isDesktop
+export const useIsLargeDisplay = () => useDevice().isLargeDisplay
+export const useOrientation = () => useDevice().orientation
+export const useIsTouchDevice = () => useDevice().touchDevice
+
+// Utility function to get device-specific classes
+export const getDeviceClasses = (deviceInfo: DeviceInfo): string => {
+  const classes = []
+  
+  classes.push(`screen-${deviceInfo.screenSize}`)
+  classes.push(`orientation-${deviceInfo.orientation}`)
+  
+  if (deviceInfo.touchDevice) {
+    classes.push('touch-device')
+  }
+  
+  return classes.join(' ')
+}