Skip to content

Commit

Permalink
Storybook: Improve TypeScript performance for slow stories (#63388)
Browse files Browse the repository at this point in the history 
* Storybook: Improve TS performance for slow stories

* Disable `rules-of-hooks` lint for stories (CSF3 support)

* Fixup

* Revert eslint changes

* Fix unwanted composition in DropdownMenu story

Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com>

* Fixup

---------

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: DaniGuardiola <daniguardiola@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
  • Loading branch information
@mirka @tyxla
4 people committed Jul 12, 2024
1 parent 4777ebd commit d6cea4c
Show file tree
Hide file tree
Showing 6 changed files with 560 additions and 563 deletions.
85 changes: 43 additions & 42 deletions packages/components/src/card/stories/index.story.tsx
View file
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
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 > = {};
112 changes: 58 additions & 54 deletions packages/components/src/dropdown-menu/stories/index.story.tsx
View file
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 } }>
<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,
// 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

0 comments on commit d6cea4c

Please sign in to comment.