Migrated Storybook notation from CSF2 to CSF3 (#487)

* Migrate common directory to CSF3 notation

* Migrate InstalledPackages directory to CSF3 notation

* Migrate modal directory to CSF3 notation

* Migrate repository directory to CSF3 notation

* Migrate others components to CSF3 notation

* Fix lint error in repository directory

frontend/src/components/common/Button/Button.stories.tsx

@@ -1,40 +1,42 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 
 import { Button } from "./Button";
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
+const meta = {
   title: "Example/Button",
   component: Button,
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
     backgroundColor: { control: "color" },
   },
-} as ComponentMeta<typeof Button>;
+} satisfies Meta<typeof Button>;
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+export default meta;
 
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: "Button",
+export const Primary = {
+  args: {
+    primary: true,
+    label: "Button",
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: "Button",
+export const Secondary = {
+  args: {
+    label: "Button",
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: "large",
-  label: "Button",
+export const Large = {
+  args: {
+    size: "large",
+    label: "Button",
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: "small",
-  label: "Button",
+export const Small = {
+  args: {
+    size: "small",
+    label: "Button",
+  },
 };

frontend/src/components/common/DropDown.stories.tsx

@@ -1,35 +1,29 @@
-/* eslint-disable no-console */
-// DropDown.stories.ts|tsx
-
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 import DropDown from "./DropDown";
 import { BsSlack, BsGithub } from "react-icons/bs";
 
-//👇 This default export determines where your story goes in the story list
-export default {
+const meta = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: "DropDown",
   component: DropDown,
-} as ComponentMeta<typeof DropDown>;
+} as Meta<typeof DropDown>;
 
-//👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof DropDown> = (args) => (
-  <DropDown {...args} />
-);
-
-export const Default = Template.bind({});
+export default meta;
 
 const onClick = () => {
+  // eslint-disable-next-line no-console
   console.log("drop down clicked");
 };
 
-Default.args = {
-  items: [
-    { id: "1", text: "Menu Item 1", onClick: onClick, icon: <BsSlack /> },
-    { id: "2 ", isSeparator: true },
-    { id: "3", text: "Menu Item 3", isDisabled: true, icon: <BsGithub /> },
-  ],
+export const Default = {
+  args: {
+    items: [
+      { id: "1", text: "Menu Item 1", onClick: onClick, icon: <BsSlack /> },
+      { id: "2 ", isSeparator: true },
+      { id: "3", text: "Menu Item 3", isDisabled: true, icon: <BsGithub /> },
+    ],
+  },
 };

frontend/src/components/common/Header/Header.stories.tsx

@@ -1,24 +1,26 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 
 import { Header } from "./Header";
 
-export default {
+const meta = {
   title: "Example/Header",
   component: Header,
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
     layout: "fullscreen",
   },
-} as ComponentMeta<typeof Header>;
+} satisfies Meta<typeof Header>;
 
-const Template: ComponentStory<typeof Header> = (args) => <Header {...args} />;
+export default meta;
 
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: "Jane Doe",
+export const LoggedIn = {
+  args: {
+    user: {
+      name: "Jane Doe",
+    },
   },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut = {
+  args: {},
+};

frontend/src/components/common/Page/Page.stories.tsx

@@ -1,25 +1,24 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { within, userEvent } from "@storybook/testing-library";
 import { Page } from "./Page";
 
-export default {
+const meta = {
   title: "Example/Page",
   component: Page,
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
     layout: "fullscreen",
   },
-} as ComponentMeta<typeof Page>;
+} satisfies Meta<typeof Page>;
 
-const Template: ComponentStory<typeof Page> = (args) => <Page {...args} />;
+export default meta;
 
-export const LoggedOut = Template.bind({});
+export const LoggedOut = {};
 
-export const LoggedIn = Template.bind({});
-
-// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
-LoggedIn.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const loginButton = await canvas.getByRole("button", { name: /Log in/i });
-  await userEvent.click(loginButton);
+export const LoggedIn: StoryObj<typeof Page> = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.getByRole("button", { name: /Log in/i });
+    await userEvent.click(loginButton);
+  },
 };

frontend/src/components/common/StatusLabel.stories.tsx

@@ -1,39 +1,37 @@
-import { ComponentStory } from "@storybook/react";
+import { Meta } from "@storybook/react";
 import StatusLabel, { DeploymentStatus } from "./StatusLabel";
 
-export default {
+const meta = {
   title: "StatusLabel",
   component: StatusLabel,
+} satisfies Meta<typeof StatusLabel>;
+
+export default meta;
+
+export const Deployed = {
+  args: {
+    status: DeploymentStatus.DEPLOYED,
+    isRollback: false,
+  },
 };
 
-const Template: ComponentStory<typeof StatusLabel> = (args) => (
-  <StatusLabel {...args} />
-);
-
-export const Deployed = Template.bind({});
-
-Deployed.args = {
-  status: DeploymentStatus.DEPLOYED,
-  isRollback: false,
+export const Failed = {
+  args: {
+    status: DeploymentStatus.FAILED,
+    isRollback: false,
+  },
 };
 
-export const Failed = Template.bind({});
-
-Failed.args = {
-  status: DeploymentStatus.FAILED,
-  isRollback: false,
+export const Pending = {
+  args: {
+    status: DeploymentStatus.PENDING,
+    isRollback: false,
+  },
 };
 
-export const Pending = Template.bind({});
-
-Pending.args = {
-  status: DeploymentStatus.PENDING,
-  isRollback: false,
-};
-
-export const Superseded = Template.bind({});
-
-Superseded.args = {
-  status: DeploymentStatus.SUPERSEDED,
-  isRollback: false,
+export const Superseded = {
+  args: {
+    status: DeploymentStatus.SUPERSEDED,
+    isRollback: false,
+  },
 };