Add param selectors

Author: usulpro

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

dev/withAdk.js

@@ -10,8 +10,14 @@ const DecoratorUI = ({ context, getStory, theme, info }) => (
   </div>
 );
 
-export const withAdk = createDecorator({
-  theme: store => store.themes[store.currentTheme],
-  info: store => JSON.stringify(store, null, 2)
-})(DecoratorUI, { isGlobal: true });
+export const withAdk = createDecorator(
+  {
+    theme: store => store.themes[store.currentTheme],
+    info: store => JSON.stringify(store, null, 2),
+  },
+  {},
+  {
+    themeWithFn: (params, { theme }) => ({ fn: () => theme }),
+  }
+)(DecoratorUI, { isGlobal: true });
 export const adkParams = setParameters();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-devkit",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "description": "Storybook Addon Development Kit",
   "author": {
     "name": "Oleg Proskurin",

src/decorator.js

@@ -3,14 +3,47 @@ import withChannel from './withChannel';
 
 import { getConfig } from './config';
 
-const DecoratorHOC = ({ actions, selectors, Component, parameters, resetParameters, ...props }) => {
-  return <Component {...actions} {...selectors} {...props} />
+const createHOC = paramSelectors => {
+  const DecoratorWrapper = ({
+    actions,
+    selectors,
+    Component,
+    parameters,
+    resetParameters,
+    ...props
+  }) => {
+    let params = {};
+    if (paramSelectors) {
+      try {
+        const entries = Object.entries(paramSelectors);
+        const paramResults = entries
+          .map(([name, fn]) => {
+            try {
+              return { [name]: fn(parameters, selectors) };
+            } catch (err) {
+              console.error(err);
+              return null;
+            }
+          })
+          .filter(Boolean);
+        params = paramResults.reduce((obj, item) => ({ ...obj, ...item }), {});
+      } catch (err) {
+        console.error(err);
+      }
+    }
+    return <Component {...actions} {...selectors} {...params} {...props} />;
+  };
+  return DecoratorWrapper;
 };
 
-export const createDecorator = (storeSelectors, createActions) => (
-  Component,
-  { isGlobal = true } = {}
-) => initData => (getStory, context) => {
+export const createDecorator = (
+  storeSelectors,
+  createActions,
+  paramSelectors
+) => (Component, { isGlobal = true } = {}) => initData => (
+  getStory,
+  context
+) => {
   const {
     ADDON_ID,
     EVENT_ID_INIT,
@@ -33,7 +66,7 @@ export const createDecorator = (storeSelectors, createActions) => (
     storyId,
     storeSelectors,
     createActions,
-  })(DecoratorHOC);
+  })(createHOC(paramSelectors));
 
   return (
     <WithChannel getStory={getStory} context={context} Component={Component} />