Convex resolver

convex/package.json

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

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

@@ -0,0 +1,43 @@
+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 { convexResolver } from '../convex';
+import { schema } from './__fixtures__/data';
+
+const USERNAME_REQUIRED_MESSAGE = 'username field is required';
+const PASSWORD_REQUIRED_MESSAGE = 'New Password is required';
+
+function TestComponent() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: convexResolver(schema),
+    shouldUseNativeValidation: true,
+  });
+
+  return (
+    <form onSubmit={handleSubmit(() => {})}>
+      <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 validation with Convex resolver using native validation', async () => {
+  render(<TestComponent />);
+
+  expect(screen.queryAllByRole('alert')).toHaveLength(0);
+
+  await user.click(screen.getByText(/submit/i));
+
+  expect(screen.getByText(USERNAME_REQUIRED_MESSAGE)).toBeInTheDocument();
+  expect(screen.getByText(PASSWORD_REQUIRED_MESSAGE)).toBeInTheDocument();
+});

convex/src/__tests__/Form.tsx

@@ -0,0 +1,58 @@
+import { render, screen } from '@testing-library/react';
+import user from '@testing-library/user-event';
+import { v } from 'convex/values';
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { convexResolver } from '../convex';
+
+const USERNAME_REQUIRED_MESSAGE = 'username field is required';
+const PASSWORD_REQUIRED_MESSAGE = 'New Password is required';
+
+const schema = v.object({
+  username: v.string(),
+  password: v.string(),
+});
+
+type FormData = {
+  username?: string;
+  password?: string;
+};
+
+interface Props {
+  onSubmit: (data: FormData) => void;
+}
+
+function TestComponent({ onSubmit }: Props) {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormData>({
+    resolver: convexResolver(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 Convex resolver 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.getByText(USERNAME_REQUIRED_MESSAGE)).toBeInTheDocument();
+  expect(screen.getByText(PASSWORD_REQUIRED_MESSAGE)).toBeInTheDocument();
+  expect(handleSubmit).not.toHaveBeenCalled();
+});

convex/src/__tests__/__fixtures__/data.ts

@@ -0,0 +1,218 @@
+import { Field, InternalFieldName } from 'react-hook-form';
+
+type ConvexIssue = {
+  path?: (string | number)[];
+  message: string;
+  code?: string;
+};
+
+type ConvexValidationResult<T> =
+  | { success: true; value: T }
+  | { success: false; issues: ConvexIssue[] };
+
+type ConvexSchema<Input, Output> = {
+  validate: (
+    value: Input,
+  ) => ConvexValidationResult<Output> | Promise<ConvexValidationResult<Output>>;
+};
+
+export type SchemaInput = {
+  username?: string;
+  password?: string;
+  repeatPassword?: string;
+  accessToken?: string | number;
+  birthYear?: number;
+  email?: string;
+  tags?: (string | number)[];
+  enabled?: boolean;
+  like?: {
+    id?: number | string;
+    name?: string;
+  };
+};
+
+export type SchemaOutput = Required<
+  Omit<SchemaInput, 'repeatPassword' | 'like'> & {
+    like: { id: number; name: string };
+  }
+>;
+
+export const schema: ConvexSchema<SchemaInput, SchemaOutput> = {
+  validate(value) {
+    const issues: ConvexIssue[] = [];
+
+    if (typeof value.username !== 'string' || value.username.length === 0) {
+      issues.push({
+        path: ['username'],
+        message: 'username field is required',
+        code: 'required',
+      });
+    }
+    if (
+      typeof value.username === 'string' &&
+      value.username.length > 0 &&
+      value.username.length < 2
+    ) {
+      issues.push({
+        path: ['username'],
+        message: 'Too short',
+        code: 'minLength',
+      });
+    }
+
+    if (typeof value.password !== 'string' || value.password.length === 0) {
+      issues.push({
+        path: ['password'],
+        message: 'New Password is required',
+        code: 'required',
+      });
+    }
+    if (
+      typeof value.password === 'string' &&
+      value.password.length > 0 &&
+      value.password.length < 8
+    ) {
+      issues.push({
+        path: ['password'],
+        message: 'Must be at least 8 characters in length',
+        code: 'minLength',
+      });
+    }
+
+    if (typeof value.email !== 'string' || value.email.length === 0) {
+      issues.push({
+        path: ['email'],
+        message: 'Invalid email address',
+        code: 'email',
+      });
+    } else if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(value.email)) {
+      issues.push({
+        path: ['email'],
+        message: 'Invalid email address',
+        code: 'email',
+      });
+    }
+
+    if (typeof value.birthYear !== 'number') {
+      issues.push({
+        path: ['birthYear'],
+        message: 'Please enter your birth year',
+        code: 'type',
+      });
+    } else if (value.birthYear < 1900 || value.birthYear > 2013) {
+      issues.push({
+        path: ['birthYear'],
+        message: 'Invalid birth year',
+        code: 'range',
+      });
+    }
+
+    if (!Array.isArray(value.tags)) {
+      issues.push({
+        path: ['tags'],
+        message: 'Tags should be strings',
+        code: 'type',
+      });
+    } else {
+      for (let i = 0; i < value.tags.length; i++) {
+        if (typeof value.tags[i] !== 'string') {
+          issues.push({
+            path: ['tags', i],
+            message: 'Tags should be strings',
+            code: 'type',
+          });
+        }
+      }
+    }
+
+    if (typeof value.enabled !== 'boolean') {
+      issues.push({
+        path: ['enabled'],
+        message: 'enabled must be a boolean',
+        code: 'type',
+      });
+    }
+
+    const like = value.like || {};
+    if (typeof like.id !== 'number') {
+      issues.push({
+        path: ['like', 'id'],
+        message: 'Like id is required',
+        code: 'type',
+      });
+    }
+    if (typeof like.name !== 'string') {
+      issues.push({
+        path: ['like', 'name'],
+        message: 'Like name is required',
+        code: 'required',
+      });
+    } else if ((like.name as string).length < 4) {
+      issues.push({
+        path: ['like', 'name'],
+        message: 'Too short',
+        code: 'minLength',
+      });
+    }
+
+    if (issues.length > 0) {
+      return { success: false, issues };
+    }
+
+    return {
+      success: true,
+      value: {
+        username: value.username!,
+        password: value.password!,
+        accessToken: value.accessToken!,
+        birthYear: value.birthYear!,
+        email: value.email!,
+        tags: (value.tags as string[])!,
+        enabled: value.enabled!,
+        like: { id: like.id as number, name: like.name as string },
+      },
+    } as const;
+  },
+};
+
+export const validData: SchemaInput = {
+  username: 'Doe',
+  password: 'Password123_',
+  repeatPassword: 'Password123_',
+  birthYear: 2000,
+  email: '[email protected]',
+  tags: ['tag1', 'tag2'],
+  enabled: true,
+  accessToken: 'accessToken',
+  like: {
+    id: 1,
+    name: 'name',
+  },
+};
+
+export const invalidData: SchemaInput = {
+  password: '___',
+  email: '',
+  birthYear: undefined as any,
+  like: { id: 'z' as any },
+  tags: [1, 2, 3] as any,
+};
+
+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',
+  },
+};