feat: add ajv (#408)

* feat: add ajv without test [WIP]

* fix(ajv): fix error parser path

* test(ajv): add resolver tests

* style(ajv): sort import

* fix(ajv): fix require error and add require test

* test(ajv): add react test

* fix(ajv): add keyword to check empty fields

* fix(ajv): remove field empty keyword to make it native

* fix(ajv): add ajv mjs build script

* docs: add Ajv example

Author: jsun969

README.md

@@ -27,13 +27,13 @@
 ## API
 
 ```
-type Options = { 
+type Options = {
   mode: 'async' | 'sync',
-  rawValues?: boolean 
+  rawValues?: boolean
 }
 
 resolver(schema: object, schemaOptions?: object, resolverOptions: Options)
-````
+```
 
 |                 | type     | Required | Description                                   |
 | --------------- | -------- | -------- | --------------------------------------------- |
@@ -405,6 +405,56 @@ const App = () => {
 };
 ```
 
+### [Ajv](https://github.com/ajv-validator/ajv)
+
+The fastest JSON validator for Node.js and browser
+
+[![npm](https://img.shields.io/bundlephobia/minzip/ajv?style=for-the-badge)](https://bundlephobia.com/result?p=ajv)
+
+```tsx
+import { useForm } from 'react-hook-form';
+import { ajvResolver } from '@hookform/resolvers/ajv';
+
+// must use `minLength: 1` to implement required field
+const schema = {
+  type: 'object',
+  properties: {
+    username: {
+      type: 'string',
+      minLength: 1,
+      errorMessage: { minLength: 'username field is required' },
+    },
+    password: {
+      type: 'string',
+      minLength: 1,
+      errorMessage: { minLength: 'password field is required' },
+    },
+  },
+  required: ['username', 'password'],
+  additionalProperties: false,
+};
+
+const App = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: ajvResolver(schema),
+  });
+
+  return (
+    <form onSubmit={handleSubmit((data) => console.log(data))}>
+      <input {...register('username')} />
+      {errors.username && <span>{errors.username.message}</span>}
+      <input {...register('password')} />
+      {errors.password && <span>{errors.password.message}</span>}
+      <button type="submit">submit</button>
+    </form>
+  );
+};
+```
+
 ## Backers
 
 Thanks goes to all our backers! [[Become a backer](https://opencollective.com/react-hook-form#backer)].

ajv/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "ajv",
+  "amdName": "hookformResolversAjv",
+  "version": "1.0.0",
+  "private": true,
+  "description": "React Hook Form validation resolver: ajv",
+  "main": "dist/ajv.js",
+  "module": "dist/ajv.module.js",
+  "umd:main": "dist/ajv.umd.js",
+  "source": "src/index.ts",
+  "types": "dist/index.d.ts",
+  "license": "MIT",
+  "peerDependencies": {
+    "react-hook-form": "^7.0.0",
+    "@hookform/resolvers": "^2.0.0"
+  }
+}

ajv/src/__tests__/Form-native-validation.tsx

@@ -0,0 +1,98 @@
+import { act, render, screen } from '@testing-library/react';
+import user from '@testing-library/user-event';
+import { JSONSchemaType } from 'ajv';
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { ajvResolver } from '..';
+
+const USERNAME_REQUIRED_MESSAGE = 'username field is required';
+const PASSWORD_REQUIRED_MESSAGE = 'password field is required';
+
+type FormData = { username: string; password: string };
+
+const schema: JSONSchemaType<FormData> = {
+  type: 'object',
+  properties: {
+    username: {
+      type: 'string',
+      minLength: 1,
+      errorMessage: { minLength: USERNAME_REQUIRED_MESSAGE },
+    },
+    password: {
+      type: 'string',
+      minLength: 1,
+      errorMessage: { minLength: PASSWORD_REQUIRED_MESSAGE },
+    },
+  },
+  required: ['username', 'password'],
+  additionalProperties: false,
+};
+
+interface Props {
+  onSubmit: (data: FormData) => void;
+}
+
+function TestComponent({ onSubmit }: Props) {
+  const { register, handleSubmit } = useForm<FormData>({
+    resolver: ajvResolver(schema),
+    shouldUseNativeValidation: true,
+  });
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <input {...register('username')} placeholder="username" />
+
+      <input {...register('password')} placeholder="password" />
+
+      <button type="submit">submit</button>
+    </form>
+  );
+}
+
+test("form's native validation with Ajv", async () => {
+  const handleSubmit = jest.fn();
+  render(<TestComponent onSubmit={handleSubmit} />);
+
+  // username
+  let usernameField = screen.getByPlaceholderText(
+    /username/i,
+  ) as HTMLInputElement;
+  expect(usernameField.validity.valid).toBe(true);
+  expect(usernameField.validationMessage).toBe('');
+
+  // password
+  let passwordField = screen.getByPlaceholderText(
+    /password/i,
+  ) as HTMLInputElement;
+  expect(passwordField.validity.valid).toBe(true);
+  expect(passwordField.validationMessage).toBe('');
+
+  await act(async () => {
+    user.click(screen.getByText(/submit/i));
+  });
+
+  // username
+  usernameField = screen.getByPlaceholderText(/username/i) as HTMLInputElement;
+  expect(usernameField.validity.valid).toBe(false);
+  expect(usernameField.validationMessage).toBe(USERNAME_REQUIRED_MESSAGE);
+
+  // password
+  passwordField = screen.getByPlaceholderText(/password/i) as HTMLInputElement;
+  expect(passwordField.validity.valid).toBe(false);
+  expect(passwordField.validationMessage).toBe(PASSWORD_REQUIRED_MESSAGE);
+
+  await act(async () => {
+    user.type(screen.getByPlaceholderText(/username/i), 'joe');
+    user.type(screen.getByPlaceholderText(/password/i), 'password');
+  });
+
+  // username
+  usernameField = screen.getByPlaceholderText(/username/i) as HTMLInputElement;
+  expect(usernameField.validity.valid).toBe(true);
+  expect(usernameField.validationMessage).toBe('');
+
+  // password
+  passwordField = screen.getByPlaceholderText(/password/i) as HTMLInputElement;
+  expect(passwordField.validity.valid).toBe(true);
+  expect(passwordField.validationMessage).toBe('');
+});

ajv/src/__tests__/Form.tsx

@@ -0,0 +1,67 @@
+import { act, render, screen } from '@testing-library/react';
+import user from '@testing-library/user-event';
+import { JSONSchemaType } from 'ajv';
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { ajvResolver } from '..';
+
+type FormData = { username: string; password: string };
+
+const schema: JSONSchemaType<FormData> = {
+  type: 'object',
+  properties: {
+    username: {
+      type: 'string',
+      minLength: 1,
+      errorMessage: { minLength: 'username field is required' },
+    },
+    password: {
+      type: 'string',
+      minLength: 1,
+      errorMessage: { minLength: 'password field is required' },
+    },
+  },
+  required: ['username', 'password'],
+  additionalProperties: false,
+};
+
+interface Props {
+  onSubmit: (data: FormData) => void;
+}
+
+function TestComponent({ onSubmit }: Props) {
+  const {
+    register,
+    formState: { errors },
+    handleSubmit,
+  } = useForm<FormData>({
+    resolver: ajvResolver(schema), // Useful to check TypeScript regressions
+  });
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <input {...register('username')} />
+      {errors.username && <span role="alert">{errors.username.message}</span>}
+
+      <input {...register('password')} />
+      {errors.password && <span role="alert">{errors.password.message}</span>}
+
+      <button type="submit">submit</button>
+    </form>
+  );
+}
+
+test("form's validation with Ajv and TypeScript's integration", async () => {
+  const handleSubmit = jest.fn();
+  render(<TestComponent onSubmit={handleSubmit} />);
+
+  expect(screen.queryAllByRole(/alert/i)).toHaveLength(0);
+
+  await act(async () => {
+    user.click(screen.getByText(/submit/i));
+  });
+
+  expect(screen.getByText(/username field is required/i)).toBeInTheDocument();
+  expect(screen.getByText(/password field is required/i)).toBeInTheDocument();
+  expect(handleSubmit).not.toHaveBeenCalled();
+});

ajv/src/__tests__/__fixtures__/data.ts

@@ -0,0 +1,70 @@
+import { JSONSchemaType } from 'ajv';
+import { Field, InternalFieldName } from 'react-hook-form';
+
+interface Data {
+  username: string;
+  password: string;
+  deepObject: { data: string };
+}
+
+export const schema: JSONSchemaType<Data> = {
+  type: 'object',
+  properties: {
+    username: {
+      type: 'string',
+      minLength: 3,
+    },
+    password: {
+      type: 'string',
+      pattern: '.*[A-Z].*',
+      errorMessage: {
+        pattern: 'One uppercase character',
+      },
+    },
+    deepObject: {
+      type: 'object',
+      nullable: true,
+      properties: {
+        data: { type: 'string' },
+      },
+      required: ['data'],
+    },
+  },
+  required: ['username', 'password', 'deepObject'],
+  additionalProperties: false,
+};
+
+export const validData: Data = {
+  username: 'jsun969',
+  password: 'validPassword',
+  deepObject: {
+    data: 'data',
+  },
+};
+
+export const invalidData = {
+  username: '__',
+  password: 'invalid-password',
+  deepObject: {
+    data: 233,
+  },
+};
+
+export const fields: Record<InternalFieldName, Field['_f']> = {
+  username: {
+    ref: { name: 'username' },
+    name: 'username',
+  },
+  password: {
+    ref: { name: 'password' },
+    name: 'password',
+  },
+  email: {
+    ref: { name: 'email' },
+    name: 'email',
+  },
+  birthday: {
+    ref: { name: 'birthday' },
+    name: 'birthday',
+  },
+};