feat(typeboxResolver): add TypeBox resolver (#526)

Author: jorisre

README.md

@@ -455,6 +455,37 @@ const App = () => {
 };
 ```
 
+### [TypeBox](https://github.com/sinclairzx81/typebox)
+
+JSON Schema Type Builder with Static Type Resolution for TypeScript
+
+[![npm](https://img.shields.io/bundlephobia/minzip/@sinclair/typebox ?style=for-the-badge)](https://bundlephobia.com/result?p=@sinclair/typebox)
+
+```typescript jsx
+import { useForm } from 'react-hook-form';
+import { typeboxResolver } from '@hookform/resolvers/typebox';
+import { Type } from '@sinclair/typebox';
+
+const schema = Type.Object({
+  username: Type.String({ minLength: 1 }),
+  password: Type.String({ minLength: 1 }),
+});
+
+const App = () => {
+  const { register, handleSubmit } = useForm({
+    resolver: typeboxResolver(schema),
+  });
+
+  return (
+    <form onSubmit={handleSubmit((d) => console.log(d))}>
+      <input {...register('name')} />
+      <input type="number" {...register('age')} />
+      <input type="submit" />
+    </form>
+  );
+};
+```
+
 ## Backers
 
 Thanks goes to all our backers! [[Become a backer](https://opencollective.com/react-hook-form#backer)].

config/node-13-exports.js

@@ -13,6 +13,7 @@ const subRepositories = [
   'computed-types',
   'typanion',
   'ajv',
+  'typebox',
 ];
 
 const copySrc = () => {

package.json

@@ -2,7 +2,7 @@
   "name": "@hookform/resolvers",
   "amdName": "hookformResolvers",
   "version": "2.9.1",
-  "description": "React Hook Form validation resolvers: Yup, Joi, Superstruct, Zod, Vest, Class Validator, io-ts, Nope, computed-types and Typanion",
+  "description": "React Hook Form validation resolvers: Yup, Joi, Superstruct, Zod, Vest, Class Validator, io-ts, Nope, computed-types, TypeBox and Typanion",
   "main": "dist/resolvers.js",
   "module": "dist/resolvers.module.js",
   "umd:main": "dist/resolvers.umd.js",
@@ -21,6 +21,12 @@
       "import": "./zod/dist/zod.mjs",
       "require": "./zod/dist/zod.js"
     },
+    "./typebox": {
+      "types": "./typebox/dist/index.d.ts",
+      "umd": "./typebox/dist/typebox.umd.js",
+      "import": "./typebox/dist/typebox.mjs",
+      "require": "./typebox/dist/typebox.js"
+    },
     "./yup": {
       "types": "./yup/dist/index.d.ts",
       "umd": "./yup/dist/yup.umd.js",
@@ -118,7 +124,10 @@
     "typanion/dist",
     "ajv/package.json",
     "ajv/src",
-    "ajv/dist"
+    "ajv/dist",
+    "typebox/package.json",
+    "typebox/src",
+    "typebox/dist"
   ],
   "publishConfig": {
     "access": "public"
@@ -138,6 +147,7 @@
     "build:computed-types": "microbundle --cwd computed-types --globals @hookform/resolvers=hookformResolvers,react-hook-form=ReactHookForm",
     "build:typanion": "microbundle --cwd typanion --globals @hookform/resolvers=hookformResolvers,react-hook-form=ReactHookForm",
     "build:ajv": "microbundle --cwd ajv --globals @hookform/resolvers=hookformResolvers,react-hook-form=ReactHookForm",
+    "build:typebox": "microbundle --cwd typebox --globals @hookform/resolvers=hookformResolvers,react-hook-form=ReactHookForm",
     "postbuild": "node ./config/node-13-exports.js",
     "lint": "eslint . --ext .ts,.js --ignore-path .gitignore",
     "lint:types": "tsc",
@@ -162,7 +172,8 @@
     "nope",
     "computed-types",
     "typanion",
-    "ajv"
+    "ajv",
+    "TypeBox"
   ],
   "repository": {
     "type": "git",
@@ -175,6 +186,7 @@
   },
   "homepage": "https://react-hook-form.com",
   "devDependencies": {
+    "@sinclair/typebox": "^0.25.24",
     "@testing-library/dom": "^9.0.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",

pnpm-lock.yaml

@@ -0,0 +1,18 @@
+{
+  "name": "@hookform/resolvers/typebox",
+  "amdName": "hookformResolversTypebox",
+  "version": "1.0.0",
+  "private": true,
+  "description": "React Hook Form validation resolver: typebox",
+  "main": "dist/typebox.js",
+  "module": "dist/typebox.module.js",
+  "umd:main": "dist/typebox.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",
+    "@sinclair/typebox": "^0.25.24"
+  }
+}

typebox/package.json

@@ -0,0 +1,83 @@
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { render, screen } from '@testing-library/react';
+import user from '@testing-library/user-event';
+import { typeboxResolver } from '..';
+
+import { Type, Static } from '@sinclair/typebox';
+
+const schema = Type.Object({
+  username: Type.String({ minLength: 1 }),
+  password: Type.String({ minLength: 1 }),
+});
+
+type FormData = Static<typeof schema>;
+
+interface Props {
+  onSubmit: (data: FormData) => void;
+}
+
+function TestComponent({ onSubmit }: Props) {
+  const { register, handleSubmit } = useForm<FormData>({
+    resolver: typeboxResolver(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 Zod", async () => {
+  const handleSubmit = vi.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 user.click(screen.getByText(/submit/i));
+
+  // username
+  usernameField = screen.getByPlaceholderText(/username/i) as HTMLInputElement;
+  expect(usernameField.validity.valid).toBe(false);
+  expect(usernameField.validationMessage).toBe(
+    'Expected string length greater or equal to 1',
+  );
+
+  // password
+  passwordField = screen.getByPlaceholderText(/password/i) as HTMLInputElement;
+  expect(passwordField.validity.valid).toBe(false);
+  expect(passwordField.validationMessage).toBe(
+    'Expected string length greater or equal to 1',
+  );
+
+  await user.type(screen.getByPlaceholderText(/username/i), 'joe');
+  await 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('');
+});

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import user from '@testing-library/user-event';
+import { useForm } from 'react-hook-form';
+import { typeboxResolver } from '..';
+import { Type, Static } from '@sinclair/typebox';
+
+const schema = Type.Object({
+  username: Type.String({ minLength: 1 }),
+  password: Type.String({ minLength: 1 }),
+});
+
+type FormData = Static<typeof schema> & { unusedProperty: string };
+
+interface Props {
+  onSubmit: (data: FormData) => void;
+}
+
+function TestComponent({ onSubmit }: Props) {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormData>({
+    resolver: typeboxResolver(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 Zod 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.getAllByText(/Expected string length greater or equal to 1/i),
+  ).toHaveLength(2);
+
+  expect(handleSubmit).not.toHaveBeenCalled();
+});

typebox/src/__tests__/Form.tsx

@@ -0,0 +1,84 @@
+import { Field, InternalFieldName } from 'react-hook-form';
+import { Static, Type } from '@sinclair/typebox';
+import { TypeSystem } from '@sinclair/typebox/system';
+
+TypeSystem.CreateFormat('email', (value: string) => {
+  return /^\S+@\S+$/.test(value);
+});
+
+export const schema = Type.Object({
+  username: Type.String({
+    minLength: 3,
+    maxLength: 30,
+    pattern: '^[a-zA-Z0-9]+$',
+  }),
+  password: Type.String({
+    minLength: 8,
+    pattern: '^(.*[A-Za-z\\d].*)$',
+  }),
+  repeatPassword: Type.String(),
+  accessToken: Type.Union([Type.String(), Type.Number()]),
+  birthYear: Type.Optional(
+    Type.Number({
+      minimum: 1900,
+      maximum: 2013,
+    }),
+  ),
+  email: Type.Optional(Type.String({ format: 'email' })),
+  tags: Type.Array(Type.String()),
+  enabled: Type.Boolean(),
+  like: Type.Optional(
+    Type.Array(
+      Type.Object({
+        id: Type.Number(),
+        name: Type.String({ minLength: 4, maxLength: 4 }),
+      }),
+    ),
+  ),
+  dateStr: Type.Date(),
+});
+
+export const validData: Static<typeof schema> = {
+  username: 'Doe',
+  password: 'Password123_',
+  repeatPassword: 'Password123_',
+  birthYear: 2000,
+  email: 'tsulatsitamim@gmail.com',
+  tags: ['tag1', 'tag2'],
+  enabled: true,
+  accessToken: 'accessToken',
+  like: [
+    {
+      id: 1,
+      name: 'name',
+    },
+  ],
+  dateStr: new Date(),
+};
+
+export const invalidData = {
+  password: '___',
+  email: '',
+  birthYear: 'birthYear',
+  like: [{ id: 'z' }],
+  url: 'abc',
+};
+
+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',
+  },
+};