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

package/dist/hooks/use-gestures.js

@@ -1,50 +1,66 @@
 import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
 
 export interface GestureConfig {
-  minSwipeDistance}
+  minSwipeDistance: number
+  maxSwipeTime: number
+  minPinchDistance: number
+  enableHapticFeedback: boolean
+  enableSoundFeedback: boolean
+}
 
 export interface SwipeGesture {
-  direction}
+  direction: 'up' | 'down' | 'left' | 'right'
+  distance: number
+  velocity: number
+  duration: number
+}
 
 export interface PinchGesture {
-  scale; y}
-  distance}
+  scale: number
+  center: { x: number; y: number }
+  distance: number
+}
 
 export interface GestureCallbacks {
-  onSwipe?) => void
-  onPinch?) => void
-  onTap?; y}) => void
-  onLongPress?; y}) => void
-  onTouchStart?; y}) => void
-  onTouchEnd?; y}) => void
+  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}
+  isTracking: boolean
+  currentGesture: 'none' | 'swipe' | 'pinch' | 'tap' | 'longPress'
+  lastGesture: SwipeGesture | PinchGesture | null
+  touchCount: number
+}
 
 export const useGestures = (
-  elementRef,
-  callbacks= {},
-  config= {}
+  elementRef: React.RefObject<HTMLElement>,
+  callbacks: GestureCallbacks = {},
+  config: Partial<GestureConfig> = {}
 ) => {
-  const defaultConfig= {
-    minSwipeDistance,
-    maxSwipeTime,
-    minPinchDistance,
-    enableHapticFeedback,
-    enableSoundFeedback,
+  const defaultConfig: GestureConfig = {
+    minSwipeDistance: 50,
+    maxSwipeTime: 300,
+    minPinchDistance: 20,
+    enableHapticFeedback: true,
+    enableSoundFeedback: false,
     ...config
   }
 
   const [gestureState, setGestureState] = useState<GestureState>({
-    isTracking,
-    currentGesture,
-    lastGesture,
-    touchCount})
+    isTracking: false,
+    currentGesture: 'none',
+    lastGesture: null,
+    touchCount: 0
+  })
 
-  const touchStartRef = useRef<{ x; y; time} | null>(null)
+  const touchStartRef = useRef<{ x: number; y: number; time: number } | null>(null)
   const touchStartDistanceRef = useRef<number>(0)
-  const touchStartCenterRef = useRef<{ x; y} | null>(null)
+  const touchStartCenterRef = useRef<{ x: number; y: number } | null>(null)
   const longPressTimerRef = useRef<NodeJS.Timeout | null>(null)
   const lastTapTimeRef = useRef<number>(0)
 
@@ -80,25 +96,25 @@ export const useGestures = (
   }, [defaultConfig.enableSoundFeedback])
 
   // Calculate distance between two points
-  const calculateDistance = useCallback((p1; y}, p2; y}) => {
+  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) => {
+  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, y}
+    return { x: x / touches.length, y: y / touches.length }
   }, [])
 
   // Handle touch start
-  const handleTouchStart = useCallback((event) => {
+  const handleTouchStart = useCallback((event: TouchEvent) => {
     event.preventDefault()
     
     const touches = event.touches
@@ -107,39 +123,39 @@ export const useGestures = (
     if (touchCount === 1) {
       const touch = touches[0]
       touchStartRef.current = {
-        x,
-        y,
-        time)
+        x: touch.clientX,
+        y: touch.clientY,
+        time: Date.now()
       }
       
       // Start long press timer
       longPressTimerRef.current = setTimeout(() => {
         if (touchStartRef.current) {
-          const position = { x, y}
-          setGestureState(prev => ({ ...prev, currentGesture}))
+          const position = { x: touch.clientX, y: touch.clientY }
+          setGestureState(prev => ({ ...prev, currentGesture: 'longPress' }))
           callbacks.onLongPress?.(position)
           triggerHapticFeedback()
         }
       }, 500)
       
-      callbacks.onTouchStart?.({ x, y})
+      callbacks.onTouchStart?.({ x: touch.clientX, y: touch.clientY })
     } else if (touchCount === 2) {
       // Pinch gesture start
       const center = calculateCenter(touches)
       const distance = calculateDistance(
-        { x].clientX, y].clientY },
-        { x].clientX, y].clientY }
+        { 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, touchCount }))
+    setGestureState(prev => ({ ...prev, isTracking: true, touchCount }))
   }, [callbacks, calculateCenter, calculateDistance, triggerHapticFeedback])
 
   // Handle touch move
-  const handleTouchMove = useCallback((event) => {
+  const handleTouchMove = useCallback((event: TouchEvent) => {
     event.preventDefault()
     
     const touches = event.touches
@@ -155,27 +171,27 @@ export const useGestures = (
       // Handle pinch gesture
       const center = calculateCenter(touches)
       const distance = calculateDistance(
-        { x].clientX, y].clientY },
-        { x].clientX, y].clientY }
+        { 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= {
+        const pinchGesture: PinchGesture = {
           scale,
           center,
           distance
         }
         
-        setGestureState(prev => ({ ...prev, currentGesture, lastGesture}))
+        setGestureState(prev => ({ ...prev, currentGesture: 'pinch', lastGesture: pinchGesture }))
         callbacks.onPinch?.(pinchGesture)
       }
     }
   }, [callbacks, calculateCenter, calculateDistance, defaultConfig.minPinchDistance])
 
   // Handle touch end
-  const handleTouchEnd = useCallback((event) => {
+  const handleTouchEnd = useCallback((event: TouchEvent) => {
     event.preventDefault()
     
     const touches = event.changedTouches
@@ -193,19 +209,22 @@ export const useGestures = (
       
       if (distance >= defaultConfig.minSwipeDistance && duration <= defaultConfig.maxSwipeTime) {
         // Determine swipe direction
-        let direction) > Math.abs(dy)) {
-          direction = dx > 0 ? 'right' } else {
-          direction = dy > 0 ? 'down' }
+        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= {
+        const swipeGesture: SwipeGesture = {
           direction,
           distance,
           velocity,
           duration
         }
         
-        setGestureState(prev => ({ ...prev, currentGesture, lastGesture}))
+        setGestureState(prev => ({ ...prev, currentGesture: 'swipe', lastGesture: swipeGesture }))
         callbacks.onSwipe?.(swipeGesture)
         triggerHapticFeedback()
         triggerSoundFeedback()
@@ -216,7 +235,7 @@ export const useGestures = (
         
         if (timeSinceLastTap < 300) {
           // Double tap detected
-          const position = { x, y}
+          const position = { x: touch.clientX, y: touch.clientY }
           callbacks.onTap?.(position)
           triggerHapticFeedback()
         }
@@ -231,14 +250,14 @@ export const useGestures = (
       }
       
       touchStartRef.current = null
-      callbacks.onTouchEnd?.({ x, y})
+      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, currentGesture}))
+    setGestureState(prev => ({ ...prev, isTracking: false, currentGesture: 'none' }))
   }, [callbacks, defaultConfig.minSwipeDistance, defaultConfig.maxSwipeTime, triggerHapticFeedback, triggerSoundFeedback])
 
   // Set up event listeners
@@ -246,9 +265,9 @@ export const useGestures = (
     const element = elementRef.current
     if (!element) 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)
@@ -265,10 +284,11 @@ export const useGestures = (
   // Utility functions
   const resetGestureState = useCallback(() => {
     setGestureState({
-      isTracking,
-      currentGesture,
-      lastGesture,
-      touchCount})
+      isTracking: false,
+      currentGesture: 'none',
+      lastGesture: null,
+      touchCount: 0
+    })
   }, [])
 
   const isGestureActive = useMemo(() => gestureState.isTracking, [gestureState.isTracking])
@@ -286,29 +306,33 @@ export const useGestures = (
 
 // Convenience hooks for specific gestures
 export const useSwipeGesture = (
-  elementRef,
-  onSwipe) => void,
-  config?) => {
+  elementRef: React.RefObject<HTMLElement>,
+  onSwipe: (gesture: SwipeGesture) => void,
+  config?: Partial<GestureConfig>
+) => {
   return useGestures(elementRef, { onSwipe }, config)
 }
 
 export const usePinchGesture = (
-  elementRef,
-  onPinch) => void,
-  config?) => {
+  elementRef: React.RefObject<HTMLElement>,
+  onPinch: (gesture: PinchGesture) => void,
+  config?: Partial<GestureConfig>
+) => {
   return useGestures(elementRef, { onPinch }, config)
 }
 
 export const useTapGesture = (
-  elementRef,
-  onTap; y}) => void,
-  config?) => {
+  elementRef: React.RefObject<HTMLElement>,
+  onTap: (position: { x: number; y: number }) => void,
+  config?: Partial<GestureConfig>
+) => {
   return useGestures(elementRef, { onTap }, config)
 }
 
 export const useLongPressGesture = (
-  elementRef,
-  onLongPress; y}) => void,
-  config?) => {
+  elementRef: React.RefObject<HTMLElement>,
+  onLongPress: (position: { x: number; y: number }) => void,
+  config?: Partial<GestureConfig>
+) => {
   return useGestures(elementRef, { onLongPress }, config)
 }

package/dist/hooks/use-hardware-acceleration.esm.js

@@ -1,24 +1,45 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
 
 export interface GPUInfo {
-  vendor}
+  vendor: string
+  renderer: string
+  version: string
+  isWebGLSupported: boolean
+  isWebGL2Supported: boolean
+  maxTextureSize: number
+  maxAnisotropy: number
+  maxPrecision: string
+}
 
 export interface HardwareAccelerationMetrics {
-  fps}
+  fps: number
+  frameTime: number
+  memoryUsage: number
+  gpuUtilization: number
+  batteryImpact: number
+  performanceScore: number
+}
 
 export interface HardwareAccelerationConfig {
-  enableGPUMonitoring?}
+  enableGPUMonitoring?: boolean
+  enablePerformanceTracking?: boolean
+  enableBatteryOptimization?: boolean
+  enableAutomaticOptimization?: boolean
+  fpsTarget?: number
+  memoryThreshold?: number
+  batteryLowThreshold?: number
+}
 
 export interface HardwareAccelerationCallbacks {
-  onGPUDetected?) => void
-  onPerformanceWarning?, metrics) => void
-  onBatteryWarning?, isLow) => void
-  onOptimizationApplied?) => void
+  onGPUDetected?: (gpuInfo: GPUInfo) => void
+  onPerformanceWarning?: (warning: string, metrics: HardwareAccelerationMetrics) => void
+  onBatteryWarning?: (level: number, isLow: boolean) => void
+  onOptimizationApplied?: (optimization: string) => void
 }
 
 export const useHardwareAcceleration = (
-  config= {},
-  callbacks= {}
+  config: HardwareAccelerationConfig = {},
+  callbacks: HardwareAccelerationCallbacks = {}
 ) => {
   const {
     enableGPUMonitoring = true,
@@ -32,12 +53,13 @@ export const useHardwareAcceleration = (
 
   const [gpuInfo, setGpuInfo] = useState<GPUInfo | null>(null)
   const [metrics, setMetrics] = useState<HardwareAccelerationMetrics>({
-    fps,
-    frameTime,
-    memoryUsage,
-    gpuUtilization,
-    batteryImpact,
-    performanceScore})
+    fps: 60,
+    frameTime: 16.67,
+    memoryUsage: 0,
+    gpuUtilization: 0,
+    batteryImpact: 0,
+    performanceScore: 100
+  })
   const [isOptimizing, setIsOptimizing] = useState(false)
   const [optimizations, setOptimizations] = useState<string[]>([])
   const [isHardwareAccelerated, setIsHardwareAccelerated] = useState(false)
@@ -49,7 +71,7 @@ export const useHardwareAcceleration = (
   const performanceTimerRef = useRef<number | null>(null)
 
   // GPU capability detection
-  const detectGPU = useCallback(()=> {
+  const detectGPU = useCallback((): GPUInfo | null => {
     if (!enableGPUMonitoring) return null
 
     try {
@@ -58,18 +80,21 @@ export const useHardwareAcceleration = (
       
       if (!gl) {
         return {
-          vendor,
-          renderer,
-          version,
-          isWebGLSupported,
-          isWebGL2Supported,
-          maxTextureSize,
-          maxAnisotropy,
-          maxPrecision}
+          vendor: 'Unknown',
+          renderer: 'WebGL not supported',
+          version: 'Unknown',
+          isWebGLSupported: false,
+          isWebGL2Supported: false,
+          maxTextureSize: 0,
+          maxAnisotropy: 0,
+          maxPrecision: 'Unknown'
+        }
       }
 
       const debugInfo = gl.getExtension('WEBGL_debug_renderer_info')
-      const vendor = debugInfo ? gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL) = debugInfo ? gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) = gl.getParameter(gl.VERSION) || 'Unknown'
+      const vendor = debugInfo ? gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL) : 'Unknown'
+      const renderer = debugInfo ? gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) : 'Unknown'
+      const version = gl.getParameter(gl.VERSION) || 'Unknown'
       
       // Check WebGL2 support
       const canvas2 = document.createElement('canvas')
@@ -81,11 +106,11 @@ export const useHardwareAcceleration = (
       const maxAnisotropy = gl.getParameter((gl as any).MAX_TEXTURE_MAX_ANISOTROPY_EXT) || 0
       const maxPrecision = gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.HIGH_FLOAT)?.precision?.toString() || 'Unknown'
 
-      const gpuInfo= {
+      const gpuInfo: GPUInfo = {
         vendor,
         renderer,
         version,
-        isWebGLSupported,
+        isWebGLSupported: true,
         isWebGL2Supported,
         maxTextureSize,
         maxAnisotropy,
@@ -97,7 +122,7 @@ export const useHardwareAcceleration = (
       
       return gpuInfo
     } catch (error) {
-      console.warn('GPU detection failed, error)
+      console.warn('GPU detection failed:', error)
       return null
     }
   }, [enableGPUMonitoring, callbacks])
@@ -128,7 +153,7 @@ export const useHardwareAcceleration = (
       
       const performanceScore = Math.round((fpsScore + timeScore + memoryScore + gpuScore) / 4)
       
-      const newMetrics= {
+      const newMetrics: HardwareAccelerationMetrics = {
         fps,
         frameTime,
         memoryUsage,
@@ -166,7 +191,7 @@ export const useHardwareAcceleration = (
         applyBatteryOptimizations()
       }
     } catch (error) {
-      console.warn('Battery API not available, error)
+      console.warn('Battery API not available:', error)
     }
   }, [enableBatteryOptimization, batteryLowThreshold, callbacks])
 
@@ -199,7 +224,7 @@ export const useHardwareAcceleration = (
     setIsOptimizing(true)
     
     setTimeout(() => {
-      const optimizations] = []
+      const optimizations: string[] = []
       
       if (metrics.fps < fpsTarget * 0.8) {
         optimizations.push('Hardware acceleration optimized for better FPS')
@@ -261,7 +286,7 @@ export const useHardwareAcceleration = (
         }
       }
     } catch (error) {
-      console.warn('Hardware acceleration initialization failed, error)
+      console.warn('Hardware acceleration initialization failed:', error)
     }
   }, [detectGPU, enablePerformanceTracking, enableBatteryOptimization, checkBatteryStatus, measurePerformance])
 
@@ -303,11 +328,14 @@ export const useHardwareAcceleration = (
     checkHardwareAcceleration,
     
     // Computed values
-    isGPUSupported,
-    isWebGL2Supported,
-    performanceLevel= 90 ? 'excellent' = 80 ? 'good' = 70 ? 'fair' ,
-    needsOptimization,
-    batteryOptimized}
+    isGPUSupported: !!gpuInfo?.isWebGLSupported,
+    isWebGL2Supported: !!gpuInfo?.isWebGL2Supported,
+    performanceLevel: metrics.performanceScore >= 90 ? 'excellent' : 
+                     metrics.performanceScore >= 80 ? 'good' : 
+                     metrics.performanceScore >= 70 ? 'fair' : 'poor',
+    needsOptimization: metrics.performanceScore < 70,
+    batteryOptimized: metrics.batteryImpact < 50
+  }
 }
 
 export default useHardwareAcceleration