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

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

@@ -1,25 +1,45 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
 
 export interface TouchTarget {
-  id}
+  id: string
+  x: number
+  y: number
+  width: number
+  height: number
+  minSize: number
+  isOptimized: boolean
+}
 
 export interface TouchEvent {
-  type; y}
-  timestamp}
+  type: 'tap' | 'double-tap' | 'long-press' | 'swipe' | 'pinch'
+  target: TouchTarget
+  coordinates: { x: number; y: number }
+  timestamp: number
+  duration?: number
+  distance?: number
+}
 
 export interface MobileLayoutConfig {
-  enableTouchTargetOptimization?}
+  enableTouchTargetOptimization?: boolean
+  enableGestureSupport?: boolean
+  enableTouchFeedback?: boolean
+  enablePerformanceOptimization?: boolean
+  minTouchTargetSize?: number
+  touchFeedbackDuration?: number
+  gestureThreshold?: number
+  longPressDelay?: number
+}
 
 export interface MobileLayoutCallbacks {
-  onTouchTargetOptimized?) => void
-  onGestureDetected?) => void
-  onTouchFeedback?, target) => void
-  onPerformanceOptimization?) => void
+  onTouchTargetOptimized?: (target: TouchTarget) => void
+  onGestureDetected?: (event: TouchEvent) => void
+  onTouchFeedback?: (type: string, target: TouchTarget) => void
+  onPerformanceOptimization?: (optimization: string) => void
 }
 
 export const useMobileLayout = (
-  config= {},
-  callbacks= {}
+  config: MobileLayoutConfig = {},
+  callbacks: MobileLayoutCallbacks = {}
 ) => {
   const {
     enableTouchTargetOptimization = true,
@@ -37,7 +57,7 @@ export const useMobileLayout = (
   const [isOptimizing, setIsOptimizing] = useState(false)
   const [optimizations, setOptimizations] = useState<string[]>([])
 
-  const touchStartRef = useRef<{ x; y; timestamp} | null>(null)
+  const touchStartRef = useRef<{ x: number; y: number; timestamp: number } | null>(null)
   const longPressTimerRef = useRef<number | null>(null)
   const touchFeedbackRef = useRef<HTMLDivElement | null>(null)
 
@@ -51,7 +71,7 @@ export const useMobileLayout = (
     setTimeout(() => {
       const optimizedTargets = touchTargets.map(target => ({
         ...target,
-        isOptimized= minTouchTargetSize && target.height >= minTouchTargetSize
+        isOptimized: target.width >= minTouchTargetSize && target.height >= minTouchTargetSize
       }))
 
       setTouchTargets(optimizedTargets)
@@ -69,10 +89,10 @@ export const useMobileLayout = (
   }, [enableTouchTargetOptimization, touchTargets, minTouchTargetSize, callbacks])
 
   // Add touch target
-  const addTouchTarget = useCallback((target, 'isOptimized'>) => {
-    const newTarget= {
+  const addTouchTarget = useCallback((target: Omit<TouchTarget, 'isOptimized'>) => {
+    const newTarget: TouchTarget = {
       ...target,
-      isOptimized= minTouchTargetSize && target.height >= minTouchTargetSize
+      isOptimized: target.width >= minTouchTargetSize && target.height >= minTouchTargetSize
     }
     
     setTouchTargets(prev => [...prev, newTarget])
@@ -83,12 +103,12 @@ export const useMobileLayout = (
   }, [minTouchTargetSize, callbacks])
 
   // Remove touch target
-  const removeTouchTarget = useCallback((id) => {
+  const removeTouchTarget = useCallback((id: string) => {
     setTouchTargets(prev => prev.filter(target => target.id !== id))
   }, [])
 
   // Touch feedback
-  const showTouchFeedback = useCallback((type, target) => {
+  const showTouchFeedback = useCallback((type: string, target: TouchTarget) => {
     if (!enableTouchFeedback) return
 
     callbacks.onTouchFeedback?.(type, target)
@@ -98,12 +118,12 @@ export const useMobileLayout = (
       const feedback = document.createElement('div')
       feedback.className = `absolute rounded-full bg-cs-primary/20 pointer-events-none transition-all duration-${touchFeedbackDuration}ms`
       feedback.style.cssText = `
-        left}px;
-        top}px;
-        width}px;
-        height}px;
-        transform);
-        opacity;
+        left: ${target.x}px;
+        top: ${target.y}px;
+        width: ${target.width}px;
+        height: ${target.height}px;
+        transform: scale(1.2);
+        opacity: 0.8;
       `
 
       touchFeedbackRef.current.appendChild(feedback)
@@ -124,7 +144,7 @@ export const useMobileLayout = (
   }, [enableTouchFeedback, touchFeedbackDuration, callbacks])
 
   // Gesture detection
-  const detectGesture = useCallback((startEvent, endEvent)=> {
+  const detectGesture = useCallback((startEvent: TouchEvent, endEvent: TouchEvent): TouchEvent | null => {
     if (!enableGestureSupport) return null
 
     const start = touchStartRef.current
@@ -135,21 +155,23 @@ export const useMobileLayout = (
     const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
     const duration = endEvent.timestamp - start.timestamp
 
-    let gestureType] = 'tap'
+    let gestureType: TouchEvent['type'] = 'tap'
 
     if (distance > gestureThreshold) {
       if (Math.abs(deltaX) > Math.abs(deltaY)) {
-        gestureType = deltaX > 0 ? 'swipe' } else {
-        gestureType = deltaY > 0 ? 'swipe' }
+        gestureType = deltaX > 0 ? 'swipe' : 'swipe'
+      } else {
+        gestureType = deltaY > 0 ? 'swipe' : 'swipe'
+      }
     } else if (duration > longPressDelay) {
       gestureType = 'long-press'
     }
 
-    const gesture= {
-      type,
-      target,
-      coordinates,
-      timestamp,
+    const gesture: TouchEvent = {
+      type: gestureType,
+      target: startEvent.target,
+      coordinates: endEvent.coordinates,
+      timestamp: endEvent.timestamp,
       duration,
       distance
     }
@@ -161,22 +183,22 @@ export const useMobileLayout = (
   }, [enableGestureSupport, gestureThreshold, longPressDelay, callbacks])
 
   // Touch event handlers
-  const handleTouchStart = useCallback((event, target) => {
+  const handleTouchStart = useCallback((event: React.TouchEvent, target: TouchTarget) => {
     const touch = event.touches[0]
 
     touchStartRef.current = {
-      x,
-      y,
-      timestamp)
+      x: touch.clientX,
+      y: touch.clientY,
+      timestamp: Date.now()
     }
 
     // Start long press timer
     longPressTimerRef.current = window.setTimeout(() => {
-      const longPressEvent= {
-        type,
+      const longPressEvent: TouchEvent = {
+        type: 'long-press',
         target,
-        coordinates, y},
-        timestamp)
+        coordinates: { x: touch.clientX, y: touch.clientY },
+        timestamp: Date.now()
       }
       
       setActiveGestures(prev => [...prev, longPressEvent])
@@ -187,7 +209,7 @@ export const useMobileLayout = (
     showTouchFeedback('touch-start', target)
   }, [longPressDelay, callbacks, showTouchFeedback])
 
-  const handleTouchEnd = useCallback((event, target) => {
+  const handleTouchEnd = useCallback((event: React.TouchEvent, target: TouchTarget) => {
     if (longPressTimerRef.current) {
       clearTimeout(longPressTimerRef.current)
       longPressTimerRef.current = null
@@ -195,15 +217,15 @@ export const useMobileLayout = (
 
     const touch = event.changedTouches[0]
     const gesture = detectGesture({
-      type,
+      type: 'tap',
       target,
-      coordinates, y},
-      timestamp)
+      coordinates: { x: touch.clientX, y: touch.clientY },
+      timestamp: Date.now()
     }, {
-      type,
+      type: 'tap',
       target,
-      coordinates, y},
-      timestamp)
+      coordinates: { x: touch.clientX, y: touch.clientY },
+      timestamp: Date.now()
     })
     if (gesture) {
       showTouchFeedback(gesture.type, target)
@@ -270,10 +292,10 @@ export const useMobileLayout = (
     optimizePerformance,
     
     // Computed values
-    touchTargetCount,
-    optimizedTargetCount=> t.isOptimized).length,
-    gestureCount,
-    isTouchOptimized=> t.isOptimized)
+    touchTargetCount: touchTargets.length,
+    optimizedTargetCount: touchTargets.filter(t => t.isOptimized).length,
+    gestureCount: activeGestures.length,
+    isTouchOptimized: touchTargets.every(t => t.isOptimized)
   }
 }
 

package/dist/hooks/use-mobile-optimization.esm.js

@@ -1,22 +1,37 @@
 import { useState, useCallback, useRef, useEffect } from 'react'
 
 export interface MobileOptimizationConfig {
-  enableTouchOptimization?}
+  enableTouchOptimization?: boolean
+  enablePerformanceOptimization?: boolean
+  enableBatteryOptimization?: boolean
+  enableAccessibilityOptimization?: boolean
+  enableResponsiveOptimization?: boolean
+  touchTargetSize?: number
+  performanceThreshold?: number
+  batteryThreshold?: number
+}
 
 export interface MobileOptimizationState {
-  isMobile}
+  isMobile: boolean
+  isTouchDevice: boolean
+  screenSize: 'small' | 'medium' | 'large'
+  orientation: 'portrait' | 'landscape'
+  batteryLevel: number
+  performanceScore: number
+  accessibilityLevel: 'basic' | 'enhanced' | 'advanced'
+}
 
 export interface MobileOptimizationCallbacks {
-  onMobileOptimized?) => void
-  onTouchOptimized?) => void
-  onPerformanceOptimized?) => void
-  onBatteryOptimized?) => void
-  onAccessibilityEnhanced?) => void
+  onMobileOptimized?: (optimization: string) => void
+  onTouchOptimized?: (feature: string) => void
+  onPerformanceOptimized?: (improvement: string) => void
+  onBatteryOptimized?: (strategy: string) => void
+  onAccessibilityEnhanced?: (feature: string) => void
 }
 
 export const useMobileOptimization = (
-  config= {},
-  callbacks= {}
+  config: MobileOptimizationConfig = {},
+  callbacks: MobileOptimizationCallbacks = {}
 ) => {
   const {
     enableTouchOptimization = true,
@@ -29,13 +44,14 @@ export const useMobileOptimization = (
   } = config
 
   const [state, setState] = useState<MobileOptimizationState>({
-    isMobile,
-    isTouchDevice,
-    screenSize,
-    orientation,
-    batteryLevel,
-    performanceScore,
-    accessibilityLevel})
+    isMobile: false,
+    isTouchDevice: false,
+    screenSize: 'medium',
+    orientation: 'portrait',
+    batteryLevel: 1,
+    performanceScore: 100,
+    accessibilityLevel: 'basic'
+  })
 
   const [isOptimizing, setIsOptimizing] = useState(false)
   const [optimizations, setOptimizations] = useState<string[]>([])
@@ -53,14 +69,17 @@ export const useMobileOptimization = (
     
     setState(prev => ({
       ...prev,
-      isMobile,
-      isTouchDevice}))
+      isMobile: isMobileDevice,
+      isTouchDevice: isTouchDevice
+    }))
   }, [])
 
   // Screen size detection
   const detectScreenSize = useCallback(() => {
     const width = window.innerWidth
-    let screenSize) {
+    let screenSize: 'small' | 'medium' | 'large'
+    
+    if (width < 768) {
       screenSize = 'small'
     } else if (width < 1024) {
       screenSize = 'medium'
@@ -76,7 +95,9 @@ export const useMobileOptimization = (
 
   // Orientation detection
   const detectOrientation = useCallback(() => {
-    const orientation = window.innerWidth > window.innerHeight ? 'landscape' => ({
+    const orientation = window.innerWidth > window.innerHeight ? 'landscape' : 'portrait'
+    
+    setState(prev => ({
       ...prev,
       orientation
     }))
@@ -199,9 +220,9 @@ export const useMobileOptimization = (
 
   // Touch target validation
   const validateTouchTargets = useCallback(() => {
-    if (!enableTouchOptimization) return { isValid, issues] }
+    if (!enableTouchOptimization) return { isValid: true, issues: [] }
     
-    const issues] = []
+    const issues: string[] = []
     const targets = Array.from(touchTargets.values())
     
     targets.forEach((target, index) => {
@@ -209,35 +230,41 @@ export const useMobileOptimization = (
       const minSize = Math.min(rect.width, rect.height)
       
       if (minSize < touchTargetSize) {
-        issues.push(`Touch target ${index} is too small}px < ${touchTargetSize}px`)
+        issues.push(`Touch target ${index} is too small: ${minSize}px < ${touchTargetSize}px`)
       }
     })
     
     return {
-      isValid=== 0,
+      isValid: issues.length === 0,
       issues
     }
   }, [enableTouchOptimization, touchTargets, touchTargetSize])
 
   // Mobile-specific component optimization
   const optimizeComponentForMobile = useCallback((
-    componentId,
-    optimizationType) => {
+    componentId: string,
+    optimizationType: 'touch' | 'performance' | 'battery' | 'accessibility' | 'responsive'
+  ) => {
     setIsOptimizing(true)
     
     setTimeout(() => {
-      let optimizations] = []
+      let optimizations: string[] = []
       
       switch (optimizationType) {
-        case 'touch'= [`Touch optimization applied to ${componentId}`]
+        case 'touch':
+          optimizations = [`Touch optimization applied to ${componentId}`]
           break
-        case 'performance'= [`Performance optimization applied to ${componentId}`]
+        case 'performance':
+          optimizations = [`Performance optimization applied to ${componentId}`]
           break
-        case 'battery'= [`Battery optimization applied to ${componentId}`]
+        case 'battery':
+          optimizations = [`Battery optimization applied to ${componentId}`]
           break
-        case 'accessibility'= [`Accessibility optimization applied to ${componentId}`]
+        case 'accessibility':
+          optimizations = [`Accessibility optimization applied to ${componentId}`]
           break
-        case 'responsive'= [`Responsive optimization applied to ${componentId}`]
+        case 'responsive':
+          optimizations = [`Responsive optimization applied to ${componentId}`]
           break
       }
       
@@ -253,13 +280,13 @@ export const useMobileOptimization = (
   // Mobile optimization analysis
   const analyzeMobileOptimization = useCallback(() => {
     const analysis = {
-      isMobileOptimized,
-      touchOptimized=> opt.includes('Touch')),
-      performanceOptimized=> opt.includes('Performance')),
-      batteryOptimized=> opt.includes('Battery')),
-      accessibilityOptimized=> opt.includes('Accessibility')),
-      responsiveOptimized=> opt.includes('Responsive')),
-      recommendations] as string[]
+      isMobileOptimized: state.isMobile && optimizations.length > 0,
+      touchOptimized: optimizations.some(opt => opt.includes('Touch')),
+      performanceOptimized: optimizations.some(opt => opt.includes('Performance')),
+      batteryOptimized: optimizations.some(opt => opt.includes('Battery')),
+      accessibilityOptimized: optimizations.some(opt => opt.includes('Accessibility')),
+      responsiveOptimized: optimizations.some(opt => opt.includes('Responsive')),
+      recommendations: [] as string[]
     }
     
     if (!analysis.touchOptimized && state.isTouchDevice) {
@@ -313,9 +340,10 @@ export const useMobileOptimization = (
           const battery = await (navigator as any).getBattery()
           setState(prev => ({
             ...prev,
-            batteryLevel}))
+            batteryLevel: battery.level
+          }))
         } catch (error) {
-          console.warn('Battery monitoring failed, error)
+          console.warn('Battery monitoring failed:', error)
         }
       }, 10000)
     }
@@ -363,15 +391,15 @@ export const useMobileOptimization = (
     analyzeMobileOptimization,
     
     // Utility functions
-    isMobileOptimized) => state.isMobile && optimizations.length > 0,
-    getOptimizationLevel) => {
+    isMobileOptimized: () => state.isMobile && optimizations.length > 0,
+    getOptimizationLevel: () => {
       const count = optimizations.length
       if (count === 0) return 'none'
       if (count < 3) return 'basic'
       if (count < 6) return 'intermediate'
       return 'advanced'
     },
-    clearOptimizations) => setOptimizations([])
+    clearOptimizations: () => setOptimizations([])
   }
 }
 

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

@@ -1,22 +1,37 @@
 import { useState, useCallback, useRef, useEffect } from 'react'
 
 export interface MobileOptimizationConfig {
-  enableTouchOptimization?}
+  enableTouchOptimization?: boolean
+  enablePerformanceOptimization?: boolean
+  enableBatteryOptimization?: boolean
+  enableAccessibilityOptimization?: boolean
+  enableResponsiveOptimization?: boolean
+  touchTargetSize?: number
+  performanceThreshold?: number
+  batteryThreshold?: number
+}
 
 export interface MobileOptimizationState {
-  isMobile}
+  isMobile: boolean
+  isTouchDevice: boolean
+  screenSize: 'small' | 'medium' | 'large'
+  orientation: 'portrait' | 'landscape'
+  batteryLevel: number
+  performanceScore: number
+  accessibilityLevel: 'basic' | 'enhanced' | 'advanced'
+}
 
 export interface MobileOptimizationCallbacks {
-  onMobileOptimized?) => void
-  onTouchOptimized?) => void
-  onPerformanceOptimized?) => void
-  onBatteryOptimized?) => void
-  onAccessibilityEnhanced?) => void
+  onMobileOptimized?: (optimization: string) => void
+  onTouchOptimized?: (feature: string) => void
+  onPerformanceOptimized?: (improvement: string) => void
+  onBatteryOptimized?: (strategy: string) => void
+  onAccessibilityEnhanced?: (feature: string) => void
 }
 
 export const useMobileOptimization = (
-  config= {},
-  callbacks= {}
+  config: MobileOptimizationConfig = {},
+  callbacks: MobileOptimizationCallbacks = {}
 ) => {
   const {
     enableTouchOptimization = true,
@@ -29,13 +44,14 @@ export const useMobileOptimization = (
   } = config
 
   const [state, setState] = useState<MobileOptimizationState>({
-    isMobile,
-    isTouchDevice,
-    screenSize,
-    orientation,
-    batteryLevel,
-    performanceScore,
-    accessibilityLevel})
+    isMobile: false,
+    isTouchDevice: false,
+    screenSize: 'medium',
+    orientation: 'portrait',
+    batteryLevel: 1,
+    performanceScore: 100,
+    accessibilityLevel: 'basic'
+  })
 
   const [isOptimizing, setIsOptimizing] = useState(false)
   const [optimizations, setOptimizations] = useState<string[]>([])
@@ -53,14 +69,17 @@ export const useMobileOptimization = (
     
     setState(prev => ({
       ...prev,
-      isMobile,
-      isTouchDevice}))
+      isMobile: isMobileDevice,
+      isTouchDevice: isTouchDevice
+    }))
   }, [])
 
   // Screen size detection
   const detectScreenSize = useCallback(() => {
     const width = window.innerWidth
-    let screenSize) {
+    let screenSize: 'small' | 'medium' | 'large'
+    
+    if (width < 768) {
       screenSize = 'small'
     } else if (width < 1024) {
       screenSize = 'medium'
@@ -76,7 +95,9 @@ export const useMobileOptimization = (
 
   // Orientation detection
   const detectOrientation = useCallback(() => {
-    const orientation = window.innerWidth > window.innerHeight ? 'landscape' => ({
+    const orientation = window.innerWidth > window.innerHeight ? 'landscape' : 'portrait'
+    
+    setState(prev => ({
       ...prev,
       orientation
     }))
@@ -199,9 +220,9 @@ export const useMobileOptimization = (
 
   // Touch target validation
   const validateTouchTargets = useCallback(() => {
-    if (!enableTouchOptimization) return { isValid, issues] }
+    if (!enableTouchOptimization) return { isValid: true, issues: [] }
     
-    const issues] = []
+    const issues: string[] = []
     const targets = Array.from(touchTargets.values())
     
     targets.forEach((target, index) => {
@@ -209,35 +230,41 @@ export const useMobileOptimization = (
       const minSize = Math.min(rect.width, rect.height)
       
       if (minSize < touchTargetSize) {
-        issues.push(`Touch target ${index} is too small}px < ${touchTargetSize}px`)
+        issues.push(`Touch target ${index} is too small: ${minSize}px < ${touchTargetSize}px`)
       }
     })
     
     return {
-      isValid=== 0,
+      isValid: issues.length === 0,
       issues
     }
   }, [enableTouchOptimization, touchTargets, touchTargetSize])
 
   // Mobile-specific component optimization
   const optimizeComponentForMobile = useCallback((
-    componentId,
-    optimizationType) => {
+    componentId: string,
+    optimizationType: 'touch' | 'performance' | 'battery' | 'accessibility' | 'responsive'
+  ) => {
     setIsOptimizing(true)
     
     setTimeout(() => {
-      let optimizations] = []
+      let optimizations: string[] = []
       
       switch (optimizationType) {
-        case 'touch'= [`Touch optimization applied to ${componentId}`]
+        case 'touch':
+          optimizations = [`Touch optimization applied to ${componentId}`]
           break
-        case 'performance'= [`Performance optimization applied to ${componentId}`]
+        case 'performance':
+          optimizations = [`Performance optimization applied to ${componentId}`]
           break
-        case 'battery'= [`Battery optimization applied to ${componentId}`]
+        case 'battery':
+          optimizations = [`Battery optimization applied to ${componentId}`]
           break
-        case 'accessibility'= [`Accessibility optimization applied to ${componentId}`]
+        case 'accessibility':
+          optimizations = [`Accessibility optimization applied to ${componentId}`]
           break
-        case 'responsive'= [`Responsive optimization applied to ${componentId}`]
+        case 'responsive':
+          optimizations = [`Responsive optimization applied to ${componentId}`]
           break
       }
       
@@ -253,13 +280,13 @@ export const useMobileOptimization = (
   // Mobile optimization analysis
   const analyzeMobileOptimization = useCallback(() => {
     const analysis = {
-      isMobileOptimized,
-      touchOptimized=> opt.includes('Touch')),
-      performanceOptimized=> opt.includes('Performance')),
-      batteryOptimized=> opt.includes('Battery')),
-      accessibilityOptimized=> opt.includes('Accessibility')),
-      responsiveOptimized=> opt.includes('Responsive')),
-      recommendations] as string[]
+      isMobileOptimized: state.isMobile && optimizations.length > 0,
+      touchOptimized: optimizations.some(opt => opt.includes('Touch')),
+      performanceOptimized: optimizations.some(opt => opt.includes('Performance')),
+      batteryOptimized: optimizations.some(opt => opt.includes('Battery')),
+      accessibilityOptimized: optimizations.some(opt => opt.includes('Accessibility')),
+      responsiveOptimized: optimizations.some(opt => opt.includes('Responsive')),
+      recommendations: [] as string[]
     }
     
     if (!analysis.touchOptimized && state.isTouchDevice) {
@@ -313,9 +340,10 @@ export const useMobileOptimization = (
           const battery = await (navigator as any).getBattery()
           setState(prev => ({
             ...prev,
-            batteryLevel}))
+            batteryLevel: battery.level
+          }))
         } catch (error) {
-          console.warn('Battery monitoring failed, error)
+          console.warn('Battery monitoring failed:', error)
         }
       }, 10000)
     }
@@ -363,15 +391,15 @@ export const useMobileOptimization = (
     analyzeMobileOptimization,
     
     // Utility functions
-    isMobileOptimized) => state.isMobile && optimizations.length > 0,
-    getOptimizationLevel) => {
+    isMobileOptimized: () => state.isMobile && optimizations.length > 0,
+    getOptimizationLevel: () => {
       const count = optimizations.length
       if (count === 0) return 'none'
       if (count < 3) return 'basic'
       if (count < 6) return 'intermediate'
       return 'advanced'
     },
-    clearOptimizations) => setOptimizations([])
+    clearOptimizations: () => setOptimizations([])
   }
 }