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

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

@@ -1,94 +1,124 @@
 import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
 
 export interface ValidationRule {
-  type) => boolean | Promise<boolean>
+  type: 'required' | 'email' | 'minLength' | 'maxLength' | 'pattern' | 'custom'
+  value?: string | number | RegExp
+  message: string
+  validator?: (value: any) => boolean | Promise<boolean>
 }
 
 export interface ValidationState {
-  isValid]
-  isDirty}
+  isValid: boolean
+  errors: string[]
+  isDirty: boolean
+  isTouched: boolean
+  isSubmitting: boolean
+  isSubmitted: boolean
+}
 
 export interface FormField {
-  name]
-  validationState}
+  name: string
+  value: any
+  rules: ValidationRule[]
+  validationState: ValidationState
+}
 
 export interface MobileFormValidationConfig {
-  enableTouchFeedback}
+  enableTouchFeedback: boolean
+  enableHapticFeedback: boolean
+  enableSoundFeedback: boolean
+  validationDelay: number
+  enablePerformanceOptimization: boolean
+  maxValidationRetries: number
+}
 
 export interface ValidationCallbacks {
-  onValidationStart?) => void
-  onValidationComplete?, isValid, errors]) => void
-  onFormSubmit?, any>, isValid) => void
-  onValidationError?, errors]) => void
-  onValidationSuccess?) => void
+  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, FormField>
-  overallValidation}
+  fields: Record<string, FormField>
+  overallValidation: ValidationState
+  isOptimized: boolean
+  performanceMetrics: {
+    validationCount: number
+    averageValidationTime: number
+    lastValidationTime: number
+  }
 }
 
 export const useMobileFormValidation = (
-  initialFields, Omit<FormField, 'validationState'>>,
-  callbacks= {},
-  config= {}
+  initialFields: Record<string, Omit<FormField, 'validationState'>>,
+  callbacks: ValidationCallbacks = {},
+  config: Partial<MobileFormValidationConfig> = {}
 ) => {
-  const defaultConfig= {
-    enableTouchFeedback,
-    enableHapticFeedback,
-    enableSoundFeedback,
-    validationDelay,
-    enablePerformanceOptimization,
-    maxValidationRetries,
+  const defaultConfig: MobileFormValidationConfig = {
+    enableTouchFeedback: true,
+    enableHapticFeedback: true,
+    enableSoundFeedback: false,
+    validationDelay: 300,
+    enablePerformanceOptimization: true,
+    maxValidationRetries: 3,
     ...config
   }
 
   const [validationState, setValidationState] = useState<MobileFormValidationState>({
-    fields).reduce((acc, fieldName) => {
+    fields: Object.keys(initialFields).reduce((acc, fieldName) => {
       acc[fieldName] = {
         ...initialFields[fieldName],
-        validationState,
-          errors],
-          isDirty,
-          isTouched,
-          isSubmitting,
-          isSubmitted}
+        validationState: {
+          isValid: true,
+          errors: [],
+          isDirty: false,
+          isTouched: false,
+          isSubmitting: false,
+          isSubmitted: false
+        }
       }
       return acc
     }, {} as Record<string, FormField>),
-    overallValidation,
-      errors],
-      isDirty,
-      isTouched,
-      isSubmitting,
-      isSubmitted},
-    isOptimized,
-    performanceMetrics,
-      averageValidationTime,
-      lastValidationTime}
+    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= 'medium') => {
+  const triggerHapticFeedback = useCallback((intensity: 'light' | 'medium' | 'strong' = 'medium') => {
     if (!defaultConfig.enableHapticFeedback || !('vibrate' in navigator)) return
 
     const vibrationPattern = {
-      light,
-      medium,
-      strong}
+      light: 20,
+      medium: 50,
+      strong: 100
+    }
 
     try {
       navigator.vibrate(vibrationPattern[intensity])
     } catch (error) {
-      console.warn('Haptic feedback not supported, error)
+      console.warn('Haptic feedback not supported:', error)
     }
   }, [defaultConfig.enableHapticFeedback])
 
   // Trigger sound feedback
-  const triggerSoundFeedback = useCallback((type= 'success') => {
+  const triggerSoundFeedback = useCallback((type: 'success' | 'error' = 'success') => {
     if (!defaultConfig.enableSoundFeedback || !('AudioContext' in window)) return
 
     try {
@@ -100,8 +130,8 @@ export const useMobileFormValidation = (
       gainNode.connect(audioContext.destination)
 
       const soundConfig = {
-        success, duration, volume},
-        error, duration, volume}
+        success: { frequency: 800, duration: 0.1, volume: 0.1 },
+        error: { frequency: 400, duration: 0.2, volume: 0.15 }
       }
 
       const config = soundConfig[type]
@@ -111,17 +141,17 @@ export const useMobileFormValidation = (
       oscillator.start(audioContext.currentTime)
       oscillator.stop(audioContext.currentTime + config.duration)
     } catch (error) {
-      console.warn('Sound feedback not supported, error)
+      console.warn('Sound feedback not supported:', error)
     }
   }, [defaultConfig.enableSoundFeedback])
 
   // Validate a single field
   const validateField = useCallback(async (
-    fieldName,
-    value,
-    rules]
-  ); errors] }> => {
-    const errors] = []
+    fieldName: string,
+    value: any,
+    rules: ValidationRule[]
+  ): Promise<{ isValid: boolean; errors: string[] }> => {
+    const errors: string[] = []
     const startTime = performance.now()
 
     for (const rule of rules) {
@@ -129,29 +159,35 @@ export const useMobileFormValidation = (
 
       try {
         switch (rule.type) {
-          case 'required'= value !== null && value !== undefined && value !== ''
+          case 'required':
+            isValid = value !== null && value !== undefined && value !== ''
             break
 
-          case 'email'= /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+          case 'email':
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
             isValid = emailRegex.test(String(value))
             break
 
-          case 'minLength'= String(value).length >= (rule.value as number)
+          case 'minLength':
+            isValid = String(value).length >= (rule.value as number)
             break
 
-          case 'maxLength'= String(value).length <= (rule.value as number)
+          case 'maxLength':
+            isValid = String(value).length <= (rule.value as number)
             break
 
-          case 'pattern') {
+          case 'pattern':
+            if (rule.value instanceof RegExp) {
               isValid = rule.value.test(String(value))
             }
             break
 
-          case 'custom') {
+          case 'custom':
+            if (rule.validator) {
               try {
                 isValid = await rule.validator(value)
               } catch (error) {
-                console.error('Custom validation error, error)
+                console.error('Custom validation error:', error)
                 isValid = false
               }
             }
@@ -162,7 +198,7 @@ export const useMobileFormValidation = (
           errors.push(rule.message)
         }
               } catch (error) {
-          console.error(`Validation error for rule ${rule.type} in field ${fieldName}, error)
+          console.error(`Validation error for rule ${rule.type} in field ${fieldName}:`, error)
           errors.push(rule.message)
         }
     }
@@ -173,19 +209,21 @@ export const useMobileFormValidation = (
     // Update performance metrics
     setValidationState(prev => ({
       ...prev,
-      performanceMetrics,
-        averageValidationTime) / (prev.performanceMetrics.validationCount + 1),
-        lastValidationTime}
+      performanceMetrics: {
+        validationCount: prev.performanceMetrics.validationCount + 1,
+        averageValidationTime: (prev.performanceMetrics.averageValidationTime * prev.performanceMetrics.validationCount + validationTime) / (prev.performanceMetrics.validationCount + 1),
+        lastValidationTime: validationTime
+      }
     }))
 
-    return { isValid=== 0, errors }
+    return { isValid: errors.length === 0, errors }
   }, [])
 
   // Debounced field validation
   const debouncedValidateField = useCallback((
-    fieldName,
-    value,
-    rules]
+    fieldName: string,
+    value: any,
+    rules: ValidationRule[]
   ) => {
     // Clear existing timer
     if (validationTimersRef.current[fieldName]) {
@@ -201,12 +239,16 @@ export const useMobileFormValidation = (
         
         setValidationState(prev => ({
           ...prev,
-          fields,
-            [fieldName]],
-              validationState].validationState,
-                isValid,
-                errors,
-                isDirty}
+          fields: {
+            ...prev.fields,
+            [fieldName]: {
+              ...prev.fields[fieldName],
+              validationState: {
+                ...prev.fields[fieldName].validationState,
+                isValid: result.isValid,
+                errors: result.errors,
+                isDirty: true
+              }
             }
           }
         }))
@@ -223,7 +265,7 @@ export const useMobileFormValidation = (
 
         callbacks.onValidationComplete?.(fieldName, result.isValid, result.errors)
       } catch (error) {
-        console.error(`Validation error for field ${fieldName}, error)
+        console.error(`Validation error for field ${fieldName}:`, error)
         
         // Retry validation if enabled
         const retryCount = validationRetryCountRef.current[fieldName] || 0
@@ -237,17 +279,21 @@ export const useMobileFormValidation = (
 
   // Update field value and trigger validation
   const updateField = useCallback((
-    fieldName,
-    value,
-    shouldValidate= true
+    fieldName: string,
+    value: any,
+    shouldValidate: boolean = true
   ) => {
     setValidationState(prev => ({
       ...prev,
-      fields,
-        [fieldName]],
+      fields: {
+        ...prev.fields,
+        [fieldName]: {
+          ...prev.fields[fieldName],
           value,
-          validationState].validationState,
-            isTouched}
+          validationState: {
+            ...prev.fields[fieldName].validationState,
+            isTouched: true
+          }
         }
       }
     }))
@@ -258,20 +304,24 @@ export const useMobileFormValidation = (
   }, [validationState.fields, debouncedValidateField])
 
   // Touch field (mark as touched without validation)
-  const touchField = useCallback((fieldName) => {
+  const touchField = useCallback((fieldName: string) => {
     setValidationState(prev => ({
       ...prev,
-      fields,
-        [fieldName]],
-          validationState].validationState,
-            isTouched}
+      fields: {
+        ...prev.fields,
+        [fieldName]: {
+          ...prev.fields[fieldName],
+          validationState: {
+            ...prev.fields[fieldName].validationState,
+            isTouched: true
+          }
         }
       }
     }))
   }, [])
 
   // Validate all fields
-  const validateAllFields = useCallback(async ()=> {
+  const validateAllFields = useCallback(async (): Promise<boolean> => {
     const fieldNames = Object.keys(validationState.fields)
     const validationPromises = fieldNames.map(fieldName => {
       const field = validationState.fields[fieldName]
@@ -285,25 +335,29 @@ export const useMobileFormValidation = (
 
       setValidationState(prev => ({
         ...prev,
-        overallValidation,
-          isValid,
-          errors,
-          isDirty}
+        overallValidation: {
+          ...prev.overallValidation,
+          isValid: allValid,
+          errors: allErrors,
+          isDirty: true
+        }
       }))
 
       return allValid
     } catch (error) {
-      console.error('Validation error, error)
+      console.error('Validation error:', error)
       return false
     }
   }, [validationState.fields, validateField])
 
   // Submit form
-  const submitForm = useCallback(async (); data, any>; errors] }> => {
+  const submitForm = useCallback(async (): Promise<{ success: boolean; data: Record<string, any>; errors: string[] }> => {
     setValidationState(prev => ({
       ...prev,
-      overallValidation,
-        isSubmitting}
+      overallValidation: {
+        ...prev.overallValidation,
+        isSubmitting: true
+      }
     }))
 
     try {
@@ -317,39 +371,45 @@ export const useMobileFormValidation = (
 
         setValidationState(prev => ({
           ...prev,
-          overallValidation,
-            isSubmitted,
-            isSubmitting}
+          overallValidation: {
+            ...prev.overallValidation,
+            isSubmitted: true,
+            isSubmitting: false
+          }
         }))
 
         callbacks.onFormSubmit?.(formData, true)
         triggerHapticFeedback('medium')
         triggerSoundFeedback('success')
 
-        return { success, data, errors] }
+        return { success: true, data: formData, errors: [] }
       } else {
         setValidationState(prev => ({
           ...prev,
-          overallValidation,
-            isSubmitting}
+          overallValidation: {
+            ...prev.overallValidation,
+            isSubmitting: false
+          }
         }))
 
         callbacks.onFormSubmit?.({}, false)
         triggerHapticFeedback('strong')
         triggerSoundFeedback('error')
 
-        return { success, data}, errors}
+        return { success: false, data: {}, errors: validationState.overallValidation.errors }
       }
     } catch (error) {
-      console.error('Form submission error, error)
+      console.error('Form submission error:', error)
       
       setValidationState(prev => ({
         ...prev,
-        overallValidation,
-          isSubmitting}
+        overallValidation: {
+          ...prev.overallValidation,
+          isSubmitting: false
+        }
       }))
 
-      return { success, data}, errors] }
+      return { success: false, data: {}, errors: ['Form submission failed'] }
     }
   }, [validationState.fields, validationState.overallValidation.errors, validateAllFields, callbacks, triggerHapticFeedback, triggerSoundFeedback])
 
@@ -357,25 +417,29 @@ export const useMobileFormValidation = (
   const resetForm = useCallback(() => {
     setValidationState(prev => ({
       ...prev,
-      fields).reduce((acc, fieldName) => {
+      fields: Object.keys(prev.fields).reduce((acc, fieldName) => {
         acc[fieldName] = {
           ...prev.fields[fieldName],
-          value].value,
-          validationState,
-            errors],
-            isDirty,
-            isTouched,
-            isSubmitting,
-            isSubmitted}
+          value: initialFields[fieldName].value,
+          validationState: {
+            isValid: true,
+            errors: [],
+            isDirty: false,
+            isTouched: false,
+            isSubmitting: false,
+            isSubmitted: false
+          }
         }
         return acc
       }, {} as Record<string, FormField>),
-      overallValidation,
-        errors],
-        isDirty,
-        isTouched,
-        isSubmitting,
-        isSubmitted}
+      overallValidation: {
+        isValid: true,
+        errors: [],
+        isDirty: false,
+        isTouched: false,
+        isSubmitting: false,
+        isSubmitted: false
+      }
     }))
 
     // Clear validation timers
@@ -385,14 +449,15 @@ export const useMobileFormValidation = (
   }, [initialFields])
 
   // Get field validation state
-  const getFieldValidation = useCallback((fieldName) => {
+  const getFieldValidation = useCallback((fieldName: string) => {
     return validationState.fields[fieldName]?.validationState || {
-      isValid,
-      errors],
-      isDirty,
-      isTouched,
-      isSubmitting,
-      isSubmitted}
+      isValid: true,
+      errors: [],
+      isDirty: false,
+      isTouched: false,
+      isSubmitting: false,
+      isSubmitted: false
+    }
   }, [validationState.fields])
 
   // Check if form is valid
@@ -416,7 +481,7 @@ export const useMobileFormValidation = (
     validationState,
     updateField,
     touchField,
-    validateField,
+    validateField: debouncedValidateField,
     validateAllFields,
     submitForm,
     resetForm,
@@ -429,23 +494,25 @@ export const useMobileFormValidation = (
 }
 
 // Convenience hook for basic form validation
-export const useBasicFormValidation = (initialFields, Omit<FormField, 'validationState'>>) => {
+export const useBasicFormValidation = (initialFields: Record<string, Omit<FormField, 'validationState'>>) => {
   return useMobileFormValidation(initialFields, {}, {
-    enableTouchFeedback,
-    enableHapticFeedback,
-    enableSoundFeedback,
-    validationDelay,
-    enablePerformanceOptimization,
-    maxValidationRetries})
+    enableTouchFeedback: true,
+    enableHapticFeedback: false,
+    enableSoundFeedback: false,
+    validationDelay: 500,
+    enablePerformanceOptimization: false,
+    maxValidationRetries: 1
+  })
 }
 
 // Convenience hook for enhanced form validation
-export const useEnhancedFormValidation = (initialFields, Omit<FormField, 'validationState'>>) => {
+export const useEnhancedFormValidation = (initialFields: Record<string, Omit<FormField, 'validationState'>>) => {
   return useMobileFormValidation(initialFields, {}, {
-    enableTouchFeedback,
-    enableHapticFeedback,
-    enableSoundFeedback,
-    validationDelay,
-    enablePerformanceOptimization,
-    maxValidationRetries})
+    enableTouchFeedback: true,
+    enableHapticFeedback: true,
+    enableSoundFeedback: true,
+    validationDelay: 300,
+    enablePerformanceOptimization: true,
+    maxValidationRetries: 3
+  })
 }