wip: custom FieldRadioGroup radio render

Author: ntatoud

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

@@ -1,7 +1,9 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 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';
@@ -172,3 +174,55 @@ export const WithDisabledOption = () => {
     </Form>
   );
 };
+
+export const RenderOption = () => {
+  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}
+            renderRadio={(option, { field }) => {
+              const _radioId = `radio-card-${option.value}`;
+
+              return (
+                <label
+                  htmlFor={_radioId}
+                  className={cn(
+                    'relative flex cursor-pointer items-start gap-4 rounded-lg border p-4 transition-colors',
+                    'hover:bg-muted/50',
+                    'focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:outline-none',
+                    option.checked
+                      ? 'border-primary bg-primary/5'
+                      : 'border-border'
+                  )}
+                >
+                  <RadioGroupPrimitive.Item
+                    id={_radioId}
+                    className="sr-only"
+                    value={option.value}
+                    disabled={option.disabled}
+                    onBlur={field.onBlur}
+                  />
+                  <div className="flex flex-col gap-1">
+                    <span className="font-medium">{option.label}</span>
+                  </div>
+                </label>
+              );
+            }}
+          />
+        </FormField>
+        <div>
+          <Button type="submit">Submit</Button>
+        </div>
+      </div>
+    </Form>
+  );
+};

app/components/form/field-radio-group/index.tsx

@@ -1,29 +1,41 @@
+import { ReactNode } from '@tanstack/react-router';
 import { ComponentProps } from 'react';
 import {
   Controller,
+  ControllerProps,
   ControllerRenderProps,
   FieldPath,
   FieldValues,
 } from 'react-hook-form';
+import { isNonNullish } from 'remeda';
 
 import { cn } from '@/lib/tailwind/utils';
+import { getUiState } from '@/lib/ui-state';
 
 import { Radio, RadioGroup } from '@/components/ui/radio-group';
 
 import { useFormField } from '../form-field';
-import { FieldCommonProps } from '../form-field-controller';
+import { FieldProps } from '../form-field-controller';
 import { FormFieldError } from '../form-field-error';
 
+type RadioOptionProps = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+
 export type FieldRadioGroupProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = FieldCommonProps<TFieldValues, TName> & {
+> = FieldProps<TFieldValues, TName> & {
   type: 'radio-group';
-  options: Array<{
-    value: string;
-    label: string;
-    disabled?: boolean;
-  }>;
+  options: Array<RadioOptionProps>;
+  renderRadio?: (
+    radioOptions: RadioOptionProps & { checked: boolean },
+    fieldOptions: Parameters<
+      Pick<ControllerProps<TFieldValues, TName>, 'render'>['render']
+    >[0]
+  ) => ReactNode;
   containerProps?: ComponentProps<'div'>;
 } & RemoveFromType<
     Omit<
@@ -48,52 +60,83 @@ export const FieldRadioGroup = <
     shouldUnregister,
     control,
     containerProps,
+    renderRadio,
     ...rest
   } = props;
 
   const ctx = useFormField();
 
+  const ui = getUiState((set) => {
+    if (isNonNullish(renderRadio)) {
+      return set('render-radio', { renderRadio });
+    }
+
+    return set('default');
+  });
+
   return (
     <Controller
       name={name}
       control={control}
       disabled={disabled}
       defaultValue={defaultValue}
       shouldUnregister={shouldUnregister}
-      render={({ field: { onChange, onBlur, ...field }, fieldState }) => (
-        <div
-          {...containerProps}
-          className={cn(
-            'flex flex-1 flex-col gap-1',
-            containerProps?.className
-          )}
-        >
-          <RadioGroup
-            id={ctx.id}
-            aria-invalid={fieldState.error ? true : undefined}
-            aria-describedby={
-              !fieldState.error
-                ? `${ctx.descriptionId}`
-                : `${ctx.descriptionId} ${ctx.errorId}`
-            }
-            {...rest}
-            onValueChange={onChange}
-            {...field}
+      render={(controllerRenderOptions) => {
+        const {
+          field: { onChange, onBlur, ...field },
+          fieldState,
+        } = controllerRenderOptions;
+
+        return (
+          <div
+            {...containerProps}
+            className={cn(
+              'flex flex-1 flex-col gap-1',
+              containerProps?.className
+            )}
           >
-            {options.map((option) => (
-              <Radio
-                key={`${ctx.id}-${option.value}`}
-                value={option.value}
-                disabled={option.disabled}
-                onBlur={onBlur}
-              >
-                {option.label}
-              </Radio>
-            ))}
-          </RadioGroup>
-          <FormFieldError />
-        </div>
-      )}
+            <RadioGroup
+              id={ctx.id}
+              aria-invalid={fieldState.error ? true : undefined}
+              aria-describedby={
+                !fieldState.error
+                  ? `${ctx.descriptionId}`
+                  : `${ctx.descriptionId} ${ctx.errorId}`
+              }
+              {...rest}
+              onValueChange={onChange}
+              {...field}
+            >
+              {ui
+                .match('render-radio', ({ renderRadio }) =>
+                  options.map((option) =>
+                    renderRadio(
+                      {
+                        ...option,
+                        checked: option.value === field.value,
+                      },
+                      controllerRenderOptions
+                    )
+                  )
+                )
+                .match('default', () =>
+                  options.map((option) => (
+                    <Radio
+                      key={`${ctx.id}-${option.value}`}
+                      value={option.value}
+                      disabled={option.disabled}
+                      onBlur={onBlur}
+                    >
+                      {option.label}
+                    </Radio>
+                  ))
+                )
+                .exhaustive()}
+            </RadioGroup>
+            <FormFieldError />
+          </div>
+        );
+      }}
     />
   );
 };