Add custom config

Author: usulpro

dev/config.js

@@ -0,0 +1,6 @@
+import { setConfig } from '../src/config';
+
+setConfig({
+  addId: 'dev_adk',
+  panelTitle: 'ADK DEV'
+});

dev/register.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { register } from '../src/register';
+import './config'
 
 const blockStyle = {
   margin: 2,

dev/withAdk.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { createDecorator, setParameters } from '../src/decorator';
+import './config'
 
 const DecoratorUI = ({ context, getStory, data, parameters }) => (
   <div>
@@ -17,4 +18,4 @@ const DecoratorUI = ({ context, getStory, data, parameters }) => (
 );
 
 export const withAdk = createDecorator(DecoratorUI);
-export const adkParams = setParameters
+export const adkParams = setParameters()

src/ChannelStore.js

@@ -5,6 +5,7 @@ export default class ChannelStore {
     EVENT_ID_INIT,
     EVENT_ID_DATA,
     EVENT_ID_BACK,
+
     name = 'store',
     initData = {},
     isPanel = false,
@@ -16,7 +17,13 @@ export default class ChannelStore {
     this.initData = initData;
     this.isPanel = isPanel;
 
-    // console.log(`New Store Created for ${isPanel ? 'Panel' : 'Preview'}`);
+
+
+    console.log(`New Store Created for ${isPanel ? 'Panel' : 'Preview'}`,
+    EVENT_ID_INIT,
+    EVENT_ID_DATA,
+    EVENT_ID_BACK,
+    );
   }
 
   store = this.initData;

src/config.js

@@ -1,7 +1,42 @@
-export const ADDON_ID = 'adk';
-export const PANEL_ID = `${ADDON_ID}/panel`;
-export const PANEL_Title = `${ADDON_ID}/addon`;
-export const PARAM_Key = `${ADDON_ID}/parameters`;
-export const EVENT_ID_INIT = `${ADDON_ID}/event/init`;
-export const EVENT_ID_DATA = `${ADDON_ID}/event/data`;
-export const EVENT_ID_BACK = `${ADDON_ID}/event/back`;
+export let ADDON_ID = 'adk';
+export let PANEL_ID = `${ADDON_ID}/panel`;
+export let PANEL_Title = `${ADDON_ID}/addon`;
+export let PARAM_Key = `${ADDON_ID}/parameters`;
+export let EVENT_ID_INIT = `${ADDON_ID}/event/init`;
+export let EVENT_ID_DATA = `${ADDON_ID}/event/data`;
+export let EVENT_ID_BACK = `${ADDON_ID}/event/back`;
+
+export const setConfig = ({
+  addId,
+  panelId,
+  panelTitle,
+  paramKey,
+  eventInit,
+  eventData,
+  eventBack,
+}) => {
+  ADDON_ID = addId || ADDON_ID;
+  PANEL_ID = `${ADDON_ID}/panel`;
+  PANEL_Title = `${ADDON_ID}/addon`;
+  PARAM_Key = `${ADDON_ID}/parameters`;
+  EVENT_ID_INIT = `${ADDON_ID}/event/init`;
+  EVENT_ID_DATA = `${ADDON_ID}/event/data`;
+  EVENT_ID_BACK = `${ADDON_ID}/event/back`;
+
+  PANEL_ID = panelId || PANEL_ID;
+  PANEL_Title = panelTitle || PANEL_Title;
+  PARAM_Key = paramKey || PARAM_Key;
+  EVENT_ID_INIT = eventInit || EVENT_ID_INIT;
+  EVENT_ID_DATA = eventData || EVENT_ID_DATA;
+  EVENT_ID_BACK = eventBack || EVENT_ID_BACK;
+};
+
+export const getConfig = () => ({
+  ADDON_ID,
+  PANEL_ID,
+  PANEL_Title,
+  PARAM_Key,
+  EVENT_ID_INIT,
+  EVENT_ID_DATA,
+  EVENT_ID_BACK,
+})

src/decorator.js

@@ -2,14 +2,17 @@ import React from 'react';
 import withChannel from './withChannel';
 
 import {
-  ADDON_ID,
-  EVENT_ID_INIT,
-  EVENT_ID_DATA,
-  EVENT_ID_BACK,
-  PARAM_Key,
+  getConfig,
 } from './config';
 
 export const createDecorator = Component => initData => (getStory, context) => {
+  const {
+    ADDON_ID,
+    EVENT_ID_INIT,
+    EVENT_ID_DATA,
+    EVENT_ID_BACK,
+    PARAM_Key,
+  } = getConfig();
   const WithChannel = withChannel({
     EVENT_ID_INIT,
     EVENT_ID_DATA,
@@ -30,6 +33,9 @@ export const createDecorator = Component => initData => (getStory, context) => {
   );
 };
 
-export const setParameters = params => ({
-  [PARAM_Key]: params,
-});
+export const setParameters = () => {
+  const { PARAM_Key } = getConfig();
+  return params => ({
+    [PARAM_Key]: params,
+  });
+};

src/register.js

@@ -4,12 +4,7 @@ import { STORY_CHANGED } from '@storybook/core-events';
 import Rect from '@reach/rect';
 
 import {
-  ADDON_ID,
-  PANEL_ID,
-  PANEL_Title,
-  EVENT_ID_INIT,
-  EVENT_ID_DATA,
-  EVENT_ID_BACK,
+  getConfig,
 } from './config';
 import withChannel from './withChannel';
 
@@ -73,11 +68,14 @@ class PanelHOC extends React.Component {
     this.state = {
       ...urlState,
     };
-    props.api.on(STORY_CHANGED, (kind, story) => this.setState({ kind, story }));
+    props.api.on(STORY_CHANGED, (kind, story) =>
+      this.setState({ kind, story })
+    );
   }
   render() {
     const Panel = this.props.component;
-    const { api, active, data, setData } = this.props;
+    const { api, active, data, setData, config } = this.props;
+    const {ADDON_ID, PANEL_ID, PANEL_Title} = config;
     const { kind, story } = this.state;
 
     if (!active) return null;
@@ -112,16 +110,26 @@ class PanelHOC extends React.Component {
   }
 }
 
-const WithChannel = withChannel({
-  EVENT_ID_INIT,
-  EVENT_ID_DATA,
-  EVENT_ID_BACK,
-  ADDON_ID,
-  initData: { panel: 'foo' },
-  panel: true,
-})(PanelHOC);
+export const register = (Panel, { type = addonTypes.PANEL, initData } = {}) => {
+  const config = getConfig();
+  const {
+    EVENT_ID_INIT,
+    EVENT_ID_DATA,
+    EVENT_ID_BACK,
+    ADDON_ID,
+    PANEL_Title,
+    PANEL_ID,
+  } = config;
+
+  const WithChannel = withChannel({
+    EVENT_ID_INIT,
+    EVENT_ID_DATA,
+    EVENT_ID_BACK,
+    ADDON_ID,
+    initData,
+    panel: true,
+  })(PanelHOC);
 
-export const register = (Panel, type = addonTypes.PANEL) =>
   addons.register(ADDON_ID, api => {
     addons.add(PANEL_ID, {
       title: PANEL_Title,
@@ -132,10 +140,10 @@ export const register = (Panel, type = addonTypes.PANEL) =>
           key={key}
           api={api}
           active={active}
-          PANEL_Title={PANEL_Title}
           component={Panel}
+          config={config}
         />
       ),
     });
-
   });
+};