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

frontend/src/components/ClustersList.stories.tsx

@@ -1,21 +1,20 @@
 /* eslint-disable no-console */
-// ClustersListBar.stories.ts|tsx
-
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { StoryFn, Meta } from "@storybook/react";
 import ClustersList from "./ClustersList";
 
-//👇 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: "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,41 +1,35 @@
-// InstalledPackageCard.stories.ts|tsx
-
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 import InstalledPackageCard from "./InstalledPackageCard";
 
-//👇 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: "InstalledPackageCard",
   component: InstalledPackageCard,
-} as ComponentMeta<typeof InstalledPackageCard>;
-
-//👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof InstalledPackageCard> = (args) => (
-  <InstalledPackageCard {...args} />
-);
+} satisfies Meta<typeof InstalledPackageCard>;
 
-export const Default = Template.bind({});
+export default meta;
 
-Default.args = {
-  release: {
-    id: "",
-    name: "",
-    namespace: "",
-    revision: 1,
-    updated: "",
-    status: "",
-    chart: "",
-    chart_name: "",
-    chart_ver: "",
-    app_version: "",
-    icon: "",
-    description: "",
-    has_tests: false,
-    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
+export const Default = {
+  args: {
+    release: {
+      id: "",
+      name: "",
+      namespace: "",
+      revision: 1,
+      updated: "",
+      status: "",
+      chart: "",
+      chart_name: "",
+      chart_ver: "",
+      app_version: "",
+      icon: "",
+      description: "",
+      has_tests: false,
+      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,60 +1,54 @@
-// InstalledPackagesHeader.stories.ts|tsx
-
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 import InstalledPackagesHeader from "./InstalledPackagesHeader";
 
-//👇 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: "InstalledPackagesHeader",
   component: InstalledPackagesHeader,
-} as ComponentMeta<typeof InstalledPackagesHeader>;
-
-//👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof InstalledPackagesHeader> = (args) => (
-  <InstalledPackagesHeader {...args} />
-);
+} satisfies Meta<typeof InstalledPackagesHeader>;
 
-export const Default = Template.bind({});
+export default meta;
 
-Default.args = {
-  filteredReleases: [
-    {
-      id: "",
-      name: "",
-      namespace: "",
-      revision: 1,
-      updated: "",
-      status: "",
-      chart: "",
-      chart_name: "",
-      chart_ver: "",
-      app_version: "",
-      icon: "",
-      description: "",
-      has_tests: false,
-      chartName: "", // duplicated in some cases in the backend, we need to resolve this
-      chartVersion: "", // duplicated in some cases in the
-    },
-    {
-      id: "",
-      name: "",
-      namespace: "",
-      revision: 1,
-      updated: "",
-      status: "",
-      chart: "",
-      chart_name: "",
-      chart_ver: "",
-      app_version: "",
-      icon: "",
-      description: "",
-      has_tests: false,
-      chartName: "", // duplicated in some cases in the backend, we need to resolve this
-      chartVersion: "", // duplicated in some cases in the
-    },
-  ],
+export const Default = {
+  args: {
+    filteredReleases: [
+      {
+        id: "",
+        name: "",
+        namespace: "",
+        revision: 1,
+        updated: "",
+        status: "",
+        chart: "",
+        chart_name: "",
+        chart_ver: "",
+        app_version: "",
+        icon: "",
+        description: "",
+        has_tests: false,
+        chartName: "", // duplicated in some cases in the backend, we need to resolve this
+        chartVersion: "", // duplicated in some cases in the
+      },
+      {
+        id: "",
+        name: "",
+        namespace: "",
+        revision: 1,
+        updated: "",
+        status: "",
+        chart: "",
+        chart_name: "",
+        chart_ver: "",
+        app_version: "",
+        icon: "",
+        description: "",
+        has_tests: false,
+        chartName: "", // duplicated in some cases in the backend, we need to resolve this
+        chartVersion: "", // duplicated in some cases in the
+      },
+    ],
+  },
 };