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 all commits
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
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 };
2 changes: 1 addition & 1 deletion site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
} from "testHelpers/entities";

const meta: Meta<typeof AuditLogDescription> = {
title: "components/AuditLogDescription",
title: "pages/AuditPage/AuditLogDescription",
component: AuditLogDescription,
};

Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/AuditPage/AuditLogRow/AuditLogRow.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { AuditLogRow } from "./AuditLogRow";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof AuditLogRow> = {
title: "components/AuditLogRow",
title: "pages/AuditPage/AuditLogRow",
component: AuditLogRow,
decorators: [
(Story) => (
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/AuditPage/AuditPageView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const defaultFilterProps = getDefaultFilterProps<FilterProps>({
});

const meta: Meta<typeof AuditPageView> = {
title: "pages/AuditPageView",
title: "pages/AuditPage",
component: AuditPageView,
args: {
auditLogs: [MockAuditLog, MockAuditLog2],
Expand Down
6 changes: 4 additions & 2 deletions site/src/pages/CliAuthPage/CliAuthPageView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { CliAuthPageView } from "./CliAuthPageView";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof CliAuthPageView> = {
title: "pages/CliAuthPageView",
title: "pages/CliAuthPage",
component: CliAuthPageView,
args: {
sessionToken: "some-session-token",
Expand All @@ -12,4 +12,6 @@ const meta: Meta<typeof CliAuthPageView> = {
export default meta;
type Story = StoryObj<typeof CliAuthPageView>;

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

export { Example as CliAuthPage };
2 changes: 1 addition & 1 deletion site/src/pages/CreateTemplatePage/CreateTemplateForm.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { CreateTemplateForm } from "./CreateTemplateForm";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof CreateTemplateForm> = {
title: "components/CreateTemplateForm",
title: "pages/CreateTemplatePage",
component: CreateTemplateForm,
args: {
isSubmitting: false,
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/CreateUserPage/CreateUserForm.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { CreateUserForm } from "./CreateUserForm";
import { mockApiError } from "testHelpers/entities";

const meta: Meta<typeof CreateUserForm> = {
title: "components/CreateUserForm",
title: "pages/CreateUserPage",
component: CreateUserForm,
args: {
onCancel: action("cancel"),
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
import { CreateWorkspacePageView } from "./CreateWorkspacePageView";

const meta: Meta<typeof CreateWorkspacePageView> = {
title: "pages/CreateWorkspacePageView",
title: "pages/CreateWorkspacePage",
component: CreateWorkspacePageView,
args: {
defaultName: "",
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/CreateWorkspacePage/ExternalAuth.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { ExternalAuth } from "./ExternalAuth";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof ExternalAuth> = {
title: "components/ExternalAuth",
title: "pages/CreateWorkspacePage/ExternalAuth",
component: ExternalAuth,
};

Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/CreateWorkspacePage/SelectedTemplate.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { SelectedTemplate } from "./SelectedTemplate";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof SelectedTemplate> = {
title: "components/SelectedTemplate",
title: "pages/CreateWorkspacePage/SelectedTemplate",
component: SelectedTemplate,
};

Expand Down
2 changes: 1 addition & 1 deletion ...rc/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { AppearanceSettingsPageView } from "./AppearanceSettingsPageView";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof AppearanceSettingsPageView> = {
title: "pages/AppearanceSettingsPageView",
title: "pages/DeploySettingsPage/AppearanceSettingsPageView",
component: AppearanceSettingsPageView,
args: {
appearance: {
Expand Down
2 changes: 1 addition & 1 deletion ...ages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { ExternalAuthSettingsPageView } from "./ExternalAuthSettingsPageView";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof ExternalAuthSettingsPageView> = {
title: "pages/ExternalAuthSettingsPageView",
title: "pages/DeploySettingsPage/ExternalAuthSettingsPageView",
component: ExternalAuthSettingsPageView,
args: {
config: {
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
import { GeneralSettingsPageView } from "./GeneralSettingsPageView";

const meta: Meta<typeof GeneralSettingsPageView> = {
title: "pages/GeneralSettingsPageView",
title: "pages/DeploySettingsPage/GeneralSettingsPageView",
component: GeneralSettingsPageView,
args: {
deploymentOptions: [
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { AddNewLicensePageView } from "./AddNewLicensePageView";

export default {
title: "pages/AddNewLicensePageView",
title: "pages/DeploySettingsPage/AddNewLicensePageView",
component: AddNewLicensePageView,
};

Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import LicensesSettingsPageView from "./LicensesSettingsPageView";
import { MockLicenseResponse } from "testHelpers/entities";

export default {
title: "pages/LicensesSettingsPageView",
title: "pages/DeploySettingsPage/LicensesSettingsPageView",
component: LicensesSettingsPageView,
};

Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPageView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const group: ClibaseGroup = {
};

const meta: Meta<typeof NetworkSettingsPageView> = {
title: "pages/NetworkSettingsPageView",
title: "pages/DeploySettingsPage/NetworkSettingsPageView",
component: NetworkSettingsPageView,
args: {
options: [
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const group: ClibaseGroup = {
};

const meta: Meta<typeof SecuritySettingsPageView> = {
title: "pages/SecuritySettingsPageView",
title: "pages/DeploySettingsPage/SecuritySettingsPageView",
component: SecuritySettingsPageView,
args: {
options: [
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const ghGroup: ClibaseGroup = {
};

const meta: Meta<typeof UserAuthSettingsPageView> = {
title: "pages/UserAuthSettingsPageView",
title: "pages/DeploySettingsPage/UserAuthSettingsPageView",
component: UserAuthSettingsPageView,
args: {
options: [
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/ExternalAuthPage/ExternalAuthPageView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import ExternalAuthPageView, {
} from "./ExternalAuthPageView";

export default {
title: "pages/ExternalAuthPageView",
title: "pages/ExternalAuthPage",
component: ExternalAuthPageView,
} as Meta<typeof ExternalAuthPageView>;

Expand Down
6 changes: 4 additions & 2 deletions site/src/pages/GroupsPage/CreateGroupPageView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,13 @@ import { CreateGroupPageView } from "./CreateGroupPageView";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof CreateGroupPageView> = {
title: "pages/CreateGroupPageView",
title: "pages/GroupsPage/CreateGroupPageView",
component: CreateGroupPageView,
};

export default meta;
type Story = StoryObj<typeof CreateGroupPageView>;

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

export { Example as CreateGroupPageView };
2 changes: 1 addition & 1 deletion site/src/pages/GroupsPage/GroupsPageView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { GroupsPageView } from "./GroupsPageView";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof GroupsPageView> = {
title: "pages/GroupsPageView",
title: "pages/GroupsPage",
component: GroupsPageView,
};

Expand Down
6 changes: 4 additions & 2 deletions site/src/pages/GroupsPage/SettingsGroupPageView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,18 @@ import { SettingsGroupPageView } from "./SettingsGroupPageView";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof SettingsGroupPageView> = {
title: "pages/SettingsGroupPageView",
title: "pages/GroupsPage/SettingsGroupPageView",
component: SettingsGroupPageView,
};

export default meta;
type Story = StoryObj<typeof SettingsGroupPageView>;

export const Example: Story = {
const Example: Story = {
args: {
group: MockGroup,
isLoading: false,
},
};

export { Example as SettingsGroupPageView };
6 changes: 3 additions & 3 deletions site/src/pages/HealthPage/HealthPage.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { HealthPageView } from "./HealthPage";
import { MockHealth } from "testHelpers/entities";

const meta: Meta<typeof HealthPageView> = {
title: "pages/HealthPageView",
title: "pages/HealthPage",
component: HealthPageView,
args: {
tab: {
Expand All @@ -17,9 +17,9 @@ const meta: Meta<typeof HealthPageView> = {
export default meta;
type Story = StoryObj<typeof HealthPageView>;

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

export const UnhealthPage: Story = {
export const UnhealthyDERP: Story = {
args: {
healthStatus: {
...MockHealth,
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/LoginPage/LoginPageView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { LoginPageView } from "./LoginPageView";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof LoginPageView> = {
title: "pages/LoginPageView",
title: "pages/LoginPage",
component: LoginPageView,
};

Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/LoginPage/SignInForm.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { SignInForm } from "./SignInForm";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof SignInForm> = {
title: "components/SignInForm",
title: "pages/LoginPage/SignInForm",
component: SignInForm,
args: {
isSigningIn: false,
Expand Down
Loading