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

package/dist/hooks/use-performance.js

@@ -1,35 +1,66 @@
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
 
 export interface PerformanceMetrics {
-  fps}
+  fps: number
+  frameTime: number
+  memoryUsage?: number
+  memoryLimit?: number
+  memoryPercentage?: number
+  batteryLevel?: number
+  isLowPowerMode?: boolean
+  isCharging?: boolean
+  performanceMode: 'high' | 'medium' | 'low'
+  throttlingEnabled: boolean
+  throttlingReason?: string
+}
 
 export interface PerformanceThresholds {
-  fps}
-  memory}
-  battery}
+  fps: {
+    warning: number
+    critical: number
+  }
+  memory: {
+    warning: number
+    critical: number
+  }
+  battery: {
+    low: number
+    critical: number
+  }
 }
 
 export interface PerformanceCallbacks {
-  onFPSWarning?) => void
-  onMemoryWarning?) => void
-  onBatteryLow?) => void
-  onPerformanceModeChange?]) => void
-  onThrottlingChange?, reason?) => void
+  onFPSWarning?: (fps: number) => void
+  onMemoryWarning?: (usage: number) => void
+  onBatteryLow?: (level: number) => void
+  onPerformanceModeChange?: (mode: PerformanceMetrics['performanceMode']) => void
+  onThrottlingChange?: (enabled: boolean, reason?: string) => void
 }
 
 export interface PerformanceOptions {
-  updateInterval?}
+  updateInterval?: number
+  thresholds?: Partial<PerformanceThresholds>
+  enableThrottling?: boolean
+  enableBatteryOptimization?: boolean
+  callbacks?: PerformanceCallbacks
+}
 
-const DEFAULT_THRESHOLDS= {
-  fps,
-    critical},
-  memory,
-    critical},
-  battery,
-    critical}
+const DEFAULT_THRESHOLDS: PerformanceThresholds = {
+  fps: {
+    warning: 45,
+    critical: 30
+  },
+  memory: {
+    warning: 0.7,
+    critical: 0.85
+  },
+  battery: {
+    low: 0.3,
+    critical: 0.15
+  }
 }
 
-export const usePerformance = (options= {}) => {
+export const usePerformance = (options: PerformanceOptions = {}) => {
   const {
     updateInterval = 1000,
     thresholds = {},
@@ -39,10 +70,11 @@ export const usePerformance = (options= {}) => {
   } = options
 
   const [metrics, setMetrics] = useState<PerformanceMetrics>({
-    fps,
-    frameTime,
-    performanceMode,
-    throttlingEnabled})
+    fps: 60,
+    frameTime: 16.67,
+    performanceMode: 'high',
+    throttlingEnabled: false
+  })
 
   const [isMonitoring, setIsMonitoring] = useState(false)
   const frameCountRef = useRef(0)
@@ -92,8 +124,9 @@ export const usePerformance = (options= {}) => {
       setMetrics(prev => ({
         ...prev,
         memoryUsage,
-        memoryLimit,
-        memoryPercentage}))
+        memoryLimit: memory.jsHeapSizeLimit,
+        memoryPercentage: memoryUsage * 100
+      }))
 
       // Check memory thresholds
       if (memoryUsage >= finalThresholds.memory.critical && callbacks.onMemoryWarning) {
@@ -110,22 +143,23 @@ export const usePerformance = (options= {}) => {
         
         setMetrics(prev => ({
           ...prev,
-          batteryLevel,
-          isLowPowerMode,
-          isCharging}))
+          batteryLevel: battery.level,
+          isLowPowerMode: battery.level < finalThresholds.battery.low,
+          isCharging: battery.charging
+        }))
 
         // Check battery thresholds
         if (battery.level <= finalThresholds.battery.critical && callbacks.onBatteryLow) {
           callbacks.onBatteryLow(battery.level)
         }
       } catch (error) {
-        console.warn('Battery API not available, error)
+        console.warn('Battery API not available:', error)
       }
     }
   }, [finalThresholds.battery.low, finalThresholds.battery.critical, callbacks.onBatteryLow])
 
   // Performance mode determination
-  const determinePerformanceMode = useCallback((fps, memoryUsage?)] => {
+  const determinePerformanceMode = useCallback((fps: number, memoryUsage?: number): PerformanceMetrics['performanceMode'] => {
     if (fps < finalThresholds.fps.critical || (memoryUsage && memoryUsage > finalThresholds.memory.critical)) {
       return 'low'
     }
@@ -136,37 +170,38 @@ export const usePerformance = (options= {}) => {
   }, [finalThresholds])
 
   // Performance throttling logic
-  const shouldThrottle = useCallback((); reason?} => {
+  const shouldThrottle = useCallback((): { should: boolean; reason?: string } => {
     const { fps, memoryPercentage, batteryLevel, isLowPowerMode } = metrics
     
     // FPS-based throttling
     if (fps < finalThresholds.fps.critical) {
-      return { should, reason}
+      return { should: true, reason: 'Low FPS' }
     }
     
     // Memory-based throttling
     if (memoryPercentage && memoryPercentage > finalThresholds.memory.critical * 100) {
-      return { should, reason}
+      return { should: true, reason: 'High memory usage' }
     }
     
     // Battery-based throttling
     if (enableBatteryOptimization && (isLowPowerMode || (batteryLevel && batteryLevel < finalThresholds.battery.low))) {
-      return { should, reason}
+      return { should: true, reason: 'Low battery' }
     }
     
-    return { should}
+    return { should: false }
   }, [metrics, finalThresholds, enableBatteryOptimization])
 
   // Update performance mode and throttling
   useEffect(() => {
     const newMode = determinePerformanceMode(metrics.fps, metrics.memoryUsage)
-    const { should, reason } = shouldThrottle()
+    const { should: shouldThrottleNow, reason } = shouldThrottle()
     
     setMetrics(prev => ({
       ...prev,
-      performanceMode,
-      throttlingEnabled,
-      throttlingReason}))
+      performanceMode: newMode,
+      throttlingEnabled: enableThrottling && shouldThrottleNow,
+      throttlingReason: reason
+    }))
 
     // Notify callbacks
     if (newMode !== metrics.performanceMode && callbacks.onPerformanceModeChange) {
@@ -213,7 +248,7 @@ export const usePerformance = (options= {}) => {
 
   // Performance optimization recommendations
   const getOptimizationRecommendations = useCallback(() => {
-    const recommendations] = []
+    const recommendations: string[] = []
     
     if (metrics.fps < finalThresholds.fps.warning) {
       recommendations.push('Consider reducing animation complexity or enabling performance mode')
@@ -234,15 +269,17 @@ export const usePerformance = (options= {}) => {
   const enableThrottlingMode = useCallback(() => {
     setMetrics(prev => ({
       ...prev,
-      throttlingEnabled,
-      throttlingReason}))
+      throttlingEnabled: true,
+      throttlingReason: 'Manual override'
+    }))
   }, [])
 
   const disableThrottlingMode = useCallback(() => {
     setMetrics(prev => ({
       ...prev,
-      throttlingEnabled,
-      throttlingReason}))
+      throttlingEnabled: false,
+      throttlingReason: undefined
+    }))
   }, [])
 
   return {
@@ -255,24 +292,25 @@ export const usePerformance = (options= {}) => {
     isMonitoring,
     
     // Throttling
-    throttlingEnabled,
-    throttlingReason,
+    throttlingEnabled: metrics.throttlingEnabled,
+    throttlingReason: metrics.throttlingReason,
     enableThrottlingMode,
     disableThrottlingMode,
     
     // Performance mode
-    performanceMode,
+    performanceMode: metrics.performanceMode,
     
     // Recommendations
     getOptimizationRecommendations,
     
     // Thresholds
-    thresholds,
+    thresholds: finalThresholds,
     
     // Raw values for advanced usage
-    fps,
-    frameTime,
-    memoryUsage,
-    batteryLevel,
-    isLowPowerMode}
+    fps: metrics.fps,
+    frameTime: metrics.frameTime,
+    memoryUsage: metrics.memoryUsage,
+    batteryLevel: metrics.batteryLevel,
+    isLowPowerMode: metrics.isLowPowerMode
+  }
 }

package/dist/hooks/use-reusable-architecture.esm.js

@@ -1,40 +1,62 @@
 import { useState, useCallback, useEffect, ComponentType, CSSProperties } from 'react'
 
 export interface ReusableArchitectureConfig {
-  enableComponentComposition?}
+  enableComponentComposition?: boolean
+  enablePatternSharing?: boolean
+  enableStyleSharing?: boolean
+  enableBehaviorSharing?: boolean
+  enableTemplateSystem?: boolean
+  enableComponentRegistry?: boolean
+}
 
 export interface ComponentTemplate {
-  id, any>
-  styles]
-  patterns]
+  id: string
+  name: string
+  component: ComponentType<any>
+  props: Record<string, any>
+  styles: CSSProperties
+  behaviors: string[]
+  patterns: string[]
 }
 
 export interface SharedPattern {
-  id]
-  category}
+  id: string
+  name: string
+  description: string
+  implementation: string
+  usage: string[]
+  category: 'composition' | 'styling' | 'behavior' | 'performance'
+}
 
 export interface SharedStyle {
-  id, string>
-  breakpoints, string>
-  usage]
+  id: string
+  name: string
+  css: string
+  variables: Record<string, string>
+  breakpoints: Record<string, string>
+  usage: string[]
 }
 
 export interface SharedBehavior {
-  id]
-  usage]
+  id: string
+  name: string
+  description: string
+  hook: string
+  dependencies: string[]
+  usage: string[]
 }
 
 export interface ReusableArchitectureCallbacks {
-  onTemplateCreated?) => void
-  onPatternShared?) => void
-  onStyleShared?) => void
-  onBehaviorShared?) => void
-  onArchitectureOptimized?) => void
+  onTemplateCreated?: (template: ComponentTemplate) => void
+  onPatternShared?: (pattern: SharedPattern) => void
+  onStyleShared?: (style: SharedStyle) => void
+  onBehaviorShared?: (behavior: SharedBehavior) => void
+  onArchitectureOptimized?: (optimization: string) => void
 }
 
 export const useReusableArchitecture = (
-  config= {},
-  callbacks= {}
+  config: ReusableArchitectureConfig = {},
+  callbacks: ReusableArchitectureCallbacks = {}
 ) => {
   const {
     enableComponentComposition = true,
@@ -54,8 +76,8 @@ export const useReusableArchitecture = (
 
   // Component composition
   const composeComponent = useCallback((
-    baseComponent,
-    enhancements) => ComponentType<any>>
+    baseComponent: ComponentType<any>,
+    enhancements: Array<(Component: ComponentType<any>) => ComponentType<any>>
   ) => {
     if (!enableComponentComposition) return baseComponent
 
@@ -74,12 +96,12 @@ export const useReusableArchitecture = (
 
   // Template system
   const createTemplate = useCallback((
-    template, 'id'>
+    template: Omit<ComponentTemplate, 'id'>
   ) => {
     if (!enableTemplateSystem) return null
 
     const id = `template-${Date.now()}`
-    const newTemplate= {
+    const newTemplate: ComponentTemplate = {
       ...template,
       id
     }
@@ -92,13 +114,14 @@ export const useReusableArchitecture = (
     return id
   }, [enableTemplateSystem, templates, callbacks])
 
-  const getTemplate = useCallback((id) => {
+  const getTemplate = useCallback((id: string) => {
     return templates.get(id)
   }, [templates])
 
   const updateTemplate = useCallback((
-    id,
-    updates) => {
+    id: string,
+    updates: Partial<ComponentTemplate>
+  ) => {
     const template = templates.get(id)
     if (!template) return false
     
@@ -109,7 +132,7 @@ export const useReusableArchitecture = (
     return true
   }, [templates])
 
-  const deleteTemplate = useCallback((id) => {
+  const deleteTemplate = useCallback((id: string) => {
     const deleted = templates.delete(id)
     if (deleted) {
       setTemplates(new Map(templates))
@@ -119,12 +142,12 @@ export const useReusableArchitecture = (
 
   // Pattern sharing
   const sharePattern = useCallback((
-    pattern, 'id'>
+    pattern: Omit<SharedPattern, 'id'>
   ) => {
     if (!enablePatternSharing) return null
 
     const id = `pattern-${Date.now()}`
-    const newPattern= {
+    const newPattern: SharedPattern = {
       ...pattern,
       id
     }
@@ -137,22 +160,22 @@ export const useReusableArchitecture = (
     return id
   }, [enablePatternSharing, sharedPatterns, callbacks])
 
-  const getPattern = useCallback((id) => {
+  const getPattern = useCallback((id: string) => {
     return sharedPatterns.get(id)
   }, [sharedPatterns])
 
-  const findPatternsByCategory = useCallback((category) => {
+  const findPatternsByCategory = useCallback((category: string) => {
     return Array.from(sharedPatterns.values()).filter(pattern => pattern.category === category)
   }, [sharedPatterns])
 
   // Style sharing
   const shareStyle = useCallback((
-    style, 'id'>
+    style: Omit<SharedStyle, 'id'>
   ) => {
     if (!enableStyleSharing) return null
 
     const id = `style-${Date.now()}`
-    const newStyle= {
+    const newStyle: SharedStyle = {
       ...style,
       id
     }
@@ -165,13 +188,14 @@ export const useReusableArchitecture = (
     return id
   }, [enableStyleSharing, sharedStyles, callbacks])
 
-  const getStyle = useCallback((id) => {
+  const getStyle = useCallback((id: string) => {
     return sharedStyles.get(id)
   }, [sharedStyles])
 
   const applyStyle = useCallback((
-    styleId,
-    targetComponent) => {
+    styleId: string,
+    targetComponent: string
+  ) => {
     const style = sharedStyles.get(styleId)
     if (!style) return false
     
@@ -187,12 +211,12 @@ export const useReusableArchitecture = (
 
   // Behavior sharing
   const shareBehavior = useCallback((
-    behavior, 'id'>
+    behavior: Omit<SharedBehavior, 'id'>
   ) => {
     if (!enableBehaviorSharing) return null
 
     const id = `behavior-${Date.now()}`
-    const newBehavior= {
+    const newBehavior: SharedBehavior = {
       ...behavior,
       id
     }
@@ -205,13 +229,14 @@ export const useReusableArchitecture = (
     return id
   }, [enableBehaviorSharing, sharedBehaviors, callbacks])
 
-  const getBehavior = useCallback((id) => {
+  const getBehavior = useCallback((id: string) => {
     return sharedBehaviors.get(id)
   }, [sharedBehaviors])
 
   const applyBehavior = useCallback((
-    behaviorId,
-    targetComponent) => {
+    behaviorId: string,
+    targetComponent: string
+  ) => {
     const behavior = sharedBehaviors.get(behaviorId)
     if (!behavior) return false
     
@@ -227,21 +252,25 @@ export const useReusableArchitecture = (
 
   // Component registry
   const registerComponent = useCallback((
-    id,
-    component,
-    metadata]
+    id: string,
+    component: ComponentType<any>,
+    metadata: {
+      name: string
+      description: string
+      category: string
+      tags: string[]
     }
   ) => {
     if (!enableComponentRegistry) return false
     
-    const template= {
+    const template: ComponentTemplate = {
       id,
-      name,
+      name: metadata.name,
       component,
-      props},
-      styles},
-      behaviors],
-      patterns]
+      props: {},
+      styles: {},
+      behaviors: [],
+      patterns: []
     }
     
     templates.set(id, template)
@@ -253,13 +282,13 @@ export const useReusableArchitecture = (
   // Architecture analysis
   const analyzeArchitecture = useCallback(() => {
     const analysis = {
-      totalTemplates,
-      totalPatterns,
-      totalStyles,
-      totalBehaviors,
-      compositionLevel,
-      reusabilityScore,
-      recommendations] as string[]
+      totalTemplates: templates.size,
+      totalPatterns: sharedPatterns.size,
+      totalStyles: sharedStyles.size,
+      totalBehaviors: sharedBehaviors.size,
+      compositionLevel: 'none' as 'none' | 'basic' | 'intermediate' | 'advanced',
+      reusabilityScore: 0,
+      recommendations: [] as string[]
     }
     
     // Calculate composition level
@@ -335,10 +364,10 @@ export const useReusableArchitecture = (
 
   return {
     // State
-    templates)),
-    sharedPatterns)),
-    sharedStyles)),
-    sharedBehaviors)),
+    templates: Array.from(templates.values()),
+    sharedPatterns: Array.from(sharedPatterns.values()),
+    sharedStyles: Array.from(sharedStyles.values()),
+    sharedBehaviors: Array.from(sharedBehaviors.values()),
     isOptimizing,
     optimizations,
     
@@ -374,11 +403,11 @@ export const useReusableArchitecture = (
     optimizeArchitecture,
     
     // Utility functions
-    hasTemplate) => templates.has(id),
-    hasPattern) => sharedPatterns.has(id),
-    hasStyle) => sharedStyles.has(id),
-    hasBehavior) => sharedBehaviors.has(id),
-    clearOptimizations) => setOptimizations([])
+    hasTemplate: (id: string) => templates.has(id),
+    hasPattern: (id: string) => sharedPatterns.has(id),
+    hasStyle: (id: string) => sharedStyles.has(id),
+    hasBehavior: (id: string) => sharedBehaviors.has(id),
+    clearOptimizations: () => setOptimizations([])
   }
 }