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

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

@@ -1,51 +1,76 @@
 import { useState, useCallback, useRef, useEffect } from 'react'
 
 export interface DeviceLoadingStatesConfig {
-  enableMobileStates?}
+  enableMobileStates?: boolean
+  enableTabletStates?: boolean
+  enableDesktopStates?: boolean
+  enableAdaptiveBehavior?: boolean
+  enableOrientationSupport?: boolean
+  enablePerformanceAdaptation?: boolean
+}
 
 export interface LoadingState {
-  id}
+  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]
-  activeState}
+  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?) => void
-  onDeviceStateChanged?) => void
-  onAdaptiveBehaviorEnabled?) => void
-  onPerformanceAdapted?) => void
+  onLoadingStateChanged?: (state: LoadingState) => void
+  onDeviceStateChanged?: (deviceState: DeviceSpecificState) => void
+  onAdaptiveBehaviorEnabled?: (behavior: string) => void
+  onPerformanceAdapted?: (adaptation: string) => void
 }
 
 export const useDeviceLoadingStates = (
-  config= {},
-  callbacks= {}
+  config: DeviceLoadingStatesConfig = {},
+  callbacks: DeviceLoadingStatesCallbacks = {}
 ) => {
   const {
     enableMobileStates = true,
     enableTabletStates = true,
     enableDesktopStates = true,
-    enableAdaptiveBehavior= true,
+    enableAdaptiveBehavior: enableAdaptiveBehaviorConfig = true,
     enablePerformanceAdaptation = true
   } = config
 
   const [deviceState, setDeviceState] = useState<DeviceSpecificState>({
-    deviceType,
-    orientation,
-    screenSize,
-    performanceLevel,
-    batteryLevel,
-    loadingStates],
-    activeState,
-    adaptiveBehavior})
+    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,
-    renderTime,
-    memoryUsage,
-    batteryDrain})
+    frameRate: 60,
+    renderTime: 0,
+    memoryUsage: 0,
+    batteryDrain: 'low'
+  })
 
 
   const performanceTimerRef = useRef<number | null>(null)
@@ -57,7 +82,11 @@ export const useDeviceLoadingStates = (
     const height = window.innerHeight
     const isPortrait = height > width
     
-    let deviceType= 768) {
+    let deviceType: 'mobile' | 'tablet' | 'desktop'
+    let screenSize: 'small' | 'medium' | 'large'
+    let performanceLevel: 'low' | 'medium' | 'high'
+    
+    if (width <= 768) {
       deviceType = 'mobile'
       screenSize = 'small'
       performanceLevel = 'low'
@@ -71,10 +100,10 @@ export const useDeviceLoadingStates = (
       performanceLevel = 'high'
     }
 
-    const newDeviceState= {
+    const newDeviceState: DeviceSpecificState = {
       ...deviceState,
       deviceType,
-      orientation,
+      orientation: isPortrait ? 'portrait' : 'landscape',
       screenSize,
       performanceLevel
     }
@@ -87,17 +116,17 @@ export const useDeviceLoadingStates = (
 
   // Create loading states
   const createLoadingState = useCallback((
-    state, 'id'>
+    state: Omit<LoadingState, 'id'>
   ) => {
     const id = `loading-state-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
-    const newState= {
+    const newState: LoadingState = {
       ...state,
       id
     }
 
     setDeviceState(prev => ({
       ...prev,
-      loadingStates, newState]
+      loadingStates: [...prev.loadingStates, newState]
     }))
 
     return id
@@ -105,101 +134,109 @@ export const useDeviceLoadingStates = (
 
   // Generate device-specific loading states
   const generateDeviceLoadingStates = useCallback(() => {
-    const mobileStates] = [
+    const mobileStates: LoadingState[] = [
       {
-        id,
-        name,
-        type,
-        duration,
-        complexity,
-        mobileOptimized,
-        tabletOptimized,
-        desktopOptimized,
-        orientation,
-        performance},
+        id: 'mobile-skeleton',
+        name: 'Mobile Skeleton',
+        type: 'skeleton',
+        duration: 1000,
+        complexity: 'low',
+        mobileOptimized: true,
+        tabletOptimized: false,
+        desktopOptimized: false,
+        orientation: 'both',
+        performance: 'low'
+      },
       {
-        id,
-        name,
-        type,
-        duration,
-        complexity,
-        mobileOptimized,
-        tabletOptimized,
-        desktopOptimized,
-        orientation,
-        performance}
+        id: 'mobile-spinner',
+        name: 'Mobile Spinner',
+        type: 'spinner',
+        duration: 800,
+        complexity: 'low',
+        mobileOptimized: true,
+        tabletOptimized: false,
+        desktopOptimized: false,
+        orientation: 'both',
+        performance: 'low'
+      }
     ]
 
-    const tabletStates] = [
+    const tabletStates: LoadingState[] = [
       {
-        id,
-        name,
-        type,
-        duration,
-        complexity,
-        mobileOptimized,
-        tabletOptimized,
-        desktopOptimized,
-        orientation,
-        performance},
+        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,
-        name,
-        type,
-        duration,
-        complexity,
-        mobileOptimized,
-        tabletOptimized,
-        desktopOptimized,
-        orientation,
-        performance}
+        id: 'tablet-progress',
+        name: 'Tablet Progress',
+        type: 'progress',
+        duration: 1500,
+        complexity: 'medium',
+        mobileOptimized: false,
+        tabletOptimized: true,
+        desktopOptimized: false,
+        orientation: 'both',
+        performance: 'medium'
+      }
     ]
 
-    const desktopStates] = [
+    const desktopStates: LoadingState[] = [
       {
-        id,
-        name,
-        type,
-        duration,
-        complexity,
-        mobileOptimized,
-        tabletOptimized,
-        desktopOptimized,
-        orientation,
-        performance},
+        id: 'desktop-skeleton',
+        name: 'Desktop Skeleton',
+        type: 'skeleton',
+        duration: 2000,
+        complexity: 'high',
+        mobileOptimized: false,
+        tabletOptimized: false,
+        desktopOptimized: true,
+        orientation: 'both',
+        performance: 'high'
+      },
       {
-        id,
-        name,
-        type,
-        duration,
-        complexity,
-        mobileOptimized,
-        tabletOptimized,
-        desktopOptimized,
-        orientation,
-        performance}
+        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 ])
+      ...(enableMobileStates ? mobileStates : []),
+      ...(enableTabletStates ? tabletStates : []),
+      ...(enableDesktopStates ? desktopStates : [])
     ]
 
     setDeviceState(prev => ({
       ...prev,
-      loadingStates}))
+      loadingStates: allStates
+    }))
 
     return allStates
   }, [enableMobileStates, enableTabletStates, enableDesktopStates])
 
   // Set active loading state
-  const setActiveLoadingState = useCallback((stateId) => {
+  const setActiveLoadingState = useCallback((stateId: string) => {
     const state = deviceState.loadingStates.find(s => s.id === stateId)
     if (state) {
       setDeviceState(prev => ({
         ...prev,
-        activeState}))
+        activeState: state
+      }))
       callbacks.onLoadingStateChanged?.(state)
     }
   }, [deviceState.loadingStates, callbacks])
@@ -221,7 +258,8 @@ export const useDeviceLoadingStates = (
       setAdaptations(prev => [...prev, ...adaptiveFeatures])
       setDeviceState(prev => ({
         ...prev,
-        adaptiveBehavior}))
+        adaptiveBehavior: true
+      }))
       setIsAdapting(false)
       
       adaptiveFeatures.forEach(feature => {
@@ -278,7 +316,7 @@ export const useDeviceLoadingStates = (
         
         setPerformanceMetrics(prev => ({
           ...prev,
-          frameRate,
+          frameRate: fps,
           renderTime
         }))
         
@@ -308,7 +346,8 @@ export const useDeviceLoadingStates = (
           const battery = await (navigator as any).getBattery()
           const level = battery.level
           
-          let batteryLevel= 0.1) batteryLevel = 'critical'
+          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'
@@ -319,7 +358,7 @@ export const useDeviceLoadingStates = (
           }))
         }
       } catch (error) {
-        console.warn('Battery monitoring failed, error)
+        console.warn('Battery monitoring failed:', error)
       }
     }
     
@@ -401,15 +440,19 @@ export const useDeviceLoadingStates = (
     autoAdapt,
     
     // Utility functions
-    isMobileDevice) => deviceState.deviceType === 'mobile',
-    isTabletDevice) => deviceState.deviceType === 'tablet',
-    isDesktopDevice) => deviceState.deviceType === 'desktop',
-    getActiveState) => deviceState.activeState,
-    getLoadingStatesForDevice) => deviceState.loadingStates.filter(state => {
+    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'}
+        case 'mobile': return state.mobileOptimized
+        case 'tablet': return state.tabletOptimized
+        case 'desktop': return state.desktopOptimized
+        default: return false
+      }
     }),
-    clearAdaptations) => setAdaptations([])
+    clearAdaptations: () => setAdaptations([])
   }
 }
 

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

@@ -1,26 +1,34 @@
 import { useState, useEffect } from 'react'
 
 export interface DeviceInfo {
-  isMobile}
+  isMobile: boolean
+  isTablet: boolean
+  isDesktop: boolean
+  screenSize: 'mobile' | 'tablet' | 'desktop'
+  orientation: 'portrait' | 'landscape'
+  touchDevice: boolean
+}
 
 // Breakpoints based on common device sizes
 const BREAKPOINTS = {
-  mobile,
-  tablet,
-  desktop} as const
+  mobile: 768,
+  tablet: 1024,
+  desktop: 1440
+} as const
 
 /**
  * Enhanced device detection hook with tablet-specific support
  * Provides detailed device information including orientation and touch capabilities
  */
-export const useDevice = ()=> {
+export const useDevice = (): DeviceInfo => {
   const [deviceInfo, setDeviceInfo] = useState<DeviceInfo>({
-    isMobile,
-    isTablet,
-    isDesktop,
-    screenSize,
-    orientation,
-    touchDevice})
+    isMobile: false,
+    isTablet: false,
+    isDesktop: false,
+    screenSize: 'desktop',
+    orientation: 'landscape',
+    touchDevice: false
+  })
 
   useEffect(() => {
     const updateDeviceInfo = () => {
@@ -33,13 +41,16 @@ export const useDevice = ()=> {
       const isDesktop = width >= BREAKPOINTS.tablet
       
       // Determine screen size category
-      let screenSize]
+      let screenSize: DeviceInfo['screenSize']
       if (isMobile) screenSize = 'mobile'
       else if (isTablet) screenSize = 'tablet'
       else screenSize = 'desktop'
       
       // Determine orientation
-      const orientation] = width > height ? 'landscape' = 'ontouchstart' in window || 
+      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
@@ -85,7 +96,7 @@ export const useOrientation = () => useDevice().orientation
 export const useIsTouchDevice = () => useDevice().touchDevice
 
 // Utility function to get device-specific classes
-export const getDeviceClasses = (deviceInfo)=> {
+export const getDeviceClasses = (deviceInfo: DeviceInfo): string => {
   const classes = []
   
   classes.push(`screen-${deviceInfo.screenSize}`)

package/dist/hooks/use-device.js

@@ -1,26 +1,34 @@
 import { useState, useEffect } from 'react'
 
 export interface DeviceInfo {
-  isMobile}
+  isMobile: boolean
+  isTablet: boolean
+  isDesktop: boolean
+  screenSize: 'mobile' | 'tablet' | 'desktop'
+  orientation: 'portrait' | 'landscape'
+  touchDevice: boolean
+}
 
 // Breakpoints based on common device sizes
 const BREAKPOINTS = {
-  mobile,
-  tablet,
-  desktop} as const
+  mobile: 768,
+  tablet: 1024,
+  desktop: 1440
+} as const
 
 /**
  * Enhanced device detection hook with tablet-specific support
  * Provides detailed device information including orientation and touch capabilities
  */
-export const useDevice = ()=> {
+export const useDevice = (): DeviceInfo => {
   const [deviceInfo, setDeviceInfo] = useState<DeviceInfo>({
-    isMobile,
-    isTablet,
-    isDesktop,
-    screenSize,
-    orientation,
-    touchDevice})
+    isMobile: false,
+    isTablet: false,
+    isDesktop: false,
+    screenSize: 'desktop',
+    orientation: 'landscape',
+    touchDevice: false
+  })
 
   useEffect(() => {
     const updateDeviceInfo = () => {
@@ -33,13 +41,16 @@ export const useDevice = ()=> {
       const isDesktop = width >= BREAKPOINTS.tablet
       
       // Determine screen size category
-      let screenSize]
+      let screenSize: DeviceInfo['screenSize']
       if (isMobile) screenSize = 'mobile'
       else if (isTablet) screenSize = 'tablet'
       else screenSize = 'desktop'
       
       // Determine orientation
-      const orientation] = width > height ? 'landscape' = 'ontouchstart' in window || 
+      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
@@ -85,7 +96,7 @@ export const useOrientation = () => useDevice().orientation
 export const useIsTouchDevice = () => useDevice().touchDevice
 
 // Utility function to get device-specific classes
-export const getDeviceClasses = (deviceInfo)=> {
+export const getDeviceClasses = (deviceInfo: DeviceInfo): string => {
   const classes = []
   
   classes.push(`screen-${deviceInfo.screenSize}`)