Skip to content
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

Storybook: Improve TypeScript performance for slow stories #63388

Merged
merged 6 commits into from
Jul 12, 2024
Merged

Storybook: Improve TypeScript performance for slow stories #63388

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c3c7e03
Storybook: Improve TS performance for slow stories
mirka Jul 10, 2024
67ac6ff
Disable `rules-of-hooks` lint for stories (CSF3 support)
mirka Jul 10, 2024
a34e5d4
Fixup
mirka Jul 11, 2024
24569a5
Revert eslint changes
mirka Jul 12, 2024
96d59ec
Fix unwanted composition in DropdownMenu story
mirka Jul 12, 2024
1c03480
Fixup
mirka Jul 12, 2024
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
85 changes: 43 additions & 42 deletions packages/components/src/card/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';

/**
* Internal dependencies
Expand Down Expand Up @@ -41,51 +41,52 @@ const meta: Meta< typeof Card > = {

export default meta;

const Template: StoryFn< typeof Card > = ( args ) => <Card { ...args } />;

export const Default = Template.bind( {} );
Default.args = {
children: (
<>
<CardHeader>
<Heading>CardHeader</Heading>
</CardHeader>
<CardBody>
<Text>CardBody</Text>
</CardBody>
<CardBody>
<Text>CardBody (before CardDivider)</Text>
</CardBody>
<CardDivider />
<CardBody>
<Text>CardBody (after CardDivider)</Text>
</CardBody>
<CardMedia>
<img
alt="Card Media"
src="https://images.unsplash.com/photo-1566125882500-87e10f726cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1867&q=80"
/>
</CardMedia>
<CardFooter>
<Text>CardFooter</Text>
<Button variant="secondary">Action Button</Button>
</CardFooter>
</>
),
export const Default: StoryObj< typeof Card > = {
args: {
children: (
<>
<CardHeader>
<Heading>CardHeader</Heading>
</CardHeader>
<CardBody>
<Text>CardBody</Text>
</CardBody>
<CardBody>
<Text>CardBody (before CardDivider)</Text>
</CardBody>
<CardDivider />
<CardBody>
<Text>CardBody (after CardDivider)</Text>
</CardBody>
<CardMedia>
<img
alt="Card Media"
src="https://images.unsplash.com/photo-1566125882500-87e10f726cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1867&q=80"
/>
</CardMedia>
<CardFooter>
<Text>CardFooter</Text>
<Button variant="secondary">Action Button</Button>
</CardFooter>
</>
),
},
};

/**
* `CardMedia` provides a container for full-bleed content within a `Card`,
* such as images, video, or even just a background color. The corners will be rounded if necessary.
*/
export const FullBleedContent = Template.bind( {} );
FullBleedContent.args = {
...Default.args,
children: (
<CardMedia>
<div style={ { padding: 16, background: 'beige' } }>
Some full bleed content
</div>
</CardMedia>
),
export const FullBleedContent: StoryObj< typeof Card > = {
...Default,
args: {
...Default.args,
children: (
<CardMedia>
<div style={ { padding: 16, background: 'beige' } }>
Some full bleed content
</div>
</CardMedia>
),
},
};
24 changes: 2 additions & 22 deletions packages/components/src/color-picker/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react';

/**
* WordPress dependencies
*/
import { useState } from '@wordpress/element';
import type { Meta, StoryObj } from '@storybook/react';

/**
* Internal dependencies
Expand All @@ -30,19 +25,4 @@ const meta: Meta< typeof ColorPicker > = {
};
export default meta;

const Template: StoryFn< typeof ColorPicker > = ( { onChange, ...props } ) => {
const [ color, setColor ] = useState< string | undefined >();

return (
<ColorPicker
{ ...props }
color={ color }
onChange={ ( ...changeArgs ) => {
onChange?.( ...changeArgs );
setColor( ...changeArgs );
} }
/>
);
};

export const Default = Template.bind( {} );
export const Default: StoryObj< typeof ColorPicker > = {};
Copy link
Member Author

Choose a reason for hiding this comment

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

Switched to an uncontrolled story for simplicity.

112 changes: 58 additions & 54 deletions packages/components/src/dropdown-menu/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';

/**
* Internal dependencies
Expand Down Expand Up @@ -43,39 +43,42 @@ const meta: Meta< typeof DropdownMenu > = {
};
export default meta;

const Template: StoryFn< typeof DropdownMenu > = ( props ) => (
<div style={ { height: 150 } }>
<DropdownMenu { ...props } />
</div>
);

export const Default = Template.bind( {} );
Default.args = {
label: 'Select a direction.',
icon: menu,
controls: [
{
title: 'First Menu Item Label',
icon: arrowUp,
// eslint-disable-next-line no-console
onClick: () => console.log( 'up!' ),
},
{
title: 'Second Menu Item Label',
icon: arrowDown,
// eslint-disable-next-line no-console
onClick: () => console.log( 'down!' ),
},
export const Default: StoryObj< typeof DropdownMenu > = {
decorators: [
( Story ) => (
<div style={ { height: 150 } }>
Copy link
Member Author

Choose a reason for hiding this comment

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

I noticed these explicit heights are no longer necessary due to #53889, because popovers are now rendering at the end of the document rather than within the each story div, which used to cut them off visually. I'll do a separate cleanup PR.

Copy link
Member Author

Choose a reason for hiding this comment

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

Cleanup at #63480

<Story />
</div>
),
],
args: {
label: 'Select a direction.',
icon: menu,
controls: [
{
title: 'First Menu Item Label',
icon: arrowUp,
// eslint-disable-next-line no-console
onClick: () => console.log( 'up!' ),
},
{
title: 'Second Menu Item Label',
icon: arrowDown,
// eslint-disable-next-line no-console
onClick: () => console.log( 'down!' ),
},
],
},
};

export const WithChildren = Template.bind( {} );
// Adding custom source because Storybook is not able to show the contents of
// the `children` prop correctly in the code snippet.
WithChildren.parameters = {
docs: {
source: {
code: `<DropdownMenu label="Select a direction." icon={ more }>
export const WithChildren: StoryObj< typeof DropdownMenu > = {
...Default,
mirka marked this conversation as resolved.
Show resolved Hide resolved
// Adding custom source because Storybook is not able to show the contents of
// the `children` prop correctly in the code snippet.
parameters: {
docs: {
source: {
code: `<DropdownMenu label="Select a direction." icon={ more }>
<MenuGroup>
<MenuItem icon={ arrowUp } onClick={ onClose }>
Move Up
Expand All @@ -90,29 +93,30 @@ WithChildren.parameters = {
</MenuItem>
</MenuGroup>
</DropdownMenu>`,
language: 'jsx',
type: 'auto',
language: 'jsx',
type: 'auto',
},
},
},
};
WithChildren.args = {
label: 'Select a direction.',
icon: more,
children: ( { onClose } ) => (
<>
<MenuGroup>
<MenuItem icon={ arrowUp } onClick={ onClose }>
Move Up
</MenuItem>
<MenuItem icon={ arrowDown } onClick={ onClose }>
Move Down
</MenuItem>
</MenuGroup>
<MenuGroup>
<MenuItem icon={ trash } onClick={ onClose }>
Remove
</MenuItem>
</MenuGroup>
</>
),
args: {
label: 'Select a direction.',
icon: more,
children: ( { onClose } ) => (
<>
<MenuGroup>
<MenuItem icon={ arrowUp } onClick={ onClose }>
Move Up
</MenuItem>
<MenuItem icon={ arrowDown } onClick={ onClose }>
Move Down
</MenuItem>
</MenuGroup>
<MenuGroup>
<MenuItem icon={ trash } onClick={ onClose }>
Remove
</MenuItem>
</MenuGroup>
</>
),
},
};
Loading
Loading