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

package/dist/hooks/use-touch-friendly-input.js

@@ -1,25 +1,54 @@
 import { useState, useCallback, useRef, useEffect } from 'react'
 
 export interface TouchFriendlyConfig {
-  enableTouchOptimization?}
+  enableTouchOptimization?: boolean
+  enableGestureSupport?: boolean
+  enableTouchFeedback?: boolean
+  enablePerformanceMonitoring?: boolean
+  enableAccessibilitySupport?: boolean
+  touchTargetSize?: number
+  touchFeedbackDelay?: number
+  gestureSensitivity?: number
+}
 
 export interface TouchState {
-  isTouching}
+  isTouching: boolean
+  touchCount: number
+  touchStartTime: number
+  touchDuration: number
+  touchStartX: number
+  touchStartY: number
+  touchCurrentX: number
+  touchCurrentY: number
+  touchDeltaX: number
+  touchDeltaY: number
+  touchVelocity: number
+  gestureType: 'tap' | 'double-tap' | 'long-press' | 'swipe' | 'pinch' | 'rotate' | 'none'
+  touchTarget: HTMLElement | null
+}
 
 export interface TouchOptimization {
-  id}
+  id: string
+  name: string
+  type: 'touch' | 'gesture' | 'feedback' | 'performance' | 'accessibility'
+  applied: boolean
+  impact: 'low' | 'medium' | 'high'
+  description: string
+  touchTargetSize?: number
+  gestureType?: string
+}
 
 export interface TouchFriendlyInputCallbacks {
-  onTouchStateChanged?) => void
-  onTouchOptimizationApplied?) => void
-  onGestureDetected?) => void
-  onTouchFeedbackTriggered?) => void
-  onPerformanceOptimized?) => void
+  onTouchStateChanged?: (state: TouchState) => void
+  onTouchOptimizationApplied?: (optimization: TouchOptimization) => void
+  onGestureDetected?: (gesture: string) => void
+  onTouchFeedbackTriggered?: (feedback: string) => void
+  onPerformanceOptimized?: (optimization: string) => void
 }
 
 export const useTouchFriendlyInput = (
-  config= {},
-  callbacks= {}
+  config: TouchFriendlyConfig = {},
+  callbacks: TouchFriendlyInputCallbacks = {}
 ) => {
   const {
     enableTouchOptimization = true,
@@ -33,27 +62,29 @@ export const useTouchFriendlyInput = (
   } = config
 
   const [touchState, setTouchState] = useState<TouchState>({
-    isTouching,
-    touchCount,
-    touchStartTime,
-    touchDuration,
-    touchStartX,
-    touchStartY,
-    touchCurrentX,
-    touchCurrentY,
-    touchDeltaX,
-    touchDeltaY,
-    touchVelocity,
-    gestureType,
-    touchTarget})
+    isTouching: false,
+    touchCount: 0,
+    touchStartTime: 0,
+    touchDuration: 0,
+    touchStartX: 0,
+    touchStartY: 0,
+    touchCurrentX: 0,
+    touchCurrentY: 0,
+    touchDeltaX: 0,
+    touchDeltaY: 0,
+    touchVelocity: 0,
+    gestureType: 'none',
+    touchTarget: null
+  })
 
   const [touchOptimizations, setTouchOptimizations] = useState<TouchOptimization[]>([])
   const [isOptimizing, setIsOptimizing] = useState(false)
   const [performanceMetrics, setPerformanceMetrics] = useState({
-    touchResponseTime,
-    gestureRecognitionTime,
-    touchEventLatency,
-    memoryUsage})
+    touchResponseTime: 0,
+    gestureRecognitionTime: 0,
+    touchEventLatency: 0,
+    memoryUsage: 0
+  })
 
   const touchStartTimeRef = useRef(0)
   const lastTouchTimeRef = useRef(0)
@@ -63,41 +94,43 @@ export const useTouchFriendlyInput = (
   const touchTargetRef = useRef<HTMLElement | null>(null)
 
   // Touch event handlers
-  const handleTouchStart = useCallback((event) => {
+  const handleTouchStart = useCallback((event: TouchEvent) => {
     const touch = event.touches[0]
     const currentTime = performance.now()
     
     setTouchState(prev => ({
       ...prev,
-      isTouching,
-      touchCount,
-      touchStartTime,
-      touchStartX,
-      touchStartY,
-      touchCurrentX,
-      touchCurrentY,
-      touchDeltaX,
-      touchDeltaY,
-      touchTarget}))
+      isTouching: true,
+      touchCount: event.touches.length,
+      touchStartTime: currentTime,
+      touchStartX: touch.clientX,
+      touchStartY: touch.clientY,
+      touchCurrentX: touch.clientX,
+      touchCurrentY: touch.clientY,
+      touchDeltaX: 0,
+      touchDeltaY: 0,
+      touchTarget: touch.target as HTMLElement
+    }))
     
     touchStartTimeRef.current = currentTime
     touchTargetRef.current = touch.target as HTMLElement
     
     callbacks.onTouchStateChanged?.({
       ...touchState,
-      isTouching,
-      touchCount,
-      touchStartTime,
-      touchStartX,
-      touchStartY,
-      touchCurrentX,
-      touchCurrentY,
-      touchDeltaX,
-      touchDeltaY,
-      touchTarget})
+      isTouching: true,
+      touchCount: event.touches.length,
+      touchStartTime: currentTime,
+      touchStartX: touch.clientX,
+      touchStartY: touch.clientY,
+      touchCurrentX: touch.clientX,
+      touchCurrentY: touch.clientY,
+      touchDeltaX: 0,
+      touchDeltaY: 0,
+      touchTarget: touch.target as HTMLElement
+    })
   }, [touchState, callbacks])
 
-  const handleTouchMove = useCallback((event) => {
+  const handleTouchMove = useCallback((event: TouchEvent) => {
     const touch = event.touches[0]
     const currentTime = performance.now()
     const deltaX = touch.clientX - touchState.touchStartX
@@ -107,21 +140,23 @@ export const useTouchFriendlyInput = (
     
     setTouchState(prev => ({
       ...prev,
-      touchCurrentX,
-      touchCurrentY,
-      touchDeltaX,
-      touchDeltaY,
-      touchDuration,
-      touchVelocity}))
+      touchCurrentX: touch.clientX,
+      touchCurrentY: touch.clientY,
+      touchDeltaX: deltaX,
+      touchDeltaY: deltaY,
+      touchDuration: duration,
+      touchVelocity: velocity
+    }))
     
     callbacks.onTouchStateChanged?.({
       ...touchState,
-      touchCurrentX,
-      touchCurrentY,
-      touchDeltaX,
-      touchDeltaY,
-      touchDuration,
-      touchVelocity})
+      touchCurrentX: touch.clientX,
+      touchCurrentY: touch.clientY,
+      touchDeltaX: deltaX,
+      touchDeltaY: deltaY,
+      touchDuration: duration,
+      touchVelocity: velocity
+    })
   }, [touchState, callbacks])
 
   const handleTouchEnd = useCallback(() => {
@@ -132,7 +167,7 @@ export const useTouchFriendlyInput = (
     const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
     
     // Detect gesture type
-    let gestureType] = 'none'
+    let gestureType: TouchState['gestureType'] = 'none'
     
     if (duration < 200 && distance < 10) {
       // Tap detection
@@ -152,8 +187,8 @@ export const useTouchFriendlyInput = (
     
     setTouchState(prev => ({
       ...prev,
-      isTouching,
-      touchDuration,
+      isTouching: false,
+      touchDuration: duration,
       gestureType
     }))
     
@@ -166,8 +201,8 @@ export const useTouchFriendlyInput = (
     
     callbacks.onTouchStateChanged?.({
       ...touchState,
-      isTouching,
-      touchDuration,
+      isTouching: false,
+      touchDuration: duration,
       gestureType
     })
   }, [touchState, callbacks])
@@ -177,23 +212,24 @@ export const useTouchFriendlyInput = (
     setIsOptimizing(true)
     
     setTimeout(() => {
-      const touchOptimizations] = [
+      const touchOptimizations: TouchOptimization[] = [
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description}px size`,
+          id: 'touch-target-1',
+          name: 'Touch Target Size Optimization',
+          type: 'touch',
+          applied: true,
+          impact: 'high',
+          description: `Optimized touch targets to minimum ${touchTargetSize}px size`,
           touchTargetSize
         },
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description}
+          id: 'touch-target-2',
+          name: 'Touch-Friendly Spacing',
+          type: 'touch',
+          applied: true,
+          impact: 'medium',
+          description: 'Added adequate spacing between touch targets'
+        }
       ]
       
       setTouchOptimizations(prev => [...prev, ...touchOptimizations])
@@ -210,23 +246,25 @@ export const useTouchFriendlyInput = (
     setIsOptimizing(true)
     
     setTimeout(() => {
-      const gestureOptimizations] = [
+      const gestureOptimizations: TouchOptimization[] = [
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description,
-          gestureType},
+          id: 'gesture-1',
+          name: 'Multi-touch Gesture Support',
+          type: 'gesture',
+          applied: true,
+          impact: 'medium',
+          description: 'Enhanced multi-touch gesture recognition',
+          gestureType: 'multi-touch'
+        },
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description}`,
-          gestureType}
+          id: 'gesture-2',
+          name: 'Gesture Sensitivity Tuning',
+          type: 'gesture',
+          applied: true,
+          impact: 'low',
+          description: `Tuned gesture sensitivity to ${gestureSensitivity}`,
+          gestureType: 'sensitivity'
+        }
       ]
       
       setTouchOptimizations(prev => [...prev, ...gestureOptimizations])
@@ -243,21 +281,23 @@ export const useTouchFriendlyInput = (
     setIsOptimizing(true)
     
     setTimeout(() => {
-      const feedbackOptimizations] = [
+      const feedbackOptimizations: TouchOptimization[] = [
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description},
+          id: 'feedback-1',
+          name: 'Touch Visual Feedback',
+          type: 'feedback',
+          applied: true,
+          impact: 'medium',
+          description: 'Enhanced visual feedback for touch interactions'
+        },
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description}
+          id: 'feedback-2',
+          name: 'Haptic Feedback Support',
+          type: 'feedback',
+          applied: true,
+          impact: 'low',
+          description: 'Added haptic feedback support where available'
+        }
       ]
       
       setTouchOptimizations(prev => [...prev, ...feedbackOptimizations])
@@ -276,21 +316,23 @@ export const useTouchFriendlyInput = (
     setIsOptimizing(true)
     
     setTimeout(() => {
-      const performanceOptimizations] = [
+      const performanceOptimizations: TouchOptimization[] = [
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description},
+          id: 'performance-1',
+          name: 'Touch Event Optimization',
+          type: 'performance',
+          applied: true,
+          impact: 'high',
+          description: 'Optimized touch event handling for better performance'
+        },
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description}
+          id: 'performance-2',
+          name: 'Gesture Recognition Optimization',
+          type: 'performance',
+          applied: true,
+          impact: 'medium',
+          description: 'Enhanced gesture recognition performance'
+        }
       ]
       
       setTouchOptimizations(prev => [...prev, ...performanceOptimizations])
@@ -309,21 +351,23 @@ export const useTouchFriendlyInput = (
     setIsOptimizing(true)
     
     setTimeout(() => {
-      const accessibilityFeatures] = [
+      const accessibilityFeatures: TouchOptimization[] = [
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description},
+          id: 'accessibility-1',
+          name: 'Touch Accessibility',
+          type: 'accessibility',
+          applied: true,
+          impact: 'high',
+          description: 'Enhanced touch accessibility features'
+        },
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description}
+          id: 'accessibility-2',
+          name: 'Screen Reader Touch Support',
+          type: 'accessibility',
+          applied: true,
+          impact: 'medium',
+          description: 'Improved screen reader touch interaction support'
+        }
       ]
       
       setTouchOptimizations(prev => [...prev, ...accessibilityFeatures])
@@ -383,7 +427,7 @@ export const useTouchFriendlyInput = (
 
   // Get touch optimization recommendations
   const getTouchOptimizationRecommendations = useCallback(() => {
-    const recommendations] = []
+    const recommendations: string[] = []
     
     if (touchState.touchDuration > 500) {
       recommendations.push('Touch duration is long, consider optimizing touch event handling')
@@ -404,9 +448,9 @@ export const useTouchFriendlyInput = (
   useEffect(() => {
     if (!enableTouchOptimization) return
     
-    document.addEventListener('touchstart', handleTouchStart, { passive})
-    document.addEventListener('touchmove', handleTouchMove, { passive})
-    document.addEventListener('touchend', handleTouchEnd, { passive})
+    document.addEventListener('touchstart', handleTouchStart, { passive: false })
+    document.addEventListener('touchmove', handleTouchMove, { passive: false })
+    document.addEventListener('touchend', handleTouchEnd, { passive: false })
     
     return () => {
       document.removeEventListener('touchstart', handleTouchStart)
@@ -459,20 +503,20 @@ export const useTouchFriendlyInput = (
     autoOptimizeTouch,
     
     // Utility functions
-    isTouching) => touchState.isTouching,
-    getTouchTarget) => touchState.touchTarget,
-    getGestureType) => touchState.gestureType,
-    getTouchDuration) => touchState.touchDuration,
-    getTouchVelocity) => touchState.touchVelocity,
-    getOptimizationStatus) => ({
-      touch=> o.type === 'touch'),
-      gesture=> o.type === 'gesture'),
-      feedback=> o.type === 'feedback'),
-      performance=> o.type === 'performance'),
-      accessibility=> o.type === 'accessibility')
+    isTouching: () => touchState.isTouching,
+    getTouchTarget: () => touchState.touchTarget,
+    getGestureType: () => touchState.gestureType,
+    getTouchDuration: () => touchState.touchDuration,
+    getTouchVelocity: () => touchState.touchVelocity,
+    getOptimizationStatus: () => ({
+      touch: touchOptimizations.some(o => o.type === 'touch'),
+      gesture: touchOptimizations.some(o => o.type === 'gesture'),
+      feedback: touchOptimizations.some(o => o.type === 'feedback'),
+      performance: touchOptimizations.some(o => o.type === 'performance'),
+      accessibility: touchOptimizations.some(o => o.type === 'accessibility')
     }),
     getTouchOptimizationRecommendations,
-    clearTouchOptimizations) => setTouchOptimizations([])
+    clearTouchOptimizations: () => setTouchOptimizations([])
   }
 }