[PROPOSAL] New React Hook Form Abtraction

package.json

@@ -54,6 +54,8 @@
     "@orpc/server": "1.9.3",
     "@orpc/zod": "1.9.3",
     "@prisma/client": "6.17.0",
+    "@radix-ui/react-label": "2.1.8",
+    "@radix-ui/react-separator": "1.1.8",
     "@react-email/components": "0.5.6",
     "@react-email/render": "1.3.2",
     "@t3-oss/env-core": "0.13.8",

src/components/new-form/_field-components.ts

@@ -0,0 +1,14 @@
+import { FieldSelect } from '@/components/new-form/field-select';
+import { FieldText } from '@/components/new-form/field-text';
+import { FormFieldLabel } from '@/components/new-form/form-field-label';
+
+export const fieldComponents = {
+  Label: FormFieldLabel,
+  Text: FieldText,
+  Select: FieldSelect,
+  /**
+   * Add new fields to include in the FormField render props.
+   */
+} as const;
+
+export type FieldComponents = typeof fieldComponents;

src/components/new-form/docs.stories.tsx

@@ -0,0 +1,73 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Meta } from '@storybook/react-vite';
+import { z } from 'zod';
+
+import { useForm } from '@/lib/react-hook-form';
+import { zu } from '@/lib/zod/zod-utils';
+
+import { onSubmit } from '@/components/form/docs.utils';
+import { Form } from '@/components/new-form';
+import { Button } from '@/components/ui/button';
+import {
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+} from '@/components/ui/field';
+import { Input } from '@/components/ui/input';
+
+export default {
+  title: 'NewForm/Form',
+} satisfies Meta<typeof Form>;
+
+const zFormSchema = () =>
+  z.object({
+    name: zu.fieldText.required(),
+    other: zu.fieldText.nullish(),
+  });
+
+export const Default = () => {
+  const form = useForm({
+    mode: 'onBlur',
+    resolver: zodResolver(zFormSchema()),
+    defaultValues: {
+      name: '',
+      other: '',
+    },
+  });
+
+  return (
+    <Form {...form} onSubmit={onSubmit}>
+      <div className="flex flex-col gap-4">
+        <form.Field
+          name="name"
+          size="lg"
+          children={(field) => (
+            <>
+              <field.Label>Name</field.Label>
+              <field.Text />
+              <FieldDescription>This is an helper text</FieldDescription>
+            </>
+          )}
+        />
+        <form.Field
+          name="other"
+          children={({ props, state }) => (
+            <>
+              <FieldLabel htmlFor={props.name}>Name</FieldLabel>
+              <Input
+                {...props}
+                value={props.value ?? ''}
+                id={props.name}
+                aria-invalid={state.invalid}
+              />
+              {state.invalid && <FieldError errors={[state.error]} />}
+            </>
+          )}
+        />
+        <div>
+          <Button type="submit">Submit</Button>
+        </div>
+      </div>
+    </Form>
+  );
+};

src/components/new-form/field-select/index.tsx

@@ -0,0 +1,45 @@
+import { useFormField } from '@/components/new-form/form-field/context';
+import { FieldError } from '@/components/ui/field';
+import type { TValueBase } from '@/components/ui/select';
+import { Select } from '@/components/ui/select';
+
+export const FieldSelect = <TValue extends TValueBase>({
+  options,
+  ...rest
+}: React.ComponentProps<typeof Select<TValue>>) => {
+  const { field, fieldState } = useFormField();
+
+  const descriptionId = `${field.name}-desc`;
+  const errorId = `${field.name}-error`;
+
+  return (
+    <>
+      <Select
+        invalid={fieldState.error ? true : undefined}
+        aria-invalid={fieldState.error ? true : undefined}
+        aria-describedby={
+          !fieldState.error ? descriptionId : `${descriptionId} ${errorId}`
+        }
+        {...rest}
+        {...field}
+        options={options}
+        value={options.find((option) => option.id === field.value) ?? null}
+        onChange={(e) => {
+          field.onChange(e ? e.id : null);
+          rest.onChange?.(e);
+        }}
+        inputProps={{
+          id: field.name,
+          onBlur: (e) => {
+            field.onBlur();
+            rest.inputProps?.onBlur?.(e);
+          },
+          ...rest.inputProps,
+        }}
+      />
+      {fieldState.invalid && (
+        <FieldError id={errorId} errors={[fieldState.error]} />
+      )}
+    </>
+  );
+};

src/components/new-form/field-text/index.tsx

@@ -0,0 +1,35 @@
+import { useFormField } from '@/components/new-form/form-field/context';
+import { FieldError } from '@/components/ui/field';
+import { Input } from '@/components/ui/input';
+
+export function FieldText(props: React.ComponentProps<typeof Input>) {
+  const { field, fieldState, size } = useFormField();
+
+  const descriptionId = `${field.name}-desc`;
+  const errorId = `${field.name}-error`;
+  return (
+    <>
+      <Input
+        id={field.name}
+        aria-invalid={fieldState.invalid}
+        aria-describedby={
+          !fieldState.error ? `${descriptionId}` : `${descriptionId} ${errorId}`
+        }
+        size={size}
+        {...field}
+        {...props}
+        onChange={(e) => {
+          field.onChange(e);
+          props.onChange?.(e);
+        }}
+        onBlur={(e) => {
+          field.onBlur();
+          props.onBlur?.(e);
+        }}
+      />
+      {fieldState.invalid && (
+        <FieldError id={errorId} errors={[fieldState.error]} />
+      )}
+    </>
+  );
+}

src/components/new-form/form-field-label.tsx

@@ -0,0 +1,10 @@
+import { useFormField } from '@/components/new-form/form-field/context';
+import { FieldLabel } from '@/components/ui/field';
+
+export function FormFieldLabel(props: React.ComponentProps<typeof FieldLabel>) {
+  const { field } = useFormField();
+
+  return (
+    <FieldLabel id={`${field.name}-label`} htmlFor={field.name} {...props} />
+  );
+}

src/components/new-form/form-field/context.tsx

@@ -0,0 +1,26 @@
+import { createContext, use } from 'react';
+import type {
+  ControllerFieldState,
+  ControllerRenderProps,
+  FieldValues,
+} from 'react-hook-form';
+
+export type FormFieldSize = 'sm' | 'default' | 'lg';
+
+export type FormFieldContextValue = {
+  size: FormFieldSize;
+  field: ControllerRenderProps<FieldValues>;
+  fieldState: ControllerFieldState;
+};
+
+export const FormFieldContext = createContext<FormFieldContextValue | null>(
+  null
+);
+
+export const useFormField = () => {
+  const context = use(FormFieldContext);
+
+  if (!context) throw new Error('Missing <FormField /> parent component.');
+
+  return context;
+};