♻️ - refactor: adjust the types returned by radio input an inputs wit…

…h multiple items with various types
maykinmedia · Jul 2, 2024 · cd2d329 · cd2d329
1 parent 46d8cd4
commit cd2d329
Show file tree

Hide file tree

Showing 7 changed files with 135 additions and 118 deletions.
diff --git a/src/components/form/form/form.stories.tsx b/src/components/form/form/form.stories.tsx
@@ -26,8 +26,14 @@ export const FormComponent: Story = {
     fields: [
       { label: "First name", name: "first_name", required: true },
       { label: "Last name", name: "last_name", required: true },
+      { label: "Age", name: "age", type: "number", required: true },
       { label: "Address", name: "address", required: true },
-      { label: "Address (addition)", name: "address", required: true },
+      {
+        label: "Address (addition)",
+        name: "address",
+        type: "number",
+        required: true,
+      },
       { label: "Date of birth", name: "date_of_birth", type: "date" },
       {
         label: "Select school year",
@@ -62,6 +68,12 @@ export const FormComponent: Story = {
           { label: "No", value: "no" },
         ],
       },
+      {
+        label: "I have read and accept the terms and conditions",
+        name: "accept_tos",
+        type: "checkbox",
+        required: true,
+      },
     ],
     validate: validateForm,
     validateOnChange: true,
@@ -70,19 +82,28 @@ export const FormComponent: Story = {
     const canvas = within(canvasElement);
     const firstName = canvas.getByLabelText("First name");
     const lastName = canvas.getByLabelText("Last name");
+    const age = canvas.getByLabelText("Age");
     const schoolYear = canvas.getByLabelText("Select school year");
     const address = canvas.getByLabelText("Address");
     const address_addition = canvas.getByLabelText("Address (addition)");
     const dateOfBirth = canvas.getByLabelText("Date of birth");
     const english = canvas.getByLabelText("English");
     const math = canvas.getByLabelText("Math");
+    const yes = canvas.getByLabelText("Yes");
+    const no = canvas.getByLabelText("No");
+    const acceptTos = canvas.getByLabelText(
+      "I have read and accept the terms and conditions",
+    );
 
     await userEvent.clear(firstName);
     await userEvent.type(firstName, "John", { delay: 10 });
 
     await userEvent.clear(lastName);
     await userEvent.type(lastName, "Doe", { delay: 10 });
 
+    await userEvent.clear(age);
+    await userEvent.type(age, "33", { delay: 10 });
+
     await userEvent.click(schoolYear, { delay: 10 });
     const junior = await canvas.findByText("Junior");
     await userEvent.click(junior, { delay: 10 });
@@ -97,86 +118,44 @@ export const FormComponent: Story = {
     await userEvent.type(dateOfBirth, "2023-09-15", { delay: 10 });
     await userEvent.type(dateOfBirth, "{enter}");
 
+    await userEvent.click(schoolYear);
+    const senior = await canvas.findByText("Senior");
+    await userEvent.click(senior);
+
     await userEvent.click(english, { delay: 10 });
     await userEvent.click(math, { delay: 10 });
+
+    await userEvent.click(yes, { delay: 10 });
+    await userEvent.click(no, { delay: 10 });
+
+    await userEvent.click(acceptTos, { delay: 10 });
   },
 };
 
 export const TypedResults: Story = {
+  ...FormComponent,
   args: {
-    debug: true,
-    fields: [
-      { label: "Name", name: "name" },
-      { label: "Age", name: "age", type: "number" },
-      {
-        label: "Select school year",
-        name: "school_year",
-        options: [
-          { label: "Freshman" },
-          { label: "Sophomore" },
-          { label: "Junior" },
-          { label: "Senior" },
-          { label: "Graduate" },
-        ],
-      },
-      {
-        label: "Select courses",
-        name: "courses",
-        type: "checkbox",
-        required: true,
-        options: [
-          { label: "English", value: "english" },
-          { label: "Math", value: "math" },
-          { label: "Science", value: "science" },
-        ],
-      },
-      {
-        label: "Receive newsletter",
-        name: "subscribe_newsletter",
-        type: "radio",
-        required: true,
-        options: [
-          { label: "Yes", value: "yes" },
-          { label: "No", value: "no" },
-        ],
-      },
-    ],
+    ...FormComponent.args,
     useTypedResults: true,
-    validate: validateForm,
-    validateOnChange: true,
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const name = canvas.getByLabelText("Name");
-    const age = canvas.getByLabelText("Age");
-    const schoolYear = canvas.getByLabelText("Select school year");
-    const english = canvas.getByLabelText("English");
-    const math = canvas.getByLabelText("Math");
-    const newsletter = canvas.getByLabelText("Receive newsletter");
-
-    await userEvent.clear(name);
-    await userEvent.type(name, "John", { delay: 10 });
-
-    await userEvent.clear(age);
-    await userEvent.type(age, "33", { delay: 10 });
-
-    await userEvent.click(schoolYear, { delay: 10 });
-    const junior = await canvas.findByText("Junior");
-    await userEvent.click(junior, { delay: 10 });
-
-    await userEvent.click(english, { delay: 10 });
-    await userEvent.click(math, { delay: 10 });
-    await userEvent.click(newsletter, { delay: 10 });
   },
 };
 
 export const UsageWithFormik: Story = {
   ...FormComponent,
   args: {
-    ...FormComponent.args,
+    debug: true,
     fields: [
       { label: "First name", name: "first_name", required: true },
       { label: "Last name", name: "last_name", required: true },
+      { label: "Age", name: "age", type: "number", required: true },
+      { label: "Address", name: "address[0]", required: true },
+      {
+        label: "Address (addition)",
+        name: "address[1]",
+        type: "number",
+        required: true,
+      },
+      { label: "Date of birth", name: "date_of_birth", type: "date" },
       {
         label: "Select school year",
         name: "school_year",
@@ -189,10 +168,6 @@ export const UsageWithFormik: Story = {
           { label: "Graduate" },
         ],
       },
-      { label: "Address", name: "address[0]", required: true },
-      { label: "Address (addition)", name: "address[1]", required: true },
-      { label: "Date of birth", name: "date_of_birth", type: "date" },
-
       {
         label: "Select courses",
         name: "courses",
@@ -214,7 +189,15 @@ export const UsageWithFormik: Story = {
           { label: "No", value: "no" },
         ],
       },
+      {
+        label: "I have read and accept the terms and conditions",
+        name: "accept_tos",
+        type: "checkbox",
+        required: true,
+      },
     ],
+    validate: validateForm,
+    validateOnChange: true,
   },
   render: (args) => {
     return (

diff --git a/src/components/form/input/input.tsx b/src/components/form/input/input.tsx
@@ -75,9 +75,14 @@ export const Input: React.FC<InputProps> = ({
   // This conditionalizes the presence of the "value" props.
   const valueProps =
     type.toLowerCase() === "checkbox" || type.toLowerCase() === "radio"
-      ? { checked: props.checked, value: valueState }
-      : { value: valueState };
-
+      ? typeof value === "undefined"
+        ? {}
+        : {
+            value: value,
+          }
+      : {
+          value: valueState,
+        };
   const input = (
     <input
       ref={inputRef}

diff --git a/src/components/form/radio/radio.stories.tsx b/src/components/form/radio/radio.stories.tsx
@@ -27,7 +27,7 @@ export const RadioComponent: Story = {
   play: async ({ canvasElement, args }) => {
     const canvas = within(canvasElement);
     const pre = await canvas.findByRole("log");
-    const input = canvas.getByLabelText(args.children);
+    const input = canvas.getByLabelText(args.children as string);
 
     // On
     await userEvent.click(input);

diff --git a/src/components/form/radio/radio.tsx b/src/components/form/radio/radio.tsx
@@ -16,17 +16,13 @@ export type RadioProps = InputProps & {
  * @param props
  * @constructor
  */
-export const Radio: React.FC<RadioProps> = ({
-  children,
-  value,
-  checked,
-  ...props
-}) => {
+export const Radio: React.FC<RadioProps> = ({ children, value, ...props }) => {
   const id = useId();
   const _id = props.id || id;
+  const _props = value ? { ...props, value } : props;
   return (
     <div className="mykn-radio">
-      <Input id={_id} {...props} type="radio" value={value} checked={checked} />
+      <Input id={_id} {..._props} type="radio" />
       {children && (
         <Label bold={false} htmlFor={_id}>
           {children}

diff --git a/src/components/form/radio/radiogroup.stories.tsx b/src/components/form/radio/radiogroup.stories.tsx
@@ -42,7 +42,7 @@ export const RadioGroupComponent: Story = {
 
     data = JSON.parse(pre?.textContent || "{}");
 
-    await expect(data.school_year[0]).toEqual("Graduate");
+    await expect(data.school_year).toEqual("Graduate");
 
     await inputs
       .filter((_, i) => i % 2 !== 0)
@@ -53,6 +53,6 @@ export const RadioGroupComponent: Story = {
       );
 
     data = JSON.parse(pre?.textContent || "{}");
-    await expect(data.school_year[0]).toEqual("Senior");
+    await expect(data.school_year).toEqual("Senior");
   },
 };
diff --git a/src/components/form/radio/radiogroup.tsx b/src/components/form/radio/radiogroup.tsx
@@ -17,19 +17,19 @@ export const RadioGroup: React.FC<RadioGroupProps> = ({
 }) => {
   const reactId = useId();
   const _id = id || reactId;
-  const [selectedValue, setSelectedValue] = useState<
+  const [selectedValueState, setSelectedValueState] = useState<
     string | number | undefined
-  >(options.find((option) => option.selected)?.value);
+  >();
 
   useEffect(() => {
     const initialSelected = options.find((option) => option.selected)?.value;
     if (initialSelected !== undefined) {
-      setSelectedValue(initialSelected);
+      setSelectedValueState(initialSelected);
     }
   }, [options]);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSelectedValue(event.target.value);
+    setSelectedValueState(event.target.value);
     onChange?.(event);
   };
 
@@ -46,7 +46,7 @@ export const RadioGroup: React.FC<RadioGroupProps> = ({
             name={name}
             value={optionValue}
             variant={variant}
-            checked={selectedValue === optionValue}
+            checked={selectedValueState === optionValue}
             onChange={handleChange}
           >
             {option.label}