mail: vnovick@gmail.com
twitter: @VladimirNovick
github: vnovick
facebook: vnovickdev
Install storybook
Run storybook
Generate storybook
Isolated environment running on port 9009
environment built by create-react-app with same defaults
Babel, ES2016+, .babelrc, webpack, css, images and static files, json loader
config.js - storybook configuration
stories - all your stories go there
stories/index.js - our stories endpoint
import {
storiesOf, action, linkTo
} from '@kadira/storybook';
storiesOf('Button', module)
.add('with text', () => (
<Button onClick={
action('clicked')}>Hello Button</Button>
))
.add('with some emoji', () => (
<Button onClick={
action('clicked')}>😀 😎 👍 💯</Button>
));
<Button onClick={action('clicked')}>Hello Button</Button>
By using action('caption')
we tell storybook to log function arguments to Action logger pannel
storiesOf('Welcome', module)
.add('to Storybook', () => (
<Welcome showApp={linkTo('Button')}/>
));
By using linkTo('storyOf', 'story name')
we tell storybook to link between stories.
import { configure } from '@kadira/storybook';
function loadStories() {
require('../src/stories');
}
configure(loadStories, module);
build for later deployment as static site:
npm run build-storybook
run snapshot tests:
npm run test-storybook