SB
SB is the environment for developers that allow to easily develop and support UI components with any framework. With it, you can visualize different states of your UI components and develop them interactively.
SB run your app in sandbox, so you can develop without warning about any specific dependency.
Demo
What is supported now?
Angular 1 — API
React — API
NG2 — Comming soon
Aurelia — Comming soon
Vue.js — Comming soon
Basically, SB was designed for support any frameworks and libraries. All you components run in isolated scope with that version of framework or library that you need.
For now SB support Angular 1.x and React. Support for NG2, Aurelia and Vue.js coming very soon.
Getting started
Fastest way to add SB to your project is to use sb-cli:
# Installation npm i -g sb-cli # Then in your project folder run sb-create
This will create sb
folder with all dependencies based on project type.
Usage
Available commands
# run sb server npm run sb # build sb with your project npm run sb-build # create new build and publish it to GitHub Pages npm run sb-publish
Angular usage
First you need to import your main project module to sb/index.js
// Import you app ; // And inject it here const mainModule = angular;
Write your stories
SB provides simple api for you:
// File sb/stories/index.js // Create a new section (like page)let buttons = sb; // Then you can add new story and states to sectionbuttons // add method create new state for story // first param take title of state // second take html template that need to render // and third take object which need to load to component scope ;
Also you can use sb.mock
method for stote your mocks and then use in stories passing mock name instead of object:
sb; let calendar = sb;calendar ;
Than simply run npm run sb
— this will load server with hotreload and run SB with your application.
React usage
First you need to import your React components in sb/index.js
file
// Example from demo application ;
The write your stories
SB provides simple api for you:
// File sb/stories/index.js // You need import your commponent here too; // Create a new section (like page)let overview = sb; // Then you can add new story and states to section// add method create new state for story // first param take title of state// second take function that return Raact component overview ;
Than simply run npm run sb
— this will load server with hotreload and run SB with your application.
Components Documentation
SB can show documentation or notes for your components from .md
files.
// Import your md file; let calendar = sb; // And pass with 4th param to storycalendar
Configuration
SB use Webpack to build everything. If you need to change or update build process go to sb/.webpack
folder:
server.js
include configuration for browser-sync and webpack HMR.
loaders.js
include all loaders.
webpack.dev.babel.js
include dev build configuration.
webpack.build.babel.js
include production build configuration.
Contributing
If you find a bug (and you don’t know how to fix it), have trouble following the documentation or have a question or ideas how to improve SB – create an issue!
If you’re able to patch the bug or add the feature yourself – fantastic, make a pull request with the code!
Available gulp tasks:
# run dev server with demo data gulp serve # create new build gulp build