improve react-hook-form reference (#82)

Author: KATT

package.json

@@ -20,28 +20,28 @@
   },
   "dependencies": {
     "@heroicons/react": "^1.0.6",
-    "@hookform/resolvers": "^2.8.10",
+    "@hookform/resolvers": "^3.1.1",
     "@tailwindcss/typography": "^0.5.7",
     "@tanstack/react-query": "^4.2.3",
-    "@trpc/client": "^10.5.0",
-    "@trpc/next": "^10.5.0",
-    "@trpc/react-query": "^10.5.0",
-    "@trpc/server": "^10.5.0",
+    "@trpc/client": "^10.34.0",
+    "@trpc/next": "^10.34.0",
+    "@trpc/react-query": "^10.34.0",
+    "@trpc/server": "^10.34.0",
     "autoprefixer": "^10.4.11",
     "clsx": "^1.1.1",
     "next": "12.3.1",
     "next-auth": "^4.10.3",
     "prism-react-renderer": "^1.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.31.1",
+    "react-hook-form": "^7.45.2",
     "start-server-and-test": "^1.12.0",
     "superjson": "^1.9.1",
     "tailwindcss": "^3.1.8",
     "zod": "^3.16.0"
   },
   "devDependencies": {
-    "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/forms": "^0.5.4",
     "@types/jest": "^29.2.4",
     "@types/node": "^17.0.33",
     "@types/react": "^18.0.9",

pnpm-lock.yaml

@@ -13,11 +13,7 @@ export default function NextAuth() {
 }
 
 function ServerSideSessionCheck() {
-  const query = trpc.authRouter.getSession.useQuery(undefined, {
-    suspense: true,
-  });
-
-  const session = query.data;
+  const [session] = trpc.authRouter.getSession.useSuspenseQuery();
 
   return (
     <div className="my-1">
@@ -63,11 +59,7 @@ function MiddlewareQuery() {
 }
 
 function SignInButton() {
-  const query = trpc.authRouter.getSession.useQuery(undefined, {
-    suspense: true,
-  });
-
-  const session = query.data;
+  const [session] = trpc.authRouter.getSession.useSuspenseQuery();
 
   return (
     <div className="flex items-center">

src/feature/next-auth/index.tsx

@@ -0,0 +1,100 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useId } from 'react';
+import {
+  FieldValues,
+  FormProvider,
+  SubmitHandler,
+  useForm,
+  useFormContext,
+  UseFormProps,
+  UseFormReturn,
+} from 'react-hook-form';
+import { z } from 'zod';
+
+type UseZodForm<TInput extends FieldValues> = UseFormReturn<TInput> & {
+  /**
+   * A unique ID for this form.
+   */
+  id: string;
+};
+export function useZodForm<TSchema extends z.ZodType>(
+  props: Omit<UseFormProps<TSchema['_input']>, 'resolver'> & {
+    schema: TSchema;
+  },
+) {
+  const form = useForm<TSchema['_input']>({
+    ...props,
+    resolver: zodResolver(props.schema, undefined, {
+      // This makes it so we can use `.transform()`s on the schema without same transform getting applied again when it reaches the server
+      raw: true,
+    }),
+  }) as UseZodForm<TSchema['_input']>;
+
+  form.id = useId();
+
+  return form;
+}
+
+type AnyZodForm = UseZodForm<any>;
+
+export function Form<TInput extends FieldValues>(
+  props: Omit<React.ComponentProps<'form'>, 'onSubmit' | 'id'> & {
+    handleSubmit: SubmitHandler<TInput>;
+    form: UseZodForm<TInput>;
+  },
+) {
+  const { handleSubmit, form, ...passThrough }: typeof props = props;
+  return (
+    <FormProvider {...form}>
+      <form
+        {...passThrough}
+        id={form.id}
+        onSubmit={(event) => {
+          event.stopPropagation();
+          event.preventDefault();
+
+          form.handleSubmit(async (values) => {
+            try {
+              await handleSubmit(values);
+            } catch (cause) {
+              form.setError('root.server', {
+                message: (cause as Error)?.message ?? 'Unknown error',
+                type: 'server',
+              });
+            }
+          })(event);
+        }}
+      ></form>
+    </FormProvider>
+  );
+}
+
+export function SubmitButton(
+  props: Omit<React.ComponentProps<'button'>, 'type' | 'form'> & {
+    /**
+     * Optionally specify a form to submit instead of the closest form context.
+     */
+    form?: AnyZodForm;
+  },
+) {
+  const context = useFormContext();
+
+  const form = props.form ?? context;
+  if (!form) {
+    throw new Error(
+      'SubmitButton must be used within a Form or have a form prop',
+    );
+  }
+  const { formState } = form;
+
+  return (
+    <button
+      {...props}
+      form={props.form?.id}
+      type="submit"
+      disabled={formState.isSubmitting}
+    >
+      {formState.isSubmitting ? 'Loading' : props.children}
+    </button>
+  );
+}