Image for post
Image for post

Introducing Storybook Args

Next-gen, dynamic component examples

Michael Shilman
Jul 9 · 7 min read
  • 🚚 Reuse fixture data across stories
  • ♻️ Recycle stories in a broader variety of tools

💡 Why dynamic data?

Storybook’s Component Story Format (CSF) is an emerging standard for component examples, introduced in Storybook 5.2. CSF files are ES6 modules without any Storybook-specific extensions. As such, they are simple, portable, and future-proof:

export const Basic = () => (
<Button label='hello' />
);
export const Basic = (args) => <Button {...args} />;
Basic.args = { label: 'hello' };
Image for post
Image for post
Dynamic data enables you to live edit components

🗜 Reduce story boilerplate

Args reduces the code users need to write and maintain for each story by providing a more clear separation between a story’s data and display logic.

// Button.stories.jsexport const Text = () => (
<Button label="hello" background="#ff0" />
);
export const Emoji = () => (
<Button label="😀 😎 👍 💯" background="#ff0" />
);
// Button.stories.jsconst Template = (args) => <Button {...args} />;export const Text = Template.bind({});
Text.args = { label: 'hello', background: '#ff0' }
export const Emoji = Template.bind({});
Emoji.args = { ...Text.args, label: '😀 😎 👍 💯' };
// Button.stories.jsconst Template = (args) => ({
props: Object.keys(args),
components: { MyButton },
template: `
<my-button :background="background">
{{label}}
</my-button>
`
});
export const Text = Template.bind({});
Text.args = { label: 'hello', background: '#ff0' }
export const Emoji = Template.bind({});
Emoji.args = { ...Text.args, label: '😀 😎 👍 💯' };

🚚 Reuse fixture data across stories

A second major user benefit of Args is that it provides a stylized way of organizing and sharing fixture data for your components.

// TaskList.stories.jsconst owner = { login: 'shilman', avatar: ... };
export const Basic = () => (
<TaskList items={[
{ title: 'checked item', checked: true, owner },
{ title: 'checked item', checked: true, owner },
{ title: 'unchecked item', checked: false, owner },
{ title: 'unassigned item', checked: false, },
]}/>
);
// TaskList.stories.jsimport { Checked, Unchecked, Unassigned } from '../Task.stories';const Template = (args) => <TaskList {...arg} />;export const Basic = Template.bind({});
Basic.args = { items: [
Checked.args, Checked.args, Unchecked.args, Unassigned.args
]};

♻️ Recycle stories in other tools

A final benefit is that Args stories are much more portable than before.

import { action } from '@storybook/addon-actions';
import { text } from '@storybook/addon-knobs';
export default { title: 'Button' };export const Text = () => (
<Button
onClick={action('onClick')}
label={text('label', 'Hello')}
/>
);
const Template = (args) => <Button {...args} />;export const Text = Template.bind({});
Text.args = { label: 'Hello' }
import { render, fireEvent } from '@testing-library/react';
import { Text } from './Button.stories';
it('should respond to click events', () => {
const handleClick = jest.fn();
const instance = render(
<Text {...Text.args} onClick={handleClick} />
);
fireEvent.click(instance.container.firstChild);
expect(handleClick).toHaveBeenCalled();
});

⚡ 1 minute install

After using args for the past few months, we think all users should upgrade today. Try it out today in Storybook 6.0!

npx sb upgrade
npx sb init
import { Button } from '@storybook/react/demo';export default { title: 'Button/Args', component: Button };export const Basic = (args) => <Button {...args} />;
Basic.args = { children: 'hello' };
  • 📢 Auto-generated actions for event logging,
  • 🛠 Custom toolbars for themes, internationalization, & context.

Get involved

Args was developed by Michael Shilman (me!) and Tom Coleman with inspiration from the addon-docs/knobs/context contributors including Norbert de Langen, Filipp Riabchun, Atanas Stoyanov, and Leo Y. Li.

Storybook

The UI development environment you'll ♥️ to use.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store