feat: add ata-validator resolver

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',
+  },
+};