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

package/dist/hooks/use-frame-rate.js

@@ -1,28 +1,44 @@
 import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
 
 export interface FrameRateMetrics {
-  fps}
+  fps: number
+  frameTime: number
+  frameCount: number
+  averageFPS: number
+  minFPS: number
+  maxFPS: number
+  droppedFrames: number
+  performanceScore: 'excellent' | 'good' | 'fair' | 'poor'
+}
 
 export interface FrameRateThresholds {
-  warning}
+  warning: number
+  critical: number
+  excellent: number
+}
 
 export interface FrameRateCallbacks {
-  onFPSWarning?) => void
-  onFPSDrop?, previousFPS) => void
-  onPerformanceScoreChange?]) => void
+  onFPSWarning?: (fps: number) => void
+  onFPSDrop?: (fps: number, previousFPS: number) => void
+  onPerformanceScoreChange?: (score: FrameRateMetrics['performanceScore']) => void
 }
 
 export interface FrameRateOptions {
-  updateInterval?}
+  updateInterval?: number
+  sampleSize?: number
+  thresholds?: Partial<FrameRateThresholds>
+  callbacks?: FrameRateCallbacks
+}
 
-const DEFAULT_THRESHOLDS= {
-  warning,
-  critical,
-  excellent}
+const DEFAULT_THRESHOLDS: FrameRateThresholds = {
+  warning: 45,
+  critical: 30,
+  excellent: 55
+}
 
 const DEFAULT_SAMPLE_SIZE = 60 // 1 second at 60fps
 
-export const useFrameRate = (options= {}) => {
+export const useFrameRate = (options: FrameRateOptions = {}) => {
   const {
     updateInterval = 1000,
     sampleSize = DEFAULT_SAMPLE_SIZE,
@@ -31,14 +47,15 @@ export const useFrameRate = (options= {}) => {
   } = options
 
   const [metrics, setMetrics] = useState<FrameRateMetrics>({
-    fps,
-    frameTime,
-    frameCount,
-    averageFPS,
-    minFPS,
-    maxFPS,
-    droppedFrames,
-    performanceScore})
+    fps: 60,
+    frameTime: 16.67,
+    frameCount: 0,
+    averageFPS: 60,
+    minFPS: 60,
+    maxFPS: 60,
+    droppedFrames: 0,
+    performanceScore: 'excellent'
+  })
 
   const [isMonitoring, setIsMonitoring] = useState(false)
   const frameCountRef = useRef(0)
@@ -55,7 +72,7 @@ export const useFrameRate = (options= {}) => {
   }), [thresholds])
 
   // Calculate performance score based on FPS
-  const calculatePerformanceScore = useCallback((fps)] => {
+  const calculatePerformanceScore = useCallback((fps: number): FrameRateMetrics['performanceScore'] => {
     if (fps >= finalThresholds.excellent) return 'excellent'
     if (fps >= finalThresholds.warning) return 'good'
     if (fps >= finalThresholds.critical) return 'fair'
@@ -63,7 +80,7 @@ export const useFrameRate = (options= {}) => {
   }, [finalThresholds])
 
   // Update FPS history and calculate statistics
-  const updateFPSHistory = useCallback((fps) => {
+  const updateFPSHistory = useCallback((fps: number) => {
     fpsHistoryRef.current.push(fps)
     
     // Keep only the last sampleSize frames
@@ -82,7 +99,7 @@ export const useFrameRate = (options= {}) => {
   }, [sampleSize])
 
   // Detect dropped frames
-  const detectDroppedFrames = useCallback((fps, previousFPS) => {
+  const detectDroppedFrames = useCallback((fps: number, previousFPS: number) => {
     if (fps < previousFPS && previousFPS >= finalThresholds.warning) {
       const drop = previousFPS - fps
       if (drop > 10) { // Significant drop
@@ -110,10 +127,10 @@ export const useFrameRate = (options= {}) => {
       // Calculate performance score
       const performanceScore = calculatePerformanceScore(fps)
       
-      const newMetrics= {
+      const newMetrics: FrameRateMetrics = {
         fps,
         frameTime,
-        frameCount,
+        frameCount: frameCountRef.current,
         averageFPS,
         minFPS,
         maxFPS,
@@ -172,10 +189,11 @@ export const useFrameRate = (options= {}) => {
     fpsHistoryRef.current = []
     setMetrics(prev => ({
       ...prev,
-      averageFPS,
-      minFPS,
-      maxFPS,
-      droppedFrames}))
+      averageFPS: 60,
+      minFPS: 60,
+      maxFPS: 60,
+      droppedFrames: 0
+    }))
   }, [])
 
   // Auto-start monitoring on mount
@@ -186,7 +204,7 @@ export const useFrameRate = (options= {}) => {
 
   // Performance insights
   const getPerformanceInsights = useCallback(() => {
-    const insights] = []
+    const insights: string[] = []
     
     if (metrics.fps < finalThresholds.critical) {
       insights.push('Critical FPS drop detected - consider reducing animation complexity')
@@ -216,17 +234,18 @@ export const useFrameRate = (options= {}) => {
     resetStats,
     
     // Performance analysis
-    performanceScore,
+    performanceScore: metrics.performanceScore,
     getPerformanceInsights,
     
     // Raw values
-    fps,
-    frameTime,
-    averageFPS,
-    minFPS,
-    maxFPS,
-    droppedFrames,
+    fps: metrics.fps,
+    frameTime: metrics.frameTime,
+    averageFPS: metrics.averageFPS,
+    minFPS: metrics.minFPS,
+    maxFPS: metrics.maxFPS,
+    droppedFrames: metrics.droppedFrames,
     
     // Thresholds
-    thresholds}
+    thresholds: finalThresholds
+  }
 }

package/dist/hooks/use-gestures.esm.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)
 }