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

package/dist/hooks/use-device-loading-states.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

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

@@ -0,0 +1,104 @@
+export interface DeviceInfo {
+  isMobile: boolean
+  isTablet: boolean
+  isDesktop: boolean
+  screenSize: 'mobile' | 'tablet' | 'desktop'
+  orientation: 'portrait' | 'landscape'
+  touchDevice: boolean
+}
+
+// Breakpoints based on common device sizes
+const BREAKPOINTS = {
+  mobile: 768,
+  tablet: 1024,
+  desktop: 1440
+} as const
+
+export declare const useDevice: (): DeviceInfo => {
+  const [deviceInfo, setDeviceInfo] = useState<DeviceInfo>({
+    isMobile: false,
+    isTablet: false,
+    isDesktop: false,
+    screenSize: 'desktop',
+    orientation: 'landscape',
+    touchDevice: false
+  })
+
+  useEffect(() => {
+    const updateDeviceInfo = () => {
+      const width = window.innerWidth
+      const height = window.innerHeight
+
+      // Determine device type based on width
+      const isMobile = width < BREAKPOINTS.mobile
+      const isTablet = width >= BREAKPOINTS.mobile && width < BREAKPOINTS.tablet
+      const isDesktop = width >= BREAKPOINTS.tablet
+
+      // Determine screen size category
+      let screenSize: DeviceInfo['screenSize']
+      if (isMobile) screenSize = 'mobile'
+      else if (isTablet) screenSize = 'tablet'
+      else screenSize = 'desktop'
+
+      // 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,
+        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 declare const useIsMobile: () => useDevice().isMobile
+export declare const useIsTablet: () => useDevice().isTablet  
+export declare const useIsDesktop: () => useDevice().isDesktop
+export declare const useOrientation: () => useDevice().orientation
+export declare const useIsTouchDevice: () => useDevice().touchDevice
+
+// Utility function to get device-specific classes
+export declare 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(' ')
+}

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

@@ -0,0 +1,99 @@
+import { useState, useEffect } from 'react'
+
+export interface DeviceInfo {
+  isMobile}
+
+// Breakpoints based on common device sizes
+const BREAKPOINTS = {
+  mobile,
+  tablet,
+  desktop} as const
+
+/**
+ * Enhanced device detection hook with tablet-specific support
+ * Provides detailed device information including orientation and touch capabilities
+ */
+export const useDevice = ()=> {
+  const [deviceInfo, setDeviceInfo] = useState<DeviceInfo>({
+    isMobile,
+    isTablet,
+    isDesktop,
+    screenSize,
+    orientation,
+    touchDevice})
+
+  useEffect(() => {
+    const updateDeviceInfo = () => {
+      const width = window.innerWidth
+      const height = window.innerHeight
+      
+      // Determine device type based on width
+      const isMobile = width < BREAKPOINTS.mobile
+      const isTablet = width >= BREAKPOINTS.mobile && width < BREAKPOINTS.tablet
+      const isDesktop = width >= BREAKPOINTS.tablet
+      
+      // Determine screen size category
+      let screenSize]
+      if (isMobile) screenSize = 'mobile'
+      else if (isTablet) screenSize = 'tablet'
+      else screenSize = 'desktop'
+      
+      // Determine orientation
+      const orientation] = width > height ? 'landscape' = 'ontouchstart' in window || 
+                         navigator.maxTouchPoints > 0 ||
+                         // @ts-ignore - some browsers use this property
+                         navigator.msMaxTouchPoints > 0
+
+      const newDeviceInfo = {
+        isMobile,
+        isTablet,
+        isDesktop,
+        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 useOrientation = () => useDevice().orientation
+export const useIsTouchDevice = () => useDevice().touchDevice
+
+// Utility function to get device-specific classes
+export const getDeviceClasses = (deviceInfo)=> {
+  const classes = []
+  
+  classes.push(`screen-${deviceInfo.screenSize}`)
+  classes.push(`orientation-${deviceInfo.orientation}`)
+  
+  if (deviceInfo.touchDevice) {
+    classes.push('touch-device')
+  }
+  
+  return classes.join(' ')
+}

package/dist/hooks/use-device.js

@@ -0,0 +1,99 @@
+import { useState, useEffect } from 'react'
+
+export interface DeviceInfo {
+  isMobile}
+
+// Breakpoints based on common device sizes
+const BREAKPOINTS = {
+  mobile,
+  tablet,
+  desktop} as const
+
+/**
+ * Enhanced device detection hook with tablet-specific support
+ * Provides detailed device information including orientation and touch capabilities
+ */
+export const useDevice = ()=> {
+  const [deviceInfo, setDeviceInfo] = useState<DeviceInfo>({
+    isMobile,
+    isTablet,
+    isDesktop,
+    screenSize,
+    orientation,
+    touchDevice})
+
+  useEffect(() => {
+    const updateDeviceInfo = () => {
+      const width = window.innerWidth
+      const height = window.innerHeight
+      
+      // Determine device type based on width
+      const isMobile = width < BREAKPOINTS.mobile
+      const isTablet = width >= BREAKPOINTS.mobile && width < BREAKPOINTS.tablet
+      const isDesktop = width >= BREAKPOINTS.tablet
+      
+      // Determine screen size category
+      let screenSize]
+      if (isMobile) screenSize = 'mobile'
+      else if (isTablet) screenSize = 'tablet'
+      else screenSize = 'desktop'
+      
+      // Determine orientation
+      const orientation] = width > height ? 'landscape' = 'ontouchstart' in window || 
+                         navigator.maxTouchPoints > 0 ||
+                         // @ts-ignore - some browsers use this property
+                         navigator.msMaxTouchPoints > 0
+
+      const newDeviceInfo = {
+        isMobile,
+        isTablet,
+        isDesktop,
+        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 useOrientation = () => useDevice().orientation
+export const useIsTouchDevice = () => useDevice().touchDevice
+
+// Utility function to get device-specific classes
+export const getDeviceClasses = (deviceInfo)=> {
+  const classes = []
+  
+  classes.push(`screen-${deviceInfo.screenSize}`)
+  classes.push(`orientation-${deviceInfo.orientation}`)
+  
+  if (deviceInfo.touchDevice) {
+    classes.push('touch-device')
+  }
+  
+  return classes.join(' ')
+}