From ac288201774c03cb6b143270ac56865d6684fc4b Mon Sep 17 00:00:00 2001
From: Dominika Hustinova <domi.hustinova@gmail.com>
Date: Mon, 12 Aug 2024 13:40:36 +0200
Subject: [PATCH] chore(InputGroup): migrate stories from CSF2 to CSF3

---
 .../src/InputGroup/InputGroup.stories.tsx     | 402 ++++++++----------
 1 file changed, 177 insertions(+), 225 deletions(-)

diff --git a/packages/orbit-components/src/InputGroup/InputGroup.stories.tsx b/packages/orbit-components/src/InputGroup/InputGroup.stories.tsx
index 0100d8da0c..60f6fa2074 100644
--- a/packages/orbit-components/src/InputGroup/InputGroup.stories.tsx
+++ b/packages/orbit-components/src/InputGroup/InputGroup.stories.tsx
@@ -1,20 +1,60 @@
 import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 
 import Stack from "../Stack";
 import InputField from "../InputField";
 import Select from "../Select";
-import { SIZE_OPTIONS } from "./consts";
 import CountryFlag from "../CountryFlag";
 import RenderInRtl from "../utils/rtl/RenderInRtl";
 import { SPACINGS_AFTER } from "../common/consts";
 
 import InputGroup from ".";
 
-export default {
+type InputGroupPropsAndCustomArgs = React.ComponentProps<typeof InputGroup> & {
+  customValueText?: React.ReactNode;
+  inputValue?: string | number;
+  placeholder?: string;
+  selectValue?: string | number;
+  errorGroup?: string;
+  helpGroup?: string;
+  errorSingleField?: string;
+  helpSingleField?: string;
+};
+
+const meta: Meta<InputGroupPropsAndCustomArgs> = {
   title: "InputGroup",
+  component: InputGroup,
+
+  parameters: {
+    controls: {
+      exclude: ["onChange", "onFocus", "onBlur", "onBlurGroup", "size"],
+    },
+  },
+
+  args: {
+    error: "",
+    help: "",
+    helpClosable: true,
+    onChange: action("onChange"),
+    onFocus: action("onFocus"),
+    onBlur: action("onBlur"),
+    onBlurGroup: action("onBlurGroup"),
+  },
+
+  argTypes: {
+    spaceAfter: {
+      options: Object.values(SPACINGS_AFTER),
+      control: {
+        type: "select",
+      },
+    },
+  },
 };
 
+export default meta;
+type Story = StoryObj<InputGroupPropsAndCustomArgs>;
+
 const selectOptionsMonths = [
   { value: "January", label: "January" },
   { value: "February", label: "February" },
@@ -30,16 +70,9 @@ const selectOptionsMonths = [
   { value: "December", label: "December" },
 ];
 
-export const DateOfBirth = ({ label, flex, error, help, selectValue }) => {
-  return (
-    <InputGroup
-      label={label}
-      flex={flex}
-      onChange={action("onChange")}
-      onFocus={action("onFocus")}
-      onBlur={action("onBlur")}
-      onBlurGroup={action("onBlurGroup")}
-    >
+export const DateOfBirth: Story = {
+  render: ({ error, help, selectValue, ...args }) => (
+    <InputGroup {...args}>
       <InputField
         placeholder="DD"
         error={error}
@@ -51,30 +84,20 @@ export const DateOfBirth = ({ label, flex, error, help, selectValue }) => {
       <Select options={selectOptionsMonths} value={selectValue} placeholder="Month" />
       <InputField placeholder="YYYY" />
     </InputGroup>
-  );
-};
-
-DateOfBirth.story = {
-  name: "Date of birth",
+  ),
 
-  parameters: {
-    info: "Some description about this type of InputGroup in general.",
+  args: {
+    label: "Date of birth",
+    flex: ["0 0 60px", "1 1 100%", "0 0 90px"],
+    selectValue: selectOptionsMonths[0].value,
   },
-};
-
-DateOfBirth.args = {
-  label: "Date of birth",
-  flex: ["0 0 60px", "1 1 100%", "0 0 90px"],
-  error: "",
-  help: "",
-  selectValue: selectOptionsMonths[0].value,
-};
 
-DateOfBirth.argTypes = {
-  selectValue: {
-    options: selectOptionsMonths.map(opt => opt.value),
-    control: {
-      type: "select",
+  argTypes: {
+    selectValue: {
+      options: selectOptionsMonths.map(opt => opt.value),
+      control: {
+        type: "select",
+      },
     },
   },
 };
@@ -85,22 +108,9 @@ const selectOptionsPhoneNumber = [
   { value: 2, label: "United States (+1)" },
 ];
 
-export const PhoneNumber = ({
-  flex,
-  error,
-  help,
-  selectValue,
-  customValueText,
-  placeholder,
-  inputValue,
-}) => {
-  return (
-    <InputGroup
-      flex={flex}
-      onChange={action("onChange")}
-      onFocus={action("onFocus")}
-      onBlur={action("onBlur")}
-    >
+export const PhoneNumber: Story = {
+  render: ({ error, help, selectValue, customValueText, placeholder, inputValue, ...args }) => (
+    <InputGroup {...args}>
       <Select
         options={selectOptionsPhoneNumber}
         value={selectValue}
@@ -111,32 +121,22 @@ export const PhoneNumber = ({
       />
       <InputField placeholder={placeholder} maxLength={11} value={inputValue} />
     </InputGroup>
-  );
-};
-
-PhoneNumber.story = {
-  name: "Phone number",
-
-  parameters: {
-    info: "Some description about this type of InputGroup in general.",
+  ),
+
+  args: {
+    flex: ["0 0 110px", "1 1 100%"],
+    selectValue: selectOptionsPhoneNumber[0].value,
+    customValueText: "+420",
+    placeholder: "e.g. 123 456 789",
+    inputValue: "",
   },
-};
 
-PhoneNumber.args = {
-  flex: ["0 0 110px", "1 1 100%"],
-  error: "",
-  help: "",
-  selectValue: selectOptionsPhoneNumber[0].value,
-  customValueText: "+420",
-  placeholder: "e.g. 123 456 789",
-  inputValue: "",
-};
-
-PhoneNumber.argTypes = {
-  selectValue: {
-    options: selectOptionsPhoneNumber.map(opt => opt.value),
-    control: {
-      type: "select",
+  argTypes: {
+    selectValue: {
+      options: selectOptionsPhoneNumber.map(opt => opt.value),
+      control: {
+        type: "select",
+      },
     },
   },
 };
@@ -155,53 +155,41 @@ const selectOptionsError = [
   { value: "November", label: "November" },
   { value: "December", label: "December" },
 ];
-export const Error = ({ label, flex, error, help, selectValue }) => {
-  return (
-    <InputGroup
-      label={label}
-      flex={flex}
-      onChange={action("onChange")}
-      onFocus={action("onFocus")}
-      onBlur={action("onBlur")}
-    >
+
+export const Error: Story = {
+  render: ({ error, help, selectValue, ...args }) => (
+    <InputGroup {...args}>
       <InputField placeholder="DD" error={error} help={help} />
       <Select
         options={selectOptionsError}
         value={selectValue}
         placeholder="Month"
-        error="Something went wrong on month field"
+        error={error}
         help={help}
       />
-      <InputField placeholder="YYYY" error="Something went wrong on year field" help={help} />
+      <InputField placeholder="YYYY" error={error} help={help} />
     </InputGroup>
-  );
-};
+  ),
 
-Error.args = {
-  label: "Label",
-  flex: ["0 0 60px", "1 1 100%", "0 0 90px"],
-  error: "Something went wrong on day field",
-  help: "",
-  selectValue: selectOptionsError[0].value,
-};
+  args: {
+    label: "Label",
+    flex: ["0 0 60px", "1 1 100%", "0 0 90px"],
+    error: "Something went wrong on day field",
+    selectValue: selectOptionsError[0].value,
+  },
 
-Error.argTypes = {
-  selectValue: {
-    options: selectOptionsError.map(opt => opt.value),
-    control: {
-      type: "select",
+  argTypes: {
+    selectValue: {
+      options: selectOptionsError.map(opt => opt.value),
+      control: {
+        type: "select",
+      },
     },
   },
 };
 
-export const ValidationApproaches = ({
-  inputValue,
-  errorGroup,
-  helpGroup,
-  errorSingleField,
-  helpSingleField,
-}) => {
-  return (
+export const ValidationApproaches: Story = {
+  render: ({ inputValue, errorGroup, helpGroup, errorSingleField, helpSingleField }) => (
     <Stack direction="column">
       <InputGroup
         label="Events and states on group"
@@ -215,7 +203,7 @@ export const ValidationApproaches = ({
         <InputField placeholder="b" maxLength={11} value={inputValue} />
       </InputGroup>
 
-      <InputGroup label="Events andd states on children" error={errorGroup}>
+      <InputGroup label="Events and states on children" error={errorGroup}>
         <InputField
           placeholder="c"
           maxLength={11}
@@ -238,27 +226,35 @@ export const ValidationApproaches = ({
         />
       </InputGroup>
     </Stack>
-  );
-};
-
-ValidationApproaches.story = {
-  name: "Validation approches",
+  ),
 
   parameters: {
-    info: "Some description about this type of InputGroup in general.",
+    controls: {
+      exclude: [
+        "onChange",
+        "onFocus",
+        "onBlur",
+        "onBlurGroup",
+        "error",
+        "help",
+        "helpClosable",
+        "size",
+        "spaceAfter",
+      ],
+    },
   },
-};
 
-ValidationApproaches.args = {
-  inputValue: "",
-  errorGroup: "Something went wrong on day field",
-  helpGroup: "",
-  errorSingleField: "Something went wrong on day field",
-  helpSingleField: "",
+  args: {
+    inputValue: "",
+    errorGroup: "Something went wrong on day field",
+    helpGroup: "",
+    errorSingleField: "Something went wrong on day field",
+    helpSingleField: "",
+  },
 };
 
-export const OnChangeBehavior = ({ inputValue }) => {
-  return (
+export const OnChangeBehavior: Story = {
+  render: ({ inputValue }) => (
     <Stack direction="column">
       <InputGroup label="Change in group" onChange={action("onChange a+b")}>
         <InputField placeholder="a" maxLength={11} value={inputValue} />
@@ -280,32 +276,41 @@ export const OnChangeBehavior = ({ inputValue }) => {
         />
       </InputGroup>
     </Stack>
-  );
-};
-
-OnChangeBehavior.story = {
-  name: "onChange behaviour",
+  ),
 
   parameters: {
-    info: "Some description about this type of InputGroup in general.",
+    controls: {
+      exclude: [
+        "onChange",
+        "onFocus",
+        "onBlur",
+        "onBlurGroup",
+        "error",
+        "help",
+        "helpClosable",
+        "size",
+        "spaceAfter",
+      ],
+    },
   },
-};
 
-OnChangeBehavior.args = {
-  inputValue: "",
+  args: {
+    inputValue: "",
+  },
 };
 
-export const Disabled = () => {
-  return (
-    <InputGroup disabled label="Disabled">
+export const Disabled: Story = {
+  render: args => (
+    <InputGroup {...args}>
       <InputField placeholder="a" maxLength={11} />
       <InputField placeholder="b" maxLength={11} />
     </InputGroup>
-  );
-};
+  ),
 
-Disabled.story = {
-  name: "Disabled",
+  args: {
+    label: "Disabled",
+    disabled: true,
+  },
 };
 
 const selectOptionsPlayground = [
@@ -313,116 +318,63 @@ const selectOptionsPlayground = [
   { value: 2, label: "Second item" },
 ];
 
-export const Playground = ({
-  label,
-  flex,
-  size,
-  error,
-  help,
-  selectValue,
-  placeholder,
-  inputValue,
-  dataTest,
-  spaceAfter,
-}) => {
-  return (
-    <InputGroup
-      label={label}
-      flex={flex}
-      size={size}
-      onChange={action("onChange")}
-      onFocus={action("onFocus")}
-      onBlur={action("onBlur")}
-      dataTest={dataTest}
-      spaceAfter={spaceAfter}
-    >
+export const Playground: Story = {
+  render: ({ error, help, selectValue, placeholder, inputValue, ...args }) => (
+    <InputGroup {...args}>
       <Select options={selectOptionsPlayground} value={selectValue} error={error} help={help} />
       <InputField placeholder={placeholder} value={inputValue} />
       <Select options={selectOptionsPlayground} value={selectValue} />
       <InputField placeholder={placeholder} value={inputValue} />
     </InputGroup>
-  );
-};
-
-Playground.story = {
-  parameters: {
-    info: "Some description about this type of InputGroup in general.",
+  ),
+
+  args: {
+    label: "Phone number",
+    flex: ["1 0 200px", "1 1 100%", "1 0 150px", "0 1 50%"],
+    selectValue: selectOptionsPlayground[0].value,
+    placeholder: "Placeholder",
+    inputValue: "",
+    spaceAfter: SPACINGS_AFTER.MEDIUM,
+    disabled: false,
   },
-};
-
-Playground.args = {
-  label: "Phone number",
-  flex: ["1 0 200px", "1 1 100%", "1 0 150px", "0 1 50%"],
-  size: SIZE_OPTIONS.NORMAL,
-  error: "",
-  help: "",
-  selectValue: selectOptionsPlayground[0].value,
-  placeholder: "Placeholder",
-  inputValue: "",
-  dataTest: "test",
-  spaceAfter: SPACINGS_AFTER.MEDIUM,
-};
 
-Playground.argTypes = {
-  size: {
-    options: Object.values(SIZE_OPTIONS),
-    control: {
-      type: "select",
-    },
-  },
-  selectValue: {
-    options: selectOptionsPlayground.map(opt => opt.value),
-    control: {
-      type: "select",
-    },
-  },
-  spaceAfter: {
-    options: Object.values(SPACINGS_AFTER),
-    control: {
-      type: "select",
+  argTypes: {
+    selectValue: {
+      options: selectOptionsPlayground.map(opt => opt.value),
+      control: {
+        type: "select",
+      },
     },
   },
 };
 
-export const Rtl = ({ flex, selectValue, error, help, label }) => {
-  return (
+export const Rtl: Story = {
+  render: ({ selectValue, error, help, ...args }) => (
     <RenderInRtl>
-      <InputGroup
-        flex={flex}
-        onChange={action("onChange")}
-        onFocus={action("onFocus")}
-        onBlur={action("onBlur")}
-        label={label}
-      >
+      <InputGroup {...args}>
         <InputField placeholder="DD" help={help} error={error} />
         <Select options={selectOptionsMonths} value={selectValue} placeholder="Month" />
         <InputField placeholder="YYYY" />
       </InputGroup>
     </RenderInRtl>
-  );
-};
-
-Rtl.story = {
-  name: "RTL",
+  ),
 
   parameters: {
     info: "This is a preview of this component in RTL setup.",
   },
-};
 
-Rtl.args = {
-  flex: ["0 0 60px", "1 1 100%", "0 0 90px"],
-  selectValue: selectOptionsMonths[0].value,
-  error: "",
-  help: "",
-  label: "Phone number",
-};
+  args: {
+    label: "Phone number",
+    flex: ["0 0 60px", "1 1 100%", "0 0 90px"],
+    selectValue: selectOptionsMonths[0].value,
+  },
 
-Rtl.argTypes = {
-  selectValue: {
-    options: selectOptionsMonths.map(opt => opt.value),
-    control: {
-      type: "select",
+  argTypes: {
+    selectValue: {
+      options: selectOptionsMonths.map(opt => opt.value),
+      control: {
+        type: "select",
+      },
     },
   },
 };