From f08db156f7f69107e36cdf6286c17fe7ffa70852 Mon Sep 17 00:00:00 2001
From: MiroslavPetrik <miroslavpetrik@outlook.com>
Date: Thu, 18 Jan 2024 16:51:01 +0100
Subject: [PATCH] fix(RadioGroup): support for `initialValue` prop (#92) (#93)

fixes #92
---
 .../radio-group/RadioGroup.stories.tsx        | 19 +++++++++++++-
 .../radio-group/RadioGroup.test.tsx           | 23 +++++++++++++++++
 src/components/radio-group/RadioGroup.tsx     | 25 +++++++++++--------
 3 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/src/components/radio-group/RadioGroup.stories.tsx b/src/components/radio-group/RadioGroup.stories.tsx
index 86bc478..6516e75 100644
--- a/src/components/radio-group/RadioGroup.stories.tsx
+++ b/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("⭐"),
   },
 });
 
diff --git a/src/components/radio-group/RadioGroup.test.tsx b/src/components/radio-group/RadioGroup.test.tsx
index f12a173..4441c89 100644
--- a/src/components/radio-group/RadioGroup.test.tsx
+++ b/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" });
+    });
+  });
 });
diff --git a/src/components/radio-group/RadioGroup.tsx b/src/components/radio-group/RadioGroup.tsx
index 55152ad..77162d6 100644
--- a/src/components/radio-group/RadioGroup.tsx
+++ b/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 });