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

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

@@ -0,0 +1,300 @@
+export interface TouchTarget {
+  id: string
+  x: number
+  y: number
+  width: number
+  height: number
+  minSize: number
+  isOptimized: boolean
+}
+
+export interface TouchEvent {
+  type: 'tap' | 'double-tap' | 'long-press' | 'swipe' | 'pinch'
+  target: TouchTarget
+  coordinates: { x: number; y: number }
+  timestamp: number
+  duration?: number
+  distance?: number
+}
+
+export interface MobileLayoutConfig {
+  enableTouchTargetOptimization?: boolean
+  enableGestureSupport?: boolean
+  enableTouchFeedback?: boolean
+  enablePerformanceOptimization?: boolean
+  minTouchTargetSize?: number
+  touchFeedbackDuration?: number
+  gestureThreshold?: number
+  longPressDelay?: number
+}
+
+export interface MobileLayoutCallbacks {
+  onTouchTargetOptimized?: (target: TouchTarget) => void
+  onGestureDetected?: (event: TouchEvent) => void
+  onTouchFeedback?: (type: string, target: TouchTarget) => void
+  onPerformanceOptimization?: (optimization: string) => void
+}
+
+export declare const useMobileLayout: (
+  config: MobileLayoutConfig = {},
+  callbacks: MobileLayoutCallbacks = {}
+) => {
+  const {
+    enableTouchTargetOptimization = true,
+    enableGestureSupport = true,
+    enableTouchFeedback = true,
+    enablePerformanceOptimization = true,
+    minTouchTargetSize = 44, // iOS/Android recommended minimum
+    touchFeedbackDuration = 150,
+    gestureThreshold = 50,
+    longPressDelay = 500
+  } = config
+
+  const [touchTargets, setTouchTargets] = useState<TouchTarget[]>([])
+  const [activeGestures, setActiveGestures] = useState<TouchEvent[]>([])
+  const [isOptimizing, setIsOptimizing] = useState(false)
+  const [optimizations, setOptimizations] = useState<string[]>([])
+
+  const touchStartRef = useRef<{ x: number; y: number; timestamp: number } | null>(null)
+  const longPressTimerRef = useRef<number | null>(null)
+  const touchFeedbackRef = useRef<HTMLDivElement | null>(null)
+
+  // Touch target optimization
+  const optimizeTouchTargets = useCallback(() => {
+    if (!enableTouchTargetOptimization) return
+
+    setIsOptimizing(true)
+
+    // Simulate touch target optimization
+    setTimeout(() => {
+      const optimizedTargets = touchTargets.map(target => ({
+        ...target,
+        isOptimized: target.width >= minTouchTargetSize && target.height >= minTouchTargetSize
+      }))
+
+      setTouchTargets(optimizedTargets)
+      setIsOptimizing(false)
+
+      const optimizationCount = optimizedTargets.filter(t => t.isOptimized).length
+      setOptimizations(prev => [...prev, `${optimizationCount} touch targets optimized`])
+
+      optimizedTargets.forEach(target => {
+        if (target.isOptimized) {
+          callbacks.onTouchTargetOptimized?.(target)
+        }
+      })
+    }, 200)
+  }, [enableTouchTargetOptimization, touchTargets, minTouchTargetSize, callbacks])
+
+  // Add touch target
+  const addTouchTarget = useCallback((target: Omit<TouchTarget, 'isOptimized'>) => {
+    const newTarget: TouchTarget = {
+      ...target,
+      isOptimized: target.width >= minTouchTargetSize && target.height >= minTouchTargetSize
+    }
+
+    setTouchTargets(prev => [...prev, newTarget])
+
+    if (newTarget.isOptimized) {
+      callbacks.onTouchTargetOptimized?.(newTarget)
+    }
+  }, [minTouchTargetSize, callbacks])
+
+  // Remove touch target
+  const removeTouchTarget = useCallback((id: string) => {
+    setTouchTargets(prev => prev.filter(target => target.id !== id))
+  }, [])
+
+  // Touch feedback
+  const showTouchFeedback = useCallback((type: string, target: TouchTarget) => {
+    if (!enableTouchFeedback) return
+
+    callbacks.onTouchFeedback?.(type, target)
+
+    // Create visual feedback element
+    if (touchFeedbackRef.current) {
+      const feedback = document.createElement('div')
+      feedback.className = `absolute rounded-full bg-cs-primary/20 pointer-events-none transition-all duration-${touchFeedbackDuration}ms`
+      feedback.style.cssText = `
+        left: ${target.x}px;
+        top: ${target.y}px;
+        width: ${target.width}px;
+        height: ${target.height}px;
+        transform: scale(1.2);
+        opacity: 0.8;
+      `
+
+      touchFeedbackRef.current.appendChild(feedback)
+
+      // Animate feedback
+      setTimeout(() => {
+        feedback.style.transform = 'scale(1)'
+        feedback.style.opacity = '0'
+      }, 50)
+
+      // Remove feedback element
+      setTimeout(() => {
+        if (feedback.parentNode) {
+          feedback.parentNode.removeChild(feedback)
+        }
+      }, touchFeedbackDuration)
+    }
+  }, [enableTouchFeedback, touchFeedbackDuration, callbacks])
+
+  // Gesture detection
+  const detectGesture = useCallback((startEvent: TouchEvent, endEvent: TouchEvent): TouchEvent | null => {
+    if (!enableGestureSupport) return null
+
+    const start = touchStartRef.current
+    if (!start) return null
+
+    const deltaX = endEvent.coordinates.x - start.x
+    const deltaY = endEvent.coordinates.y - start.y
+    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
+    const duration = endEvent.timestamp - start.timestamp
+
+    let gestureType: TouchEvent['type'] = 'tap'
+
+    if (distance > gestureThreshold) {
+      if (Math.abs(deltaX) > Math.abs(deltaY)) {
+        gestureType = deltaX > 0 ? 'swipe' : 'swipe'
+      } else {
+        gestureType = deltaY > 0 ? 'swipe' : 'swipe'
+      }
+    } else if (duration > longPressDelay) {
+      gestureType = 'long-press'
+    }
+
+    const gesture: TouchEvent = {
+      type: gestureType,
+      target: startEvent.target,
+      coordinates: endEvent.coordinates,
+      timestamp: endEvent.timestamp,
+      duration,
+      distance
+    }
+
+    setActiveGestures(prev => [...prev, gesture])
+    callbacks.onGestureDetected?.(gesture)
+
+    return gesture
+  }, [enableGestureSupport, gestureThreshold, longPressDelay, callbacks])
+
+  // Touch event handlers
+  const handleTouchStart = useCallback((event: React.TouchEvent, target: TouchTarget) => {
+    const touch = event.touches[0]
+
+    touchStartRef.current = {
+      x: touch.clientX,
+      y: touch.clientY,
+      timestamp: Date.now()
+    }
+
+    // Start long press timer
+    longPressTimerRef.current = window.setTimeout(() => {
+      const longPressEvent: TouchEvent = {
+        type: 'long-press',
+        target,
+        coordinates: { x: touch.clientX, y: touch.clientY },
+        timestamp: Date.now()
+      }
+
+      setActiveGestures(prev => [...prev, longPressEvent])
+      callbacks.onGestureDetected?.(longPressEvent)
+      showTouchFeedback('long-press', target)
+    }, longPressDelay)
+
+    showTouchFeedback('touch-start', target)
+  }, [longPressDelay, callbacks, showTouchFeedback])
+
+  const handleTouchEnd = useCallback((event: React.TouchEvent, target: TouchTarget) => {
+    if (longPressTimerRef.current) {
+      clearTimeout(longPressTimerRef.current)
+      longPressTimerRef.current = null
+    }
+
+    const touch = event.changedTouches[0]
+    const gesture = detectGesture({
+      type: 'tap',
+      target,
+      coordinates: { x: touch.clientX, y: touch.clientY },
+      timestamp: Date.now()
+    }, {
+      type: 'tap',
+      target,
+      coordinates: { x: touch.clientX, y: touch.clientY },
+      timestamp: Date.now()
+    })
+    if (gesture) {
+      showTouchFeedback(gesture.type, target)
+    }
+
+    touchStartRef.current = null
+  }, [detectGesture, showTouchFeedback])
+
+  // Performance optimization
+  const optimizePerformance = useCallback(() => {
+    if (!enablePerformanceOptimization) return
+
+    setIsOptimizing(true)
+
+    setTimeout(() => {
+      // Simulate performance optimizations
+      const optimizations = [
+        'Touch event throttling enabled',
+        'Gesture detection optimized',
+        'Touch feedback animations optimized',
+        'Memory usage optimized for touch interactions'
+      ]
+
+      setOptimizations(prev => [...prev, ...optimizations])
+      setIsOptimizing(false)
+
+      optimizations.forEach(optimization => {
+        callbacks.onPerformanceOptimization?.(optimization)
+      })
+    }, 300)
+  }, [enablePerformanceOptimization, callbacks])
+
+  // Initialize performance optimization
+  useEffect(() => {
+    if (enablePerformanceOptimization) {
+      optimizePerformance()
+    }
+  }, [enablePerformanceOptimization, optimizePerformance])
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (longPressTimerRef.current) {
+        clearTimeout(longPressTimerRef.current)
+      }
+    }
+  }, [])
+
+  return {
+    // State
+    touchTargets,
+    activeGestures,
+    isOptimizing,
+    optimizations,
+
+    // Actions
+    addTouchTarget,
+    removeTouchTarget,
+    optimizeTouchTargets,
+    showTouchFeedback,
+    detectGesture,
+    handleTouchStart,
+    handleTouchEnd,
+    optimizePerformance,
+
+    // Computed values
+    touchTargetCount: touchTargets.length,
+    optimizedTargetCount: touchTargets.filter(t => t.isOptimized).length,
+    gestureCount: activeGestures.length,
+    isTouchOptimized: touchTargets.every(t => t.isOptimized)
+  }
+}
+
+export default useMobileLayout

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

@@ -0,0 +1,280 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+
+export interface TouchTarget {
+  id}
+
+export interface TouchEvent {
+  type; y}
+  timestamp}
+
+export interface MobileLayoutConfig {
+  enableTouchTargetOptimization?}
+
+export interface MobileLayoutCallbacks {
+  onTouchTargetOptimized?) => void
+  onGestureDetected?) => void
+  onTouchFeedback?, target) => void
+  onPerformanceOptimization?) => void
+}
+
+export const useMobileLayout = (
+  config= {},
+  callbacks= {}
+) => {
+  const {
+    enableTouchTargetOptimization = true,
+    enableGestureSupport = true,
+    enableTouchFeedback = true,
+    enablePerformanceOptimization = true,
+    minTouchTargetSize = 44, // iOS/Android recommended minimum
+    touchFeedbackDuration = 150,
+    gestureThreshold = 50,
+    longPressDelay = 500
+  } = config
+
+  const [touchTargets, setTouchTargets] = useState<TouchTarget[]>([])
+  const [activeGestures, setActiveGestures] = useState<TouchEvent[]>([])
+  const [isOptimizing, setIsOptimizing] = useState(false)
+  const [optimizations, setOptimizations] = useState<string[]>([])
+
+  const touchStartRef = useRef<{ x; y; timestamp} | null>(null)
+  const longPressTimerRef = useRef<number | null>(null)
+  const touchFeedbackRef = useRef<HTMLDivElement | null>(null)
+
+  // Touch target optimization
+  const optimizeTouchTargets = useCallback(() => {
+    if (!enableTouchTargetOptimization) return
+
+    setIsOptimizing(true)
+    
+    // Simulate touch target optimization
+    setTimeout(() => {
+      const optimizedTargets = touchTargets.map(target => ({
+        ...target,
+        isOptimized= minTouchTargetSize && target.height >= minTouchTargetSize
+      }))
+
+      setTouchTargets(optimizedTargets)
+      setIsOptimizing(false)
+      
+      const optimizationCount = optimizedTargets.filter(t => t.isOptimized).length
+      setOptimizations(prev => [...prev, `${optimizationCount} touch targets optimized`])
+      
+      optimizedTargets.forEach(target => {
+        if (target.isOptimized) {
+          callbacks.onTouchTargetOptimized?.(target)
+        }
+      })
+    }, 200)
+  }, [enableTouchTargetOptimization, touchTargets, minTouchTargetSize, callbacks])
+
+  // Add touch target
+  const addTouchTarget = useCallback((target, 'isOptimized'>) => {
+    const newTarget= {
+      ...target,
+      isOptimized= minTouchTargetSize && target.height >= minTouchTargetSize
+    }
+    
+    setTouchTargets(prev => [...prev, newTarget])
+    
+    if (newTarget.isOptimized) {
+      callbacks.onTouchTargetOptimized?.(newTarget)
+    }
+  }, [minTouchTargetSize, callbacks])
+
+  // Remove touch target
+  const removeTouchTarget = useCallback((id) => {
+    setTouchTargets(prev => prev.filter(target => target.id !== id))
+  }, [])
+
+  // Touch feedback
+  const showTouchFeedback = useCallback((type, target) => {
+    if (!enableTouchFeedback) return
+
+    callbacks.onTouchFeedback?.(type, target)
+
+    // Create visual feedback element
+    if (touchFeedbackRef.current) {
+      const feedback = document.createElement('div')
+      feedback.className = `absolute rounded-full bg-cs-primary/20 pointer-events-none transition-all duration-${touchFeedbackDuration}ms`
+      feedback.style.cssText = `
+        left}px;
+        top}px;
+        width}px;
+        height}px;
+        transform);
+        opacity;
+      `
+
+      touchFeedbackRef.current.appendChild(feedback)
+
+      // Animate feedback
+      setTimeout(() => {
+        feedback.style.transform = 'scale(1)'
+        feedback.style.opacity = '0'
+      }, 50)
+
+      // Remove feedback element
+      setTimeout(() => {
+        if (feedback.parentNode) {
+          feedback.parentNode.removeChild(feedback)
+        }
+      }, touchFeedbackDuration)
+    }
+  }, [enableTouchFeedback, touchFeedbackDuration, callbacks])
+
+  // Gesture detection
+  const detectGesture = useCallback((startEvent, endEvent)=> {
+    if (!enableGestureSupport) return null
+
+    const start = touchStartRef.current
+    if (!start) return null
+
+    const deltaX = endEvent.coordinates.x - start.x
+    const deltaY = endEvent.coordinates.y - start.y
+    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
+    const duration = endEvent.timestamp - start.timestamp
+
+    let gestureType] = 'tap'
+
+    if (distance > gestureThreshold) {
+      if (Math.abs(deltaX) > Math.abs(deltaY)) {
+        gestureType = deltaX > 0 ? 'swipe' } else {
+        gestureType = deltaY > 0 ? 'swipe' }
+    } else if (duration > longPressDelay) {
+      gestureType = 'long-press'
+    }
+
+    const gesture= {
+      type,
+      target,
+      coordinates,
+      timestamp,
+      duration,
+      distance
+    }
+
+    setActiveGestures(prev => [...prev, gesture])
+    callbacks.onGestureDetected?.(gesture)
+
+    return gesture
+  }, [enableGestureSupport, gestureThreshold, longPressDelay, callbacks])
+
+  // Touch event handlers
+  const handleTouchStart = useCallback((event, target) => {
+    const touch = event.touches[0]
+
+    touchStartRef.current = {
+      x,
+      y,
+      timestamp)
+    }
+
+    // Start long press timer
+    longPressTimerRef.current = window.setTimeout(() => {
+      const longPressEvent= {
+        type,
+        target,
+        coordinates, y},
+        timestamp)
+      }
+      
+      setActiveGestures(prev => [...prev, longPressEvent])
+      callbacks.onGestureDetected?.(longPressEvent)
+      showTouchFeedback('long-press', target)
+    }, longPressDelay)
+
+    showTouchFeedback('touch-start', target)
+  }, [longPressDelay, callbacks, showTouchFeedback])
+
+  const handleTouchEnd = useCallback((event, target) => {
+    if (longPressTimerRef.current) {
+      clearTimeout(longPressTimerRef.current)
+      longPressTimerRef.current = null
+    }
+
+    const touch = event.changedTouches[0]
+    const gesture = detectGesture({
+      type,
+      target,
+      coordinates, y},
+      timestamp)
+    }, {
+      type,
+      target,
+      coordinates, y},
+      timestamp)
+    })
+    if (gesture) {
+      showTouchFeedback(gesture.type, target)
+    }
+
+    touchStartRef.current = null
+  }, [detectGesture, showTouchFeedback])
+
+  // Performance optimization
+  const optimizePerformance = useCallback(() => {
+    if (!enablePerformanceOptimization) return
+
+    setIsOptimizing(true)
+    
+    setTimeout(() => {
+      // Simulate performance optimizations
+      const optimizations = [
+        'Touch event throttling enabled',
+        'Gesture detection optimized',
+        'Touch feedback animations optimized',
+        'Memory usage optimized for touch interactions'
+      ]
+      
+      setOptimizations(prev => [...prev, ...optimizations])
+      setIsOptimizing(false)
+      
+      optimizations.forEach(optimization => {
+        callbacks.onPerformanceOptimization?.(optimization)
+      })
+    }, 300)
+  }, [enablePerformanceOptimization, callbacks])
+
+  // Initialize performance optimization
+  useEffect(() => {
+    if (enablePerformanceOptimization) {
+      optimizePerformance()
+    }
+  }, [enablePerformanceOptimization, optimizePerformance])
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (longPressTimerRef.current) {
+        clearTimeout(longPressTimerRef.current)
+      }
+    }
+  }, [])
+
+  return {
+    // State
+    touchTargets,
+    activeGestures,
+    isOptimizing,
+    optimizations,
+    
+    // Actions
+    addTouchTarget,
+    removeTouchTarget,
+    optimizeTouchTargets,
+    showTouchFeedback,
+    detectGesture,
+    handleTouchStart,
+    handleTouchEnd,
+    optimizePerformance,
+    
+    // Computed values
+    touchTargetCount,
+    optimizedTargetCount=> t.isOptimized).length,
+    gestureCount,
+    isTouchOptimized=> t.isOptimized)
+  }
+}
+
+export default useMobileLayout