mirror/helm-dashboard
1
0
Fork 0
mirror of https://github.com/komodorio/helm-dashboard.git synced 2026-03-24 11:48:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrated Storybook notation from CSF2 to CSF3 (#487)

Browse Source 
* 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
This commit is contained in:
kame
2023-11-02 03:11:57 +09:00
committed by GitHub
parent f465c83c07
commit de1915e1c2
23 changed files with 415 additions and 467 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/components/Badge.stories.tsx
View File

@@ -14,31 +14,26 @@
* @see https://storybook.js.org/docs/react/writing-stories/introduction * @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. // We set the metadata for the story.
// Refer to https://storybook.js.org/docs/react/writing-stories/introduction // Refer to https://storybook.js.org/docs/react/writing-stories/introduction
// for more information. // for more information.
export default { const meta = {
title: "Badge", title: "Badge",
component: Badge, component: Badge,
args: { args: {
type: "success", type: "success",
children: "Success", children: "Success",
}, },
} satisfies Meta<typeof Badge>;
export default meta;
export const Default = {
args: {
type: "success",
children: "Success",
},
}; };

41
frontend/src/components/Button.stories.tsx
View File

@@ -1,35 +1,28 @@
/* eslint-disable no-console */ /* 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. /* 👇 The title prop is optional.
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles * to learn how to generate automatic titles
*/ */
title: "Button", title: "Button",
component: 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. children: (
const Template: ComponentStory<typeof Button> = (args: ButtonProps) => ( <>
<Button {...args} /> <span>&uarr;</span>
); <span>Update</span>
export const Default = Template.bind({}); </>
Default.args = { ),
children: ( onClick: () => {
<> console.log("click");
<span>&uarr;</span> },
<span>Update</span>
</>
),
onClick: () => {
console.log("click");
}, },
}; };

17
frontend/src/components/ClustersList.stories.tsx
View File

@@ -1,21 +1,20 @@
/* eslint-disable no-console */ /* eslint-disable no-console */
// ClustersListBar.stories.ts|tsx import { StoryFn, Meta } from "@storybook/react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import ClustersList from "./ClustersList"; 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. /* 👇 The title prop is optional.
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles * to learn how to generate automatic titles
*/ */
title: "ClustersList", title: "ClustersList",
component: ClustersList, component: ClustersList,
} as ComponentMeta<typeof ClustersList>; } satisfies Meta<typeof ClustersList>;
export default meta;
//👇 We create a “template” of how args map to rendering //👇 We create a “template” of how args map to rendering
const Template: ComponentStory<typeof ClustersList> = () => ( const Template: StoryFn<typeof ClustersList> = () => (
<ClustersList <ClustersList
filteredNamespaces={[""]} filteredNamespaces={[""]}
installedReleases={[]} installedReleases={[]}
@@ -26,4 +25,6 @@ const Template: ComponentStory<typeof ClustersList> = () => (
/> />
); );
export const Default = Template.bind({}); export const Default = {
render: Template,
};

52
frontend/src/components/InstalledPackages/InstalledPackageCard.stories.tsx
View File

@@ -1,41 +1,35 @@
// InstalledPackageCard.stories.ts|tsx import { Meta } from "@storybook/react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import InstalledPackageCard from "./InstalledPackageCard"; 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. /* 👇 The title prop is optional.
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles * to learn how to generate automatic titles
*/ */
title: "InstalledPackageCard", title: "InstalledPackageCard",
component: 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: {
release: { id: "",
id: "", name: "",
name: "", namespace: "",
namespace: "", revision: 1,
revision: 1, updated: "",
updated: "", status: "",
status: "", chart: "",
chart: "", chart_name: "",
chart_name: "", chart_ver: "",
chart_ver: "", app_version: "",
app_version: "", icon: "",
icon: "", description: "",
description: "", has_tests: false,
has_tests: false, chartName: "", // duplicated in some cases in the backend, we need to resolve this
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
chartVersion: "", // duplicated in some cases in the backend, we need to resolve this },
}, },
}; };

92
frontend/src/components/InstalledPackages/InstalledPackagesHeader.stories.tsx
View File

@@ -1,60 +1,54 @@
// InstalledPackagesHeader.stories.ts|tsx import { Meta } from "@storybook/react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import InstalledPackagesHeader from "./InstalledPackagesHeader"; 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. /* 👇 The title prop is optional.
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles * to learn how to generate automatic titles
*/ */
title: "InstalledPackagesHeader", title: "InstalledPackagesHeader",
component: 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: [
filteredReleases: [ {
{ id: "",
id: "", name: "",
name: "", namespace: "",
namespace: "", revision: 1,
revision: 1, updated: "",
updated: "", status: "",
status: "", chart: "",
chart: "", chart_name: "",
chart_name: "", chart_ver: "",
chart_ver: "", app_version: "",
app_version: "", icon: "",
icon: "", description: "",
description: "", has_tests: false,
has_tests: false, chartName: "", // duplicated in some cases in the backend, we need to resolve this
chartName: "", // duplicated in some cases in the backend, we need to resolve this chartVersion: "", // duplicated in some cases in the
chartVersion: "", // duplicated in some cases in the },
}, {
{ id: "",
id: "", name: "",
name: "", namespace: "",
namespace: "", revision: 1,
revision: 1, updated: "",
updated: "", status: "",
status: "", chart: "",
chart: "", chart_name: "",
chart_name: "", chart_ver: "",
chart_ver: "", app_version: "",
app_version: "", icon: "",
icon: "", description: "",
description: "", has_tests: false,
has_tests: false, chartName: "", // duplicated in some cases in the backend, we need to resolve this
chartName: "", // duplicated in some cases in the backend, we need to resolve this chartVersion: "", // duplicated in some cases in the
chartVersion: "", // duplicated in some cases in the },
}, ],
], },
}; };

92
frontend/src/components/InstalledPackages/InstalledPackagesList.stories.tsx
View File

@@ -1,60 +1,54 @@
// InstalledPackagesList.stories.ts|tsx import { Meta } from "@storybook/react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import InstalledPackagesList from "./InstalledPackagesList"; 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. /* 👇 The title prop is optional.
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles * to learn how to generate automatic titles
*/ */
title: "InstalledPackagesList", title: "InstalledPackagesList",
component: 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: [
installedReleases: [ {
{ id: "",
id: "", name: "",
name: "", namespace: "",
namespace: "", revision: 1,
revision: 1, updated: "",
updated: "", status: "",
status: "", chart: "",
chart: "", chart_name: "",
chart_name: "", chart_ver: "",
chart_ver: "", app_version: "",
app_version: "", icon: "",
icon: "", description: "",
description: "", has_tests: false,
has_tests: false, chartName: "", // duplicated in some cases in the backend, we need to resolve this
chartName: "", // duplicated in some cases in the backend, we need to resolve this chartVersion: "", // duplicated in some cases in the
chartVersion: "", // duplicated in some cases in the },
}, {
{ id: "",
id: "", name: "",
name: "", namespace: "",
namespace: "", revision: 1,
revision: 1, updated: "",
updated: "", status: "",
status: "", chart: "",
chart: "", chart_name: "",
chart_name: "", chart_ver: "",
chart_ver: "", app_version: "",
app_version: "", icon: "",
icon: "", description: "",
description: "", has_tests: false,
has_tests: false, chartName: "", // duplicated in some cases in the backend, we need to resolve this
chartName: "", // duplicated in some cases in the backend, we need to resolve this chartVersion: "", // duplicated in some cases in the
chartVersion: "", // duplicated in some cases in the },
}, ],
], },
}; };

35
frontend/src/components/SelectMenu.stories.tsx
View File

@@ -7,32 +7,29 @@
* The default story renders the component with the default props. * 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. /* 👇 The title prop is optional.
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles * to learn how to generate automatic titles
*/ */
title: "SelectMenu", title: "SelectMenu",
component: 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", header: "Header",
children: [ children: [
<SelectMenuItem label="Item 1" id={1} key="item1" />, <SelectMenuItem label="Item 1" id={1} key="item1" />,
<SelectMenuItem label="Item 2" id={2} key="item2" />, <SelectMenuItem label="Item 2" id={2} key="item2" />,
<SelectMenuItem label="Item 3" id={3} key="item3" />, <SelectMenuItem label="Item 3" id={3} key="item3" />,
], ],
selected: 1, selected: 1,
onSelect: (id: number) => console.log(id), onSelect: (id: number) => console.log(id),
},
}; };

19
frontend/src/components/ShutDownButton.stories.tsx
View File

@@ -1,21 +1,20 @@
// TabsBar.stories.ts|tsx import { StoryFn, Meta } from "@storybook/react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import ShutDownButton from "./ShutDownButton"; 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. /* 👇 The title prop is optional.
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles * to learn how to generate automatic titles
*/ */
title: "ShutDownButton", title: "ShutDownButton",
component: ShutDownButton, component: ShutDownButton,
} as ComponentMeta<typeof ShutDownButton>; } satisfies Meta<typeof ShutDownButton>;
export default meta;
//👇 We create a “template” of how args map to rendering //👇 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,
};

19
frontend/src/components/Tabs.stories.tsx
View File

@@ -1,22 +1,16 @@
// TabsBar.stories.ts|tsx import { Meta } from "@storybook/react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import Tabs from "./Tabs"; 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. /* 👇 The title prop is optional.
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles * to learn how to generate automatic titles
*/ */
title: "Tabs", title: "Tabs",
component: 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 = { const defaultArgs = {
tabs: [ tabs: [
@@ -35,5 +29,6 @@ const defaultArgs = {
], ],
}; };
//@ts-ignore export const Default = {
Default.args = defaultArgs; args: defaultArgs,
};

50
frontend/src/components/TabsBar.stories.tsx
View File

@@ -1,39 +1,33 @@
// TabsBar.stories.ts|tsx import { Meta } from "@storybook/react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import TabsBar from "./TabsBar"; 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. /* 👇 The title prop is optional.
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles * to learn how to generate automatic titles
*/ */
title: "TabsBar", title: "TabsBar",
component: 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: [
tabs: [ {
{ name: "tab1",
name: "tab1", component: <div className="w-250 h-250 bg-green-400">tab1</div>,
component: <div className="w-250 h-250 bg-green-400">tab1</div>, },
}, {
{ name: "tab2",
name: "tab2", component: <div className="w-250 h-250 bg-red-400">tab2</div>,
component: <div className="w-250 h-250 bg-red-400">tab2</div>, },
}, {
{ name: "tab3",
name: "tab3", component: <div className="w-250 h-250 bg-blue-400">tab3</div>,
component: <div className="w-250 h-250 bg-blue-400">tab3</div>, },
}, ],
], activeTab: "tab1",
activeTab: "tab1", },
}; };

25
frontend/src/components/TextInput.stories.tsx
View File

@@ -4,27 +4,24 @@
* the first story simply renders the component with the default props. * 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. /* 👇 The title prop is optional.
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles * to learn how to generate automatic titles
*/ */
title: "TextInput", title: "TextInput",
component: 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", label: "Label",
placeholder: "Placeholder", placeholder: "Placeholder",
isMandatory: false, isMandatory: false,
},
}; };

11
frontend/src/components/Troubleshoot.stories.tsx
View File

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

44
frontend/src/components/common/Button/Button.stories.tsx
View File

@@ -1,40 +1,42 @@
import { ComponentStory, ComponentMeta } from "@storybook/react"; import { Meta } from "@storybook/react";
import { Button } from "./Button"; import { Button } from "./Button";
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default { const meta = {
title: "Example/Button", title: "Example/Button",
component: Button, component: Button,
// More on argTypes: https://storybook.js.org/docs/react/api/argtypes // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
argTypes: { argTypes: {
backgroundColor: { control: "color" }, 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,
primary: true, label: "Button",
label: "Button", },
}; };
export const Secondary = Template.bind({}); export const Secondary = {
Secondary.args = { args: {
label: "Button", label: "Button",
},
}; };
export const Large = Template.bind({}); export const Large = {
Large.args = { args: {
size: "large", size: "large",
label: "Button", label: "Button",
},
}; };
export const Small = Template.bind({}); export const Small = {
Small.args = { args: {
size: "small", size: "small",
label: "Button", label: "Button",
},
}; };

32
frontend/src/components/common/DropDown.stories.tsx
View File

@@ -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 DropDown from "./DropDown";
import { BsSlack, BsGithub } from "react-icons/bs"; 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. /* 👇 The title prop is optional.
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles * to learn how to generate automatic titles
*/ */
title: "DropDown", title: "DropDown",
component: 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 = () => { const onClick = () => {
// eslint-disable-next-line no-console
console.log("drop down clicked"); console.log("drop down clicked");
}; };
Default.args = { export const Default = {
items: [ args: {
{ id: "1", text: "Menu Item 1", onClick: onClick, icon: <BsSlack /> }, items: [
{ id: "2 ", isSeparator: true }, { id: "1", text: "Menu Item 1", onClick: onClick, icon: <BsSlack /> },
{ id: "3", text: "Menu Item 3", isDisabled: true, icon: <BsGithub /> }, { id: "2 ", isSeparator: true },
], { id: "3", text: "Menu Item 3", isDisabled: true, icon: <BsGithub /> },
],
},
}; };

22
frontend/src/components/common/Header/Header.stories.tsx
View File

@@ -1,24 +1,26 @@
import { ComponentStory, ComponentMeta } from "@storybook/react"; import { Meta } from "@storybook/react";
import { Header } from "./Header"; import { Header } from "./Header";
export default { const meta = {
title: "Example/Header", title: "Example/Header",
component: Header, component: Header,
parameters: { parameters: {
// More on Story layout: https://storybook.js.org/docs/react/configure/story-layout // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
layout: "fullscreen", 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: { user: {
name: "Jane Doe", name: "Jane Doe",
},
}, },
}; };
export const LoggedOut = Template.bind({}); export const LoggedOut = {
LoggedOut.args = {}; args: {},
};

23
frontend/src/components/common/Page/Page.stories.tsx
View File

@@ -1,25 +1,24 @@
import { ComponentStory, ComponentMeta } from "@storybook/react"; import { Meta, StoryObj } from "@storybook/react";
import { within, userEvent } from "@storybook/testing-library"; import { within, userEvent } from "@storybook/testing-library";
import { Page } from "./Page"; import { Page } from "./Page";
export default { const meta = {
title: "Example/Page", title: "Example/Page",
component: Page, component: Page,
parameters: { parameters: {
// More on Story layout: https://storybook.js.org/docs/react/configure/story-layout // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
layout: "fullscreen", 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 const canvas = within(canvasElement);
LoggedIn.play = async ({ canvasElement }) => { const loginButton = await canvas.getByRole("button", { name: /Log in/i });
const canvas = within(canvasElement); await userEvent.click(loginButton);
const loginButton = await canvas.getByRole("button", { name: /Log in/i }); },
await userEvent.click(loginButton);
}; };

54
frontend/src/components/common/StatusLabel.stories.tsx
View File

@@ -1,39 +1,37 @@
import { ComponentStory } from "@storybook/react"; import { Meta } from "@storybook/react";
import StatusLabel, { DeploymentStatus } from "./StatusLabel"; import StatusLabel, { DeploymentStatus } from "./StatusLabel";
export default { const meta = {
title: "StatusLabel", title: "StatusLabel",
component: StatusLabel, component: StatusLabel,
} satisfies Meta<typeof StatusLabel>;
export default meta;
export const Deployed = {
args: {
status: DeploymentStatus.DEPLOYED,
isRollback: false,
},
}; };
const Template: ComponentStory<typeof StatusLabel> = (args) => ( export const Failed = {
<StatusLabel {...args} /> args: {
); status: DeploymentStatus.FAILED,
isRollback: false,
export const Deployed = Template.bind({}); },
Deployed.args = {
status: DeploymentStatus.DEPLOYED,
isRollback: false,
}; };
export const Failed = Template.bind({}); export const Pending = {
args: {
Failed.args = { status: DeploymentStatus.PENDING,
status: DeploymentStatus.FAILED, isRollback: false,
isRollback: false, },
}; };
export const Pending = Template.bind({}); export const Superseded = {
args: {
Pending.args = { status: DeploymentStatus.SUPERSEDED,
status: DeploymentStatus.PENDING, isRollback: false,
isRollback: false, },
};
export const Superseded = Template.bind({});
Superseded.args = {
status: DeploymentStatus.SUPERSEDED,
isRollback: false,
}; };

21
frontend/src/components/modal/AddRepositoryModal.stories.tsx
View File

@@ -1,25 +1,26 @@
// Modal.stories.ts|tsx import { StoryFn, Meta } from "@storybook/react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import AddRepositoryModal from "./AddRepositoryModal"; 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. /* 👇 The title prop is optional.
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles * to learn how to generate automatic titles
*/ */
title: "AddRepositoryModal", title: "AddRepositoryModal",
component: AddRepositoryModal, component: AddRepositoryModal,
} as ComponentMeta<typeof AddRepositoryModal>; } satisfies Meta<typeof AddRepositoryModal>;
export default meta;
//👇 We create a “template” of how args map to rendering //👇 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} /> <AddRepositoryModal {...args} isOpen={true} />
); );
export const Default = Template.bind({}); export const Default = {
render: Template,
Default.args = { args: {
isOpen: true, isOpen: true,
},
}; };

30
frontend/src/components/modal/ErrorModal.stories.tsx
View File

@@ -1,31 +1,25 @@
/* eslint-disable no-console */ /* eslint-disable no-console */
// Modal.stories.ts|tsx import { Meta } from "@storybook/react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import ErrorModal from "./ErrorModal"; 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. /* 👇 The title prop is optional.
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles * to learn how to generate automatic titles
*/ */
title: "ErrorModal", title: "ErrorModal",
component: 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: () => {
onClose: () => { console.log("on Close clicked");
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.",
}, },
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.",
}; };

120
frontend/src/components/modal/Modal.stories.tsx
View File

@@ -1,26 +1,23 @@
/* eslint-disable no-console */ /* 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"; 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. /* 👇 The title prop is optional.
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles * to learn how to generate automatic titles
*/ */
title: "Modal", title: "Modal",
component: Modal, component: Modal,
} as ComponentMeta<typeof Modal>; } satisfies Meta<typeof Modal>;
export default meta;
//👇 We create a “template” of how args map to rendering //👇 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> <Modal {...args}>Basic text content</Modal>
); );
export const Default = Template.bind({});
const confirmModalActions: ModalAction[] = [ const confirmModalActions: ModalAction[] = [
{ {
id: "1", id: "1",
@@ -39,10 +36,14 @@ const confirmModalActions: ModalAction[] = [
}, },
]; ];
Default.args = { export const Default = {
title: "Basic text title", render: Template,
isOpen: true,
actions: confirmModalActions, args: {
title: "Basic text title",
isOpen: true,
actions: confirmModalActions,
},
}; };
const customModalActions: ModalAction[] = [ const customModalActions: ModalAction[] = [
@@ -65,52 +66,55 @@ const customModalActions: ModalAction[] = [
}, },
]; ];
export const CustomModal: ComponentStory<typeof Modal> = (args) => ( export const CustomModal: StoryObj<typeof Modal> = {
<Modal {...args}> render: (args) => (
<div> <Modal {...args}>
<p className="text-base leading-relaxed text-gray-500 dark:text-gray-400"> <div>
Custom Modal Content <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
</p> Custom Modal Content
<button </p>
className="bg-cyan-500 p-2" <button
type="button" className="bg-cyan-500 p-2"
onClick={() => console.log("just a button")} type="button"
> onClick={() => console.log("just a button")}
Just a button >
</button> Just a button
</div> </button>
</Modal> </div>
); </Modal>
CustomModal.args = {
title: (
<div>
Custom <span className="text-red-500"> Title</span>
</div>
), ),
isOpen: true,
actions: customModalActions, args: {
title: (
<div>
Custom <span className="text-red-500"> Title</span>
</div>
),
isOpen: true,
actions: customModalActions,
},
}; };
export const AutoScrollWhenContentIsMoreThan500Height: ComponentStory< export const AutoScrollWhenContentIsMoreThan500Height: StoryObj<typeof Modal> =
typeof Modal {
> = (args) => ( render: (args) => (
<Modal {...args}> <Modal {...args}>
<div <div
style={{ style={{
height: "1000px", height: "1000px",
width: "50%", width: "50%",
backgroundColor: "skyblue", 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> </div>
</Modal> </Modal>
); ),
AutoScrollWhenContentIsMoreThan500Height.args = { args: {
title: "Auto Scroll when content is more than 500px height", title: "Auto Scroll when content is more than 500px height",
isOpen: true, isOpen: true,
actions: confirmModalActions, actions: confirmModalActions,
}; },
};

20
frontend/src/components/repository/ChartViewer.stories.tsx
View File

@@ -1,24 +1,17 @@
// ChartViewer.stories.ts|tsx import { Meta } from "@storybook/react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import ChartViewer from "./ChartViewer"; import ChartViewer from "./ChartViewer";
//👇 This default export determines where your story goes in the story list //👇 This default export determines where your story goes in the story list
export default { const meta = {
/* 👇 The title prop is optional. /* 👇 The title prop is optional.
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles * to learn how to generate automatic titles
*/ */
title: "ChartViewer", title: "ChartViewer",
component: 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 = { const defaultArgs = {
chart: { chart: {
@@ -28,5 +21,6 @@ const defaultArgs = {
}, },
}; };
//@ts-ignore export const Default = {
Default.args = defaultArgs; args: defaultArgs,
};

17
frontend/src/components/repository/RepositoriesList.stories.tsx
View File

@@ -1,20 +1,19 @@
// RepositoriesList.stories.ts|tsx import { StoryFn, Meta } from "@storybook/react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import RepositoriesList from "./RepositoriesList"; 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. /* 👇 The title prop is optional.
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles * to learn how to generate automatic titles
*/ */
title: "RepositoriesList", title: "RepositoriesList",
component: RepositoriesList, component: RepositoriesList,
} as ComponentMeta<typeof RepositoriesList>; } satisfies Meta<typeof RepositoriesList>;
export default meta;
//👇 We create a “template” of how args map to rendering //👇 We create a “template” of how args map to rendering
const Template: ComponentStory<typeof RepositoriesList> = () => ( const Template: StoryFn<typeof RepositoriesList> = () => (
<RepositoriesList <RepositoriesList
selectedRepository={undefined} selectedRepository={undefined}
// in this case we allow Unexpected empty method // 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,
};

17
frontend/src/components/repository/RepositoryViewer.stories.tsx
View File

@@ -1,21 +1,22 @@
// RepositoryViewer.stories.ts|tsx import { StoryFn, Meta } from "@storybook/react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import RepositoryViewer from "./RepositoryViewer"; 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. /* 👇 The title prop is optional.
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles * to learn how to generate automatic titles
*/ */
title: "RepositoryViewer", title: "RepositoryViewer",
component: RepositoryViewer, component: RepositoryViewer,
} as ComponentMeta<typeof RepositoryViewer>; } satisfies Meta<typeof RepositoryViewer>;
export default meta;
//👇 We create a “template” of how args map to rendering //👇 We create a “template” of how args map to rendering
const Template: ComponentStory<typeof RepositoryViewer> = () => ( const Template: StoryFn<typeof RepositoryViewer> = () => (
<RepositoryViewer repository={undefined} /> <RepositoryViewer repository={undefined} />
); );
export const Default = Template.bind({}); export const Default = {
render: Template,
};