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

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

@@ -1,21 +1,34 @@
 import React, { useState, useCallback, useRef, useEffect, ReactNode, ComponentType } from 'react'
 
 export interface ComponentPerformanceConfig {
-  enableMemoization?}
+  enableMemoization?: boolean
+  enableLazyLoading?: boolean
+  enableVirtualization?: boolean
+  enablePerformanceMonitoring?: boolean
+  enableAutoOptimization?: boolean
+  performanceThreshold?: number
+  memoizationThreshold?: number
+  virtualizationThreshold?: number
+}
 
 export interface PerformanceMetrics {
-  renderTime}
+  renderTime: number
+  memoryUsage: number
+  reRenderCount: number
+  optimizationLevel: 'none' | 'low' | 'medium' | 'high'
+  lastOptimization: string
+}
 
 export interface ComponentPerformanceCallbacks {
-  onPerformanceWarning?) => void
-  onOptimizationApplied?, component) => void
-  onPerformanceImproved?) => void
-  onMemoryWarning?) => void
+  onPerformanceWarning?: (metrics: PerformanceMetrics) => void
+  onOptimizationApplied?: (type: string, component: string) => void
+  onPerformanceImproved?: (improvement: number) => void
+  onMemoryWarning?: (usage: number) => void
 }
 
 export const useComponentPerformance = (
-  config= {},
-  callbacks= {}
+  config: ComponentPerformanceConfig = {},
+  callbacks: ComponentPerformanceCallbacks = {}
 ) => {
   const {
     enableMemoization = true,
@@ -29,11 +42,12 @@ export const useComponentPerformance = (
   } = config
 
   const [metrics, setMetrics] = useState<PerformanceMetrics>({
-    renderTime,
-    memoryUsage,
-    reRenderCount,
-    optimizationLevel,
-    lastOptimization})
+    renderTime: 0,
+    memoryUsage: 0,
+    reRenderCount: 0,
+    optimizationLevel: 'none',
+    lastOptimization: 'none'
+  })
 
   const [isOptimizing, setIsOptimizing] = useState(false)
   const [optimizations, setOptimizations] = useState<string[]>([])
@@ -58,7 +72,8 @@ export const useComponentPerformance = (
       setMetrics(prev => ({
         ...prev,
         renderTime,
-        reRenderCount}))
+        reRenderCount: renderCountRef.current
+      }))
       
       // Check if optimization is needed
       if (renderTime > performanceThreshold && enableAutoOptimization) {
@@ -69,10 +84,10 @@ export const useComponentPerformance = (
 
   // Memoization optimization
   const memoizeValue = useCallback(<T>(
-    key,
-    value,
-    dependencies]
-  )=> {
+    key: string,
+    value: T,
+    dependencies: any[]
+  ): T => {
     if (!enableMemoization) return value
     
     const dependencyKey = JSON.stringify(dependencies)
@@ -93,8 +108,8 @@ export const useComponentPerformance = (
 
   // Lazy loading optimization
   const lazyLoadComponent = useCallback((
-    componentId,
-    componentLoader) => Promise<{ default}>
+    componentId: string,
+    componentLoader: () => Promise<{ default: ComponentType<any> }>
   ) => {
     if (!enableLazyLoading) return null
     
@@ -114,13 +129,13 @@ export const useComponentPerformance = (
 
   // Virtualization optimization
   const createVirtualizedList = useCallback(<T>(
-    items],
-    itemHeight,
-    containerHeight,
-    renderItem, index) => ReactNode
+    items: T[],
+    itemHeight: number,
+    containerHeight: number,
+    renderItem: (item: T, index: number) => ReactNode
   ) => {
     if (!enableVirtualization || items.length < virtualizationThreshold) {
-      return { type, items, index) => renderItem(item, index)) }
+      return { type: 'standard', items: items.map((item, index) => renderItem(item, index)) }
     }
     
     const visibleCount = Math.ceil(containerHeight / itemHeight)
@@ -136,8 +151,8 @@ export const useComponentPerformance = (
     callbacks.onOptimizationApplied?.('virtualization', 'VirtualizedList')
     
     return {
-      type,
-      visibleItems, index) => renderItem(item, startIndex + index)),
+      type: 'virtualized',
+      visibleItems: visibleItems.map((item, index) => renderItem(item, startIndex + index)),
       totalHeight,
       offsetY,
       startIndex,
@@ -146,8 +161,8 @@ export const useComponentPerformance = (
   }, [enableVirtualization, virtualizationThreshold, callbacks])
 
   // Auto-optimization suggestions
-  const suggestOptimizations = useCallback((renderTime) => {
-    const suggestions] = []
+  const suggestOptimizations = useCallback((renderTime: number) => {
+    const suggestions: string[] = []
     
     if (renderTime > memoizationThreshold) {
       suggestions.push('Consider memoization for expensive computations')
@@ -171,10 +186,10 @@ export const useComponentPerformance = (
   // Performance analysis
   const analyzePerformance = useCallback(() => {
     const analysis = {
-      isOptimized== 'none',
-      needsOptimization,
-      optimizationScore, 100 - (metrics.renderTime / performanceThreshold) * 100),
-      recommendations] as string[]
+      isOptimized: metrics.optimizationLevel !== 'none',
+      needsOptimization: metrics.renderTime > performanceThreshold,
+      optimizationScore: Math.max(0, 100 - (metrics.renderTime / performanceThreshold) * 100),
+      recommendations: [] as string[]
     }
     
     if (metrics.renderTime > performanceThreshold) {
@@ -209,12 +224,12 @@ export const useComponentPerformance = (
         callbacks.onMemoryWarning?.(memoryUsage)
       }
     } catch (error) {
-      console.warn('Memory usage check failed, error)
+      console.warn('Memory usage check failed:', error)
     }
   }, [enablePerformanceMonitoring, callbacks])
 
   // Performance improvement tracking
-  const trackImprovement = useCallback((before, after) => {
+  const trackImprovement = useCallback((before: number, after: number) => {
     const improvement = ((before - after) / before) * 100
     
     if (improvement > 0) {
@@ -222,14 +237,14 @@ export const useComponentPerformance = (
       
       setMetrics(prev => ({
         ...prev,
-        optimizationLevel,
-        lastOptimization)}%`
+        optimizationLevel: improvement > 50 ? 'high' : improvement > 25 ? 'medium' : 'low',
+        lastOptimization: `Improved by ${improvement.toFixed(1)}%`
       }))
     }
   }, [callbacks])
 
   // Auto-optimization
-  const autoOptimize = useCallback((componentId) => {
+  const autoOptimize = useCallback((componentId: string) => {
     if (!enableAutoOptimization) return
     
     setIsOptimizing(true)
@@ -251,9 +266,9 @@ export const useComponentPerformance = (
 
   // Performance benchmarking
   const benchmarkComponent = useCallback((
-    componentId,
-    benchmarkFn) => void,
-    iterations= 100
+    componentId: string,
+    benchmarkFn: () => void,
+    iterations: number = 100
   ) => {
     const startTime = performance.now()
     
@@ -264,7 +279,7 @@ export const useComponentPerformance = (
     const endTime = performance.now()
     const averageTime = (endTime - startTime) / iterations
     
-    const benchmark = `Benchmark} - ${averageTime.toFixed(2)}ms average`
+    const benchmark = `Benchmark: ${componentId} - ${averageTime.toFixed(2)}ms average`
     setOptimizations(prev => [...prev, benchmark])
     
     return averageTime
@@ -285,7 +300,7 @@ export const useComponentPerformance = (
         }
       }
     } catch (error) {
-      console.warn('Performance monitoring initialization failed, error)
+      console.warn('Performance monitoring initialization failed:', error)
     }
   }, [enablePerformanceMonitoring, checkMemoryUsage])
 
@@ -319,10 +334,10 @@ export const useComponentPerformance = (
     trackImprovement,
     
     // Utility functions
-    isPerformanceOptimized) => metrics.optimizationLevel !== 'none',
-    getOptimizationLevel) => metrics.optimizationLevel,
-    getPerformanceScore) => Math.max(0, 100 - (metrics.renderTime / performanceThreshold) * 100),
-    clearOptimizations) => setOptimizations([])
+    isPerformanceOptimized: () => metrics.optimizationLevel !== 'none',
+    getOptimizationLevel: () => metrics.optimizationLevel,
+    getPerformanceScore: () => Math.max(0, 100 - (metrics.renderTime / performanceThreshold) * 100),
+    clearOptimizations: () => setOptimizations([])
   }
 }
 

package/dist/hooks/use-device-loading-states.esm.js

@@ -1,51 +1,76 @@
 import { useState, useCallback, useRef, useEffect } from 'react'
 
 export interface DeviceLoadingStatesConfig {
-  enableMobileStates?}
+  enableMobileStates?: boolean
+  enableTabletStates?: boolean
+  enableDesktopStates?: boolean
+  enableAdaptiveBehavior?: boolean
+  enableOrientationSupport?: boolean
+  enablePerformanceAdaptation?: boolean
+}
 
 export interface LoadingState {
-  id}
+  id: string
+  name: string
+  type: 'skeleton' | 'spinner' | 'progress' | 'skeleton-spinner' | 'custom'
+  duration: number
+  complexity: 'low' | 'medium' | 'high'
+  mobileOptimized: boolean
+  tabletOptimized: boolean
+  desktopOptimized: boolean
+  orientation: 'portrait' | 'landscape' | 'both'
+  performance: 'low' | 'medium' | 'high'
+}
 
 export interface DeviceSpecificState {
-  deviceType]
-  activeState}
+  deviceType: 'mobile' | 'tablet' | 'desktop'
+  orientation: 'portrait' | 'landscape'
+  screenSize: 'small' | 'medium' | 'large'
+  performanceLevel: 'low' | 'medium' | 'high'
+  batteryLevel: 'critical' | 'low' | 'medium' | 'high'
+  loadingStates: LoadingState[]
+  activeState: LoadingState | null
+  adaptiveBehavior: boolean
+}
 
 export interface DeviceLoadingStatesCallbacks {
-  onLoadingStateChanged?) => void
-  onDeviceStateChanged?) => void
-  onAdaptiveBehaviorEnabled?) => void
-  onPerformanceAdapted?) => void
+  onLoadingStateChanged?: (state: LoadingState) => void
+  onDeviceStateChanged?: (deviceState: DeviceSpecificState) => void
+  onAdaptiveBehaviorEnabled?: (behavior: string) => void
+  onPerformanceAdapted?: (adaptation: string) => void
 }
 
 export const useDeviceLoadingStates = (
-  config= {},
-  callbacks= {}
+  config: DeviceLoadingStatesConfig = {},
+  callbacks: DeviceLoadingStatesCallbacks = {}
 ) => {
   const {
     enableMobileStates = true,
     enableTabletStates = true,
     enableDesktopStates = true,
-    enableAdaptiveBehavior= true,
+    enableAdaptiveBehavior: enableAdaptiveBehaviorConfig = true,
     enablePerformanceAdaptation = true
   } = config
 
   const [deviceState, setDeviceState] = useState<DeviceSpecificState>({
-    deviceType,
-    orientation,
-    screenSize,
-    performanceLevel,
-    batteryLevel,
-    loadingStates],
-    activeState,
-    adaptiveBehavior})
+    deviceType: 'desktop',
+    orientation: 'landscape',
+    screenSize: 'large',
+    performanceLevel: 'high',
+    batteryLevel: 'high',
+    loadingStates: [],
+    activeState: null,
+    adaptiveBehavior: false
+  })
 
   const [isAdapting, setIsAdapting] = useState(false)
   const [adaptations, setAdaptations] = useState<string[]>([])
   const [performanceMetrics, setPerformanceMetrics] = useState({
-    frameRate,
-    renderTime,
-    memoryUsage,
-    batteryDrain})
+    frameRate: 60,
+    renderTime: 0,
+    memoryUsage: 0,
+    batteryDrain: 'low'
+  })
 
 
   const performanceTimerRef = useRef<number | null>(null)
@@ -57,7 +82,11 @@ export const useDeviceLoadingStates = (
     const height = window.innerHeight
     const isPortrait = height > width
     
-    let deviceType= 768) {
+    let deviceType: 'mobile' | 'tablet' | 'desktop'
+    let screenSize: 'small' | 'medium' | 'large'
+    let performanceLevel: 'low' | 'medium' | 'high'
+    
+    if (width <= 768) {
       deviceType = 'mobile'
       screenSize = 'small'
       performanceLevel = 'low'
@@ -71,10 +100,10 @@ export const useDeviceLoadingStates = (
       performanceLevel = 'high'
     }
 
-    const newDeviceState= {
+    const newDeviceState: DeviceSpecificState = {
       ...deviceState,
       deviceType,
-      orientation,
+      orientation: isPortrait ? 'portrait' : 'landscape',
       screenSize,
       performanceLevel
     }
@@ -87,17 +116,17 @@ export const useDeviceLoadingStates = (
 
   // Create loading states
   const createLoadingState = useCallback((
-    state, 'id'>
+    state: Omit<LoadingState, 'id'>
   ) => {
     const id = `loading-state-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
-    const newState= {
+    const newState: LoadingState = {
       ...state,
       id
     }
 
     setDeviceState(prev => ({
       ...prev,
-      loadingStates, newState]
+      loadingStates: [...prev.loadingStates, newState]
     }))
 
     return id
@@ -105,101 +134,109 @@ export const useDeviceLoadingStates = (
 
   // Generate device-specific loading states
   const generateDeviceLoadingStates = useCallback(() => {
-    const mobileStates] = [
+    const mobileStates: LoadingState[] = [
       {
-        id,
-        name,
-        type,
-        duration,
-        complexity,
-        mobileOptimized,
-        tabletOptimized,
-        desktopOptimized,
-        orientation,
-        performance},
+        id: 'mobile-skeleton',
+        name: 'Mobile Skeleton',
+        type: 'skeleton',
+        duration: 1000,
+        complexity: 'low',
+        mobileOptimized: true,
+        tabletOptimized: false,
+        desktopOptimized: false,
+        orientation: 'both',
+        performance: 'low'
+      },
       {
-        id,
-        name,
-        type,
-        duration,
-        complexity,
-        mobileOptimized,
-        tabletOptimized,
-        desktopOptimized,
-        orientation,
-        performance}
+        id: 'mobile-spinner',
+        name: 'Mobile Spinner',
+        type: 'spinner',
+        duration: 800,
+        complexity: 'low',
+        mobileOptimized: true,
+        tabletOptimized: false,
+        desktopOptimized: false,
+        orientation: 'both',
+        performance: 'low'
+      }
     ]
 
-    const tabletStates] = [
+    const tabletStates: LoadingState[] = [
       {
-        id,
-        name,
-        type,
-        duration,
-        complexity,
-        mobileOptimized,
-        tabletOptimized,
-        desktopOptimized,
-        orientation,
-        performance},
+        id: 'tablet-skeleton-spinner',
+        name: 'Tablet Skeleton + Spinner',
+        type: 'skeleton-spinner',
+        duration: 1200,
+        complexity: 'medium',
+        mobileOptimized: false,
+        tabletOptimized: true,
+        desktopOptimized: false,
+        orientation: 'both',
+        performance: 'medium'
+      },
       {
-        id,
-        name,
-        type,
-        duration,
-        complexity,
-        mobileOptimized,
-        tabletOptimized,
-        desktopOptimized,
-        orientation,
-        performance}
+        id: 'tablet-progress',
+        name: 'Tablet Progress',
+        type: 'progress',
+        duration: 1500,
+        complexity: 'medium',
+        mobileOptimized: false,
+        tabletOptimized: true,
+        desktopOptimized: false,
+        orientation: 'both',
+        performance: 'medium'
+      }
     ]
 
-    const desktopStates] = [
+    const desktopStates: LoadingState[] = [
       {
-        id,
-        name,
-        type,
-        duration,
-        complexity,
-        mobileOptimized,
-        tabletOptimized,
-        desktopOptimized,
-        orientation,
-        performance},
+        id: 'desktop-skeleton',
+        name: 'Desktop Skeleton',
+        type: 'skeleton',
+        duration: 2000,
+        complexity: 'high',
+        mobileOptimized: false,
+        tabletOptimized: false,
+        desktopOptimized: true,
+        orientation: 'both',
+        performance: 'high'
+      },
       {
-        id,
-        name,
-        type,
-        duration,
-        complexity,
-        mobileOptimized,
-        tabletOptimized,
-        desktopOptimized,
-        orientation,
-        performance}
+        id: 'desktop-custom',
+        name: 'Desktop Custom',
+        type: 'custom',
+        duration: 2500,
+        complexity: 'high',
+        mobileOptimized: false,
+        tabletOptimized: false,
+        desktopOptimized: true,
+        orientation: 'both',
+        performance: 'high'
+      }
     ]
 
     const allStates = [
-      ...(enableMobileStates ? mobileStates ]),
-      ...(enableTabletStates ? tabletStates ]),
-      ...(enableDesktopStates ? desktopStates ])
+      ...(enableMobileStates ? mobileStates : []),
+      ...(enableTabletStates ? tabletStates : []),
+      ...(enableDesktopStates ? desktopStates : [])
     ]
 
     setDeviceState(prev => ({
       ...prev,
-      loadingStates}))
+      loadingStates: allStates
+    }))
 
     return allStates
   }, [enableMobileStates, enableTabletStates, enableDesktopStates])
 
   // Set active loading state
-  const setActiveLoadingState = useCallback((stateId) => {
+  const setActiveLoadingState = useCallback((stateId: string) => {
     const state = deviceState.loadingStates.find(s => s.id === stateId)
     if (state) {
       setDeviceState(prev => ({
         ...prev,
-        activeState}))
+        activeState: state
+      }))
       callbacks.onLoadingStateChanged?.(state)
     }
   }, [deviceState.loadingStates, callbacks])
@@ -221,7 +258,8 @@ export const useDeviceLoadingStates = (
       setAdaptations(prev => [...prev, ...adaptiveFeatures])
       setDeviceState(prev => ({
         ...prev,
-        adaptiveBehavior}))
+        adaptiveBehavior: true
+      }))
       setIsAdapting(false)
       
       adaptiveFeatures.forEach(feature => {
@@ -278,7 +316,7 @@ export const useDeviceLoadingStates = (
         
         setPerformanceMetrics(prev => ({
           ...prev,
-          frameRate,
+          frameRate: fps,
           renderTime
         }))
         
@@ -308,7 +346,8 @@ export const useDeviceLoadingStates = (
           const battery = await (navigator as any).getBattery()
           const level = battery.level
           
-          let batteryLevel= 0.1) batteryLevel = 'critical'
+          let batteryLevel: 'critical' | 'low' | 'medium' | 'high'
+          if (level <= 0.1) batteryLevel = 'critical'
           else if (level <= 0.3) batteryLevel = 'low'
           else if (level <= 0.7) batteryLevel = 'medium'
           else batteryLevel = 'high'
@@ -319,7 +358,7 @@ export const useDeviceLoadingStates = (
           }))
         }
       } catch (error) {
-        console.warn('Battery monitoring failed, error)
+        console.warn('Battery monitoring failed:', error)
       }
     }
     
@@ -401,15 +440,19 @@ export const useDeviceLoadingStates = (
     autoAdapt,
     
     // Utility functions
-    isMobileDevice) => deviceState.deviceType === 'mobile',
-    isTabletDevice) => deviceState.deviceType === 'tablet',
-    isDesktopDevice) => deviceState.deviceType === 'desktop',
-    getActiveState) => deviceState.activeState,
-    getLoadingStatesForDevice) => deviceState.loadingStates.filter(state => {
+    isMobileDevice: () => deviceState.deviceType === 'mobile',
+    isTabletDevice: () => deviceState.deviceType === 'tablet',
+    isDesktopDevice: () => deviceState.deviceType === 'desktop',
+    getActiveState: () => deviceState.activeState,
+    getLoadingStatesForDevice: () => deviceState.loadingStates.filter(state => {
       switch (deviceState.deviceType) {
-        case 'mobile'}
+        case 'mobile': return state.mobileOptimized
+        case 'tablet': return state.tabletOptimized
+        case 'desktop': return state.desktopOptimized
+        default: return false
+      }
     }),
-    clearAdaptations) => setAdaptations([])
+    clearAdaptations: () => setAdaptations([])
   }
 }