feat: introduced JOI validator

Author: foxhound87

CHANGELOG.md

@@ -1,3 +1,8 @@
+# 6.10.0 (master)
+
+- Introduced `JOI` validation plugin and driver.
+- Added `ValidatorConstructor` inferface
+
 # 6.9.4 (master)
 
 - Fix: #636

package-lock.json

@@ -3,7 +3,7 @@
   "license": "MIT",
   "version": "0.0.0-development",
   "author": "Claudio Savino <[email protected]> (https://twitter.com/foxhound87)",
-  "description": "Automagically manage React forms state and automatic validation with MobX.",
+  "description": "Reactive MobX Form State Management",
   "homepage": "https://github.com/foxhound87/mobx-react-form#readme",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
@@ -95,6 +95,7 @@
     "eslint": "^8.35.0",
     "eslint-plugin-import": "^2.27.5",
     "husky": "0.13.1",
+    "joi": "^17.13.3",
     "json-loader": "0.5.4",
     "lodash-webpack-plugin": "^0.11.6",
     "mobx": "^6.3.3",

package.json

@@ -7,6 +7,7 @@ import ValidatorInterface, {
   ValidationPlugin,
   ValidationPluginInterface,
   ValidationPlugins,
+  ValidatorConstructor,
 } from "./models/ValidatorInterface";
 import { FormInterface } from "./models/FormInterface";
 import { FieldInterface } from "./models/FieldInterface";
@@ -25,11 +26,12 @@ export default class Validator implements ValidatorInterface {
     svk: undefined,
     yup: undefined,
     zod: undefined,
+    joi: undefined,
   };
 
   error: string | null = null;
 
-  constructor(obj: any = {}) {
+  constructor(obj: ValidatorConstructor) {
     makeObservable(this, {
       error: observable,
       validate: action,

src/Validator.ts

@@ -4,6 +4,11 @@ import {FieldInterface} from "./FieldInterface";
 import {FormInterface} from "./FormInterface";
 import {StateInterface} from "./StateInterface";
 
+export interface ValidatorConstructor {
+  form: FormInterface;
+  plugins: ValidationPlugins;
+}
+
 export interface ValidateOptionsInterface {
   showErrors?: boolean,
   related?: boolean,
@@ -36,6 +41,7 @@ export interface ValidationPlugins {
   svk?: ValidationPlugin;
   yup?: ValidationPlugin;
   zod?: ValidationPlugin;
+  joi?: ValidationPlugin;
 }
 
 export type ValidationPackage = any;
@@ -75,4 +81,5 @@ export enum ValidationHooks {
   onError = 'onError',
 }
 
+
 export default ValidatorInterface;

src/models/ValidatorInterface.ts

@@ -0,0 +1,73 @@
+import _ from "lodash";
+import {
+  ValidationPlugin,
+  ValidationPluginConfig,
+  ValidationPluginConstructor,
+  ValidationPluginInterface,
+} from "../models/ValidatorInterface";
+
+class JOI implements ValidationPluginInterface {
+  promises = [];
+
+  config = null;
+
+  state = null;
+
+  extend = null;
+
+  validator = null;
+
+  schema = null;
+
+  constructor({
+    config,
+    state = null,
+    promises = [],
+  }: ValidationPluginConstructor) {
+    this.state = state;
+    this.promises = promises;
+    this.extend = config?.extend;
+    this.validator = config.package;
+    this.schema = config.schema;
+    this.extendValidator();
+  }
+
+  extendValidator(): void {
+    // extend using "extend" callback
+    if (typeof this.extend === "function") {
+      this.extend({
+        validator: this.validator,
+        form: this.state.form,
+      });
+    }
+  }
+
+  validate(field): void {
+    const { error } = this.schema.validate(field.state.form.validatedValues, { abortEarly: false });
+    if (!error) return;
+
+    const fieldPathArray = field.path.split('.');
+
+    const fieldErrors = error.details
+      .filter(detail => {
+        const errorPathString = detail.path.join('.');
+        const fieldPathString = fieldPathArray.join('.');
+        return errorPathString === fieldPathString || errorPathString.startsWith(`${fieldPathString}.`);
+      })
+      .map(detail => {
+        // Replace the path in the error message with the custom label
+        const label = detail.context?.label || detail.path.join('.');
+        const message = detail.message.replace(`${detail.path.join('.')}`, label);
+        return message;
+      });
+
+    if (fieldErrors.length) {
+      field.validationErrorStack = fieldErrors;
+    }
+  }
+}
+
+export default (config?: ValidationPluginConfig): ValidationPlugin => ({
+  class: JOI,
+  config,
+});

src/validators/JOI.ts

@@ -33,6 +33,8 @@ import $V4 from "./forms/nested/form.v4";
 import $Z from "./forms/nested/form.z";
 import $Z1 from "./forms/nested/form.z1";
 import $Z2 from "./forms/nested/form.z2";
+import $Z3 from "./forms/nested/form.z3";
+import $Z4 from "./forms/nested/form.z4";
 import $X from "./forms/nested/form.x";
 
 export default {
@@ -68,5 +70,7 @@ export default {
   $Z,
   $Z1,
   $Z2,
+  $Z3,
+  $Z4,
   $X,
 };

tests/data/_.nested.ts

@@ -0,0 +1,76 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { expect } from "chai";
+import j from "joi";
+import FormInterface from "../../../../src/models/FormInterface";
+import OptionsModel from "../../../../src/models/OptionsModel";
+import { Form } from "../../../../src";
+import joi from "../../../../src/validators/JOI";
+import { ValidationPlugins } from "../../../../src/models/ValidatorInterface";
+
+
+const fields = [
+	"user.username",
+	"user.email",
+	"user.password",
+	"user.passwordConfirm",
+];
+
+const values = {
+	user: {
+		username: 'a',
+		email: 'notAValidEmail@',
+		password: 'x',
+		passwordConfirm: 'mysecretpassword',
+	}
+}
+
+const schema = j.object({
+	user: j.object({
+		username: j.string().min(3).required().label('Username'),
+		email: j.string().email().required(),
+		password: j.string().min(6).max(25).required(),
+		passwordConfirm: j.string().min(6).max(25).valid(j.ref('password')).required().messages({
+			'any.only': 'Passwords do not match',
+			'any.required': 'Password confirmation is required',
+		  }),
+	}).required()
+});
+
+const plugins: ValidationPlugins = {
+	joi: joi({
+		package: j,
+		schema,
+	}),
+};
+
+const options: OptionsModel = {
+	validateOnInit: true,
+	showErrorsOnInit: true,
+};
+
+export default new Form({
+	fields,
+	values,
+}, {
+	plugins,
+	options,
+	name: "Nested-Z3",
+	hooks: {
+		onInit(form: FormInterface) {
+			describe("Check joi validation flag", () => {
+				it('user.username hasError should be true', () => expect(form.$('user.username').hasError).to.be.true);
+				it('user.email hasError should be true', () => expect(form.$('user.email').hasError).to.be.true);
+				it('user.password hasError should be true', () => expect(form.$('user.password').hasError).to.be.true);
+				it('user.passwordConfirm hasError should be true', () => expect(form.$('user.passwordConfirm').hasError).to.be.true);
+			});
+
+			describe("Check joi validation errors", () => {
+				it('user.username error should equal joi error', () => expect(form.$('user.username').error).to.be.equal('"Username" length must be at least 3 characters long'));
+				it('user.email error should equal joi error', () => expect(form.$('user.email').error).to.be.equal('"user.email" must be a valid email'));
+				it('user.password error should equal joi error', () => expect(form.$('user.password').error).to.be.equal('"user.password" length must be at least 6 characters long'));
+				it('user.passwordConfirm error should equal joi error', () => expect(form.$('user.passwordConfirm').error).to.be.equal('Passwords do not match'));
+			});
+
+		}
+	}
+});