@coxy/react-validator 1.3.4 → 2.0.2

package/.eslintignore

@@ -1,3 +1,3 @@
-build
+dist
 node_modules
 example/dist

package/.eslintrc.js

@@ -1,11 +1,28 @@
 module.exports = {
-  parser: 'babel-eslint',
-  env: {
-    browser: true,
-  },
+  root: true,
+  parser: '@typescript-eslint/parser',
+  plugins: [
+    'react',
+    'import',
+    '@typescript-eslint'
+  ],
   rules: {
-    'react/destructuring-assignment': [0],
-    'import/no-extraneous-dependencies': [0],
+    'no-void': [0],
+    'react/jsx-tag-spacing': ['error', {
+      closingSlash: 'never',
+      beforeSelfClosing: 'always',
+      afterOpening: 'never',
+      beforeClosing: 'never'
+    }],
+    'import/order': ['error', {
+      groups: ['type', 'external', 'internal', 'builtin', 'object', 'index', 'parent', 'sibling'],
+      'newlines-between': 'always'
+    }]
   },
-  extends: 'airbnb',
-};
+  extends: [
+    'standard',
+    'eslint:recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended'
+  ]
+}

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+2.0.1 / 2022-06-12
+==================
+* Typescript version
+* Update dependencies
+
+
 1.3.0 / 2020-11-10
 ==================
   * Update dependencies

package/README.md

@@ -24,7 +24,7 @@ See more examples [here](example/example.jsx)
 
 ```jsx
 import React, { useState } from 'react';
-import ValidatorWrapper, { rules, ValidatorField } from '@coxy/react-validator';
+import { ValidatorWrapper, rules, ValidatorField } from '@coxy/react-validator';
 
 const validator = React.createRef();
 
@@ -105,21 +105,20 @@ This component has a default set of rules that you can use right away:
 
 #### ValidatorWrapper props
 
- **name**         | **default** | **required** | **description**                                        
-------------------|-------------|--------------|--------------------------------------------------------
- ref              | null        | no           | React\.ref or useRef                                   
- stopAtFirstError | false       | no           | The validator will stop checking after the first error       
-
+| **name**         | **default** | **required** | **description**                                        |
+|------------------|-------------|--------------|--------------------------------------------------------|
+| ref              | null        | no           | React\.ref or useRef                                   |
+| stopAtFirstError | false       | no           | The validator will stop checking after the first error |
 
  
 #### ValidatorField props
 
- ****name**** | ****default**** | ****required**** | **description**               
---------------|-----------------|------------------|-------------------------------
- value        | undefined       | yes              | Value for validation          
- rules        | \[\]            | yes              | Array of rules for validation 
- required     | true            | no               | The field will be required  
- id           | null            | no               | ID for get field  
+| ****name**** | ****default**** | ****required**** | **description**               |
+|--------------|-----------------|------------------|-------------------------------|
+| value        | undefined       | yes              | Value for validation          |
+| rules        | \[\]            | yes              | Array of rules for validation |
+| required     | true            | no               | The field will be required    |
+| id           | null            | no               | ID for get field              |
 
  
 # React api useValidator
@@ -136,9 +135,10 @@ console.log(isValid, errors) // false
 
 #### Validator constructor parameters
 
- **name**         | **default** | **required** | **description**                                        
-------------------|-------------|--------------|--------------------------------------------------------                                   
- stopAtFirstError | false       | no           | The validator will stop checking after the first error       
+| **name**         | **default** | **required** | **description**                                        |
+|------------------|-------------|--------------|--------------------------------------------------------|
+| stopAtFirstError | false       | no           | The validator will stop checking after the first error |
+
  
 #### Validator.addField()
 

package/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-react']
+}

package/dist/context.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Context: import("react").Context<{
+    registerField: (field: string | number) => void;
+    unregisterField: (field: string | number) => void;
+}>;

package/dist/context.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Context = void 0;
+const react_1 = require("react");
+exports.Context = (0, react_1.createContext)(null);

package/dist/index.d.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/dist/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useValidator = exports.Validator = exports.ValidatorWrapper = exports.ValidatorField = exports.rules = void 0;
+var rules_1 = require("./rules");
+Object.defineProperty(exports, "rules", { enumerable: true, get: function () { return rules_1.rules; } });
+var validator_field_1 = require("./validator-field");
+Object.defineProperty(exports, "ValidatorField", { enumerable: true, get: function () { return validator_field_1.ValidatorField; } });
+var validator_wrapper_1 = require("./validator-wrapper");
+Object.defineProperty(exports, "ValidatorWrapper", { enumerable: true, get: function () { return validator_wrapper_1.ValidatorWrapper; } });
+var validator_1 = require("./validator");
+Object.defineProperty(exports, "Validator", { enumerable: true, get: function () { return validator_1.Validator; } });
+var use_validator_1 = require("./use-validator");
+Object.defineProperty(exports, "useValidator", { enumerable: true, get: function () { return use_validator_1.useValidator; } });

package/dist/rules.d.ts

@@ -0,0 +1,38 @@
+import { Value } from './validator-field';
+declare type Fn = (value: Value) => string;
+export interface RuleInstance {
+    rule: (value: Value) => boolean;
+    message: string | Fn;
+}
+export declare type ValidatorRules = RuleInstance[];
+export declare const rules: {
+    notEmpty: {
+        rule: (value: any) => boolean;
+        message: string;
+    }[];
+    bool: {
+        rule: (value: any) => boolean;
+        message: string;
+    }[];
+    password: {
+        rule: (value: any) => boolean;
+        message: string;
+    }[];
+    email: {
+        rule: (value: any) => boolean;
+        message: string;
+    }[];
+    min: (min: any) => {
+        rule: (value: any) => boolean;
+        message: string;
+    }[];
+    max: (max: any) => {
+        rule: (value: any) => boolean;
+        message: string;
+    }[];
+    length: (min: any, max?: any) => {
+        rule: (value: any) => boolean;
+        message: string;
+    }[];
+};
+export {};

package/dist/rules.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rules = void 0;
+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,}))$/;
+exports.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) => parseFloat(value) > min,
+            message: `The value must be greater than ${min}`
+        }],
+    max: (max) => [{
+            rule: (value) => 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`
+        }]
+};

package/dist/use-validator.d.ts

@@ -0,0 +1,3 @@
+import { ValidatorRules } from './rules';
+import { Validity, Value } from './validator-field';
+export declare function useValidator(value: Value, rules: ValidatorRules): [boolean, Pick<Validity, 'message' | 'errors'>];

package/dist/use-validator.js

@@ -0,0 +1,22 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useValidator = void 0;
+const validator_1 = require("./validator");
+function useValidator(value, rules) {
+    const validator = new validator_1.Validator();
+    validator.addField({ value, rules });
+    const _a = validator.validate(), { isValid } = _a, validateObject = __rest(_a, ["isValid"]);
+    return [isValid, validateObject];
+}
+exports.useValidator = useValidator;

package/dist/validator-field.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { ValidatorRules } from './rules';
+export declare type Value = any;
+export interface ErrorMessage {
+    message: string;
+    isValid: boolean;
+}
+export interface Validity {
+    message: string;
+    isValid: boolean;
+    errors?: ErrorMessage[];
+    id?: string | number;
+}
+declare 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;
+}
+export declare function ValidatorField(props: Omit<Props, 'registerField' | 'unregisterField'>): JSX.Element;
+export {};

package/dist/validator-field.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ValidatorField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const context_1 = require("./context");
+const validator_1 = require("./validator");
+class ValidationFieldWrapper extends react_1.Component {
+    componentWillUnmount() {
+        this.props.unregisterField(this);
+    }
+    componentDidMount() {
+        this.props.registerField(this);
+    }
+    validate() {
+        const field = new validator_1.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);
+    }
+}
+function ValidatorField(props) {
+    return ((0, jsx_runtime_1.jsx)(context_1.Context.Consumer, { children: (data) => ((0, jsx_runtime_1.jsx)(ValidationFieldWrapper, Object.assign({}, props, { registerField: data.registerField, unregisterField: data.unregisterField }))) }));
+}
+exports.ValidatorField = ValidatorField;

package/dist/validator-wrapper.d.ts

@@ -0,0 +1,17 @@
+import { Component, ReactNode, RefObject } from 'react';
+interface ComponentProps {
+    children?: ReactNode;
+    stopAtFirstError?: boolean;
+    ref?: RefObject<any>;
+}
+export declare class ValidatorWrapper extends Component<ComponentProps> {
+    fields: any[];
+    constructor(props: any, ctx: any);
+    componentWillUnmount(): void;
+    registerField(field: any): void;
+    unregisterField(field: any): void;
+    getField(id: any): any;
+    validate(): import("./validator-field").Validity;
+    render(): JSX.Element;
+}
+export {};

package/dist/validator-wrapper.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ValidatorWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const context_1 = require("./context");
+const validator_1 = require("./validator");
+class ValidatorWrapper extends react_1.Component {
+    constructor(props, ctx) {
+        super(props, ctx);
+        this.fields = [];
+        this.registerField = this.registerField.bind(this);
+        this.unregisterField = this.unregisterField.bind(this);
+    }
+    componentWillUnmount() {
+        this.fields = [];
+    }
+    registerField(field) {
+        if (field && !this.fields.includes(field)) {
+            this.fields.push(field);
+        }
+    }
+    unregisterField(field) {
+        const index = this.fields.indexOf(field);
+        if (index > -1)
+            this.fields.splice(index, 1);
+    }
+    getField(id) {
+        return this.fields.find((field) => field.props.id === id) || null;
+    }
+    validate() {
+        const validator = new validator_1.Validator({ stopAtFirstError: this.props.stopAtFirstError });
+        this.fields.forEach((comp) => {
+            validator.addField(comp.props);
+        });
+        return validator.validate();
+    }
+    render() {
+        return ((0, jsx_runtime_1.jsx)(context_1.Context.Provider, Object.assign({ value: { registerField: this.registerField, unregisterField: this.unregisterField } }, { children: this.props.children })));
+    }
+}
+exports.ValidatorWrapper = ValidatorWrapper;

package/dist/validator.d.ts

@@ -0,0 +1,28 @@
+import { Validity, Value } from './validator-field';
+import { ValidatorRules } from './rules';
+export interface FieldParams {
+    value: Value;
+    rules: ValidatorRules;
+    required?: boolean;
+    id?: string | number;
+}
+export declare class Field {
+    private rules;
+    private required;
+    private value;
+    id: string | number;
+    constructor({ rules, required, value, id }: FieldParams);
+    validate(): Validity;
+}
+export interface ValidatorParams {
+    stopAtFirstError: boolean;
+}
+export declare class Validator {
+    private fields;
+    private params;
+    constructor(params?: ValidatorParams);
+    addField(params: FieldParams): Field;
+    removeField(field: Field): void;
+    getField(id: Field['id']): Field;
+    validate(): Validity;
+}

package/dist/validator.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Validator = exports.Field = void 0;
+class Field {
+    constructor({ rules, required, value, id }) {
+        this.rules = rules;
+        this.required = required;
+        this.value = value;
+        this.id = id;
+    }
+    validate() {
+        let isValid = true;
+        let message = '';
+        const { rules, value, required, id } = this;
+        const isEmptyValue = !value && parseFloat(value) !== 0;
+        if (!rules.length || (isEmptyValue && required === false)) {
+            return { isValid, message, id };
+        }
+        rules.forEach((instance) => {
+            if (isValid) {
+                isValid = instance.rule(value);
+                if (!isValid) {
+                    if (typeof instance.message === 'function') {
+                        message = instance.message(value);
+                    }
+                    else {
+                        message = instance.message;
+                    }
+                }
+            }
+        });
+        return { isValid, message, id };
+    }
+}
+exports.Field = Field;
+class Validator {
+    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) => {
+            var _a;
+            if (((_a = this.params) === null || _a === void 0 ? void 0 : _a.stopAtFirstError) && prevResult && prevResult.isValid === false) {
+                return null;
+            }
+            prevResult = field.validate();
+            return prevResult;
+        });
+        const errors = statuses.filter((inst) => inst && inst.isValid === false);
+        if (errors.length) {
+            const { isValid, message } = errors[0];
+            return { isValid, message, errors };
+        }
+        return { isValid: true, message: '' };
+    }
+}
+exports.Validator = Validator;

package/example/example.jsx

@@ -1,45 +1,46 @@
 /* eslint no-console: [0] */
-import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
-import ValidatorWrapper, { rules, ValidatorField, Validator } from '../src';
+import { useState, createRef } from 'react'
+import { createRoot } from 'react-dom/client'
 
-function App() {
-  const [email, setEmail] = useState('');
-  const jsxValidator = React.createRef();
+import { ValidatorWrapper, rules, ValidatorField, Validator } from '../dist/index'
 
-  function handleValidateEmail() {
-    const { isValid, message, errors } = jsxValidator.current.validate();
+function App () {
+  const [email, setEmail] = useState('')
+  const jsxValidator = createRef()
+
+  function handleValidateEmail () {
+    const { isValid, message, errors } = jsxValidator.current.validate()
     if (!isValid) {
-      console.log(isValid, message, errors);
-      return;
+      console.log(isValid, message, errors)
+      return
     }
-    console.log('success');
+    console.log('success')
   }
 
-  function handleValidateCustomFields() {
-    const validator = new Validator({ stopAtFirstError: true });
+  function handleValidateCustomFields () {
+    const validator = new Validator({ stopAtFirstError: true })
     const fieldPassword = validator.addField({
       rules: rules.password,
       value: '',
-      id: 'for-remove',
-    });
+      id: 'for-remove'
+    })
 
-    const fieldSearchPassword = validator.getField('for-remove');
-    console.log(fieldPassword === fieldSearchPassword);
+    const fieldSearchPassword = validator.getField('for-remove')
+    console.log(fieldPassword === fieldSearchPassword)
 
-    validator.removeField(fieldPassword);
+    validator.removeField(fieldPassword)
 
     validator.addField({
       rules: rules.password,
-      value: 'testpassword',
-    });
+      value: 'testpassword'
+    })
 
-    const { isValid, message, errors } = validator.validate();
+    const { isValid, message, errors } = validator.validate()
     if (!isValid) {
-      console.log(isValid, message, errors);
-      return;
+      console.log(isValid, message, errors)
+      return
     }
-    console.log('success');
+    console.log('success')
   }
 
   return (
@@ -58,7 +59,9 @@ function App() {
         <button onClick={handleValidateCustomFields} type="button">Validate custom fields</button>
       </ValidatorWrapper>
     </>
-  );
+  )
 }
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const root = createRoot(document.getElementById('root'))
+
+root.render(<App />)

package/example/index.html

@@ -3,6 +3,8 @@
 <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>
 

package/example/webpack.config.js

@@ -1,21 +1,29 @@
-const path = require('path');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const path = require('path')
 
 module.exports = {
+  target: 'web',
   entry: [
-    path.resolve('./example/example.jsx'),
+    path.resolve('./example/example.jsx')
   ],
+  mode: 'development',
   output: {
     path: path.resolve('./example'),
-    filename: './dist/example.js',
+    filename: './dist/example.js'
   },
+  devtool: 'source-map',
   module: {
     rules: [{
       test: /\.jsx?$/,
       exclude: /node_modules/,
-      loader: 'babel-loader',
-    }],
+      loader: 'babel-loader'
+    }]
   },
   resolve: {
-    extensions: ['.js', '.jsx'],
+    extensions: ['.js', '.jsx']
   },
-};
+  externals: {
+    react: 'React',
+    'react-dom': 'ReactDOM'
+  }
+}

package/jest.config.ts

@@ -0,0 +1,10 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+globalThis.IS_REACT_ACT_ENVIRONMENT = true
+
+export default {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  collectCoverage: true,
+  coverageDirectory: './coverage/',
+  displayName: '@coxy'
+}