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

package/dist/hooks/use-gestures.d.ts

@@ -0,0 +1,336 @@
+export interface GestureConfig {
+  minSwipeDistance: number
+  maxSwipeTime: number
+  minPinchDistance: number
+  enableHapticFeedback: boolean
+  enableSoundFeedback: boolean
+}
+
+export interface SwipeGesture {
+  direction: 'up' | 'down' | 'left' | 'right'
+  distance: number
+  velocity: number
+  duration: number
+}
+
+export interface PinchGesture {
+  scale: number
+  center: { x: number; y: number }
+  distance: number
+}
+
+export interface GestureCallbacks {
+  onSwipe?: (gesture: SwipeGesture) => void
+  onPinch?: (gesture: PinchGesture) => void
+  onTap?: (position: { x: number; y: number }) => void
+  onLongPress?: (position: { x: number; y: number }) => void
+  onTouchStart?: (position: { x: number; y: number }) => void
+  onTouchEnd?: (position: { x: number; y: number }) => void
+}
+
+export interface GestureState {
+  isTracking: boolean
+  currentGesture: 'none' | 'swipe' | 'pinch' | 'tap' | 'longPress'
+  lastGesture: SwipeGesture | PinchGesture | null
+  touchCount: number
+}
+
+export declare const useGestures: (
+  elementRef: React.RefObject<HTMLElement>,
+  callbacks: GestureCallbacks = {},
+  config: Partial<GestureConfig> = {}
+) => {
+  const defaultConfig: GestureConfig = {
+    minSwipeDistance: 50,
+    maxSwipeTime: 300,
+    minPinchDistance: 20,
+    enableHapticFeedback: true,
+    enableSoundFeedback: false,
+    ...config
+  }
+
+  const [gestureState, setGestureState] = useState<GestureState>({
+    isTracking: false,
+    currentGesture: 'none',
+    lastGesture: null,
+    touchCount: 0
+  })
+
+  const touchStartRef = useRef<{ x: number; y: number; time: number } | null>(null)
+  const touchStartDistanceRef = useRef<number>(0)
+  const touchStartCenterRef = useRef<{ x: number; y: number } | null>(null)
+  const longPressTimerRef = useRef<NodeJS.Timeout | null>(null)
+  const lastTapTimeRef = useRef<number>(0)
+
+  // Haptic feedback function
+  const triggerHapticFeedback = useCallback(() => {
+    if (defaultConfig.enableHapticFeedback && 'vibrate' in navigator) {
+      try {
+        navigator.vibrate(50)
+      } catch (error) {
+        // Fallback for older browsers
+        console.warn('Haptic feedback not supported')
+      }
+    }
+  }, [defaultConfig.enableHapticFeedback])
+
+  // Sound feedback function
+  const triggerSoundFeedback = useCallback(() => {
+    if (defaultConfig.enableSoundFeedback) {
+      // Create a simple beep sound
+      const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)()
+      const oscillator = audioContext.createOscillator()
+      const gainNode = audioContext.createGain()
+
+      oscillator.connect(gainNode)
+      gainNode.connect(audioContext.destination)
+
+      oscillator.frequency.setValueAtTime(800, audioContext.currentTime)
+      gainNode.gain.setValueAtTime(0.1, audioContext.currentTime)
+
+      oscillator.start(audioContext.currentTime)
+      oscillator.stop(audioContext.currentTime + 0.1)
+    }
+  }, [defaultConfig.enableSoundFeedback])
+
+  // Calculate distance between two points
+  const calculateDistance = useCallback((p1: { x: number; y: number }, p2: { x: number; y: number }) => {
+    const dx = p2.x - p1.x
+    const dy = p2.y - p1.y
+    return Math.sqrt(dx * dx + dy * dy)
+  }, [])
+
+  // Calculate center point between two touches
+  const calculateCenter = useCallback((touches: TouchList) => {
+    let x = 0
+    let y = 0
+    for (let i = 0; i < touches.length; i++) {
+      x += touches[i].clientX
+      y += touches[i].clientY
+    }
+    return { x: x / touches.length, y: y / touches.length }
+  }, [])
+
+  // Handle touch start
+  const handleTouchStart = useCallback((event: TouchEvent) => {
+    event.preventDefault()
+
+    const touches = event.touches
+    const touchCount = touches.length
+
+    if (touchCount === 1) {
+      const touch = touches[0]
+      touchStartRef.current = {
+        x: touch.clientX,
+        y: touch.clientY,
+        time: Date.now()
+      }
+
+      // Start long press timer
+      longPressTimerRef.current = setTimeout(() => {
+        if (touchStartRef.current) {
+          const position = { x: touch.clientX, y: touch.clientY }
+          setGestureState(prev => ({ ...prev, currentGesture: 'longPress' }))
+          callbacks.onLongPress?.(position)
+          triggerHapticFeedback()
+        }
+      }, 500)
+
+      callbacks.onTouchStart?.({ x: touch.clientX, y: touch.clientY })
+    } else if (touchCount === 2) {
+      // Pinch gesture start
+      const center = calculateCenter(touches)
+      const distance = calculateDistance(
+        { x: touches[0].clientX, y: touches[0].clientY },
+        { x: touches[1].clientX, y: touches[1].clientY }
+      )
+
+      touchStartCenterRef.current = center
+      touchStartDistanceRef.current = distance
+    }
+
+    setGestureState(prev => ({ ...prev, isTracking: true, touchCount }))
+  }, [callbacks, calculateCenter, calculateDistance, triggerHapticFeedback])
+
+  // Handle touch move
+  const handleTouchMove = useCallback((event: TouchEvent) => {
+    event.preventDefault()
+
+    const touches = event.touches
+    const touchCount = touches.length
+
+    if (touchCount === 1 && touchStartRef.current) {
+      // Cancel long press timer on movement
+      if (longPressTimerRef.current) {
+        clearTimeout(longPressTimerRef.current)
+        longPressTimerRef.current = null
+      }
+    } else if (touchCount === 2 && touchStartCenterRef.current && touchStartDistanceRef.current) {
+      // Handle pinch gesture
+      const center = calculateCenter(touches)
+      const distance = calculateDistance(
+        { x: touches[0].clientX, y: touches[0].clientY },
+        { x: touches[1].clientX, y: touches[1].clientY }
+      )
+
+      const scale = distance / touchStartDistanceRef.current
+
+      if (Math.abs(scale - 1) * 100 > defaultConfig.minPinchDistance) {
+        const pinchGesture: PinchGesture = {
+          scale,
+          center,
+          distance
+        }
+
+        setGestureState(prev => ({ ...prev, currentGesture: 'pinch', lastGesture: pinchGesture }))
+        callbacks.onPinch?.(pinchGesture)
+      }
+    }
+  }, [callbacks, calculateCenter, calculateDistance, defaultConfig.minPinchDistance])
+
+  // Handle touch end
+  const handleTouchEnd = useCallback((event: TouchEvent) => {
+    event.preventDefault()
+
+    const touches = event.changedTouches
+    const touchCount = touches.length
+
+    if (touchCount === 1 && touchStartRef.current) {
+      const touch = touches[0]
+      const endTime = Date.now()
+      const duration = endTime - touchStartRef.current.time
+
+      // Calculate swipe gesture
+      const dx = touch.clientX - touchStartRef.current.x
+      const dy = touch.clientY - touchStartRef.current.y
+      const distance = Math.sqrt(dx * dx + dy * dy)
+
+      if (distance >= defaultConfig.minSwipeDistance && duration <= defaultConfig.maxSwipeTime) {
+        // Determine swipe direction
+        let direction: 'up' | 'down' | 'left' | 'right'
+        if (Math.abs(dx) > Math.abs(dy)) {
+          direction = dx > 0 ? 'right' : 'left'
+        } else {
+          direction = dy > 0 ? 'down' : 'up'
+        }
+
+        const velocity = distance / duration
+        const swipeGesture: SwipeGesture = {
+          direction,
+          distance,
+          velocity,
+          duration
+        }
+
+        setGestureState(prev => ({ ...prev, currentGesture: 'swipe', lastGesture: swipeGesture }))
+        callbacks.onSwipe?.(swipeGesture)
+        triggerHapticFeedback()
+        triggerSoundFeedback()
+      } else if (distance < 10 && duration < 200) {
+        // Handle tap gesture
+        const currentTime = Date.now()
+        const timeSinceLastTap = currentTime - lastTapTimeRef.current
+
+        if (timeSinceLastTap < 300) {
+          // Double tap detected
+          const position = { x: touch.clientX, y: touch.clientY }
+          callbacks.onTap?.(position)
+          triggerHapticFeedback()
+        }
+
+        lastTapTimeRef.current = currentTime
+      }
+
+      // Clear long press timer
+      if (longPressTimerRef.current) {
+        clearTimeout(longPressTimerRef.current)
+        longPressTimerRef.current = null
+      }
+
+      touchStartRef.current = null
+      callbacks.onTouchEnd?.({ x: touch.clientX, y: touch.clientY })
+    } else if (touchCount === 0) {
+      // All touches ended
+      touchStartCenterRef.current = null
+      touchStartDistanceRef.current = 0
+    }
+
+    setGestureState(prev => ({ ...prev, isTracking: false, currentGesture: 'none' }))
+  }, [callbacks, defaultConfig.minSwipeDistance, defaultConfig.maxSwipeTime, triggerHapticFeedback, triggerSoundFeedback])
+
+  // Set up event listeners
+  useEffect(() => {
+    const element = elementRef.current
+    if (!element) 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 (longPressTimerRef.current) {
+        clearTimeout(longPressTimerRef.current)
+      }
+    }
+  }, [elementRef, handleTouchStart, handleTouchMove, handleTouchEnd])
+
+  // Utility functions
+  const resetGestureState = useCallback(() => {
+    setGestureState({
+      isTracking: false,
+      currentGesture: 'none',
+      lastGesture: null,
+      touchCount: 0
+    })
+  }, [])
+
+  const isGestureActive = useMemo(() => gestureState.isTracking, [gestureState.isTracking])
+  const currentGestureType = useMemo(() => gestureState.currentGesture, [gestureState.currentGesture])
+
+  return {
+    gestureState,
+    isGestureActive,
+    currentGestureType,
+    resetGestureState,
+    triggerHapticFeedback,
+    triggerSoundFeedback
+  }
+}
+
+// Convenience hooks for specific gestures
+export declare const useSwipeGesture: (
+  elementRef: React.RefObject<HTMLElement>,
+  onSwipe: (gesture: SwipeGesture) => void,
+  config?: Partial<GestureConfig>
+) => {
+  return useGestures(elementRef, { onSwipe }, config)
+}
+
+export declare const usePinchGesture: (
+  elementRef: React.RefObject<HTMLElement>,
+  onPinch: (gesture: PinchGesture) => void,
+  config?: Partial<GestureConfig>
+) => {
+  return useGestures(elementRef, { onPinch }, config)
+}
+
+export declare const useTapGesture: (
+  elementRef: React.RefObject<HTMLElement>,
+  onTap: (position: { x: number; y: number }) => void,
+  config?: Partial<GestureConfig>
+) => {
+  return useGestures(elementRef, { onTap }, config)
+}
+
+export declare const useLongPressGesture: (
+  elementRef: React.RefObject<HTMLElement>,
+  onLongPress: (position: { x: number; y: number }) => void,
+  config?: Partial<GestureConfig>
+) => {
+  return useGestures(elementRef, { onLongPress }, config)
+}

package/dist/hooks/use-gestures.esm.js

@@ -0,0 +1,314 @@
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
+
+export interface GestureConfig {
+  minSwipeDistance}
+
+export interface SwipeGesture {
+  direction}
+
+export interface PinchGesture {
+  scale; y}
+  distance}
+
+export interface GestureCallbacks {
+  onSwipe?) => void
+  onPinch?) => void
+  onTap?; y}) => void
+  onLongPress?; y}) => void
+  onTouchStart?; y}) => void
+  onTouchEnd?; y}) => void
+}
+
+export interface GestureState {
+  isTracking}
+
+export const useGestures = (
+  elementRef,
+  callbacks= {},
+  config= {}
+) => {
+  const defaultConfig= {
+    minSwipeDistance,
+    maxSwipeTime,
+    minPinchDistance,
+    enableHapticFeedback,
+    enableSoundFeedback,
+    ...config
+  }
+
+  const [gestureState, setGestureState] = useState<GestureState>({
+    isTracking,
+    currentGesture,
+    lastGesture,
+    touchCount})
+
+  const touchStartRef = useRef<{ x; y; time} | null>(null)
+  const touchStartDistanceRef = useRef<number>(0)
+  const touchStartCenterRef = useRef<{ x; y} | null>(null)
+  const longPressTimerRef = useRef<NodeJS.Timeout | null>(null)
+  const lastTapTimeRef = useRef<number>(0)
+
+  // Haptic feedback function
+  const triggerHapticFeedback = useCallback(() => {
+    if (defaultConfig.enableHapticFeedback && 'vibrate' in navigator) {
+      try {
+        navigator.vibrate(50)
+      } catch (error) {
+        // Fallback for older browsers
+        console.warn('Haptic feedback not supported')
+      }
+    }
+  }, [defaultConfig.enableHapticFeedback])
+
+  // Sound feedback function
+  const triggerSoundFeedback = useCallback(() => {
+    if (defaultConfig.enableSoundFeedback) {
+      // Create a simple beep sound
+      const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)()
+      const oscillator = audioContext.createOscillator()
+      const gainNode = audioContext.createGain()
+      
+      oscillator.connect(gainNode)
+      gainNode.connect(audioContext.destination)
+      
+      oscillator.frequency.setValueAtTime(800, audioContext.currentTime)
+      gainNode.gain.setValueAtTime(0.1, audioContext.currentTime)
+      
+      oscillator.start(audioContext.currentTime)
+      oscillator.stop(audioContext.currentTime + 0.1)
+    }
+  }, [defaultConfig.enableSoundFeedback])
+
+  // Calculate distance between two points
+  const calculateDistance = useCallback((p1; y}, p2; y}) => {
+    const dx = p2.x - p1.x
+    const dy = p2.y - p1.y
+    return Math.sqrt(dx * dx + dy * dy)
+  }, [])
+
+  // Calculate center point between two touches
+  const calculateCenter = useCallback((touches) => {
+    let x = 0
+    let y = 0
+    for (let i = 0; i < touches.length; i++) {
+      x += touches[i].clientX
+      y += touches[i].clientY
+    }
+    return { x, y}
+  }, [])
+
+  // Handle touch start
+  const handleTouchStart = useCallback((event) => {
+    event.preventDefault()
+    
+    const touches = event.touches
+    const touchCount = touches.length
+    
+    if (touchCount === 1) {
+      const touch = touches[0]
+      touchStartRef.current = {
+        x,
+        y,
+        time)
+      }
+      
+      // Start long press timer
+      longPressTimerRef.current = setTimeout(() => {
+        if (touchStartRef.current) {
+          const position = { x, y}
+          setGestureState(prev => ({ ...prev, currentGesture}))
+          callbacks.onLongPress?.(position)
+          triggerHapticFeedback()
+        }
+      }, 500)
+      
+      callbacks.onTouchStart?.({ x, y})
+    } else if (touchCount === 2) {
+      // Pinch gesture start
+      const center = calculateCenter(touches)
+      const distance = calculateDistance(
+        { x].clientX, y].clientY },
+        { x].clientX, y].clientY }
+      )
+      
+      touchStartCenterRef.current = center
+      touchStartDistanceRef.current = distance
+    }
+    
+    setGestureState(prev => ({ ...prev, isTracking, touchCount }))
+  }, [callbacks, calculateCenter, calculateDistance, triggerHapticFeedback])
+
+  // Handle touch move
+  const handleTouchMove = useCallback((event) => {
+    event.preventDefault()
+    
+    const touches = event.touches
+    const touchCount = touches.length
+    
+    if (touchCount === 1 && touchStartRef.current) {
+      // Cancel long press timer on movement
+      if (longPressTimerRef.current) {
+        clearTimeout(longPressTimerRef.current)
+        longPressTimerRef.current = null
+      }
+    } else if (touchCount === 2 && touchStartCenterRef.current && touchStartDistanceRef.current) {
+      // Handle pinch gesture
+      const center = calculateCenter(touches)
+      const distance = calculateDistance(
+        { x].clientX, y].clientY },
+        { x].clientX, y].clientY }
+      )
+      
+      const scale = distance / touchStartDistanceRef.current
+      
+      if (Math.abs(scale - 1) * 100 > defaultConfig.minPinchDistance) {
+        const pinchGesture= {
+          scale,
+          center,
+          distance
+        }
+        
+        setGestureState(prev => ({ ...prev, currentGesture, lastGesture}))
+        callbacks.onPinch?.(pinchGesture)
+      }
+    }
+  }, [callbacks, calculateCenter, calculateDistance, defaultConfig.minPinchDistance])
+
+  // Handle touch end
+  const handleTouchEnd = useCallback((event) => {
+    event.preventDefault()
+    
+    const touches = event.changedTouches
+    const touchCount = touches.length
+    
+    if (touchCount === 1 && touchStartRef.current) {
+      const touch = touches[0]
+      const endTime = Date.now()
+      const duration = endTime - touchStartRef.current.time
+      
+      // Calculate swipe gesture
+      const dx = touch.clientX - touchStartRef.current.x
+      const dy = touch.clientY - touchStartRef.current.y
+      const distance = Math.sqrt(dx * dx + dy * dy)
+      
+      if (distance >= defaultConfig.minSwipeDistance && duration <= defaultConfig.maxSwipeTime) {
+        // Determine swipe direction
+        let direction) > Math.abs(dy)) {
+          direction = dx > 0 ? 'right' } else {
+          direction = dy > 0 ? 'down' }
+        
+        const velocity = distance / duration
+        const swipeGesture= {
+          direction,
+          distance,
+          velocity,
+          duration
+        }
+        
+        setGestureState(prev => ({ ...prev, currentGesture, lastGesture}))
+        callbacks.onSwipe?.(swipeGesture)
+        triggerHapticFeedback()
+        triggerSoundFeedback()
+      } else if (distance < 10 && duration < 200) {
+        // Handle tap gesture
+        const currentTime = Date.now()
+        const timeSinceLastTap = currentTime - lastTapTimeRef.current
+        
+        if (timeSinceLastTap < 300) {
+          // Double tap detected
+          const position = { x, y}
+          callbacks.onTap?.(position)
+          triggerHapticFeedback()
+        }
+        
+        lastTapTimeRef.current = currentTime
+      }
+      
+      // Clear long press timer
+      if (longPressTimerRef.current) {
+        clearTimeout(longPressTimerRef.current)
+        longPressTimerRef.current = null
+      }
+      
+      touchStartRef.current = null
+      callbacks.onTouchEnd?.({ x, y})
+    } else if (touchCount === 0) {
+      // All touches ended
+      touchStartCenterRef.current = null
+      touchStartDistanceRef.current = 0
+    }
+    
+    setGestureState(prev => ({ ...prev, isTracking, currentGesture}))
+  }, [callbacks, defaultConfig.minSwipeDistance, defaultConfig.maxSwipeTime, triggerHapticFeedback, triggerSoundFeedback])
+
+  // Set up event listeners
+  useEffect(() => {
+    const element = elementRef.current
+    if (!element) return
+    
+    element.addEventListener('touchstart', handleTouchStart, { passive})
+    element.addEventListener('touchmove', handleTouchMove, { passive})
+    element.addEventListener('touchend', handleTouchEnd, { passive})
+    
+    return () => {
+      element.removeEventListener('touchstart', handleTouchStart)
+      element.removeEventListener('touchmove', handleTouchMove)
+      element.removeEventListener('touchend', handleTouchEnd)
+      
+      // Clean up timers
+      if (longPressTimerRef.current) {
+        clearTimeout(longPressTimerRef.current)
+      }
+    }
+  }, [elementRef, handleTouchStart, handleTouchMove, handleTouchEnd])
+
+  // Utility functions
+  const resetGestureState = useCallback(() => {
+    setGestureState({
+      isTracking,
+      currentGesture,
+      lastGesture,
+      touchCount})
+  }, [])
+
+  const isGestureActive = useMemo(() => gestureState.isTracking, [gestureState.isTracking])
+  const currentGestureType = useMemo(() => gestureState.currentGesture, [gestureState.currentGesture])
+
+  return {
+    gestureState,
+    isGestureActive,
+    currentGestureType,
+    resetGestureState,
+    triggerHapticFeedback,
+    triggerSoundFeedback
+  }
+}
+
+// Convenience hooks for specific gestures
+export const useSwipeGesture = (
+  elementRef,
+  onSwipe) => void,
+  config?) => {
+  return useGestures(elementRef, { onSwipe }, config)
+}
+
+export const usePinchGesture = (
+  elementRef,
+  onPinch) => void,
+  config?) => {
+  return useGestures(elementRef, { onPinch }, config)
+}
+
+export const useTapGesture = (
+  elementRef,
+  onTap; y}) => void,
+  config?) => {
+  return useGestures(elementRef, { onTap }, config)
+}
+
+export const useLongPressGesture = (
+  elementRef,
+  onLongPress; y}) => void,
+  config?) => {
+  return useGestures(elementRef, { onLongPress }, config)
+}