feat: RadioGroup, Radio and FieldRadioGroup

Author: ntatoud

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

@@ -0,0 +1,98 @@
+import { ComponentProps } from 'react';
+import {
+  Controller,
+  ControllerRenderProps,
+  FieldPath,
+  FieldValues,
+} from 'react-hook-form';
+
+import { cn } from '@/lib/tailwind/utils';
+
+import { Radio, RadioGroup } from '@/components/ui/radio-group';
+
+import { useFormField } from '../form-field';
+import { FieldCommonProps } from '../form-field-controller';
+import { FormFieldError } from '../form-field-error';
+
+export type FieldRadioGroupProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = FieldCommonProps<TFieldValues, TName> & {
+  type: 'radio-group';
+  options: Array<{
+    value: string;
+    label: string;
+    disabled?: boolean;
+  }>;
+  containerProps?: ComponentProps<'div'>;
+} & RemoveFromType<
+    Omit<
+      ComponentProps<typeof RadioGroup>,
+      'id' | 'aria-invalid' | 'aria-describedby'
+    >,
+    ControllerRenderProps
+  >;
+
+export const FieldRadioGroup = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(
+  props: FieldRadioGroupProps<TFieldValues, TName>
+) => {
+  const {
+    name,
+    type,
+    options,
+    disabled,
+    defaultValue,
+    shouldUnregister,
+    control,
+    containerProps,
+    ...rest
+  } = props;
+
+  const ctx = useFormField();
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      disabled={disabled}
+      defaultValue={defaultValue}
+      shouldUnregister={shouldUnregister}
+      render={({ field: { onChange, ...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}
+          >
+            {options.map((option) => (
+              <Radio
+                key={option.value}
+                value={option.value}
+                disabled={option.disabled}
+              >
+                {option.label}
+              </Radio>
+            ))}
+          </RadioGroup>
+          <FormFieldError />
+        </div>
+      )}
+    />
+  );
+};

app/components/form/form-field-controller.tsx

@@ -10,6 +10,7 @@ import { FieldNumber, FieldNumberProps } from '@/components/form/field-number';
 
 import { FieldDate, FieldDateProps } from './field-date';
 import { FieldOtp, FieldOtpProps } from './field-otp';
+import { FieldRadioGroup, FieldRadioGroupProps } from './field-radio-group';
 import { FieldSelect, FieldSelectProps } from './field-select';
 import { FieldText, FieldTextProps } from './field-text';
 import { useFormField } from './form-field';
@@ -47,7 +48,8 @@ export type FormFieldControllerProps<
   | FieldSelectProps<TFieldValues, TName>
   | FieldDateProps<TFieldValues, TName>
   | FieldTextProps<TFieldValues, TName>
-  | FieldOtpProps<TFieldValues, TName>;
+  | FieldOtpProps<TFieldValues, TName>
+  | FieldRadioGroupProps<TFieldValues, TName>;
 
 export const FormFieldController = <
   TFieldValues extends FieldValues = FieldValues,
@@ -83,6 +85,9 @@ export const FormFieldController = <
 
       case 'number':
         return <FieldNumber {...props} />;
+
+      case 'radio-group':
+        return <FieldRadioGroup {...props} />;
       // -- ADD NEW FIELD COMPONENT HERE --
     }
   };

app/components/ui/radio-group.tsx

@@ -50,7 +50,7 @@ function Radio({
         htmlFor={value}
         {...labelProps}
         className={cn(
-          'cursor-pointer peer-disabled:cursor-not-allowed',
+          'cursor-pointer text-xs peer-disabled:cursor-not-allowed',
           labelProps?.className
         )}
       >
@@ -60,3 +60,4 @@ function Radio({
   );
 }
 export { Radio, RadioGroup };
+export type { RadioGroupProps, RadioProps };