feat: add partial support for union types (#16) (#26)

Author: aspirisen

examples/components/Checkbox.tsx

@@ -0,0 +1,22 @@
+import { type RegisterOptions } from 'react-hook-form';
+import { type HookFormControlShim, type Lens } from '@hookform/lenses';
+
+export interface CheckboxProps
+  extends Omit<
+    RegisterOptions<HookFormControlShim<boolean>>,
+    'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'onBlur' | 'onChange' | 'value'
+  > {
+  label: string;
+  lens: Lens<boolean>;
+}
+
+export function Checkbox({ label, lens, ...rules }: CheckboxProps) {
+  const { control, name } = lens.interop();
+
+  return (
+    <label>
+      {label}
+      <input type="checkbox" {...control.register(name, rules)} />
+    </label>
+  );
+}

examples/components/Select.tsx

@@ -0,0 +1,32 @@
+import { type RegisterOptions } from 'react-hook-form';
+import { type HookFormControlShim, type Lens } from '@hookform/lenses';
+
+export interface SelectOption<T extends string | number> {
+  value: T;
+  label: string;
+}
+
+export interface SelectProps<T extends string | number>
+  extends Omit<RegisterOptions<HookFormControlShim<T>>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'onBlur' | 'onChange' | 'value'> {
+  label: string;
+  lens: Lens<T>;
+  options: SelectOption<T>[];
+}
+
+export function Select<T extends string | number>({ label, lens, options, ...rules }: SelectProps<T>) {
+  const { control, name } = lens.interop();
+
+  return (
+    <label>
+      {label}&nbsp;
+      {/* @ts-expect-error - TODO: fix this */}
+      <select {...control.register(name, rules)}>
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}

examples/typing/Optional.story.tsx

@@ -0,0 +1,76 @@
+import { type SubmitHandler, useForm, useWatch } from 'react-hook-form';
+import { type Lens, useLens } from '@hookform/lenses';
+import { action } from '@storybook/addon-actions';
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { StringInput } from '../components/StringInput';
+
+const meta = {
+  title: 'Typing',
+  component: Playground,
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+interface FormValues {
+  name?: string;
+  surname?: string;
+}
+
+interface PlaygroundProps {
+  onSubmit: SubmitHandler<FormValues>;
+}
+
+function Playground({ onSubmit = action('submit') }: PlaygroundProps) {
+  const { handleSubmit, control } = useForm<FormValues>();
+  const lens = useLens({ control });
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <UserProfile
+          lens={lens.narrow<{
+            name: string;
+            surname: string;
+          }>()}
+        />
+        <input type="submit" />
+      </form>
+    </div>
+  );
+}
+
+export const Optional: Story = {
+  args: {
+    onSubmit: fn(),
+  },
+};
+
+function UserProfile({
+  lens,
+}: {
+  lens: Lens<{
+    name: string;
+    surname: string;
+  }>;
+}) {
+  return (
+    <div>
+      <UserName lens={lens.focus('name')} />
+      <StringInput label="Surname" lens={lens.focus('surname')} />
+    </div>
+  );
+}
+
+function UserName({ lens }: { lens: Lens<string> }) {
+  const value = useWatch(lens.interop());
+
+  if (value === undefined || value === null) {
+    return null;
+  }
+
+  return <StringInput label="Name" lens={lens} />;
+}