feat: implement joi schema support (#4463)

Author: lallenfrancisl

packages/joi/CHANGELOG.md

@@ -0,0 +1 @@
+# Change Log

packages/joi/README.md

@@ -0,0 +1,97 @@
+# @vee-validate/joi
+
+<p align="center">
+  <a href="https://vee-validate.logaretm.com/v4/integrations/joi-schema-validation/" target="_blank">
+    <img width="150" src="https://github.com/logaretm/vee-validate/raw/main/logo.png">
+  </a>
+
+  <a href="https://github.com/hapijs/joi/" target="_blank">
+    <img width="150" src="https://joi.dev/img/joiTransparent.png">
+  </a>
+</p>
+
+> Official vee-validate integration with Joi schema validation
+
+<p align="center">
+  <a href="https://github.com/sponsors/logaretm">
+    <img src='https://sponsors.logaretm.com/sponsors.svg'>
+  </a>
+</p>
+
+## Guide
+
+[Joi](https://github.com/hapijs/joi/) is a feature rich validation library for the browser and nodejs
+
+In their own words it is a:
+
+> The most powerful schema description language and data validator for JavaScript.
+
+You can use joi as a typed schema with the `@vee-validate/joi` package:
+
+```sh
+# npm
+npm install @vee-validate/joi
+# yarn
+yarn add @vee-validate/joi
+# pnpm
+pnpm add @vee-validate/joi
+```
+
+The `@vee-valdiate/joi` package exposes a `toTypedSchema` function that accepts any joi schema. Which then you can pass along to `validationSchema` option on `useForm`.
+
+This makes the form values and submitted values typed automatically and caters for both input and output types of that schema.
+
+```ts
+import { useForm } from 'vee-validate';
+import { object, string } from 'joi';
+import { toTypedSchema } from '@vee-validate/joi';
+
+interface FormData {
+  email: string;
+  password: string;
+  name?: string;
+}
+
+const { values, handleSubmit } = useForm({
+  validationSchema: toTypedSchema(
+    object<FormData>({
+      email: string().min(1).required().message('required'),
+      password: string().min(1).message('required'),
+      name: string().optional(),
+    }),
+  ),
+});
+
+// ❌ Type error, which means `values` is type-safe
+values.email.endsWith('@gmail.com');
+
+handleSubmit(submitted => {
+  // No errors, because email is required!
+  submitted.email.endsWith('@gmail.com');
+
+  // ❌ Type error, because `name` is not required so it could be undefined
+  // Means that your fields are now type safe!
+  submitted.name.length;
+});
+```
+
+### Joi default values
+
+You can also define default values on your joi schema directly and it will be picked up by the form:
+
+```ts
+import { useForm } from 'vee-validate';
+import { object, string } from 'joi';
+import { toTypedSchema } from '@vee-validate/joi';
+
+const { values, handleSubmit } = useForm({
+  validationSchema: toTypedSchema(
+    object({
+      email: string().default('[email protected]'),
+      password: string().default(''),
+    }),
+  ),
+});
+```
+
+Your initial values will be using the schema defaults, and also the defaults will be used if the values submitted is missing these fields.

packages/joi/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@vee-validate/joi",
+  "version": "4.11.3",
+  "description": "vee-validate integration with joi schema validation",
+  "author": "Abdelrahman Awad <[email protected]>",
+  "license": "MIT",
+  "module": "dist/vee-validate-joi.esm.js",
+  "unpkg": "dist/vee-validate-joi.js",
+  "main": "dist/vee-validate-joi.js",
+  "types": "dist/vee-validate-joi.d.ts",
+  "homepage": "https://vee-validate.logaretm.com/v4/integrations/joi-schema-validation/",
+  "repository": {
+    "url": "https://github.com/logaretm/vee-validate.git",
+    "type": "git",
+    "directory": "packages/joi"
+  },
+  "sideEffects": false,
+  "keywords": [
+    "VueJS",
+    "Vue",
+    "validation",
+    "validator",
+    "inputs",
+    "form"
+  ],
+  "files": [
+    "dist/*.js",
+    "dist/*.d.ts"
+  ],
+  "dependencies": {
+    "joi": "17.10.1",
+    "type-fest": "^4.2.0",
+    "vee-validate": "4.11.6"
+  }
+}

packages/joi/src/index.ts

@@ -0,0 +1,82 @@
+import type { TypedSchema, TypedSchemaError } from 'vee-validate';
+import { AsyncValidationOptions, Schema, ValidationError } from 'joi';
+import { merge, normalizeFormPath } from '../../shared';
+import { PartialDeep } from 'type-fest';
+
+/**
+ * Gets the type of data from the schema
+ */
+type DataTypeOf<JoiSchema> = JoiSchema extends Schema<infer U> ? U : never;
+
+/**
+ * Transform a joi schema into TypedSchema
+ *
+ * @param joiSchema joi schema for transforming
+ * @param opts validation options to pass to the joi validate function
+ * @returns TypedSchema for using with vee-validate
+ */
+export function toTypedSchema<
+  TSchema extends Schema,
+  TOutput = DataTypeOf<TSchema>,
+  TInput = PartialDeep<DataTypeOf<TSchema>>,
+>(joiSchema: TSchema, opts?: AsyncValidationOptions): TypedSchema<TInput, TOutput> {
+  const validationOptions: AsyncValidationOptions = merge({ abortEarly: false }, opts || {});
+
+  const schema: TypedSchema = {
+    __type: 'VVTypedSchema',
+    async parse(value) {
+      try {
+        const result = await joiSchema.validateAsync(value, validationOptions);
+
+        return {
+          value: result,
+          errors: [],
+        };
+      } catch (err) {
+        if (!(err instanceof ValidationError)) {
+          throw err;
+        }
+
+        const error = err as ValidationError;
+
+        return {
+          errors: processIssues(error),
+          rawError: err,
+        };
+      }
+    },
+    cast(values) {
+      // Joi doesn't allow us to cast without validating
+      const result = joiSchema.validate(values);
+
+      if (result.error) {
+        return values;
+      }
+
+      return result.value;
+    },
+  };
+
+  return schema;
+}
+
+function processIssues(error: ValidationError): TypedSchemaError[] {
+  const errors: Record<string, TypedSchemaError> = {};
+
+  error.details.forEach(detail => {
+    const path = normalizeFormPath(detail.path.join('.'));
+
+    if (errors[path]) {
+      errors[path].errors.push(detail.message);
+
+      return;
+    }
+
+    errors[path] = {
+      path,
+      errors: [detail.message],
+    };
+  });
+
+  return Object.values(errors);
+}