Merge pull request #7 from kadirahq/use-add-decorator

Use add decorator

src/components/Wrap.js

@@ -3,7 +3,6 @@ import React from 'react';
 export default class Wrap extends React.Component {
   constructor(props) {
     super(props);
-    this.store = this.props.store;
     this._initialPropsReceived = this.initialPropsReceived.bind(this);
     this._knobChanged = this.knobChanged.bind(this);
     this._resetKnobs = this.resetKnobs.bind(this);
@@ -12,7 +11,7 @@ export default class Wrap extends React.Component {
       this.props.channel.emit('addon:knobs:helloFromStory');
     };
     this.setPanelFields = () => {
-      this.props.channel.emit('addon:knobs:setFields', this.store);
+      this.props.channel.emit('addon:knobs:setFields', this.props.store);
     };
   }
 
@@ -42,7 +41,7 @@ export default class Wrap extends React.Component {
 
   knobChanged(change) {
     const { name, value } = change;
-    const { type } = this.store[name];
+    const { type } = this.props.store[name];
 
     let formatedValue = value;
     if (type === 'object') {
@@ -53,13 +52,13 @@ export default class Wrap extends React.Component {
       }
     }
 
-    this.store[name].value = formatedValue;
+    this.props.store[name].value = formatedValue;
     this.forceUpdate();
   }
 
   resetKnobs() {
-    Object.keys(this.store).forEach(field => {
-      delete(this.store[field]);
+    Object.keys(this.props.store).forEach(field => {
+      delete(this.props.store[field]);
     });
     this.forceUpdate();
     this.setPanelFields();

src/index.js

@@ -18,6 +18,7 @@ function register() {
 }
 
 let knobStore = {};
+const stories = {};
 
 function createKnob(name, value, type) {
   if (knobStore[name]) {
@@ -30,12 +31,20 @@ function createKnob(name, value, type) {
 
 function wrap(storyFn) {
   const channel = addons.getChannel();
-  const localKnobStore = {};
 
   return context => {
+    if (!stories[context.kind]) {
+      stories[context.kind] = {};
+    }
+
+    if (!stories[context.kind][context.story]) {
+      stories[context.kind][context.story] = {};
+    }
+
     // Change the global knobStore to the one local to this story
-    knobStore = localKnobStore;
-    return <Wrap {...{ context, storyFn, channel, store: localKnobStore }} />;
+    knobStore = stories[context.kind][context.story];
+
+    return <Wrap {...{ context, storyFn, channel, store: knobStore }} />;
   };
 }
 

src/stories/Button.js

@@ -11,7 +11,7 @@ const buttonStyles = {
 
 const Button = ({ onClick, style, color, width, children, disabled }) => (
   <button
-    style={{ ...buttonStyles, ...style, ...{ backgroundColor: color, width: `${width}px` } }}
+    style={{ ...buttonStyles, ...{ backgroundColor: color, width: `${width}px` }, ...style }}
     onClick={onClick}
     disabled={disabled}
   >

src/stories/index.js

@@ -5,15 +5,16 @@ import { createKnob, wrap } from '../index';
 import Button from './Button';
 
 storiesOf('Button', module)
-  .add('default view', wrap(() => (
+  .addDecorator((story, context) => (wrap(story)(context)))
+  .add('default view', () => (
     <Button
       onClick={ action('button clicked') }
       style={createKnob('style', { width: '70px' }, 'object')}
     >
       {createKnob('children', 'Hello')}
     </Button>
-  )))
-  .add('default view with different knobs', wrap(() => (
+  ))
+  .add('default view with different knobs', () => (
     <Button
       onClick={ action('button clicked') }
       color={createKnob('color', '#abc')}
@@ -22,7 +23,7 @@ storiesOf('Button', module)
     >
       {createKnob('text', 'Hello')}
     </Button>
-  )))
+  ))
   .add('Story without any knobs', () => (
     <Button>Hello</Button>
   ));