Wrap decorators into HOC

Author: usulpro

.storybook/stories.js

@@ -28,7 +28,7 @@ storiesOf('Storybook Addon Development Kit', module)
         </div>
       );
     },
-    adkParams({ currentTheme: 32 })
+    adkParams({ currentTheme: 1 })
   )
   .add(
     'Stories2',
@@ -40,7 +40,7 @@ storiesOf('Storybook Addon Development Kit', module)
         </div>
       );
     },
-    adkParams({ currentTheme: 12 })
+    adkParams({ currentTheme: 0 })
   );
 //   .add('Details', () => (
 //     <div>

dev/register.js

@@ -17,15 +17,17 @@ const AddonPanel = ({
   rect,
   Layout,
   Block,
-  nextInd,
+  indInc,
+  indDec,
   update,
 }) => {
   return (
     <Layout style={{ padding: 0 }}>
       <Block style={{ ...blockStyle, minWidth: 50 }} size={200}>
         kind: {kind}
         <br />
-        <button onClick={() => nextInd()}>setData</button>
+        <button onClick={() => indInc()}> + </button>
+        <button onClick={() => indDec()}> - </button>
         <br />
         <button onClick={() => update({ themes: ['T1', 'T2', 'T3'] })}>
           Update
@@ -46,11 +48,17 @@ register(
   {
     themeInd: store => store.currentTheme,
     themeList: store => store.themes,
+    theme: store => store.themes[store.currentTheme]
   },
   ({ global, local }) => ({
-    nextInd: local(store => ({
+    indInc: global(store => ({
+      ...store,
       currentTheme: store.currentTheme + 1,
     })),
+    indDec: global(store => ({
+      ...store,
+      currentTheme: store.currentTheme - 1,
+    })),
     update: global(),
   })
 )(AddonPanel);

dev/withAdk.js

@@ -2,20 +2,14 @@ import React from 'react';
 import { createDecorator, setParameters } from '../src/decorator';
 import './config'
 
-const DecoratorUI = ({ context, getStory, data, parameters }) => (
+const DecoratorUI = ({ context, getStory, data, parameters, theme }) => (
   <div>
-    ADK: <br />
-    Data: <br />
-    <p>{JSON.stringify(data, null, 2)}</p>
-    context: <br />
-    <p>
-      <small>{JSON.stringify(context, null, 2)}</small>
-    </p>
-    Params: <br />
-    <p>{JSON.stringify(parameters, null, 2)}</p>
+    Theme: {theme} <br />
     {getStory(context)}
   </div>
 );
 
-export const withAdk = createDecorator()(DecoratorUI, {isGlobal: false});
+export const withAdk = createDecorator({
+  theme: store => store.themes[store.currentTheme]
+})(DecoratorUI, {isGlobal: true});
 export const adkParams = setParameters()

src/decorator.js

@@ -3,7 +3,14 @@ import withChannel from './withChannel';
 
 import { getConfig } from './config';
 
-export const createDecorator = (selectors, createActions) => (Component, { isGlobal = true } = {}) => initData => (getStory, context) => {
+const DecoratorHOC = ({ actions, selectors, Component, ...props }) => (
+  <Component {...actions} {...selectors} {...props} />
+);
+
+export const createDecorator = (storeSelectors, createActions) => (
+  Component,
+  { isGlobal = true } = {}
+) => initData => (getStory, context) => {
   const {
     ADDON_ID,
     EVENT_ID_INIT,
@@ -24,10 +31,13 @@ export const createDecorator = (selectors, createActions) => (Component, { isGlo
     panel: false,
     parameters,
     storyId,
+    storeSelectors,
     createActions,
-  })(Component);
+  })(DecoratorHOC);
 
-  return <WithChannel getStory={getStory} context={context} />;
+  return (
+    <WithChannel getStory={getStory} context={context} Component={Component} />
+  );
 };
 
 export const setParameters = () => {

src/withChannel.js

@@ -37,10 +37,12 @@ const withChannel = ({
         ...parameters,
       };
 
+      const isReceived = false;
+
       this.state = {
         data: initStateData,
-        selectors: this.prepareSelectors(initStateData),
-        isReceived: false,
+        selectors: isReceived ? this.prepareSelectors(initStateData) : {},
+        isReceived,
       };
 
       this.store = new ChannelStore({