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

package/dist/hooks/use-touch-friendly-interface.d.ts

@@ -1,329 +0,0 @@
-export interface TouchTargetConfig {
-  minSize?: number
-  spacing?: 'compact' | 'default' | 'generous'
-  feedback?: 'scale' | 'ripple' | 'color' | 'none'
-  performance?: boolean
-  accessibility?: boolean
-}
-
-export interface TouchTargetState {
-  size: number
-  spacing: string
-  feedback: string
-  isOptimized: boolean
-  isAccessible: boolean
-  performanceScore: number
-}
-
-export interface TouchInteractionState {
-  isTouching: boolean
-  touchCount: number
-  touchStartTime: number
-  touchDuration: number
-  touchStartX: number
-  touchStartY: number
-  touchCurrentX: number
-  touchCurrentY: number
-  touchDeltaX: number
-  touchDeltaY: number
-  touchVelocity: number
-  gestureType: 'none' | 'tap' | 'double-tap' | 'long-press' | 'swipe' | 'pinch'
-}
-
-export interface TouchFriendlyInterfaceCallbacks {
-  onTouchTargetOptimized?: (config: TouchTargetConfig) => void
-  onTouchInteractionDetected?: (interaction: TouchInteractionState) => void
-  onPerformanceOptimized?: (score: number) => void
-  onAccessibilityEnhanced?: (feature: string) => void
-}
-
-export declare const useTouchFriendlyInterface: (
-  config: TouchTargetConfig = {},
-  callbacks: TouchFriendlyInterfaceCallbacks = {}
-) => {
-  const {
-    minSize = 44,
-    spacing = 'default',
-    feedback = 'scale',
-    performance: enablePerformance = true,
-    accessibility = true
-  } = config
-
-  const [touchTargetState, setTouchTargetState] = useState<TouchTargetState>({
-    size: minSize,
-    spacing,
-    feedback,
-    isOptimized: false,
-    isAccessible: false,
-    performanceScore: 0
-  })
-
-  const [touchInteractionState, setTouchInteractionState] = useState<TouchInteractionState>({
-    isTouching: false,
-    touchCount: 0,
-    touchStartTime: 0,
-    touchDuration: 0,
-    touchStartX: 0,
-    touchStartY: 0,
-    touchCurrentX: 0,
-    touchCurrentY: 0,
-    touchDeltaX: 0,
-    touchDeltaY: 0,
-    touchVelocity: 0,
-    gestureType: 'none'
-  })
-
-  const [isOptimizing, setIsOptimizing] = useState(false)
-  const [optimizations, setOptimizations] = useState<string[]>([])
-
-  const touchStartTimeRef = useRef(0)
-  const lastTouchTimeRef = useRef(0)
-  const touchCountRef = useRef(0)
-  const performanceTimerRef = useRef<number | null>(null)
-
-  // Optimize touch targets for 44px compliance
-  const optimizeTouchTargets = useCallback(() => {
-    setIsOptimizing(true)
-
-    setTimeout(() => {
-      const newOptimizations: string[] = []
-
-      // Check and optimize touch target size
-      if (touchTargetState.size < 44) {
-        setTouchTargetState(prev => ({
-          ...prev,
-          size: 44,
-          isOptimized: true
-        }))
-        newOptimizations.push('Touch target size optimized to 44px minimum')
-      }
-
-      // Optimize spacing based on device
-      const deviceSpacing = window.innerWidth <= 768 ? 'generous' : 'default'
-      if (touchTargetState.spacing !== deviceSpacing) {
-        setTouchTargetState(prev => ({
-          ...prev,
-          spacing: deviceSpacing
-        }))
-        newOptimizations.push(`Touch spacing optimized for ${deviceSpacing} layout`)
-      }
-
-      // Performance optimization
-      if (enablePerformance) {
-        setTouchTargetState(prev => ({
-          ...prev,
-          performanceScore: 95
-        }))
-        newOptimizations.push('Touch performance optimized with hardware acceleration')
-      }
-
-      // Accessibility optimization
-      if (accessibility) {
-        setTouchTargetState(prev => ({
-          ...prev,
-          isAccessible: true
-        }))
-        newOptimizations.push('Touch accessibility enhanced with ARIA support')
-      }
-
-      setOptimizations(prev => [...prev, ...newOptimizations])
-      setIsOptimizing(false)
-
-      newOptimizations.forEach(() => {
-        callbacks.onTouchTargetOptimized?.(config)
-      })
-    }, 200)
-  }, [touchTargetState.size, touchTargetState.spacing, performance, accessibility, config, callbacks])
-
-  // Handle touch start events
-  const handleTouchStart = useCallback((event: TouchEvent) => {
-    const touch = event.touches[0]
-    const currentTime = performance.now()
-
-    setTouchInteractionState(prev => ({
-      ...prev,
-      isTouching: true,
-      touchCount: event.touches.length,
-      touchStartTime: currentTime,
-      touchStartX: touch.clientX,
-      touchStartY: touch.clientY,
-      touchCurrentX: touch.clientX,
-      touchCurrentY: touch.clientY,
-      touchDeltaX: 0,
-      touchDeltaY: 0
-    }))
-
-    touchStartTimeRef.current = currentTime
-    touchCountRef.current = event.touches.length
-  }, [])
-
-  // Handle touch move events
-  const handleTouchMove = useCallback((event: TouchEvent) => {
-    const touch = event.touches[0]
-    const currentTime = performance.now()
-    const deltaX = touch.clientX - touchInteractionState.touchStartX
-    const deltaY = touch.clientY - touchInteractionState.touchStartY
-    const duration = currentTime - touchInteractionState.touchStartTime
-    const velocity = Math.sqrt(deltaX * deltaX + deltaY * deltaY) / duration
-
-    setTouchInteractionState(prev => ({
-      ...prev,
-      touchCurrentX: touch.clientX,
-      touchCurrentY: touch.clientY,
-      touchDeltaX: deltaX,
-      touchDeltaY: deltaY,
-      touchDuration: duration,
-      touchVelocity: velocity
-    }))
-  }, [touchInteractionState.touchStartX, touchInteractionState.touchStartY])
-
-  // Handle touch end events
-  const handleTouchEnd = useCallback(() => {
-    const currentTime = performance.now()
-    const duration = currentTime - touchInteractionState.touchStartTime
-    const distance = Math.sqrt(
-      touchInteractionState.touchDeltaX * touchInteractionState.touchDeltaX +
-      touchInteractionState.touchDeltaY * touchInteractionState.touchDeltaY
-    )
-
-    // Detect gesture type
-    let gestureType: TouchInteractionState['gestureType'] = 'none'
-
-    if (duration < 200 && distance < 10) {
-      // Tap detection
-      const timeSinceLastTouch = currentTime - lastTouchTimeRef.current
-      if (timeSinceLastTouch < 300) {
-        gestureType = 'double-tap'
-        touchCountRef.current++
-      } else {
-        gestureType = 'tap'
-        touchCountRef.current = 1
-      }
-    } else if (duration > 500 && distance < 10) {
-      gestureType = 'long-press'
-    } else if (distance > 50) {
-      gestureType = 'swipe'
-    }
-
-    setTouchInteractionState(prev => ({
-      ...prev,
-      isTouching: false,
-      gestureType
-    }))
-
-    lastTouchTimeRef.current = currentTime
-
-    // Trigger callback
-    callbacks.onTouchInteractionDetected?.({
-      ...touchInteractionState,
-      isTouching: false,
-      gestureType
-    })
-  }, [touchInteractionState, callbacks])
-
-  // Performance monitoring
-  const startPerformanceMonitoring = useCallback(() => {
-    if (!enablePerformance) return () => {}
-
-    const measurePerformance = () => {
-      const frameRate = 60 // Simplified for demo
-      const memoryUsage = 0 // Simplified for demo
-
-      const score = Math.max(0, 100 - Math.abs(frameRate - 60) - memoryUsage)
-
-      setTouchTargetState(prev => ({
-        ...prev,
-        performanceScore: Math.round(score)
-      }))
-
-      callbacks.onPerformanceOptimized?.(score)
-
-      performanceTimerRef.current = requestAnimationFrame(measurePerformance)
-    }
-
-    performanceTimerRef.current = requestAnimationFrame(measurePerformance)
-
-    return () => {
-      if (performanceTimerRef.current) {
-        cancelAnimationFrame(performanceTimerRef.current)
-      }
-    }
-  }, [performance, callbacks])
-
-  // Accessibility enhancement
-  const enhanceAccessibility = useCallback(() => {
-    if (!accessibility) return
-
-    const enhancements = [
-      'ARIA labels for touch targets',
-      'Focus management for touch interactions',
-      'Screen reader support for touch gestures',
-      'Keyboard navigation for touch elements'
-    ]
-
-    enhancements.forEach(enhancement => {
-      callbacks.onAccessibilityEnhanced?.(enhancement)
-    })
-  }, [accessibility, callbacks])
-
-  // Initialize touch event listeners
-  useEffect(() => {
-    document.addEventListener('touchstart', handleTouchStart, { passive: false })
-    document.addEventListener('touchmove', handleTouchMove, { passive: false })
-    document.addEventListener('touchend', handleTouchEnd, { passive: false })
-
-    return () => {
-      document.removeEventListener('touchstart', handleTouchStart)
-      document.removeEventListener('touchmove', handleTouchMove)
-      document.removeEventListener('touchend', handleTouchEnd)
-    }
-  }, [handleTouchStart, handleTouchMove, handleTouchEnd])
-
-  // Start performance monitoring
-  useEffect(() => {
-    const stopPerformanceMonitoring = startPerformanceMonitoring()
-    return stopPerformanceMonitoring
-  }, [startPerformanceMonitoring])
-
-  // Auto-optimize on mount
-  useEffect(() => {
-    optimizeTouchTargets()
-    enhanceAccessibility()
-  }, [optimizeTouchTargets, enhanceAccessibility])
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      if (performanceTimerRef.current) {
-        cancelAnimationFrame(performanceTimerRef.current)
-      }
-    }
-  }, [])
-
-  return {
-    // State
-    touchTargetState,
-    touchInteractionState,
-    isOptimizing,
-    optimizations,
-
-    // Functions
-    optimizeTouchTargets,
-    enhanceAccessibility,
-    startPerformanceMonitoring,
-
-    // Utility functions
-    getTouchTargetSize: () => touchTargetState.size,
-    isTouchTargetCompliant: () => touchTargetState.size >= 44,
-    getTouchSpacing: () => touchTargetState.spacing,
-    getTouchFeedback: () => touchTargetState.feedback,
-    getPerformanceScore: () => touchTargetState.performanceScore,
-    isPerformanceOptimal: () => touchTargetState.performanceScore >= 80,
-    isAccessibilityCompliant: () => touchTargetState.isAccessible,
-    getTouchGestureType: () => touchInteractionState.gestureType,
-    getTouchVelocity: () => touchInteractionState.touchVelocity,
-    clearOptimizations: () => setOptimizations([])
-  }
-}
-
-export default useTouchFriendlyInterface

package/dist/hooks/use-touch-optimization.d.ts

@@ -1,373 +0,0 @@
-export interface TouchOptimizationConfig {
-  enablePassiveListeners: boolean
-  enableTouchActionOptimization: boolean
-  enableBatteryOptimization: boolean
-  enablePerformanceMonitoring: boolean
-  touchActionMode: 'auto' | 'manipulation' | 'pan-x' | 'pan-y' | 'none'
-  maxTouchPoints: number
-  touchEventThrottling: number
-}
-
-export interface TouchPerformanceMetrics {
-  touchEventCount: number
-  averageTouchDuration: number
-  touchEventLatency: number
-  batteryImpact: 'low' | 'medium' | 'high'
-  performanceScore: 'excellent' | 'good' | 'fair' | 'poor'
-}
-
-export interface TouchOptimizationCallbacks {
-  onTouchPerformanceWarning?: (metrics: TouchPerformanceMetrics) => void
-  onBatteryOptimization?: (enabled: boolean) => void
-  onTouchEventThrottling?: (enabled: boolean) => void
-}
-
-export interface TouchOptimizationState {
-  isOptimized: boolean
-  currentTouchAction: string
-  passiveListenersEnabled: boolean
-  batteryOptimizationEnabled: boolean
-  throttlingEnabled: boolean
-  lastOptimization: Date | null
-}
-
-export declare const useTouchOptimization: (
-  elementRef: React.RefObject<HTMLElement>,
-  callbacks: TouchOptimizationCallbacks = {},
-  config: Partial<TouchOptimizationConfig> = {}
-) => {
-  const defaultConfig: TouchOptimizationConfig = {
-    enablePassiveListeners: true,
-    enableTouchActionOptimization: true,
-    enableBatteryOptimization: true,
-    enablePerformanceMonitoring: true,
-    touchActionMode: 'manipulation',
-    maxTouchPoints: 5,
-    touchEventThrottling: 16, // ~60fps
-    ...config
-  }
-
-  const [optimizationState, setOptimizationState] = useState<TouchOptimizationState>({
-    isOptimized: false,
-    currentTouchAction: defaultConfig.touchActionMode,
-    passiveListenersEnabled: false,
-    batteryOptimizationEnabled: false,
-    throttlingEnabled: false,
-    lastOptimization: null
-  })
-
-  const [performanceMetrics, setPerformanceMetrics] = useState<TouchPerformanceMetrics>({
-    touchEventCount: 0,
-    averageTouchDuration: 0,
-    touchEventLatency: 0,
-    batteryImpact: 'low',
-    performanceScore: 'excellent'
-  })
-
-  const touchEventTimesRef = useRef<number[]>([])
-  const lastTouchEventRef = useRef<number>(0)
-  const touchEventThrottleTimerRef = useRef<NodeJS.Timeout | null>(null)
-  const batteryLevelRef = useRef<number | null>(null)
-  const isLowPowerModeRef = useRef<boolean>(false)
-
-  // Check battery status for optimization
-  useEffect(() => {
-    const checkBatteryStatus = async () => {
-      if ('getBattery' in navigator) {
-        try {
-          const battery = await (navigator as any).getBattery()
-          batteryLevelRef.current = battery.level
-          isLowPowerModeRef.current = battery.level < 0.2
-
-          if (defaultConfig.enableBatteryOptimization && isLowPowerModeRef.current) {
-            setOptimizationState(prev => ({ ...prev, batteryOptimizationEnabled: true }))
-            callbacks.onBatteryOptimization?.(true)
-          }
-        } catch (error) {
-          console.warn('Battery API not supported:', error)
-        }
-      }
-    }
-
-    checkBatteryStatus()
-  }, [defaultConfig.enableBatteryOptimization, callbacks])
-
-  // Calculate performance score
-  const calculatePerformanceScore = useCallback((metrics: TouchPerformanceMetrics): 'excellent' | 'good' | 'fair' | 'poor' => {
-    if (metrics.touchEventLatency < 16 && metrics.averageTouchDuration < 50) return 'excellent'
-    if (metrics.touchEventLatency < 32 && metrics.averageTouchDuration < 100) return 'good'
-    if (metrics.touchEventLatency < 64 && metrics.averageTouchDuration < 200) return 'fair'
-    return 'poor'
-  }, [])
-
-  // Update performance metrics
-  const updatePerformanceMetrics = useCallback((touchDuration: number, latency: number) => {
-    const currentTime = Date.now()
-    touchEventTimesRef.current.push(currentTime)
-
-    // Keep only last 100 touch events for averaging
-    if (touchEventTimesRef.current.length > 100) {
-      touchEventTimesRef.current.shift()
-    }
-
-    setPerformanceMetrics(prev => {
-      const newCount = prev.touchEventCount + 1
-      const newAverageDuration = (prev.averageTouchDuration * prev.touchEventCount + touchDuration) / newCount
-      const newAverageLatency = (prev.touchEventLatency * prev.touchEventCount + latency) / newCount
-
-      const batteryImpact: 'low' | 'medium' | 'high' = isLowPowerModeRef.current ? 'high' : batteryLevelRef.current && batteryLevelRef.current < 0.5 ? 'medium' : 'low'
-
-      const newMetrics: TouchPerformanceMetrics = {
-        touchEventCount: newCount,
-        averageTouchDuration: newAverageDuration,
-        touchEventLatency: newAverageLatency,
-        batteryImpact,
-        performanceScore: 'excellent'
-      }
-
-      newMetrics.performanceScore = calculatePerformanceScore(newMetrics)
-
-      // Check for performance warnings
-      if (newMetrics.performanceScore === 'poor' || newMetrics.touchEventLatency > 100) {
-        callbacks.onTouchPerformanceWarning?.(newMetrics)
-      }
-
-      return newMetrics
-    })
-  }, [callbacks, calculatePerformanceScore])
-
-  // Optimize touch action CSS
-  const optimizeTouchAction = useCallback(() => {
-    const element = elementRef.current
-    if (!element || !defaultConfig.enableTouchActionOptimization) return
-
-    const currentTouchAction = getComputedStyle(element).touchAction
-
-    if (currentTouchAction !== defaultConfig.touchActionMode) {
-      element.style.touchAction = defaultConfig.touchActionMode
-      setOptimizationState(prev => ({ 
-        ...prev, 
-        currentTouchAction: defaultConfig.touchActionMode,
-        lastOptimization: new Date()
-      }))
-    }
-  }, [elementRef, defaultConfig.enableTouchActionOptimization, defaultConfig.touchActionMode])
-
-  // Enable passive listeners for better performance
-  const enablePassiveListeners = useCallback(() => {
-    const element = elementRef.current
-    if (!element || !defaultConfig.enablePassiveListeners) return
-
-    // Check if passive listeners are supported
-    let supportsPassive = false
-    try {
-      const opts = Object.defineProperty({}, 'passive', {
-        get: () => { supportsPassive = true; return true; }
-      })
-      // Use a dummy event listener to test passive support
-      const testListener = () => {}
-      window.addEventListener('test', testListener, opts)
-      window.removeEventListener('test', testListener, opts)
-    } catch (e) {
-      // Passive listeners not supported
-    }
-
-    if (supportsPassive) {
-      setOptimizationState(prev => ({ ...prev, passiveListenersEnabled: true }))
-    }
-  }, [elementRef, defaultConfig.enablePassiveListeners])
-
-  // Touch event throttling for performance
-  const enableTouchEventThrottling = useCallback(() => {
-    if (!defaultConfig.enablePerformanceMonitoring) return
-
-    setOptimizationState(prev => ({ ...prev, throttlingEnabled: true }))
-    callbacks.onTouchEventThrottling?.(true)
-  }, [defaultConfig.enablePerformanceMonitoring, callbacks])
-
-  // Optimize touch event handling
-  const optimizeTouchEventHandling = useCallback((event: TouchEvent) => {
-    const currentTime = Date.now()
-    const touchDuration = currentTime - lastTouchEventRef.current
-    const latency = performance.now() - event.timeStamp
-
-    // Update performance metrics
-    updatePerformanceMetrics(touchDuration, latency)
-
-    // Apply throttling if enabled
-    if (optimizationState.throttlingEnabled && touchEventThrottleTimerRef.current) {
-      return // Skip this event due to throttling
-    }
-
-    // Set up throttling for next event
-    if (optimizationState.throttlingEnabled) {
-      touchEventThrottleTimerRef.current = setTimeout(() => {
-        touchEventThrottleTimerRef.current = null
-      }, defaultConfig.touchEventThrottling)
-    }
-
-    lastTouchEventRef.current = currentTime
-  }, [optimizationState.throttlingEnabled, updatePerformanceMetrics, defaultConfig.touchEventThrottling])
-
-  // Apply all optimizations
-  const applyOptimizations = useCallback(() => {
-    optimizeTouchAction()
-    enablePassiveListeners()
-
-    if (defaultConfig.enableBatteryOptimization && isLowPowerModeRef.current) {
-      enableTouchEventThrottling()
-    }
-
-    setOptimizationState(prev => ({ 
-      ...prev, 
-      isOptimized: true,
-      lastOptimization: new Date()
-    }))
-  }, [
-    optimizeTouchAction, 
-    enablePassiveListeners, 
-    enableTouchEventThrottling, 
-    defaultConfig.enableBatteryOptimization
-  ])
-
-  // Reset optimizations
-  const resetOptimizations = useCallback(() => {
-    const element = elementRef.current
-    if (element) {
-      element.style.touchAction = 'auto'
-    }
-
-    setOptimizationState({
-      isOptimized: false,
-      currentTouchAction: 'auto',
-      passiveListenersEnabled: false,
-      batteryOptimizationEnabled: false,
-      throttlingEnabled: false,
-      lastOptimization: null
-    })
-
-    setPerformanceMetrics({
-      touchEventCount: 0,
-      averageTouchDuration: 0,
-      touchEventLatency: 0,
-      batteryImpact: 'low',
-      performanceScore: 'excellent'
-    })
-
-    if (touchEventThrottleTimerRef.current) {
-      clearTimeout(touchEventThrottleTimerRef.current)
-      touchEventThrottleTimerRef.current = null
-    }
-  }, [elementRef])
-
-  // Set up touch event listeners with optimization
-  useEffect(() => {
-    const element = elementRef.current
-    if (!element) return
-
-    // Apply initial optimizations
-    applyOptimizations()
-
-    // Add touch event listener
-    const handleTouchEvent = (event: TouchEvent) => {
-      if (defaultConfig.enablePerformanceMonitoring) {
-        optimizeTouchEventHandling(event)
-      }
-    }
-
-    const eventOptions = optimizationState.passiveListenersEnabled ? { passive: true } : {}
-    element.addEventListener('touchstart', handleTouchEvent, eventOptions)
-    element.addEventListener('touchmove', handleTouchEvent, eventOptions)
-    element.addEventListener('touchend', handleTouchEvent, eventOptions)
-
-    return () => {
-      element.removeEventListener('touchstart', handleTouchEvent)
-      element.removeEventListener('touchmove', handleTouchEvent)
-      element.removeEventListener('touchend', handleTouchEvent)
-
-      if (touchEventThrottleTimerRef.current) {
-        clearTimeout(touchEventThrottleTimerRef.current)
-      }
-    }
-  }, [
-    elementRef, 
-    applyOptimizations, 
-    optimizationState.passiveListenersEnabled, 
-    defaultConfig.enablePerformanceMonitoring,
-    optimizeTouchEventHandling
-  ])
-
-  // Monitor battery changes
-  useEffect(() => {
-    const handleBatteryChange = () => {
-      if (defaultConfig.enableBatteryOptimization) {
-        applyOptimizations()
-      }
-    }
-
-    if ('getBattery' in navigator) {
-      // Battery change events are not widely supported, so we'll check periodically
-      const batteryCheckInterval = setInterval(handleBatteryChange, 30000) // Check every 30 seconds
-
-      return () => clearInterval(batteryCheckInterval)
-    }
-  }, [defaultConfig.enableBatteryOptimization, applyOptimizations])
-
-  // Utility functions
-  const getOptimizationReport = useCallback(() => {
-    return {
-      state: optimizationState,
-      metrics: performanceMetrics,
-      recommendations: getOptimizationRecommendations()
-    }
-  }, [optimizationState, performanceMetrics])
-
-  const getOptimizationRecommendations = useCallback(() => {
-    const recommendations: string[] = []
-
-    if (performanceMetrics.performanceScore === 'poor') {
-      recommendations.push('Consider enabling touch event throttling')
-      recommendations.push('Reduce touch event complexity')
-    }
-
-    if (performanceMetrics.batteryImpact === 'high') {
-      recommendations.push('Enable battery optimization mode')
-      recommendations.push('Reduce touch event frequency')
-    }
-
-    if (!optimizationState.passiveListenersEnabled) {
-      recommendations.push('Enable passive event listeners for better performance')
-    }
-
-    return recommendations
-  }, [performanceMetrics, optimizationState])
-
-  return {
-    optimizationState,
-    performanceMetrics,
-    applyOptimizations,
-    resetOptimizations,
-    getOptimizationReport,
-    getOptimizationRecommendations
-  }
-}
-
-// Convenience hook for basic touch optimization
-export declare const useBasicTouchOptimization: (elementRef: React.RefObject<HTMLElement>) => {
-  return useTouchOptimization(elementRef, {}, {
-    enablePassiveListeners: true,
-    enableTouchActionOptimization: true,
-    enableBatteryOptimization: false,
-    enablePerformanceMonitoring: false
-  })
-}
-
-// Convenience hook for battery-aware touch optimization
-export declare const useBatteryAwareTouchOptimization: (elementRef: React.RefObject<HTMLElement>) => {
-  return useTouchOptimization(elementRef, {}, {
-    enablePassiveListeners: true,
-    enableTouchActionOptimization: true,
-    enableBatteryOptimization: true,
-    enablePerformanceMonitoring: true
-  })
-}