@coxy/react-validator 1.3.4 → 2.0.2

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@coxy/react-validator",
-  "version": "1.3.4",
+  "version": "2.0.2",
   "description": "🚀 Simple validation form for React or NodeJS apps. useValidator are included ;)",
-  "main": "./build/index.js",
+  "main": "./dist/index.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/dsshard/react-validator.git"
@@ -19,40 +19,47 @@
   ],
   "author": "dsshard",
   "scripts": {
-    "start": "NODE_ENV=development && webpack-cli --watch --mode development",
-    "build": "NODE_ENV=production && webpack-cli --mode production",
-    "example": "webpack -w -d --config example/webpack.config.js",
+    "start": "ts-node . --watch",
+    "build": "NODE_ENV=production tsc --project tsconfig.build.json",
+    "example": "webpack-cli -w --config ./example/webpack.config.js",
     "coverage": "codecov",
     "coveralls": "coveralls .",
     "test": "jest"
   },
   "license": "MIT",
   "peerDependencies": {
-    "react": ">=16.9.x",
-    "prop-types": ">=15.5.x"
+    "react": ">=18.x.x"
   },
   "dependencies": {
-    "prop-types": ">=15.5.x",
-    "react": ">=16.9.x"
+    "react": ">=18.x.x"
   },
   "devDependencies": {
-    "@babel/core": "7.14.6",
-    "@babel/preset-env": "7.14.7",
-    "@babel/preset-react": "7.14.5",
-    "babel-eslint": "10.1.0",
-    "babel-loader": "8.2.2",
-    "babel-plugin-transform-react-remove-prop-types": "0.4.24",
-    "codecov": "3.8.2",
-    "coveralls": "3.1.1",
-    "eslint": "7.30.0",
-    "eslint-config-airbnb": "18.2.1",
-    "eslint-plugin-import": "2.23.4",
-    "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-react": "7.24.0",
-    "jest": "27.0.6",
-    "react-dom": "16.9.0",
-    "react-test-renderer": "17.0.2",
-    "webpack": "5.42.0",
-    "webpack-cli": "4.7.2"
+    "@babel/core": "^7.18.6",
+    "@babel/preset-env": "^7.18.6",
+    "@babel/preset-react": "^7.18.6",
+    "@testing-library/react": "^13.3.0",
+    "@types/jest": "^28.1.4",
+    "@types/react": "^18.0.15",
+    "@typescript-eslint/eslint-plugin": "^5.30.6",
+    "@typescript-eslint/parser": "^5.30.6",
+    "babel-loader": "^8.2.5",
+    "codecov": "^3.8.3",
+    "coveralls": "^3.1.1",
+    "eslint": "7.32.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react": "^7.30.1",
+    "jest": "^28.1.2",
+    "jest-environment-jsdom": "^28.1.2",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
+    "ts-jest": "^28.0.5",
+    "ts-node": "^10.8.2",
+    "typescript": "^4.7.4",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0"
   }
 }

package/src/context.test.ts

@@ -0,0 +1,7 @@
+import { Context } from './context'
+
+it('renders with or without a name', () => {
+  expect(typeof Context).toBe('object')
+  expect(typeof Context.Consumer).toBe('object')
+  expect(typeof Context.Provider).toBe('object')
+})

package/src/context.ts

@@ -0,0 +1,6 @@
+import { createContext } from 'react'
+
+export const Context = createContext<{
+  registerField:(field: string | number) => void,
+  unregisterField:(field: string | number) => void
+    }>(null)

package/src/index.test.ts

@@ -0,0 +1,7 @@
+import { ValidatorWrapper, ValidatorField, rules } from './index'
+
+it('renders with or without a name', () => {
+  expect(typeof ValidatorWrapper).toBe('function')
+  expect(typeof ValidatorField).toBe('function')
+  expect(typeof rules).toBe('object')
+})

package/src/index.ts

@@ -0,0 +1,5 @@
+export { rules } from './rules'
+export { ValidatorField } from './validator-field'
+export { ValidatorWrapper } from './validator-wrapper'
+export { Validator } from './validator'
+export { useValidator } from './use-validator'

package/src/jest.d.ts

@@ -0,0 +1 @@
+declare let shallow: any

package/src/rules.test.ts

@@ -0,0 +1,127 @@
+import { rules } from './rules'
+
+it('check rule email', () => {
+  expect(rules.email.length).toBe(2)
+
+  let result
+  // email.length > 0
+  result = rules.email[0].rule('test')
+  expect(result).toBe(true)
+
+  // email check regexp
+  result = rules.email[1].rule('test')
+  expect(result).toBe(false)
+
+  // email check regexp
+  result = rules.email[1].rule('test@gmail.com')
+  expect(result).toBe(true)
+})
+
+it('check rule password', () => {
+  expect(rules.password.length).toBe(2)
+
+  let result
+  // password.length > 0
+  result = rules.password[0].rule('test')
+  expect(result).toBe(true)
+
+  // password.length > 5
+  result = rules.password[1].rule('test')
+  expect(result).toBe(false)
+})
+
+it('check rule bool', () => {
+  expect(rules.bool.length).toBe(1)
+
+  const result = rules.bool[0].rule(true)
+  expect(result).toBe(true)
+})
+
+it('check rule notEmpty', () => {
+  expect(rules.notEmpty.length).toBe(1)
+
+  let result
+  result = rules.notEmpty[0].rule('')
+  expect(result).toBe(false)
+
+  result = rules.notEmpty[0].rule('test')
+  expect(result).toBe(true)
+})
+
+it('check rule min', () => {
+  expect(rules.min(1).length).toBe(1)
+  expect(typeof rules.min).toBe('function')
+
+  let result
+  result = rules.min(10)[0].rule('')
+  expect(result).toBe(false)
+
+  result = rules.min(9)[0].rule('testtesttest')
+  expect(result).toBe(false)
+
+  result = rules.min(9)[0].rule('11')
+  expect(result).toBe(true)
+
+  result = rules.min(9)[0].rule(10)
+  expect(result).toBe(true)
+
+  result = rules.min(9)[0].rule('8')
+  expect(result).toBe(false)
+
+  result = rules.min(9)[0].rule(7)
+  expect(result).toBe(false)
+
+  result = rules.min(-1)[0].rule('')
+  expect(result).toBe(false)
+})
+
+it('check rule max', () => {
+  let result
+  result = rules.max(10)[0].rule('')
+  expect(result).toBe(false)
+
+  result = rules.max(9)[0].rule('testtesttest')
+  expect(result).toBe(false)
+
+  result = rules.max(9)[0].rule('11')
+  expect(result).toBe(false)
+
+  result = rules.max(9)[0].rule(10)
+  expect(result).toBe(false)
+
+  result = rules.max(9)[0].rule('5')
+  expect(result).toBe(true)
+
+  result = rules.max(9)[0].rule(5)
+  expect(result).toBe(true)
+
+  result = rules.max(-1)[0].rule('')
+  expect(result).toBe(false)
+})
+
+it('check rule length', () => {
+  let result
+  result = rules.length(1)[0].rule('')
+  expect(result).toBe(false)
+
+  result = rules.length(1)[0].rule('1')
+  expect(result).toBe(true)
+
+  result = rules.length(1, 10)[0].rule('testtesttest')
+  expect(result).toBe(true)
+
+  result = rules.length(1, 10)[1].rule('testtesttest')
+  expect(result).toBe(false)
+
+  result = rules.length(1, 10)[0].rule('lol')
+  expect(result).toBe(true)
+
+  result = rules.length(1, 10)[1].rule('lol')
+  expect(result).toBe(true)
+
+  result = rules.length(1)[1].rule('test undefined 2 param')
+  expect(result).toBe(true)
+
+  result = rules.length(10)[0].rule('tes')
+  expect(result).toBe(false)
+})

package/src/{rules.js → rules.ts}

@@ -1,48 +1,59 @@
+import { Value } from './validator-field'
+
 // 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,}))$/;
+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,}))$/
+
+type Fn = (value: Value) => string
+
+export interface RuleInstance {
+  rule: (value: Value) => boolean
+  message: string | Fn
+}
 
-export default {
+export type ValidatorRules = RuleInstance[]
+
+export const rules = {
   notEmpty: [{
     rule: (value) => value !== '' && value.length > 0,
-    message: 'Value is required',
+    message: 'Value is required'
   }],
 
   bool: [{
     rule: (value) => !!value,
-    message: 'Value is required',
+    message: 'Value is required'
   }],
 
   password: [{
     rule: (value) => value.length > 0,
-    message: 'Password field cannot be empty',
+    message: 'Password field cannot be empty'
   }, {
     rule: (value) => value.length > 5,
-    message: 'Password field can not be less than 6 characters',
+    message: 'Password field can not be less than 6 characters'
   }],
 
   email: [{
     rule: (value) => !!value && value !== '' && value.length !== 0,
-    message: 'Email is required',
+    message: 'Email is required'
   }, {
     rule: (value) => emailReg.test(String(value).toLowerCase()),
-    message: 'Email is invalid',
+    message: 'Email is invalid'
   }],
 
   min: (min) => [{
     rule: (value) => parseFloat(value) > min,
-    message: `The value must be greater than ${min}`,
+    message: `The value must be greater than ${min}`
   }],
 
   max: (max) => [{
     rule: (value) => parseFloat(value) < max,
-    message: `The value must be smaller ${max}`,
+    message: `The value must be smaller ${max}`
   }],
 
-  length: (min, max) => [{
+  length: (min, max?) => [{
     rule: (value) => String(value).length >= min,
-    message: `No less than ${min} symbols`,
+    message: `No less than ${min} symbols`
   }, {
     rule: (value) => (max !== undefined ? String(value).length <= max : true),
-    message: `No more than ${max} symbols`,
-  }],
-};
+    message: `No more than ${max} symbols`
+  }]
+}

package/src/use-validator.test.tsx

@@ -0,0 +1,58 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { unmountComponentAtNode } from 'react-dom'
+import { render, screen } from '@testing-library/react'
+import { act } from 'react-dom/test-utils'
+import { useEffect, useState } from 'react'
+
+import { rules } from './rules'
+import { useValidator } from './use-validator'
+
+let container
+beforeEach(() => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+})
+
+afterEach(() => {
+  unmountComponentAtNode(container)
+  container.remove()
+  container = null
+})
+
+jest.useFakeTimers()
+
+it('check state change and hide field', () => {
+  function Comp () {
+    const [value, setValue] = useState(false)
+    const [isValid, validateObject] = useValidator(value, rules.bool)
+
+    useEffect(() => {
+      setTimeout(() => {
+        act(() => {
+          setValue(true)
+        })
+      }, 100)
+    }, [])
+
+    return (
+      <>
+        <span data-testid="test1">{isValid ? 'true' : 'false'}</span>
+        <span data-testid="test2">{validateObject.message || 'true'}</span>
+      </>
+    )
+  }
+  act(() => {
+    render(<Comp />)
+  })
+
+  expect(screen.getByTestId('test1').textContent).toContain('false')
+  expect(screen.getByTestId('test2').textContent).toContain('Value is required')
+
+  jest.runAllTimers()
+
+  expect(screen.getByTestId('test1').textContent).toContain('true')
+  expect(screen.getByTestId('test2').textContent).toContain('true')
+})

package/src/use-validator.ts

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

package/src/validator-field.test.tsx

@@ -0,0 +1,161 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { createRef, useEffect, useState } from 'react'
+import { render, act } from '@testing-library/react'
+
+import { ValidatorWrapper } from './validator-wrapper'
+import { ValidatorField } from './validator-field'
+import { rules } from './rules'
+
+it('render without wrapper', () => {
+  expect(() => shallow(<ValidatorField />)).toThrowError()
+})
+
+it('normal render', () => {
+  render((
+    <ValidatorWrapper>
+      <ValidatorField rules={[]} value="" />
+    </ValidatorWrapper>
+  ))
+})
+
+it('check context validator', () => {
+  const validator = createRef<ValidatorWrapper>()
+  render((
+    <ValidatorWrapper ref={validator}>
+      <ValidatorField rules={[]} />
+    </ValidatorWrapper>
+  ))
+
+  const validateResult = validator.current.validate()
+
+  expect(validateResult.isValid).toBe(true)
+  expect(validateResult.message).toBe('')
+})
+
+it('check failed validation', () => {
+  const validator1 = createRef<ValidatorWrapper>()
+  const validator2 = createRef<ValidatorWrapper>()
+
+  render((
+    <>
+      <ValidatorWrapper ref={validator1}>
+        <ValidatorField rules={rules.email} value="test" />
+      </ValidatorWrapper>
+      <ValidatorWrapper ref={validator2}>
+        <ValidatorField rules={rules.email} value="" />
+      </ValidatorWrapper>
+    </>
+  ))
+
+  act(() => {
+    const validateResult1 = validator1.current.validate()
+
+    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)
+  })
+})
+
+jest.useFakeTimers()
+
+it('check state change and hide field', () => {
+  const validator1 = createRef<ValidatorWrapper>()
+
+  function Comp () {
+    const [st, setSt] = useState(true)
+
+    useEffect(() => {
+      setTimeout(() => {
+        act(() => {
+          setSt(false)
+        })
+      }, 100)
+    }, [])
+
+    return (
+      <ValidatorWrapper ref={validator1}>
+        <ValidatorField rules={rules.email} value="test" />
+        {st && (
+          <ValidatorField rules={rules.email} value="" />
+        )}
+      </ValidatorWrapper>
+    )
+  }
+
+  render(<Comp />)
+
+  jest.runAllTimers()
+
+  const validateResult1 = validator1.current.validate()
+
+  expect(validateResult1.isValid).toBe(false)
+  expect(validateResult1.message).toBe('Email is invalid')
+  expect(validateResult1.errors.length).toBe(1)
+})
+
+it('check success validation', () => {
+  const validator = createRef<ValidatorWrapper>()
+  render((
+    <ValidatorWrapper ref={validator}>
+      <ValidatorField rules={rules.email} value="email@email.com" />
+    </ValidatorWrapper>
+  ))
+
+  const validateResult = validator.current.validate()
+
+  expect(validateResult.isValid).toBe(true)
+  expect(validateResult.message).toBe('')
+})
+
+it('check success validation fot child function', () => {
+  const validator = createRef<ValidatorWrapper>()
+  render((
+    <ValidatorWrapper ref={validator}>
+      <ValidatorField rules={rules.email} value="email@email.com">
+        {({ isValid, message }) => (
+          <>
+            {!isValid && <div>{message}</div>}
+          </>
+        )}
+      </ValidatorField>
+    </ValidatorWrapper>
+  ))
+
+  const validateResult = validator.current.validate()
+
+  expect(validateResult.isValid).toBe(true)
+  expect(validateResult.message).toBe('')
+})
+
+it('check custom rule message function', () => {
+  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()
+
+  expect(validateResult.isValid).toBe(false)
+  expect(validateResult.message).toBe('test message test')
+})

package/src/validator-field.tsx

@@ -0,0 +1,71 @@
+import { Component, ReactNode } from 'react'
+
+import { Context } from './context'
+import { Field } from './validator'
+import { ValidatorRules } from './rules'
+
+export type Value = any
+
+export interface ErrorMessage {
+  message: string
+  isValid: boolean
+}
+
+export interface Validity {
+  message: string
+  isValid: boolean
+  errors?: ErrorMessage[]
+  id?: string | number
+}
+
+type Fn = (validity: Validity, value: Value) => ReactNode
+
+interface Props {
+  rules?: ValidatorRules,
+  required?: boolean,
+  value?: Value
+  id?: string | number
+  children?: ReactNode | Fn
+  unregisterField: (val: any) => void
+  registerField: (val: any) => void
+}
+
+class ValidationFieldWrapper extends Component<Props> {
+  componentWillUnmount () {
+    this.props.unregisterField(this)
+  }
+
+  componentDidMount () {
+    this.props.registerField(this)
+  }
+
+  validate (): Validity {
+    const field = new Field({
+      rules: this.props.rules,
+      required: this.props.required,
+      value: this.props.value,
+      id: this.props.id
+    })
+    return field.validate()
+  }
+
+  render () {
+    const { children, value } = this.props
+    const validity = this.validate()
+    return (typeof children === 'function' ? children(validity, value) : children)
+  }
+}
+
+export function ValidatorField (props: Omit<Props, 'registerField' | 'unregisterField'>) {
+  return (
+    <Context.Consumer>
+      {(data) => (
+        <ValidationFieldWrapper
+          {...props}
+          registerField={data.registerField}
+          unregisterField={data.unregisterField}
+        />
+      )}
+    </Context.Consumer>
+  )
+}