Storybox is a UI development environment for your React components based on React Storybook package with most popular addons and decorators.
This project based on React Storybook package with most popular addons and decorators.
For lazy users
wget -O - "https://raw.githubusercontent.com/isuvorov/storybox/master/docs/quick-start.sh" | sh
Install storybox package:
yarn add --dev storybox
or
npm install --save-dev storybox
adnd
1.a Install Storybook 2.35.3 by Kadira
yarn add --dev @kadira/storybook@2.35.3
or
npm install --save-dev @kadira/storybook@2.35.3
Attach storybox addons pack, create .storybook/addons.js
import 'storybox/addons';
Attach main webpack config if you need .storybook/webpack.config.js
module.exports = require('../tools/webpack.config')[0]
Create glob-pattern file .storybook/glob.txt
./../src/**/@(*.story.js|.story.js|*.story.jsx|.story.jsx)
Create file .storybook/config.js
import { wrapModules, setConfig } from 'storybox';
setConfig({});
wrapModules(require('glob!./glob.txt'));
Or you can configurate projects, using something like this
import { wrapModules, setConfig } from 'storybox';
setConfig({
options: {
name: 'MG Beta',
url: 'https://github.com/isuvorov',
goFullScreen: false,
showLeftPanel: true,
showDownPanel: true,
showSearchBox: false,
downPanelInRight: true,
sortStoriesByKind: false,
},
info: true,
knob: true,
isomorphicStyles: true,
backgrounds: [
{ name: 'twitter', value: '#00aced', default: true },
{ name: 'facebook', value: '#3b5998' },
],
});
wrapModules(require('glob!./glob.txt'));
Add lines in package.json
{
...
"scripts": {
...
"storybook": "start-storybook -p 9001 -c .storybook",
"build-storybook": "build-storybook -c .storybook -o .out"
}
...
}
- run
npm run storybook
for dev development ornpm run build-storybook
for building html
src/Test.story.jsx
import React from 'react';
module.exports = function ({ storiesOf, action }) {
return storiesOf('Test', module)
.add('default', () => (
<button onClick={action('click')}>
Hello World
</button>
))
.add('emoji', () => (
<button onClick={action('click')}>
Hello 🎃
</button>
));
};
Add jsx elements before story
module.exports = function ({ storiesOf, action }) {
return storiesOf('Cert/CertForm', module)
.addHtml(<link rel="stylesheet" type="text/css" href="http://yastatic.net/bootstrap/3.3.6/css/bootstrap.min.css" />)
.add('Button', () => {
return (
<div className="row">
<div className="col-md-6 col-md-offser-3">
<a className="btn btn-success" href="#">
Button
</a>
</div>
</div>
);
});
};
Add css code in <style>${css}</style>
module.exports = function ({ storiesOf, action }) {
return storiesOf('Cert/CertForm', module)
.addStyle(`
.body {
background: #eee;
}
.box {
background: #fff;
display: inline-block;
margin: 0 auto;
padding: 30px;
}
`)
.add('Button', () => {
return (
<div className="box">
Test
</div>
);
});
};
Or you can add css like require('css!./style.css')
module.exports = function ({ storiesOf, action }) {
return storiesOf('Cert/CertForm', module)
.addStyle(require('./style.css'))
.add('Button', () => {
return (
<div className="box">
Test
</div>
);
});
};
module.exports = function ({ storiesOf, knob }) {
return storiesOf('Cert/CertForm', module)
.add('Button', () => {
return (
<div className="box" style={{color: knob.text('color', '#ff0000')}}>
Test
</div>
);
});
};
Install storybook-deployer by Kadira:
yarn add --dev @kadira/storybook-deployer
or
npm install --save-dev @kadira/storybook-deployer
Add lines in package.json
{
...
"scripts": {
...
"deploy-storybook": "storybook-to-ghpages"
}
...
}
Run script to deploy on GH Pages
yarn run deploy-storybook
or
npm run deploy-storybook
- storybook