Use per-story parameters in Notes addon

addons/notes/README.md

@@ -7,7 +7,7 @@
 [![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)
 [![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#sponsors)
 
-* * *
+---
 
 Storybook Addon Notes allows you to write notes (text or HTML) for your stories in [Storybook](https://storybook.js.org).
 
@@ -29,16 +29,24 @@ Add following content to it:
 import '@storybook/addon-notes/register';
 ```
 
-Then write your stories like this:
+Then add the `withNotes` decorator to all stories in your `config.js`:
 
 ```js
-import { storiesOf } from '@storybook/react';
+import { configure, addDecorator } from '@storybook/react`; // <- whichever storybook version you use
 import { withNotes } from '@storybook/addon-notes';
 
+addDecorator(withNotes);
+```
+
+You can use the `notes` parameter to add a note to each story:
+
+```js
+import { storiesOf } from '@storybook/react';
+
 import Component from './Component';
 
 storiesOf('Component', module)
-  .add('with some emoji', withNotes('A very simple component')(() => </Component>));
+  .add('with some emoji', () => </Component>, { notes: 'A very simple component' });
 ```
 
 #### Using Markdown
@@ -47,25 +55,27 @@ To use markdown in your notes simply import a markdown file and use that in your
 
 ```js
 import { storiesOf } from '@storybook/react';
-import { withNotes } from '@storybook/addon-notes';
 import Component from './Component';
 import someMarkdownText from './someMarkdownText.md';
 
-storiesOf('Component', module)
-  .add('With Markdown', withNotes(someMarkdownText)(() => <Component/>));
-
+storiesOf('Component', module).add(
+  'With Markdown',
+  () => <Component />
+  { notes: someMarkdownText }
+);
 ```
 
-If you want to use Github flavored markdown inline, use `withMarkdownNotes`:
+If you want to use Github flavored markdown inline, use `notes: { markdownText: 'your md' }`:
 
 ```js
 import { storiesOf } from '@storybook/react';
-import { withMarkdownNotes } from '@storybook/addon-notes';
 import Component from './Component';
 
-storiesOf('Component', module)
-  .add('With Markdown', withMarkdownNotes(`
-# Hello World
+storiesOf('Component', module).add(
+  'With Markdown',
+  () => <Component />
+  { notes: { markdown: `
+  # Hello World
 
 This is some code showing usage of the component and other inline documentation
 
@@ -75,20 +85,6 @@ This is some code showing usage of the component and other inline documentation
   <Component/>
 </div>
 ~~~
-  `)(() => <Component/>));
-
-```
-
-### Deprecated API
-This API is slated for removal in 4.0
-
-```js
-import { WithNotes } from '@storybook/addon-notes';
-
-storiesOf('Addon Notes', module)
-  .add('using deprecated API', () => (
-    <WithNotes notes="Hello">
-      <BaseButton onClick={action('clicked')} label="😀 😎 👍 💯" />
-    </WithNotes>
-  ));
+`} }
+);
 ```

addons/notes/src/index.js

@@ -3,25 +3,49 @@ import addons from '@storybook/addons';
 import marked from 'marked';
 import { WithNotes as ReactWithNotes } from './react';
 
-export const withMarkdownNotes = (text, options) => {
+function renderMarkdown(text, options) {
+  marked.setOptions({ ...marked.defaults, options });
+  return marked(text);
+}
+
+const decorator = options => {
   const channel = addons.getChannel();
-  return getStory => context => {
-    marked.setOptions({ ...marked.defaults, options });
-    // send the notes to the channel before the story is rendered
-    channel.emit('storybook/notes/add_notes', marked(text));
+  return (getStory, context) => {
+    const { parameters: { notes } } = context;
+    console.log({ options, getStory, context, notes });
+    const storyOptions = notes || options;
+
+    if (storyOptions) {
+      const { text, markdown, markdownOptions } =
+        typeof storyOptions === 'string' ? { text: storyOptions } : storyOptions;
+
+      if (!text && !markdown) {
+        throw new Error('You must set of one of `text` or `markdown` on the `notes` parameter');
+      }
+
+      channel.emit('storybook/notes/add_notes', text || renderMarkdown(markdown, markdownOptions));
+    }
+
     return getStory(context);
   };
 };
 
-export const withNotes = textOrOptions => {
-  const channel = addons.getChannel();
-  const options = typeof textOrOptions === 'string' ? { text: textOrOptions } : textOrOptions;
+const hoc = options => story => context => decorator(options)(story, context);
 
-  return getStory => context => {
-    // send the notes to the channel before the story is rendered
-    channel.emit('storybook/notes/add_notes', options.text);
-    return getStory(context);
-  };
+export const withMarkdownNotes = (text, options) =>
+  hoc({
+    markdown: text,
+    markdownOptions: options,
+  });
+
+export const withNotes = (...args) => {
+  // Used without options as .addDecorator(withNotes)
+  if (typeof args[0] === 'function') {
+    return decorator()(...args);
+  }
+
+  // Input are options, ala .add('name', withNotes('note')(() => <Story/>))
+  return hoc(args[0]);
 };
 
 Object.defineProperty(exports, 'WithNotes', {

examples/official-storybook/stories/addon-notes.stories.js

@@ -7,22 +7,11 @@ import { action } from '@storybook/addon-actions';
 import BaseButton from '../components/BaseButton';
 import markdownNotes from './notes/notes.md';
 
-storiesOf('Addons|Notes', module)
-  .add(
-    'withNotes',
-    withNotes(
-      'This is the notes for a button. This is helpful for adding details about a story in a separate panel.'
-    )(() => <BaseButton label="Button with notes - check the notes panel for details" />)
-  )
-  .add(
-    'withNotes rendering imported markdown',
-    withNotes(markdownNotes)(() => (
-      <BaseButton label="Button with notes - check the notes panel for details" />
-    ))
-  )
-  .add(
-    'withNotes rendering inline, github-flavored markdown',
-    withMarkdownNotes(`
+const baseStory = () => (
+  <BaseButton label="Button with notes - check the notes panel for details" />
+);
+
+const markdownString = `
 # Documentation
 
 This is inline github-flavored markdown!
@@ -37,10 +26,20 @@ storiesOf('Addons|Notes', module)
     ))
   )
 ~~~
-    `)(() => (
-      <BaseButton label="Button with notes from inline github-flavored markdown - check the notes panel for details" />
-    ))
-  )
+    `;
+
+storiesOf('Addons|Notes', module)
+  .addDecorator(withNotes)
+  .add('withNotes', baseStory, {
+    notes:
+      'This is the notes for a button. This is helpful for adding details about a story in a separate panel.',
+  })
+  .add('withNotes rendering imported markdown', baseStory, { notes: markdownNotes })
+  .add('withNotes rendering inline, github-flavored markdown', baseStory, {
+    notes: { markdown: markdownString },
+  })
+  .add('using decorator arguments, withNotes', withNotes('Notes into withNotes')(baseStory))
+  .add('using decorator arguments, withMarkdownNotes', withMarkdownNotes(markdownString)(baseStory))
   .add('using deprecated API', () => (
     <WithNotes notes="Hello">
       <BaseButton onClick={action('clicked')} label="😀 😎 👍 💯" />