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

package/dist/hooks/use-memory-usage.esm.js

@@ -1,30 +1,46 @@
 import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
 
 export interface MemoryMetrics {
-  usedJSHeapSize}
+  usedJSHeapSize: number
+  totalJSHeapSize: number
+  jsHeapSizeLimit: number
+  memoryUsage: number
+  memoryPercentage: number
+  memoryTrend: 'increasing' | 'decreasing' | 'stable'
+  memoryLeakDetected: boolean
+  performanceScore: 'excellent' | 'good' | 'fair' | 'poor'
+}
 
 export interface MemoryThresholds {
-  warning}
+  warning: number
+  critical: number
+  excellent: number
+}
 
 export interface MemoryCallbacks {
-  onMemoryWarning?) => void
-  onMemoryCritical?) => void
-  onMemoryLeakDetected?]) => void
-  onPerformanceScoreChange?]) => void
+  onMemoryWarning?: (usage: number) => void
+  onMemoryCritical?: (usage: number) => void
+  onMemoryLeakDetected?: (trend: MemoryMetrics['memoryTrend']) => void
+  onPerformanceScoreChange?: (score: MemoryMetrics['performanceScore']) => void
 }
 
 export interface MemoryOptions {
-  updateInterval?}
+  updateInterval?: number
+  sampleSize?: number
+  thresholds?: Partial<MemoryThresholds>
+  callbacks?: MemoryCallbacks
+}
 
-const DEFAULT_THRESHOLDS= {
-  warning,
-  critical,
-  excellent}
+const DEFAULT_THRESHOLDS: MemoryThresholds = {
+  warning: 0.7,
+  critical: 0.85,
+  excellent: 0.5
+}
 
 const DEFAULT_SAMPLE_SIZE = 10
 const MEMORY_LEAK_THRESHOLD = 0.1 // 10% increase over time
 
-export const useMemoryUsage = (options= {}) => {
+export const useMemoryUsage = (options: MemoryOptions = {}) => {
   const {
     updateInterval = 2000,
     sampleSize = DEFAULT_SAMPLE_SIZE,
@@ -33,14 +49,15 @@ export const useMemoryUsage = (options= {}) => {
   } = options
 
   const [metrics, setMetrics] = useState<MemoryMetrics>({
-    usedJSHeapSize,
-    totalJSHeapSize,
-    jsHeapSizeLimit,
-    memoryUsage,
-    memoryPercentage,
-    memoryTrend,
-    memoryLeakDetected,
-    performanceScore})
+    usedJSHeapSize: 0,
+    totalJSHeapSize: 0,
+    jsHeapSizeLimit: 0,
+    memoryUsage: 0,
+    memoryPercentage: 0,
+    memoryTrend: 'stable',
+    memoryLeakDetected: false,
+    performanceScore: 'excellent'
+  })
 
   const [isMonitoring, setIsMonitoring] = useState(false)
   const intervalIdRef = useRef<NodeJS.Timeout>()
@@ -54,7 +71,7 @@ export const useMemoryUsage = (options= {}) => {
   }), [thresholds])
 
   // Calculate performance score based on memory usage
-  const calculatePerformanceScore = useCallback((usage)] => {
+  const calculatePerformanceScore = useCallback((usage: number): MemoryMetrics['performanceScore'] => {
     if (usage <= finalThresholds.excellent) return 'excellent'
     if (usage <= finalThresholds.warning) return 'good'
     if (usage <= finalThresholds.critical) return 'fair'
@@ -62,7 +79,7 @@ export const useMemoryUsage = (options= {}) => {
   }, [finalThresholds])
 
   // Detect memory trend
-  const detectMemoryTrend = useCallback((currentUsage, previousUsage)] => {
+  const detectMemoryTrend = useCallback((currentUsage: number, previousUsage: number): MemoryMetrics['memoryTrend'] => {
     const difference = currentUsage - previousUsage
     const percentageChange = Math.abs(difference) / previousUsage
 
@@ -72,7 +89,7 @@ export const useMemoryUsage = (options= {}) => {
   }, [])
 
   // Detect potential memory leaks
-  const detectMemoryLeak = useCallback((_usage, history])=> {
+  const detectMemoryLeak = useCallback((_usage: number, history: number[]): boolean => {
     if (history.length < 5) return false
 
     // Check if memory usage is consistently increasing
@@ -118,7 +135,7 @@ export const useMemoryUsage = (options= {}) => {
       // Calculate performance score
       const performanceScore = calculatePerformanceScore(memoryUsage)
 
-      const newMetrics= {
+      const newMetrics: MemoryMetrics = {
         usedJSHeapSize,
         totalJSHeapSize,
         jsHeapSizeLimit,
@@ -179,8 +196,9 @@ export const useMemoryUsage = (options= {}) => {
     lastMemoryRef.current = 0
     setMetrics(prev => ({
       ...prev,
-      memoryTrend,
-      memoryLeakDetected}))
+      memoryTrend: 'stable',
+      memoryLeakDetected: false
+    }))
   }, [])
 
   // Auto-start monitoring on mount
@@ -191,7 +209,7 @@ export const useMemoryUsage = (options= {}) => {
 
   // Memory optimization recommendations
   const getOptimizationRecommendations = useCallback(() => {
-    const recommendations] = []
+    const recommendations: string[] = []
     
     if (metrics.memoryUsage >= finalThresholds.critical) {
       recommendations.push('Critical memory usage - consider implementing memory cleanup and lazy loading')
@@ -216,7 +234,7 @@ export const useMemoryUsage = (options= {}) => {
 
   // Memory cleanup suggestions
   const getCleanupSuggestions = useCallback(() => {
-    const suggestions] = []
+    const suggestions: string[] = []
     
     if (metrics.memoryLeakDetected) {
       suggestions.push('Review useEffect cleanup functions')
@@ -245,24 +263,25 @@ export const useMemoryUsage = (options= {}) => {
     resetStats,
     
     // Performance analysis
-    performanceScore,
-    memoryTrend,
-    memoryLeakDetected,
+    performanceScore: metrics.performanceScore,
+    memoryTrend: metrics.memoryTrend,
+    memoryLeakDetected: metrics.memoryLeakDetected,
     
     // Optimization
     getOptimizationRecommendations,
     getCleanupSuggestions,
     
     // Raw values
-    usedJSHeapSize,
-    totalJSHeapSize,
-    jsHeapSizeLimit,
-    memoryUsage,
-    memoryPercentage,
+    usedJSHeapSize: metrics.usedJSHeapSize,
+    totalJSHeapSize: metrics.totalJSHeapSize,
+    jsHeapSizeLimit: metrics.jsHeapSizeLimit,
+    memoryUsage: metrics.memoryUsage,
+    memoryPercentage: metrics.memoryPercentage,
     
     // Thresholds
-    thresholds,
+    thresholds: finalThresholds,
     
     // History
-    memoryHistory}
+    memoryHistory: memoryHistoryRef.current
+  }
 }

package/dist/hooks/use-memory-usage.js

@@ -1,30 +1,46 @@
 import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
 
 export interface MemoryMetrics {
-  usedJSHeapSize}
+  usedJSHeapSize: number
+  totalJSHeapSize: number
+  jsHeapSizeLimit: number
+  memoryUsage: number
+  memoryPercentage: number
+  memoryTrend: 'increasing' | 'decreasing' | 'stable'
+  memoryLeakDetected: boolean
+  performanceScore: 'excellent' | 'good' | 'fair' | 'poor'
+}
 
 export interface MemoryThresholds {
-  warning}
+  warning: number
+  critical: number
+  excellent: number
+}
 
 export interface MemoryCallbacks {
-  onMemoryWarning?) => void
-  onMemoryCritical?) => void
-  onMemoryLeakDetected?]) => void
-  onPerformanceScoreChange?]) => void
+  onMemoryWarning?: (usage: number) => void
+  onMemoryCritical?: (usage: number) => void
+  onMemoryLeakDetected?: (trend: MemoryMetrics['memoryTrend']) => void
+  onPerformanceScoreChange?: (score: MemoryMetrics['performanceScore']) => void
 }
 
 export interface MemoryOptions {
-  updateInterval?}
+  updateInterval?: number
+  sampleSize?: number
+  thresholds?: Partial<MemoryThresholds>
+  callbacks?: MemoryCallbacks
+}
 
-const DEFAULT_THRESHOLDS= {
-  warning,
-  critical,
-  excellent}
+const DEFAULT_THRESHOLDS: MemoryThresholds = {
+  warning: 0.7,
+  critical: 0.85,
+  excellent: 0.5
+}
 
 const DEFAULT_SAMPLE_SIZE = 10
 const MEMORY_LEAK_THRESHOLD = 0.1 // 10% increase over time
 
-export const useMemoryUsage = (options= {}) => {
+export const useMemoryUsage = (options: MemoryOptions = {}) => {
   const {
     updateInterval = 2000,
     sampleSize = DEFAULT_SAMPLE_SIZE,
@@ -33,14 +49,15 @@ export const useMemoryUsage = (options= {}) => {
   } = options
 
   const [metrics, setMetrics] = useState<MemoryMetrics>({
-    usedJSHeapSize,
-    totalJSHeapSize,
-    jsHeapSizeLimit,
-    memoryUsage,
-    memoryPercentage,
-    memoryTrend,
-    memoryLeakDetected,
-    performanceScore})
+    usedJSHeapSize: 0,
+    totalJSHeapSize: 0,
+    jsHeapSizeLimit: 0,
+    memoryUsage: 0,
+    memoryPercentage: 0,
+    memoryTrend: 'stable',
+    memoryLeakDetected: false,
+    performanceScore: 'excellent'
+  })
 
   const [isMonitoring, setIsMonitoring] = useState(false)
   const intervalIdRef = useRef<NodeJS.Timeout>()
@@ -54,7 +71,7 @@ export const useMemoryUsage = (options= {}) => {
   }), [thresholds])
 
   // Calculate performance score based on memory usage
-  const calculatePerformanceScore = useCallback((usage)] => {
+  const calculatePerformanceScore = useCallback((usage: number): MemoryMetrics['performanceScore'] => {
     if (usage <= finalThresholds.excellent) return 'excellent'
     if (usage <= finalThresholds.warning) return 'good'
     if (usage <= finalThresholds.critical) return 'fair'
@@ -62,7 +79,7 @@ export const useMemoryUsage = (options= {}) => {
   }, [finalThresholds])
 
   // Detect memory trend
-  const detectMemoryTrend = useCallback((currentUsage, previousUsage)] => {
+  const detectMemoryTrend = useCallback((currentUsage: number, previousUsage: number): MemoryMetrics['memoryTrend'] => {
     const difference = currentUsage - previousUsage
     const percentageChange = Math.abs(difference) / previousUsage
 
@@ -72,7 +89,7 @@ export const useMemoryUsage = (options= {}) => {
   }, [])
 
   // Detect potential memory leaks
-  const detectMemoryLeak = useCallback((_usage, history])=> {
+  const detectMemoryLeak = useCallback((_usage: number, history: number[]): boolean => {
     if (history.length < 5) return false
 
     // Check if memory usage is consistently increasing
@@ -118,7 +135,7 @@ export const useMemoryUsage = (options= {}) => {
       // Calculate performance score
       const performanceScore = calculatePerformanceScore(memoryUsage)
 
-      const newMetrics= {
+      const newMetrics: MemoryMetrics = {
         usedJSHeapSize,
         totalJSHeapSize,
         jsHeapSizeLimit,
@@ -179,8 +196,9 @@ export const useMemoryUsage = (options= {}) => {
     lastMemoryRef.current = 0
     setMetrics(prev => ({
       ...prev,
-      memoryTrend,
-      memoryLeakDetected}))
+      memoryTrend: 'stable',
+      memoryLeakDetected: false
+    }))
   }, [])
 
   // Auto-start monitoring on mount
@@ -191,7 +209,7 @@ export const useMemoryUsage = (options= {}) => {
 
   // Memory optimization recommendations
   const getOptimizationRecommendations = useCallback(() => {
-    const recommendations] = []
+    const recommendations: string[] = []
     
     if (metrics.memoryUsage >= finalThresholds.critical) {
       recommendations.push('Critical memory usage - consider implementing memory cleanup and lazy loading')
@@ -216,7 +234,7 @@ export const useMemoryUsage = (options= {}) => {
 
   // Memory cleanup suggestions
   const getCleanupSuggestions = useCallback(() => {
-    const suggestions] = []
+    const suggestions: string[] = []
     
     if (metrics.memoryLeakDetected) {
       suggestions.push('Review useEffect cleanup functions')
@@ -245,24 +263,25 @@ export const useMemoryUsage = (options= {}) => {
     resetStats,
     
     // Performance analysis
-    performanceScore,
-    memoryTrend,
-    memoryLeakDetected,
+    performanceScore: metrics.performanceScore,
+    memoryTrend: metrics.memoryTrend,
+    memoryLeakDetected: metrics.memoryLeakDetected,
     
     // Optimization
     getOptimizationRecommendations,
     getCleanupSuggestions,
     
     // Raw values
-    usedJSHeapSize,
-    totalJSHeapSize,
-    jsHeapSizeLimit,
-    memoryUsage,
-    memoryPercentage,
+    usedJSHeapSize: metrics.usedJSHeapSize,
+    totalJSHeapSize: metrics.totalJSHeapSize,
+    jsHeapSizeLimit: metrics.jsHeapSizeLimit,
+    memoryUsage: metrics.memoryUsage,
+    memoryPercentage: metrics.memoryPercentage,
     
     // Thresholds
-    thresholds,
+    thresholds: finalThresholds,
     
     // History
-    memoryHistory}
+    memoryHistory: memoryHistoryRef.current
+  }
 }

package/dist/hooks/use-mobile-form-layout.esm.js

@@ -1,55 +1,86 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
 
 export interface LayoutConfig {
-  enableTouchOptimization}
+  enableTouchOptimization: boolean
+  enableKeyboardOptimization: boolean
+  enableResponsiveBehavior: boolean
+  enablePerformanceOptimization: boolean
+  touchTargetSize: number
+  spacingMultiplier: number
+  maxFieldWidth: number
+  enableAutoFocus: boolean
+}
 
 export interface LayoutState {
-  isMobile}
+  isMobile: boolean
+  isTablet: boolean
+  isDesktop: boolean
+  orientation: 'portrait' | 'landscape'
+  keyboardVisible: boolean
+  viewportHeight: number
+  viewportWidth: number
+  safeAreaInsets: {
+    top: number
+    bottom: number
+    left: number
+    right: number
+  }
 }
 
 export interface LayoutCallbacks {
-  onLayoutChange?) => void
-  onOrientationChange?) => void
-  onKeyboardVisibilityChange?) => void
-  onViewportChange?, height) => void
+  onLayoutChange?: (layout: LayoutState) => void
+  onOrientationChange?: (orientation: 'portrait' | 'landscape') => void
+  onKeyboardVisibilityChange?: (visible: boolean) => void
+  onViewportChange?: (width: number, height: number) => void
 }
 
 export interface MobileFormLayoutState {
-  layout}
+  layout: LayoutState
+  isOptimized: boolean
+  currentSpacing: number
+  currentFieldWidth: number
+  performanceMetrics: {
+    layoutUpdates: number
+    lastUpdateTime: number
+    optimizationScore: number
+  }
 }
 
 export const useMobileFormLayout = (
-  callbacks= {},
-  config= {}
+  callbacks: LayoutCallbacks = {},
+  config: Partial<LayoutConfig> = {}
 ) => {
-  const defaultConfig= {
-    enableTouchOptimization,
-    enableKeyboardOptimization,
-    enableResponsiveBehavior,
-    enablePerformanceOptimization,
-    touchTargetSize,
-    spacingMultiplier,
-    maxFieldWidth,
-    enableAutoFocus,
+  const defaultConfig: LayoutConfig = {
+    enableTouchOptimization: true,
+    enableKeyboardOptimization: true,
+    enableResponsiveBehavior: true,
+    enablePerformanceOptimization: true,
+    touchTargetSize: 44,
+    spacingMultiplier: 1.2,
+    maxFieldWidth: 400,
+    enableAutoFocus: true,
     ...config
   }
 
   const [layoutState, setLayoutState] = useState<MobileFormLayoutState>({
-    layout,
-      isTablet,
-      isDesktop,
-      orientation,
-      keyboardVisible,
-      viewportHeight,
-      viewportWidth,
-      safeAreaInsets, bottom, left, right}
+    layout: {
+      isMobile: false,
+      isTablet: false,
+      isDesktop: false,
+      orientation: 'portrait',
+      keyboardVisible: false,
+      viewportHeight: window.innerHeight,
+      viewportWidth: window.innerWidth,
+      safeAreaInsets: { top: 0, bottom: 0, left: 0, right: 0 }
     },
-    isOptimized,
-    currentSpacing,
-    currentFieldWidth, defaultConfig.maxFieldWidth),
-    performanceMetrics,
-      lastUpdateTime,
-      optimizationScore}
+    isOptimized: false,
+    currentSpacing: defaultConfig.touchTargetSize * defaultConfig.spacingMultiplier,
+    currentFieldWidth: Math.min(window.innerWidth - 32, defaultConfig.maxFieldWidth),
+    performanceMetrics: {
+      layoutUpdates: 0,
+      lastUpdateTime: 0,
+      optimizationScore: 0
+    }
   })
 
   const resizeObserverRef = useRef<ResizeObserver | null>(null)
@@ -85,7 +116,7 @@ export const useMobileFormLayout = (
   }, [])
 
   // Detect orientation
-  const detectOrientation = useCallback(()=> {
+  const detectOrientation = useCallback((): 'portrait' | 'landscape' => {
     if (window.innerHeight > window.innerWidth) {
       return 'portrait'
     }
@@ -97,10 +128,10 @@ export const useMobileFormLayout = (
     const style = getComputedStyle(document.documentElement)
     
     return {
-      top) || '0'),
-      bottom) || '0'),
-      left) || '0'),
-      right) || '0')
+      top: parseInt(style.getPropertyValue('--sat') || '0'),
+      bottom: parseInt(style.getPropertyValue('--sab') || '0'),
+      left: parseInt(style.getPropertyValue('--sal') || '0'),
+      right: parseInt(style.getPropertyValue('--sar') || '0')
     }
   }, [])
 
@@ -111,7 +142,9 @@ export const useMobileFormLayout = (
     const currentHeight = window.innerHeight
     const currentWidth = window.innerWidth
     
-    // Simple heuristic= currentHeight / layoutState.layout.viewportHeight
+    // Simple heuristic: if height decreases significantly and width stays the same
+    // it's likely the keyboard appeared
+    const heightRatio = currentHeight / layoutState.layout.viewportHeight
     const widthRatio = currentWidth / layoutState.layout.viewportWidth
     
     return heightRatio < 0.8 && widthRatio > 0.95
@@ -124,12 +157,12 @@ export const useMobileFormLayout = (
     const safeAreaInsets = getSafeAreaInsets()
     const keyboardVisible = detectKeyboardVisibility()
     
-    const newLayout= {
+    const newLayout: LayoutState = {
       ...deviceType,
       orientation,
       keyboardVisible,
-      viewportHeight,
-      viewportWidth,
+      viewportHeight: window.innerHeight,
+      viewportWidth: window.innerWidth,
       safeAreaInsets
     }
 
@@ -158,12 +191,13 @@ export const useMobileFormLayout = (
     setLayoutState(prev => {
       const newState = {
         ...prev,
-        layout,
-        currentSpacing,
-        currentFieldWidth,
-        performanceMetrics,
-          layoutUpdates,
-          lastUpdateTime)
+        layout: newLayout,
+        currentSpacing: spacing,
+        currentFieldWidth: fieldWidth,
+        performanceMetrics: {
+          ...prev.performanceMetrics,
+          layoutUpdates: prev.performanceMetrics.layoutUpdates + 1,
+          lastUpdateTime: Date.now()
         }
       }
 
@@ -192,7 +226,7 @@ export const useMobileFormLayout = (
   ])
 
   // Calculate optimization score
-  const calculateOptimizationScore = useCallback((state)=> {
+  const calculateOptimizationScore = useCallback((state: MobileFormLayoutState): number => {
     let score = 0
     const { layout, currentSpacing, currentFieldWidth } = state
 
@@ -354,13 +388,13 @@ export const useMobileFormLayout = (
     const { currentSpacing, currentFieldWidth } = layoutState
     
     return {
-      '--mobile-spacing'}px`,
-      '--mobile-field-width'}px`,
-      '--touch-target-size'}px`,
-      '--safe-area-top'}px`,
-      '--safe-area-bottom'}px`,
-      '--safe-area-left'}px`,
-      '--safe-area-right'}px`
+      '--mobile-spacing': `${currentSpacing}px`,
+      '--mobile-field-width': `${currentFieldWidth}px`,
+      '--touch-target-size': `${defaultConfig.touchTargetSize}px`,
+      '--safe-area-top': `${layoutState.layout.safeAreaInsets.top}px`,
+      '--safe-area-bottom': `${layoutState.layout.safeAreaInsets.bottom}px`,
+      '--safe-area-left': `${layoutState.layout.safeAreaInsets.left}px`,
+      '--safe-area-right': `${layoutState.layout.safeAreaInsets.right}px`
     }
   }, [layoutState, defaultConfig.touchTargetSize])
 
@@ -395,33 +429,36 @@ export const useMobileFormLayout = (
     getLayoutClasses,
     getLayoutCSSVariables,
     autoFocusFirstInput,
-    isMobile,
-    isTablet,
-    isDesktop,
-    orientation,
-    keyboardVisible,
-    currentSpacing,
-    currentFieldWidth,
-    isOptimized,
-    performanceMetrics}
+    isMobile: layoutState.layout.isMobile,
+    isTablet: layoutState.layout.isTablet,
+    isDesktop: layoutState.layout.isDesktop,
+    orientation: layoutState.layout.orientation,
+    keyboardVisible: layoutState.layout.keyboardVisible,
+    currentSpacing: layoutState.currentSpacing,
+    currentFieldWidth: layoutState.currentFieldWidth,
+    isOptimized: layoutState.isOptimized,
+    performanceMetrics: layoutState.performanceMetrics
+  }
 }
 
 // Convenience hook for basic mobile layout
 export const useBasicMobileLayout = () => {
   return useMobileFormLayout({}, {
-    enableTouchOptimization,
-    enableKeyboardOptimization,
-    enableResponsiveBehavior,
-    enablePerformanceOptimization,
-    enableAutoFocus})
+    enableTouchOptimization: true,
+    enableKeyboardOptimization: false,
+    enableResponsiveBehavior: true,
+    enablePerformanceOptimization: false,
+    enableAutoFocus: false
+  })
 }
 
 // Convenience hook for enhanced mobile layout
 export const useEnhancedMobileLayout = () => {
   return useMobileFormLayout({}, {
-    enableTouchOptimization,
-    enableKeyboardOptimization,
-    enableResponsiveBehavior,
-    enablePerformanceOptimization,
-    enableAutoFocus})
+    enableTouchOptimization: true,
+    enableKeyboardOptimization: true,
+    enableResponsiveBehavior: true,
+    enablePerformanceOptimization: true,
+    enableAutoFocus: true
+  })
 }