Storybook is a component workbench where you write story.
A story is a single state of your component. Technically, it is a function that returns something that can be rendered to screen.
UI component dev & test
There are two basic levels of organization in Storybook:
Each story is a different instance of a component. You can have as many stories per component
the default export defines metadata about your component:
export default {
component: Task,
title: 'Task',
id: 'Foo/Bar', // or 'foo-bar' if you prefer
// Our exports that end in "Data" are not stories.
excludeStories: /.*Data$/,
decorators: [ ... ],
parameters: { ... }
};
where:
id chosen is:'
Ref doc: Default export doc
export const Baz = () => <MyComponent />;
Baz.story = {
name: 'Moo',
parameters: {
notes: 'popover tooltip'
},
};
where:
id of a story is:
Url Path of a story is:
?path=/story/groupId--storyId
# example
?path=/story/foo-bar--baz
Stories can be organized in a nested structure using / as a separator in the group title. Doc
export default {
title: 'Design System/Atoms/Checkbox',
};
Configuration ShowRoots
import { addParameters } from '@storybook/react';
addParameters({
options: {
/**
* display the top-level grouping as a "root" in the sidebar
* @type {Boolean}
*/
showRoots: false,
},
});
npx -p @storybook/cli sb init
Old way was ….
yarn add @storybook/react --dev
#or
npm install @storybook/react --save-dev
"scripts": {
"storybook": "start-storybook -p 9009 -s public"
}
yarn storybook
Create the configuration file Doc
Minimal: stories is a list of glob patterns that tells where the stories are located, relative to the configuration file.
module.exports = {
stories: ['../src/components/**/*.stories.js'],
};
module.exports = {
stories: ['../src/components/**/*.stories.js'],
addons: ['@storybook/preset-create-react-app','@storybook/addon-actions', '@storybook/addon-links'],
};
import React from 'react';
import { storiesOf } from '@storybook/react';
import { Button } from '@storybook/react/demo';
// There is two stories (.add)
storiesOf('Button', module)
.add('with text', () => (
<Button>Hello Button</Button>
))
.add('with emoji', () => (
<Button><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
));
You may also locate them closer to components.
•
└── src
└── components
└── button
├── button.js
└── button.stories.js
npm run storybook
https://storybook.js.org/addons/introduction/#2-native-addons
Action is storybook native addons that permits to capture interaction via mocked callbacks called Actions
The callback appears in the actions panel of the Storybook UI when clicked.
So for instance when we build a pin button, we’ll seen it in the action panel.
yarn add @storybook/addon-centered --dev
With a snaphost test for each of our Task stories, if we change the implementation of Task, we’ll be prompted to verify the changes.
yarn add -D @storybook/addon-storyshots react-test-renderer
import initStoryshots from '@storybook/addon-storyshots';
initStoryshots();
yarn test
# ie react-scripts test
PASS src/storybook.test.js (7.372s)
Storyshots
Task
√ Default (14ms)
√ Pinned (1ms)
√ Archived (2ms)
› 3 snapshots written.
Snapshot Summary
› 3 snapshots written from 1 test suite.
Test Suites: 1 passed, 1 total
Tests: 3 passed, 3 total
Snapshots: 3 written, 3 total
Time: 8.015s
Ran all test suites related to changed files.
› 3 snapshots failed from 1 test suite. Inspect your code changes or press `u` to update them.
Decorators are a way to provide arbitrary wrappers to stories.
They can be used to:
Doc search results will show up based on:
Example of story with notes.
export const callout = () => <Callout>Some children</Callout>;
callout.story = {
parameters: { notes: 'popover tooltip' },
};