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

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

@@ -1,456 +0,0 @@
-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

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

@@ -1,104 +0,0 @@
-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(' ')
-}