zombiebox-extension-storybook

ZombieBox extension for interactive UI development. Inspired by Storybook project.

Usage

First, you need to create a stories set for your widget.

We recommend to place stories in a widget directory, e.g. app/my/widgets/button/story/button.js. File must export a factory function that returns a stories set:

import Helper from 'storybook/helper';
import StoriesSet from 'storybook/types';
import Button from '../button';

/**
 * @param {Helper} helper
 * @return {StoriesSet}
 */
export default (helper) => {
	const button = new Button();

	return {
		'default': {
			setup() {
				helper.placeWidget(button);
			},
			teardown() {
				helper.removeWidget(button);
			}
		}
	};
};

Generally speaking, a story represents setup and teardown hooks, where you can adjust widget displaying. Both hooks can return a promise, teardown may be omitted.

Then, initialize storybook with the brand new stories. The best place to do it is hook onReady of an application class:

import {init as initStorybook} from 'storybook/storybook';
import BaseApplication from 'generated/zb/base-application';
import ButtonStory from 'app/my/widgets/button/story/button';

/**
 */
export default class Application extends BaseApplication {
	/**
	 */
	onReady() {
		initStorybook(this, {
			Button: ButtonStory
		}, {
			background: 'grey'
		});
	}
}

Third argument is the next options:

• background (optional) - a background of the area where widgets will be placed. If omitted the area will be white.

• defaultSet (optional) - title of the set that should be activated when storybook is being opened first time.

• defaultStory (optional) - title of the story that should be activated from the set specified in defaultSet.

Helper API

Helper is a communication layer between storybook and story. An instance of helper is passed to each factory function and can be accessed by its stories due to a closure.

placeWidget/placeElement

Place a given widget/element in the area.

removeWidget/removeElement

Remove a given widget/element from the area.

centerWidget/centerElement

Center a given widget/element in the area. As a second argument optionally takes object with horizontally and vertically properties, with which you can adjust centring e.g.:

helper.centerWidget(myWidget, {vertically: false}); // Will center the widget only horizontally

focusWidget

Set a given widget to a focused state.

setAreaBackground

Change a color of the area.

resetAreaBackground

Reset a color of the area to the default one, which was specified (or not) during initialization.

showLayer/closeLayer/closeAllLayers

Show or close a specific or all layers.

Hooks

There are four available hooks:

• BEFORE_SETUP
• AFTER_SETUP
• BEFORE_TEARDOWN
• AFTER_TEARDOWN

Each of them can return a promise. With these hooks you can separate a duplicate code and leave only story-specific actions, e.g.:

import Helper from 'storybook/helper';
import StoriesSet, {AFTER_TEARDOWN, BEFORE_SETUP} from 'storybook/types';
import Button from '../button';

/**
 * @param {Helper} helper
 * @return {StoriesSet}
 */
export default (helper) => {
	const button = new Button();

	return {
		[BEFORE_SETUP]() {
			helper.placeWidget(button);
			helper.centerWidget(button);
		},

		[AFTER_TEARDOWN]() {
			helper.removeWidget(button);
		},

		'default': {
			setup() {}
		},

		'activated': {
			setup() {
				button.setActivated(true);
			},
			teardown() {
				button.setActivated(false);
			}
		}
	};
};