@coxy/react-validator 3.0.0 → 4.0.0

package/src/context.ts

@@ -1,9 +1,14 @@
 import { createContext } from 'react'
 
-import type { Validity } from './types'
+import type { FieldParams, Validity } from './types'
+
+export interface RegisteredFieldHandle {
+  props: FieldParams
+  validate: () => Validity
+}
 
 export const Context = createContext<{
-  registerField: (field: string | number) => void
-  unregisterField: (field: string | number) => void
+  registerField: (field: RegisteredFieldHandle) => void
+  unregisterField: (field: RegisteredFieldHandle) => void
   customErrors: Array<Validity>
 }>(null)

package/src/custom-errors.test.tsx

@@ -0,0 +1,73 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { act, render } from '@testing-library/react'
+import { createRef } from 'react'
+
+import { rules } from './rules'
+import { ValidatorField } from './validator-field'
+import { ValidatorWrapper, type ValidatorWrapper as ValidatorWrapperHandle } from './validator-wrapper'
+
+it('setCustomError overrides field validation result and clearCustomErrors restores it', () => {
+  const validator = createRef<ValidatorWrapperHandle>()
+
+  render(
+    <ValidatorWrapper ref={validator}>
+      <ValidatorField id="email-field" rules={rules.email} value="user@example.com" />
+    </ValidatorWrapper>,
+  )
+
+  // Initially valid
+  const fieldBefore = validator.current.getField('email-field')
+  const validityBefore = fieldBefore.validate()
+  expect(validityBefore.isValid).toBe(true)
+  expect(validityBefore.message).toBe('')
+
+  // Set a custom error
+  act(() => {
+    validator.current.setCustomError({ id: 'email-field', isValid: false, message: 'Custom error' })
+  })
+
+  const fieldWithCustom = validator.current.getField('email-field')
+  const validityWithCustom = fieldWithCustom.validate()
+  expect(validityWithCustom.isValid).toBe(false)
+  expect(validityWithCustom.message).toBe('Custom error')
+
+  // Clear custom errors
+  act(() => {
+    validator.current.clearCustomErrors()
+  })
+  const fieldAfter = validator.current.getField('email-field')
+  const validityAfter = fieldAfter.validate()
+  expect(validityAfter.isValid).toBe(true)
+  expect(validityAfter.message).toBe('')
+})
+
+it('custom error is used inside ValidatorField render-prop child', () => {
+  const validator = createRef<ValidatorWrapperHandle>()
+  const messages: string[] = []
+
+  render(
+    <ValidatorWrapper ref={validator}>
+      <ValidatorField id="field-x" rules={rules.password} value="strongpassword">
+        {({ message }) => {
+          messages.push(message)
+          return null
+        }}
+      </ValidatorField>
+    </ValidatorWrapper>,
+  )
+
+  // Initially valid → message pushed should be ''
+  expect(messages[messages.length - 1]).toBe('')
+
+  // After setting custom error, the render-prop should see the custom message.
+  act(() => {
+    validator.current.setCustomError({ id: 'field-x', isValid: false, message: 'Injected' })
+  })
+  const field = validator.current.getField('field-x')
+  const res = field.validate()
+  expect(res.isValid).toBe(false)
+  expect(res.message).toBe('Injected')
+})

package/src/index.test.ts

@@ -1,7 +1,22 @@
-import { ValidatorWrapper, ValidatorField, rules } from './index'
+import { rules, useValidator, Validator, ValidatorField, ValidatorWrapper } from './index'
 
-it('renders with or without a name', () => {
-  expect(typeof ValidatorWrapper).toBe('function')
-  expect(typeof ValidatorField).toBe('function')
+it('exports surface is available', () => {
+  expect(typeof ValidatorWrapper).toBe('object')
+  expect(typeof ValidatorField).toBe('object')
   expect(typeof rules).toBe('object')
+  expect(typeof Validator).toBe('function')
+  expect(typeof useValidator).toBe('function')
+})
+
+it('use exports to execute a basic validation flow', () => {
+  // use Validator (class)
+  const validator = new Validator()
+  validator.addField({ value: 'test@example.com', rules: rules.email })
+  const res = validator.validate()
+  expect(res.isValid).toBe(true)
+
+  // use useValidator (hook-like util function)
+  const [isValid, { message }] = useValidator('bad-email', rules.email)
+  expect(isValid).toBe(false)
+  expect(message).toBe('Email is invalid')
 })

package/src/index.ts

@@ -1,6 +1,7 @@
 export { rules } from './rules'
+
+export type { ErrorMessage, FieldParams, ValidatorRule, Validity } from './types'
+export { useValidator } from './use-validator'
+export { Validator } from './validator'
 export { ValidatorField } from './validator-field'
 export { ValidatorWrapper } from './validator-wrapper'
-export { Validator } from './validator'
-export { useValidator } from './use-validator'
-export * from './types'

package/src/rules.test.ts

@@ -33,6 +33,7 @@ it('check rule password', () => {
 it('check rule bool', () => {
   expect(rules.bool.length).toBe(1)
 
+  // @ts-expect-error
   const result = rules.bool[0].rule(true)
   expect(result).toBe(true)
 })
@@ -56,18 +57,20 @@ it('check rule min', () => {
   result = rules.min(10)[0].rule('')
   expect(result).toBe(false)
 
-  result = rules.min(9)[0].rule('testtesttest')
+  result = rules.min(9)[0].rule('test-test-test')
   expect(result).toBe(false)
 
   result = rules.min(9)[0].rule('11')
   expect(result).toBe(true)
 
+  // @ts-expect-error
   result = rules.min(9)[0].rule(10)
   expect(result).toBe(true)
 
   result = rules.min(9)[0].rule('8')
   expect(result).toBe(false)
 
+  // @ts-expect-error
   result = rules.min(9)[0].rule(7)
   expect(result).toBe(false)
 
@@ -80,18 +83,20 @@ it('check rule max', () => {
   result = rules.max(10)[0].rule('')
   expect(result).toBe(false)
 
-  result = rules.max(9)[0].rule('testtesttest')
+  result = rules.max(9)[0].rule('test-test-test')
   expect(result).toBe(false)
 
   result = rules.max(9)[0].rule('11')
   expect(result).toBe(false)
 
+  // @ts-expect-error
   result = rules.max(9)[0].rule(10)
   expect(result).toBe(false)
 
   result = rules.max(9)[0].rule('5')
   expect(result).toBe(true)
 
+  // @ts-expect-error
   result = rules.max(9)[0].rule(5)
   expect(result).toBe(true)
 
@@ -107,10 +112,10 @@ it('check rule length', () => {
   result = rules.length(1)[0].rule('1')
   expect(result).toBe(true)
 
-  result = rules.length(1, 10)[0].rule('testtesttest')
+  result = rules.length(1, 10)[0].rule('test-test-test')
   expect(result).toBe(true)
 
-  result = rules.length(1, 10)[1].rule('testtesttest')
+  result = rules.length(1, 10)[1].rule('test-test-test')
   expect(result).toBe(false)
 
   result = rules.length(1, 10)[0].rule('lol')

package/src/rules.ts

@@ -2,68 +2,68 @@ import type { ValidatorRule } from './types'
 
 // eslint-disable-next-line
 const emailReg =
-  /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+  /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
 
 export type ValidatorRules = ValidatorRule[]
 
 export const rules = {
   notEmpty: [
     {
-      rule: (value) => value !== '' && value.length > 0,
+      rule: (value: string) => value !== '' && value.length > 0,
       message: 'Value is required',
     },
   ],
 
   bool: [
     {
-      rule: (value) => !!value,
+      rule: (value: string) => !!value,
       message: 'Value is required',
     },
   ],
 
   password: [
     {
-      rule: (value) => value.length > 0,
+      rule: (value: string) => value.length > 0,
       message: 'Password field cannot be empty',
     },
     {
-      rule: (value) => value.length > 5,
+      rule: (value: string) => value.length > 5,
       message: 'Password field can not be less than 6 characters',
     },
   ],
 
   email: [
     {
-      rule: (value) => !!value && value !== '' && value.length !== 0,
+      rule: (value: string) => !!value && value !== '' && value.length !== 0,
       message: 'Email is required',
     },
     {
-      rule: (value) => emailReg.test(String(value).toLowerCase()),
+      rule: (value: string) => emailReg.test(String(value).toLowerCase()),
       message: 'Email is invalid',
     },
   ],
 
-  min: (min) => [
+  min: (min: number) => [
     {
-      rule: (value) => Number.parseFloat(value) > min,
+      rule: (value: string) => Number.parseFloat(value) > min,
       message: `The value must be greater than ${min}`,
     },
   ],
 
-  max: (max) => [
+  max: (max: number) => [
     {
-      rule: (value) => Number.parseFloat(value) < max,
+      rule: (value: string) => Number.parseFloat(value) < max,
       message: `The value must be smaller ${max}`,
     },
   ],
 
-  length: (min, max?) => [
+  length: (min: number, max?: number) => [
     {
-      rule: (value) => String(value).length >= min,
+      rule: (value: string) => String(value).length >= min,
       message: `No less than ${min} symbols`,
     },
     {
-      rule: (value) => (max !== undefined ? String(value).length <= max : true),
+      rule: (value: string) => (max !== undefined ? String(value).length <= max : true),
       message: `No more than ${max} symbols`,
     },
   ],

package/src/use-validator.test.tsx

@@ -2,8 +2,7 @@
  * @jest-environment jsdom
  */
 
-import { render, screen } from '@testing-library/react'
-import { act } from '@testing-library/react'
+import { act, render, screen } from '@testing-library/react'
 import { useEffect, useState } from 'react'
 
 import { rules } from './rules'

package/src/validator-field.test.tsx

@@ -21,7 +21,7 @@ it('check context validator', () => {
   const validator = createRef<ValidatorWrapper>()
   render(
     <ValidatorWrapper ref={validator}>
-      <ValidatorField rules={[]} />
+      <ValidatorField rules={[]} value="" />
     </ValidatorWrapper>,
   )
 
@@ -130,8 +130,8 @@ it('check custom rule message function', () => {
   const validator = createRef<ValidatorWrapper>()
   const rule = [
     {
-      rule: (value) => value !== 'test',
-      message: (value) => `test message ${value}`,
+      rule: (value: string) => value !== 'test',
+      message: (value: string) => `test message ${value}`,
     },
   ]
   render(
@@ -147,3 +147,34 @@ it('check custom rule message function', () => {
   expect(validateResult.isValid).toBe(false)
   expect(validateResult.message).toBe('test message test')
 })
+
+jest.useFakeTimers()
+
+it('re-renders the same field to cover handleRef initialization false branch and else-validate path', () => {
+  const validator = createRef<ValidatorWrapper>()
+
+  function Comp() {
+    const [val, setVal] = useState('')
+    useEffect(() => {
+      setTimeout(() => {
+        act(() => setVal('abc'))
+      }, 50)
+    }, [])
+    return (
+      <ValidatorWrapper ref={validator}>
+        <ValidatorField id="rerender" rules={rules.notEmpty} value={val}>
+          {() => null}
+        </ValidatorField>
+      </ValidatorWrapper>
+    )
+  }
+
+  render(<Comp />)
+  // initial: invalid
+  let field = validator.current.getField('rerender')
+  expect(field.validate().isValid).toBe(false)
+
+  jest.runAllTimers()
+  field = validator.current.getField('rerender')
+  expect(field.validate().isValid).toBe(true)
+})

package/src/validator-field.tsx

@@ -1,69 +1,59 @@
-import { Component, type ReactNode } from 'react'
-import type { Validity } from 'types'
+import { forwardRef, type ReactNode, useContext, useEffect, useRef } from 'react'
+import type { FieldParams, Validity } from 'types'
 
-import { Context } from './context'
-import type { ValidatorRules } from './rules'
+import { Context, type RegisteredFieldHandle } from './context'
 import { Field } from './validator'
 
-// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+// biome-ignore lint/suspicious/noExplicitAny: <need>
 export type Value = any
 
 type Fn = (validity: Validity, value: Value) => ReactNode
 
-interface Props {
-  rules?: ValidatorRules
-  required?: boolean
-  value?: Value
-  id?: string | number
+type Props = FieldParams & {
   children?: ReactNode | Fn
-  unregisterField: (val: Value) => void
-  registerField: (val: Value) => void
-  customErrors: Array<Validity>
 }
 
-class ValidationFieldWrapper extends Component<Props> {
-  componentWillUnmount() {
-    this.props.unregisterField(this)
-  }
-
-  componentDidMount() {
-    this.props.registerField(this)
+export const ValidatorField = forwardRef<unknown, Props>(function ValidatorField(props: Props, _ref) {
+  const { children, value } = props
+  const { customErrors, registerField, unregisterField } = useContext(Context)
+
+  const propsRef = useRef(props)
+  propsRef.current = props
+
+  const customErrorsRef = useRef(customErrors)
+  customErrorsRef.current = customErrors
+
+  const handleRef = useRef<RegisteredFieldHandle | null>(null)
+  if (!handleRef.current) {
+    handleRef.current = {
+      get props() {
+        return propsRef.current
+      },
+      validate: () => {
+        const curr = propsRef.current
+        const customError = customErrorsRef.current.find((item) => item.id === curr.id)
+        if (customError) {
+          return customError
+        }
+        const field = new Field({
+          rules: curr.rules,
+          required: curr.required,
+          value: curr.value,
+          id: curr.id,
+        })
+        return field.validate()
+      },
+    }
   }
 
-  validate(): Validity {
-    const props = this.props
-    const customError = props.customErrors.find((item) => item.id === props.id)
-    if (customError) {
-      return customError
+  useEffect(() => {
+    registerField(handleRef.current as RegisteredFieldHandle)
+    return () => {
+      unregisterField(handleRef.current as RegisteredFieldHandle)
     }
+  }, [registerField, unregisterField])
 
-    const field = new Field({
-      rules: props.rules,
-      required: props.required,
-      value: props.value,
-      id: props.id,
-    })
-    return field.validate()
-  }
-
-  render() {
-    const { children, value } = this.props
-    const validity = this.validate()
-    return typeof children === 'function' ? children(validity, value) : children
-  }
-}
+  const validity = handleRef.current.validate()
 
-export function ValidatorField(props: Omit<Props, 'registerField' | 'unregisterField' | 'customErrors'>) {
-  return (
-    <Context.Consumer>
-      {(data) => (
-        <ValidationFieldWrapper
-          {...props}
-          customErrors={data.customErrors}
-          registerField={data.registerField}
-          unregisterField={data.unregisterField}
-        />
-      )}
-    </Context.Consumer>
-  )
-}
+  return typeof children === 'function' ? (children as Fn)(validity, value) : (children as ReactNode)
+})

package/src/validator-wrapper.test.tsx

@@ -13,12 +13,12 @@ it('check wrapper validator', () => {
   const validator = createRef<ValidatorWrapper>()
   render(
     <ValidatorWrapper ref={validator}>
-      <ValidatorField rules={[]} />
-      <ValidatorField rules={[]} />
-      <ValidatorField rules={[]} />
-      <ValidatorField rules={[]} />
-      <ValidatorField rules={[]} />
-      <ValidatorField rules={[]} />
+      <ValidatorField rules={[]} value="" />
+      <ValidatorField rules={[]} value="" />
+      <ValidatorField rules={[]} value="" />
+      <ValidatorField rules={[]} value="" />
+      <ValidatorField rules={[]} value="" />
+      <ValidatorField rules={[]} value="" />
     </ValidatorWrapper>,
   )
 
@@ -30,8 +30,8 @@ it('check getField validator', () => {
   const validator = createRef<ValidatorWrapper>()
   render(
     <ValidatorWrapper ref={validator}>
-      <ValidatorField rules={[]} id="test" />
-      <ValidatorField rules={[]} id="test-fields" />
+      <ValidatorField rules={[]} id="test" value="" />
+      <ValidatorField rules={[]} id="test-fields" value="" />
     </ValidatorWrapper>,
   )
   expect(typeof validator.current.getField).toBe('function')
@@ -48,7 +48,7 @@ it('check getField undefined field', () => {
   const validator = createRef<ValidatorWrapper>()
   render(
     <ValidatorWrapper ref={validator}>
-      <ValidatorField rules={[]} id="test-empty-field" />
+      <ValidatorField rules={[]} id="test-empty-field" value="" />
     </ValidatorWrapper>,
   )
 
@@ -75,7 +75,7 @@ it('check unregisterField, registerField', () => {
   const validator = createRef<ValidatorWrapper>()
   render(
     <ValidatorWrapper ref={validator}>
-      <ValidatorField rules={[]} id="test-register-field" />
+      <ValidatorField rules={[]} id="test-register-field" value="" />
     </ValidatorWrapper>,
   )
 
@@ -87,9 +87,9 @@ it('check filed in field', () => {
   const validator = createRef<ValidatorWrapper>()
   render(
     <ValidatorWrapper ref={validator}>
-      <ValidatorField rules={[]}>
-        <ValidatorField rules={[]} id="check-validate-field-1" />
-        <ValidatorField rules={[]} id="check-validate-field-2" />
+      <ValidatorField rules={[]} value="">
+        <ValidatorField rules={[]} id="check-validate-field-1" value="" />
+        <ValidatorField rules={[]} id="check-validate-field-2" value="" />
       </ValidatorField>
     </ValidatorWrapper>,
   )
@@ -132,3 +132,21 @@ it('check two validators', () => {
   expect(validatorFailed.current.validate().isValid).toBe(false)
   expect(validatorSuccess.current.validate().isValid).toBe(true)
 })
+
+it('covers registerField duplicate and unregisterField non-existing branches', () => {
+  const validator = createRef<ValidatorWrapper>()
+  render(
+    <ValidatorWrapper ref={validator}>
+      <ValidatorField rules={[]} id="dup-field" value="" />
+    </ValidatorWrapper>,
+  )
+
+  const handle = validator.current.getField('dup-field')
+  validator.current.registerField(handle)
+  validator.current.unregisterField(handle)
+  const dummy = {
+    props: { value: '', rules: [], id: 'dummy' },
+    validate: () => ({ isValid: true, message: '' }),
+  }
+  validator.current.unregisterField(dummy)
+})

package/src/validator-wrapper.tsx

@@ -1,75 +1,78 @@
-import { Component, type ReactNode, type RefObject } from 'react'
+import { forwardRef, type ReactNode, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react'
 
-import { Context } from './context'
+import { Context, type RegisteredFieldHandle } from './context'
 import type { Validity } from './types'
-import { type Field, Validator } from './validator'
+import { Validator } from './validator'
 
 interface ComponentProps {
   children?: ReactNode
   stopAtFirstError?: boolean
-  ref?: RefObject<ValidatorWrapper>
 }
 
-export class ValidatorWrapper extends Component<ComponentProps> {
-  fields = []
-  state = {
-    customErrors: [],
-  }
-
-  constructor(props) {
-    super(props)
-    this.registerField = this.registerField.bind(this)
-    this.unregisterField = this.unregisterField.bind(this)
-  }
+export interface ValidatorWrapper {
+  validate: () => Validity
+  getField: (id: string | number) => RegisteredFieldHandle | null
+  registerField: (field: RegisteredFieldHandle) => void
+  unregisterField: (field: RegisteredFieldHandle) => void
+  setCustomError: (customError: Validity) => void
+  clearCustomErrors: () => void
+}
 
-  componentWillUnmount() {
-    this.fields = []
-  }
+export const ValidatorWrapper = forwardRef<ValidatorWrapper, ComponentProps>(function ValidatorWrapper(
+  { children, stopAtFirstError },
+  ref,
+) {
+  const fieldsRef = useRef<RegisteredFieldHandle[]>([])
+  const [customErrors, setCustomErrors] = useState<Validity[]>([])
 
-  registerField(field) {
-    if (field && !this.fields.includes(field)) {
-      this.fields.push(field)
+  const registerField = useCallback((field: RegisteredFieldHandle) => {
+    if (field && !fieldsRef.current.includes(field)) {
+      fieldsRef.current.push(field)
     }
-  }
+  }, [])
 
-  unregisterField(field) {
-    const index = this.fields.indexOf(field)
-    if (index > -1) this.fields.splice(index, 1)
-  }
+  const unregisterField = useCallback((field: RegisteredFieldHandle) => {
+    const index = fieldsRef.current.indexOf(field)
+    if (index > -1) fieldsRef.current.splice(index, 1)
+  }, [])
 
-  getField(id): Field | null {
-    return this.fields.find((field) => field.props.id === id) || null
-  }
+  const getField = useCallback<ValidatorWrapper['getField']>((id) => {
+    return fieldsRef.current.find((field) => field?.props?.id === id) || null
+  }, [])
 
-  setCustomError(customError: Validity) {
-    this.setState({
-      customErrors: [...this.state.customErrors, customError],
-    })
-  }
+  const setCustomError = useCallback<ValidatorWrapper['setCustomError']>((customError) => {
+    setCustomErrors((prev) => [...prev, customError])
+  }, [])
 
-  clearCustomErrors() {
-    this.setState({ customErrors: [] })
-  }
+  const clearCustomErrors = useCallback<ValidatorWrapper['clearCustomErrors']>(() => {
+    setCustomErrors([])
+  }, [])
 
-  validate(): Validity {
-    const validator = new Validator({ stopAtFirstError: this.props.stopAtFirstError })
-    for (const comp of this.fields) {
+  const validate = useCallback<ValidatorWrapper['validate']>(() => {
+    const validator = new Validator({ stopAtFirstError })
+    for (const comp of fieldsRef.current) {
       validator.addField(comp.props)
     }
     return validator.validate()
-  }
+  }, [stopAtFirstError])
 
-  render(): ReactNode {
-    return (
-      <Context.Provider
-        value={{
-          customErrors: this.state.customErrors,
-          registerField: this.registerField,
-          unregisterField: this.unregisterField,
-        }}
-      >
-        {this.props.children}
-      </Context.Provider>
-    )
-  }
-}
+  useImperativeHandle(
+    ref,
+    () => ({
+      validate,
+      getField,
+      registerField,
+      unregisterField,
+      setCustomError,
+      clearCustomErrors,
+    }),
+    [validate, getField, registerField, unregisterField, setCustomError, clearCustomErrors],
+  )
+
+  const contextValue = useMemo(
+    () => ({ customErrors, registerField, unregisterField }),
+    [customErrors, registerField, unregisterField],
+  )
+
+  return <Context.Provider value={contextValue}>{children}</Context.Provider>
+})