feat: add ata-validator resolver (#845)

* feat: add ata-validator resolver

Add a new resolver for ata-validator, an ultra-fast JSON Schema
validator for Node.js.

* fix: add ata-validator to node-13-exports and export map check

* perf: move Validator instantiation to factory scope

Avoid recompiling the schema on every validation call by constructing
the Validator once when the resolver is created instead of on each
form submit.

Author: armagandalkiran

ata-validator/package.json

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

ata-validator/src/__tests__/Form-native-validation.tsx

@@ -0,0 +1,80 @@
+import { render, screen } from '@testing-library/react';
+import user from '@testing-library/user-event';
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { ataResolver } from '..';
+
+type FormData = { username: string; password: string };
+
+const schema = {
+  type: 'object',
+  properties: {
+    username: {
+      type: 'string',
+      minLength: 1,
+    },
+    password: {
+      type: 'string',
+      minLength: 1,
+    },
+  },
+  required: ['username', 'password'],
+  additionalProperties: false,
+};
+
+interface Props {
+  onSubmit: (data: FormData) => void;
+}
+
+function TestComponent({ onSubmit }: Props) {
+  const { register, handleSubmit } = useForm<FormData>({
+    resolver: ataResolver(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 ata-validator", async () => {
+  const handleSubmit = vi.fn();
+  render(<TestComponent onSubmit={handleSubmit} />);
+
+  let usernameField = screen.getByPlaceholderText(
+    /username/i,
+  ) as HTMLInputElement;
+  expect(usernameField.validity.valid).toBe(true);
+  expect(usernameField.validationMessage).toBe('');
+
+  let passwordField = screen.getByPlaceholderText(
+    /password/i,
+  ) as HTMLInputElement;
+  expect(passwordField.validity.valid).toBe(true);
+  expect(passwordField.validationMessage).toBe('');
+
+  await user.click(screen.getByText(/submit/i));
+
+  usernameField = screen.getByPlaceholderText(/username/i) as HTMLInputElement;
+  expect(usernameField.validity.valid).toBe(false);
+
+  passwordField = screen.getByPlaceholderText(/password/i) as HTMLInputElement;
+  expect(passwordField.validity.valid).toBe(false);
+
+  await user.type(screen.getByPlaceholderText(/username/i), 'joe');
+  await user.type(screen.getByPlaceholderText(/password/i), 'password');
+
+  usernameField = screen.getByPlaceholderText(/username/i) as HTMLInputElement;
+  expect(usernameField.validity.valid).toBe(true);
+  expect(usernameField.validationMessage).toBe('');
+
+  passwordField = screen.getByPlaceholderText(/password/i) as HTMLInputElement;
+  expect(passwordField.validity.valid).toBe(true);
+  expect(passwordField.validationMessage).toBe('');
+});

ata-validator/src/__tests__/Form.tsx

@@ -0,0 +1,61 @@
+import { render, screen } from '@testing-library/react';
+import user from '@testing-library/user-event';
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { ataResolver } from '..';
+
+type FormData = { username: string; password: string };
+
+const schema = {
+  type: 'object',
+  properties: {
+    username: {
+      type: 'string',
+      minLength: 1,
+    },
+    password: {
+      type: 'string',
+      minLength: 1,
+    },
+  },
+  required: ['username', 'password'],
+  additionalProperties: false,
+};
+
+interface Props {
+  onSubmit: (data: FormData) => void;
+}
+
+function TestComponent({ onSubmit }: Props) {
+  const {
+    register,
+    formState: { errors },
+    handleSubmit,
+  } = useForm<FormData>({
+    resolver: ataResolver(schema),
+  });
+
+  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 ata-validator and TypeScript's integration", async () => {
+  const handleSubmit = vi.fn();
+  render(<TestComponent onSubmit={handleSubmit} />);
+
+  expect(screen.queryAllByRole('alert')).toHaveLength(0);
+
+  await user.click(screen.getByText(/submit/i));
+
+  expect(screen.queryAllByRole('alert').length).toBeGreaterThan(0);
+  expect(handleSubmit).not.toHaveBeenCalled();
+});

ata-validator/src/__tests__/__fixtures__/data.ts

@@ -0,0 +1,134 @@
+import { Field, InternalFieldName } from 'react-hook-form';
+
+interface Data {
+  username: string;
+  password: string;
+  email?: string;
+  birthday?: number;
+  tags: string[];
+  enabled: boolean;
+  url: string;
+  like?: { id: number; name: string }[];
+  deepObject: { data: string; twoLayersDeep: { name: string } };
+}
+
+export const schema = {
+  type: 'object',
+  properties: {
+    username: {
+      type: 'string',
+      minLength: 3,
+      maxLength: 30,
+      pattern: '^\\w+$',
+    },
+    password: {
+      type: 'string',
+      minLength: 8,
+      pattern: '.*[A-Z].*',
+    },
+    email: {
+      type: 'string',
+      format: 'email',
+    },
+    birthday: {
+      type: 'integer',
+      minimum: 1900,
+      maximum: 2013,
+    },
+    tags: {
+      type: 'array',
+      items: { type: 'string' },
+    },
+    enabled: {
+      type: 'boolean',
+    },
+    url: {
+      type: 'string',
+      format: 'uri',
+    },
+    like: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          id: { type: 'number' },
+          name: { type: 'string', minLength: 4, maxLength: 4 },
+        },
+        required: ['id', 'name'],
+      },
+    },
+    deepObject: {
+      type: 'object',
+      properties: {
+        data: { type: 'string' },
+        twoLayersDeep: {
+          type: 'object',
+          properties: { name: { type: 'string' } },
+          additionalProperties: false,
+          required: ['name'],
+        },
+      },
+      required: ['data', 'twoLayersDeep'],
+    },
+  },
+  required: ['username', 'password', 'tags', 'enabled', 'deepObject'],
+  additionalProperties: false,
+};
+
+export const validData: Data = {
+  username: 'Doe',
+  password: 'Password123_',
+  email: 'john@doe.com',
+  birthday: 2000,
+  tags: ['tag1', 'tag2'],
+  enabled: true,
+  url: 'https://react-hook-form.com/',
+  like: [{ id: 1, name: 'name' }],
+  deepObject: {
+    data: 'data',
+    twoLayersDeep: { name: 'deeper' },
+  },
+};
+
+export const invalidData = {
+  username: '__',
+  password: 'invalid',
+  email: '',
+  birthday: 'birthYear',
+  like: [{ id: 'z' }],
+  url: 'abc',
+  deepObject: {
+    data: 233,
+    twoLayersDeep: { name: 123 },
+  },
+};
+
+export const invalidDataWithUndefined = {
+  username: 'jsun969',
+  password: undefined,
+  deepObject: {
+    twoLayersDeep: {
+      name: 'deeper',
+    },
+    data: undefined,
+  },
+};
+
+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',
+  },
+};