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

package/dist/hooks/use-frame-rate.d.ts

@@ -1,249 +0,0 @@
-export interface FrameRateMetrics {
-  fps: number
-  frameTime: number
-  frameCount: number
-  averageFPS: number
-  minFPS: number
-  maxFPS: number
-  droppedFrames: number
-  performanceScore: 'excellent' | 'good' | 'fair' | 'poor'
-}
-
-export interface FrameRateThresholds {
-  warning: number
-  critical: number
-  excellent: number
-}
-
-export interface FrameRateCallbacks {
-  onFPSWarning?: (fps: number) => void
-  onFPSDrop?: (fps: number, previousFPS: number) => void
-  onPerformanceScoreChange?: (score: FrameRateMetrics['performanceScore']) => void
-}
-
-export interface FrameRateOptions {
-  updateInterval?: number
-  sampleSize?: number
-  thresholds?: Partial<FrameRateThresholds>
-  callbacks?: FrameRateCallbacks
-}
-
-const DEFAULT_THRESHOLDS: FrameRateThresholds = {
-  warning: 45,
-  critical: 30,
-  excellent: 55
-}
-
-const DEFAULT_SAMPLE_SIZE = 60 // 1 second at 60fps
-
-export declare const useFrameRate: (options: FrameRateOptions = {}) => {
-  const {
-    updateInterval = 1000,
-    sampleSize = DEFAULT_SAMPLE_SIZE,
-    thresholds = {},
-    callbacks = {}
-  } = options
-
-  const [metrics, setMetrics] = useState<FrameRateMetrics>({
-    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)
-  const lastTimeRef = useRef(performance.now())
-  const animationIdRef = useRef<number>()
-  const intervalIdRef = useRef<NodeJS.Timeout>()
-  const fpsHistoryRef = useRef<number[]>([])
-  const previousFPSRef = useRef(60)
-
-  // Merge default thresholds with custom ones
-  const finalThresholds = useMemo(() => ({
-    ...DEFAULT_THRESHOLDS,
-    ...thresholds
-  }), [thresholds])
-
-  // Calculate performance score based on 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'
-    return 'poor'
-  }, [finalThresholds])
-
-  // Update FPS history and calculate statistics
-  const updateFPSHistory = useCallback((fps: number) => {
-    fpsHistoryRef.current.push(fps)
-
-    // Keep only the last sampleSize frames
-    if (fpsHistoryRef.current.length > sampleSize) {
-      fpsHistoryRef.current.shift()
-    }
-
-    // Calculate statistics
-    const averageFPS = Math.round(
-      fpsHistoryRef.current.reduce((sum, f) => sum + f, 0) / fpsHistoryRef.current.length
-    )
-    const minFPS = Math.min(...fpsHistoryRef.current)
-    const maxFPS = Math.max(...fpsHistoryRef.current)
-
-    return { averageFPS, minFPS, maxFPS }
-  }, [sampleSize])
-
-  // Detect dropped frames
-  const detectDroppedFrames = useCallback((fps: number, previousFPS: number) => {
-    if (fps < previousFPS && previousFPS >= finalThresholds.warning) {
-      const drop = previousFPS - fps
-      if (drop > 10) { // Significant drop
-        return drop
-      }
-    }
-    return 0
-  }, [finalThresholds.warning])
-
-  // Frame rate monitoring
-  const measureFrameRate = useCallback(() => {
-    frameCountRef.current++
-    const currentTime = performance.now()
-
-    if (currentTime - lastTimeRef.current >= updateInterval) {
-      const fps = Math.round((frameCountRef.current * 1000) / (currentTime - lastTimeRef.current))
-      const frameTime = 1000 / fps
-
-      // Update FPS history and get statistics
-      const { averageFPS, minFPS, maxFPS } = updateFPSHistory(fps)
-
-      // Detect dropped frames
-      const droppedFrames = detectDroppedFrames(fps, previousFPSRef.current)
-
-      // Calculate performance score
-      const performanceScore = calculatePerformanceScore(fps)
-
-      const newMetrics: FrameRateMetrics = {
-        fps,
-        frameTime,
-        frameCount: frameCountRef.current,
-        averageFPS,
-        minFPS,
-        maxFPS,
-        droppedFrames,
-        performanceScore
-      }
-
-      setMetrics(newMetrics)
-
-      // Check thresholds and call callbacks
-      if (fps <= finalThresholds.critical && callbacks.onFPSWarning) {
-        callbacks.onFPSWarning(fps)
-      }
-
-      if (droppedFrames > 0 && callbacks.onFPSDrop) {
-        callbacks.onFPSDrop(fps, previousFPSRef.current)
-      }
-
-      // Check if performance score changed
-      if (performanceScore !== metrics.performanceScore && callbacks.onPerformanceScoreChange) {
-        callbacks.onPerformanceScoreChange(performanceScore)
-      }
-
-      // Reset counters
-      frameCountRef.current = 0
-      lastTimeRef.current = currentTime
-      previousFPSRef.current = fps
-    }
-
-    animationIdRef.current = requestAnimationFrame(measureFrameRate)
-  }, [updateInterval, finalThresholds.critical, callbacks, metrics.performanceScore, updateFPSHistory, detectDroppedFrames, calculatePerformanceScore])
-
-  // Start monitoring
-  const startMonitoring = useCallback(() => {
-    if (isMonitoring) return
-
-    setIsMonitoring(true)
-    measureFrameRate()
-  }, [isMonitoring, measureFrameRate])
-
-  // Stop monitoring
-  const stopMonitoring = useCallback(() => {
-    setIsMonitoring(false)
-
-    if (animationIdRef.current) {
-      cancelAnimationFrame(animationIdRef.current)
-    }
-
-    if (intervalIdRef.current) {
-      clearInterval(intervalIdRef.current)
-    }
-  }, [])
-
-  // Reset statistics
-  const resetStats = useCallback(() => {
-    fpsHistoryRef.current = []
-    setMetrics(prev => ({
-      ...prev,
-      averageFPS: 60,
-      minFPS: 60,
-      maxFPS: 60,
-      droppedFrames: 0
-    }))
-  }, [])
-
-  // Auto-start monitoring on mount
-  useEffect(() => {
-    startMonitoring()
-    return () => stopMonitoring()
-  }, [startMonitoring, stopMonitoring])
-
-  // Performance insights
-  const getPerformanceInsights = useCallback(() => {
-    const insights: string[] = []
-
-    if (metrics.fps < finalThresholds.critical) {
-      insights.push('Critical FPS drop detected - consider reducing animation complexity')
-    } else if (metrics.fps < finalThresholds.warning) {
-      insights.push('FPS below optimal range - monitor for performance issues')
-    }
-
-    if (metrics.droppedFrames > 0) {
-      insights.push(`${metrics.droppedFrames} frames dropped - check for heavy operations`)
-    }
-
-    if (metrics.averageFPS < 50) {
-      insights.push('Average FPS is low - consider performance optimizations')
-    }
-
-    return insights
-  }, [metrics, finalThresholds])
-
-  return {
-    // Metrics
-    metrics,
-
-    // Controls
-    startMonitoring,
-    stopMonitoring,
-    isMonitoring,
-    resetStats,
-
-    // Performance analysis
-    performanceScore: metrics.performanceScore,
-    getPerformanceInsights,
-
-    // Raw values
-    fps: metrics.fps,
-    frameTime: metrics.frameTime,
-    averageFPS: metrics.averageFPS,
-    minFPS: metrics.minFPS,
-    maxFPS: metrics.maxFPS,
-    droppedFrames: metrics.droppedFrames,
-
-    // Thresholds
-    thresholds: finalThresholds
-  }
-}

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

@@ -1,336 +0,0 @@
-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)
-}