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

package/dist/hooks/use-adaptive-layout.d.ts

@@ -0,0 +1,287 @@
+export type DeviceType = 'mobile' | 'tablet' | 'desktop'
+export type Orientation = 'portrait' | 'landscape'
+export type ScreenSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+
+export interface AdaptiveLayoutState {
+  deviceType: DeviceType
+  orientation: Orientation
+  screenSize: ScreenSize
+  width: number
+  height: number
+  isTouchDevice: boolean
+  isHighDensity: boolean
+  isLowPower: boolean
+  performanceScore: number
+}
+
+export interface AdaptiveLayoutConfig {
+  enablePerformanceOptimization?: boolean
+  enableTouchOptimization?: boolean
+  enableBatteryOptimization?: boolean
+  enableMemoryOptimization?: boolean
+  breakpoints?: {
+    xs: number
+    sm: number
+    md: number
+    lg: number
+    xl: number
+    '2xl': number
+  }
+}
+
+export interface AdaptiveLayoutCallbacks {
+  onDeviceChange?: (deviceType: DeviceType) => void
+  onOrientationChange?: (orientation: Orientation) => void
+  onScreenSizeChange?: (screenSize: ScreenSize) => void
+  onPerformanceChange?: (score: number) => void
+  onBatteryChange?: (isLow: boolean) => void
+}
+
+export declare const useAdaptiveLayout: (
+  config: AdaptiveLayoutConfig = {},
+  callbacks: AdaptiveLayoutCallbacks = {}
+) => {
+  const {
+    enablePerformanceOptimization = true,
+    enableTouchOptimization = true,
+    enableBatteryOptimization = true,
+    enableMemoryOptimization = true,
+    breakpoints = {
+      xs: 0,
+      sm: 640,
+      md: 768,
+      lg: 1024,
+      xl: 1280,
+      '2xl': 1536
+    }
+  } = config
+
+  const [state, setState] = useState<AdaptiveLayoutState>({
+    deviceType: 'desktop',
+    orientation: 'landscape',
+    screenSize: 'lg',
+    width: 0,
+    height: 0,
+    isTouchDevice: false,
+    isHighDensity: false,
+    isLowPower: false,
+    performanceScore: 100
+  })
+
+  // Device detection
+  const detectDevice = useCallback((width: number, _height: number): DeviceType => {
+    if (width < breakpoints.md) return 'mobile'
+    if (width < breakpoints.lg) return 'tablet'
+    return 'desktop'
+  }, [breakpoints])
+
+  // Screen size detection
+  const detectScreenSize = useCallback((width: number): ScreenSize => {
+    if (width < breakpoints.sm) return 'xs'
+    if (width < breakpoints.md) return 'sm'
+    if (width < breakpoints.lg) return 'md'
+    if (width < breakpoints.xl) return 'lg'
+    if (width < breakpoints['2xl']) return 'xl'
+    return '2xl'
+  }, [breakpoints])
+
+  // Touch device detection
+  const detectTouchDevice = useCallback((): boolean => {
+    return 'ontouchstart' in window || navigator.maxTouchPoints > 0
+  }, [])
+
+  // High density display detection
+  const detectHighDensity = useCallback((): boolean => {
+    return window.devicePixelRatio > 1
+  }, [])
+
+  // Battery status detection
+  const detectBatteryStatus = useCallback(async (): Promise<boolean> => {
+    if ('getBattery' in navigator) {
+      try {
+        const battery = await (navigator as any).getBattery()
+        return battery.level < 0.2
+      } catch {
+        return false
+      }
+    }
+    return false
+  }, [])
+
+  // Performance monitoring
+  const measurePerformance = useCallback(async (): Promise<number> => {
+    if (!enablePerformanceOptimization) return 100
+
+    const startTime = performance.now()
+
+    // Simulate performance measurement
+    await new Promise(resolve => setTimeout(resolve, 10))
+
+    const endTime = performance.now()
+    const renderTime = endTime - startTime
+
+    // Calculate performance score (lower render time = higher score)
+    const baseScore = 100
+    const timePenalty = Math.min(renderTime * 10, 50)
+    const score = Math.max(baseScore - timePenalty, 0)
+
+    return Math.round(score)
+  }, [enablePerformanceOptimization])
+
+  // Memory usage monitoring
+  const measureMemoryUsage = useCallback((): number => {
+    if (!enableMemoryOptimization || !('memory' in performance)) return 0
+
+    const memory = (performance as any).memory
+    return (memory.usedJSHeapSize / memory.jsHeapSizeLimit) * 100
+  }, [enableMemoryOptimization])
+
+  // Update layout state
+  const updateLayout = useCallback(async () => {
+    const width = window.innerWidth
+    const height = window.innerHeight
+    const deviceType = detectDevice(width, height)
+    const screenSize = detectScreenSize(width)
+    const orientation = width > height ? 'landscape' : 'portrait'
+    const isTouchDevice = detectTouchDevice()
+    const isHighDensity = detectHighDensity()
+    const isLowPower = await detectBatteryStatus()
+    const performanceScore = await measurePerformance()
+
+    const newState: AdaptiveLayoutState = {
+      deviceType,
+      orientation,
+      screenSize,
+      width,
+      height,
+      isTouchDevice,
+      isHighDensity,
+      isLowPower,
+      performanceScore
+    }
+
+    setState(newState)
+
+    // Trigger callbacks
+    if (callbacks.onDeviceChange && deviceType !== state.deviceType) {
+      callbacks.onDeviceChange(deviceType)
+    }
+    if (callbacks.onOrientationChange && orientation !== state.orientation) {
+      callbacks.onOrientationChange(orientation)
+    }
+    if (callbacks.onScreenSizeChange && screenSize !== state.screenSize) {
+      callbacks.onScreenSizeChange(screenSize)
+    }
+    if (callbacks.onPerformanceChange && performanceScore !== state.performanceScore) {
+      callbacks.onPerformanceChange(performanceScore)
+    }
+    if (callbacks.onBatteryChange && isLowPower !== state.isLowPower) {
+      callbacks.onBatteryChange(isLowPower)
+    }
+  }, [
+    detectDevice,
+    detectScreenSize,
+    detectTouchDevice,
+    detectHighDensity,
+    detectBatteryStatus,
+    measurePerformance,
+    callbacks,
+    state.deviceType,
+    state.orientation,
+    state.screenSize,
+    state.performanceScore,
+    state.isLowPower
+  ])
+
+  // Initialize and set up event listeners
+  useEffect(() => {
+    updateLayout()
+
+    const handleResize = () => updateLayout()
+    const handleOrientationChange = () => updateLayout()
+
+    window.addEventListener('resize', handleResize)
+    window.addEventListener('orientationchange', handleOrientationChange)
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+      window.removeEventListener('orientationchange', handleOrientationChange)
+    }
+  }, [updateLayout])
+
+  // Performance monitoring interval
+  useEffect(() => {
+    if (!enablePerformanceOptimization) return
+
+    const interval = setInterval(updateLayout, 5000)
+    return () => clearInterval(interval)
+  }, [enablePerformanceOptimization, updateLayout])
+
+  // Battery monitoring
+  useEffect(() => {
+    if (!enableBatteryOptimization) return
+
+    const interval = setInterval(updateLayout, 30000) // Check every 30 seconds
+    return () => clearInterval(interval)
+  }, [enableBatteryOptimization, updateLayout])
+
+  // Computed values
+  const isMobile = useMemo(() => state.deviceType === 'mobile', [state.deviceType])
+  const isTablet = useMemo(() => state.deviceType === 'tablet', [state.deviceType])
+  const isDesktop = useMemo(() => state.deviceType === 'desktop', [state.deviceType])
+  const isPortrait = useMemo(() => state.orientation === 'portrait', [state.orientation])
+  const isLandscape = useMemo(() => state.orientation === 'landscape', [state.orientation])
+
+  // Layout recommendations
+  const layoutRecommendations = useMemo(() => {
+    const recommendations = []
+
+    if (state.isLowPower && enableBatteryOptimization) {
+      recommendations.push('Reduce animations and effects for better battery life')
+    }
+
+    if (state.performanceScore < 70 && enablePerformanceOptimization) {
+      recommendations.push('Consider reducing layout complexity for better performance')
+    }
+
+    if (state.isTouchDevice && enableTouchOptimization) {
+      recommendations.push('Touch-friendly interactions enabled')
+    }
+
+    if (state.isHighDensity) {
+      recommendations.push('High-density display detected - using optimized assets')
+    }
+
+    return recommendations
+  }, [
+    state.isLowPower,
+    state.performanceScore,
+    state.isTouchDevice,
+    state.isHighDensity,
+    enableBatteryOptimization,
+    enablePerformanceOptimization,
+    enableTouchOptimization
+  ])
+
+  return {
+    // State
+    ...state,
+
+    // Computed values
+    isMobile,
+    isTablet,
+    isDesktop,
+    isPortrait,
+    isLandscape,
+
+    // Layout recommendations
+    layoutRecommendations,
+
+    // Actions
+    updateLayout,
+    measurePerformance,
+    measureMemoryUsage
+  }
+}
+
+export default useAdaptiveLayout

package/dist/hooks/use-adaptive-layout.esm.js

@@ -0,0 +1,266 @@
+import { useState, useEffect, useCallback, useMemo } from 'react'
+
+export type DeviceType = 'mobile' | 'tablet' | 'desktop'
+export type Orientation = 'portrait' | 'landscape'
+export type ScreenSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+
+export interface AdaptiveLayoutState {
+  deviceType}
+
+export interface AdaptiveLayoutConfig {
+  enablePerformanceOptimization?}
+}
+
+export interface AdaptiveLayoutCallbacks {
+  onDeviceChange?) => void
+  onOrientationChange?) => void
+  onScreenSizeChange?) => void
+  onPerformanceChange?) => void
+  onBatteryChange?) => void
+}
+
+export const useAdaptiveLayout = (
+  config= {},
+  callbacks= {}
+) => {
+  const {
+    enablePerformanceOptimization = true,
+    enableTouchOptimization = true,
+    enableBatteryOptimization = true,
+    enableMemoryOptimization = true,
+    breakpoints = {
+      xs,
+      sm,
+      md,
+      lg,
+      xl,
+      '2xl'}
+  } = config
+
+  const [state, setState] = useState<AdaptiveLayoutState>({
+    deviceType,
+    orientation,
+    screenSize,
+    width,
+    height,
+    isTouchDevice,
+    isHighDensity,
+    isLowPower,
+    performanceScore})
+
+  // Device detection
+  const detectDevice = useCallback((width, _height)=> {
+    if (width < breakpoints.md) return 'mobile'
+    if (width < breakpoints.lg) return 'tablet'
+    return 'desktop'
+  }, [breakpoints])
+
+  // Screen size detection
+  const detectScreenSize = useCallback((width)=> {
+    if (width < breakpoints.sm) return 'xs'
+    if (width < breakpoints.md) return 'sm'
+    if (width < breakpoints.lg) return 'md'
+    if (width < breakpoints.xl) return 'lg'
+    if (width < breakpoints['2xl']) return 'xl'
+    return '2xl'
+  }, [breakpoints])
+
+  // Touch device detection
+  const detectTouchDevice = useCallback(()=> {
+    return 'ontouchstart' in window || navigator.maxTouchPoints > 0
+  }, [])
+
+  // High density display detection
+  const detectHighDensity = useCallback(()=> {
+    return window.devicePixelRatio > 1
+  }, [])
+
+  // Battery status detection
+  const detectBatteryStatus = useCallback(async ()=> {
+    if ('getBattery' in navigator) {
+      try {
+        const battery = await (navigator as any).getBattery()
+        return battery.level < 0.2
+      } catch {
+        return false
+      }
+    }
+    return false
+  }, [])
+
+  // Performance monitoring
+  const measurePerformance = useCallback(async ()=> {
+    if (!enablePerformanceOptimization) return 100
+
+    const startTime = performance.now()
+    
+    // Simulate performance measurement
+    await new Promise(resolve => setTimeout(resolve, 10))
+    
+    const endTime = performance.now()
+    const renderTime = endTime - startTime
+    
+    // Calculate performance score (lower render time = higher score)
+    const baseScore = 100
+    const timePenalty = Math.min(renderTime * 10, 50)
+    const score = Math.max(baseScore - timePenalty, 0)
+    
+    return Math.round(score)
+  }, [enablePerformanceOptimization])
+
+  // Memory usage monitoring
+  const measureMemoryUsage = useCallback(()=> {
+    if (!enableMemoryOptimization || !('memory' in performance)) return 0
+    
+    const memory = (performance as any).memory
+    return (memory.usedJSHeapSize / memory.jsHeapSizeLimit) * 100
+  }, [enableMemoryOptimization])
+
+  // Update layout state
+  const updateLayout = useCallback(async () => {
+    const width = window.innerWidth
+    const height = window.innerHeight
+    const deviceType = detectDevice(width, height)
+    const screenSize = detectScreenSize(width)
+    const orientation = width > height ? 'landscape' = detectTouchDevice()
+    const isHighDensity = detectHighDensity()
+    const isLowPower = await detectBatteryStatus()
+    const performanceScore = await measurePerformance()
+
+    const newState= {
+      deviceType,
+      orientation,
+      screenSize,
+      width,
+      height,
+      isTouchDevice,
+      isHighDensity,
+      isLowPower,
+      performanceScore
+    }
+
+    setState(newState)
+
+    // Trigger callbacks
+    if (callbacks.onDeviceChange && deviceType !== state.deviceType) {
+      callbacks.onDeviceChange(deviceType)
+    }
+    if (callbacks.onOrientationChange && orientation !== state.orientation) {
+      callbacks.onOrientationChange(orientation)
+    }
+    if (callbacks.onScreenSizeChange && screenSize !== state.screenSize) {
+      callbacks.onScreenSizeChange(screenSize)
+    }
+    if (callbacks.onPerformanceChange && performanceScore !== state.performanceScore) {
+      callbacks.onPerformanceChange(performanceScore)
+    }
+    if (callbacks.onBatteryChange && isLowPower !== state.isLowPower) {
+      callbacks.onBatteryChange(isLowPower)
+    }
+  }, [
+    detectDevice,
+    detectScreenSize,
+    detectTouchDevice,
+    detectHighDensity,
+    detectBatteryStatus,
+    measurePerformance,
+    callbacks,
+    state.deviceType,
+    state.orientation,
+    state.screenSize,
+    state.performanceScore,
+    state.isLowPower
+  ])
+
+  // Initialize and set up event listeners
+  useEffect(() => {
+    updateLayout()
+
+    const handleResize = () => updateLayout()
+    const handleOrientationChange = () => updateLayout()
+
+    window.addEventListener('resize', handleResize)
+    window.addEventListener('orientationchange', handleOrientationChange)
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+      window.removeEventListener('orientationchange', handleOrientationChange)
+    }
+  }, [updateLayout])
+
+  // Performance monitoring interval
+  useEffect(() => {
+    if (!enablePerformanceOptimization) return
+
+    const interval = setInterval(updateLayout, 5000)
+    return () => clearInterval(interval)
+  }, [enablePerformanceOptimization, updateLayout])
+
+  // Battery monitoring
+  useEffect(() => {
+    if (!enableBatteryOptimization) return
+
+    const interval = setInterval(updateLayout, 30000) // Check every 30 seconds
+    return () => clearInterval(interval)
+  }, [enableBatteryOptimization, updateLayout])
+
+  // Computed values
+  const isMobile = useMemo(() => state.deviceType === 'mobile', [state.deviceType])
+  const isTablet = useMemo(() => state.deviceType === 'tablet', [state.deviceType])
+  const isDesktop = useMemo(() => state.deviceType === 'desktop', [state.deviceType])
+  const isPortrait = useMemo(() => state.orientation === 'portrait', [state.orientation])
+  const isLandscape = useMemo(() => state.orientation === 'landscape', [state.orientation])
+
+  // Layout recommendations
+  const layoutRecommendations = useMemo(() => {
+    const recommendations = []
+
+    if (state.isLowPower && enableBatteryOptimization) {
+      recommendations.push('Reduce animations and effects for better battery life')
+    }
+
+    if (state.performanceScore < 70 && enablePerformanceOptimization) {
+      recommendations.push('Consider reducing layout complexity for better performance')
+    }
+
+    if (state.isTouchDevice && enableTouchOptimization) {
+      recommendations.push('Touch-friendly interactions enabled')
+    }
+
+    if (state.isHighDensity) {
+      recommendations.push('High-density display detected - using optimized assets')
+    }
+
+    return recommendations
+  }, [
+    state.isLowPower,
+    state.performanceScore,
+    state.isTouchDevice,
+    state.isHighDensity,
+    enableBatteryOptimization,
+    enablePerformanceOptimization,
+    enableTouchOptimization
+  ])
+
+  return {
+    // State
+    ...state,
+    
+    // Computed values
+    isMobile,
+    isTablet,
+    isDesktop,
+    isPortrait,
+    isLandscape,
+    
+    // Layout recommendations
+    layoutRecommendations,
+    
+    // Actions
+    updateLayout,
+    measurePerformance,
+    measureMemoryUsage
+  }
+}
+
+export default useAdaptiveLayout