Image for post
Image for post

Component Story Format

Simple, portable, future-proof component examples

Michael Shilman
Jul 29, 2019 · 6 min read

🏆 Why a new format?

Image for post
Image for post

The “Story” is the source of truth for a component example

A story is a code snippet that renders an example of a component in a specific state.

📄 Component Story Format

storiesOf('atoms/Button', module)
.add('text', () => <Button>Hello</Button>)
.add('emoji', () => <Button>😀😎👍💯</Button>);
export default { title: 'atoms/Button' };export const text = () => <Button>Hello</Button>;
export const emoji = () => <Button>😀😎👍💯</Button>;
Image for post
Image for post

🚚 Story portability

export default { title: 'Counter' }export const enabled = () => (
<Counter text="Enabled" />
);
export const disabled = () => (
<Counter disabled text="Disabled" />
);
import { render, fireEvent } from '@testing-library/react';
import { enabled, disabled } from './Button.stories';
describe('counter interactivity', () => { it('should increment when enabled', () => {
const comp = render(enabled());
fireEvent.click(comp.getByText('Enabled: 0'));
expect(comp.getByText('Enabled: 1')).toBeTruthy();
});
it('should do nothing when disabled', () => {
const comp = render(enabled());
fireEvent.click(comp.getByText('Disabled: 0'));
expect(comp.getByText('Disabled: 0')).toBeTruthy();
});
});

🔀 Convenient code migrations

sb migrate storiesof-to-csf --glob "**/*.stories.js"

3 minute install

npx npm-check-updates '/storybook/' -u && npm install
import { configure } from ‘@storybook/react’;configure(require.context(‘../src/’, true, /\.stories\.js$/), module);
cd my-react-vue-angular-project
npx -p @storybook/cli@next sb init

🔭 What’s next?

Thanks to the community

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