@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.6 → 0.2.8

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

@@ -0,0 +1,249 @@
+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-frame-rate.esm.js

@@ -0,0 +1,232 @@
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
+
+export interface FrameRateMetrics {
+  fps}
+
+export interface FrameRateThresholds {
+  warning}
+
+export interface FrameRateCallbacks {
+  onFPSWarning?) => void
+  onFPSDrop?, previousFPS) => void
+  onPerformanceScoreChange?]) => void
+}
+
+export interface FrameRateOptions {
+  updateInterval?}
+
+const DEFAULT_THRESHOLDS= {
+  warning,
+  critical,
+  excellent}
+
+const DEFAULT_SAMPLE_SIZE = 60 // 1 second at 60fps
+
+export const useFrameRate = (options= {}) => {
+  const {
+    updateInterval = 1000,
+    sampleSize = DEFAULT_SAMPLE_SIZE,
+    thresholds = {},
+    callbacks = {}
+  } = options
+
+  const [metrics, setMetrics] = useState<FrameRateMetrics>({
+    fps,
+    frameTime,
+    frameCount,
+    averageFPS,
+    minFPS,
+    maxFPS,
+    droppedFrames,
+    performanceScore})
+
+  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)] => {
+    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) => {
+    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, previousFPS) => {
+    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= {
+        fps,
+        frameTime,
+        frameCount,
+        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,
+      minFPS,
+      maxFPS,
+      droppedFrames}))
+  }, [])
+
+  // Auto-start monitoring on mount
+  useEffect(() => {
+    startMonitoring()
+    return () => stopMonitoring()
+  }, [startMonitoring, stopMonitoring])
+
+  // Performance insights
+  const getPerformanceInsights = useCallback(() => {
+    const insights] = []
+    
+    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,
+    getPerformanceInsights,
+    
+    // Raw values
+    fps,
+    frameTime,
+    averageFPS,
+    minFPS,
+    maxFPS,
+    droppedFrames,
+    
+    // Thresholds
+    thresholds}
+}

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

@@ -0,0 +1,232 @@
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
+
+export interface FrameRateMetrics {
+  fps}
+
+export interface FrameRateThresholds {
+  warning}
+
+export interface FrameRateCallbacks {
+  onFPSWarning?) => void
+  onFPSDrop?, previousFPS) => void
+  onPerformanceScoreChange?]) => void
+}
+
+export interface FrameRateOptions {
+  updateInterval?}
+
+const DEFAULT_THRESHOLDS= {
+  warning,
+  critical,
+  excellent}
+
+const DEFAULT_SAMPLE_SIZE = 60 // 1 second at 60fps
+
+export const useFrameRate = (options= {}) => {
+  const {
+    updateInterval = 1000,
+    sampleSize = DEFAULT_SAMPLE_SIZE,
+    thresholds = {},
+    callbacks = {}
+  } = options
+
+  const [metrics, setMetrics] = useState<FrameRateMetrics>({
+    fps,
+    frameTime,
+    frameCount,
+    averageFPS,
+    minFPS,
+    maxFPS,
+    droppedFrames,
+    performanceScore})
+
+  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)] => {
+    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) => {
+    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, previousFPS) => {
+    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= {
+        fps,
+        frameTime,
+        frameCount,
+        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,
+      minFPS,
+      maxFPS,
+      droppedFrames}))
+  }, [])
+
+  // Auto-start monitoring on mount
+  useEffect(() => {
+    startMonitoring()
+    return () => stopMonitoring()
+  }, [startMonitoring, stopMonitoring])
+
+  // Performance insights
+  const getPerformanceInsights = useCallback(() => {
+    const insights] = []
+    
+    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,
+    getPerformanceInsights,
+    
+    // Raw values
+    fps,
+    frameTime,
+    averageFPS,
+    minFPS,
+    maxFPS,
+    droppedFrames,
+    
+    // Thresholds
+    thresholds}
+}