Decorator less addons (experiment on KNOBS)

addons/knobs/src/KnobManager.js

@@ -1,19 +1,26 @@
 /* eslint no-underscore-dangle: 0 */
-
-import React from 'react';
 import deepEqual from 'deep-equal';
-import WrapStory from './components/WrapStory';
 import KnobStore from './KnobStore';
 
 // This is used by _mayCallChannel to determine how long to wait to before triggering a panel update
 const PANEL_UPDATE_INTERVAL = 400;
 
 export default class KnobManager {
-  constructor() {
-    this.knobStore = null;
+  constructor(channel) {
+    this.channel = channel;
+    this.knobStore = new KnobStore();
+    this.channel.on('addon:knobs:knobChange', this.knobChanged.bind(this));
     this.knobStoreMap = {};
   }
 
+  knobChanged(change) {
+    const { name, value } = change;
+    // Update the related knob and it's value.
+    const knobOptions = this.knobStore.get(name);
+    knobOptions.value = value;
+    this.knobStore.markAllUnused();
+  }
+
   knob(name, options) {
     this._mayCallChannel();
 
@@ -37,22 +44,6 @@ export default class KnobManager {
     return knobStore.get(name).value;
   }
 
-  wrapStory(channel, storyFn, context) {
-    this.channel = channel;
-    const key = `${context.kind}:::${context.story}`;
-    let knobStore = this.knobStoreMap[key];
-
-    if (!knobStore) {
-      knobStore = this.knobStoreMap[key] = new KnobStore(); // eslint-disable-line
-    }
-
-    this.knobStore = knobStore;
-    knobStore.markAllUnused();
-    const initialContent = storyFn(context);
-    const props = { context, storyFn, channel, knobStore, initialContent };
-    return <WrapStory {...props} />;
-  }
-
   _mayCallChannel() {
     // Re rendering of the story may cause changes to the knobStore. Some new knobs maybe added and
     // Some knobs may go unused. So we need to update the panel accordingly. For example remove the

addons/knobs/src/components/Panel.js

@@ -106,6 +106,7 @@ export default class Panel extends React.Component {
 
   emitChange(changedKnob) {
     this.props.channel.emit('addon:knobs:knobChange', changedKnob);
+    this.props.channel.emit('refresh');
   }
 
   handleChange(changedKnob) {

addons/knobs/src/index.js

@@ -1,7 +1,7 @@
 import addons from '@storybook/addons';
 import KnobManager from './KnobManager';
 
-const manager = new KnobManager();
+const manager = new KnobManager(addons.getChannel());
 
 export function knob(name, options) {
   return manager.knob(name, options);
@@ -55,16 +55,16 @@ export function date(name, value = new Date()) {
   return manager.knob(name, { type: 'date', value: proxyValue });
 }
 
-export function withKnobs(storyFn, context) {
-  const channel = addons.getChannel();
-  return manager.wrapStory(channel, storyFn, context);
-}
+// export function withKnobs(storyFn, context) {
+//   const channel = addons.getChannel();
+//   return manager.wrapStory(channel, storyFn, context);
+// }
 
-export function withKnobsOptions(options = {}) {
-  return (...args) => {
-    const channel = addons.getChannel();
-    channel.emit('addon:knobs:setOptions', options);
+// export function withKnobsOptions(options = {}) {
+//   return (...args) => {
+//     const channel = addons.getChannel();
+//     channel.emit('addon:knobs:setOptions', options);
 
-    return withKnobs(...args);
-  };
-}
+//     return withKnobs(...args);
+//   };
+// }

app/react/src/client/preview/index.js

@@ -29,6 +29,7 @@ if (isBrowser) {
   channel.on('setCurrentStory', data => {
     reduxStore.dispatch(selectStory(data.kind, data.story));
   });
+  channel.on('refresh', () => render(context));
   Object.assign(context, { channel, window, queryParams });
   addons.setChannel(channel);
   init(context);

app/react/src/client/preview/render.js

@@ -57,7 +57,7 @@ export function renderMain(data, storyStore) {
   //    https://github.com/storybooks/react-storybook/issues/116
   if (selectedKind !== previousKind || previousStory !== selectedStory) {
     // We need to unmount the existing set of components in the DOM node.
-    // Otherwise, React may not recrease instances for every story run.
+    // Otherwise, React may not recreate instances for every story run.
     // This could leads to issues like below:
     //    https://github.com/storybooks/react-storybook/issues/81
     previousKind = selectedKind;

examples/cra-kitchen-sink/src/stories/index.js

@@ -6,17 +6,7 @@ import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
 import WithEvents from '@storybook/addon-events';
 import { WithNotes } from '@storybook/addon-notes';
-import {
-  withKnobs,
-  text,
-  number,
-  boolean,
-  color,
-  select,
-  array,
-  date,
-  object,
-} from '@storybook/addon-knobs';
+import { text, number, boolean, color, select, array, date, object } from '@storybook/addon-knobs';
 import centered from '@storybook/addon-centered';
 
 import Button from '@storybook/components/dist/demo/Button';
@@ -38,7 +28,7 @@ const emit = emiter.emit.bind(emiter);
 storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
 
 storiesOf('Button', module)
-  .addDecorator(withKnobs)
+  // .addDecorator(withKnobs)
   .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
   .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>)
   .add('with notes', () =>