Docs/storybook improvements (#877)

* docs: use PageDecorator

* docs: use decorators in TableHeader stories

* docs: use theming parameter in App stories

* docs: enable auto-generated docs for stories

Closes #702
This commit is contained in:
Thaïs
2023-07-24 20:06:37 +02:00
committed by GitHub
parent 07180af8c0
commit c16d420d17
23 changed files with 339 additions and 342 deletions

View File

@ -1,35 +1,35 @@
import type { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/testing-library';
import {
PageDecorator,
type PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { getRenderWrapperForPage } from '~/testing/renderWrappers';
import { SettingsProfile } from '../SettingsProfile';
const meta: Meta<typeof SettingsProfile> = {
const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Settings/SettingsProfile',
component: SettingsProfile,
decorators: [PageDecorator],
args: { currentPath: '/settings/profile' },
parameters: {
docs: { story: 'inline', iframeHeight: '500px' },
msw: graphqlMocks,
},
};
export default meta;
export type Story = StoryObj<typeof SettingsProfile>;
export const Default: Story = {
render: getRenderWrapperForPage(<SettingsProfile />, '/settings/profile'),
parameters: {
msw: graphqlMocks,
},
};
export const Default: Story = {};
export const LogOut: Story = {
render: getRenderWrapperForPage(<SettingsProfile />, '/settings/profile'),
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const logoutButton = await canvas.findByText('Logout');
await logoutButton.click();
},
parameters: {
msw: graphqlMocks,
},
};

View File

@ -1,14 +1,23 @@
import type { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/testing-library';
import {
PageDecorator,
type PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { getRenderWrapperForPage } from '~/testing/renderWrappers';
import { SettingsWorkspaceMembers } from '../SettingsWorkspaceMembers';
const meta: Meta<typeof SettingsWorkspaceMembers> = {
const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Settings/SettingsWorkspaceMembers',
component: SettingsWorkspaceMembers,
decorators: [PageDecorator],
args: { currentPath: '/settings/workspace-members' },
parameters: {
docs: { story: 'inline', iframeHeight: '500px' },
msw: graphqlMocks,
},
};
export default meta;
@ -16,13 +25,6 @@ export default meta;
export type Story = StoryObj<typeof SettingsWorkspaceMembers>;
export const Default: Story = {
render: getRenderWrapperForPage(
<SettingsWorkspaceMembers />,
'/settings/workspace-members',
),
parameters: {
msw: graphqlMocks,
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await canvas.findByText('Copy link');