Refactoring of withX wrappers withNotes and withInfo

- make signatures consistent
- make string-only variant of withNotes/withInfo
- simplify withInfo code

ROADMAP.md

@@ -10,8 +10,8 @@
     -   [See multiple (or all) stories in 1 preview.](#see-multiple-or-all-stories-in-1-preview)
     -   [Deeper level hierarchy](#deeper-level-hierarchy)
 -   [Supporting other frameworks and libraries](#supporting-other-frameworks-and-libraries)
-    -   [Vue](#vue) (*in alpha*)
-    -   [Angular](#angular) (*in development*)
+    -   [Vue](#vue)
+    -   [Angular](#angular)
     -   [Webcomponents](#webcomponents)
     -   [Polymer](#polymer)
     -   [Aurelia](#aurelia)
@@ -20,7 +20,7 @@
     -   [API for adding stories](#api-for-adding-stories)
 -   [Documentation](#documentation)
     -   [Better design](#better-design)
-    -   [Record videos and write blog post on how to tweak storybook](#record-videos-and-write-blog-post-on-how-to-tweak-storybook)
+    -   [Record videos and write blog post on how to use, tweak & develop storybook](#record-videos-and-write-blog-post-on-how-to-use-tweak--develop-storybook)
 
 ## New features
 
@@ -110,8 +110,7 @@ We have a new logo, so next step is a overhaul of our documentation site.
 
 ### Record videos and write blog post on how to use, tweak & develop storybook
 
-- writing addons, 
-- choosing the right addons.
-- how to start developing on our codebase.
-- how to use storybook itself and the CLI.
-
+-   writing addons, 
+-   choosing the right addons.
+-   how to start developing on our codebase.
+-   how to use storybook itself and the CLI.

addons/info/src/index.js

@@ -1,14 +1,8 @@
 import React from 'react';
 import deprecate from 'util-deprecate';
-import _Story from './components/Story';
+import Story from './components/Story';
 import { H1, H2, H3, H4, H5, H6, Code, P, UL, A, LI } from './components/markdown';
 
-function addonCompose(addonFn) {
-  return storyFn => context => addonFn(storyFn, context);
-}
-
-export const Story = _Story;
-
 const defaultOptions = {
   inline: false,
   header: true,
@@ -34,20 +28,10 @@ const defaultMarksyConf = {
   ul: UL,
 };
 
-export function addInfo(storyFn, context, info, _options) {
-  if (typeof storyFn !== 'function') {
-    if (typeof info === 'function') {
-        _options = storyFn; // eslint-disable-line
-        storyFn = info; // eslint-disable-line
-        info = ''; // eslint-disable-line
-    } else {
-      throw new Error('No story defining function has been specified');
-    }
-  }
-
+function addInfo(storyFn, context, infoOptions) {
   const options = {
     ...defaultOptions,
-    ..._options,
+    ...infoOptions,
   };
 
   // props.propTables can only be either an array of components or null
@@ -62,7 +46,7 @@ export function addInfo(storyFn, context, info, _options) {
     Object.assign(marksyConf, options.marksyConf);
   }
   const props = {
-    info,
+    info: options.text,
     context,
     showInline: Boolean(options.inline),
     showHeader: Boolean(options.header),
@@ -83,12 +67,29 @@ export function addInfo(storyFn, context, info, _options) {
   );
 }
 
-export const withInfo = (info, _options) =>
-  addonCompose((storyFn, context) => addInfo(storyFn, context, info, _options));
+export const withInfo = textOrOptions => {
+  if (typeof textOrOptions === 'string') {
+    const text = textOrOptions;
+    return withInfo({ text });
+  }
+  const options = textOrOptions;
+  return storyFn => context => addInfo(storyFn, context, options);
+};
+
+export { Story };
 
 export default {
-  addWithInfo: deprecate(function addWithInfo(storyName, info, storyFn, _options) {
-    return this.add(storyName, withInfo(info, _options)(storyFn));
+  addWithInfo: deprecate(function addWithInfo(storyName, text, storyFn, options) {
+    if (typeof storyFn !== 'function') {
+      if (typeof text === 'function') {
+        options = storyFn; // eslint-disable-line
+        storyFn = text; // eslint-disable-line
+        text = ''; // eslint-disable-line
+      } else {
+        throw new Error('No story defining function has been specified');
+      }
+    }
+    return this.add(storyName, withInfo({ text, ...options })(storyFn));
   }, '@storybook/addon-info .addWithInfo() addon is deprecated, use withInfo() from the same package instead. \nSee https://github.com/storybooks/storybook/tree/master/addons/info'),
 };
 

addons/info/src/index.test.js

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import AddonInfo, { withInfo, setDefaults, addInfo } from './';
+import AddonInfo, { withInfo, setDefaults } from './';
 
 /* eslint-disable */
 const TestComponent = ({ func, obj, array, number, string, bool, empty }) =>
@@ -48,9 +48,14 @@ describe('addon Info', () => {
     )(story);
     ReactDOM.render(<Info />, document.createElement('div'));
   });
+  it('should render with text options', () => {
+    const Info = withInfo({ text: 'some text here' })(story);
+    ReactDOM.render(<Info />, document.createElement('div'));
+  });
   it('should render with missed info', () => {
     setDefaults(testOptions);
-    addInfo(null, testContext, story, testOptions);
+    const Info = withInfo()(story);
+    ReactDOM.render(<Info />, document.createElement('div'));
   });
   it('should show deprecation warning', () => {
     const addWithInfo = AddonInfo.addWithInfo.bind(api);

addons/notes/README.md

@@ -37,5 +37,5 @@ 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>));
+  .add('with some emoji', withNotes('A very simple component')(() => <Component></Component>));
 ```

addons/notes/src/index.js

@@ -2,12 +2,14 @@ import deprecate from 'util-deprecate';
 import addons from '@storybook/addons';
 import { WithNotes as ReactWithNotes } from './react';
 
-export const withNotes = ({ notes }) => {
+export const withNotes = textOrOptions => {
   const channel = addons.getChannel();
 
+  const text = typeof textOrOptions === 'string' ? textOrOptions : textOrOptions.text;
+
   return getStory => context => {
     // send the notes to the channel before the story is rendered
-    channel.emit('storybook/notes/add_notes', notes);
+    channel.emit('storybook/notes/add_notes', text);
     return getStory(context);
   };
 };

app/vue/README.md

@@ -33,8 +33,6 @@ For more information visit: [storybook.js.org](https://storybook.js.org)
 Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish.
 You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want.
 
-
 ## Vue Notes
 
-- When using global custom components or extension (e.g `Vue.use`). You will need to declare those in the `./storybook/config.js`.
-
+-   When using global custom components or extension (e.g `Vue.use`). You will need to declare those in the `./storybook/config.js`.

examples/cra-kitchen-sink/src/stories/index.js

@@ -135,8 +135,8 @@ storiesOf('Button', module)
   )
   .add(
     'addons composition',
-    withInfo('see Notes panel for composition info')(
-      withNotes({ notes: 'Composition: Info(Notes())' })(context =>
+    withInfo({ text: 'see Notes panel for composition info' })(
+      withNotes({ text: 'Composition: Info(Notes())' })(context =>
         <div>
           click the <InfoButton /> label in top right for info about "{context.story}"
         </div>
@@ -208,11 +208,11 @@ storiesOf('WithEvents', module)
   .add('Logger', () => <Logger emiter={emiter} />);
 
 storiesOf('withNotes', module)
-  .add('with some text', withNotes({ notes: 'Hello guys' })(() => <div>Hello guys</div>))
-  .add('with some emoji', withNotes({ notes: 'My notes on emojies' })(() => <p>🤔😳😯😮</p>))
+  .add('with some text', withNotes({ text: 'Hello guys' })(() => <div>Hello guys</div>))
+  .add('with some emoji', withNotes({ text: 'My notes on emojies' })(() => <p>🤔😳😯😮</p>))
   .add(
     'with a button and some emoji',
-    withNotes({ notes: 'My notes on a button with emojies' })(() =>
+    withNotes({ text: 'My notes on a button with emojies' })(() =>
       <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
     )
   )

examples/vue-kitchen-sink/src/stories/index.js

@@ -137,7 +137,7 @@ storiesOf('Addon Actions', module)
 storiesOf('Addon Notes', module)
   .add(
     'Simple note',
-    withNotes({ notes: 'My notes on some bold text' })(() => ({
+    withNotes({ text: 'My notes on some bold text' })(() => ({
       template:
         '<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>',
     }))