Refactor transitional decorator from addon-notes

addons/notes/src/__tests__/index.js

@@ -1,7 +1,7 @@
 import addons from '@storybook/addons';
 import { withNotes } from '..';
 
-jest.mock('@storybook/addons');
+addons.getChannel = jest.fn();
 
 describe('Storybook Addon Notes', () => {
   it('should inject text from `notes` parameter', () => {

addons/notes/src/index.js

@@ -1,18 +1,18 @@
-import addons from '@storybook/addons';
+import addons, { makeTransitionalDecorator } from '@storybook/addons';
 import marked from 'marked';
 
 function renderMarkdown(text, options) {
   marked.setOptions({ ...marked.defaults, options });
   return marked(text);
 }
 
-const decorator = options => {
-  const channel = addons.getChannel();
-  return (getStory, context) => {
-    const {
-      parameters: { notes },
-    } = context;
-    const storyOptions = notes || options;
+export const withNotes = makeTransitionalDecorator({
+  name: 'withNotes',
+  parameterName: 'notes',
+  wrapper: (getStory, context, { options, parameters }) => {
+    const channel = addons.getChannel();
+
+    const storyOptions = parameters || options;
 
     if (storyOptions) {
       const { text, markdown, markdownOptions } =
@@ -26,23 +26,11 @@ const decorator = options => {
     }
 
     return getStory(context);
-  };
-};
-
-const hoc = options => story => context => decorator(options)(story, context);
+  },
+});
 
 export const withMarkdownNotes = (text, options) =>
-  hoc({
+  withNotes({
     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]);
-};

lib/addons/package.json

@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@storybook/channels": "4.0.0-alpha.4",
-    "global": "^4.3.2"
+    "global": "^4.3.2",
+    "util-deprecate": "^1.0.2"
   }
 }

lib/addons/src/index.js

@@ -2,6 +2,7 @@
 import global from 'global';
 
 export mockChannel from './storybook-channel-mock';
+export { makeTransitionalDecorator } from './transitional-decorator';
 
 export class AddonStore {
   constructor() {

lib/addons/src/transitional-decorator.js

@@ -0,0 +1,40 @@
+import deprecate from 'util-deprecate';
+
+// Create a decorator that can be used both in the (deprecated) old "hoc" style:
+//   .add('story', decorator(options)(() => <Story />));
+//
+// And in the new, "parameterized" style:
+//   .addDecorator(decorator)
+//   .add('story', () => <Story />, { name: { parameters } });
+
+export const makeTransitionalDecorator = ({ name, parameterName, wrapper }) => {
+  const decorator = options => (getStory, context) => {
+    const parameters = context.parameters && context.parameters[parameterName];
+
+    return wrapper(getStory, context, {
+      options,
+      parameters,
+    });
+  };
+
+  return (...args) => {
+    // Used without options as .addDecorator(decorator)
+    if (typeof args[0] === 'function') {
+      return decorator()(...args);
+    }
+
+    return (...innerArgs) => {
+      // Used as [.]addDecorator(decorator(options))
+      if (typeof innerArgs.length > 1) {
+        return decorator(...args)(...innerArgs);
+      }
+
+      // Used to wrap a story directly .add('story', decorator(options)(() => <Story />))
+      //   This is now deprecated:
+      return deprecate(
+        context => decorator(...args)(innerArgs[0], context),
+        `Passing stories directly into ${name}() is deprecated, instead use addDecorator(${name}) and pass options with the '${parameterName}' parameter`
+      );
+    };
+  };
+};