@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.3 → 0.1.5

package/src/hooks/use-semantic-input.ts

@@ -0,0 +1,565 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+
+export interface InputType {
+  type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' | 'month' | 'week'
+  pattern?: RegExp
+  autocomplete?: string
+  inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
+  keyboardType?: 'default' | 'email' | 'numeric' | 'phone' | 'url'
+}
+
+export interface SemanticConfig {
+  enableAutoDetection: boolean
+  enableKeyboardOptimization: boolean
+  enableAutocomplete: boolean
+  enableTouchOptimization: boolean
+  enableAccessibility: boolean
+  enablePerformanceMonitoring: boolean
+}
+
+export interface SemanticCallbacks {
+  onInputTypeDetected?: (inputType: InputType) => void
+  onKeyboardOptimization?: (optimized: boolean) => void
+  onAutocompleteEnhanced?: (enhanced: boolean) => void
+  onTouchOptimized?: (optimized: boolean) => void
+}
+
+export interface SemanticInputState {
+  detectedType: InputType | null
+  isOptimized: boolean
+  keyboardOptimized: boolean
+  autocompleteEnhanced: boolean
+  touchOptimized: boolean
+  performanceMetrics: {
+    detectionTime: number
+    optimizationTime: number
+    lastOptimization: number
+  }
+}
+
+export const useSemanticInput = (
+  initialType: InputType,
+  callbacks: SemanticCallbacks = {},
+  config: Partial<SemanticConfig> = {}
+) => {
+  const defaultConfig: SemanticConfig = {
+    enableAutoDetection: true,
+    enableKeyboardOptimization: true,
+    enableAutocomplete: true,
+    enableTouchOptimization: true,
+    enableAccessibility: true,
+    enablePerformanceMonitoring: true,
+    ...config
+  }
+
+  const [semanticState, setSemanticState] = useState<SemanticInputState>({
+    detectedType: null,
+    isOptimized: false,
+    keyboardOptimized: false,
+    autocompleteEnhanced: false,
+    touchOptimized: false,
+    performanceMetrics: {
+      detectionTime: 0,
+      optimizationTime: 0,
+      lastOptimization: 0
+    }
+  })
+
+  const inputRef = useRef<HTMLInputElement | null>(null)
+  const optimizationTimerRef = useRef<NodeJS.Timeout | null>(null)
+
+  // Detect input type based on content and context
+  const detectInputType = useCallback((value: string, name: string, placeholder?: string): InputType => {
+    const startTime = performance.now()
+    
+    let detectedType: InputType = { ...initialType }
+
+    // Auto-detect based on field name
+    if (defaultConfig.enableAutoDetection) {
+      const fieldName = name.toLowerCase()
+      const fieldValue = value.toLowerCase()
+
+      // Email detection
+      if (fieldName.includes('email') || fieldName.includes('mail') || fieldValue.includes('@')) {
+        detectedType = {
+          type: 'email',
+          autocomplete: 'email',
+          inputMode: 'email',
+          keyboardType: 'email'
+        }
+      }
+      // Phone detection
+      else if (fieldName.includes('phone') || fieldName.includes('tel') || fieldName.includes('mobile')) {
+        detectedType = {
+          type: 'tel',
+          autocomplete: 'tel',
+          inputMode: 'tel',
+          keyboardType: 'phone'
+        }
+      }
+      // URL detection
+      else if (fieldName.includes('url') || fieldName.includes('website') || fieldName.includes('link')) {
+        detectedType = {
+          type: 'url',
+          autocomplete: 'url',
+          inputMode: 'url',
+          keyboardType: 'url'
+        }
+      }
+      // Search detection
+      else if (fieldName.includes('search') || fieldName.includes('query')) {
+        detectedType = {
+          type: 'search',
+          autocomplete: 'off',
+          inputMode: 'search',
+          keyboardType: 'default'
+        }
+      }
+      // Number detection
+      else if (fieldName.includes('number') || fieldName.includes('amount') || fieldName.includes('price') || fieldName.includes('quantity')) {
+        detectedType = {
+          type: 'number',
+          autocomplete: 'off',
+          inputMode: 'numeric',
+          keyboardType: 'numeric'
+        }
+      }
+      // Date detection
+      else if (fieldName.includes('date') || fieldName.includes('birth') || fieldName.includes('anniversary')) {
+        detectedType = {
+          type: 'date',
+          autocomplete: 'bday',
+          inputMode: 'none',
+          keyboardType: 'default'
+        }
+      }
+      // Password detection
+      else if (fieldName.includes('password') || fieldName.includes('pass') || fieldName.includes('secret')) {
+        detectedType = {
+          type: 'password',
+          autocomplete: 'current-password',
+          inputMode: 'text',
+          keyboardType: 'default'
+        }
+      }
+    }
+
+    // Auto-detect based on placeholder text
+    if (placeholder && defaultConfig.enableAutoDetection) {
+      const placeholderLower = placeholder.toLowerCase()
+      
+      if (placeholderLower.includes('@') || placeholderLower.includes('email')) {
+        detectedType = {
+          type: 'email',
+          autocomplete: 'email',
+          inputMode: 'email',
+          keyboardType: 'email'
+        }
+      } else if (placeholderLower.includes('http') || placeholderLower.includes('www')) {
+        detectedType = {
+          type: 'url',
+          autocomplete: 'url',
+          inputMode: 'url',
+          keyboardType: 'url'
+        }
+      } else if (placeholderLower.includes('search') || placeholderLower.includes('find')) {
+        detectedType = {
+          type: 'search',
+          autocomplete: 'off',
+          inputMode: 'search',
+          keyboardType: 'default'
+        }
+      }
+    }
+
+    // Auto-detect based on value pattern
+    if (value && defaultConfig.enableAutoDetection) {
+      // Email pattern
+      if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+        detectedType = {
+          type: 'email',
+          autocomplete: 'email',
+          inputMode: 'email',
+          keyboardType: 'email'
+        }
+      }
+      // Phone pattern
+      else if (/^[\+]?[0-9\s\-\(\)]{7,}$/.test(value)) {
+        detectedType = {
+          type: 'tel',
+          autocomplete: 'tel',
+          inputMode: 'tel',
+          keyboardType: 'phone'
+        }
+      }
+      // URL pattern
+      else if (/^https?:\/\/.+/.test(value)) {
+        detectedType = {
+          type: 'url',
+          autocomplete: 'url',
+          inputMode: 'url',
+          keyboardType: 'url'
+        }
+      }
+      // Number pattern
+      else if (/^[0-9]+(\.[0-9]+)?$/.test(value)) {
+        detectedType = {
+          type: 'number',
+          autocomplete: 'off',
+          inputMode: 'numeric',
+          keyboardType: 'numeric'
+        }
+      }
+    }
+
+    const endTime = performance.now()
+    const detectionTime = endTime - startTime
+
+    setSemanticState(prev => ({
+      ...prev,
+      detectedType,
+      performanceMetrics: {
+        ...prev.performanceMetrics,
+        detectionTime
+      }
+    }))
+
+    callbacks.onInputTypeDetected?.(detectedType)
+    return detectedType
+  }, [initialType, defaultConfig.enableAutoDetection, callbacks])
+
+  // Optimize keyboard for mobile devices
+  const optimizeKeyboard = useCallback((inputType: InputType) => {
+    if (!defaultConfig.enableKeyboardOptimization) return false
+
+    const startTime = performance.now()
+    let optimized = false
+
+    if (inputRef.current) {
+      const input = inputRef.current
+
+      // Set input mode for better mobile keyboard
+      if (inputType.inputMode) {
+        input.setAttribute('inputmode', inputType.inputMode)
+        optimized = true
+      }
+
+      // Set autocomplete for better UX
+      if (inputType.autocomplete && defaultConfig.enableAutocomplete) {
+        input.setAttribute('autocomplete', inputType.autocomplete)
+        optimized = true
+      }
+
+      // Set pattern for validation
+      if (inputType.pattern) {
+        input.setAttribute('pattern', inputType.pattern.source)
+        optimized = true
+      }
+
+      // Add mobile-specific attributes
+      if (inputType.type === 'tel') {
+        input.setAttribute('data-mobile-keyboard', 'phone')
+        optimized = true
+      } else if (inputType.type === 'email') {
+        input.setAttribute('data-mobile-keyboard', 'email')
+        optimized = true
+      } else if (inputType.type === 'number') {
+        input.setAttribute('data-mobile-keyboard', 'numeric')
+        optimized = true
+      } else if (inputType.type === 'url') {
+        input.setAttribute('data-mobile-keyboard', 'url')
+        optimized = true
+      }
+    }
+
+    const endTime = performance.now()
+    const optimizationTime = endTime - startTime
+
+    setSemanticState(prev => ({
+      ...prev,
+      keyboardOptimized: optimized,
+      performanceMetrics: {
+        ...prev.performanceMetrics,
+        optimizationTime,
+        lastOptimization: Date.now()
+      }
+    }))
+
+    callbacks.onKeyboardOptimization?.(optimized)
+    return optimized
+  }, [defaultConfig.enableKeyboardOptimization, defaultConfig.enableAutocomplete, callbacks])
+
+  // Enhance autocomplete functionality
+  const enhanceAutocomplete = useCallback((inputType: InputType) => {
+    if (!defaultConfig.enableAutocomplete) return false
+
+    let enhanced = false
+
+    if (inputRef.current) {
+      const input = inputRef.current
+
+      // Set appropriate autocomplete values
+      switch (inputType.type) {
+        case 'email':
+          input.setAttribute('autocomplete', 'email')
+          enhanced = true
+          break
+        case 'tel':
+          input.setAttribute('autocomplete', 'tel')
+          enhanced = true
+          break
+        case 'url':
+          input.setAttribute('autocomplete', 'url')
+          enhanced = true
+          break
+        case 'password':
+          input.setAttribute('autocomplete', 'current-password')
+          enhanced = true
+          break
+        case 'date':
+          input.setAttribute('autocomplete', 'bday')
+          enhanced = true
+          break
+        case 'search':
+          input.setAttribute('autocomplete', 'off')
+          enhanced = true
+          break
+        case 'number':
+          input.setAttribute('autocomplete', 'off')
+          enhanced = true
+          break
+      }
+
+      // Add data attributes for custom autocomplete
+      if (inputType.type === 'email') {
+        input.setAttribute('data-autocomplete-type', 'email')
+        input.setAttribute('data-suggestions', 'email-domains')
+      } else if (inputType.type === 'tel') {
+        input.setAttribute('data-autocomplete-type', 'phone')
+        input.setAttribute('data-suggestions', 'phone-formats')
+      } else if (inputType.type === 'url') {
+        input.setAttribute('data-autocomplete-type', 'url')
+        input.setAttribute('data-suggestions', 'common-urls')
+      }
+    }
+
+    setSemanticState(prev => ({
+      ...prev,
+      autocompleteEnhanced: enhanced
+    }))
+
+    callbacks.onAutocompleteEnhanced?.(enhanced)
+    return enhanced
+  }, [defaultConfig.enableAutocomplete, callbacks])
+
+  // Optimize touch interactions
+  const optimizeTouch = useCallback((inputType: InputType) => {
+    if (!defaultConfig.enableTouchOptimization) return false
+
+    let optimized = false
+
+    if (inputRef.current) {
+      const input = inputRef.current
+
+      // Add touch-friendly attributes
+      input.setAttribute('data-touch-optimized', 'true')
+      
+      // Set appropriate touch action
+      if (inputType.type === 'search') {
+        input.style.touchAction = 'manipulation'
+        optimized = true
+      } else if (inputType.type === 'number') {
+        input.style.touchAction = 'manipulation'
+        optimized = true
+      } else {
+        input.style.touchAction = 'auto'
+        optimized = true
+      }
+
+      // Add touch feedback classes
+      input.classList.add('touch-input')
+      input.classList.add('touch-target')
+
+      // Set minimum touch target size
+      input.style.minHeight = '44px'
+      input.style.minWidth = '44px'
+
+      optimized = true
+    }
+
+    setSemanticState(prev => ({
+      ...prev,
+      touchOptimized: optimized
+    }))
+
+    callbacks.onTouchOptimized?.(optimized)
+    return optimized
+  }, [defaultConfig.enableTouchOptimization, callbacks])
+
+  // Apply all optimizations
+  const applyOptimizations = useCallback((inputType: InputType) => {
+    const keyboardOptimized = optimizeKeyboard(inputType)
+    const autocompleteEnhanced = enhanceAutocomplete(inputType)
+    const touchOptimized = optimizeTouch(inputType)
+
+    const isOptimized = keyboardOptimized || autocompleteEnhanced || touchOptimized
+
+    setSemanticState(prev => ({
+      ...prev,
+      isOptimized
+    }))
+
+    return isOptimized
+  }, [optimizeKeyboard, enhanceAutocomplete, optimizeTouch])
+
+  // Handle input changes with optimization
+  const handleInputChange = useCallback((
+    value: string,
+    name: string,
+    placeholder?: string
+  ) => {
+    const detectedType = detectInputType(value, name, placeholder)
+    
+    // Apply optimizations with debouncing
+    if (optimizationTimerRef.current) {
+      clearTimeout(optimizationTimerRef.current)
+    }
+
+    optimizationTimerRef.current = setTimeout(() => {
+      applyOptimizations(detectedType)
+    }, 100)
+  }, [detectInputType, applyOptimizations])
+
+  // Get optimized input attributes
+  const getOptimizedAttributes = useCallback((inputType: InputType) => {
+    const attributes: Record<string, string> = {
+      type: inputType.type,
+      'data-semantic-optimized': 'true'
+    }
+
+    if (inputType.inputMode) {
+      attributes.inputmode = inputType.inputMode
+    }
+
+    if (inputType.autocomplete) {
+      attributes.autocomplete = inputType.autocomplete
+    }
+
+    if (inputType.pattern) {
+      attributes.pattern = inputType.pattern.source
+    }
+
+    // Add mobile-specific attributes
+    if (inputType.keyboardType) {
+      attributes['data-mobile-keyboard'] = inputType.keyboardType
+    }
+
+    return attributes
+  }, [])
+
+  // Get CSS classes for semantic optimization
+  const getSemanticClasses = useCallback(() => {
+    const { detectedType, isOptimized, keyboardOptimized, autocompleteEnhanced, touchOptimized } = semanticState
+    
+    const classes = ['semantic-input']
+
+    if (detectedType) {
+      classes.push(`input-type-${detectedType.type}`)
+    }
+
+    if (isOptimized) {
+      classes.push('input-optimized')
+    }
+
+    if (keyboardOptimized) {
+      classes.push('keyboard-optimized')
+    }
+
+    if (autocompleteEnhanced) {
+      classes.push('autocomplete-enhanced')
+    }
+
+    if (touchOptimized) {
+      classes.push('touch-optimized')
+    }
+
+    return classes.join(' ')
+  }, [semanticState])
+
+  // Reset optimizations
+  const resetOptimizations = useCallback(() => {
+    if (inputRef.current) {
+      const input = inputRef.current
+      
+      // Remove custom attributes
+      input.removeAttribute('data-mobile-keyboard')
+      input.removeAttribute('data-autocomplete-type')
+      input.removeAttribute('data-suggestions')
+      input.removeAttribute('data-touch-optimized')
+      input.removeAttribute('data-semantic-optimized')
+      
+      // Remove custom styles
+      input.style.touchAction = ''
+      input.style.minHeight = ''
+      input.style.minWidth = ''
+      
+      // Remove custom classes
+      input.classList.remove('touch-input', 'touch-target')
+    }
+
+    setSemanticState(prev => ({
+      ...prev,
+      isOptimized: false,
+      keyboardOptimized: false,
+      autocompleteEnhanced: false,
+      touchOptimized: false
+    }))
+  }, [])
+
+  // Clean up timer on unmount
+  useEffect(() => {
+    return () => {
+      if (optimizationTimerRef.current) {
+        clearTimeout(optimizationTimerRef.current)
+      }
+    }
+  }, [])
+
+  return {
+    semanticState,
+    detectInputType,
+    optimizeKeyboard,
+    enhanceAutocomplete,
+    optimizeTouch,
+    applyOptimizations,
+    handleInputChange,
+    getOptimizedAttributes,
+    getSemanticClasses,
+    resetOptimizations,
+    inputRef
+  }
+}
+
+// Convenience hook for basic semantic input
+export const useBasicSemanticInput = (initialType: InputType) => {
+  return useSemanticInput(initialType, {}, {
+    enableAutoDetection: true,
+    enableKeyboardOptimization: false,
+    enableAutocomplete: false,
+    enableTouchOptimization: false,
+    enableAccessibility: true,
+    enablePerformanceMonitoring: false
+  })
+}
+
+// Convenience hook for enhanced semantic input
+export const useEnhancedSemanticInput = (initialType: InputType) => {
+  return useSemanticInput(initialType, {}, {
+    enableAutoDetection: true,
+    enableKeyboardOptimization: true,
+    enableAutocomplete: true,
+    enableTouchOptimization: true,
+    enableAccessibility: true,
+    enablePerformanceMonitoring: true
+  })
+}