Storybook-adk NPM

React Storybook Addon Development Kit

Based on React Komposer and Podda addon core which solves the problem of communication between addons panel side and decorators side. It provides an ability to create story decorators controlled from the addon panel.

Since it's in the early stages some things could be changed

Features 💫

1 Keeps synchronous store on both sides: addon panel and decorator

2 Easy to create own components subscribed to addon's store

3 Each decorator has own store instance and init settings, the panel reflects an active decorator

4 Decorators keep the store during Hot Module Replacement

5 Possible to set api, default store data and React Components to decorators and panel

6 Story decorators can override the global ones. So it's possible to use them together

Install

if you building own Storybook addon:

npm i storybook-adk --save

if just using Storybook as a development tool:

npm i storybook-adk --save-dev

Usage

soon

Contribution guide:

git clone https://github.com/sm-react/storybook-adk.git
cd storybook-adk
yarn
yarn start

when it outputs like:

React Storybook started on => http://localhost:9001/

webpack built f2e66101efa945043d60 in 21615ms

open http://localhost:9001/

Store and channel

src/store/store.js

We using Podda as a simple data store. Panel and decorators need to use a channel for communication. Any changes of store are sent via channel, that's why both stores always synchronized. Root components (of panel or decorators) subscribe to store changes so they shows an actual data. Each side can initiate the connection at any time, but only one (the last) connection is enabled. That's why we can select another Story kind with own decorator which initiate a new connection when componentWillMount so panel will follow it. When a decorator componentWillUnmount, it stops the channel communication and panel reflects it. This principle works even when we use nested decorators: the innder decorator will override the global one.

Decorators

src/store/decorator.js

We pass initData to decorators when create them and keep decorator's store in module closure (own for each Story kind). So it's availible after HMR. The decorator root component solves all tasks about channel interaction and enabling/disabling nested decorators. It will render the addon decorator component as a child which you can pass in oder to customize your own decorator.

Composer

src/store/composer.js

Here we use React Komposer to subscribe to store changes. It allows the root component src/store/container.js (Panel and decorator) to keep the actual state of current store. We pass some API to this component from store.

Container

src/store/container.js

It's a root component using both for panel and decorator. It takes props from composer src/store/composer.js. Wraps and reders custom addon component.

API

src/store/api.js

It's possible to add an API to interact with the addon store. API function takes a poddaStore as a first argument and any number custom arguments. E.g.

setLabel(poddaStore, name, ind) {
    poddaStore.update(state => ({ index: ind, label: name }));
}

To use it in your component you need to pass it via composer:

function dataLoader(props, onData, { addonStore, apiMap }) {

    const sendData = (storeData) => {
        const propsToChild = {
            label: storeData.label,
            index: storeData.index,
            onLabel: apiMap.setLabel, 
        };
        onData(null, propsToChild);
    };

    const stopSubscription = addonStore.subscribe(sendData);

    sendData(addonStore.getAll());

    return stopSubscription;
}

then you can use it this way:

const { label, index, onLabel } = props;
return (
<div>
    <p>Label: <i>{label}</i>, Index: <i>{index}</i></p>
    <button onClick={onLabel('Alpha', 28)}>Alpha</button>
</div>);