@coxy/react-validator 3.0.0 → 5.0.0

package/biome.json

@@ -1,11 +1,13 @@
 {
+  "files": {
+    "includes": ["src/**/*", "example/example.tsx"]
+  },
   "formatter": {
     "enabled": true,
     "indentStyle": "space",
     "indentWidth": 2,
     "lineWidth": 120,
-    "formatWithErrors": false,
-    "ignore": ["**/*.min.js"]
+    "formatWithErrors": false
   },
   "javascript": {
     "formatter": {

package/dist/index.js

@@ -1,2 +1,206 @@
-'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime');var h=/^(([^<>()\[\]\\.,;:\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,}))$/,g={notEmpty:[{rule:t=>t!==""&&t.length>0,message:"Value is required"}],bool:[{rule:t=>!!t,message:"Value is required"}],password:[{rule:t=>t.length>0,message:"Password field cannot be empty"},{rule:t=>t.length>5,message:"Password field can not be less than 6 characters"}],email:[{rule:t=>!!t&&t!==""&&t.length!==0,message:"Email is required"},{rule:t=>h.test(String(t).toLowerCase()),message:"Email is invalid"}],min:t=>[{rule:e=>Number.parseFloat(e)>t,message:`The value must be greater than ${t}`}],max:t=>[{rule:e=>Number.parseFloat(e)<t,message:`The value must be smaller ${t}`}],length:(t,e)=>[{rule:r=>String(r).length>=t,message:`No less than ${t} symbols`},{rule:r=>e!==void 0?String(r).length<=e:true,message:`No more than ${e} symbols`}]};var d=react.createContext(null);var l=class{rules;required;value;id;constructor({rules:e,required:r,value:s,id:i}){this.rules=e,this.required=r,this.value=s,this.id=i;}validate(){let e=true,r="",{rules:s,value:i,required:n,id:m}=this,c=!i&&Number.parseFloat(i)!==0;if(!s.length||c&&n===false)return {isValid:e,message:r,id:m};for(let a of s)e&&(e=a.rule(i),e||(typeof a.message=="function"?r=a.message(i):r=a.message));return {isValid:e,message:r,id:m}}},o=class{fields;params;constructor(e){this.params=e||null,this.fields=[];}addField(e){let r=new l(e);return this.fields.push(r),r}removeField(e){let r=this.fields.indexOf(e);r>-1&&this.fields.splice(r,1);}getField(e){return this.fields.find(r=>r.id===e)||null}validate(){let e,s=this.fields.map(i=>this.params?.stopAtFirstError&&e&&e.isValid===false?null:(e=i.validate(),e)).filter(i=>i&&i.isValid===false);if(s.length){let{isValid:i,message:n}=s[0];return {isValid:i,message:n,errors:s}}return {isValid:true,message:""}}};var u=class extends react.Component{componentWillUnmount(){this.props.unregisterField(this);}componentDidMount(){this.props.registerField(this);}validate(){let e=this.props,r=e.customErrors.find(i=>i.id===e.id);return r||new l({rules:e.rules,required:e.required,value:e.value,id:e.id}).validate()}render(){let{children:e,value:r}=this.props,s=this.validate();return typeof e=="function"?e(s,r):e}};function F(t){return jsxRuntime.jsx(d.Consumer,{children:e=>jsxRuntime.jsx(u,{...t,customErrors:e.customErrors,registerField:e.registerField,unregisterField:e.unregisterField})})}var p=class extends react.Component{fields=[];state={customErrors:[]};constructor(e){super(e),this.registerField=this.registerField.bind(this),this.unregisterField=this.unregisterField.bind(this);}componentWillUnmount(){this.fields=[];}registerField(e){e&&!this.fields.includes(e)&&this.fields.push(e);}unregisterField(e){let r=this.fields.indexOf(e);r>-1&&this.fields.splice(r,1);}getField(e){return this.fields.find(r=>r.props.id===e)||null}setCustomError(e){this.setState({customErrors:[...this.state.customErrors,e]});}clearCustomErrors(){this.setState({customErrors:[]});}validate(){let e=new o({stopAtFirstError:this.props.stopAtFirstError});for(let r of this.fields)e.addField(r.props);return e.validate()}render(){return jsxRuntime.jsx(d.Provider,{value:{customErrors:this.state.customErrors,registerField:this.registerField,unregisterField:this.unregisterField},children:this.props.children})}};function x(t,e){let r=new o;r.addField({value:t,rules:e});let{isValid:s,...i}=r.validate();return [s,i]}exports.Validator=o;exports.ValidatorField=F;exports.ValidatorWrapper=p;exports.rules=g;exports.useValidator=x;//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Validator: () => Validator,
+  ValidatorField: () => ValidatorField,
+  ValidatorWrapper: () => ValidatorWrapper,
+  rules: () => rules,
+  useValidator: () => useValidator
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/rules.ts
+var import_zod = require("zod");
+var rules = {
+  notEmpty: [import_zod.z.string().min(1, { error: "Field is required" })],
+  isTrue: [import_zod.z.boolean({ error: "Value is required" }).and(import_zod.z.literal(true))],
+  email: [import_zod.z.string().min(1, { error: "Email is required" }), import_zod.z.email({ message: "Email is invalid" })]
+};
+
+// src/validator.ts
+var Field = class {
+  rules;
+  required;
+  value;
+  id;
+  constructor({ rules: rules2, required, value, id }) {
+    this.rules = rules2;
+    this.required = required;
+    this.value = value;
+    this.id = id;
+  }
+  validate() {
+    let isValid = true;
+    let message = "";
+    const { value, required, id } = this;
+    let result = { success: true, data: value };
+    const isEmptyValue = !value && Number.parseFloat(value) !== 0;
+    const rules2 = Array.isArray(this.rules) ? this.rules : [this.rules];
+    if (!rules2.length || isEmptyValue && required === false) {
+      return {
+        isValid,
+        message,
+        id,
+        result: { success: true, data: value }
+      };
+    }
+    for (const ruleItem of rules2) {
+      if (isValid && ruleItem && "safeParse" in ruleItem) {
+        result = ruleItem.safeParse(value);
+        isValid = result.success;
+        if (!isValid && result.error) {
+          message = result.error.issues[0]?.message || "Validation error";
+        }
+      }
+    }
+    return { isValid, message, id, result };
+  }
+};
+var Validator = class {
+  fields;
+  params;
+  constructor(params) {
+    this.params = params || null;
+    this.fields = [];
+  }
+  addField(params) {
+    const field = new Field(params);
+    this.fields.push(field);
+    return field;
+  }
+  removeField(field) {
+    const index = this.fields.indexOf(field);
+    if (index > -1) this.fields.splice(index, 1);
+  }
+  getField(id) {
+    return this.fields.find((field) => field.id === id) || null;
+  }
+  validate() {
+    let prevResult;
+    const statuses = this.fields.map((field) => {
+      if (this.params?.stopAtFirstError && prevResult && prevResult.isValid === false) {
+        return null;
+      }
+      prevResult = field.validate();
+      return prevResult;
+    });
+    const results = statuses.filter((inst) => inst && inst.isValid === false);
+    if (results.length) {
+      return results[0];
+    }
+    return { isValid: true, message: "", result: results[0]?.result };
+  }
+};
+
+// src/use-validator.ts
+function useValidator(value, rules2) {
+  const validator = new Validator();
+  validator.addField({ value, rules: rules2 });
+  const { isValid, ...validateObject } = validator.validate();
+  return [isValid, validateObject];
+}
+
+// src/validator-field.tsx
+var import_react2 = require("react");
+
+// src/context.ts
+var import_react = require("react");
+var Context = (0, import_react.createContext)(null);
+
+// src/validator-field.tsx
+var ValidatorField = (0, import_react2.forwardRef)(function ValidatorField2(props, _ref) {
+  const { children, value } = props;
+  const { registerField, unregisterField } = (0, import_react2.useContext)(Context);
+  const propsRef = (0, import_react2.useRef)(props);
+  propsRef.current = props;
+  const handleRef = (0, import_react2.useRef)(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();
+      }
+    };
+  }
+  (0, import_react2.useEffect)(() => {
+    registerField(handleRef.current);
+    return () => {
+      unregisterField(handleRef.current);
+    };
+  }, [registerField, unregisterField]);
+  const validity = handleRef.current.validate();
+  return typeof children === "function" ? children(validity, value) : children;
+});
+
+// src/validator-wrapper.tsx
+var import_react3 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ValidatorWrapper = (0, import_react3.forwardRef)(function ValidatorWrapper2({ children, stopAtFirstError }, ref) {
+  const fieldsRef = (0, import_react3.useRef)([]);
+  const registerField = (0, import_react3.useCallback)((field) => {
+    if (field && !fieldsRef.current.includes(field)) {
+      fieldsRef.current.push(field);
+    }
+  }, []);
+  const unregisterField = (0, import_react3.useCallback)((field) => {
+    const index = fieldsRef.current.indexOf(field);
+    if (index > -1) fieldsRef.current.splice(index, 1);
+  }, []);
+  const getField = (0, import_react3.useCallback)((id) => {
+    return fieldsRef.current.find((field) => field?.props?.id === id) || null;
+  }, []);
+  const validate = (0, import_react3.useCallback)(() => {
+    const validator = new Validator({ stopAtFirstError });
+    for (const comp of fieldsRef.current) {
+      validator.addField(comp.props);
+    }
+    return validator.validate();
+  }, [stopAtFirstError]);
+  (0, import_react3.useImperativeHandle)(
+    ref,
+    () => ({
+      validate,
+      getField,
+      registerField,
+      unregisterField
+    }),
+    [validate, getField, registerField, unregisterField]
+  );
+  const contextValue = (0, import_react3.useMemo)(() => ({ registerField, unregisterField }), [registerField, unregisterField]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Context.Provider, { value: contextValue, children });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Validator,
+  ValidatorField,
+  ValidatorWrapper,
+  rules,
+  useValidator
+});

package/example/example.tsx

@@ -1,8 +1,7 @@
-/* eslint no-console: [0] */
-import { createRef, useState } from 'react'
-import { createRoot } from 'react-dom/client'
-
-import { Validator, ValidatorField, ValidatorWrapper, rules } from '../dist/index'
+// biome-ignore lint/correctness/noUnusedImports: <need>
+import React, { createRef, useState } from 'react'
+import ReactDOM from 'react-dom/client'
+import { rules, ValidatorField, ValidatorWrapper } from '../dist/index'
 
 function App() {
   const [email, setEmail] = useState('')
@@ -17,55 +16,24 @@ function App() {
     console.log('success')
   }
 
-  function handleValidateCustomFields() {
-    const validator = new Validator({ stopAtFirstError: true })
-    const fieldPassword = validator.addField({
-      rules: rules.password,
-      value: '',
-      id: 'for-remove',
-    })
-
-    const fieldSearchPassword = validator.getField('for-remove')
-    console.log(fieldPassword === fieldSearchPassword)
-
-    validator.removeField(fieldPassword)
-
-    validator.addField({
-      rules: rules.password,
-      value: 'testpassword',
-    })
-
-    const { isValid, message, errors } = validator.validate()
-    if (!isValid) {
-      console.log(isValid, message, errors)
-      return
-    }
-    console.log('success')
-  }
-
   return (
-    <>
-      <ValidatorWrapper ref={jsxValidator}>
-        <ValidatorField rules={rules.email} value={email}>
-          {({ isValid, message }) => (
-            <>
-              <input onChange={({ target: { value } }) => setEmail(value)} />
-              <div>{isValid ? 'valid' : 'invalid'}</div>
-              <div>{message || ''}</div>
-              <button onClick={handleValidateEmail} type="button">
-                Validate email
-              </button>
-            </>
-          )}
-        </ValidatorField>
-        <button onClick={handleValidateCustomFields} type="button">
-          Validate custom fields
-        </button>
-      </ValidatorWrapper>
-    </>
+    <ValidatorWrapper ref={jsxValidator}>
+      <ValidatorField rules={rules.email} value={email}>
+        {({ isValid, message }) => (
+          <>
+            <input onChange={({ target: { value } }) => setEmail(value)} />
+            <div>{isValid ? 'valid' : 'invalid'}</div>
+            <div>{message || ''}</div>
+            <button onClick={handleValidateEmail} type="button">
+              Validate email
+            </button>
+          </>
+        )}
+      </ValidatorField>
+    </ValidatorWrapper>
   )
 }
 
-const root = createRoot(document.getElementById('root'))
+const root = ReactDOM.createRoot(document.getElementById('root'))
 
 root.render(<App />)

package/example/index.html

@@ -3,14 +3,9 @@
 <head>
   <meta charset="UTF-8">
   <title>Test template</title>
-  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
-  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
 </head>
 <body>
-
-<div id="root"></div>
-
-<script src="./dist/example.js"></script>
-
+  <div id="root"></div>
+  <script type="module" src="./dist/example.js"></script>
 </body>
 </html>

package/example/tsconfig.json

@@ -1,10 +1,10 @@
 {
-  "extends": "../tsconfig.json",
   "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "jsx": "react",
     "outDir": "./dist",
-    "rootDir": ".",
-    "baseUrl": "./"
+    "allowSyntheticDefaultImports": true
   },
-  "include": ["example.tsx"],
-  "exclude": ["node_modules", "dist"]
-}
+  "include": ["example.tsx"]
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coxy/react-validator",
-  "version": "3.0.0",
-  "description": "🚀 Simple validation form for React or NodeJS apps. useValidator are included ;)",
+  "version": "5.0.0",
+  "description": "🚀 Simple validation form for React or NodeJS apps with zod. useValidator are included ;)",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -22,35 +22,35 @@
   "author": "dsshard",
   "scripts": {
     "start": "tsup ./src/index.ts --watch",
-    "build": "tsup",
-    "example": "tsc --project ./example/tsconfig.json",
-    "coverage": "codecov",
-    "coveralls": "coveralls .",
+    "build": "tsup ./src/index.ts",
+    "lint": "npx biome lint --fix",
+    "example": "NODE_ENV=production npx esbuild example/example.tsx --bundle --outfile=example/dist/example.js --minify --format=esm --target=es2020",
+    "coverage": "npx codecov",
+    "coveralls": "npx coveralls .",
     "test": "jest"
   },
   "license": "MIT",
   "peerDependencies": {
-    "react": ">=19.x.x"
+    "react": ">=18.x.x"
   },
   "dependencies": {
-    "react": ">=19.x.x"
+    "zod": "^3.25.0 || ^4.0.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.1.2",
     "@testing-library/dom": "10.4.1",
     "@testing-library/react": "16.3.0",
     "@types/jest": "30.0.0",
     "@types/node": "24.1.0",
-    "@types/react": "19.1.8",
-    "codecov": "3.8.3",
-    "coveralls": "3.1.1",
+    "@types/react": "19.1.11",
+    "@types/react-dom": "19.1.7",
     "jest": "30.0.5",
     "jest-environment-jsdom": "30.0.5",
-    "react-dom": "19.1.1",
-    "tsup": "8.5.0",
+    "react": ">=18.x.x",
+    "react-dom": ">=18.x.x",
     "react-test-renderer": "19.1.1",
     "ts-jest": "29.4.0",
     "ts-node": "10.9.2",
+    "tsup": "8.5.0",
     "typescript": "5.8.3"
   }
 }

package/src/context.ts

@@ -1,9 +1,13 @@
 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
-  customErrors: Array<Validity>
+  registerField: (field: RegisteredFieldHandle) => void
+  unregisterField: (field: RegisteredFieldHandle) => void
 }>(null)

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, 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

@@ -1,127 +1,37 @@
+import type { ZodSafeParseResult } from 'zod'
 import { rules } from './rules'
 
 it('check rule email', () => {
   expect(rules.email.length).toBe(2)
 
-  let result: boolean
+  let result: ZodSafeParseResult<string>
   // email.length > 0
-  result = rules.email[0].rule('test')
-  expect(result).toBe(true)
+  result = rules.email[0].safeParse('test')
+  expect(result.success).toBe(true)
 
   // email check regexp
-  result = rules.email[1].rule('test')
-  expect(result).toBe(false)
+  result = rules.email[1].safeParse('test')
+  expect(result.success).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: boolean
-  // 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)
+  result = rules.email[1].safeParse('test@gmail.com')
+  expect(result.success).toBe(true)
 })
 
 it('check rule bool', () => {
-  expect(rules.bool.length).toBe(1)
+  expect(rules.isTrue.length).toBe(1)
 
-  const result = rules.bool[0].rule(true)
-  expect(result).toBe(true)
+  const result = rules.isTrue[0].safeParse(true)
+  expect(result.success).toBe(true)
 })
 
 it('check rule notEmpty', () => {
   expect(rules.notEmpty.length).toBe(1)
 
-  let result: boolean
-  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: boolean
-  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: boolean
-  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: boolean
-  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)
+  let result: ZodSafeParseResult<string>
+  result = rules.notEmpty[0].safeParse('')
+  expect(result.success).toBe(false)
 
-  result = rules.length(10)[0].rule('tes')
-  expect(result).toBe(false)
+  result = rules.notEmpty[0].safeParse('test')
+  expect(result.success).toBe(true)
 })