WIP - add vue support

.eslintignore

@@ -6,6 +6,8 @@ node_modules
 app/**/demo/**
 docs/public
 
+vue
+
 *.bundle.js
 *.js.map
 

.gitignore

@@ -14,3 +14,4 @@ packages/examples/automated-*
 yarn.lock
 /**/LICENSE
 docs/public
+package-lock.json

addons/knobs/README.md

@@ -37,7 +37,7 @@ Now, write your stories with knobs.
 
 ```js
 import { storiesOf } from '@storybook/react';
-import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
+import { addonKnobs, text, boolean, number } from '@storybook/addon-knobs';
 
 const stories = storiesOf('Storybook Knobs', module);
 
@@ -52,14 +52,15 @@ stories.add('with a button', () => (
   </button>
 ))
 
+const options = {};
 // Knobs as dynamic variables.
-stories.add('as dynamic variables', () => {
+stories.add('as dynamic variables', addonKnobs(options)(() => {
   const name = text('Name', 'Arunoda Susiripala');
   const age = number('Age', 89);
 
   const content = `I am ${name} and I'm ${age} years old.`;
   return (<div>{content}</div>);
-});
+}));
 ```
 
 You can see your Knobs in a Storybook panel as shown below.

addons/knobs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-knobs",
-  "version": "3.1.2",
+  "version": "3.2.0-alpha.0",
   "description": "Storybook Addon Prop Editor Component",
   "license": "MIT",
   "main": "dist/index.js",
@@ -26,9 +26,11 @@
     "prop-types": "^15.5.8",
     "react-color": "^2.11.4",
     "react-datetime": "^2.8.10",
-    "react-textarea-autosize": "^4.3.0"
+    "react-textarea-autosize": "^4.3.0",
+    "util-deprecate": "1.0.2"
   },
   "devDependencies": {
+    "vue": "2.3.4",
     "@types/node": "^7.0.12",
     "@types/react": "^15.0.21",
     "git-url-parse": "^6.2.2",

addons/knobs/src/KnobManager.js

@@ -1,17 +1,14 @@
 /* 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;
-    this.knobStoreMap = {};
+  constructor(channel) {
+    this.channel = channel;
+    this.knobStore = new KnobStore();
   }
 
   knob(name, options) {
@@ -37,22 +34,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/KnobManager.test.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { shallow } from 'enzyme'; // eslint-disable-line
 import KnobManager from './KnobManager';
 
@@ -74,24 +73,4 @@ describe('KnobManager', () => {
       });
     });
   });
-
-  describe('wrapStory()', () => {
-    it('should contain the story and add correct props', () => {
-      const testManager = new KnobManager();
-
-      const testChannel = { emit: () => {} };
-      const testStory = () => <div id="test-story">Test Content</div>;
-      const testContext = {
-        kind: 'Foo',
-        story: 'bar baz',
-      };
-      const wrappedStory = testManager.wrapStory(testChannel, testStory, testContext);
-      const wrapper = shallow(wrappedStory);
-      expect(wrapper.find('#test-story').length).toBe(1);
-
-      const storyWrapperProps = wrappedStory.props;
-      expect(storyWrapperProps.channel).toEqual(testChannel);
-      expect(storyWrapperProps.context).toEqual(testContext);
-    });
-  });
 });

addons/knobs/src/components/Panel.js

@@ -57,10 +57,16 @@ export default class Panel extends React.Component {
     this.loadedFromUrl = false;
     this.props.channel.on('addon:knobs:setKnobs', this.setKnobs);
     this.props.channel.on('addon:knobs:setOptions', this.setOptions);
+
+    this.stopListeningOnStory = this.props.api.onStory(() => {
+      this.setState({ knobs: [] });
+      this.props.channel.emit('addon:knobs:reset');
+    });
   }
 
   componentWillUnmount() {
     this.props.channel.removeListener('addon:knobs:setKnobs', this.setKnobs);
+    this.stopListeningOnStory();
   }
 
   setOptions(options = { debounce: false, timestamps: false }) {
@@ -155,6 +161,7 @@ Panel.propTypes = {
   }).isRequired,
   onReset: PropTypes.object, // eslint-disable-line
   api: PropTypes.shape({
+    onStory: PropTypes.func,
     getQueryParam: PropTypes.func,
     setQueryParams: PropTypes.func,
   }).isRequired,

addons/knobs/src/components/__tests__/Panel.js

@@ -5,7 +5,17 @@ import Panel from '../Panel';
 describe('Panel', () => {
   it('should subscribe to setKnobs event of channel', () => {
     const testChannel = { on: jest.fn() };
-    shallow(<Panel channel={testChannel} />);
+    const testApi = { onStory: jest.fn() };
+    shallow(<Panel channel={testChannel} api={testApi} />);
+    expect(testChannel.on).toHaveBeenCalledWith('addon:knobs:setKnobs', jasmine.any(Function));
+  });
+
+  it('should subscribe to onStory event', () => {
+    const testChannel = { on: jest.fn() };
+    const testApi = { onStory: jest.fn() };
+    shallow(<Panel channel={testChannel} api={testApi} />);
+
+    expect(testApi.onStory).toHaveBeenCalled();
     expect(testChannel.on).toHaveBeenCalledWith('addon:knobs:setKnobs', jasmine.any(Function));
   });
 
@@ -28,6 +38,7 @@ describe('Panel', () => {
       const testApi = {
         getQueryParam: key => testQueryParams[key],
         setQueryParams: jest.fn(),
+        onStory: jest.fn(),
       };
 
       shallow(<Panel channel={testChannel} api={testApi} />);
@@ -74,6 +85,7 @@ describe('Panel', () => {
       const testApi = {
         getQueryParam: key => testQueryParams[key],
         setQueryParams: jest.fn(),
+        onStory: jest.fn(),
       };
 
       const wrapper = shallow(<Panel channel={testChannel} api={testApi} />);
@@ -115,6 +127,7 @@ describe('Panel', () => {
       const testApi = {
         getQueryParam: jest.fn(),
         setQueryParams: jest.fn(),
+        onStory: jest.fn(),
       };
 
       const wrapper = shallow(<Panel channel={testChannel} api={testApi} />);

addons/knobs/src/index.js

@@ -1,7 +1,12 @@
+import { window } from 'global';
+import deprecate from 'util-deprecate';
 import addons from '@storybook/addons';
 import KnobManager from './KnobManager';
+import { vueHandler } from './vue';
+import { reactHandler } from './react';
 
-const manager = new KnobManager();
+const channel = addons.getChannel();
+const manager = new KnobManager(channel);
 
 export function knob(name, options) {
   return manager.knob(name, options);
@@ -55,16 +60,48 @@ 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);
+function oldKnobs(storyFn, context) {
+  return reactHandler(channel, manager.knobStore)(storyFn)(context);
 }
 
-export function withKnobsOptions(options = {}) {
+function oldKnobsWithOptions(options = {}) {
   return (...args) => {
-    const channel = addons.getChannel();
     channel.emit('addon:knobs:setOptions', options);
 
-    return withKnobs(...args);
+    return oldKnobs(...args);
   };
 }
+
+Object.defineProperty(exports, 'withKnobs', {
+  configurable: true,
+  enumerable: true,
+  get: deprecate(
+    () => oldKnobs,
+    '@storybook/addon-knobs withKnobs decorator is deprecated, use addonKnobs() instead. See https://github.com/storybooks/storybook/tree/master/addons/knobs'
+  ),
+});
+
+Object.defineProperty(exports, 'withKnobsOptions', {
+  configurable: true,
+  enumerable: true,
+  get: deprecate(
+    () => oldKnobsWithOptions,
+    '@storybook/addon-knobs withKnobsOptions decorator is deprecated, use addonKnobs() instead. See https://github.com/storybooks/storybook/tree/master/addons/knobs'
+  ),
+});
+
+export function addonKnobs(options) {
+  if (options) channel.emit('addon:knobs:setOptions', options);
+
+  switch (window.STORYBOOK_ENV) {
+    case 'vue': {
+      return vueHandler(channel, manager.knobStore);
+    }
+    case 'react': {
+      return reactHandler(channel, manager.knobStore);
+    }
+    default: {
+      return reactHandler(channel, manager.knobStore);
+    }
+  }
+}

addons/knobs/src/react/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import WrapStory from './WrapStory';
+
+/**
+ * Handles a react story
+ */
+export const reactHandler = (channel, knobStore) => getStory => context => {
+  const initialContent = getStory(context);
+  const props = { context, storyFn: getStory, channel, knobStore, initialContent };
+  return <WrapStory {...props} />;
+};

addons/knobs/src/react/index.test.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { reactHandler } from './index';
+import { shallow } from 'enzyme'; // eslint-disable-line
+import KnobStore from '../KnobStore';
+
+describe('React Handler', () => {
+  describe('wrapStory', () => {
+    it('should contain the story and add correct props', () => {
+      const testChannel = { emit: () => {} };
+      const testStory = () => <div id="test-story">Test Content</div>;
+      const testContext = {
+        kind: 'Foo',
+        story: 'bar baz',
+      };
+
+      const testStore = new KnobStore();
+
+      const wrappedStory = reactHandler(testChannel, testStore)(testStory)(testContext);
+      const wrapper = shallow(wrappedStory);
+      expect(wrapper.find('#test-story').length).toBe(1);
+
+      const storyWrapperProps = wrappedStory.props;
+      expect(storyWrapperProps.channel).toEqual(testChannel);
+      expect(storyWrapperProps.context).toEqual(testContext);
+    });
+  });
+});

addons/knobs/src/vue/index.js

@@ -0,0 +1,37 @@
+export const vueHandler = (channel, knobStore) => getStory => context => ({
+  render(h) {
+    return h(getStory(context));
+  },
+
+  methods: {
+    onKnobChange(change) {
+        const { name, value } = change;
+        // Update the related knob and it's value.
+        const knobOptions = knobStore.get(name);
+        knobOptions.value = value;
+        this.$forceUpdate();
+    },
+
+    onKnobReset() {
+        knobStore.reset();
+        this.setPaneKnobs(false);
+        this.$forceUpdate();
+    },
+
+    setPaneKnobs(timestamp = +new Date()) {
+        channel.emit('addon:knobs:setKnobs', { knobs: knobStore.getAll(), timestamp });  
+    },
+  },
+
+  created() {
+    channel.on('addon:knobs:reset', this.onKnobReset);
+    channel.on('addon:knobs:knobChange', this.onKnobChange);
+    knobStore.subscribe(this.setPaneKnobs);
+  },
+
+  beforeDestroy(){
+    channel.removeListener('addon:knobs:reset', this.onKnobReset);
+    channel.removeListener('addon:knobs:knobChange', this.onKnobChange);
+    knobStore.unsubscribe(this.setPaneKnobs);
+  }
+});

addons/knobs/src/vue/index.test.js

@@ -0,0 +1,39 @@
+import Vue from 'vue';
+import { vueHandler } from './index';
+import KnobStore from '../KnobStore';
+
+describe('Vue handler', () => {
+  it('Returns a component with a created function', () => {
+    const testChannel = { emit: () => {} };
+    const testStory = () => ({ template: '<div> testStory </div>' });
+    const testContext = {
+      kind: 'Foo',
+      story: 'bar baz',
+    };
+
+    const testStore = new KnobStore();
+    const component = vueHandler(testChannel, testStore)(testStory)(testContext);
+
+    expect(component).toMatchObject({
+      created: expect.any(Function),
+      beforeDestroy: expect.any(Function),
+      render: expect.any(Function),
+    });
+  });
+
+  it('Subscribes to the channel on creation', () => {
+    const testChannel = { emit: () => {}, on: jest.fn() };
+    const testStory = () => ({ render: (h) => h('div', ['testStory']) });
+    const testContext = {
+      kind: 'Foo',
+      story: 'bar baz',
+    };
+
+    const testStore = new KnobStore();
+    const component = new Vue(vueHandler(testChannel, testStore)(testStory)(testContext)).$mount();
+
+    expect(testChannel.on).toHaveBeenCalledTimes(2);
+    expect(testChannel.on).toHaveBeenCalledWith('addon:knobs:reset', expect.any(Function));
+    expect(testChannel.on).toHaveBeenCalledWith('addon:knobs:knobChange', expect.any(Function));
+  });
+});