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

package/dist/hooks/use-performance.esm.js

@@ -0,0 +1,278 @@
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
+
+export interface PerformanceMetrics {
+  fps}
+
+export interface PerformanceThresholds {
+  fps}
+  memory}
+  battery}
+}
+
+export interface PerformanceCallbacks {
+  onFPSWarning?) => void
+  onMemoryWarning?) => void
+  onBatteryLow?) => void
+  onPerformanceModeChange?]) => void
+  onThrottlingChange?, reason?) => void
+}
+
+export interface PerformanceOptions {
+  updateInterval?}
+
+const DEFAULT_THRESHOLDS= {
+  fps,
+    critical},
+  memory,
+    critical},
+  battery,
+    critical}
+}
+
+export const usePerformance = (options= {}) => {
+  const {
+    updateInterval = 1000,
+    thresholds = {},
+    enableThrottling = true,
+    enableBatteryOptimization = true,
+    callbacks = {}
+  } = options
+
+  const [metrics, setMetrics] = useState<PerformanceMetrics>({
+    fps,
+    frameTime,
+    performanceMode,
+    throttlingEnabled})
+
+  const [isMonitoring, setIsMonitoring] = useState(false)
+  const frameCountRef = useRef(0)
+  const lastTimeRef = useRef(performance.now())
+  const animationIdRef = useRef<number>()
+  const intervalIdRef = useRef<NodeJS.Timeout>()
+
+  // Merge default thresholds with custom ones
+  const finalThresholds = useMemo(() => ({
+    ...DEFAULT_THRESHOLDS,
+    ...thresholds
+  }), [thresholds])
+
+  // 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
+      
+      setMetrics(prev => ({
+        ...prev,
+        fps,
+        frameTime
+      }))
+
+      // Check FPS thresholds
+      if (fps <= finalThresholds.fps.critical && callbacks.onFPSWarning) {
+        callbacks.onFPSWarning(fps)
+      }
+
+      frameCountRef.current = 0
+      lastTimeRef.current = currentTime
+    }
+
+    animationIdRef.current = requestAnimationFrame(measureFrameRate)
+  }, [updateInterval, finalThresholds.fps.critical, callbacks.onFPSWarning])
+
+  // Memory usage monitoring
+  const updateMemoryInfo = useCallback(() => {
+    if ('memory' in performance) {
+      const memory = (performance as any).memory
+      const memoryUsage = memory.usedJSHeapSize / memory.jsHeapSizeLimit
+      
+      setMetrics(prev => ({
+        ...prev,
+        memoryUsage,
+        memoryLimit,
+        memoryPercentage}))
+
+      // Check memory thresholds
+      if (memoryUsage >= finalThresholds.memory.critical && callbacks.onMemoryWarning) {
+        callbacks.onMemoryWarning(memoryUsage)
+      }
+    }
+  }, [finalThresholds.memory.critical, callbacks.onMemoryWarning])
+
+  // Battery status monitoring
+  const updateBatteryInfo = useCallback(async () => {
+    if ('getBattery' in navigator) {
+      try {
+        const battery = await (navigator as any).getBattery()
+        
+        setMetrics(prev => ({
+          ...prev,
+          batteryLevel,
+          isLowPowerMode,
+          isCharging}))
+
+        // Check battery thresholds
+        if (battery.level <= finalThresholds.battery.critical && callbacks.onBatteryLow) {
+          callbacks.onBatteryLow(battery.level)
+        }
+      } catch (error) {
+        console.warn('Battery API not available, error)
+      }
+    }
+  }, [finalThresholds.battery.low, finalThresholds.battery.critical, callbacks.onBatteryLow])
+
+  // Performance mode determination
+  const determinePerformanceMode = useCallback((fps, memoryUsage?)] => {
+    if (fps < finalThresholds.fps.critical || (memoryUsage && memoryUsage > finalThresholds.memory.critical)) {
+      return 'low'
+    }
+    if (fps < finalThresholds.fps.warning || (memoryUsage && memoryUsage > finalThresholds.memory.warning)) {
+      return 'medium'
+    }
+    return 'high'
+  }, [finalThresholds])
+
+  // Performance throttling logic
+  const shouldThrottle = useCallback((); reason?} => {
+    const { fps, memoryPercentage, batteryLevel, isLowPowerMode } = metrics
+    
+    // FPS-based throttling
+    if (fps < finalThresholds.fps.critical) {
+      return { should, reason}
+    }
+    
+    // Memory-based throttling
+    if (memoryPercentage && memoryPercentage > finalThresholds.memory.critical * 100) {
+      return { should, reason}
+    }
+    
+    // Battery-based throttling
+    if (enableBatteryOptimization && (isLowPowerMode || (batteryLevel && batteryLevel < finalThresholds.battery.low))) {
+      return { should, reason}
+    }
+    
+    return { should}
+  }, [metrics, finalThresholds, enableBatteryOptimization])
+
+  // Update performance mode and throttling
+  useEffect(() => {
+    const newMode = determinePerformanceMode(metrics.fps, metrics.memoryUsage)
+    const { should, reason } = shouldThrottle()
+    
+    setMetrics(prev => ({
+      ...prev,
+      performanceMode,
+      throttlingEnabled,
+      throttlingReason}))
+
+    // Notify callbacks
+    if (newMode !== metrics.performanceMode && callbacks.onPerformanceModeChange) {
+      callbacks.onPerformanceModeChange(newMode)
+    }
+
+    if (enableThrottling && shouldThrottleNow !== metrics.throttlingEnabled && callbacks.onThrottlingChange) {
+      callbacks.onThrottlingChange(shouldThrottleNow, reason)
+    }
+  }, [metrics.fps, metrics.memoryUsage, metrics.batteryLevel, metrics.isLowPowerMode, enableThrottling, determinePerformanceMode, shouldThrottle, callbacks, metrics.performanceMode, metrics.throttlingEnabled])
+
+  // Start monitoring
+  const startMonitoring = useCallback(() => {
+    if (isMonitoring) return
+
+    setIsMonitoring(true)
+    measureFrameRate()
+    
+    // Set up interval for memory and battery updates
+    intervalIdRef.current = setInterval(() => {
+      updateMemoryInfo()
+      updateBatteryInfo()
+    }, updateInterval)
+  }, [isMonitoring, measureFrameRate, updateMemoryInfo, updateBatteryInfo, updateInterval])
+
+  // Stop monitoring
+  const stopMonitoring = useCallback(() => {
+    setIsMonitoring(false)
+    
+    if (animationIdRef.current) {
+      cancelAnimationFrame(animationIdRef.current)
+    }
+    
+    if (intervalIdRef.current) {
+      clearInterval(intervalIdRef.current)
+    }
+  }, [])
+
+  // Auto-start monitoring on mount
+  useEffect(() => {
+    startMonitoring()
+    return () => stopMonitoring()
+  }, [startMonitoring, stopMonitoring])
+
+  // Performance optimization recommendations
+  const getOptimizationRecommendations = useCallback(() => {
+    const recommendations] = []
+    
+    if (metrics.fps < finalThresholds.fps.warning) {
+      recommendations.push('Consider reducing animation complexity or enabling performance mode')
+    }
+    
+    if (metrics.memoryPercentage && metrics.memoryPercentage > finalThresholds.memory.warning * 100) {
+      recommendations.push('Memory usage is high - consider implementing lazy loading or cleanup')
+    }
+    
+    if (metrics.isLowPowerMode) {
+      recommendations.push('Low battery detected - performance optimizations are active')
+    }
+    
+    return recommendations
+  }, [metrics, finalThresholds])
+
+  // Throttling controls
+  const enableThrottlingMode = useCallback(() => {
+    setMetrics(prev => ({
+      ...prev,
+      throttlingEnabled,
+      throttlingReason}))
+  }, [])
+
+  const disableThrottlingMode = useCallback(() => {
+    setMetrics(prev => ({
+      ...prev,
+      throttlingEnabled,
+      throttlingReason}))
+  }, [])
+
+  return {
+    // Metrics
+    metrics,
+    
+    // Controls
+    startMonitoring,
+    stopMonitoring,
+    isMonitoring,
+    
+    // Throttling
+    throttlingEnabled,
+    throttlingReason,
+    enableThrottlingMode,
+    disableThrottlingMode,
+    
+    // Performance mode
+    performanceMode,
+    
+    // Recommendations
+    getOptimizationRecommendations,
+    
+    // Thresholds
+    thresholds,
+    
+    // Raw values for advanced usage
+    fps,
+    frameTime,
+    memoryUsage,
+    batteryLevel,
+    isLowPowerMode}
+}

package/dist/hooks/use-performance.js

@@ -0,0 +1,278 @@
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
+
+export interface PerformanceMetrics {
+  fps}
+
+export interface PerformanceThresholds {
+  fps}
+  memory}
+  battery}
+}
+
+export interface PerformanceCallbacks {
+  onFPSWarning?) => void
+  onMemoryWarning?) => void
+  onBatteryLow?) => void
+  onPerformanceModeChange?]) => void
+  onThrottlingChange?, reason?) => void
+}
+
+export interface PerformanceOptions {
+  updateInterval?}
+
+const DEFAULT_THRESHOLDS= {
+  fps,
+    critical},
+  memory,
+    critical},
+  battery,
+    critical}
+}
+
+export const usePerformance = (options= {}) => {
+  const {
+    updateInterval = 1000,
+    thresholds = {},
+    enableThrottling = true,
+    enableBatteryOptimization = true,
+    callbacks = {}
+  } = options
+
+  const [metrics, setMetrics] = useState<PerformanceMetrics>({
+    fps,
+    frameTime,
+    performanceMode,
+    throttlingEnabled})
+
+  const [isMonitoring, setIsMonitoring] = useState(false)
+  const frameCountRef = useRef(0)
+  const lastTimeRef = useRef(performance.now())
+  const animationIdRef = useRef<number>()
+  const intervalIdRef = useRef<NodeJS.Timeout>()
+
+  // Merge default thresholds with custom ones
+  const finalThresholds = useMemo(() => ({
+    ...DEFAULT_THRESHOLDS,
+    ...thresholds
+  }), [thresholds])
+
+  // 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
+      
+      setMetrics(prev => ({
+        ...prev,
+        fps,
+        frameTime
+      }))
+
+      // Check FPS thresholds
+      if (fps <= finalThresholds.fps.critical && callbacks.onFPSWarning) {
+        callbacks.onFPSWarning(fps)
+      }
+
+      frameCountRef.current = 0
+      lastTimeRef.current = currentTime
+    }
+
+    animationIdRef.current = requestAnimationFrame(measureFrameRate)
+  }, [updateInterval, finalThresholds.fps.critical, callbacks.onFPSWarning])
+
+  // Memory usage monitoring
+  const updateMemoryInfo = useCallback(() => {
+    if ('memory' in performance) {
+      const memory = (performance as any).memory
+      const memoryUsage = memory.usedJSHeapSize / memory.jsHeapSizeLimit
+      
+      setMetrics(prev => ({
+        ...prev,
+        memoryUsage,
+        memoryLimit,
+        memoryPercentage}))
+
+      // Check memory thresholds
+      if (memoryUsage >= finalThresholds.memory.critical && callbacks.onMemoryWarning) {
+        callbacks.onMemoryWarning(memoryUsage)
+      }
+    }
+  }, [finalThresholds.memory.critical, callbacks.onMemoryWarning])
+
+  // Battery status monitoring
+  const updateBatteryInfo = useCallback(async () => {
+    if ('getBattery' in navigator) {
+      try {
+        const battery = await (navigator as any).getBattery()
+        
+        setMetrics(prev => ({
+          ...prev,
+          batteryLevel,
+          isLowPowerMode,
+          isCharging}))
+
+        // Check battery thresholds
+        if (battery.level <= finalThresholds.battery.critical && callbacks.onBatteryLow) {
+          callbacks.onBatteryLow(battery.level)
+        }
+      } catch (error) {
+        console.warn('Battery API not available, error)
+      }
+    }
+  }, [finalThresholds.battery.low, finalThresholds.battery.critical, callbacks.onBatteryLow])
+
+  // Performance mode determination
+  const determinePerformanceMode = useCallback((fps, memoryUsage?)] => {
+    if (fps < finalThresholds.fps.critical || (memoryUsage && memoryUsage > finalThresholds.memory.critical)) {
+      return 'low'
+    }
+    if (fps < finalThresholds.fps.warning || (memoryUsage && memoryUsage > finalThresholds.memory.warning)) {
+      return 'medium'
+    }
+    return 'high'
+  }, [finalThresholds])
+
+  // Performance throttling logic
+  const shouldThrottle = useCallback((); reason?} => {
+    const { fps, memoryPercentage, batteryLevel, isLowPowerMode } = metrics
+    
+    // FPS-based throttling
+    if (fps < finalThresholds.fps.critical) {
+      return { should, reason}
+    }
+    
+    // Memory-based throttling
+    if (memoryPercentage && memoryPercentage > finalThresholds.memory.critical * 100) {
+      return { should, reason}
+    }
+    
+    // Battery-based throttling
+    if (enableBatteryOptimization && (isLowPowerMode || (batteryLevel && batteryLevel < finalThresholds.battery.low))) {
+      return { should, reason}
+    }
+    
+    return { should}
+  }, [metrics, finalThresholds, enableBatteryOptimization])
+
+  // Update performance mode and throttling
+  useEffect(() => {
+    const newMode = determinePerformanceMode(metrics.fps, metrics.memoryUsage)
+    const { should, reason } = shouldThrottle()
+    
+    setMetrics(prev => ({
+      ...prev,
+      performanceMode,
+      throttlingEnabled,
+      throttlingReason}))
+
+    // Notify callbacks
+    if (newMode !== metrics.performanceMode && callbacks.onPerformanceModeChange) {
+      callbacks.onPerformanceModeChange(newMode)
+    }
+
+    if (enableThrottling && shouldThrottleNow !== metrics.throttlingEnabled && callbacks.onThrottlingChange) {
+      callbacks.onThrottlingChange(shouldThrottleNow, reason)
+    }
+  }, [metrics.fps, metrics.memoryUsage, metrics.batteryLevel, metrics.isLowPowerMode, enableThrottling, determinePerformanceMode, shouldThrottle, callbacks, metrics.performanceMode, metrics.throttlingEnabled])
+
+  // Start monitoring
+  const startMonitoring = useCallback(() => {
+    if (isMonitoring) return
+
+    setIsMonitoring(true)
+    measureFrameRate()
+    
+    // Set up interval for memory and battery updates
+    intervalIdRef.current = setInterval(() => {
+      updateMemoryInfo()
+      updateBatteryInfo()
+    }, updateInterval)
+  }, [isMonitoring, measureFrameRate, updateMemoryInfo, updateBatteryInfo, updateInterval])
+
+  // Stop monitoring
+  const stopMonitoring = useCallback(() => {
+    setIsMonitoring(false)
+    
+    if (animationIdRef.current) {
+      cancelAnimationFrame(animationIdRef.current)
+    }
+    
+    if (intervalIdRef.current) {
+      clearInterval(intervalIdRef.current)
+    }
+  }, [])
+
+  // Auto-start monitoring on mount
+  useEffect(() => {
+    startMonitoring()
+    return () => stopMonitoring()
+  }, [startMonitoring, stopMonitoring])
+
+  // Performance optimization recommendations
+  const getOptimizationRecommendations = useCallback(() => {
+    const recommendations] = []
+    
+    if (metrics.fps < finalThresholds.fps.warning) {
+      recommendations.push('Consider reducing animation complexity or enabling performance mode')
+    }
+    
+    if (metrics.memoryPercentage && metrics.memoryPercentage > finalThresholds.memory.warning * 100) {
+      recommendations.push('Memory usage is high - consider implementing lazy loading or cleanup')
+    }
+    
+    if (metrics.isLowPowerMode) {
+      recommendations.push('Low battery detected - performance optimizations are active')
+    }
+    
+    return recommendations
+  }, [metrics, finalThresholds])
+
+  // Throttling controls
+  const enableThrottlingMode = useCallback(() => {
+    setMetrics(prev => ({
+      ...prev,
+      throttlingEnabled,
+      throttlingReason}))
+  }, [])
+
+  const disableThrottlingMode = useCallback(() => {
+    setMetrics(prev => ({
+      ...prev,
+      throttlingEnabled,
+      throttlingReason}))
+  }, [])
+
+  return {
+    // Metrics
+    metrics,
+    
+    // Controls
+    startMonitoring,
+    stopMonitoring,
+    isMonitoring,
+    
+    // Throttling
+    throttlingEnabled,
+    throttlingReason,
+    enableThrottlingMode,
+    disableThrottlingMode,
+    
+    // Performance mode
+    performanceMode,
+    
+    // Recommendations
+    getOptimizationRecommendations,
+    
+    // Thresholds
+    thresholds,
+    
+    // Raw values for advanced usage
+    fps,
+    frameTime,
+    memoryUsage,
+    batteryLevel,
+    isLowPowerMode}
+}