Merge pull request #1278 from storybooks/addon-notes-vue

Add support for vue in addon-notes

addons/notes/README.md

@@ -31,17 +31,11 @@ import '@storybook/addon-notes/register';
 Then write your stories like this:
 
 ```js
-import React from 'react';
-
 import { storiesOf } from '@storybook/react';
-import { WithNotes } from '@storybook/addon-notes';
+import { withNotes } from '@storybook/addon-notes';
 
 import Component from './Component';
 
 storiesOf('Component', module)
-  .add('with some emoji', () => (
-    <WithNotes notes={'A very simple component'}>
-      <Component></Component>
-    </WithNotes>
-  ));
+  .add('with some emoji', withNotes({ notes: 'A very simple component'})(() => <Component></Component>));
 ```

addons/notes/package.json

@@ -4,8 +4,8 @@
   "description": "Write notes for your Storybook stories.",
   "keywords": [
     "addon",
-    "react",
-    "storybook"
+    "storybook",
+    "notes"
   ],
   "license": "MIT",
   "main": "dist/index.js",
@@ -21,18 +21,16 @@
   "dependencies": {
     "@storybook/addons": "^3.1.2",
     "babel-runtime": "^6.23.0",
-    "prop-types": "^15.5.10"
+    "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "git-url-parse": "^6.2.2",
-    "react": "^15.5.4",
-    "react-addons-test-utils": "^15.5.1",
-    "react-dom": "^15.5.4"
+    "prop-types": "^15.5.10",
+    "react": "^15.5.4"
   },
-  "peerDependencies": {
-    "react": "*"
-  },
-  "optionalDependencies": {
-    "@types/react": "^15.0.24"
+  "peerDependencies": {		
+    "react": "*"		
+  },		
+  "optionalDependencies": {		
+    "@types/react": "^15.0.24"		
   }
 }

addons/notes/src/index.js

@@ -1,24 +1,22 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import deprecate from 'util-deprecate';
 import addons from '@storybook/addons';
+import { WithNotes as ReactWithNotes } from './react';
 
-export class WithNotes extends React.Component {
-  render() {
-    const { children, notes } = this.props;
-    const channel = addons.getChannel();
+export const withNotes = ({ notes }) => {
+  const channel = addons.getChannel();
 
-    // send the notes to the channel.
+  return getStory => () => {
+    // send the notes to the channel before the story is rendered
     channel.emit('storybook/notes/add_notes', notes);
-    // return children elements.
-    return children;
-  }
-}
-
-WithNotes.propTypes = {
-  children: PropTypes.node,
-  notes: PropTypes.string,
-};
-WithNotes.defaultProps = {
-  children: null,
-  notes: '',
+    return getStory();
+  };
 };
+
+Object.defineProperty(exports, 'WithNotes', {
+  configurable: true,
+  enumerable: true,
+  get: deprecate(
+    () => ReactWithNotes,
+    '@storybook/addon-notes WithNotes Component is deprecated, use withNotes() instead. See https://github.com/storybooks/storybook/tree/master/addons/notes'
+  ),
+});

addons/notes/src/react.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import addons from '@storybook/addons';
+
+export class WithNotes extends React.Component {
+  render() {
+    const { children, notes } = this.props;
+    const channel = addons.getChannel();
+
+    // send the notes to the channel.
+    channel.emit('storybook/notes/add_notes', notes);
+    // return children elements.
+    return children;
+  }
+}
+
+WithNotes.propTypes = {
+  children: PropTypes.node,
+  notes: PropTypes.string,
+};
+WithNotes.defaultProps = {
+  children: null,
+  notes: '',
+};

app/vue/src/client/preview/client_api.js

@@ -59,25 +59,14 @@ export default class ClientApi {
         throw new Error(`Story of "${kind}" named "${storyName}" already exists`);
       }
 
-      let component = getStory;
-      if (typeof getStory === 'function') {
-        component = getStory();
-      }
-
-      if (typeof component === 'string') {
-        component = { template: component };
-      } else if (typeof component === 'function') {
-        component = { render: component };
-      }
-
       // Wrap the getStory function with each decorator. The first
       // decorator will wrap the story function. The second will
       // wrap the first decorator and so on.
       const decorators = [...localDecorators, ...this._globalDecorators];
 
       const fn = decorators.reduce(
         (decorated, decorator) => context => decorator(() => decorated(context), context),
-        component
+        getStory
       );
 
       // Add the fully decorated getStory function.

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

@@ -82,12 +82,20 @@ export function renderMain(data, storyStore) {
     // ReactDOM.unmountComponentAtNode(rootEl);
   }
 
-  // const context = {
-  //   kind: selectedKind,
-  //   story: selectedStory,
-  // };
+  const context = {
+    kind: selectedKind,
+    story: selectedStory,
+  };
 
-  // const element = story(context);
+  const element = story(context);
+
+
+  let component = element;
+  if (typeof component === 'string') {
+    component = { template: component };
+  } else if (typeof component === 'function') {
+    component = { render: component };
+  }
 
   // if (!element) {
   //   const error = {
@@ -112,7 +120,7 @@ export function renderMain(data, storyStore) {
   // }
 
   // ReactDOM.render(element, rootEl);
-  app.renderStory(story);
+  app.renderStory(component);
   return null;
 }
 

examples/cra-storybook/.storybook/addons.js

@@ -1,3 +1,4 @@
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
 import '@storybook/addon-events/register';
+import '@storybook/addon-notes/register';

examples/cra-storybook/package.json

@@ -22,6 +22,7 @@
     "@storybook/addon-actions": "^3.0.0",
     "@storybook/addon-links": "^3.0.0",
     "@storybook/addon-events": "^3.0.0",
+    "@storybook/addon-notes": "^3.0.0",
     "@storybook/addons": "^3.0.0",
     "@storybook/react": "^3.0.0",
     "react-scripts": "1.0.1"

examples/cra-storybook/src/stories/index.js

@@ -4,6 +4,7 @@ import EventEmiter from 'eventemitter3';
 
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
+import { withNotes, WithNotes } from '@storybook/addon-notes';
 import { linkTo } from '@storybook/addon-links';
 import WithEvents from '@storybook/addon-events';
 
@@ -88,3 +89,18 @@ storiesOf('WithEvents', module)
     </WithEvents>
   )
   .add('Logger', () => <Logger emiter={emiter} />);
+
+storiesOf('withNotes', module)
+  .add('with some text', withNotes({ notes: 'Hello guys' })(() => <div>Hello copain</div>))
+  .add('with some emoji', withNotes({ notes: 'My notes on emojies' })(() => <p>🤔😳😯😮</p>))
+  .add(
+    'with a button and some emoji',
+    withNotes({ notes: 'My notes on a button with emojies' })(() =>
+      <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
+    )
+  )
+  .add('with old API', () =>
+    <WithNotes notes="Hello">
+      <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
+    </WithNotes>
+  );

examples/vue/.storybook/addons.js

@@ -1,2 +1,4 @@
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
+import '@storybook/addon-notes/register';
+

examples/vue/package.json

@@ -8,6 +8,7 @@
     "@storybook/addon-actions": "^3.0.0",
     "@storybook/addon-links": "^3.0.0",
     "@storybook/addons": "^3.0.0",
+    "@storybook/addon-notes": "^3.0.0",
     "vue-hot-reload-api": "^2.1.0",
     "vue-style-loader": "^3.0.1",
     "vue-loader": "^12.2.1"

examples/vue/src/stories/index.js

@@ -1,19 +1,18 @@
+import React from 'react';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import { storiesOf } from '@storybook/vue';
 
 import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
 
+import { withNotes } from '@storybook/addon-notes';
+
 import MyButton from './Button.vue';
 
-// This does not work. We need to Vue.use or Vue.component is called before mount the root Vue
-// Vue.use(Vuex);
-// Vue.component('my-button', MyButton);
 
 storiesOf('Button', module)
   // Works if Vue.component is called in the config.js in .storybook 
-  .add('rounded markup only', '<my-button :rounded="true">rounded markup only</my-button>')
   .add('story as a function template', () => '<my-button :rounded="true">story as a function template</my-button>')
   .add('story as a function renderer', () => (h) => h('div', ['story as a function renderer']))
   .add('story as a function component with template', () => ({
@@ -22,7 +21,7 @@ storiesOf('Button', module)
   .add('story as a function component with renderer', () => ({
     render: (h) => h('my-button', { props : { rounded: true }}, ['story as a function component with renderer']),
   }))
-  .add('with vuex', {
+  .add('with vuex',() => ({
     components: { MyButton },
     template: '<my-button :handle-click="log">with vuex: {{ $store.state.count }}</my-button>',
     store: new Vuex.Store({
@@ -39,8 +38,8 @@ storiesOf('Button', module)
         this.$store.commit('increment');
       },
     },
-  })
-  .add('with text', {
+  }))
+  .add('with text', () => ({
     // need to register local component until we can make sur Vue.componennt si called before mounting the root Vue
     components: { MyButton },
     template: '<my-button :handle-click="log">with text: {{ count }}</my-button>',
@@ -54,24 +53,47 @@ storiesOf('Button', module)
         this.action(this.count);
       }
     }
-  })
+  }));
 
 storiesOf('Other', module)
-  .add('button with emoji', '<button>😑😐😶🙄</button>')
-  .add('p with emoji', '<p>🤔😳😯😮</p>')
-  .add('colorful', {
+  .add('button with emoji', () => '<button>😑😐😶🙄</button>')
+  .add('p with emoji', () => '<p>🤔😳😯😮</p>')
+  .add('colorful', () => ({
     render(h) {
       return h(MyButton, { props: { color: 'pink' } }, ['colorful']);
     }
-  })
-  .add('rounded', {
+  }))
+  .add('rounded', () => ({
     components: { MyButton },
     template: '<my-button :rounded="true">rounded</my-button>'
-  })
-  .add('not rounded', {
+  }))
+  .add('not rounded', () => ({
     components: { MyButton },
     template: '<my-button :rounded="false" :handle-click="action">not rounded</my-button>',
     methods: {
       action: linkTo('Button')
     }
-  })
+  }))
+
+
+storiesOf('Addon Notes', module)
+  .add('with some emoji', withNotes({notes: 'My notes on emojies'})(() => '<p>🤔😳😯😮</p>'))
+  .add('with some button', withNotes({ notes: 'My notes on some button' })(() => ({
+    components: { MyButton },
+    template: '<my-button :rounded="true">rounded</my-button>'
+  })))
+  .add('with some color', withNotes({ notes: 'Some notes on some colored component' })(() => ({
+    render(h) {
+      return h(MyButton, { props: { color: 'pink' } }, ['colorful']);
+    }
+  })))
+  .add('with some text', withNotes({ notes: 'My notes on some text' })(() => ({
+      template: '<div>Text</div>'
+    })
+  ))
+  .add('with some long text', withNotes({ notes: 'My notes on some long text' })(
+    () => '<div>A looooooooonnnnnnnggggggggggggg text</div>'
+  ))
+  .add('with some bold text', withNotes({ notes: 'My notes on some bold text' })(() => ({
+    render: h => h('div', [h('strong', ['A very long text to display'])])
+  })));