feat(v3): Radio, RadioGroup and FieldRadioGroup

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

@@ -0,0 +1,248 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { CheckIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { cn } from '@/lib/tailwind/utils';
+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 { Radio, RadioProps } from '@/components/ui/radio-group';
+
+import { Form, FormField, FormFieldHelper, FormFieldLabel } from '../';
+
+export default {
+  title: 'Form/FieldRadioGroup',
+};
+
+const zFormSchema = () =>
+  z.object({
+    bear: zu.string.nonEmpty(z.string(), {
+      required_error: 'Please select your favorite bearstronaut',
+    }),
+  });
+
+const formOptions = {
+  mode: 'onBlur',
+  resolver: zodResolver(zFormSchema()),
+  defaultValues: {
+    bear: '',
+  },
+} 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="radio-group"
+            control={form.control}
+            name="bear"
+            options={options}
+          />
+        </FormField>
+        <div>
+          <Button type="submit">Submit</Button>
+        </div>
+      </div>
+    </Form>
+  );
+};
+
+export const DefaultValue = () => {
+  const form = useForm({
+    ...formOptions,
+    defaultValues: {
+      bear: '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="radio-group"
+            name="bear"
+            options={options}
+          />
+        </FormField>
+        <div>
+          <Button type="submit">Submit</Button>
+        </div>
+      </div>
+    </Form>
+  );
+};
+
+export const Disabled = () => {
+  const form = useForm({
+    ...formOptions,
+    defaultValues: {
+      bear: '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="radio-group"
+            name="bear"
+            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="radio-group"
+            name="bear"
+            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="radio-group"
+            name="bear"
+            options={optionsWithDisabled}
+          />
+        </FormField>
+        <div>
+          <Button type="submit">Submit</Button>
+        </div>
+      </div>
+    </Form>
+  );
+};
+
+export const WithCustomRadio = () => {
+  // Let's say we have a custom radio component:
+  // eslint-disable-next-line @eslint-react/no-nested-component-definitions
+  const CardRadio = ({
+    value,
+    id,
+    children,
+    containerProps,
+    ...props
+  }: RadioProps & { containerProps?: React.ComponentProps<'label'> }) => {
+    return (
+      <label
+        className="relative flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-border p-4 transition-colors focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:outline-none hover:bg-muted/50 has-[&[data-checked]]:border-primary/90 has-[&[data-checked]]:bg-primary/5"
+        {...containerProps}
+      >
+        <Radio
+          value={value}
+          id={id}
+          noLabel
+          render={(props, { checked }) => {
+            return (
+              <div
+                {...props}
+                className="flex w-full justify-between outline-none"
+              >
+                <div className="flex flex-col">
+                  <span className="font-medium">{children}</span>
+                </div>
+                <div
+                  className={cn('rounded-full bg-primary p-1 opacity-0', {
+                    'opacity-100': checked,
+                  })}
+                >
+                  <CheckIcon className="h-4 w-4 text-primary-foreground" />
+                </div>
+              </div>
+            );
+          }}
+          {...props}
+        />
+      </label>
+    );
+  };
+
+  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="radio-group"
+            name="bear"
+            options={options}
+            renderOption={({ label, ...props }) => {
+              // We can then customize the render of our field's radios
+              return <CardRadio {...props}>{label}</CardRadio>;
+            }}
+          />
+        </FormField>
+        <div>
+          <Button type="submit">Submit</Button>
+        </div>
+      </div>
+    </Form>
+  );
+};