@coxy/react-validator 3.0.0 → 5.0.0

package/src/rules.ts

@@ -1,70 +1,9 @@
-import type { ValidatorRule } from './types'
+import { z } from 'zod'
 
-// 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,}))$/
-
-export type ValidatorRules = ValidatorRule[]
+export type ValidatorRules = z.ZodType[] | z.ZodType
 
 export const rules = {
-  notEmpty: [
-    {
-      rule: (value) => value !== '' && value.length > 0,
-      message: 'Value is required',
-    },
-  ],
-
-  bool: [
-    {
-      rule: (value) => !!value,
-      message: 'Value is required',
-    },
-  ],
-
-  password: [
-    {
-      rule: (value) => value.length > 0,
-      message: 'Password field cannot be empty',
-    },
-    {
-      rule: (value) => value.length > 5,
-      message: 'Password field can not be less than 6 characters',
-    },
-  ],
-
-  email: [
-    {
-      rule: (value) => !!value && value !== '' && value.length !== 0,
-      message: 'Email is required',
-    },
-    {
-      rule: (value) => emailReg.test(String(value).toLowerCase()),
-      message: 'Email is invalid',
-    },
-  ],
-
-  min: (min) => [
-    {
-      rule: (value) => Number.parseFloat(value) > min,
-      message: `The value must be greater than ${min}`,
-    },
-  ],
-
-  max: (max) => [
-    {
-      rule: (value) => Number.parseFloat(value) < max,
-      message: `The value must be smaller ${max}`,
-    },
-  ],
-
-  length: (min, max?) => [
-    {
-      rule: (value) => String(value).length >= min,
-      message: `No less than ${min} symbols`,
-    },
-    {
-      rule: (value) => (max !== undefined ? String(value).length <= max : true),
-      message: `No more than ${max} symbols`,
-    },
-  ],
+  notEmpty: [z.string().min(1, { error: 'Field is required' })],
+  isTrue: [z.boolean({ error: 'Value is required' }).and(z.literal(true))],
+  email: [z.string().min(1, { error: 'Email is required' }), z.email({ message: 'Email is invalid' })],
 }

package/src/types.ts

@@ -1,13 +1,7 @@
+import type { ZodSafeParseResult } from 'zod/index'
 import type { ValidatorRules } from './rules'
 import type { Value } from './validator-field'
 
-type Fn = (value: Value) => string
-
-export interface ValidatorRule {
-  rule: (value: Value) => boolean
-  message: string | Fn
-}
-
 export interface ErrorMessage {
   message: string
   isValid: boolean
@@ -16,7 +10,7 @@ export interface ErrorMessage {
 export interface Validity {
   message: string
   isValid: boolean
-  errors?: ErrorMessage[]
+  result: ZodSafeParseResult<unknown>
   id?: string | number
 }
 

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'
@@ -25,14 +24,14 @@ jest.useFakeTimers()
 it('check state change and hide field', () => {
   function Comp() {
     const [value, setValue] = useState(false)
-    const [isValid, validateObject] = useValidator(value, rules.bool)
+    const [isValid, validateObject] = useValidator(value, rules.isTrue)
 
     useEffect(() => {
       setTimeout(() => {
         act(() => {
           setValue(true)
         })
-      }, 100)
+      }, 200)
     }, [])
 
     return (
@@ -47,7 +46,7 @@ it('check state change and hide field', () => {
   })
 
   expect(screen.getByTestId('test1').textContent).toContain('false')
-  expect(screen.getByTestId('test2').textContent).toContain('Value is required')
+  expect(screen.getByTestId('test2').textContent).toContain('Invalid input: expected true')
 
   jest.runAllTimers()
 

package/src/use-validator.ts

@@ -3,7 +3,7 @@ import type { Validity } from './types'
 import { Validator } from './validator'
 import type { Value } from './validator-field'
 
-export function useValidator(value: Value, rules: ValidatorRules): [boolean, Pick<Validity, 'message' | 'errors'>] {
+export function useValidator(value: Value, rules: ValidatorRules): [boolean, Pick<Validity, 'message'>] {
   const validator = new Validator()
   validator.addField({ value, rules })
   const { isValid, ...validateObject } = validator.validate()

package/src/validator-field.test.tsx

@@ -4,7 +4,6 @@
 
 import { act, render } from '@testing-library/react'
 import { createRef, useEffect, useState } from 'react'
-
 import { rules } from './rules'
 import { ValidatorField } from './validator-field'
 import { ValidatorWrapper } from './validator-wrapper'
@@ -21,7 +20,7 @@ it('check context validator', () => {
   const validator = createRef<ValidatorWrapper>()
   render(
     <ValidatorWrapper ref={validator}>
-      <ValidatorField rules={[]} />
+      <ValidatorField rules={[]} value="" />
     </ValidatorWrapper>,
   )
 
@@ -51,13 +50,11 @@ it('check failed validation', () => {
 
     expect(validateResult1.isValid).toBe(false)
     expect(validateResult1.message).toBe('Email is invalid')
-    expect(validateResult1.errors.length).toBe(1)
 
     const validateResult2 = validator2.current.validate()
 
     expect(validateResult2.isValid).toBe(false)
     expect(validateResult2.message).toBe('Email is required')
-    expect(validateResult2.errors.length).toBe(1)
   })
 })
 
@@ -93,7 +90,6 @@ it('check state change and hide field', () => {
 
   expect(validateResult1.isValid).toBe(false)
   expect(validateResult1.message).toBe('Email is invalid')
-  expect(validateResult1.errors.length).toBe(1)
 })
 
 it('check success validation', () => {
@@ -126,24 +122,33 @@ it('check success validation fot child function', () => {
   expect(validateResult.message).toBe('')
 })
 
-it('check custom rule message function', () => {
+jest.useFakeTimers()
+
+it('re-renders the same field to cover handleRef initialization false branch and else-validate path', () => {
   const validator = createRef<ValidatorWrapper>()
-  const rule = [
-    {
-      rule: (value) => value !== 'test',
-      message: (value) => `test message ${value}`,
-    },
-  ]
-  render(
-    <ValidatorWrapper ref={validator}>
-      <ValidatorField rules={rule} value="test">
-        {({ isValid, message }) => <>{!isValid && <div>{message}</div>}</>}
-      </ValidatorField>
-    </ValidatorWrapper>,
-  )
 
-  const validateResult = validator.current.validate()
+  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>
+    )
+  }
 
-  expect(validateResult.isValid).toBe(false)
-  expect(validateResult.message).toBe('test message test')
+  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,52 @@
-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 { registerField, unregisterField } = useContext(Context)
+
+  const propsRef = useRef(props)
+  propsRef.current = props
+
+  const handleRef = useRef<RegisteredFieldHandle | null>(null)
+  if (!handleRef.current) {
+    handleRef.current = {
+      get props() {
+        return propsRef.current
+      },
+      validate: () => {
+        const curr = propsRef.current
+        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

@@ -4,7 +4,7 @@
 
 import { render } from '@testing-library/react'
 import { createRef } from 'react'
-
+import type { Validity } from 'types'
 import { rules } from './rules'
 import { ValidatorField } from './validator-field'
 import { ValidatorWrapper } from './validator-wrapper'
@@ -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>,
   )
 
@@ -62,20 +62,20 @@ it('check stopAtFirstError validator', () => {
     <ValidatorWrapper ref={validator} stopAtFirstError>
       <ValidatorField rules={[]} value="test" />
       <ValidatorField rules={rules.email} value="test" />
-      <ValidatorField rules={rules.password} value="" />
+      <ValidatorField rules={rules.isTrue} value={false} />
     </ValidatorWrapper>,
   )
+
   const fieldValidate = validator.current.validate()
   expect(fieldValidate.isValid).toBe(false)
   expect(fieldValidate.message).toBe('Email is invalid')
-  expect(fieldValidate.errors.length).toBe(1)
 })
 
 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>,
   )
@@ -107,7 +107,7 @@ it('check wrapper in wrapper', () => {
     <ValidatorWrapper ref={validatorOut}>
       <ValidatorField rules={rules.email} value="" />
       <ValidatorWrapper ref={validatorIn}>
-        <ValidatorField rules={rules.password} value="successpasswword" />
+        <ValidatorField rules={rules.isTrue} value={true} />
       </ValidatorWrapper>
     </ValidatorWrapper>,
   )
@@ -121,7 +121,7 @@ it('check two validators', () => {
   render(
     <>
       <ValidatorWrapper ref={validatorSuccess}>
-        <ValidatorField rules={rules.password} value="successpasswword" />
+        <ValidatorField rules={rules.notEmpty} value="successpasswword" />
       </ValidatorWrapper>
       <ValidatorWrapper ref={validatorFailed}>
         <ValidatorField rules={rules.email} value="" />
@@ -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: (): Validity => ({ isValid: true, message: '', result: { success: true, data: null } }),
+  }
+  validator.current.unregisterField(dummy)
+})

package/src/validator-wrapper.tsx

@@ -1,75 +1,62 @@
-import { Component, type ReactNode, type RefObject } from 'react'
+import { forwardRef, type ReactNode, useCallback, useImperativeHandle, useMemo, useRef } 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
+}
 
-  componentWillUnmount() {
-    this.fields = []
-  }
+export const ValidatorWrapper = forwardRef<ValidatorWrapper, ComponentProps>(function ValidatorWrapper(
+  { children, stopAtFirstError },
+  ref,
+) {
+  const fieldsRef = useRef<RegisteredFieldHandle[]>([])
 
-  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)
-  }
+  }, [])
 
-  getField(id): Field | null {
-    return this.fields.find((field) => field.props.id === id) || null
-  }
+  const unregisterField = useCallback((field: RegisteredFieldHandle) => {
+    const index = fieldsRef.current.indexOf(field)
+    if (index > -1) fieldsRef.current.splice(index, 1)
+  }, [])
 
-  setCustomError(customError: Validity) {
-    this.setState({
-      customErrors: [...this.state.customErrors, customError],
-    })
-  }
+  const getField = useCallback<ValidatorWrapper['getField']>((id) => {
+    return fieldsRef.current.find((field) => field?.props?.id === id) || null
+  }, [])
 
-  clearCustomErrors() {
-    this.setState({ customErrors: [] })
-  }
-
-  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()
-  }
-
-  render(): ReactNode {
-    return (
-      <Context.Provider
-        value={{
-          customErrors: this.state.customErrors,
-          registerField: this.registerField,
-          unregisterField: this.unregisterField,
-        }}
-      >
-        {this.props.children}
-      </Context.Provider>
-    )
-  }
-}
+  }, [stopAtFirstError])
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      validate,
+      getField,
+      registerField,
+      unregisterField,
+    }),
+    [validate, getField, registerField, unregisterField],
+  )
+
+  const contextValue = useMemo(() => ({ registerField, unregisterField }), [registerField, unregisterField])
+
+  return <Context.Provider value={contextValue}>{children}</Context.Provider>
+})

package/src/validator.test.tsx

@@ -10,7 +10,7 @@ it('check normal create validator', () => {
 it('check normal add and remove fields', () => {
   const validator = new Validator({ stopAtFirstError: true })
   const fieldPassword = validator.addField({
-    rules: rules.password,
+    rules: rules.email,
     value: '',
     id: 'for-remove',
   })
@@ -28,3 +28,13 @@ it('check normal add and remove fields', () => {
   newFieldSearchPassword = validator.getField('for-remove')
   expect(newFieldSearchPassword === null).toBe(true)
 })
+
+it('removeField does nothing when field is not registered', () => {
+  const validator = new Validator()
+  // create a field-like object that validator doesn't know about
+  // import Field from the module is possible, but we can emulate shape using any
+  // Should not throw and should not alter state
+  // @ts-expect-error.
+  expect(() => validator.removeField({})).not.toThrow()
+  expect(validator.getField('unknown')).toBe(null)
+})