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, +};