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

package/dist/hooks/use-mobile-form-validation.js

@@ -0,0 +1,451 @@
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
+
+export interface ValidationRule {
+  type) => boolean | Promise<boolean>
+}
+
+export interface ValidationState {
+  isValid]
+  isDirty}
+
+export interface FormField {
+  name]
+  validationState}
+
+export interface MobileFormValidationConfig {
+  enableTouchFeedback}
+
+export interface ValidationCallbacks {
+  onValidationStart?) => void
+  onValidationComplete?, isValid, errors]) => void
+  onFormSubmit?, any>, isValid) => void
+  onValidationError?, errors]) => void
+  onValidationSuccess?) => void
+}
+
+export interface MobileFormValidationState {
+  fields, FormField>
+  overallValidation}
+}
+
+export const useMobileFormValidation = (
+  initialFields, Omit<FormField, 'validationState'>>,
+  callbacks= {},
+  config= {}
+) => {
+  const defaultConfig= {
+    enableTouchFeedback,
+    enableHapticFeedback,
+    enableSoundFeedback,
+    validationDelay,
+    enablePerformanceOptimization,
+    maxValidationRetries,
+    ...config
+  }
+
+  const [validationState, setValidationState] = useState<MobileFormValidationState>({
+    fields).reduce((acc, fieldName) => {
+      acc[fieldName] = {
+        ...initialFields[fieldName],
+        validationState,
+          errors],
+          isDirty,
+          isTouched,
+          isSubmitting,
+          isSubmitted}
+      }
+      return acc
+    }, {} as Record<string, FormField>),
+    overallValidation,
+      errors],
+      isDirty,
+      isTouched,
+      isSubmitting,
+      isSubmitted},
+    isOptimized,
+    performanceMetrics,
+      averageValidationTime,
+      lastValidationTime}
+  })
+
+  const validationTimersRef = useRef<Record<string, NodeJS.Timeout>>({})
+  const validationRetryCountRef = useRef<Record<string, number>>({})
+
+  // Trigger haptic feedback
+  const triggerHapticFeedback = useCallback((intensity= 'medium') => {
+    if (!defaultConfig.enableHapticFeedback || !('vibrate' in navigator)) return
+
+    const vibrationPattern = {
+      light,
+      medium,
+      strong}
+
+    try {
+      navigator.vibrate(vibrationPattern[intensity])
+    } catch (error) {
+      console.warn('Haptic feedback not supported, error)
+    }
+  }, [defaultConfig.enableHapticFeedback])
+
+  // Trigger sound feedback
+  const triggerSoundFeedback = useCallback((type= 'success') => {
+    if (!defaultConfig.enableSoundFeedback || !('AudioContext' in window)) return
+
+    try {
+      const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)()
+      const oscillator = audioContext.createOscillator()
+      const gainNode = audioContext.createGain()
+
+      oscillator.connect(gainNode)
+      gainNode.connect(audioContext.destination)
+
+      const soundConfig = {
+        success, duration, volume},
+        error, duration, volume}
+      }
+
+      const config = soundConfig[type]
+      oscillator.frequency.setValueAtTime(config.frequency, audioContext.currentTime)
+      gainNode.gain.setValueAtTime(config.volume, audioContext.currentTime)
+
+      oscillator.start(audioContext.currentTime)
+      oscillator.stop(audioContext.currentTime + config.duration)
+    } catch (error) {
+      console.warn('Sound feedback not supported, error)
+    }
+  }, [defaultConfig.enableSoundFeedback])
+
+  // Validate a single field
+  const validateField = useCallback(async (
+    fieldName,
+    value,
+    rules]
+  ); errors] }> => {
+    const errors] = []
+    const startTime = performance.now()
+
+    for (const rule of rules) {
+      let isValid = true
+
+      try {
+        switch (rule.type) {
+          case 'required'= value !== null && value !== undefined && value !== ''
+            break
+
+          case 'email'= /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+            isValid = emailRegex.test(String(value))
+            break
+
+          case 'minLength'= String(value).length >= (rule.value as number)
+            break
+
+          case 'maxLength'= String(value).length <= (rule.value as number)
+            break
+
+          case 'pattern') {
+              isValid = rule.value.test(String(value))
+            }
+            break
+
+          case 'custom') {
+              try {
+                isValid = await rule.validator(value)
+              } catch (error) {
+                console.error('Custom validation error, error)
+                isValid = false
+              }
+            }
+            break
+        }
+
+        if (!isValid) {
+          errors.push(rule.message)
+        }
+              } catch (error) {
+          console.error(`Validation error for rule ${rule.type} in field ${fieldName}, error)
+          errors.push(rule.message)
+        }
+    }
+
+    const endTime = performance.now()
+    const validationTime = endTime - startTime
+
+    // Update performance metrics
+    setValidationState(prev => ({
+      ...prev,
+      performanceMetrics,
+        averageValidationTime) / (prev.performanceMetrics.validationCount + 1),
+        lastValidationTime}
+    }))
+
+    return { isValid=== 0, errors }
+  }, [])
+
+  // Debounced field validation
+  const debouncedValidateField = useCallback((
+    fieldName,
+    value,
+    rules]
+  ) => {
+    // Clear existing timer
+    if (validationTimersRef.current[fieldName]) {
+      clearTimeout(validationTimersRef.current[fieldName])
+    }
+
+    // Set new timer
+    validationTimersRef.current[fieldName] = setTimeout(async () => {
+      callbacks.onValidationStart?.(fieldName)
+
+      try {
+        const result = await validateField(fieldName, value, rules)
+        
+        setValidationState(prev => ({
+          ...prev,
+          fields,
+            [fieldName]],
+              validationState].validationState,
+                isValid,
+                errors,
+                isDirty}
+            }
+          }
+        }))
+
+        if (result.isValid) {
+          callbacks.onValidationSuccess?.(fieldName)
+          triggerHapticFeedback('light')
+          triggerSoundFeedback('success')
+        } else {
+          callbacks.onValidationError?.(fieldName, result.errors)
+          triggerHapticFeedback('strong')
+          triggerSoundFeedback('error')
+        }
+
+        callbacks.onValidationComplete?.(fieldName, result.isValid, result.errors)
+      } catch (error) {
+        console.error(`Validation error for field ${fieldName}, error)
+        
+        // Retry validation if enabled
+        const retryCount = validationRetryCountRef.current[fieldName] || 0
+        if (retryCount < defaultConfig.maxValidationRetries) {
+          validationRetryCountRef.current[fieldName] = retryCount + 1
+          setTimeout(() => debouncedValidateField(fieldName, value, rules), 1000)
+        }
+      }
+    }, defaultConfig.validationDelay)
+  }, [validateField, callbacks, defaultConfig.validationDelay, defaultConfig.maxValidationRetries, triggerHapticFeedback, triggerSoundFeedback])
+
+  // Update field value and trigger validation
+  const updateField = useCallback((
+    fieldName,
+    value,
+    shouldValidate= true
+  ) => {
+    setValidationState(prev => ({
+      ...prev,
+      fields,
+        [fieldName]],
+          value,
+          validationState].validationState,
+            isTouched}
+        }
+      }
+    }))
+
+    if (shouldValidate && validationState.fields[fieldName].rules.length > 0) {
+      debouncedValidateField(fieldName, value, validationState.fields[fieldName].rules)
+    }
+  }, [validationState.fields, debouncedValidateField])
+
+  // Touch field (mark as touched without validation)
+  const touchField = useCallback((fieldName) => {
+    setValidationState(prev => ({
+      ...prev,
+      fields,
+        [fieldName]],
+          validationState].validationState,
+            isTouched}
+        }
+      }
+    }))
+  }, [])
+
+  // Validate all fields
+  const validateAllFields = useCallback(async ()=> {
+    const fieldNames = Object.keys(validationState.fields)
+    const validationPromises = fieldNames.map(fieldName => {
+      const field = validationState.fields[fieldName]
+      return validateField(fieldName, field.value, field.rules)
+    })
+
+    try {
+      const results = await Promise.all(validationPromises)
+      const allValid = results.every(result => result.isValid)
+      const allErrors = results.flatMap(result => result.errors)
+
+      setValidationState(prev => ({
+        ...prev,
+        overallValidation,
+          isValid,
+          errors,
+          isDirty}
+      }))
+
+      return allValid
+    } catch (error) {
+      console.error('Validation error, error)
+      return false
+    }
+  }, [validationState.fields, validateField])
+
+  // Submit form
+  const submitForm = useCallback(async (); data, any>; errors] }> => {
+    setValidationState(prev => ({
+      ...prev,
+      overallValidation,
+        isSubmitting}
+    }))
+
+    try {
+      const isValid = await validateAllFields()
+      
+      if (isValid) {
+        const formData = Object.keys(validationState.fields).reduce((acc, fieldName) => {
+          acc[fieldName] = validationState.fields[fieldName].value
+          return acc
+        }, {} as Record<string, any>)
+
+        setValidationState(prev => ({
+          ...prev,
+          overallValidation,
+            isSubmitted,
+            isSubmitting}
+        }))
+
+        callbacks.onFormSubmit?.(formData, true)
+        triggerHapticFeedback('medium')
+        triggerSoundFeedback('success')
+
+        return { success, data, errors] }
+      } else {
+        setValidationState(prev => ({
+          ...prev,
+          overallValidation,
+            isSubmitting}
+        }))
+
+        callbacks.onFormSubmit?.({}, false)
+        triggerHapticFeedback('strong')
+        triggerSoundFeedback('error')
+
+        return { success, data}, errors}
+      }
+    } catch (error) {
+      console.error('Form submission error, error)
+      
+      setValidationState(prev => ({
+        ...prev,
+        overallValidation,
+          isSubmitting}
+      }))
+
+      return { success, data}, errors] }
+    }
+  }, [validationState.fields, validationState.overallValidation.errors, validateAllFields, callbacks, triggerHapticFeedback, triggerSoundFeedback])
+
+  // Reset form
+  const resetForm = useCallback(() => {
+    setValidationState(prev => ({
+      ...prev,
+      fields).reduce((acc, fieldName) => {
+        acc[fieldName] = {
+          ...prev.fields[fieldName],
+          value].value,
+          validationState,
+            errors],
+            isDirty,
+            isTouched,
+            isSubmitting,
+            isSubmitted}
+        }
+        return acc
+      }, {} as Record<string, FormField>),
+      overallValidation,
+        errors],
+        isDirty,
+        isTouched,
+        isSubmitting,
+        isSubmitted}
+    }))
+
+    // Clear validation timers
+    Object.values(validationTimersRef.current).forEach(timer => clearTimeout(timer))
+    validationTimersRef.current = {}
+    validationRetryCountRef.current = {}
+  }, [initialFields])
+
+  // Get field validation state
+  const getFieldValidation = useCallback((fieldName) => {
+    return validationState.fields[fieldName]?.validationState || {
+      isValid,
+      errors],
+      isDirty,
+      isTouched,
+      isSubmitting,
+      isSubmitted}
+  }, [validationState.fields])
+
+  // Check if form is valid
+  const isFormValid = useMemo(() => {
+    return Object.values(validationState.fields).every(field => field.validationState.isValid)
+  }, [validationState.fields])
+
+  // Check if form is dirty
+  const isFormDirty = useMemo(() => {
+    return Object.values(validationState.fields).some(field => field.validationState.isDirty)
+  }, [validationState.fields])
+
+  // Clean up timers on unmount
+  useEffect(() => {
+    return () => {
+      Object.values(validationTimersRef.current).forEach(timer => clearTimeout(timer))
+    }
+  }, [])
+
+  return {
+    validationState,
+    updateField,
+    touchField,
+    validateField,
+    validateAllFields,
+    submitForm,
+    resetForm,
+    getFieldValidation,
+    isFormValid,
+    isFormDirty,
+    triggerHapticFeedback,
+    triggerSoundFeedback
+  }
+}
+
+// Convenience hook for basic form validation
+export const useBasicFormValidation = (initialFields, Omit<FormField, 'validationState'>>) => {
+  return useMobileFormValidation(initialFields, {}, {
+    enableTouchFeedback,
+    enableHapticFeedback,
+    enableSoundFeedback,
+    validationDelay,
+    enablePerformanceOptimization,
+    maxValidationRetries})
+}
+
+// Convenience hook for enhanced form validation
+export const useEnhancedFormValidation = (initialFields, Omit<FormField, 'validationState'>>) => {
+  return useMobileFormValidation(initialFields, {}, {
+    enableTouchFeedback,
+    enableHapticFeedback,
+    enableSoundFeedback,
+    validationDelay,
+    enablePerformanceOptimization,
+    maxValidationRetries})
+}