Storybox
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.
Quick start
For lazy users
wget -O - "https://raw.githubusercontent.com/isuvorov/storybox/master/docs/quick-start.sh" | sh
Getting Started
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
;
Attach main webpack config if you need .storybook/webpack.config.js
moduleexports = 0
Create glob-pattern file .storybook/glob.txt
./../src/**/@(*.story.js|.story.js|*.story.jsx|.story.jsx)
Create file .storybook/config.js
;;;
Or you can configurate projects, using something like this
;;;
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
Example story
src/Test.story.jsx
; module { return ;};
New API features
addHtml
Add jsx elements before story
module { return ;};
addStyle
Add css code in
module { return ;};
Or you can add css like require('css!./style.css')
module { return ;};
knob
module { return ;};
Deploy on GH Pages
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
Inspirated by
- storybook