Skip to content

chore: reorganize storybook #10144

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 9, 2023
Merged

chore: reorganize storybook #10144

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
950d93e
promote single stories
aslilac Oct 9, 2023
5bad6e3
reorganize pages stories
aslilac Oct 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
promote single stories
  • Loading branch information
@aslilac
aslilac committed Oct 9, 2023
commit 950d93eeebc8e63e4fd571d12950da90f5b524af
2 changes: 1 addition & 1 deletion site/src/components/Alert/ErrorAlert.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const mockError = mockApiError({
});

const meta: Meta<typeof ErrorAlert> = {
title: "components/ErrorAlert",
title: "components/Alert/ErrorAlert",
component: ErrorAlert,
args: {
error: mockError,
Expand Down
4 changes: 3 additions & 1 deletion site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,6 @@ const meta: Meta<typeof UserDropdown> = {
export default meta;
type Story = StoryObj<typeof UserDropdown>;

export const Example: Story = {};
const Example: Story = {};

export { Example as UserDropdown };
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, could you explain what's going on with this line? I feel like there's something Storybook-specific that I'm missing.

From what I can tell, the code is:

  1. Exporting an anonymous/unnamed object
  2. Passing in Example via object shorthand
  3. It's also using the as keyword, but I'm not completely sure if this is the TS type-assertion version, or the JS module exports version

My guess is that this is just a named export that exports Example with the type of UserDropdown?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if you export a story that has the same name as the last bit of the "path", then storybook will flatten it.

...but we can't export const UserDropdown because this file already imports a UserDropdown component, so that name is taken, and we can't redeclare it. so we have to define it with a different name, and then use this syntax to say "export that variable, but with this as the name instead"

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

so there's no object literal here. it's analogous to import { SomeThing as SomeThingElse } from "...";.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, cool. That makes sense. Thanks for explaining!

4 changes: 3 additions & 1 deletion site/src/components/Dialogs/DeleteDialog/DeleteDialog.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,6 @@ const meta: Meta<typeof DeleteDialog> = {
export default meta;
type Story = StoryObj<typeof DeleteDialog>;

export const Example: Story = {};
const Example: Story = {};

export { Example as DeleteDialog };
4 changes: 3 additions & 1 deletion site/src/components/EmptyState/EmptyState.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,11 @@ const meta: Meta<typeof EmptyState> = {
export default meta;
type Story = StoryObj<typeof EmptyState>;

export const Example: Story = {
const Example: Story = {
args: {
description: "It is easy, just click the button below",
cta: <Button>Create workspace</Button>,
},
};

export { Example as EmptyState };
4 changes: 3 additions & 1 deletion site/src/components/FullPageForm/FullPageForm.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,11 @@ const meta: Meta<typeof FullPageForm> = {
export default meta;
type Story = StoryObj<typeof FullPageForm>;

export const Example: Story = {
const Example: Story = {
args: {
title: "My Form",
detail: "Lorem ipsum dolor",
},
};

export { Example as FullPageForm };
4 changes: 3 additions & 1 deletion site/src/components/GroupAvatar/GroupAvatar.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,11 @@ const meta: Meta<typeof GroupAvatar> = {
export default meta;
type Story = StoryObj<typeof GroupAvatar>;

export const Example: Story = {
const Example: Story = {
args: {
name: "My Group",
avatarURL: "",
},
};

export { Example as GroupAvatar };
4 changes: 3 additions & 1 deletion site/src/components/HelpTooltip/HelpTooltip.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,4 +33,6 @@ const meta: Meta<typeof HelpTooltip> = {
export default meta;
type Story = StoryObj<typeof HelpTooltip>;

export const Example: Story = {};
const Example: Story = {};

export { Example as HelpTooltip };
4 changes: 3 additions & 1 deletion site/src/components/Margins/Margins.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const meta: Meta<typeof Margins> = {
export default meta;
type Story = StoryObj<typeof Margins>;

export const Example: Story = {
const Example: Story = {
args: {
children: (
<div style={{ width: "100%", background: "black" }}>
Expand All @@ -18,3 +18,5 @@ export const Example: Story = {
),
},
};

export { Example as Margins };
4 changes: 3 additions & 1 deletion site/src/components/OverflowY/OverflowY.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,4 +31,6 @@ const meta: Meta<typeof OverflowY> = {
export default meta;

type Story = StoryObj<typeof OverflowY>;
export const Example: Story = {};
const Example: Story = {};

export { Example as OverflowY };
4 changes: 3 additions & 1 deletion site/src/components/PopoverContainer/PopoverContainer.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,6 @@ const meta: Meta<typeof PopoverContainer> = {
export default meta;

type Story = StoryObj<typeof PopoverContainer>;
export const Example: Story = {};
const Example: Story = {};

export { Example as PopoverContainer };
4 changes: 3 additions & 1 deletion site/src/components/Resources/AgentMetadata.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const descriptionDefaults: WorkspaceAgentMetadataDescription = {
script: "some command",
};

export const Example: Story = {
const Example: Story = {
args: {
metadata: [
{
Expand Down Expand Up @@ -105,3 +105,5 @@ export const Example: Story = {
],
},
};

export { Example as AgentMetadata };
4 changes: 3 additions & 1 deletion site/src/components/Resources/TerminalLink/TerminalLink.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,10 @@ const meta: Meta<typeof TerminalLink> = {
export default meta;
type Story = StoryObj<typeof TerminalLink>;

export const Example: Story = {
const Example: Story = {
args: {
workspaceName: MockWorkspace.name,
},
};

export { Example as TerminalLink };
4 changes: 3 additions & 1 deletion site/src/components/TableRowMenu/TableRowMenu.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const meta: Meta<typeof TableRowMenu> = {
export default meta;
type Story = StoryObj<typeof TableRowMenu<{ id: string }>>;

export const Example: Story = {
const Example: Story = {
args: {
data: { id: "123" },
menuItems: [
Expand All @@ -20,3 +20,5 @@ export const Example: Story = {
],
},
};

export { Example as TableRowMenu };