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

package/src/hooks/use-mobile-touch.ts

@@ -0,0 +1,414 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+
+export interface MobileTouchConfig {
+  enableTouchFeedback: boolean
+  enableGestureHints: boolean
+  enableTouchSounds: boolean
+  enableHapticFeedback: boolean
+  touchFeedbackDelay: number
+  gestureHintTimeout: number
+  maxTouchPoints: number
+}
+
+export interface TouchFeedbackState {
+  isPressed: boolean
+  feedbackType: 'none' | 'scale' | 'ripple' | 'glow'
+  feedbackIntensity: 'light' | 'medium' | 'strong'
+  lastTouchPosition: { x: number; y: number } | null
+}
+
+export interface GestureHint {
+  type: 'swipe' | 'pinch' | 'longPress' | 'doubleTap' | 'tap'
+  message: string
+  position: { x: number; y: number }
+  timeout: number
+}
+
+export interface MobileTouchCallbacks {
+  onTouchFeedback?: (state: TouchFeedbackState) => void
+  onGestureHint?: (hint: GestureHint) => void
+  onTouchStart?: (position: { x: number; y: number }) => void
+  onTouchEnd?: (position: { x: number; y: number }) => void
+  onTouchMove?: (position: { x: number; y: number }) => void
+}
+
+export interface MobileTouchState {
+  isActive: boolean
+  touchCount: number
+  currentFeedback: TouchFeedbackState
+  activeGestureHints: GestureHint[]
+  deviceCapabilities: {
+    supportsTouch: boolean
+    supportsHaptics: boolean
+    supportsAudio: boolean
+    maxTouchPoints: number
+  }
+}
+
+export const useMobileTouch = (
+  elementRef: React.RefObject<HTMLElement>,
+  callbacks: MobileTouchCallbacks = {},
+  config: Partial<MobileTouchConfig> = {}
+) => {
+  const defaultConfig: MobileTouchConfig = {
+    enableTouchFeedback: true,
+    enableGestureHints: true,
+    enableTouchSounds: false,
+    enableHapticFeedback: true,
+    touchFeedbackDelay: 100,
+    gestureHintTimeout: 3000,
+    maxTouchPoints: 5,
+    ...config
+  }
+
+  // Device info available if needed for future enhancements
+  // const device = useDevice()
+  const [mobileTouchState, setMobileTouchState] = useState<MobileTouchState>({
+    isActive: false,
+    touchCount: 0,
+    currentFeedback: {
+      isPressed: false,
+      feedbackType: 'none',
+      feedbackIntensity: 'medium',
+      lastTouchPosition: null
+    },
+    activeGestureHints: [],
+    deviceCapabilities: {
+      supportsTouch: false,
+      supportsHaptics: false,
+      supportsAudio: false,
+      maxTouchPoints: 0
+    }
+  })
+
+  const touchStartTimeRef = useRef<number>(0)
+  const touchFeedbackTimerRef = useRef<NodeJS.Timeout | null>(null)
+  const gestureHintTimersRef = useRef<Map<string, NodeJS.Timeout>>(new Map())
+  const audioContextRef = useRef<AudioContext | null>(null)
+
+  // Initialize device capabilities
+  useEffect(() => {
+    const capabilities = {
+      supportsTouch: 'ontouchstart' in window,
+      supportsHaptics: 'vibrate' in navigator,
+      supportsAudio: 'AudioContext' in window || 'webkitAudioContext' in window,
+      maxTouchPoints: navigator.maxTouchPoints || 0
+    }
+
+    setMobileTouchState(prev => ({
+      ...prev,
+      deviceCapabilities: capabilities
+    }))
+
+    // Initialize audio context if supported
+    if (capabilities.supportsAudio) {
+      audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)()
+    }
+  }, [])
+
+  // Trigger haptic feedback
+  const triggerHapticFeedback = useCallback((intensity: 'light' | 'medium' | 'strong' = 'medium') => {
+    if (!defaultConfig.enableHapticFeedback || !mobileTouchState.deviceCapabilities.supportsHaptics) return
+
+    const vibrationPattern = {
+      light: 20,
+      medium: 50,
+      strong: 100
+    }
+
+    try {
+      navigator.vibrate(vibrationPattern[intensity])
+    } catch (error) {
+      console.warn('Haptic feedback not supported:', error)
+    }
+  }, [defaultConfig.enableHapticFeedback, mobileTouchState.deviceCapabilities.supportsHaptics])
+
+  // Trigger touch sound
+  const triggerTouchSound = useCallback((type: 'tap' | 'press' | 'release' = 'tap') => {
+    if (!defaultConfig.enableTouchSounds || !audioContextRef.current) return
+
+    try {
+      const audioContext = audioContextRef.current
+      const oscillator = audioContext.createOscillator()
+      const gainNode = audioContext.createGain()
+      
+      oscillator.connect(gainNode)
+      gainNode.connect(audioContext.destination)
+      
+      // Different sounds for different touch types
+      const soundConfig = {
+        tap: { frequency: 800, duration: 0.1, volume: 0.1 },
+        press: { frequency: 600, duration: 0.2, volume: 0.15 },
+        release: { frequency: 1000, duration: 0.08, volume: 0.08 }
+      }
+      
+      const config = soundConfig[type]
+      oscillator.frequency.setValueAtTime(config.frequency, audioContext.currentTime)
+      gainNode.gain.setValueAtTime(config.volume, audioContext.currentTime)
+      
+      oscillator.start(audioContext.currentTime)
+      oscillator.stop(audioContext.currentTime + config.duration)
+    } catch (error) {
+      console.warn('Touch sound not supported:', error)
+    }
+  }, [defaultConfig.enableTouchSounds])
+
+  // Update touch feedback state
+  const updateTouchFeedback = useCallback((feedback: Partial<TouchFeedbackState>) => {
+    setMobileTouchState(prev => ({
+      ...prev,
+      currentFeedback: { ...prev.currentFeedback, ...feedback }
+    }))
+
+    callbacks.onTouchFeedback?.(mobileTouchState.currentFeedback)
+  }, [callbacks, mobileTouchState.currentFeedback])
+
+  // Add gesture hint
+  const addGestureHint = useCallback((hint: Omit<GestureHint, 'timeout'>) => {
+    if (!defaultConfig.enableGestureHints) return
+
+    const hintWithTimeout = {
+      ...hint,
+      timeout: Date.now() + defaultConfig.gestureHintTimeout
+    }
+
+    setMobileTouchState(prev => ({
+      ...prev,
+      activeGestureHints: [...prev.activeGestureHints, hintWithTimeout]
+    }))
+
+    // Set timer to remove hint
+    const timer = setTimeout(() => {
+      removeGestureHint(hint.type)
+    }, defaultConfig.gestureHintTimeout)
+
+    gestureHintTimersRef.current.set(hint.type, timer)
+    callbacks.onGestureHint?.(hintWithTimeout)
+  }, [defaultConfig.enableGestureHints, defaultConfig.gestureHintTimeout, callbacks])
+
+  // Remove gesture hint
+  const removeGestureHint = useCallback((type: string) => {
+    setMobileTouchState(prev => ({
+      ...prev,
+      activeGestureHints: prev.activeGestureHints.filter(hint => hint.type !== type)
+    }))
+
+    const timer = gestureHintTimersRef.current.get(type)
+    if (timer) {
+      clearTimeout(timer)
+      gestureHintTimersRef.current.delete(type)
+    }
+  }, [])
+
+  // Handle touch start
+  const handleTouchStart = useCallback((event: TouchEvent) => {
+    const touch = event.touches[0]
+    const position = { x: touch.clientX, y: touch.clientY }
+    
+    touchStartTimeRef.current = Date.now()
+    
+    setMobileTouchState(prev => ({
+      ...prev,
+      isActive: true,
+      touchCount: event.touches.length
+    }))
+
+    // Update feedback state
+    if (defaultConfig.enableTouchFeedback) {
+      updateTouchFeedback({
+        isPressed: true,
+        feedbackType: 'scale',
+        feedbackIntensity: 'medium',
+        lastTouchPosition: position
+      })
+
+      // Set feedback timer
+      touchFeedbackTimerRef.current = setTimeout(() => {
+        updateTouchFeedback({
+          feedbackType: 'ripple',
+          feedbackIntensity: 'strong'
+        })
+      }, defaultConfig.touchFeedbackDelay)
+    }
+
+    // Trigger feedback
+    triggerHapticFeedback('light')
+    triggerTouchSound('press')
+    
+    callbacks.onTouchStart?.(position)
+  }, [defaultConfig.enableTouchFeedback, defaultConfig.touchFeedbackDelay, updateTouchFeedback, triggerHapticFeedback, triggerTouchSound, callbacks])
+
+  // Handle touch move
+  const handleTouchMove = useCallback((event: TouchEvent) => {
+    const touch = event.touches[0]
+    const position = { x: touch.clientX, y: touch.clientY }
+    
+    // Update feedback state
+    if (defaultConfig.enableTouchFeedback) {
+      updateTouchFeedback({
+        lastTouchPosition: position
+      })
+    }
+    
+    callbacks.onTouchMove?.(position)
+  }, [defaultConfig.enableTouchFeedback, updateTouchFeedback, callbacks])
+
+  // Handle touch end
+  const handleTouchEnd = useCallback((event: TouchEvent) => {
+    const touch = event.changedTouches[0]
+    const position = { x: touch.clientX, y: touch.clientY }
+    const touchDuration = Date.now() - touchStartTimeRef.current
+    
+    // Clear feedback timer
+    if (touchFeedbackTimerRef.current) {
+      clearTimeout(touchFeedbackTimerRef.current)
+      touchFeedbackTimerRef.current = null
+    }
+
+    // Update feedback state
+    if (defaultConfig.enableTouchFeedback) {
+      updateTouchFeedback({
+        isPressed: false,
+        feedbackType: 'none',
+        feedbackIntensity: 'medium'
+      })
+    }
+
+    // Determine touch type and provide appropriate feedback
+    if (touchDuration < 200) {
+      // Quick tap
+      triggerHapticFeedback('light')
+      triggerTouchSound('tap')
+      
+      // Show tap hint
+      addGestureHint({
+        type: 'tap',
+        message: 'Quick tap detected',
+        position
+      })
+    } else if (touchDuration > 500) {
+      // Long press
+      triggerHapticFeedback('strong')
+      triggerTouchSound('release')
+      
+      // Show long press hint
+      addGestureHint({
+        type: 'longPress',
+        message: 'Long press detected',
+        position
+      })
+    } else {
+      // Regular press
+      triggerHapticFeedback('medium')
+      triggerTouchSound('release')
+    }
+
+    setMobileTouchState(prev => ({
+      ...prev,
+      isActive: false,
+      touchCount: Math.max(0, prev.touchCount - 1)
+    }))
+    
+    callbacks.onTouchEnd?.(position)
+  }, [defaultConfig.enableTouchFeedback, updateTouchFeedback, triggerHapticFeedback, triggerTouchSound, addGestureHint, callbacks])
+
+  // Set up touch event listeners
+  useEffect(() => {
+    const element = elementRef.current
+    if (!element || !mobileTouchState.deviceCapabilities.supportsTouch) return
+
+    element.addEventListener('touchstart', handleTouchStart, { passive: false })
+    element.addEventListener('touchmove', handleTouchMove, { passive: false })
+    element.addEventListener('touchend', handleTouchEnd, { passive: false })
+
+    return () => {
+      element.removeEventListener('touchstart', handleTouchStart)
+      element.removeEventListener('touchmove', handleTouchMove)
+      element.removeEventListener('touchend', handleTouchEnd)
+      
+      // Clean up timers
+      if (touchFeedbackTimerRef.current) {
+        clearTimeout(touchFeedbackTimerRef.current)
+      }
+      
+      gestureHintTimersRef.current.forEach(timer => clearTimeout(timer))
+      gestureHintTimersRef.current.clear()
+    }
+  }, [
+    elementRef, 
+    mobileTouchState.deviceCapabilities.supportsTouch, 
+    handleTouchStart, 
+    handleTouchMove, 
+    handleTouchEnd
+  ])
+
+  // Clean up on unmount
+  useEffect(() => {
+    return () => {
+      if (touchFeedbackTimerRef.current) {
+        clearTimeout(touchFeedbackTimerRef.current)
+      }
+      
+      gestureHintTimersRef.current.forEach(timer => clearTimeout(timer))
+      gestureHintTimersRef.current.clear()
+    }
+  }, [])
+
+  // Utility functions
+  const clearAllGestureHints = useCallback(() => {
+    gestureHintTimersRef.current.forEach(timer => clearTimeout(timer))
+    gestureHintTimersRef.current.clear()
+    
+    setMobileTouchState(prev => ({
+      ...prev,
+      activeGestureHints: []
+    }))
+  }, [])
+
+  const getTouchFeedbackClasses = useCallback(() => {
+    const { currentFeedback } = mobileTouchState
+    
+    if (!currentFeedback.isPressed) return ''
+    
+    const classes = ['touch-feedback']
+    
+    if (currentFeedback.feedbackType === 'scale') {
+      classes.push('touch-pressed')
+    } else if (currentFeedback.feedbackType === 'ripple') {
+      classes.push('touch-ripple', 'touch-active')
+    }
+    
+    return classes.join(' ')
+  }, [mobileTouchState.currentFeedback])
+
+  return {
+    mobileTouchState,
+    updateTouchFeedback,
+    addGestureHint,
+    removeGestureHint,
+    clearAllGestureHints,
+    getTouchFeedbackClasses,
+    triggerHapticFeedback,
+    triggerTouchSound
+  }
+}
+
+// Convenience hook for basic mobile touch
+export const useBasicMobileTouch = (elementRef: React.RefObject<HTMLElement>) => {
+  return useMobileTouch(elementRef, {}, {
+    enableTouchFeedback: true,
+    enableGestureHints: false,
+    enableTouchSounds: false,
+    enableHapticFeedback: true
+  })
+}
+
+// Convenience hook for enhanced mobile touch
+export const useEnhancedMobileTouch = (elementRef: React.RefObject<HTMLElement>) => {
+  return useMobileTouch(elementRef, {}, {
+    enableTouchFeedback: true,
+    enableGestureHints: true,
+    enableTouchSounds: true,
+    enableHapticFeedback: true
+  })
+}