Use addDecorator api to wrap stories

This requires some changes to the wrap function because not its called every time a story is mounted. Now it uses a map of knob stores instead of localKnobStores.

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>
   ));