feat: useForm hook

Author: RohitRaj011

src/Common/Helper.tsx

@@ -193,110 +193,6 @@ export function getCookie(sKey) {
     )
 }
 
-export function useForm(stateSchema, validationSchema = {}, callback) {
-    const [state, setState] = useState(stateSchema)
-    const [disable, setDisable] = useState(true)
-    const [isDirty, setIsDirty] = useState(false)
-
-    // Disable button in initial render.
-    useEffect(() => {
-        setDisable(true)
-    }, [])
-
-    // For every changed in our state this will be fired
-    // To be able to disable the button
-    useEffect(() => {
-        if (isDirty) {
-            setDisable(validateState(state))
-        }
-    }, [state, isDirty])
-
-    // Used to disable submit button if there's an error in state
-    // or the required field in state has no value.
-    // Wrapped in useCallback to cached the function to avoid intensive memory leaked
-    // in every re-render in component
-    const validateState = useCallback(
-        (state) => {
-            // check errors in all fields
-            const hasErrorInState = Object.keys(validationSchema).some((key) => {
-                const isInputFieldRequired = validationSchema[key].required
-                const stateValue = state[key].value // state value
-                const stateError = state[key].error // state error
-                return (isInputFieldRequired && !stateValue) || stateError
-            })
-            return hasErrorInState
-        },
-        [state, validationSchema],
-    )
-
-    function validateField(name, value): string | string[] {
-        if (validationSchema[name].required) {
-            if (!value) {
-                return 'This is a required field.'
-            }
-        }
-
-        function _validateSingleValidator(validator, value) {
-            if (value && !validator.regex.test(value)) {
-                return false
-            }
-            return true
-        }
-
-        // single validator
-        const _validator = validationSchema[name].validator
-        if (_validator && typeof _validator === 'object') {
-            if (!_validateSingleValidator(_validator, value)) {
-                return _validator.error
-            }
-        }
-
-        // multiple validators
-        const _validators = validationSchema[name].validators
-        if (_validators && typeof _validators === 'object' && Array.isArray(_validators)) {
-            const errors = []
-            _validators.forEach((_validator) => {
-                if (!_validateSingleValidator(_validator, value)) {
-                    errors.push(_validator.error)
-                }
-            })
-            if (errors.length > 0) {
-                return errors
-            }
-        }
-
-        return ''
-    }
-
-    const handleOnChange = useCallback(
-        (event) => {
-            setIsDirty(true)
-
-            const { name, value } = event.target
-            const error = validateField(name, value)
-            setState((prevState) => ({
-                ...prevState,
-                [name]: { value, error },
-            }))
-        },
-        [validationSchema],
-    )
-
-    const handleOnSubmit = (event) => {
-        event.preventDefault()
-        const newState = Object.keys(validationSchema).reduce((agg, curr) => {
-            agg[curr] = { ...state[curr], error: validateField(curr, state[curr].value) }
-            return agg
-        }, state)
-        if (!validateState(newState)) {
-            callback(state)
-        } else {
-            setState({ ...newState })
-        }
-    }
-    return { state, disable, handleOnChange, handleOnSubmit }
-}
-
 export function handleUTCTime(ts: string, isRelativeTime = false) {
     let timestamp = ''
     try {

src/Shared/Hooks/index.ts

@@ -17,3 +17,4 @@
 export * from './UsePrompt'
 export * from './useGetResourceKindsOptions'
 export * from './UseDownload'
+export * from './useForm'

src/Shared/Hooks/useForm/index.ts

@@ -0,0 +1,2 @@
+export * from './useForm'
+export * from './useForm.types'

src/Shared/Hooks/useForm/useForm.ts

@@ -0,0 +1,173 @@
+import { ChangeEvent, FormEvent, useState } from 'react'
+
+import { checkValidation } from './useForm.utils'
+import {
+    DirtyFields,
+    UseFormErrors,
+    TouchedFields,
+    UseFormSubmitHandler,
+    UseFormValidation,
+    UseFormValidations,
+} from './useForm.types'
+
+/**
+ * A custom hook to manage form state, validation, and submission handling.
+ *
+ * @template T - A record type representing form data.
+ * @param options (optional) - Options for initial form values, validation rules, and form mode.
+ * @param options.validations - An object containing validation rules for form fields.
+ * @param options.initialValues - An object representing the initial values of the form.
+ * @param options.mode (default: `onChange`) - A string to set validation mode, either 'onChange' or 'onBlur'.
+ * @returns Returns form state, handlers for change and submission, validation errors, and a trigger function for manual validation.
+ */
+export const useForm = <T extends Record<keyof T, any> = {}>(options?: {
+    validations?: UseFormValidations<T>
+    initialValues?: Partial<T>
+    mode?: 'onChange' | 'onBlur'
+}) => {
+    const [data, setData] = useState<T>((options?.initialValues || {}) as T)
+    const [dirtyFields, setDirtyFields] = useState<DirtyFields<T>>({})
+    const [touchedFields, setTouchedFields] = useState<TouchedFields<T>>({})
+    const [errors, setErrors] = useState<UseFormErrors<T>>({})
+
+    /**
+     * Handles change events for form inputs, updates the form data, and triggers validation.
+     *
+     * @template S - The sanitized value type.
+     * @param key - The key of the form field to be updated.
+     * @param sanitizeFn - An optional function to sanitize the input value.
+     * @returns The event handler for input changes.
+     */
+    const onChange =
+        <S extends unknown>(key: keyof T, sanitizeFn?: (value: string) => S) =>
+        (e: ChangeEvent<HTMLInputElement & HTMLSelectElement>) => {
+            const value = sanitizeFn ? sanitizeFn(e.target.value) : e.target.value
+            setData({
+                ...data,
+                [key]: value,
+            })
+            setTouchedFields({
+                ...data,
+                [key]: true,
+            })
+
+            if (!options?.mode || options?.mode === 'onChange' || dirtyFields[key]) {
+                const validations = options?.validations ?? {}
+                const error = checkValidation<T>(value as T[keyof T], validations[key as string])
+                setErrors({ ...errors, [key]: error })
+            }
+        }
+
+    /**
+     * Handles blur events for form inputs and triggers validation if the form mode is 'onBlur'.
+     *
+     * @param key - The key of the form field to be validated on blur.
+     * @returns The event handler for the blur event.
+     */
+    const onBlur = (key: keyof T) => () => {
+        setDirtyFields({ ...dirtyFields, [key]: options?.initialValues?.[key] === data[key] })
+        if (options?.mode === 'onBlur') {
+            const validations = options?.validations ?? {}
+            const error = checkValidation<T>(data[key] as T[keyof T], validations[key as string])
+            setErrors({ ...errors, [key]: error })
+        }
+    }
+
+    /**
+     * Handles form submission, validates all form fields, and calls the provided `onValid` function if valid.
+     *
+     * @param onValid - A function to handle valid form data on submission.
+     * @returns The event handler for form submission.
+     */
+    const handleSubmit = (onValid: UseFormSubmitHandler<T>) => (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+        const validations = options?.validations
+        if (validations) {
+            const newErrors: UseFormErrors<T> = {}
+
+            Object.keys(validations).forEach((key) => {
+                const validation: UseFormValidation = validations[key]
+                const error = checkValidation<T>(data[key], validation)
+                if (error) {
+                    newErrors[key] = error
+                }
+            })
+
+            if (Object.keys(newErrors).length) {
+                setErrors(newErrors)
+                return
+            }
+        }
+
+        setErrors({})
+        onValid(data, e)
+    }
+
+    /**
+     * Manually triggers validation for specific form fields.
+     *
+     * @param name - The key(s) of the form field(s) to validate.
+     * @returns The validation error(s), if any.
+     */
+    const trigger = (name: keyof T | (keyof T)[]): (string | string[]) | (string | string[])[] => {
+        const validations = options?.validations
+
+        if (Array.isArray(name)) {
+            const newErrors: UseFormErrors<T> = {}
+
+            const _errors = name.map((key) => {
+                if (validations) {
+                    const validation = validations[key]
+                    const error = checkValidation(data[key], validation)
+                    newErrors[key] = error
+
+                    return error
+                }
+
+                return null
+            })
+
+            if (Object.keys(newErrors).length) {
+                setErrors({ ...errors, ...newErrors })
+            }
+
+            return _errors
+        }
+
+        if (validations) {
+            const validation = validations[name]
+            const error = checkValidation(data[name], validation)
+
+            if (error) {
+                setErrors({ ...errors, [name]: error })
+            }
+
+            return error
+        }
+
+        return null
+    }
+
+    /**
+     * Registers form input fields with onChange and onBlur handlers.
+     *
+     * @param name - The key of the form field to register.
+     * @param sanitizeFn - An optional function to sanitize the input value.
+     * @returns An object containing `onChange` and `onBlur` event handlers.
+     */
+    const register = <S extends unknown>(name: keyof T, sanitizeFn?: (value: string) => S) => ({
+        onChange: onChange(name, sanitizeFn),
+        onBlur: onBlur(name),
+    })
+
+    return {
+        data,
+        errors,
+        register,
+        handleSubmit,
+        trigger,
+        touchedFields,
+        dirtyFields,
+        isDirty: Object.values(dirtyFields).some((value) => value),
+    }
+}

src/Shared/Hooks/useForm/useForm.types.ts

@@ -0,0 +1,44 @@
+import { FormEvent } from 'react'
+
+type ValidationRequired =
+    | boolean
+    | {
+          value: boolean
+          message: string
+      }
+
+type ValidationPattern =
+    | {
+          value: RegExp
+          message: string
+      }
+    | {
+          value: RegExp
+          message: string
+      }[]
+
+type ValidationCustom =
+    | {
+          isValid: (value: string) => boolean
+          message: string
+      }
+    | {
+          isValid: (value: string) => boolean
+          message: string
+      }[]
+
+export interface UseFormValidation {
+    required?: ValidationRequired
+    pattern?: ValidationPattern
+    custom?: ValidationCustom
+}
+
+export type UseFormErrors<T> = Partial<Record<keyof T, string | string[]>>
+
+export type DirtyFields<T> = Partial<Record<keyof T, boolean>>
+
+export type TouchedFields<T> = Partial<Record<keyof T, boolean>>
+
+export type UseFormValidations<T extends {}> = Partial<Record<keyof T, UseFormValidation>>
+
+export type UseFormSubmitHandler<T extends {}> = (data: T, e?: FormEvent<HTMLFormElement>) => void

src/Shared/Hooks/useForm/useForm.utils.ts

@@ -0,0 +1,57 @@
+import { UseFormValidation } from './useForm.types'
+
+/**
+ * Validates a form field based on the provided validation rules.
+ *
+ * @template T - A record type representing form data.
+ * @param value - The value of the form field to be validated.
+ * @param validation - The validation rules for the form field.
+ * @returns Returns error message(s) or null if valid.
+ */
+export const checkValidation = <T extends Record<keyof T, any> = {}>(
+    value: T[keyof T],
+    validation: UseFormValidation,
+): string | string[] | null => {
+    if (
+        (typeof validation?.required === 'object' ? validation.required.value : validation.required) &&
+        (value === null || value === undefined || value === '')
+    ) {
+        return typeof validation?.required === 'object' ? validation.required.message : 'This is a required field'
+    }
+
+    const errors = []
+
+    const pattern = validation?.pattern
+    if (Array.isArray(pattern)) {
+        const error = pattern.reduce<string[]>((acc, p) => {
+            if (!p.value.test(value)) {
+                acc.push(p.message)
+            }
+            return acc
+        }, [])
+
+        if (error.length) {
+            errors.push(...error)
+        }
+    } else if (pattern?.value && !pattern.value.test(value)) {
+        errors.push(pattern.message)
+    }
+
+    const custom = validation?.custom
+    if (Array.isArray(custom)) {
+        const error = custom.reduce<string[]>((acc, c) => {
+            if (!c.isValid(value)) {
+                acc.push(c.message)
+            }
+            return acc
+        }, [])
+
+        if (error.length) {
+            errors.push(...error)
+        }
+    } else if (custom?.isValid && !custom.isValid(value)) {
+        errors.push(custom.message)
+    }
+
+    return errors.length ? errors : null
+}