fix(RadioGroup): support for initialValue prop (#92) (#93)

fixes #92

src/components/radio-group/RadioGroup.stories.tsx

@@ -82,7 +82,24 @@ export const RequiredNumber = radioGroupStory({
     options: ratingOptions,
     getValue: (value) => value,
     getLabel: (value) => Array(value + 1).join("⭐"),
-    // label="How do you like the RadioGroup component?"
+  },
+});
+
+export const InitializedNumber = radioGroupStory({
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The `initialValue` initializes the field, accepting values returned from the `getValue` prop.",
+      },
+    },
+  },
+  args: {
+    field: numberField(),
+    initialValue: 4,
+    options: ratingOptions,
+    getValue: (value) => value,
+    getLabel: (value) => Array(value + 1).join("⭐"),
   },
 });
 

src/components/radio-group/RadioGroup.test.tsx

@@ -82,4 +82,27 @@ describe("<RadioGroup />", () => {
       expect(onSubmit).toHaveBeenCalledWith({ field: "some" });
     });
   });
+
+  describe("initialValue prop", () => {
+    it("sets the field value", async () => {
+      const props = {
+        field: stringField(),
+        options: ["none", "some", "all"],
+        getLabel: (val: string) => val,
+        getValue: (val: string) => val,
+      };
+      const form = formAtom({ field: props.field });
+      const { result } = renderHook(() => useFormSubmit(form));
+      render(<RadioGroup {...props} initialValue="some" />);
+
+      expect(screen.getByLabelText("some")).toBeChecked();
+
+      const onSubmit = vi.fn();
+      await act(async () => {
+        result.current(onSubmit)();
+      });
+
+      expect(onSubmit).toHaveBeenCalledWith({ field: "some" });
+    });
+  });
 });

src/components/radio-group/RadioGroup.tsx

@@ -1,32 +1,35 @@
 import {
   SelectField,
+  SelectFieldProps,
   UseOptionsProps,
-  UseSelectFieldProps,
   useOptions,
   useSelectFieldProps,
 } from "../../hooks";
 
-export type RadioGroupProps<Option, Field extends SelectField> = Omit<
-  UseOptionsProps<Option>,
-  "field"
-> &
-  UseSelectFieldProps<Option, Field>;
+export type RadioGroupProps<
+  Option,
+  Field extends SelectField,
+> = SelectFieldProps<Option, Field> & UseOptionsProps<Option>;
 
 export const RadioGroup = <Option, Field extends SelectField>({
   field,
   options,
   getValue,
   getLabel,
+  initialValue,
 }: RadioGroupProps<Option, Field>) => {
   /**
    * ref for multiple inputs not needed.
    */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { ref, ...props } = useSelectFieldProps({
-    field,
-    options,
-    getValue,
-  });
+  const { ref, ...props } = useSelectFieldProps(
+    {
+      field,
+      options,
+      getValue,
+    },
+    { initialValue },
+  );
 
   const { renderOptions } = useOptions({ field, options, getLabel });