Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ui-storybook/sb

Esiest way to develop, review and keep UI elements consistent and documented.
https://github.com/ui-storybook/sb

Last synced: 2 months ago
JSON representation

Esiest way to develop, review and keep UI elements consistent and documented.

Awesome Lists containing this project

README

        

# SB [![npm version](https://badge.fury.io/js/ui-storybook.svg)](https://badge.fury.io/js/ui-storybook) [![Gitter Chat](https://badges.gitter.im/owner/repo.png)](https://gitter.im/ui-sb/Lobby)

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 demo image](docs/sb-demo.gif)

SB run your app in sandbox, so you can develop without warning about any specific dependency.

## Demo
[Material cards](https://ui-storybook.github.io/sb-angular-material-cards-demo/#/?split=true) — [Source](https://github.com/ui-storybook/sb-angular-material-cards-demo)

## What is supported now?
Angular 1 — [API](#angular-usage)
React — [API](#react-usage)
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](https://github.com/ui-storybook/sb-cli):

```bash
# 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.

Add the `-Y` or `--use-yarn` flag if your project uses yarn instead of npm as package manager.

## Usage
#### Available commands
```bash
# 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`

```js
// Import you app
import '../path/to/your/module';

// And inject it here
const mainModule = angular.module('sb', [
'helper',
'youAppName'
]);

```

Write your stories
SB provides simple api for you:

```js
// File sb/stories/index.js

// Create a new section (like page)
let buttons = sb.section('Buttons');

// Then you can add new story and states to section
buttons.story('Simple buttons')

// 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
.add('Main button', '{{ vm.title }}', {
title: 'Hello from SB'
})
.add('Success button', '{{ vm.someOtherTitle }}', {
someOtherTitle: 'You successfully build first story'
});

```
Also you can use `sb.mock` method for stote your mocks and then use in stories passing mock name instead of object:
```js
sb.mock('week', {
sunday: 'Sunday',
monday: 'Monday',
tuesday: 'Tuesday',
wednesday: 'Wednesday',
thursday: 'Thursday',
friday: 'Friday',
saturday: 'Saturday'
});

let calendar = sb.section('Week');
calendar.story('Days of the week')
.add('Sunday', '

{{ vm.sunday }}

', 'week')
.add('Monday', '

{{ vm.monday }}

', 'week')
.add('Tuesday', '

{{ vm.tuesday }}

', 'week')
.add('Wednesday', '

{{ vm.wednesday }}

', 'week')
.add('Thursday', '

{{ vm.thursday }}

', 'week')
.add('Friday', '

{{ vm.friday }}

', 'week')
.add('Saturday', '

{{ vm.saturday }}

', 'week');
```

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

```js
// Example from demo application
import { Welcome } from './welcome/welcome';
```

The write your stories
SB provides simple api for you:

```js
// File sb/stories/index.js

// You need import your commponent here too
import { Welcome } from './../welcome/welcome';

// Create a new section (like page)
let overview = sb.section('Welcome section');

// 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.story('SB demo component')
.add('Hello messages', () => ());
```

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.

```js

// Import your md file
import docs from './docs.md';

let calendar = sb.section('Week');

// And pass with 4th param to story
calendar.story('Days of the week')
.add('Sunday', '

{{ vm.sunday }}

', {}, docs)
```

### 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:
```bash

# run dev server with demo data
gulp serve

# create new build
gulp build

```