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

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

@@ -1,25 +1,51 @@
 import { useState, useCallback, useRef, useEffect } from 'react'
 
 export interface KeyboardOptimizationConfig {
-  enableKeyboardDetection?}
+  enableKeyboardDetection?: boolean
+  enableAutoOptimization?: boolean
+  enablePerformanceMonitoring?: boolean
+  enableBatteryOptimization?: boolean
+  enableAccessibilitySupport?: boolean
+  keyboardDetectionInterval?: number
+  performanceThreshold?: number
+}
 
 export interface KeyboardState {
-  isVisible}
+  isVisible: boolean
+  height: number
+  type: 'default' | 'numeric' | 'email' | 'tel' | 'url' | 'search' | 'decimal'
+  orientation: 'portrait' | 'landscape'
+  platform: 'ios' | 'android' | 'unknown'
+  language: string
+  inputMode: string
+  autoCapitalize: string
+  autoComplete: string
+  autoCorrect: string
+  spellCheck: boolean
+}
 
 export interface KeyboardOptimization {
-  id}
+  id: string
+  name: string
+  type: 'keyboard' | 'input' | 'performance' | 'accessibility'
+  applied: boolean
+  impact: 'low' | 'medium' | 'high'
+  description: string
+  keyboardType?: string
+  inputMode?: string
+}
 
 export interface MobileKeyboardOptimizationCallbacks {
-  onKeyboardStateChanged?) => void
-  onOptimizationApplied?) => void
-  onPerformanceOptimized?) => void
-  onBatteryOptimized?) => void
-  onAccessibilityEnhanced?) => void
+  onKeyboardStateChanged?: (state: KeyboardState) => void
+  onOptimizationApplied?: (optimization: KeyboardOptimization) => void
+  onPerformanceOptimized?: (optimization: string) => void
+  onBatteryOptimized?: (strategy: string) => void
+  onAccessibilityEnhanced?: (feature: string) => void
 }
 
 export const useMobileKeyboardOptimization = (
-  config= {},
-  callbacks= {}
+  config: KeyboardOptimizationConfig = {},
+  callbacks: MobileKeyboardOptimizationCallbacks = {}
 ) => {
   const {
     enableKeyboardDetection = true,
@@ -32,25 +58,27 @@ export const useMobileKeyboardOptimization = (
   } = config
 
   const [keyboardState, setKeyboardState] = useState<KeyboardState>({
-    isVisible,
-    height,
-    type,
-    orientation,
-    platform,
-    language,
-    inputMode,
-    autoCapitalize,
-    autoComplete,
-    autoCorrect,
-    spellCheck})
+    isVisible: false,
+    height: 0,
+    type: 'default',
+    orientation: 'portrait',
+    platform: 'unknown',
+    language: 'en-US',
+    inputMode: 'text',
+    autoCapitalize: 'sentences',
+    autoComplete: 'on',
+    autoCorrect: 'on',
+    spellCheck: true
+  })
 
   const [optimizations, setOptimizations] = useState<KeyboardOptimization[]>([])
   const [isOptimizing, setIsOptimizing] = useState(false)
   const [performanceMetrics, setPerformanceMetrics] = useState({
-    frameRate,
-    inputLatency,
-    keyboardResponseTime,
-    memoryUsage})
+    frameRate: 60,
+    inputLatency: 0,
+    keyboardResponseTime: 0,
+    memoryUsage: 0
+  })
 
   const keyboardDetectionRef = useRef<number | null>(null)
   const performanceTimerRef = useRef<number | null>(null)
@@ -68,7 +96,8 @@ export const useMobileKeyboardOptimization = (
 
   // Detect device orientation
   const detectOrientation = useCallback(() => {
-    return window.innerHeight > window.innerWidth ? 'portrait' }, [])
+    return window.innerHeight > window.innerWidth ? 'portrait' : 'landscape'
+  }, [])
 
   // Detect keyboard visibility
   const detectKeyboardVisibility = useCallback(() => {
@@ -82,12 +111,14 @@ export const useMobileKeyboardOptimization = (
       setKeyboardState(prev => ({
         ...prev,
         isVisible,
-        height}))
+        height: isVisible ? heightDifference : 0
+      }))
       
       callbacks.onKeyboardStateChanged?.({
         ...keyboardState,
         isVisible,
-        height})
+        height: isVisible ? heightDifference : 0
+      })
     }
     
     lastKeyboardHeightRef.current = currentHeight
@@ -128,7 +159,7 @@ export const useMobileKeyboardOptimization = (
         
         setPerformanceMetrics(prev => ({
           ...prev,
-          frameRate,
+          frameRate: fps,
           inputLatency
         }))
         
@@ -149,28 +180,30 @@ export const useMobileKeyboardOptimization = (
   }, [enablePerformanceMonitoring])
 
   // Keyboard type optimization
-  const optimizeKeyboardType = useCallback((inputType) => {
+  const optimizeKeyboardType = useCallback((inputType: string) => {
     setIsOptimizing(true)
     
     setTimeout(() => {
-      const keyboardOptimizations] = [
+      const keyboardOptimizations: KeyboardOptimization[] = [
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description} input`,
-          keyboardType,
-          inputMode},
+          id: 'keyboard-type-1',
+          name: 'Keyboard Type Optimization',
+          type: 'keyboard',
+          applied: true,
+          impact: 'high',
+          description: `Optimized keyboard type for ${inputType} input`,
+          keyboardType: inputType,
+          inputMode: inputType
+        },
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description,
-          inputMode}
+          id: 'keyboard-type-2',
+          name: 'Input Mode Enhancement',
+          type: 'input',
+          applied: true,
+          impact: 'medium',
+          description: 'Enhanced input mode for better mobile experience',
+          inputMode: inputType
+        }
       ]
       
       setOptimizations(prev => [...prev, ...keyboardOptimizations])
@@ -183,27 +216,29 @@ export const useMobileKeyboardOptimization = (
   }, [callbacks])
 
   // Input behavior optimization
-  const optimizeInputBehavior = useCallback((inputType) => {
+  const optimizeInputBehavior = useCallback((inputType: string) => {
     setIsOptimizing(true)
     
     setTimeout(() => {
-      const inputOptimizations] = [
+      const inputOptimizations: KeyboardOptimization[] = [
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description,
-          inputMode},
+          id: 'input-behavior-1',
+          name: 'Auto-capitalization Optimization',
+          type: 'input',
+          applied: true,
+          impact: 'medium',
+          description: 'Optimized auto-capitalization for mobile input',
+          inputMode: inputType
+        },
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description,
-          inputMode}
+          id: 'input-behavior-2',
+          name: 'Autocomplete Enhancement',
+          type: 'input',
+          applied: true,
+          impact: 'medium',
+          description: 'Enhanced autocomplete for better user experience',
+          inputMode: inputType
+        }
       ]
       
       setOptimizations(prev => [...prev, ...inputOptimizations])
@@ -222,21 +257,23 @@ export const useMobileKeyboardOptimization = (
     setIsOptimizing(true)
     
     setTimeout(() => {
-      const performanceOptimizations] = [
+      const performanceOptimizations: KeyboardOptimization[] = [
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description},
+          id: 'performance-1',
+          name: 'Input Latency Optimization',
+          type: 'performance',
+          applied: true,
+          impact: 'high',
+          description: 'Reduced input latency for smoother typing experience'
+        },
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description}
+          id: 'performance-2',
+          name: 'Frame Rate Optimization',
+          type: 'performance',
+          applied: true,
+          impact: 'medium',
+          description: 'Optimized frame rate for keyboard interactions'
+        }
       ]
       
       setOptimizations(prev => [...prev, ...performanceOptimizations])
@@ -255,21 +292,23 @@ export const useMobileKeyboardOptimization = (
     setIsOptimizing(true)
     
     setTimeout(() => {
-      const batteryOptimizations] = [
+      const batteryOptimizations: KeyboardOptimization[] = [
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description},
+          id: 'battery-1',
+          name: 'Battery-Conscious Keyboard',
+          type: 'performance',
+          applied: true,
+          impact: 'medium',
+          description: 'Battery-optimized keyboard behavior'
+        },
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description}
+          id: 'battery-2',
+          name: 'Efficient Input Processing',
+          type: 'performance',
+          applied: true,
+          impact: 'low',
+          description: 'Efficient input processing for battery optimization'
+        }
       ]
       
       setOptimizations(prev => [...prev, ...batteryOptimizations])
@@ -288,21 +327,23 @@ export const useMobileKeyboardOptimization = (
     setIsOptimizing(true)
     
     setTimeout(() => {
-      const accessibilityFeatures] = [
+      const accessibilityFeatures: KeyboardOptimization[] = [
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description},
+          id: 'accessibility-1',
+          name: 'Keyboard Navigation',
+          type: 'accessibility',
+          applied: true,
+          impact: 'high',
+          description: 'Enhanced keyboard navigation support'
+        },
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description}
+          id: 'accessibility-2',
+          name: 'Screen Reader Support',
+          type: 'accessibility',
+          applied: true,
+          impact: 'medium',
+          description: 'Improved screen reader compatibility'
+        }
       ]
       
       setOptimizations(prev => [...prev, ...accessibilityFeatures])
@@ -315,7 +356,7 @@ export const useMobileKeyboardOptimization = (
   }, [enableAccessibilitySupport, callbacks])
 
   // Auto-optimize based on input type
-  const autoOptimizeForInputType = useCallback((inputType) => {
+  const autoOptimizeForInputType = useCallback((inputType: string) => {
     optimizeKeyboardType(inputType)
     optimizeInputBehavior(inputType)
     optimizePerformance()
@@ -325,7 +366,7 @@ export const useMobileKeyboardOptimization = (
 
   // Get keyboard optimization recommendations
   const getOptimizationRecommendations = useCallback(() => {
-    const recommendations] = []
+    const recommendations: string[] = []
     
     if (performanceMetrics.frameRate < performanceThreshold) {
       recommendations.push('Consider reducing keyboard animation complexity to improve frame rate')
@@ -412,18 +453,18 @@ export const useMobileKeyboardOptimization = (
     autoOptimizeForInputType,
     
     // Utility functions
-    isKeyboardVisible) => keyboardState.isVisible,
-    getKeyboardHeight) => keyboardState.height,
-    getPlatform) => keyboardState.platform,
-    getOrientation) => keyboardState.orientation,
-    getOptimizationStatus) => ({
-      keyboard=> o.type === 'keyboard'),
-      input=> o.type === 'input'),
-      performance=> o.type === 'performance'),
-      accessibility=> o.type === 'accessibility')
+    isKeyboardVisible: () => keyboardState.isVisible,
+    getKeyboardHeight: () => keyboardState.height,
+    getPlatform: () => keyboardState.platform,
+    getOrientation: () => keyboardState.orientation,
+    getOptimizationStatus: () => ({
+      keyboard: optimizations.some(o => o.type === 'keyboard'),
+      input: optimizations.some(o => o.type === 'input'),
+      performance: optimizations.some(o => o.type === 'performance'),
+      accessibility: optimizations.some(o => o.type === 'accessibility')
     }),
     getOptimizationRecommendations,
-    clearOptimizations) => setOptimizations([])
+    clearOptimizations: () => setOptimizations([])
   }
 }
 

package/dist/hooks/use-mobile-layout.esm.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)
   }
 }