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

package/dist/hooks/use-mobile-touch.js

@@ -1,59 +1,84 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
 
 export interface MobileTouchConfig {
-  enableTouchFeedback}
+  enableTouchFeedback: boolean
+  enableGestureHints: boolean
+  enableTouchSounds: boolean
+  enableHapticFeedback: boolean
+  touchFeedbackDelay: number
+  gestureHintTimeout: number
+  maxTouchPoints: number
+}
 
 export interface TouchFeedbackState {
-  isPressed; y} | null
+  isPressed: boolean
+  feedbackType: 'none' | 'scale' | 'ripple' | 'glow'
+  feedbackIntensity: 'light' | 'medium' | 'strong'
+  lastTouchPosition: { x: number; y: number } | null
 }
 
 export interface GestureHint {
-  type; y}
-  timeout}
+  type: 'swipe' | 'pinch' | 'longPress' | 'doubleTap' | 'tap'
+  message: string
+  position: { x: number; y: number }
+  timeout: number
+}
 
 export interface MobileTouchCallbacks {
-  onTouchFeedback?) => void
-  onGestureHint?) => void
-  onTouchStart?; y}) => void
-  onTouchEnd?; y}) => void
-  onTouchMove?; y}) => void
+  onTouchFeedback?: (state: TouchFeedbackState) => void
+  onGestureHint?: (hint: GestureHint) => void
+  onTouchStart?: (position: { x: number; y: number }) => void
+  onTouchEnd?: (position: { x: number; y: number }) => void
+  onTouchMove?: (position: { x: number; y: number }) => void
 }
 
 export interface MobileTouchState {
-  isActive]
-  deviceCapabilities}
+  isActive: boolean
+  touchCount: number
+  currentFeedback: TouchFeedbackState
+  activeGestureHints: GestureHint[]
+  deviceCapabilities: {
+    supportsTouch: boolean
+    supportsHaptics: boolean
+    supportsAudio: boolean
+    maxTouchPoints: number
+  }
 }
 
 export const useMobileTouch = (
-  elementRef,
-  callbacks= {},
-  config= {}
+  elementRef: React.RefObject<HTMLElement>,
+  callbacks: MobileTouchCallbacks = {},
+  config: Partial<MobileTouchConfig> = {}
 ) => {
-  const defaultConfig= {
-    enableTouchFeedback,
-    enableGestureHints,
-    enableTouchSounds,
-    enableHapticFeedback,
-    touchFeedbackDelay,
-    gestureHintTimeout,
-    maxTouchPoints,
+  const defaultConfig: MobileTouchConfig = {
+    enableTouchFeedback: true,
+    enableGestureHints: true,
+    enableTouchSounds: false,
+    enableHapticFeedback: true,
+    touchFeedbackDelay: 100,
+    gestureHintTimeout: 3000,
+    maxTouchPoints: 5,
     ...config
   }
 
   // Device info available if needed for future enhancements
   // const device = useDevice()
   const [mobileTouchState, setMobileTouchState] = useState<MobileTouchState>({
-    isActive,
-    touchCount,
-    currentFeedback,
-      feedbackType,
-      feedbackIntensity,
-      lastTouchPosition},
-    activeGestureHints],
-    deviceCapabilities,
-      supportsHaptics,
-      supportsAudio,
-      maxTouchPoints}
+    isActive: false,
+    touchCount: 0,
+    currentFeedback: {
+      isPressed: false,
+      feedbackType: 'none',
+      feedbackIntensity: 'medium',
+      lastTouchPosition: null
+    },
+    activeGestureHints: [],
+    deviceCapabilities: {
+      supportsTouch: false,
+      supportsHaptics: false,
+      supportsAudio: false,
+      maxTouchPoints: 0
+    }
   })
 
   const touchStartTimeRef = useRef<number>(0)
@@ -64,14 +89,16 @@ export const useMobileTouch = (
   // Initialize device capabilities
   useEffect(() => {
     const capabilities = {
-      supportsTouch,
-      supportsHaptics,
-      supportsAudio,
-      maxTouchPoints}
+      supportsTouch: 'ontouchstart' in window,
+      supportsHaptics: 'vibrate' in navigator,
+      supportsAudio: 'AudioContext' in window || 'webkitAudioContext' in window,
+      maxTouchPoints: navigator.maxTouchPoints || 0
+    }
 
     setMobileTouchState(prev => ({
       ...prev,
-      deviceCapabilities}))
+      deviceCapabilities: capabilities
+    }))
 
     // Initialize audio context if supported
     if (capabilities.supportsAudio) {
@@ -80,23 +107,24 @@ export const useMobileTouch = (
   }, [])
 
   // Trigger haptic feedback
-  const triggerHapticFeedback = useCallback((intensity= 'medium') => {
+  const triggerHapticFeedback = useCallback((intensity: 'light' | 'medium' | 'strong' = 'medium') => {
     if (!defaultConfig.enableHapticFeedback || !mobileTouchState.deviceCapabilities.supportsHaptics) return
 
     const vibrationPattern = {
-      light,
-      medium,
-      strong}
+      light: 20,
+      medium: 50,
+      strong: 100
+    }
 
     try {
       navigator.vibrate(vibrationPattern[intensity])
     } catch (error) {
-      console.warn('Haptic feedback not supported, error)
+      console.warn('Haptic feedback not supported:', error)
     }
   }, [defaultConfig.enableHapticFeedback, mobileTouchState.deviceCapabilities.supportsHaptics])
 
   // Trigger touch sound
-  const triggerTouchSound = useCallback((type= 'tap') => {
+  const triggerTouchSound = useCallback((type: 'tap' | 'press' | 'release' = 'tap') => {
     if (!defaultConfig.enableTouchSounds || !audioContextRef.current) return
 
     try {
@@ -109,9 +137,9 @@ export const useMobileTouch = (
       
       // Different sounds for different touch types
       const soundConfig = {
-        tap, duration, volume},
-        press, duration, volume},
-        release, duration, volume}
+        tap: { frequency: 800, duration: 0.1, volume: 0.1 },
+        press: { frequency: 600, duration: 0.2, volume: 0.15 },
+        release: { frequency: 1000, duration: 0.08, volume: 0.08 }
       }
       
       const config = soundConfig[type]
@@ -121,32 +149,32 @@ export const useMobileTouch = (
       oscillator.start(audioContext.currentTime)
       oscillator.stop(audioContext.currentTime + config.duration)
     } catch (error) {
-      console.warn('Touch sound not supported, error)
+      console.warn('Touch sound not supported:', error)
     }
   }, [defaultConfig.enableTouchSounds])
 
   // Update touch feedback state
-  const updateTouchFeedback = useCallback((feedback) => {
+  const updateTouchFeedback = useCallback((feedback: Partial<TouchFeedbackState>) => {
     setMobileTouchState(prev => ({
       ...prev,
-      currentFeedback, ...feedback }
+      currentFeedback: { ...prev.currentFeedback, ...feedback }
     }))
 
     callbacks.onTouchFeedback?.(mobileTouchState.currentFeedback)
   }, [callbacks, mobileTouchState.currentFeedback])
 
   // Add gesture hint
-  const addGestureHint = useCallback((hint, 'timeout'>) => {
+  const addGestureHint = useCallback((hint: Omit<GestureHint, 'timeout'>) => {
     if (!defaultConfig.enableGestureHints) return
 
     const hintWithTimeout = {
       ...hint,
-      timeout) + defaultConfig.gestureHintTimeout
+      timeout: Date.now() + defaultConfig.gestureHintTimeout
     }
 
     setMobileTouchState(prev => ({
       ...prev,
-      activeGestureHints, hintWithTimeout]
+      activeGestureHints: [...prev.activeGestureHints, hintWithTimeout]
     }))
 
     // Set timer to remove hint
@@ -159,10 +187,10 @@ export const useMobileTouch = (
   }, [defaultConfig.enableGestureHints, defaultConfig.gestureHintTimeout, callbacks])
 
   // Remove gesture hint
-  const removeGestureHint = useCallback((type) => {
+  const removeGestureHint = useCallback((type: string) => {
     setMobileTouchState(prev => ({
       ...prev,
-      activeGestureHints=> hint.type !== type)
+      activeGestureHints: prev.activeGestureHints.filter(hint => hint.type !== type)
     }))
 
     const timer = gestureHintTimersRef.current.get(type)
@@ -173,30 +201,33 @@ export const useMobileTouch = (
   }, [])
 
   // Handle touch start
-  const handleTouchStart = useCallback((event) => {
+  const handleTouchStart = useCallback((event: TouchEvent) => {
     const touch = event.touches[0]
-    const position = { x, y}
+    const position = { x: touch.clientX, y: touch.clientY }
     
     touchStartTimeRef.current = Date.now()
     
     setMobileTouchState(prev => ({
       ...prev,
-      isActive,
-      touchCount}))
+      isActive: true,
+      touchCount: event.touches.length
+    }))
 
     // Update feedback state
     if (defaultConfig.enableTouchFeedback) {
       updateTouchFeedback({
-        isPressed,
-        feedbackType,
-        feedbackIntensity,
-        lastTouchPosition})
+        isPressed: true,
+        feedbackType: 'scale',
+        feedbackIntensity: 'medium',
+        lastTouchPosition: position
+      })
 
       // Set feedback timer
       touchFeedbackTimerRef.current = setTimeout(() => {
         updateTouchFeedback({
-          feedbackType,
-          feedbackIntensity})
+          feedbackType: 'ripple',
+          feedbackIntensity: 'strong'
+        })
       }, defaultConfig.touchFeedbackDelay)
     }
 
@@ -208,23 +239,24 @@ export const useMobileTouch = (
   }, [defaultConfig.enableTouchFeedback, defaultConfig.touchFeedbackDelay, updateTouchFeedback, triggerHapticFeedback, triggerTouchSound, callbacks])
 
   // Handle touch move
-  const handleTouchMove = useCallback((event) => {
+  const handleTouchMove = useCallback((event: TouchEvent) => {
     const touch = event.touches[0]
-    const position = { x, y}
+    const position = { x: touch.clientX, y: touch.clientY }
     
     // Update feedback state
     if (defaultConfig.enableTouchFeedback) {
       updateTouchFeedback({
-        lastTouchPosition})
+        lastTouchPosition: position
+      })
     }
     
     callbacks.onTouchMove?.(position)
   }, [defaultConfig.enableTouchFeedback, updateTouchFeedback, callbacks])
 
   // Handle touch end
-  const handleTouchEnd = useCallback((event) => {
+  const handleTouchEnd = useCallback((event: TouchEvent) => {
     const touch = event.changedTouches[0]
-    const position = { x, y}
+    const position = { x: touch.clientX, y: touch.clientY }
     const touchDuration = Date.now() - touchStartTimeRef.current
     
     // Clear feedback timer
@@ -236,9 +268,10 @@ export const useMobileTouch = (
     // Update feedback state
     if (defaultConfig.enableTouchFeedback) {
       updateTouchFeedback({
-        isPressed,
-        feedbackType,
-        feedbackIntensity})
+        isPressed: false,
+        feedbackType: 'none',
+        feedbackIntensity: 'medium'
+      })
     }
 
     // Determine touch type and provide appropriate feedback
@@ -249,8 +282,8 @@ export const useMobileTouch = (
       
       // Show tap hint
       addGestureHint({
-        type,
-        message,
+        type: 'tap',
+        message: 'Quick tap detected',
         position
       })
     } else if (touchDuration > 500) {
@@ -260,8 +293,8 @@ export const useMobileTouch = (
       
       // Show long press hint
       addGestureHint({
-        type,
-        message,
+        type: 'longPress',
+        message: 'Long press detected',
         position
       })
     } else {
@@ -272,8 +305,8 @@ export const useMobileTouch = (
 
     setMobileTouchState(prev => ({
       ...prev,
-      isActive,
-      touchCount, prev.touchCount - 1)
+      isActive: false,
+      touchCount: Math.max(0, prev.touchCount - 1)
     }))
     
     callbacks.onTouchEnd?.(position)
@@ -284,9 +317,9 @@ export const useMobileTouch = (
     const element = elementRef.current
     if (!element || !mobileTouchState.deviceCapabilities.supportsTouch) return
 
-    element.addEventListener('touchstart', handleTouchStart, { passive})
-    element.addEventListener('touchmove', handleTouchMove, { passive})
-    element.addEventListener('touchend', handleTouchEnd, { passive})
+    element.addEventListener('touchstart', handleTouchStart, { passive: false })
+    element.addEventListener('touchmove', handleTouchMove, { passive: false })
+    element.addEventListener('touchend', handleTouchEnd, { passive: false })
 
     return () => {
       element.removeEventListener('touchstart', handleTouchStart)
@@ -328,7 +361,7 @@ export const useMobileTouch = (
     
     setMobileTouchState(prev => ({
       ...prev,
-      activeGestureHints]
+      activeGestureHints: []
     }))
   }, [])
 
@@ -361,19 +394,21 @@ export const useMobileTouch = (
 }
 
 // Convenience hook for basic mobile touch
-export const useBasicMobileTouch = (elementRef) => {
+export const useBasicMobileTouch = (elementRef: React.RefObject<HTMLElement>) => {
   return useMobileTouch(elementRef, {}, {
-    enableTouchFeedback,
-    enableGestureHints,
-    enableTouchSounds,
-    enableHapticFeedback})
+    enableTouchFeedback: true,
+    enableGestureHints: false,
+    enableTouchSounds: false,
+    enableHapticFeedback: true
+  })
 }
 
 // Convenience hook for enhanced mobile touch
-export const useEnhancedMobileTouch = (elementRef) => {
+export const useEnhancedMobileTouch = (elementRef: React.RefObject<HTMLElement>) => {
   return useMobileTouch(elementRef, {}, {
-    enableTouchFeedback,
-    enableGestureHints,
-    enableTouchSounds,
-    enableHapticFeedback})
+    enableTouchFeedback: true,
+    enableGestureHints: true,
+    enableTouchSounds: true,
+    enableHapticFeedback: true
+  })
 }

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

@@ -1,21 +1,36 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
 
 export interface PerformanceThrottlingConfig {
-  enablePerformanceMonitoring?}
+  enablePerformanceMonitoring?: boolean
+  enableAutomaticThrottling?: boolean
+  enableUserExperienceOptimization?: boolean
+  enableBatteryPreservation?: boolean
+  performanceThreshold?: number
+  frameRateTarget?: number
+  memoryThreshold?: number
+  cpuThreshold?: number
+}
 
 export interface PerformanceMetrics {
-  fps}
+  fps: number
+  frameTime: number
+  memoryUsage: number
+  cpuUsage: number
+  performanceScore: number
+  isThrottling: boolean
+  throttleReason: string
+}
 
 export interface PerformanceThrottlingCallbacks {
-  onPerformanceWarning?) => void
-  onThrottlingApplied?, reason) => void
-  onPerformanceRecovery?) => void
-  onUserExperienceOptimized?) => void
+  onPerformanceWarning?: (metrics: PerformanceMetrics) => void
+  onThrottlingApplied?: (level: string, reason: string) => void
+  onPerformanceRecovery?: (metrics: PerformanceMetrics) => void
+  onUserExperienceOptimized?: (optimization: string) => void
 }
 
 export const usePerformanceThrottling = (
-  config= {},
-  callbacks= {}
+  config: PerformanceThrottlingConfig = {},
+  callbacks: PerformanceThrottlingCallbacks = {}
 ) => {
   const {
     enablePerformanceMonitoring = true,
@@ -29,13 +44,14 @@ export const usePerformanceThrottling = (
   } = config
 
   const [metrics, setMetrics] = useState<PerformanceMetrics>({
-    fps,
-    frameTime,
-    memoryUsage,
-    cpuUsage,
-    performanceScore,
-    isThrottling,
-    throttleReason})
+    fps: 60,
+    frameTime: 16.67,
+    memoryUsage: 0,
+    cpuUsage: 0,
+    performanceScore: 100,
+    isThrottling: false,
+    throttleReason: 'none'
+  })
 
   const [isOptimizing, setIsOptimizing] = useState(false)
   const [optimizations, setOptimizations] = useState<string[]>([])
@@ -82,7 +98,7 @@ export const usePerformanceThrottling = (
         else if (memoryUsage > memoryThreshold) throttleReason = 'high_memory'
         else if (cpuUsage > cpuThreshold) throttleReason = 'high_cpu'
         
-        const newMetrics= {
+        const newMetrics: PerformanceMetrics = {
           fps,
           frameTime,
           memoryUsage,
@@ -105,7 +121,7 @@ export const usePerformanceThrottling = (
         lastFrameTimeRef.current = now
       }
     } catch (error) {
-      console.warn('Performance measurement failed, error)
+      console.warn('Performance measurement failed:', error)
     }
   }, [enablePerformanceMonitoring, performanceThreshold, frameRateTarget, memoryThreshold, cpuThreshold, callbacks, metrics.isThrottling])
 
@@ -116,25 +132,25 @@ export const usePerformanceThrottling = (
     setIsOptimizing(true)
     
     setTimeout(() => {
-      let newThrottleLevel= 'none'
-      let optimizations] = []
+      let newThrottleLevel: 'none' | 'light' | 'moderate' | 'aggressive' = 'none'
+      let optimizations: string[] = []
       
       // Determine throttle level based on performance metrics
       if (metrics.performanceScore < 50 || metrics.fps < 30) {
         newThrottleLevel = 'aggressive'
-        optimizations.push('Critical performance)
+        optimizations.push('Critical performance: Maximum throttling applied')
         optimizations.push('All non-essential animations disabled')
         optimizations.push('Frame rate limited to 30fps')
         optimizations.push('Memory usage optimized')
       } else if (metrics.performanceScore < 70 || metrics.fps < 45) {
         newThrottleLevel = 'moderate'
-        optimizations.push('Performance issue)
+        optimizations.push('Performance issue: Moderate throttling applied')
         optimizations.push('Animation complexity reduced by 50%')
         optimizations.push('Frame rate limited to 45fps')
         optimizations.push('Memory optimization enabled')
       } else if (metrics.performanceScore < 85 || metrics.fps < 55) {
         newThrottleLevel = 'light'
-        optimizations.push('Performance warning)
+        optimizations.push('Performance warning: Light throttling applied')
         optimizations.push('Animation complexity reduced by 25%')
         optimizations.push('Frame rate limited to 55fps')
         optimizations.push('Performance monitoring enhanced')
@@ -142,13 +158,13 @@ export const usePerformanceThrottling = (
       
       // Battery preservation considerations
       if (enableBatteryPreservation && newThrottleLevel !== 'none') {
-        optimizations.push('Battery preservation)
+        optimizations.push('Battery preservation: Animation efficiency optimized')
         optimizations.push('GPU usage minimized for power efficiency')
       }
       
       // User experience optimization
       if (enableUserExperienceOptimization && newThrottleLevel !== 'none') {
-        optimizations.push('User experience)
+        optimizations.push('User experience: Smooth performance prioritized')
         optimizations.push('Animation quality balanced with performance')
         optimizations.push('Responsive interactions maintained')
       }
@@ -170,33 +186,33 @@ export const usePerformanceThrottling = (
     const recommendations = []
     
     if (metrics.performanceScore < 50) {
-      recommendations.push('Critical)
+      recommendations.push('Critical: Disable all animations and complex UI operations')
       recommendations.push('Use static UI elements and minimal interactions')
       recommendations.push('Implement aggressive memory cleanup')
     } else if (metrics.performanceScore < 70) {
-      recommendations.push('High)
+      recommendations.push('High: Significantly reduce animation complexity')
       recommendations.push('Limit concurrent animations to 2-3 maximum')
       recommendations.push('Use CSS transforms instead of JavaScript animations')
     } else if (metrics.performanceScore < 85) {
-      recommendations.push('Medium)
+      recommendations.push('Medium: Consider light performance optimization')
       recommendations.push('Monitor animation frame rates closely')
       recommendations.push('Implement animation debouncing')
     }
     
     if (metrics.fps < frameRateTarget * 0.8) {
-      recommendations.push('Low FPS)
+      recommendations.push('Low FPS: Reduce animation frame rate')
       recommendations.push('Use requestAnimationFrame for smooth animations')
       recommendations.push('Implement frame skipping for complex animations')
     }
     
     if (metrics.memoryUsage > memoryThreshold) {
-      recommendations.push('High Memory)
+      recommendations.push('High Memory: Optimize memory usage')
       recommendations.push('Clean up animation references')
       recommendations.push('Use object pooling for repeated animations')
     }
     
     if (metrics.cpuUsage > cpuThreshold) {
-      recommendations.push('High CPU)
+      recommendations.push('High CPU: Reduce computational complexity')
       recommendations.push('Use CSS animations instead of JavaScript')
       recommendations.push('Implement animation pausing when not visible')
     }
@@ -207,32 +223,37 @@ export const usePerformanceThrottling = (
   // Get optimal performance settings
   const getOptimalPerformanceSettings = useCallback(() => {
     const settings = {
-      maxConcurrentAnimations,
-      frameRateLimit,
-      animationQuality,
-      memoryOptimization,
-      cpuOptimization}
+      maxConcurrentAnimations: 5,
+      frameRateLimit: 60,
+      animationQuality: 'high',
+      memoryOptimization: false,
+      cpuOptimization: false
+    }
     
     switch (throttleLevel) {
-      case 'aggressive'= 1
+      case 'aggressive':
+        settings.maxConcurrentAnimations = 1
         settings.frameRateLimit = 30
         settings.animationQuality = 'minimal'
         settings.memoryOptimization = true
         settings.cpuOptimization = true
         break
-      case 'moderate'= 2
+      case 'moderate':
+        settings.maxConcurrentAnimations = 2
         settings.frameRateLimit = 45
         settings.animationQuality = 'medium'
         settings.memoryOptimization = true
         settings.cpuOptimization = true
         break
-      case 'light'= 3
+      case 'light':
+        settings.maxConcurrentAnimations = 3
         settings.frameRateLimit = 55
         settings.animationQuality = 'high'
         settings.memoryOptimization = true
         settings.cpuOptimization = false
         break
-      default= 5
+      default:
+        settings.maxConcurrentAnimations = 5
         settings.frameRateLimit = 60
         settings.animationQuality = 'high'
         settings.memoryOptimization = false
@@ -248,8 +269,9 @@ export const usePerformanceThrottling = (
     setOptimizations([])
     setMetrics(prev => ({
       ...prev,
-      isThrottling,
-      throttleReason}))
+      isThrottling: false,
+      throttleReason: 'none'
+    }))
   }, [])
 
   // Initialize performance monitoring
@@ -265,7 +287,7 @@ export const usePerformanceThrottling = (
         }
       }
     } catch (error) {
-      console.warn('Performance monitoring initialization failed, error)
+      console.warn('Performance monitoring initialization failed:', error)
     }
   }, [enablePerformanceMonitoring, measurePerformance])
 
@@ -304,14 +326,16 @@ export const usePerformanceThrottling = (
     resetThrottling,
     
     // Computed values
-    isThrottling== 'none',
-    performanceLevel= 90 ? 'excellent' = 80 ? 'good' = 70 ? 'fair' ,
-    needsOptimization,
-    recommendations),
-    performanceSettings),
+    isThrottling: throttleLevel !== 'none',
+    performanceLevel: metrics.performanceScore >= 90 ? 'excellent' : 
+                     metrics.performanceScore >= 80 ? 'good' : 
+                     metrics.performanceScore >= 70 ? 'fair' : 'poor',
+    needsOptimization: metrics.performanceScore < 70,
+    recommendations: getThrottlingRecommendations(),
+    performanceSettings: getOptimalPerformanceSettings(),
     
     // Utility functions
-    getPerformanceHealth) => {
+    getPerformanceHealth: () => {
       if (metrics.performanceScore >= 90) return 'excellent'
       if (metrics.performanceScore >= 80) return 'good'
       if (metrics.performanceScore >= 70) return 'fair'