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

package/dist/hooks/use-touch-friendly-interface.esm.js

@@ -1,54 +1,79 @@
 import { useState, useCallback, useRef, useEffect } from 'react'
 
 export interface TouchTargetConfig {
-  minSize?}
+  minSize?: number
+  spacing?: 'compact' | 'default' | 'generous'
+  feedback?: 'scale' | 'ripple' | 'color' | 'none'
+  performance?: boolean
+  accessibility?: boolean
+}
 
 export interface TouchTargetState {
-  size}
+  size: number
+  spacing: string
+  feedback: string
+  isOptimized: boolean
+  isAccessible: boolean
+  performanceScore: number
+}
 
 export interface TouchInteractionState {
-  isTouching}
+  isTouching: boolean
+  touchCount: number
+  touchStartTime: number
+  touchDuration: number
+  touchStartX: number
+  touchStartY: number
+  touchCurrentX: number
+  touchCurrentY: number
+  touchDeltaX: number
+  touchDeltaY: number
+  touchVelocity: number
+  gestureType: 'none' | 'tap' | 'double-tap' | 'long-press' | 'swipe' | 'pinch'
+}
 
 export interface TouchFriendlyInterfaceCallbacks {
-  onTouchTargetOptimized?) => void
-  onTouchInteractionDetected?) => void
-  onPerformanceOptimized?) => void
-  onAccessibilityEnhanced?) => void
+  onTouchTargetOptimized?: (config: TouchTargetConfig) => void
+  onTouchInteractionDetected?: (interaction: TouchInteractionState) => void
+  onPerformanceOptimized?: (score: number) => void
+  onAccessibilityEnhanced?: (feature: string) => void
 }
 
 export const useTouchFriendlyInterface = (
-  config= {},
-  callbacks= {}
+  config: TouchTargetConfig = {},
+  callbacks: TouchFriendlyInterfaceCallbacks = {}
 ) => {
   const {
     minSize = 44,
     spacing = 'default',
     feedback = 'scale',
-    performance= true,
+    performance: enablePerformance = true,
     accessibility = true
   } = config
 
   const [touchTargetState, setTouchTargetState] = useState<TouchTargetState>({
-    size,
+    size: minSize,
     spacing,
     feedback,
-    isOptimized,
-    isAccessible,
-    performanceScore})
+    isOptimized: false,
+    isAccessible: false,
+    performanceScore: 0
+  })
 
   const [touchInteractionState, setTouchInteractionState] = useState<TouchInteractionState>({
-    isTouching,
-    touchCount,
-    touchStartTime,
-    touchDuration,
-    touchStartX,
-    touchStartY,
-    touchCurrentX,
-    touchCurrentY,
-    touchDeltaX,
-    touchDeltaY,
-    touchVelocity,
-    gestureType})
+    isTouching: false,
+    touchCount: 0,
+    touchStartTime: 0,
+    touchDuration: 0,
+    touchStartX: 0,
+    touchStartY: 0,
+    touchCurrentX: 0,
+    touchCurrentY: 0,
+    touchDeltaX: 0,
+    touchDeltaY: 0,
+    touchVelocity: 0,
+    gestureType: 'none'
+  })
 
   const [isOptimizing, setIsOptimizing] = useState(false)
   const [optimizations, setOptimizations] = useState<string[]>([])
@@ -63,22 +88,25 @@ export const useTouchFriendlyInterface = (
     setIsOptimizing(true)
     
     setTimeout(() => {
-      const newOptimizations] = []
+      const newOptimizations: string[] = []
       
       // Check and optimize touch target size
       if (touchTargetState.size < 44) {
         setTouchTargetState(prev => ({
           ...prev,
-          size,
-          isOptimized}))
+          size: 44,
+          isOptimized: true
+        }))
         newOptimizations.push('Touch target size optimized to 44px minimum')
       }
       
       // Optimize spacing based on device
-      const deviceSpacing = window.innerWidth <= 768 ? 'generous' == deviceSpacing) {
+      const deviceSpacing = window.innerWidth <= 768 ? 'generous' : 'default'
+      if (touchTargetState.spacing !== deviceSpacing) {
         setTouchTargetState(prev => ({
           ...prev,
-          spacing}))
+          spacing: deviceSpacing
+        }))
         newOptimizations.push(`Touch spacing optimized for ${deviceSpacing} layout`)
       }
       
@@ -86,7 +114,8 @@ export const useTouchFriendlyInterface = (
       if (enablePerformance) {
         setTouchTargetState(prev => ({
           ...prev,
-          performanceScore}))
+          performanceScore: 95
+        }))
         newOptimizations.push('Touch performance optimized with hardware acceleration')
       }
       
@@ -94,7 +123,8 @@ export const useTouchFriendlyInterface = (
       if (accessibility) {
         setTouchTargetState(prev => ({
           ...prev,
-          isAccessible}))
+          isAccessible: true
+        }))
         newOptimizations.push('Touch accessibility enhanced with ARIA support')
       }
       
@@ -108,28 +138,29 @@ export const useTouchFriendlyInterface = (
   }, [touchTargetState.size, touchTargetState.spacing, performance, accessibility, config, callbacks])
 
   // Handle touch start events
-  const handleTouchStart = useCallback((event) => {
+  const handleTouchStart = useCallback((event: TouchEvent) => {
     const touch = event.touches[0]
     const currentTime = performance.now()
     
     setTouchInteractionState(prev => ({
       ...prev,
-      isTouching,
-      touchCount,
-      touchStartTime,
-      touchStartX,
-      touchStartY,
-      touchCurrentX,
-      touchCurrentY,
-      touchDeltaX,
-      touchDeltaY}))
+      isTouching: true,
+      touchCount: event.touches.length,
+      touchStartTime: currentTime,
+      touchStartX: touch.clientX,
+      touchStartY: touch.clientY,
+      touchCurrentX: touch.clientX,
+      touchCurrentY: touch.clientY,
+      touchDeltaX: 0,
+      touchDeltaY: 0
+    }))
     
     touchStartTimeRef.current = currentTime
     touchCountRef.current = event.touches.length
   }, [])
 
   // Handle touch move events
-  const handleTouchMove = useCallback((event) => {
+  const handleTouchMove = useCallback((event: TouchEvent) => {
     const touch = event.touches[0]
     const currentTime = performance.now()
     const deltaX = touch.clientX - touchInteractionState.touchStartX
@@ -139,12 +170,13 @@ export const useTouchFriendlyInterface = (
     
     setTouchInteractionState(prev => ({
       ...prev,
-      touchCurrentX,
-      touchCurrentY,
-      touchDeltaX,
-      touchDeltaY,
-      touchDuration,
-      touchVelocity}))
+      touchCurrentX: touch.clientX,
+      touchCurrentY: touch.clientY,
+      touchDeltaX: deltaX,
+      touchDeltaY: deltaY,
+      touchDuration: duration,
+      touchVelocity: velocity
+    }))
   }, [touchInteractionState.touchStartX, touchInteractionState.touchStartY])
 
   // Handle touch end events
@@ -157,7 +189,7 @@ export const useTouchFriendlyInterface = (
     )
     
     // Detect gesture type
-    let gestureType] = 'none'
+    let gestureType: TouchInteractionState['gestureType'] = 'none'
     
     if (duration < 200 && distance < 10) {
       // Tap detection
@@ -177,7 +209,7 @@ export const useTouchFriendlyInterface = (
     
     setTouchInteractionState(prev => ({
       ...prev,
-      isTouching,
+      isTouching: false,
       gestureType
     }))
     
@@ -186,7 +218,7 @@ export const useTouchFriendlyInterface = (
     // Trigger callback
     callbacks.onTouchInteractionDetected?.({
       ...touchInteractionState,
-      isTouching,
+      isTouching: false,
       gestureType
     })
   }, [touchInteractionState, callbacks])
@@ -203,7 +235,7 @@ export const useTouchFriendlyInterface = (
       
       setTouchTargetState(prev => ({
         ...prev,
-        performanceScore)
+        performanceScore: Math.round(score)
       }))
       
       callbacks.onPerformanceOptimized?.(score)
@@ -238,9 +270,9 @@ export const useTouchFriendlyInterface = (
 
   // Initialize touch event listeners
   useEffect(() => {
-    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)
@@ -283,16 +315,16 @@ export const useTouchFriendlyInterface = (
     startPerformanceMonitoring,
     
     // Utility functions
-    getTouchTargetSize) => touchTargetState.size,
-    isTouchTargetCompliant) => touchTargetState.size >= 44,
-    getTouchSpacing) => touchTargetState.spacing,
-    getTouchFeedback) => touchTargetState.feedback,
-    getPerformanceScore) => touchTargetState.performanceScore,
-    isPerformanceOptimal) => touchTargetState.performanceScore >= 80,
-    isAccessibilityCompliant) => touchTargetState.isAccessible,
-    getTouchGestureType) => touchInteractionState.gestureType,
-    getTouchVelocity) => touchInteractionState.touchVelocity,
-    clearOptimizations) => setOptimizations([])
+    getTouchTargetSize: () => touchTargetState.size,
+    isTouchTargetCompliant: () => touchTargetState.size >= 44,
+    getTouchSpacing: () => touchTargetState.spacing,
+    getTouchFeedback: () => touchTargetState.feedback,
+    getPerformanceScore: () => touchTargetState.performanceScore,
+    isPerformanceOptimal: () => touchTargetState.performanceScore >= 80,
+    isAccessibilityCompliant: () => touchTargetState.isAccessible,
+    getTouchGestureType: () => touchInteractionState.gestureType,
+    getTouchVelocity: () => touchInteractionState.touchVelocity,
+    clearOptimizations: () => setOptimizations([])
   }
 }
 

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

@@ -1,54 +1,79 @@
 import { useState, useCallback, useRef, useEffect } from 'react'
 
 export interface TouchTargetConfig {
-  minSize?}
+  minSize?: number
+  spacing?: 'compact' | 'default' | 'generous'
+  feedback?: 'scale' | 'ripple' | 'color' | 'none'
+  performance?: boolean
+  accessibility?: boolean
+}
 
 export interface TouchTargetState {
-  size}
+  size: number
+  spacing: string
+  feedback: string
+  isOptimized: boolean
+  isAccessible: boolean
+  performanceScore: number
+}
 
 export interface TouchInteractionState {
-  isTouching}
+  isTouching: boolean
+  touchCount: number
+  touchStartTime: number
+  touchDuration: number
+  touchStartX: number
+  touchStartY: number
+  touchCurrentX: number
+  touchCurrentY: number
+  touchDeltaX: number
+  touchDeltaY: number
+  touchVelocity: number
+  gestureType: 'none' | 'tap' | 'double-tap' | 'long-press' | 'swipe' | 'pinch'
+}
 
 export interface TouchFriendlyInterfaceCallbacks {
-  onTouchTargetOptimized?) => void
-  onTouchInteractionDetected?) => void
-  onPerformanceOptimized?) => void
-  onAccessibilityEnhanced?) => void
+  onTouchTargetOptimized?: (config: TouchTargetConfig) => void
+  onTouchInteractionDetected?: (interaction: TouchInteractionState) => void
+  onPerformanceOptimized?: (score: number) => void
+  onAccessibilityEnhanced?: (feature: string) => void
 }
 
 export const useTouchFriendlyInterface = (
-  config= {},
-  callbacks= {}
+  config: TouchTargetConfig = {},
+  callbacks: TouchFriendlyInterfaceCallbacks = {}
 ) => {
   const {
     minSize = 44,
     spacing = 'default',
     feedback = 'scale',
-    performance= true,
+    performance: enablePerformance = true,
     accessibility = true
   } = config
 
   const [touchTargetState, setTouchTargetState] = useState<TouchTargetState>({
-    size,
+    size: minSize,
     spacing,
     feedback,
-    isOptimized,
-    isAccessible,
-    performanceScore})
+    isOptimized: false,
+    isAccessible: false,
+    performanceScore: 0
+  })
 
   const [touchInteractionState, setTouchInteractionState] = useState<TouchInteractionState>({
-    isTouching,
-    touchCount,
-    touchStartTime,
-    touchDuration,
-    touchStartX,
-    touchStartY,
-    touchCurrentX,
-    touchCurrentY,
-    touchDeltaX,
-    touchDeltaY,
-    touchVelocity,
-    gestureType})
+    isTouching: false,
+    touchCount: 0,
+    touchStartTime: 0,
+    touchDuration: 0,
+    touchStartX: 0,
+    touchStartY: 0,
+    touchCurrentX: 0,
+    touchCurrentY: 0,
+    touchDeltaX: 0,
+    touchDeltaY: 0,
+    touchVelocity: 0,
+    gestureType: 'none'
+  })
 
   const [isOptimizing, setIsOptimizing] = useState(false)
   const [optimizations, setOptimizations] = useState<string[]>([])
@@ -63,22 +88,25 @@ export const useTouchFriendlyInterface = (
     setIsOptimizing(true)
     
     setTimeout(() => {
-      const newOptimizations] = []
+      const newOptimizations: string[] = []
       
       // Check and optimize touch target size
       if (touchTargetState.size < 44) {
         setTouchTargetState(prev => ({
           ...prev,
-          size,
-          isOptimized}))
+          size: 44,
+          isOptimized: true
+        }))
         newOptimizations.push('Touch target size optimized to 44px minimum')
       }
       
       // Optimize spacing based on device
-      const deviceSpacing = window.innerWidth <= 768 ? 'generous' == deviceSpacing) {
+      const deviceSpacing = window.innerWidth <= 768 ? 'generous' : 'default'
+      if (touchTargetState.spacing !== deviceSpacing) {
         setTouchTargetState(prev => ({
           ...prev,
-          spacing}))
+          spacing: deviceSpacing
+        }))
         newOptimizations.push(`Touch spacing optimized for ${deviceSpacing} layout`)
       }
       
@@ -86,7 +114,8 @@ export const useTouchFriendlyInterface = (
       if (enablePerformance) {
         setTouchTargetState(prev => ({
           ...prev,
-          performanceScore}))
+          performanceScore: 95
+        }))
         newOptimizations.push('Touch performance optimized with hardware acceleration')
       }
       
@@ -94,7 +123,8 @@ export const useTouchFriendlyInterface = (
       if (accessibility) {
         setTouchTargetState(prev => ({
           ...prev,
-          isAccessible}))
+          isAccessible: true
+        }))
         newOptimizations.push('Touch accessibility enhanced with ARIA support')
       }
       
@@ -108,28 +138,29 @@ export const useTouchFriendlyInterface = (
   }, [touchTargetState.size, touchTargetState.spacing, performance, accessibility, config, callbacks])
 
   // Handle touch start events
-  const handleTouchStart = useCallback((event) => {
+  const handleTouchStart = useCallback((event: TouchEvent) => {
     const touch = event.touches[0]
     const currentTime = performance.now()
     
     setTouchInteractionState(prev => ({
       ...prev,
-      isTouching,
-      touchCount,
-      touchStartTime,
-      touchStartX,
-      touchStartY,
-      touchCurrentX,
-      touchCurrentY,
-      touchDeltaX,
-      touchDeltaY}))
+      isTouching: true,
+      touchCount: event.touches.length,
+      touchStartTime: currentTime,
+      touchStartX: touch.clientX,
+      touchStartY: touch.clientY,
+      touchCurrentX: touch.clientX,
+      touchCurrentY: touch.clientY,
+      touchDeltaX: 0,
+      touchDeltaY: 0
+    }))
     
     touchStartTimeRef.current = currentTime
     touchCountRef.current = event.touches.length
   }, [])
 
   // Handle touch move events
-  const handleTouchMove = useCallback((event) => {
+  const handleTouchMove = useCallback((event: TouchEvent) => {
     const touch = event.touches[0]
     const currentTime = performance.now()
     const deltaX = touch.clientX - touchInteractionState.touchStartX
@@ -139,12 +170,13 @@ export const useTouchFriendlyInterface = (
     
     setTouchInteractionState(prev => ({
       ...prev,
-      touchCurrentX,
-      touchCurrentY,
-      touchDeltaX,
-      touchDeltaY,
-      touchDuration,
-      touchVelocity}))
+      touchCurrentX: touch.clientX,
+      touchCurrentY: touch.clientY,
+      touchDeltaX: deltaX,
+      touchDeltaY: deltaY,
+      touchDuration: duration,
+      touchVelocity: velocity
+    }))
   }, [touchInteractionState.touchStartX, touchInteractionState.touchStartY])
 
   // Handle touch end events
@@ -157,7 +189,7 @@ export const useTouchFriendlyInterface = (
     )
     
     // Detect gesture type
-    let gestureType] = 'none'
+    let gestureType: TouchInteractionState['gestureType'] = 'none'
     
     if (duration < 200 && distance < 10) {
       // Tap detection
@@ -177,7 +209,7 @@ export const useTouchFriendlyInterface = (
     
     setTouchInteractionState(prev => ({
       ...prev,
-      isTouching,
+      isTouching: false,
       gestureType
     }))
     
@@ -186,7 +218,7 @@ export const useTouchFriendlyInterface = (
     // Trigger callback
     callbacks.onTouchInteractionDetected?.({
       ...touchInteractionState,
-      isTouching,
+      isTouching: false,
       gestureType
     })
   }, [touchInteractionState, callbacks])
@@ -203,7 +235,7 @@ export const useTouchFriendlyInterface = (
       
       setTouchTargetState(prev => ({
         ...prev,
-        performanceScore)
+        performanceScore: Math.round(score)
       }))
       
       callbacks.onPerformanceOptimized?.(score)
@@ -238,9 +270,9 @@ export const useTouchFriendlyInterface = (
 
   // Initialize touch event listeners
   useEffect(() => {
-    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)
@@ -283,16 +315,16 @@ export const useTouchFriendlyInterface = (
     startPerformanceMonitoring,
     
     // Utility functions
-    getTouchTargetSize) => touchTargetState.size,
-    isTouchTargetCompliant) => touchTargetState.size >= 44,
-    getTouchSpacing) => touchTargetState.spacing,
-    getTouchFeedback) => touchTargetState.feedback,
-    getPerformanceScore) => touchTargetState.performanceScore,
-    isPerformanceOptimal) => touchTargetState.performanceScore >= 80,
-    isAccessibilityCompliant) => touchTargetState.isAccessible,
-    getTouchGestureType) => touchInteractionState.gestureType,
-    getTouchVelocity) => touchInteractionState.touchVelocity,
-    clearOptimizations) => setOptimizations([])
+    getTouchTargetSize: () => touchTargetState.size,
+    isTouchTargetCompliant: () => touchTargetState.size >= 44,
+    getTouchSpacing: () => touchTargetState.spacing,
+    getTouchFeedback: () => touchTargetState.feedback,
+    getPerformanceScore: () => touchTargetState.performanceScore,
+    isPerformanceOptimal: () => touchTargetState.performanceScore >= 80,
+    isAccessibilityCompliant: () => touchTargetState.isAccessible,
+    getTouchGestureType: () => touchInteractionState.gestureType,
+    getTouchVelocity: () => touchInteractionState.touchVelocity,
+    clearOptimizations: () => setOptimizations([])
   }
 }