@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.4 → 0.1.6

package/src/hooks/use-mobile-form-validation.ts

@@ -0,0 +1,518 @@
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
+
+export interface ValidationRule {
+  type: 'required' | 'email' | 'minLength' | 'maxLength' | 'pattern' | 'custom'
+  value?: string | number | RegExp
+  message: string
+  validator?: (value: any) => boolean | Promise<boolean>
+}
+
+export interface ValidationState {
+  isValid: boolean
+  errors: string[]
+  isDirty: boolean
+  isTouched: boolean
+  isSubmitting: boolean
+  isSubmitted: boolean
+}
+
+export interface FormField {
+  name: string
+  value: any
+  rules: ValidationRule[]
+  validationState: ValidationState
+}
+
+export interface MobileFormValidationConfig {
+  enableTouchFeedback: boolean
+  enableHapticFeedback: boolean
+  enableSoundFeedback: boolean
+  validationDelay: number
+  enablePerformanceOptimization: boolean
+  maxValidationRetries: number
+}
+
+export interface ValidationCallbacks {
+  onValidationStart?: (fieldName: string) => void
+  onValidationComplete?: (fieldName: string, isValid: boolean, errors: string[]) => void
+  onFormSubmit?: (formData: Record<string, any>, isValid: boolean) => void
+  onValidationError?: (fieldName: string, errors: string[]) => void
+  onValidationSuccess?: (fieldName: string) => void
+}
+
+export interface MobileFormValidationState {
+  fields: Record<string, FormField>
+  overallValidation: ValidationState
+  isOptimized: boolean
+  performanceMetrics: {
+    validationCount: number
+    averageValidationTime: number
+    lastValidationTime: number
+  }
+}
+
+export const useMobileFormValidation = (
+  initialFields: Record<string, Omit<FormField, 'validationState'>>,
+  callbacks: ValidationCallbacks = {},
+  config: Partial<MobileFormValidationConfig> = {}
+) => {
+  const defaultConfig: MobileFormValidationConfig = {
+    enableTouchFeedback: true,
+    enableHapticFeedback: true,
+    enableSoundFeedback: false,
+    validationDelay: 300,
+    enablePerformanceOptimization: true,
+    maxValidationRetries: 3,
+    ...config
+  }
+
+  const [validationState, setValidationState] = useState<MobileFormValidationState>({
+    fields: Object.keys(initialFields).reduce((acc, fieldName) => {
+      acc[fieldName] = {
+        ...initialFields[fieldName],
+        validationState: {
+          isValid: true,
+          errors: [],
+          isDirty: false,
+          isTouched: false,
+          isSubmitting: false,
+          isSubmitted: false
+        }
+      }
+      return acc
+    }, {} as Record<string, FormField>),
+    overallValidation: {
+      isValid: true,
+      errors: [],
+      isDirty: false,
+      isTouched: false,
+      isSubmitting: false,
+      isSubmitted: false
+    },
+    isOptimized: false,
+    performanceMetrics: {
+      validationCount: 0,
+      averageValidationTime: 0,
+      lastValidationTime: 0
+    }
+  })
+
+  const validationTimersRef = useRef<Record<string, NodeJS.Timeout>>({})
+  const validationRetryCountRef = useRef<Record<string, number>>({})
+
+  // Trigger haptic feedback
+  const triggerHapticFeedback = useCallback((intensity: 'light' | 'medium' | 'strong' = 'medium') => {
+    if (!defaultConfig.enableHapticFeedback || !('vibrate' in navigator)) return
+
+    const vibrationPattern = {
+      light: 20,
+      medium: 50,
+      strong: 100
+    }
+
+    try {
+      navigator.vibrate(vibrationPattern[intensity])
+    } catch (error) {
+      console.warn('Haptic feedback not supported:', error)
+    }
+  }, [defaultConfig.enableHapticFeedback])
+
+  // Trigger sound feedback
+  const triggerSoundFeedback = useCallback((type: 'success' | 'error' = '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: { frequency: 800, duration: 0.1, volume: 0.1 },
+        error: { frequency: 400, duration: 0.2, volume: 0.15 }
+      }
+
+      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: string,
+    value: any,
+    rules: ValidationRule[]
+  ): Promise<{ isValid: boolean; errors: string[] }> => {
+    const errors: string[] = []
+    const startTime = performance.now()
+
+    for (const rule of rules) {
+      let isValid = true
+
+      try {
+        switch (rule.type) {
+          case 'required':
+            isValid = value !== null && value !== undefined && value !== ''
+            break
+
+          case 'email':
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+            isValid = emailRegex.test(String(value))
+            break
+
+          case 'minLength':
+            isValid = String(value).length >= (rule.value as number)
+            break
+
+          case 'maxLength':
+            isValid = String(value).length <= (rule.value as number)
+            break
+
+          case 'pattern':
+            if (rule.value instanceof RegExp) {
+              isValid = rule.value.test(String(value))
+            }
+            break
+
+          case 'custom':
+            if (rule.validator) {
+              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: {
+        validationCount: prev.performanceMetrics.validationCount + 1,
+        averageValidationTime: (prev.performanceMetrics.averageValidationTime * prev.performanceMetrics.validationCount + validationTime) / (prev.performanceMetrics.validationCount + 1),
+        lastValidationTime: validationTime
+      }
+    }))
+
+    return { isValid: errors.length === 0, errors }
+  }, [])
+
+  // Debounced field validation
+  const debouncedValidateField = useCallback((
+    fieldName: string,
+    value: any,
+    rules: ValidationRule[]
+  ) => {
+    // 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: {
+            ...prev.fields,
+            [fieldName]: {
+              ...prev.fields[fieldName],
+              validationState: {
+                ...prev.fields[fieldName].validationState,
+                isValid: result.isValid,
+                errors: result.errors,
+                isDirty: true
+              }
+            }
+          }
+        }))
+
+        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: string,
+    value: any,
+    shouldValidate: boolean = true
+  ) => {
+    setValidationState(prev => ({
+      ...prev,
+      fields: {
+        ...prev.fields,
+        [fieldName]: {
+          ...prev.fields[fieldName],
+          value,
+          validationState: {
+            ...prev.fields[fieldName].validationState,
+            isTouched: true
+          }
+        }
+      }
+    }))
+
+    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: string) => {
+    setValidationState(prev => ({
+      ...prev,
+      fields: {
+        ...prev.fields,
+        [fieldName]: {
+          ...prev.fields[fieldName],
+          validationState: {
+            ...prev.fields[fieldName].validationState,
+            isTouched: true
+          }
+        }
+      }
+    }))
+  }, [])
+
+  // Validate all fields
+  const validateAllFields = useCallback(async (): Promise<boolean> => {
+    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: {
+          ...prev.overallValidation,
+          isValid: allValid,
+          errors: allErrors,
+          isDirty: true
+        }
+      }))
+
+      return allValid
+    } catch (error) {
+      console.error('Validation error:', error)
+      return false
+    }
+  }, [validationState.fields, validateField])
+
+  // Submit form
+  const submitForm = useCallback(async (): Promise<{ success: boolean; data: Record<string, any>; errors: string[] }> => {
+    setValidationState(prev => ({
+      ...prev,
+      overallValidation: {
+        ...prev.overallValidation,
+        isSubmitting: true
+      }
+    }))
+
+    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: {
+            ...prev.overallValidation,
+            isSubmitted: true,
+            isSubmitting: false
+          }
+        }))
+
+        callbacks.onFormSubmit?.(formData, true)
+        triggerHapticFeedback('medium')
+        triggerSoundFeedback('success')
+
+        return { success: true, data: formData, errors: [] }
+      } else {
+        setValidationState(prev => ({
+          ...prev,
+          overallValidation: {
+            ...prev.overallValidation,
+            isSubmitting: false
+          }
+        }))
+
+        callbacks.onFormSubmit?.({}, false)
+        triggerHapticFeedback('strong')
+        triggerSoundFeedback('error')
+
+        return { success: false, data: {}, errors: validationState.overallValidation.errors }
+      }
+    } catch (error) {
+      console.error('Form submission error:', error)
+      
+      setValidationState(prev => ({
+        ...prev,
+        overallValidation: {
+          ...prev.overallValidation,
+          isSubmitting: false
+        }
+      }))
+
+      return { success: false, data: {}, errors: ['Form submission failed'] }
+    }
+  }, [validationState.fields, validationState.overallValidation.errors, validateAllFields, callbacks, triggerHapticFeedback, triggerSoundFeedback])
+
+  // Reset form
+  const resetForm = useCallback(() => {
+    setValidationState(prev => ({
+      ...prev,
+      fields: Object.keys(prev.fields).reduce((acc, fieldName) => {
+        acc[fieldName] = {
+          ...prev.fields[fieldName],
+          value: initialFields[fieldName].value,
+          validationState: {
+            isValid: true,
+            errors: [],
+            isDirty: false,
+            isTouched: false,
+            isSubmitting: false,
+            isSubmitted: false
+          }
+        }
+        return acc
+      }, {} as Record<string, FormField>),
+      overallValidation: {
+        isValid: true,
+        errors: [],
+        isDirty: false,
+        isTouched: false,
+        isSubmitting: false,
+        isSubmitted: false
+      }
+    }))
+
+    // Clear validation timers
+    Object.values(validationTimersRef.current).forEach(timer => clearTimeout(timer))
+    validationTimersRef.current = {}
+    validationRetryCountRef.current = {}
+  }, [initialFields])
+
+  // Get field validation state
+  const getFieldValidation = useCallback((fieldName: string) => {
+    return validationState.fields[fieldName]?.validationState || {
+      isValid: true,
+      errors: [],
+      isDirty: false,
+      isTouched: false,
+      isSubmitting: false,
+      isSubmitted: false
+    }
+  }, [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: debouncedValidateField,
+    validateAllFields,
+    submitForm,
+    resetForm,
+    getFieldValidation,
+    isFormValid,
+    isFormDirty,
+    triggerHapticFeedback,
+    triggerSoundFeedback
+  }
+}
+
+// Convenience hook for basic form validation
+export const useBasicFormValidation = (initialFields: Record<string, Omit<FormField, 'validationState'>>) => {
+  return useMobileFormValidation(initialFields, {}, {
+    enableTouchFeedback: true,
+    enableHapticFeedback: false,
+    enableSoundFeedback: false,
+    validationDelay: 500,
+    enablePerformanceOptimization: false,
+    maxValidationRetries: 1
+  })
+}
+
+// Convenience hook for enhanced form validation
+export const useEnhancedFormValidation = (initialFields: Record<string, Omit<FormField, 'validationState'>>) => {
+  return useMobileFormValidation(initialFields, {}, {
+    enableTouchFeedback: true,
+    enableHapticFeedback: true,
+    enableSoundFeedback: true,
+    validationDelay: 300,
+    enablePerformanceOptimization: true,
+    maxValidationRetries: 3
+  })
+}