From 2a55f4cc85120f426ebab374e260c81993c41d7c Mon Sep 17 00:00:00 2001
From: kamegoro <tentyo0620@icloud.com>
Date: Thu, 2 Nov 2023 02:07:23 +0900
Subject: [PATCH] Migrate others components to CSF3 notation

---
 frontend/src/components/Badge.stories.tsx     | 29 +++++------
 frontend/src/components/Button.stories.tsx    | 41 +++++++--------
 .../src/components/ClustersList.stories.tsx   | 17 ++++---
 .../src/components/SelectMenu.stories.tsx     | 35 ++++++-------
 .../src/components/ShutDownButton.stories.tsx | 19 ++++---
 frontend/src/components/Tabs.stories.tsx      | 19 +++----
 frontend/src/components/TabsBar.stories.tsx   | 50 ++++++++-----------
 frontend/src/components/TextInput.stories.tsx | 25 ++++------
 .../src/components/Troubleshoot.stories.tsx   | 11 ++--
 9 files changed, 111 insertions(+), 135 deletions(-)

diff --git a/frontend/src/components/Badge.stories.tsx b/frontend/src/components/Badge.stories.tsx
index aa622e99..96846a75 100644
--- a/frontend/src/components/Badge.stories.tsx
+++ b/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",
+  },
 };
diff --git a/frontend/src/components/Button.stories.tsx b/frontend/src/components/Button.stories.tsx
index 33b53b37..1d4d9188 100644
--- a/frontend/src/components/Button.stories.tsx
+++ b/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");
+    },
   },
 };
diff --git a/frontend/src/components/ClustersList.stories.tsx b/frontend/src/components/ClustersList.stories.tsx
index b82e4d21..cae39ae8 100644
--- a/frontend/src/components/ClustersList.stories.tsx
+++ b/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,
+};
diff --git a/frontend/src/components/SelectMenu.stories.tsx b/frontend/src/components/SelectMenu.stories.tsx
index f9faf223..eb8c19f1 100644
--- a/frontend/src/components/SelectMenu.stories.tsx
+++ b/frontend/src/components/SelectMenu.stories.tsx
@@ -7,32 +7,29 @@
  * The default story renders the component with the default props.
  */
 
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import SelectMenu, { SelectMenuItem, SelectMenuProps } from "./SelectMenu";
+import { Meta } from "@storybook/react";
+import SelectMenu, { SelectMenuItem } from "./SelectMenu";
 
-//👇 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: "SelectMenu",
   component: SelectMenu,
-} as ComponentMeta<typeof SelectMenu>;
+} satisfies Meta<typeof SelectMenu>;
 
-//👇 We create a "template" of how args map to rendering
-const Template: ComponentStory<typeof SelectMenu> = (args: SelectMenuProps) => (
-  <SelectMenu {...args} />
-);
+export default meta;
 
-export const Default = Template.bind({});
-Default.args = {
-  header: "Header",
-  children: [
-    <SelectMenuItem label="Item 1" id={1} key="item1" />,
-    <SelectMenuItem label="Item 2" id={2} key="item2" />,
-    <SelectMenuItem label="Item 3" id={3} key="item3" />,
-  ],
-  selected: 1,
-  onSelect: (id: number) => console.log(id),
+export const Default = {
+  args: {
+    header: "Header",
+    children: [
+      <SelectMenuItem label="Item 1" id={1} key="item1" />,
+      <SelectMenuItem label="Item 2" id={2} key="item2" />,
+      <SelectMenuItem label="Item 3" id={3} key="item3" />,
+    ],
+    selected: 1,
+    onSelect: (id: number) => console.log(id),
+  },
 };
diff --git a/frontend/src/components/ShutDownButton.stories.tsx b/frontend/src/components/ShutDownButton.stories.tsx
index c96b1b40..b4a1e121 100644
--- a/frontend/src/components/ShutDownButton.stories.tsx
+++ b/frontend/src/components/ShutDownButton.stories.tsx
@@ -1,21 +1,20 @@
-// TabsBar.stories.ts|tsx
-
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { StoryFn, Meta } from "@storybook/react";
 import ShutDownButton from "./ShutDownButton";
 
-//👇 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: "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> = () => (
-  <ShutDownButton />
-);
+const Template: StoryFn<typeof ShutDownButton> = () => <ShutDownButton />;
 
-export const Default = Template.bind({});
+export const Default = {
+  render: Template,
+};
diff --git a/frontend/src/components/Tabs.stories.tsx b/frontend/src/components/Tabs.stories.tsx
index b4340279..eee5594f 100644
--- a/frontend/src/components/Tabs.stories.tsx
+++ b/frontend/src/components/Tabs.stories.tsx
@@ -1,22 +1,16 @@
-// TabsBar.stories.ts|tsx
-
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 import Tabs from "./Tabs";
 
-//👇 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: "Tabs",
   component: Tabs,
-} as ComponentMeta<typeof Tabs>;
-
-//👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof Tabs> = (args) => <Tabs {...args} />;
+} satisfies Meta<typeof Tabs>;
 
-export const Default = Template.bind({});
+export default meta;
 
 const defaultArgs = {
   tabs: [
@@ -35,5 +29,6 @@ const defaultArgs = {
   ],
 };
 
-//@ts-ignore
-Default.args = defaultArgs;
+export const Default = {
+  args: defaultArgs,
+};
diff --git a/frontend/src/components/TabsBar.stories.tsx b/frontend/src/components/TabsBar.stories.tsx
index 768df3df..a2ed8191 100644
--- a/frontend/src/components/TabsBar.stories.tsx
+++ b/frontend/src/components/TabsBar.stories.tsx
@@ -1,39 +1,33 @@
-// TabsBar.stories.ts|tsx
-
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 import TabsBar from "./TabsBar";
 
-//👇 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: "TabsBar",
   component: TabsBar,
-} as ComponentMeta<typeof TabsBar>;
-
-//👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof TabsBar> = (args) => (
-  <TabsBar {...args} />
-);
+} satisfies Meta<typeof TabsBar>;
 
-export const Default = Template.bind({});
+export default meta;
 
-Default.args = {
-  tabs: [
-    {
-      name: "tab1",
-      component: <div className="w-250 h-250 bg-green-400">tab1</div>,
-    },
-    {
-      name: "tab2",
-      component: <div className="w-250 h-250 bg-red-400">tab2</div>,
-    },
-    {
-      name: "tab3",
-      component: <div className="w-250 h-250 bg-blue-400">tab3</div>,
-    },
-  ],
-  activeTab: "tab1",
+export const Default = {
+  args: {
+    tabs: [
+      {
+        name: "tab1",
+        component: <div className="w-250 h-250 bg-green-400">tab1</div>,
+      },
+      {
+        name: "tab2",
+        component: <div className="w-250 h-250 bg-red-400">tab2</div>,
+      },
+      {
+        name: "tab3",
+        component: <div className="w-250 h-250 bg-blue-400">tab3</div>,
+      },
+    ],
+    activeTab: "tab1",
+  },
 };
diff --git a/frontend/src/components/TextInput.stories.tsx b/frontend/src/components/TextInput.stories.tsx
index 47cfed37..dee91054 100644
--- a/frontend/src/components/TextInput.stories.tsx
+++ b/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 TextInput, { TextInputProps } from "./TextInput";
+import { Meta } from "@storybook/react";
+import TextInput from "./TextInput";
 
-//👇 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: "TextInput",
   component: TextInput,
-} as ComponentMeta<typeof TextInput>;
+} satisfies Meta<typeof TextInput>;
 
-//👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof TextInput> = (args: TextInputProps) => (
-  <TextInput {...args} />
-);
+export default meta;
 
-export const Default = Template.bind({});
-Default.args = {
-  label: "Label",
-  placeholder: "Placeholder",
-  isMandatory: false,
+export const Default = {
+  args: {
+    label: "Label",
+    placeholder: "Placeholder",
+    isMandatory: false,
+  },
 };
diff --git a/frontend/src/components/Troubleshoot.stories.tsx b/frontend/src/components/Troubleshoot.stories.tsx
index 09be24d5..187a3d33 100644
--- a/frontend/src/components/Troubleshoot.stories.tsx
+++ b/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,
+};