feat(storybook):Upgrade from CSF 2 to CSF 3 and Enhance Story Using I…

…mproved Selectors (#2756)(#2784) Fix #2756
SwissDataScienceCenter · Sep 21, 2023 · d2b4a9d · d2b4a9d
1 parent 2d4200e
commit d2b4a9d
Show file tree

Hide file tree

Showing 16 changed files with 597 additions and 384 deletions.
diff --git a/client/src/components/authorFilter/AuthorFilter.stories.tsx b/client/src/components/authorFilter/AuthorFilter.stories.tsx
@@ -17,23 +17,29 @@
  */
 
 // Story type is deprecated but at the moment we can use this type
-import { StoryFn as Story } from "@storybook/react";
-import { AuthorFilter, AuthorFilterProps } from "./AuthorFilter";
+import { Meta, StoryObj } from "@storybook/react";
+import { AuthorFilter } from "./AuthorFilter";
 
-export default {
+const meta: Meta<typeof AuthorFilter> = {
   title: "components/Search/AuthorFilter",
   component: AuthorFilter,
   argTypes: {
     value: {
       options: ["user", "all"],
       control: { type: "radio" },
     },
+    handler: {
+      table: {
+        disable: true,
+      },
+    },
   },
 };
+export default meta;
+type Story = StoryObj<typeof AuthorFilter>;
 
-const Template: Story<AuthorFilterProps> = (args) => <AuthorFilter {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  value: "user",
+export const Default: Story = {
+  args: {
+    value: "all",
+  },
 };
diff --git a/client/src/components/buttons/ButtonWithMenu.stories.tsx b/client/src/components/buttons/ButtonWithMenu.stories.tsx
@@ -26,16 +26,24 @@ import { Button } from "../../utils/ts-wrappers";
 export default {
   component: ButtonWithMenu,
   title: "components/Buttons/ButtonWithMenu",
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Button with a menu, often referred to as a `split button` or `dropdown button`, use to provide users with multiple related actions or options associated with a primary action.",
+      },
+    },
+  },
 };
 type Story = StoryObj<typeof ButtonWithMenu>;
 
-const defaultAction = <Button key="button-main-primary">Main Action</Button>;
+const defaultAction = <Button key="button-main-primary">Star Server</Button>;
 const options = [
   <DropdownItem key="option-a" data-cy="option-a">
-    Option A
+    Start with options
   </DropdownItem>,
   <DropdownItem key="option-b" data-cy="option-b">
-    Option B
+    Start Default
   </DropdownItem>,
 ];
 export const Primary: Story = {
@@ -44,6 +52,7 @@ export const Primary: Story = {
     default: defaultAction,
     isPrincipal: true,
     color: "rk-green",
+    disabled: false,
   },
   argTypes: {
     children: {
@@ -104,7 +113,7 @@ export const Primary: Story = {
 
 const defaultActionSecondary = (
   <Button key="button-a" className="btn-outline-rk-green">
-    Main Action
+    Start Server
   </Button>
 );
 
@@ -114,6 +123,7 @@ export const Secondary: Story = {
     default: defaultActionSecondary,
     isPrincipal: false,
     color: "rk-green",
+    disabled: false,
   },
   parameters: {
     docs: {

diff --git a/client/src/components/buttons/RoundButtonGroup.stories.tsx b/client/src/components/buttons/RoundButtonGroup.stories.tsx
@@ -17,7 +17,7 @@
  */
 import { Button } from "../../utils/ts-wrappers";
 import { RoundButtonGroup } from "./Button";
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof Button> = {
   component: RoundButtonGroup,
@@ -33,17 +33,37 @@ const meta: Meta<typeof Button> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof RoundButtonGroup>;
 
-const optionsGroupButton = [
-  <Button key="button-x" className="btn-outline-rk-green">
-    Option X
-  </Button>,
-  <Button key="button-y" className="btn-outline-rk-green">
-    Option Y
-  </Button>,
-];
-export const Default = () => (
-  <>
-    <RoundButtonGroup>{optionsGroupButton}</RoundButtonGroup>
-  </>
-);
+export const Default: Story = {
+  render: () => {
+    return (
+      <RoundButtonGroup>
+        <Button key="button-x" className="btn-outline-rk-green">
+          Fork
+        </Button>
+        <Button key="button-y" className="btn-outline-rk-green">
+          15
+        </Button>
+      </RoundButtonGroup>
+    );
+  },
+};
+
+export const MultipleButtons: Story = {
+  render: () => {
+    return (
+      <RoundButtonGroup>
+        <Button key="button-x" className="btn-outline-rk-green">
+          Pull
+        </Button>
+        <Button key="button-y" className="btn-outline-rk-green">
+          Push
+        </Button>
+        <Button key="button-z" className="btn-outline-rk-green">
+          Merge
+        </Button>
+      </RoundButtonGroup>
+    );
+  },
+};
diff --git a/client/src/components/form-field/CreatorsInput.stories.tsx b/client/src/components/form-field/CreatorsInput.stories.tsx
@@ -15,16 +15,45 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { FormGeneratorCreatorsInput } from "./CreatorsInput";
 import { userEvent } from "@storybook/testing-library";
 import { expect } from "@storybook/jest";
 
-export default {
+const meta: Meta<typeof FormGeneratorCreatorsInput> = {
   title: "Components/Forms/FormGeneratorCreatorsInput",
   component: FormGeneratorCreatorsInput,
+  argTypes: {
+    name: {
+      table: {
+        disable: true,
+      },
+    },
+    label: {
+      table: {
+        disable: true,
+      },
+    },
+    setInputs: {
+      table: {
+        disable: true,
+      },
+    },
+    alert: {
+      table: {
+        disable: true,
+      },
+    },
+    help: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
+export default meta;
 type Story = StoryObj<typeof FormGeneratorCreatorsInput>;
+
 export const Default: Story = {
   args: {
     name: "author",
@@ -39,6 +68,7 @@ export const Default: Story = {
         default: true,
       },
     ],
+    disabled: false,
   },
   play: async ({ canvasElement }) => {
     await userEvent.click(

diff --git a/client/src/components/formlabels/FormLabels.stories.tsx b/client/src/components/formlabels/FormLabels.stories.tsx
@@ -23,77 +23,61 @@ import {
   InputLabel,
   LoadingLabel,
 } from "./FormLabels";
+import { Meta, StoryObj } from "@storybook/react";
+import { LabelProps } from "reactstrap";
 
-interface LabelsProps {
-  text: string;
-  isRequired: boolean;
-}
-
-export default {
+const meta: Meta<typeof InputLabel> = {
   title: "Components/Forms/Labels",
+  component: InputLabel,
 };
+export default meta;
+type Story = StoryObj<typeof InputLabel>;
 
-export const Input = (args: LabelsProps) => (
-  <>
-    <InputLabel isRequired={args.isRequired} text={args.text} />
-  </>
-);
-Input.args = {
-  text: "My Label",
+export const Default: Story = {
+  args: {
+    text: "My Label",
+  },
 };
 
-export const Required = (args: LabelsProps) => (
-  <>
-    <InputLabel isRequired={args.isRequired} text={args.text} />
-  </>
-);
-Required.args = {
-  text: "My Label",
-  isRequired: true,
+export const Required: Story = {
+  args: {
+    text: "My Label",
+    isRequired: true,
+  },
 };
 
-export const Optional = (args: LabelsProps) => (
-  <>
-    <InputLabel isRequired={args.isRequired} text={args.text} />
-  </>
-);
-Optional.args = {
-  text: "My Label",
-  isRequired: false,
+export const Optional: Story = {
+  args: {
+    text: "My Label",
+    isRequired: false,
+  },
 };
 
-export const Loading = (args: LabelsProps) => (
-  <>
-    <LoadingLabel text={args.text} />
-  </>
-);
-Loading.args = {
-  text: "Fetching templates...",
+export const Loading = {
+  render: (args: LabelProps) => <LoadingLabel text={args.text} />,
+  args: {
+    text: "Fetching templates...",
+  },
 };
 
-export const Helper = (args: LabelsProps) => (
-  <>
-    <HelperLabel text={args.text} />
-  </>
-);
-Helper.args = {
-  text: "Fetch templates first, or switch template source to RenkuLab",
+type StoryHelper = StoryObj<typeof HelperLabel>;
+export const Helper: StoryHelper = {
+  render: (args) => <HelperLabel text={args.text} />,
+  args: {
+    text: "Fetch templates first, or switch template source to RenkuLab",
+  },
 };
 
-export const InputHint = (args: LabelsProps) => (
-  <>
-    <InputHintLabel text={args.text} />
-  </>
-);
-InputHint.args = {
-  text: "Provide a number between 0 and 9",
+export const InputHint = {
+  render: (args: LabelProps) => <InputHintLabel text={args.text} />,
+  args: {
+    text: "Provide a number between 0 and 9",
+  },
 };
 
-export const Error = (args: LabelsProps) => (
-  <>
-    <ErrorLabel text={args.text} />
-  </>
-);
-Error.args = {
-  text: "Please select a template",
+export const Error = {
+  render: (args: LabelProps) => <ErrorLabel text={args.text} />,
+  args: {
+    text: "Please select a template",
+  },
 };