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/Badge.stories.tsx

@@ -14,31 +14,26 @@
  * @see https://storybook.js.org/docs/react/writing-stories/introduction
  */
 
-import { ComponentStory } from "@storybook/react";
+import { Meta } from "@storybook/react";
-import Badge, { BadgeProps } from "./Badge";
+import Badge from "./Badge";
 
-// We create a generic template for the component.
-
-const Template: ComponentStory<typeof Badge> = (args: BadgeProps) => (
-  <Badge {...args} />
-);
-// We export the story, and we pass the template to it. For now,
-// we are only going to use the default story.
-export const Default = Template.bind({});
-// We set the props for the story. Recall that the props are the same as the
-// ones in BadgeProps, which we impoted.
-Default.args = {
-  type: "success",
-  children: "Success",
-};
 // We set the metadata for the story.
 // Refer to https://storybook.js.org/docs/react/writing-stories/introduction
 // for more information.
-export default {
+const meta = {
   title: "Badge",
   component: Badge,
   args: {
     type: "success",
     children: "Success",
   },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    type: "success",
+    children: "Success",
+  },
 };

frontend/src/components/Button.stories.tsx

@@ -1,28 +1,20 @@
 /* eslint-disable no-console */
-// Status.stories.ts|tsx
+import { Meta } from "@storybook/react";
+import Button from "./Button";
 
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+const meta = {
-import Button, { ButtonProps } from "./Button";
-//👇 This default export determines where your story goes in the story list
-export default {
   /* 👇 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: "Button",
   component: Button,
-} as ComponentMeta<typeof Button>;
+} satisfies Meta<typeof Button>;
 
-// Recall that Button has 'props' which is of type ButtonProps
+export default meta;
-// We want to past theme to the story with the name 'Default', so we
+
-// create a template for it.
+export const Default = {
-// We want to declare default values for the props, so we create a
+  args: {
-// default args object.
-const Template: ComponentStory<typeof Button> = (args: ButtonProps) => (
-  <Button {...args} />
-);
-export const Default = Template.bind({});
-Default.args = {
     children: (
       <>
         <span>&uarr;</span>
@@ -32,4 +24,5 @@ Default.args = {
     onClick: () => {
       console.log("click");
     },
+  },
 };

frontend/src/components/ClustersList.stories.tsx

@@ -1,21 +1,20 @@
 /* eslint-disable no-console */
-// ClustersListBar.stories.ts|tsx
+import { StoryFn, Meta } from "@storybook/react";
-
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 import ClustersList from "./ClustersList";
 
-//👇 This default export determines where your story goes in the story list
+const meta = {
-export default {
   /* 👇 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: "ClustersList",
   component: ClustersList,
-} as ComponentMeta<typeof ClustersList>;
+} satisfies Meta<typeof ClustersList>;
+
+export default meta;
 
 //👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof ClustersList> = () => (
+const Template: StoryFn<typeof ClustersList> = () => (
   <ClustersList
     filteredNamespaces={[""]}
     installedReleases={[]}
@@ -26,4 +25,6 @@ const Template: ComponentStory<typeof ClustersList> = () => (
   />
 );
 
-export const Default = Template.bind({});
+export const Default = {
+  render: Template,
+};

frontend/src/components/InstalledPackages/InstalledPackageCard.stories.tsx

@@ -1,26 +1,19 @@
-// InstalledPackageCard.stories.ts|tsx
+import { Meta } from "@storybook/react";
-
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 import InstalledPackageCard from "./InstalledPackageCard";
 
-//👇 This default export determines where your story goes in the story list
+const meta = {
-export default {
   /* 👇 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: "InstalledPackageCard",
   component: InstalledPackageCard,
-} as ComponentMeta<typeof InstalledPackageCard>;
+} satisfies Meta<typeof InstalledPackageCard>;
 
-//👇 We create a “template” of how args map to rendering
+export default meta;
-const Template: ComponentStory<typeof InstalledPackageCard> = (args) => (
-  <InstalledPackageCard {...args} />
-);
 
-export const Default = Template.bind({});
+export const Default = {
-
+  args: {
-Default.args = {
     release: {
       id: "",
       name: "",
@@ -38,4 +31,5 @@ Default.args = {
       chartName: "", // duplicated in some cases in the backend, we need to resolve this
       chartVersion: "", // duplicated in some cases in the backend, we need to resolve this
     },
+  },
 };

frontend/src/components/InstalledPackages/InstalledPackagesHeader.stories.tsx

@@ -1,26 +1,19 @@
-// InstalledPackagesHeader.stories.ts|tsx
+import { Meta } from "@storybook/react";
-
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 import InstalledPackagesHeader from "./InstalledPackagesHeader";
 
-//👇 This default export determines where your story goes in the story list
+const meta = {
-export default {
   /* 👇 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: "InstalledPackagesHeader",
   component: InstalledPackagesHeader,
-} as ComponentMeta<typeof InstalledPackagesHeader>;
+} satisfies Meta<typeof InstalledPackagesHeader>;
 
-//👇 We create a “template” of how args map to rendering
+export default meta;
-const Template: ComponentStory<typeof InstalledPackagesHeader> = (args) => (
-  <InstalledPackagesHeader {...args} />
-);
 
-export const Default = Template.bind({});
+export const Default = {
-
+  args: {
-Default.args = {
     filteredReleases: [
       {
         id: "",
@@ -57,4 +50,5 @@ Default.args = {
         chartVersion: "", // duplicated in some cases in the
       },
     ],
+  },
 };

frontend/src/components/InstalledPackages/InstalledPackagesList.stories.tsx

@@ -1,26 +1,19 @@
-// InstalledPackagesList.stories.ts|tsx
+import { Meta } from "@storybook/react";
-
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 import InstalledPackagesList from "./InstalledPackagesList";
 
-//👇 This default export determines where your story goes in the story list
+const meta = {
-export default {
   /* 👇 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: "InstalledPackagesList",
   component: InstalledPackagesList,
-} as ComponentMeta<typeof InstalledPackagesList>;
+} satisfies Meta<typeof InstalledPackagesList>;
 
-//👇 We create a “template” of how args map to rendering
+export default meta;
-const Template: ComponentStory<typeof InstalledPackagesList> = (args) => (
-  <InstalledPackagesList {...args} />
-);
 
-export const Default = Template.bind({});
+export const Default = {
-
+  args: {
-Default.args = {
     installedReleases: [
       {
         id: "",
@@ -57,4 +50,5 @@ Default.args = {
         chartVersion: "", // duplicated in some cases in the
       },
     ],
+  },
 };

frontend/src/components/SelectMenu.stories.tsx

@@ -7,26 +7,22 @@
  * The default story renders the component with the default props.
  */
 
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta } from "@storybook/react";
-import SelectMenu, { SelectMenuItem, SelectMenuProps } from "./SelectMenu";
+import SelectMenu, { SelectMenuItem } from "./SelectMenu";
 
-//👇 This default export determines where your story goes in the story list
+const meta = {
-export default {
   /* 👇 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: "SelectMenu",
   component: SelectMenu,
-} as ComponentMeta<typeof SelectMenu>;
+} satisfies Meta<typeof SelectMenu>;
 
-//👇 We create a "template" of how args map to rendering
+export default meta;
-const Template: ComponentStory<typeof SelectMenu> = (args: SelectMenuProps) => (
-  <SelectMenu {...args} />
-);
 
-export const Default = Template.bind({});
+export const Default = {
-Default.args = {
+  args: {
     header: "Header",
     children: [
       <SelectMenuItem label="Item 1" id={1} key="item1" />,
@@ -35,4 +31,5 @@ Default.args = {
     ],
     selected: 1,
     onSelect: (id: number) => console.log(id),
+  },
 };

frontend/src/components/ShutDownButton.stories.tsx

@@ -1,21 +1,20 @@
-// TabsBar.stories.ts|tsx
+import { StoryFn, Meta } from "@storybook/react";
-
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 import ShutDownButton from "./ShutDownButton";
 
-//👇 This default export determines where your story goes in the story list
+const meta = {
-export default {
   /* 👇 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: "ShutDownButton",
   component: ShutDownButton,
-} as ComponentMeta<typeof ShutDownButton>;
+} satisfies Meta<typeof ShutDownButton>;
+
+export default meta;
 
 //👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof ShutDownButton> = () => (
+const Template: StoryFn<typeof ShutDownButton> = () => <ShutDownButton />;
-  <ShutDownButton />
-);
 
-export const Default = Template.bind({});
+export const Default = {
+  render: Template,
+};

frontend/src/components/Tabs.stories.tsx

@@ -1,22 +1,16 @@
-// TabsBar.stories.ts|tsx
+import { Meta } from "@storybook/react";
-
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 import Tabs from "./Tabs";
 
-//👇 This default export determines where your story goes in the story list
+const meta = {
-export default {
   /* 👇 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: "Tabs",
   component: Tabs,
-} as ComponentMeta<typeof Tabs>;
+} satisfies Meta<typeof Tabs>;
 
-//👇 We create a “template” of how args map to rendering
+export default meta;
-const Template: ComponentStory<typeof Tabs> = (args) => <Tabs {...args} />;
-
-export const Default = Template.bind({});
 
 const defaultArgs = {
   tabs: [
@@ -35,5 +29,6 @@ const defaultArgs = {
   ],
 };
 
-//@ts-ignore
+export const Default = {
-Default.args = defaultArgs;
+  args: defaultArgs,
+};

frontend/src/components/TabsBar.stories.tsx

@@ -1,26 +1,19 @@
-// TabsBar.stories.ts|tsx
+import { Meta } from "@storybook/react";
-
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 import TabsBar from "./TabsBar";
 
-//👇 This default export determines where your story goes in the story list
+const meta = {
-export default {
   /* 👇 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: "TabsBar",
   component: TabsBar,
-} as ComponentMeta<typeof TabsBar>;
+} satisfies Meta<typeof TabsBar>;
 
-//👇 We create a “template” of how args map to rendering
+export default meta;
-const Template: ComponentStory<typeof TabsBar> = (args) => (
-  <TabsBar {...args} />
-);
 
-export const Default = Template.bind({});
+export const Default = {
-
+  args: {
-Default.args = {
     tabs: [
       {
         name: "tab1",
@@ -36,4 +29,5 @@ Default.args = {
       },
     ],
     activeTab: "tab1",
+  },
 };

frontend/src/components/TextInput.stories.tsx

@@ -4,27 +4,24 @@
  * the first story simply renders the component with the default props.
  */
 
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta } from "@storybook/react";
-import TextInput, { TextInputProps } from "./TextInput";
+import TextInput from "./TextInput";
 
-//👇 This default export determines where your story goes in the story list
+const meta = {
-export default {
   /* 👇 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: "TextInput",
   component: TextInput,
-} as ComponentMeta<typeof TextInput>;
+} satisfies Meta<typeof TextInput>;
 
-//👇 We create a “template” of how args map to rendering
+export default meta;
-const Template: ComponentStory<typeof TextInput> = (args: TextInputProps) => (
-  <TextInput {...args} />
-);
 
-export const Default = Template.bind({});
+export const Default = {
-Default.args = {
+  args: {
     label: "Label",
     placeholder: "Placeholder",
     isMandatory: false,
+  },
 };

frontend/src/components/Troubleshoot.stories.tsx

@@ -1,10 +1,15 @@
 import { Meta, StoryFn } from "@storybook/react";
 import { Troubleshoot } from "./Troubleshoot";
 
-export default {
+const meta = {
   title: "Troubleshoot",
   component: Troubleshoot,
-} as Meta<typeof Troubleshoot>;
+} satisfies Meta<typeof Troubleshoot>;
+
+export default meta;
 
 const Template: StoryFn<typeof Troubleshoot> = () => <Troubleshoot />;
-export const Default = Template.bind({});
+
+export const Default = {
+  render: Template,
+};

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
+export default meta;
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
 
-export const Primary = Template.bind({});
+export const Primary = {
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
+  args: {
-Primary.args = {
     primary: true,
     label: "Button",
+  },
 };
 
-export const Secondary = Template.bind({});
+export const Secondary = {
-Secondary.args = {
+  args: {
     label: "Button",
+  },
 };
 
-export const Large = Template.bind({});
+export const Large = {
-Large.args = {
+  args: {
     size: "large",
     label: "Button",
+  },
 };
 
-export const Small = Template.bind({});
+export const Small = {
-Small.args = {
+  args: {
     size: "small",
     label: "Button",
+  },
 };

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

@@ -1,35 +1,29 @@
-/* eslint-disable no-console */
+import { Meta } from "@storybook/react";
-// DropDown.stories.ts|tsx
-
-import { ComponentStory, ComponentMeta } 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
+const meta = {
-export default {
   /* 👇 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
+export default meta;
-const Template: ComponentStory<typeof DropDown> = (args) => (
-  <DropDown {...args} />
-);
-
-export const Default = Template.bind({});
 
 const onClick = () => {
+  // eslint-disable-next-line no-console
   console.log("drop down clicked");
 };
 
-Default.args = {
+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({});
+export const LoggedIn = {
-LoggedIn.args = {
+  args: {
     user: {
       name: "Jane Doe",
     },
+  },
 };
 
-export const LoggedOut = Template.bind({});
+export const LoggedOut = {
-LoggedOut.args = {};
+  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({});
+export const LoggedIn: StoryObj<typeof Page> = {
-
+  play: async ({ canvasElement }) => {
-// 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);
+  },
 };

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>;
 
-const Template: ComponentStory<typeof StatusLabel> = (args) => (
+export default meta;
-  <StatusLabel {...args} />
-);
 
-export const Deployed = Template.bind({});
+export const Deployed = {
-
+  args: {
-Deployed.args = {
     status: DeploymentStatus.DEPLOYED,
     isRollback: false,
+  },
 };
 
-export const Failed = Template.bind({});
+export const Failed = {
-
+  args: {
-Failed.args = {
     status: DeploymentStatus.FAILED,
     isRollback: false,
+  },
 };
 
-export const Pending = Template.bind({});
+export const Pending = {
-
+  args: {
-Pending.args = {
     status: DeploymentStatus.PENDING,
     isRollback: false,
+  },
 };
 
-export const Superseded = Template.bind({});
+export const Superseded = {
-
+  args: {
-Superseded.args = {
     status: DeploymentStatus.SUPERSEDED,
     isRollback: false,
+  },
 };

frontend/src/components/modal/AddRepositoryModal.stories.tsx

@@ -1,25 +1,26 @@
-// Modal.stories.ts|tsx
+import { StoryFn, Meta } from "@storybook/react";
-
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 import AddRepositoryModal from "./AddRepositoryModal";
 
-//👇 This default export determines where your story goes in the story list
+const meta = {
-export default {
   /* 👇 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: "AddRepositoryModal",
   component: AddRepositoryModal,
-} as ComponentMeta<typeof AddRepositoryModal>;
+} satisfies Meta<typeof AddRepositoryModal>;
+
+export default meta;
 
 //👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof AddRepositoryModal> = (args) => (
+const Template: StoryFn<typeof AddRepositoryModal> = (args) => (
   <AddRepositoryModal {...args} isOpen={true} />
 );
 
-export const Default = Template.bind({});
+export const Default = {
+  render: Template,
 
-Default.args = {
+  args: {
     isOpen: true,
+  },
 };

frontend/src/components/modal/ErrorModal.stories.tsx

@@ -1,31 +1,25 @@
 /* eslint-disable no-console */
-// Modal.stories.ts|tsx
+import { Meta } from "@storybook/react";
-
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 import ErrorModal from "./ErrorModal";
 
-//👇 This default export determines where your story goes in the story list
+const meta = {
-export default {
   /* 👇 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: "ErrorModal",
   component: ErrorModal,
-} as ComponentMeta<typeof ErrorModal>;
+} satisfies Meta<typeof ErrorModal>;
 
-//👇 We create a “template” of how args map to rendering
+export default meta;
-const Template: ComponentStory<typeof ErrorModal> = (args) => (
-  <ErrorModal {...args} />
-);
 
-export const Default = Template.bind({});
+export const Default = {
-
+  args: {
-Default.args = {
     onClose: () => {
       console.log("on Close clicked");
     },
     titleText: "Failed to get list of charts",
     contentText:
       "failed to get list of releases, cause: Kubernetes cluster unreachable: Get &#34;https://kubernetes.docker.internal:6443/version&#34;: dial tcp 127.0.0.1:6443: connectex: No connection could be made because the target machine actively refused it.",
+  },
 };

frontend/src/components/modal/Modal.stories.tsx

@@ -1,26 +1,23 @@
 /* eslint-disable no-console */
-// Modal.stories.ts|tsx
+import { StoryObj, StoryFn, Meta } from "@storybook/react";
-
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 import Modal, { ModalAction, ModalButtonStyle } from "./Modal";
 
-//👇 This default export determines where your story goes in the story list
+const meta = {
-export default {
   /* 👇 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: "Modal",
   component: Modal,
-} as ComponentMeta<typeof Modal>;
+} satisfies Meta<typeof Modal>;
+
+export default meta;
 
 //👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof Modal> = (args) => (
+const Template: StoryFn<typeof Modal> = (args) => (
   <Modal {...args}>Basic text content</Modal>
 );
 
-export const Default = Template.bind({});
-
 const confirmModalActions: ModalAction[] = [
   {
     id: "1",
@@ -39,10 +36,14 @@ const confirmModalActions: ModalAction[] = [
   },
 ];
 
-Default.args = {
+export const Default = {
+  render: Template,
+
+  args: {
     title: "Basic text title",
     isOpen: true,
     actions: confirmModalActions,
+  },
 };
 
 const customModalActions: ModalAction[] = [
@@ -65,7 +66,8 @@ const customModalActions: ModalAction[] = [
   },
 ];
 
-export const CustomModal: ComponentStory<typeof Modal> = (args) => (
+export const CustomModal: StoryObj<typeof Modal> = {
+  render: (args) => (
     <Modal {...args}>
       <div>
         <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
@@ -80,9 +82,9 @@ export const CustomModal: ComponentStory<typeof Modal> = (args) => (
         </button>
       </div>
     </Modal>
-);
+  ),
 
-CustomModal.args = {
+  args: {
     title: (
       <div>
         Custom <span className="text-red-500"> Title</span>
@@ -90,11 +92,12 @@ CustomModal.args = {
     ),
     isOpen: true,
     actions: customModalActions,
+  },
 };
 
-export const AutoScrollWhenContentIsMoreThan500Height: ComponentStory<
+export const AutoScrollWhenContentIsMoreThan500Height: StoryObj<typeof Modal> =
-  typeof Modal
+  {
-> = (args) => (
+    render: (args) => (
       <Modal {...args}>
         <div
           style={{
@@ -103,14 +106,15 @@ export const AutoScrollWhenContentIsMoreThan500Height: ComponentStory<
             backgroundColor: "skyblue",
           }}
         >
-      This div height is 1000 px so we can see a vertical scroll to the right of
+          This div height is 1000 px so we can see a vertical scroll to the
-      it.
+          right of it.
         </div>
       </Modal>
-);
+    ),
 
-AutoScrollWhenContentIsMoreThan500Height.args = {
+    args: {
       title: "Auto Scroll when content is more than 500px height",
       isOpen: true,
       actions: confirmModalActions,
+    },
   };

frontend/src/components/repository/ChartViewer.stories.tsx

@@ -1,24 +1,17 @@
-// ChartViewer.stories.ts|tsx
+import { Meta } from "@storybook/react";
-
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 import ChartViewer from "./ChartViewer";
 
 //👇 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: "ChartViewer",
   component: ChartViewer,
-} as ComponentMeta<typeof ChartViewer>;
+} satisfies Meta<typeof ChartViewer>;
 
-//👇 We create a “template” of how args map to rendering
+export default meta;
-const Template: ComponentStory<typeof ChartViewer> = (args) => (
-  <ChartViewer {...args} />
-);
-
-export const Default = Template.bind({});
 
 const defaultArgs = {
   chart: {
@@ -28,5 +21,6 @@ const defaultArgs = {
   },
 };
 
-//@ts-ignore
+export const Default = {
-Default.args = defaultArgs;
+  args: defaultArgs,
+};

frontend/src/components/repository/RepositoriesList.stories.tsx

@@ -1,20 +1,19 @@
-// RepositoriesList.stories.ts|tsx
+import { StoryFn, Meta } from "@storybook/react";
-
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 import RepositoriesList from "./RepositoriesList";
 
-//👇 This default export determines where your story goes in the story list
+const meta = {
-export default {
   /* 👇 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: "RepositoriesList",
   component: RepositoriesList,
-} as ComponentMeta<typeof RepositoriesList>;
+} satisfies Meta<typeof RepositoriesList>;
+
+export default meta;
 
 //👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof RepositoriesList> = () => (
+const Template: StoryFn<typeof RepositoriesList> = () => (
   <RepositoriesList
     selectedRepository={undefined}
     // in this case we allow Unexpected empty method
@@ -24,4 +23,6 @@ const Template: ComponentStory<typeof RepositoriesList> = () => (
   />
 );
 
-export const Default = Template.bind({});
+export const Default = {
+  render: Template,
+};

frontend/src/components/repository/RepositoryViewer.stories.tsx

@@ -1,21 +1,22 @@
-// RepositoryViewer.stories.ts|tsx
+import { StoryFn, Meta } from "@storybook/react";
-
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 import RepositoryViewer from "./RepositoryViewer";
 
-//👇 This default export determines where your story goes in the story list
+const meta = {
-export default {
   /* 👇 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: "RepositoryViewer",
   component: RepositoryViewer,
-} as ComponentMeta<typeof RepositoryViewer>;
+} satisfies Meta<typeof RepositoryViewer>;
+
+export default meta;
 
 //👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof RepositoryViewer> = () => (
+const Template: StoryFn<typeof RepositoryViewer> = () => (
   <RepositoryViewer repository={undefined} />
 );
 
-export const Default = Template.bind({});
+export const Default = {
+  render: Template,
+};