From de1915e1c2a5e2190783366fadfd9945a1a10edb Mon Sep 17 00:00:00 2001 From: kame <63849460+kamegoro@users.noreply.github.com> Date: Thu, 2 Nov 2023 03:11:57 +0900 Subject: [PATCH] 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 | 29 ++--- frontend/src/components/Button.stories.tsx | 41 +++--- .../src/components/ClustersList.stories.tsx | 17 +-- .../InstalledPackageCard.stories.tsx | 52 ++++---- .../InstalledPackagesHeader.stories.tsx | 92 +++++++------- .../InstalledPackagesList.stories.tsx | 92 +++++++------- .../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 +- .../common/Button/Button.stories.tsx | 44 ++++--- .../components/common/DropDown.stories.tsx | 32 ++--- .../common/Header/Header.stories.tsx | 22 ++-- .../components/common/Page/Page.stories.tsx | 23 ++-- .../components/common/StatusLabel.stories.tsx | 50 ++++---- .../modal/AddRepositoryModal.stories.tsx | 21 +-- .../components/modal/ErrorModal.stories.tsx | 30 ++--- .../src/components/modal/Modal.stories.tsx | 120 +++++++++--------- .../repository/ChartViewer.stories.tsx | 20 +-- .../repository/RepositoriesList.stories.tsx | 17 +-- .../repository/RepositoryViewer.stories.tsx | 17 +-- 23 files changed, 413 insertions(+), 465 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 = (args: BadgeProps) => ( - -); -// 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; + +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; +} satisfies Meta; -// 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 = (args: ButtonProps) => ( - - - -); - -CustomModal.args = { - title: ( -
- Custom Title -
+export const CustomModal: StoryObj = { + render: (args) => ( + +
+

+ Custom Modal Content +

+ +
+ ), - isOpen: true, - actions: customModalActions, + + args: { + title: ( +
+ Custom Title +
+ ), + isOpen: true, + actions: customModalActions, + }, }; -export const AutoScrollWhenContentIsMoreThan500Height: ComponentStory< - typeof Modal -> = (args) => ( - -
- This div height is 1000 px so we can see a vertical scroll to the right of - it. -
- -); +export const AutoScrollWhenContentIsMoreThan500Height: StoryObj = + { + render: (args) => ( + +
+ This div height is 1000 px so we can see a vertical scroll to the + right of it. +
+ + ), -AutoScrollWhenContentIsMoreThan500Height.args = { - title: "Auto Scroll when content is more than 500px height", - isOpen: true, - actions: confirmModalActions, -}; + args: { + title: "Auto Scroll when content is more than 500px height", + isOpen: true, + actions: confirmModalActions, + }, + }; diff --git a/frontend/src/components/repository/ChartViewer.stories.tsx b/frontend/src/components/repository/ChartViewer.stories.tsx index e4c80a9e..ace63bb7 100644 --- a/frontend/src/components/repository/ChartViewer.stories.tsx +++ b/frontend/src/components/repository/ChartViewer.stories.tsx @@ -1,24 +1,17 @@ -// ChartViewer.stories.ts|tsx - -import { ComponentStory, ComponentMeta } from "@storybook/react"; +import { Meta } 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; - -//πŸ‘‡ We create a β€œtemplate” of how args map to rendering -const Template: ComponentStory = (args) => ( - -); +} satisfies Meta; -export const Default = Template.bind({}); +export default meta; const defaultArgs = { chart: { @@ -28,5 +21,6 @@ const defaultArgs = { }, }; -//@ts-ignore -Default.args = defaultArgs; +export const Default = { + args: defaultArgs, +}; diff --git a/frontend/src/components/repository/RepositoriesList.stories.tsx b/frontend/src/components/repository/RepositoriesList.stories.tsx index 48a9eb9c..509cbe7d 100644 --- a/frontend/src/components/repository/RepositoriesList.stories.tsx +++ b/frontend/src/components/repository/RepositoriesList.stories.tsx @@ -1,20 +1,19 @@ -// RepositoriesList.stories.ts|tsx - -import { ComponentStory, ComponentMeta } from "@storybook/react"; +import { StoryFn, Meta } from "@storybook/react"; import RepositoriesList from "./RepositoriesList"; -//πŸ‘‡ 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: "RepositoriesList", component: RepositoriesList, -} as ComponentMeta; +} satisfies Meta; + +export default meta; //πŸ‘‡ We create a β€œtemplate” of how args map to rendering -const Template: ComponentStory = () => ( +const Template: StoryFn = () => ( = () => ( /> ); -export const Default = Template.bind({}); +export const Default = { + render: Template, +}; diff --git a/frontend/src/components/repository/RepositoryViewer.stories.tsx b/frontend/src/components/repository/RepositoryViewer.stories.tsx index 69db6cfe..68b0b015 100644 --- a/frontend/src/components/repository/RepositoryViewer.stories.tsx +++ b/frontend/src/components/repository/RepositoryViewer.stories.tsx @@ -1,21 +1,22 @@ -// RepositoryViewer.stories.ts|tsx - -import { ComponentStory, ComponentMeta } from "@storybook/react"; +import { StoryFn, Meta } from "@storybook/react"; import RepositoryViewer from "./RepositoryViewer"; -//πŸ‘‡ 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: "RepositoryViewer", component: RepositoryViewer, -} as ComponentMeta; +} satisfies Meta; + +export default meta; //πŸ‘‡ We create a β€œtemplate” of how args map to rendering -const Template: ComponentStory = () => ( +const Template: StoryFn = () => ( ); -export const Default = Template.bind({}); +export const Default = { + render: Template, +};