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

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

@@ -1,59 +1,84 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
 
 export interface MobileTouchConfig {
-  enableTouchFeedback}
+  enableTouchFeedback: boolean
+  enableGestureHints: boolean
+  enableTouchSounds: boolean
+  enableHapticFeedback: boolean
+  touchFeedbackDelay: number
+  gestureHintTimeout: number
+  maxTouchPoints: number
+}
 
 export interface TouchFeedbackState {
-  isPressed; y} | null
+  isPressed: boolean
+  feedbackType: 'none' | 'scale' | 'ripple' | 'glow'
+  feedbackIntensity: 'light' | 'medium' | 'strong'
+  lastTouchPosition: { x: number; y: number } | null
 }
 
 export interface GestureHint {
-  type; y}
-  timeout}
+  type: 'swipe' | 'pinch' | 'longPress' | 'doubleTap' | 'tap'
+  message: string
+  position: { x: number; y: number }
+  timeout: number
+}
 
 export interface MobileTouchCallbacks {
-  onTouchFeedback?) => void
-  onGestureHint?) => void
-  onTouchStart?; y}) => void
-  onTouchEnd?; y}) => void
-  onTouchMove?; y}) => void
+  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]
-  deviceCapabilities}
+  isActive: boolean
+  touchCount: number
+  currentFeedback: TouchFeedbackState
+  activeGestureHints: GestureHint[]
+  deviceCapabilities: {
+    supportsTouch: boolean
+    supportsHaptics: boolean
+    supportsAudio: boolean
+    maxTouchPoints: number
+  }
 }
 
 export const useMobileTouch = (
-  elementRef,
-  callbacks= {},
-  config= {}
+  elementRef: React.RefObject<HTMLElement>,
+  callbacks: MobileTouchCallbacks = {},
+  config: Partial<MobileTouchConfig> = {}
 ) => {
-  const defaultConfig= {
-    enableTouchFeedback,
-    enableGestureHints,
-    enableTouchSounds,
-    enableHapticFeedback,
-    touchFeedbackDelay,
-    gestureHintTimeout,
-    maxTouchPoints,
+  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,
-    touchCount,
-    currentFeedback,
-      feedbackType,
-      feedbackIntensity,
-      lastTouchPosition},
-    activeGestureHints],
-    deviceCapabilities,
-      supportsHaptics,
-      supportsAudio,
-      maxTouchPoints}
+    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)
@@ -64,14 +89,16 @@ export const useMobileTouch = (
   // Initialize device capabilities
   useEffect(() => {
     const capabilities = {
-      supportsTouch,
-      supportsHaptics,
-      supportsAudio,
-      maxTouchPoints}
+      supportsTouch: 'ontouchstart' in window,
+      supportsHaptics: 'vibrate' in navigator,
+      supportsAudio: 'AudioContext' in window || 'webkitAudioContext' in window,
+      maxTouchPoints: navigator.maxTouchPoints || 0
+    }
 
     setMobileTouchState(prev => ({
       ...prev,
-      deviceCapabilities}))
+      deviceCapabilities: capabilities
+    }))
 
     // Initialize audio context if supported
     if (capabilities.supportsAudio) {
@@ -80,23 +107,24 @@ export const useMobileTouch = (
   }, [])
 
   // Trigger haptic feedback
-  const triggerHapticFeedback = useCallback((intensity= 'medium') => {
+  const triggerHapticFeedback = useCallback((intensity: 'light' | 'medium' | 'strong' = 'medium') => {
     if (!defaultConfig.enableHapticFeedback || !mobileTouchState.deviceCapabilities.supportsHaptics) return
 
     const vibrationPattern = {
-      light,
-      medium,
-      strong}
+      light: 20,
+      medium: 50,
+      strong: 100
+    }
 
     try {
       navigator.vibrate(vibrationPattern[intensity])
     } catch (error) {
-      console.warn('Haptic feedback not supported, error)
+      console.warn('Haptic feedback not supported:', error)
     }
   }, [defaultConfig.enableHapticFeedback, mobileTouchState.deviceCapabilities.supportsHaptics])
 
   // Trigger touch sound
-  const triggerTouchSound = useCallback((type= 'tap') => {
+  const triggerTouchSound = useCallback((type: 'tap' | 'press' | 'release' = 'tap') => {
     if (!defaultConfig.enableTouchSounds || !audioContextRef.current) return
 
     try {
@@ -109,9 +137,9 @@ export const useMobileTouch = (
       
       // Different sounds for different touch types
       const soundConfig = {
-        tap, duration, volume},
-        press, duration, volume},
-        release, duration, volume}
+        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]
@@ -121,32 +149,32 @@ export const useMobileTouch = (
       oscillator.start(audioContext.currentTime)
       oscillator.stop(audioContext.currentTime + config.duration)
     } catch (error) {
-      console.warn('Touch sound not supported, error)
+      console.warn('Touch sound not supported:', error)
     }
   }, [defaultConfig.enableTouchSounds])
 
   // Update touch feedback state
-  const updateTouchFeedback = useCallback((feedback) => {
+  const updateTouchFeedback = useCallback((feedback: Partial<TouchFeedbackState>) => {
     setMobileTouchState(prev => ({
       ...prev,
-      currentFeedback, ...feedback }
+      currentFeedback: { ...prev.currentFeedback, ...feedback }
     }))
 
     callbacks.onTouchFeedback?.(mobileTouchState.currentFeedback)
   }, [callbacks, mobileTouchState.currentFeedback])
 
   // Add gesture hint
-  const addGestureHint = useCallback((hint, 'timeout'>) => {
+  const addGestureHint = useCallback((hint: Omit<GestureHint, 'timeout'>) => {
     if (!defaultConfig.enableGestureHints) return
 
     const hintWithTimeout = {
       ...hint,
-      timeout) + defaultConfig.gestureHintTimeout
+      timeout: Date.now() + defaultConfig.gestureHintTimeout
     }
 
     setMobileTouchState(prev => ({
       ...prev,
-      activeGestureHints, hintWithTimeout]
+      activeGestureHints: [...prev.activeGestureHints, hintWithTimeout]
     }))
 
     // Set timer to remove hint
@@ -159,10 +187,10 @@ export const useMobileTouch = (
   }, [defaultConfig.enableGestureHints, defaultConfig.gestureHintTimeout, callbacks])
 
   // Remove gesture hint
-  const removeGestureHint = useCallback((type) => {
+  const removeGestureHint = useCallback((type: string) => {
     setMobileTouchState(prev => ({
       ...prev,
-      activeGestureHints=> hint.type !== type)
+      activeGestureHints: prev.activeGestureHints.filter(hint => hint.type !== type)
     }))
 
     const timer = gestureHintTimersRef.current.get(type)
@@ -173,30 +201,33 @@ export const useMobileTouch = (
   }, [])
 
   // Handle touch start
-  const handleTouchStart = useCallback((event) => {
+  const handleTouchStart = useCallback((event: TouchEvent) => {
     const touch = event.touches[0]
-    const position = { x, y}
+    const position = { x: touch.clientX, y: touch.clientY }
     
     touchStartTimeRef.current = Date.now()
     
     setMobileTouchState(prev => ({
       ...prev,
-      isActive,
-      touchCount}))
+      isActive: true,
+      touchCount: event.touches.length
+    }))
 
     // Update feedback state
     if (defaultConfig.enableTouchFeedback) {
       updateTouchFeedback({
-        isPressed,
-        feedbackType,
-        feedbackIntensity,
-        lastTouchPosition})
+        isPressed: true,
+        feedbackType: 'scale',
+        feedbackIntensity: 'medium',
+        lastTouchPosition: position
+      })
 
       // Set feedback timer
       touchFeedbackTimerRef.current = setTimeout(() => {
         updateTouchFeedback({
-          feedbackType,
-          feedbackIntensity})
+          feedbackType: 'ripple',
+          feedbackIntensity: 'strong'
+        })
       }, defaultConfig.touchFeedbackDelay)
     }
 
@@ -208,23 +239,24 @@ export const useMobileTouch = (
   }, [defaultConfig.enableTouchFeedback, defaultConfig.touchFeedbackDelay, updateTouchFeedback, triggerHapticFeedback, triggerTouchSound, callbacks])
 
   // Handle touch move
-  const handleTouchMove = useCallback((event) => {
+  const handleTouchMove = useCallback((event: TouchEvent) => {
     const touch = event.touches[0]
-    const position = { x, y}
+    const position = { x: touch.clientX, y: touch.clientY }
     
     // Update feedback state
     if (defaultConfig.enableTouchFeedback) {
       updateTouchFeedback({
-        lastTouchPosition})
+        lastTouchPosition: position
+      })
     }
     
     callbacks.onTouchMove?.(position)
   }, [defaultConfig.enableTouchFeedback, updateTouchFeedback, callbacks])
 
   // Handle touch end
-  const handleTouchEnd = useCallback((event) => {
+  const handleTouchEnd = useCallback((event: TouchEvent) => {
     const touch = event.changedTouches[0]
-    const position = { x, y}
+    const position = { x: touch.clientX, y: touch.clientY }
     const touchDuration = Date.now() - touchStartTimeRef.current
     
     // Clear feedback timer
@@ -236,9 +268,10 @@ export const useMobileTouch = (
     // Update feedback state
     if (defaultConfig.enableTouchFeedback) {
       updateTouchFeedback({
-        isPressed,
-        feedbackType,
-        feedbackIntensity})
+        isPressed: false,
+        feedbackType: 'none',
+        feedbackIntensity: 'medium'
+      })
     }
 
     // Determine touch type and provide appropriate feedback
@@ -249,8 +282,8 @@ export const useMobileTouch = (
       
       // Show tap hint
       addGestureHint({
-        type,
-        message,
+        type: 'tap',
+        message: 'Quick tap detected',
         position
       })
     } else if (touchDuration > 500) {
@@ -260,8 +293,8 @@ export const useMobileTouch = (
       
       // Show long press hint
       addGestureHint({
-        type,
-        message,
+        type: 'longPress',
+        message: 'Long press detected',
         position
       })
     } else {
@@ -272,8 +305,8 @@ export const useMobileTouch = (
 
     setMobileTouchState(prev => ({
       ...prev,
-      isActive,
-      touchCount, prev.touchCount - 1)
+      isActive: false,
+      touchCount: Math.max(0, prev.touchCount - 1)
     }))
     
     callbacks.onTouchEnd?.(position)
@@ -284,9 +317,9 @@ export const useMobileTouch = (
     const element = elementRef.current
     if (!element || !mobileTouchState.deviceCapabilities.supportsTouch) return
 
-    element.addEventListener('touchstart', handleTouchStart, { passive})
-    element.addEventListener('touchmove', handleTouchMove, { passive})
-    element.addEventListener('touchend', handleTouchEnd, { passive})
+    element.addEventListener('touchstart', handleTouchStart, { passive: false })
+    element.addEventListener('touchmove', handleTouchMove, { passive: false })
+    element.addEventListener('touchend', handleTouchEnd, { passive: false })
 
     return () => {
       element.removeEventListener('touchstart', handleTouchStart)
@@ -328,7 +361,7 @@ export const useMobileTouch = (
     
     setMobileTouchState(prev => ({
       ...prev,
-      activeGestureHints]
+      activeGestureHints: []
     }))
   }, [])
 
@@ -361,19 +394,21 @@ export const useMobileTouch = (
 }
 
 // Convenience hook for basic mobile touch
-export const useBasicMobileTouch = (elementRef) => {
+export const useBasicMobileTouch = (elementRef: React.RefObject<HTMLElement>) => {
   return useMobileTouch(elementRef, {}, {
-    enableTouchFeedback,
-    enableGestureHints,
-    enableTouchSounds,
-    enableHapticFeedback})
+    enableTouchFeedback: true,
+    enableGestureHints: false,
+    enableTouchSounds: false,
+    enableHapticFeedback: true
+  })
 }
 
 // Convenience hook for enhanced mobile touch
-export const useEnhancedMobileTouch = (elementRef) => {
+export const useEnhancedMobileTouch = (elementRef: React.RefObject<HTMLElement>) => {
   return useMobileTouch(elementRef, {}, {
-    enableTouchFeedback,
-    enableGestureHints,
-    enableTouchSounds,
-    enableHapticFeedback})
+    enableTouchFeedback: true,
+    enableGestureHints: true,
+    enableTouchSounds: true,
+    enableHapticFeedback: true
+  })
 }