@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.4 → 0.1.6

package/src/hooks/use-mobile-form-layout.ts

@@ -0,0 +1,464 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+
+export interface LayoutConfig {
+  enableTouchOptimization: boolean
+  enableKeyboardOptimization: boolean
+  enableResponsiveBehavior: boolean
+  enablePerformanceOptimization: boolean
+  touchTargetSize: number
+  spacingMultiplier: number
+  maxFieldWidth: number
+  enableAutoFocus: boolean
+}
+
+export interface LayoutState {
+  isMobile: boolean
+  isTablet: boolean
+  isDesktop: boolean
+  orientation: 'portrait' | 'landscape'
+  keyboardVisible: boolean
+  viewportHeight: number
+  viewportWidth: number
+  safeAreaInsets: {
+    top: number
+    bottom: number
+    left: number
+    right: number
+  }
+}
+
+export interface LayoutCallbacks {
+  onLayoutChange?: (layout: LayoutState) => void
+  onOrientationChange?: (orientation: 'portrait' | 'landscape') => void
+  onKeyboardVisibilityChange?: (visible: boolean) => void
+  onViewportChange?: (width: number, height: number) => void
+}
+
+export interface MobileFormLayoutState {
+  layout: LayoutState
+  isOptimized: boolean
+  currentSpacing: number
+  currentFieldWidth: number
+  performanceMetrics: {
+    layoutUpdates: number
+    lastUpdateTime: number
+    optimizationScore: number
+  }
+}
+
+export const useMobileFormLayout = (
+  callbacks: LayoutCallbacks = {},
+  config: Partial<LayoutConfig> = {}
+) => {
+  const defaultConfig: LayoutConfig = {
+    enableTouchOptimization: true,
+    enableKeyboardOptimization: true,
+    enableResponsiveBehavior: true,
+    enablePerformanceOptimization: true,
+    touchTargetSize: 44,
+    spacingMultiplier: 1.2,
+    maxFieldWidth: 400,
+    enableAutoFocus: true,
+    ...config
+  }
+
+  const [layoutState, setLayoutState] = useState<MobileFormLayoutState>({
+    layout: {
+      isMobile: false,
+      isTablet: false,
+      isDesktop: false,
+      orientation: 'portrait',
+      keyboardVisible: false,
+      viewportHeight: window.innerHeight,
+      viewportWidth: window.innerWidth,
+      safeAreaInsets: { top: 0, bottom: 0, left: 0, right: 0 }
+    },
+    isOptimized: false,
+    currentSpacing: defaultConfig.touchTargetSize * defaultConfig.spacingMultiplier,
+    currentFieldWidth: Math.min(window.innerWidth - 32, defaultConfig.maxFieldWidth),
+    performanceMetrics: {
+      layoutUpdates: 0,
+      lastUpdateTime: 0,
+      optimizationScore: 0
+    }
+  })
+
+  const resizeObserverRef = useRef<ResizeObserver | null>(null)
+  const layoutUpdateTimerRef = useRef<NodeJS.Timeout | null>(null)
+  const keyboardTimerRef = useRef<NodeJS.Timeout | null>(null)
+
+  // Detect device type
+  const detectDeviceType = useCallback(() => {
+    const width = window.innerWidth
+    const userAgent = navigator.userAgent.toLowerCase()
+    
+    let isMobile = false
+    let isTablet = false
+    let isDesktop = false
+
+    // Check screen size
+    if (width < 768) {
+      isMobile = true
+    } else if (width < 1024) {
+      isTablet = true
+    } else {
+      isDesktop = true
+    }
+
+    // Check user agent for mobile devices
+    if (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)) {
+      isMobile = true
+      isTablet = width >= 768 && width < 1024
+      isDesktop = false
+    }
+
+    return { isMobile, isTablet, isDesktop }
+  }, [])
+
+  // Detect orientation
+  const detectOrientation = useCallback((): 'portrait' | 'landscape' => {
+    if (window.innerHeight > window.innerWidth) {
+      return 'portrait'
+    }
+    return 'landscape'
+  }, [])
+
+  // Get safe area insets (for devices with notches)
+  const getSafeAreaInsets = useCallback(() => {
+    const style = getComputedStyle(document.documentElement)
+    
+    return {
+      top: parseInt(style.getPropertyValue('--sat') || '0'),
+      bottom: parseInt(style.getPropertyValue('--sab') || '0'),
+      left: parseInt(style.getPropertyValue('--sal') || '0'),
+      right: parseInt(style.getPropertyValue('--sar') || '0')
+    }
+  }, [])
+
+  // Detect keyboard visibility
+  const detectKeyboardVisibility = useCallback(() => {
+    if (!defaultConfig.enableKeyboardOptimization) return false
+
+    const currentHeight = window.innerHeight
+    const currentWidth = window.innerWidth
+    
+    // Simple heuristic: if height decreases significantly and width stays the same
+    // it's likely the keyboard appeared
+    const heightRatio = currentHeight / layoutState.layout.viewportHeight
+    const widthRatio = currentWidth / layoutState.layout.viewportWidth
+    
+    return heightRatio < 0.8 && widthRatio > 0.95
+  }, [defaultConfig.enableKeyboardOptimization, layoutState.layout.viewportHeight, layoutState.layout.viewportWidth])
+
+  // Update layout state
+  const updateLayout = useCallback(() => {
+    const deviceType = detectDeviceType()
+    const orientation = detectOrientation()
+    const safeAreaInsets = getSafeAreaInsets()
+    const keyboardVisible = detectKeyboardVisibility()
+    
+    const newLayout: LayoutState = {
+      ...deviceType,
+      orientation,
+      keyboardVisible,
+      viewportHeight: window.innerHeight,
+      viewportWidth: window.innerWidth,
+      safeAreaInsets
+    }
+
+    // Calculate optimal spacing and field width
+    let spacing = defaultConfig.touchTargetSize * defaultConfig.spacingMultiplier
+    let fieldWidth = Math.min(window.innerWidth - 32, defaultConfig.maxFieldWidth)
+
+    // Adjust for mobile devices
+    if (newLayout.isMobile) {
+      spacing = Math.max(spacing, 16) // Minimum spacing for mobile
+      fieldWidth = Math.min(fieldWidth, window.innerWidth - 24) // Account for safe areas
+    }
+
+    // Adjust for keyboard visibility
+    if (newLayout.keyboardVisible) {
+      spacing = Math.max(spacing * 0.8, 12) // Reduce spacing when keyboard is visible
+      fieldWidth = Math.min(fieldWidth, window.innerWidth - 16)
+    }
+
+    // Adjust for orientation
+    if (newLayout.orientation === 'landscape' && newLayout.isMobile) {
+      spacing = Math.max(spacing * 0.9, 14)
+      fieldWidth = Math.min(fieldWidth, window.innerHeight - 24)
+    }
+
+    setLayoutState(prev => {
+      const newState = {
+        ...prev,
+        layout: newLayout,
+        currentSpacing: spacing,
+        currentFieldWidth: fieldWidth,
+        performanceMetrics: {
+          ...prev.performanceMetrics,
+          layoutUpdates: prev.performanceMetrics.layoutUpdates + 1,
+          lastUpdateTime: Date.now()
+        }
+      }
+
+      // Calculate optimization score
+      const score = calculateOptimizationScore(newState)
+      newState.performanceMetrics.optimizationScore = score
+      newState.isOptimized = score >= 0.8
+
+      return newState
+    })
+
+    // Notify callbacks
+    callbacks.onLayoutChange?.(newLayout)
+    callbacks.onOrientationChange?.(orientation)
+    callbacks.onKeyboardVisibilityChange?.(keyboardVisible)
+    callbacks.onViewportChange?.(window.innerWidth, window.innerHeight)
+  }, [
+    detectDeviceType,
+    detectOrientation,
+    getSafeAreaInsets,
+    detectKeyboardVisibility,
+    defaultConfig.touchTargetSize,
+    defaultConfig.spacingMultiplier,
+    defaultConfig.maxFieldWidth,
+    callbacks
+  ])
+
+  // Calculate optimization score
+  const calculateOptimizationScore = useCallback((state: MobileFormLayoutState): number => {
+    let score = 0
+    const { layout, currentSpacing, currentFieldWidth } = state
+
+    // Touch target optimization (40% weight)
+    if (currentSpacing >= defaultConfig.touchTargetSize) {
+      score += 0.4
+    } else if (currentSpacing >= defaultConfig.touchTargetSize * 0.8) {
+      score += 0.3
+    } else if (currentSpacing >= defaultConfig.touchTargetSize * 0.6) {
+      score += 0.2
+    }
+
+    // Field width optimization (30% weight)
+    const optimalWidth = Math.min(layout.viewportWidth - 32, defaultConfig.maxFieldWidth)
+    const widthRatio = currentFieldWidth / optimalWidth
+    if (widthRatio >= 0.9) {
+      score += 0.3
+    } else if (widthRatio >= 0.7) {
+      score += 0.2
+    } else if (widthRatio >= 0.5) {
+      score += 0.1
+    }
+
+    // Responsive behavior (20% weight)
+    if (layout.isMobile && layout.orientation === 'portrait') {
+      score += 0.2
+    } else if (layout.isMobile && layout.orientation === 'landscape') {
+      score += 0.15
+    } else if (layout.isTablet) {
+      score += 0.1
+    }
+
+    // Performance optimization (10% weight)
+    if (state.performanceMetrics.layoutUpdates < 10) {
+      score += 0.1
+    } else if (state.performanceMetrics.layoutUpdates < 20) {
+      score += 0.05
+    }
+
+    return Math.min(score, 1)
+  }, [defaultConfig.touchTargetSize, defaultConfig.maxFieldWidth])
+
+  // Debounced layout update
+  const debouncedUpdateLayout = useCallback(() => {
+    if (layoutUpdateTimerRef.current) {
+      clearTimeout(layoutUpdateTimerRef.current)
+    }
+
+    layoutUpdateTimerRef.current = setTimeout(() => {
+      updateLayout()
+    }, 100) // 100ms debounce
+  }, [updateLayout])
+
+  // Handle window resize
+  const handleResize = useCallback(() => {
+    if (defaultConfig.enableResponsiveBehavior) {
+      debouncedUpdateLayout()
+    }
+  }, [defaultConfig.enableResponsiveBehavior, debouncedUpdateLayout])
+
+  // Handle orientation change
+  const handleOrientationChange = useCallback(() => {
+    if (defaultConfig.enableResponsiveBehavior) {
+      // Add delay for orientation change to complete
+      setTimeout(() => {
+        updateLayout()
+      }, 300)
+    }
+  }, [defaultConfig.enableResponsiveBehavior, updateLayout])
+
+  // Handle keyboard visibility changes
+  const handleKeyboardChange = useCallback(() => {
+    if (defaultConfig.enableKeyboardOptimization) {
+      if (keyboardTimerRef.current) {
+        clearTimeout(keyboardTimerRef.current)
+      }
+
+      keyboardTimerRef.current = setTimeout(() => {
+        updateLayout()
+      }, 150) // Small delay to detect keyboard changes
+    }
+  }, [defaultConfig.enableKeyboardOptimization, updateLayout])
+
+  // Set up resize observer for more precise layout detection
+  useEffect(() => {
+    if (defaultConfig.enablePerformanceOptimization && 'ResizeObserver' in window) {
+      resizeObserverRef.current = new ResizeObserver(() => {
+        handleResize()
+      })
+
+      resizeObserverRef.current.observe(document.body)
+    }
+
+    return () => {
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect()
+      }
+    }
+  }, [defaultConfig.enablePerformanceOptimization, handleResize])
+
+  // Set up window event listeners
+  useEffect(() => {
+    if (defaultConfig.enableResponsiveBehavior) {
+      window.addEventListener('resize', handleResize)
+      window.addEventListener('orientationchange', handleOrientationChange)
+      
+      // Listen for visual viewport changes (better for mobile)
+      if ('visualViewport' in window) {
+        (window as any).visualViewport.addEventListener('resize', handleKeyboardChange)
+      }
+    }
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+      window.removeEventListener('orientationchange', handleOrientationChange)
+      
+      if ('visualViewport' in window) {
+        (window as any).visualViewport.removeEventListener('resize', handleKeyboardChange)
+      }
+    }
+  }, [defaultConfig.enableResponsiveBehavior, handleResize, handleOrientationChange, handleKeyboardChange])
+
+  // Initial layout detection
+  useEffect(() => {
+    updateLayout()
+  }, [updateLayout])
+
+  // Get CSS classes for layout optimization
+  const getLayoutClasses = useCallback(() => {
+    const { layout, isOptimized } = layoutState
+    const classes = ['mobile-form-layout']
+
+    if (layout.isMobile) {
+      classes.push('layout-mobile')
+      if (layout.orientation === 'portrait') {
+        classes.push('layout-portrait')
+      } else {
+        classes.push('layout-landscape')
+      }
+    } else if (layout.isTablet) {
+      classes.push('layout-tablet')
+    } else {
+      classes.push('layout-desktop')
+    }
+
+    if (layout.keyboardVisible) {
+      classes.push('layout-keyboard-visible')
+    }
+
+    if (isOptimized) {
+      classes.push('layout-optimized')
+    }
+
+    return classes.join(' ')
+  }, [layoutState])
+
+  // Get CSS variables for dynamic styling
+  const getLayoutCSSVariables = useCallback(() => {
+    const { currentSpacing, currentFieldWidth } = layoutState
+    
+    return {
+      '--mobile-spacing': `${currentSpacing}px`,
+      '--mobile-field-width': `${currentFieldWidth}px`,
+      '--touch-target-size': `${defaultConfig.touchTargetSize}px`,
+      '--safe-area-top': `${layoutState.layout.safeAreaInsets.top}px`,
+      '--safe-area-bottom': `${layoutState.layout.safeAreaInsets.bottom}px`,
+      '--safe-area-left': `${layoutState.layout.safeAreaInsets.left}px`,
+      '--safe-area-right': `${layoutState.layout.safeAreaInsets.right}px`
+    }
+  }, [layoutState, defaultConfig.touchTargetSize])
+
+  // Auto-focus first input when layout changes
+  const autoFocusFirstInput = useCallback(() => {
+    if (!defaultConfig.enableAutoFocus) return
+
+    const firstInput = document.querySelector('input, textarea, select') as HTMLElement
+    if (firstInput && layoutState.layout.isMobile) {
+      // Small delay to ensure layout is stable
+      setTimeout(() => {
+        firstInput.focus()
+      }, 100)
+    }
+  }, [defaultConfig.enableAutoFocus, layoutState.layout.isMobile])
+
+  // Clean up timers on unmount
+  useEffect(() => {
+    return () => {
+      if (layoutUpdateTimerRef.current) {
+        clearTimeout(layoutUpdateTimerRef.current)
+      }
+      if (keyboardTimerRef.current) {
+        clearTimeout(keyboardTimerRef.current)
+      }
+    }
+  }, [])
+
+  return {
+    layoutState,
+    updateLayout,
+    getLayoutClasses,
+    getLayoutCSSVariables,
+    autoFocusFirstInput,
+    isMobile: layoutState.layout.isMobile,
+    isTablet: layoutState.layout.isTablet,
+    isDesktop: layoutState.layout.isDesktop,
+    orientation: layoutState.layout.orientation,
+    keyboardVisible: layoutState.layout.keyboardVisible,
+    currentSpacing: layoutState.currentSpacing,
+    currentFieldWidth: layoutState.currentFieldWidth,
+    isOptimized: layoutState.isOptimized,
+    performanceMetrics: layoutState.performanceMetrics
+  }
+}
+
+// Convenience hook for basic mobile layout
+export const useBasicMobileLayout = () => {
+  return useMobileFormLayout({}, {
+    enableTouchOptimization: true,
+    enableKeyboardOptimization: false,
+    enableResponsiveBehavior: true,
+    enablePerformanceOptimization: false,
+    enableAutoFocus: false
+  })
+}
+
+// Convenience hook for enhanced mobile layout
+export const useEnhancedMobileLayout = () => {
+  return useMobileFormLayout({}, {
+    enableTouchOptimization: true,
+    enableKeyboardOptimization: true,
+    enableResponsiveBehavior: true,
+    enablePerformanceOptimization: true,
+    enableAutoFocus: true
+  })
+}