feat(v3): CheckboxGroup, FieldCheckboxGroup

app/components/form/field-checkbox-group/docs.stories.tsx

@@ -0,0 +1,172 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { zu } from '@/lib/zod/zod-utils';
+
+import { FormFieldController } from '@/components/form';
+import { onSubmit } from '@/components/form/docs.utils';
+import { Button } from '@/components/ui/button';
+
+import { Form, FormField, FormFieldHelper, FormFieldLabel } from '../';
+
+export default {
+  title: 'Form/FieldCheckboxGroup',
+};
+
+const zFormSchema = () =>
+  z.object({
+    bears: zu.array.nonEmpty(z.string().array(), 'Select at least one answer.'),
+  });
+
+const formOptions = {
+  mode: 'onBlur',
+  resolver: zodResolver(zFormSchema()),
+  defaultValues: {
+    bears: [],
+  } as z.infer<ReturnType<typeof zFormSchema>>,
+} as const;
+
+const options = [
+  { value: 'bearstrong', label: 'Bearstrong' },
+  { value: 'pawdrin', label: 'Buzz Pawdrin' },
+  { value: 'grizzlyrin', label: 'Yuri Grizzlyrin' },
+];
+
+export const Default = () => {
+  const form = useForm(formOptions);
+
+  return (
+    <Form {...form} onSubmit={onSubmit}>
+      <div className="flex flex-col gap-4">
+        <FormField>
+          <FormFieldLabel>Bearstronaut</FormFieldLabel>
+          <FormFieldHelper>Select your favorite bearstronaut</FormFieldHelper>
+          <FormFieldController
+            type="checkbox-group"
+            control={form.control}
+            name="bears"
+            options={options}
+          />
+        </FormField>
+        <div>
+          <Button type="submit">Submit</Button>
+        </div>
+      </div>
+    </Form>
+  );
+};
+
+export const DefaultValue = () => {
+  const form = useForm({
+    ...formOptions,
+    defaultValues: {
+      bears: ['pawdrin'],
+    },
+  });
+
+  return (
+    <Form {...form} onSubmit={onSubmit}>
+      <div className="flex flex-col gap-4">
+        <FormField>
+          <FormFieldLabel>Bearstronaut</FormFieldLabel>
+          <FormFieldHelper>Select your favorite bearstronaut</FormFieldHelper>
+          <FormFieldController
+            control={form.control}
+            type="checkbox-group"
+            name="bears"
+            options={options}
+          />
+        </FormField>
+        <div>
+          <Button type="submit">Submit</Button>
+        </div>
+      </div>
+    </Form>
+  );
+};
+
+export const Disabled = () => {
+  const form = useForm({
+    ...formOptions,
+    defaultValues: {
+      bears: ['pawdrin'],
+    },
+  });
+
+  return (
+    <Form {...form} onSubmit={onSubmit}>
+      <div className="flex flex-col gap-4">
+        <FormField>
+          <FormFieldLabel>Bearstronaut</FormFieldLabel>
+          <FormFieldHelper>Select your favorite bearstronaut</FormFieldHelper>
+          <FormFieldController
+            control={form.control}
+            type="checkbox-group"
+            name="bears"
+            options={options}
+            disabled
+          />
+        </FormField>
+        <div>
+          <Button type="submit">Submit</Button>
+        </div>
+      </div>
+    </Form>
+  );
+};
+
+export const Row = () => {
+  const form = useForm(formOptions);
+
+  return (
+    <Form {...form} onSubmit={onSubmit}>
+      <div className="flex flex-col gap-4">
+        <FormField>
+          <FormFieldLabel>Bearstronaut</FormFieldLabel>
+          <FormFieldHelper>Select your favorite bearstronaut</FormFieldHelper>
+          <FormFieldController
+            control={form.control}
+            type="checkbox-group"
+            name="bears"
+            options={options}
+            className="flex-row gap-6"
+          />
+        </FormField>
+        <div>
+          <Button type="submit">Submit</Button>
+        </div>
+      </div>
+    </Form>
+  );
+};
+
+export const WithDisabledOption = () => {
+  const form = useForm(formOptions);
+
+  const optionsWithDisabled = [
+    { value: 'bearstrong', label: 'Bearstrong' },
+    { value: 'pawdrin', label: 'Buzz Pawdrin' },
+    { value: 'grizzlyrin', label: 'Yuri Grizzlyrin', disabled: true },
+  ];
+
+  return (
+    <Form {...form} onSubmit={onSubmit}>
+      <div className="flex flex-col gap-4">
+        <FormField>
+          <FormFieldLabel>Bearstronaut</FormFieldLabel>
+          <FormFieldHelper>Select your favorite bearstronaut</FormFieldHelper>
+          <FormFieldController
+            control={form.control}
+            type="checkbox-group"
+            name="bears"
+            options={optionsWithDisabled}
+          />
+        </FormField>
+        <div>
+          <Button type="submit">Submit</Button>
+        </div>
+      </div>
+    </Form>
+  );
+};