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

package/dist/hooks/use-semantic-input.js

@@ -0,0 +1,513 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+
+export interface InputType {
+  type}
+
+export interface SemanticConfig {
+  enableAutoDetection}
+
+export interface SemanticCallbacks {
+  onInputTypeDetected?) => void
+  onKeyboardOptimization?) => void
+  onAutocompleteEnhanced?) => void
+  onTouchOptimized?) => void
+}
+
+export interface SemanticInputState {
+  detectedType}
+}
+
+export const useSemanticInput = (
+  initialType,
+  callbacks= {},
+  config= {}
+) => {
+  const defaultConfig= {
+    enableAutoDetection,
+    enableKeyboardOptimization,
+    enableAutocomplete,
+    enableTouchOptimization,
+    enableAccessibility,
+    enablePerformanceMonitoring,
+    ...config
+  }
+
+  const [semanticState, setSemanticState] = useState<SemanticInputState>({
+    detectedType,
+    isOptimized,
+    keyboardOptimized,
+    autocompleteEnhanced,
+    touchOptimized,
+    performanceMetrics,
+      optimizationTime,
+      lastOptimization}
+  })
+
+  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, name, placeholder?)=> {
+    const startTime = performance.now()
+    
+    let detectedType= { ...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,
+          autocomplete,
+          inputMode,
+          keyboardType}
+      }
+      // Phone detection
+      else if (fieldName.includes('phone') || fieldName.includes('tel') || fieldName.includes('mobile')) {
+        detectedType = {
+          type,
+          autocomplete,
+          inputMode,
+          keyboardType}
+      }
+      // URL detection
+      else if (fieldName.includes('url') || fieldName.includes('website') || fieldName.includes('link')) {
+        detectedType = {
+          type,
+          autocomplete,
+          inputMode,
+          keyboardType}
+      }
+      // Search detection
+      else if (fieldName.includes('search') || fieldName.includes('query')) {
+        detectedType = {
+          type,
+          autocomplete,
+          inputMode,
+          keyboardType}
+      }
+      // Number detection
+      else if (fieldName.includes('number') || fieldName.includes('amount') || fieldName.includes('price') || fieldName.includes('quantity')) {
+        detectedType = {
+          type,
+          autocomplete,
+          inputMode,
+          keyboardType}
+      }
+      // Date detection
+      else if (fieldName.includes('date') || fieldName.includes('birth') || fieldName.includes('anniversary')) {
+        detectedType = {
+          type,
+          autocomplete,
+          inputMode,
+          keyboardType}
+      }
+      // Password detection
+      else if (fieldName.includes('password') || fieldName.includes('pass') || fieldName.includes('secret')) {
+        detectedType = {
+          type,
+          autocomplete,
+          inputMode,
+          keyboardType}
+      }
+    }
+
+    // Auto-detect based on placeholder text
+    if (placeholder && defaultConfig.enableAutoDetection) {
+      const placeholderLower = placeholder.toLowerCase()
+      
+      if (placeholderLower.includes('@') || placeholderLower.includes('email')) {
+        detectedType = {
+          type,
+          autocomplete,
+          inputMode,
+          keyboardType}
+      } else if (placeholderLower.includes('http') || placeholderLower.includes('www')) {
+        detectedType = {
+          type,
+          autocomplete,
+          inputMode,
+          keyboardType}
+      } else if (placeholderLower.includes('search') || placeholderLower.includes('find')) {
+        detectedType = {
+          type,
+          autocomplete,
+          inputMode,
+          keyboardType}
+      }
+    }
+
+    // Auto-detect based on value pattern
+    if (value && defaultConfig.enableAutoDetection) {
+      // Email pattern
+      if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+        detectedType = {
+          type,
+          autocomplete,
+          inputMode,
+          keyboardType}
+      }
+      // Phone pattern
+      else if (/^[\+]?[0-9\s\-\(\)]{7,}$/.test(value)) {
+        detectedType = {
+          type,
+          autocomplete,
+          inputMode,
+          keyboardType}
+      }
+      // URL pattern
+      else if (/^https?)) {
+        detectedType = {
+          type,
+          autocomplete,
+          inputMode,
+          keyboardType}
+      }
+      // Number pattern
+      else if (/^[0-9]+(\.[0-9]+)?$/.test(value)) {
+        detectedType = {
+          type,
+          autocomplete,
+          inputMode,
+          keyboardType}
+      }
+    }
+
+    const endTime = performance.now()
+    const detectionTime = endTime - startTime
+
+    setSemanticState(prev => ({
+      ...prev,
+      detectedType,
+      performanceMetrics,
+        detectionTime
+      }
+    }))
+
+    callbacks.onInputTypeDetected?.(detectedType)
+    return detectedType
+  }, [initialType, defaultConfig.enableAutoDetection, callbacks])
+
+  // Optimize keyboard for mobile devices
+  const optimizeKeyboard = useCallback((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,
+      performanceMetrics,
+        optimizationTime,
+        lastOptimization)
+      }
+    }))
+
+    callbacks.onKeyboardOptimization?.(optimized)
+    return optimized
+  }, [defaultConfig.enableKeyboardOptimization, defaultConfig.enableAutocomplete, callbacks])
+
+  // Enhance autocomplete functionality
+  const enhanceAutocomplete = useCallback((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', 'email')
+          enhanced = true
+          break
+        case 'tel', 'tel')
+          enhanced = true
+          break
+        case 'url', 'url')
+          enhanced = true
+          break
+        case 'password', 'current-password')
+          enhanced = true
+          break
+        case 'date', 'bday')
+          enhanced = true
+          break
+        case 'search', 'off')
+          enhanced = true
+          break
+        case 'number', '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}))
+
+    callbacks.onAutocompleteEnhanced?.(enhanced)
+    return enhanced
+  }, [defaultConfig.enableAutocomplete, callbacks])
+
+  // Optimize touch interactions
+  const optimizeTouch = useCallback((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}))
+
+    callbacks.onTouchOptimized?.(optimized)
+    return optimized
+  }, [defaultConfig.enableTouchOptimization, callbacks])
+
+  // Apply all optimizations
+  const applyOptimizations = useCallback((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,
+    name,
+    placeholder?) => {
+    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) => {
+    const attributes, string> = {
+      type,
+      'data-semantic-optimized'}
+
+    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,
+      keyboardOptimized,
+      autocompleteEnhanced,
+      touchOptimized}))
+  }, [])
+
+  // 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) => {
+  return useSemanticInput(initialType, {}, {
+    enableAutoDetection,
+    enableKeyboardOptimization,
+    enableAutocomplete,
+    enableTouchOptimization,
+    enableAccessibility,
+    enablePerformanceMonitoring})
+}
+
+// Convenience hook for enhanced semantic input
+export const useEnhancedSemanticInput = (initialType) => {
+  return useSemanticInput(initialType, {}, {
+    enableAutoDetection,
+    enableKeyboardOptimization,
+    enableAutocomplete,
+    enableTouchOptimization,
+    enableAccessibility,
+    enablePerformanceMonitoring})
+}