Merge pull request #1527 from storybooks/simplifyKnobsAPI

Revert knobs API to previous API.
storybookjs · Jul 27, 2017 · dcb3e1f · dcb3e1f
2 parents 21e4081 + ea02ddd
commit dcb3e1f
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 162 deletions.
diff --git a/addons/knobs/README.md b/addons/knobs/README.md
@@ -37,7 +37,7 @@ Now, write your stories with knobs.
 
 ```js
 import { storiesOf } from '@storybook/react';
-import { addonKnobs, text, boolean, number } from '@storybook/addon-knobs';
+import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
 
 const stories = storiesOf('Storybook Knobs', module);
 
@@ -52,15 +52,14 @@ stories.add('with a button', () => (
   </button>
 ))
 
-const options = {};
 // Knobs as dynamic variables.
-stories.add('as dynamic variables', addonKnobs(options)(() => {
+stories.add('as dynamic variables', () => {
   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.

diff --git a/addons/knobs/src/index.js b/addons/knobs/src/index.js
@@ -1,5 +1,4 @@
 import { window } from 'global';
-import deprecate from 'util-deprecate';
 import addons from '@storybook/addons';
 import KnobManager from './KnobManager';
 import { vueHandler } from './vue';
@@ -60,37 +59,10 @@ export function date(name, value = new Date()) {
   return manager.knob(name, { type: 'date', value: proxyValue });
 }
 
-function oldKnobs(storyFn, context) {
-  return reactHandler(channel, manager.knobStore)(storyFn)(context);
-}
-
-function oldKnobsWithOptions(options = {}) {
-  return (...args) => {
-    channel.emit('addon:knobs:setOptions', options);
-
-    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) {
+// "Higher order component" / wrapper style API
+// In 3.3, this will become `withKnobs`, once our decorator API supports it.
+//   See https://github.com/storybooks/storybook/pull/1527
+function wrapperKnobs(options) {
   if (options) channel.emit('addon:knobs:setOptions', options);
 
   switch (window.STORYBOOK_ENV) {
@@ -105,3 +77,11 @@ export function addonKnobs(options) {
     }
   }
 }
+
+export function withKnobs(storyFn, context) {
+  return wrapperKnobs()(storyFn)(context);
+}
+
+export function withKnobsOptions(options = {}) {
+  return (storyFn, context) => wrapperKnobs(options)(storyFn)(context);
+}
diff --git a/addons/notes/README.md b/addons/notes/README.md
@@ -32,10 +32,10 @@ Then write your stories like this:
 
 ```js
 import { storiesOf } from '@storybook/react';
-import { addonNotes } from '@storybook/addon-notes';
+import { withNotes } from '@storybook/addon-notes';
 
 import Component from './Component';
 
 storiesOf('Component', module)
-  .add('with some emoji', addonNotes({ notes: 'A very simple component'})(() => <Component></Component>));
+  .add('with some emoji', withNotes({ notes: 'A very simple component'})(() => <Component></Component>));
 ```
diff --git a/addons/notes/src/index.js b/addons/notes/src/index.js
@@ -2,7 +2,7 @@ import deprecate from 'util-deprecate';
 import addons from '@storybook/addons';
 import { WithNotes as ReactWithNotes } from './react';
 
-export const addonNotes = ({ notes }) => {
+export const withNotes = ({ notes }) => {
   const channel = addons.getChannel();
 
   return getStory => context => {

diff --git a/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap b/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap
@@ -1,17 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon Knobs deprecated Decorator with dynamic variables deprecated 1`] = `
-<div>
-  I am Story Teller and I'm 120 years old.
-</div>
-`;
-
-exports[`Storyshots Addon Knobs with dynamic variables new method 1`] = `
-<div>
-  I am Arunoda Susiripala and I'm 89 years old.
-</div>
-`;
-
 exports[`Storyshots App full app 1`] = `
 <div
   className="App"
@@ -1805,36 +1793,6 @@ exports[`Storyshots WithEvents Logger 1`] = `
 </div>
 `;
 
-exports[`Storyshots addonNotes with a button and some emoji 1`] = `
-<button
-  className="css-1yjiefr"
-  onClick={[Function]}
->
-  😀 😎 👍 💯
-</button>
-`;
-
-exports[`Storyshots addonNotes with old API 1`] = `
-<button
-  className="css-1yjiefr"
-  onClick={[Function]}
->
-  😀 😎 👍 💯
-</button>
-`;
-
-exports[`Storyshots addonNotes with some emoji 1`] = `
-<p>
-  🤔😳😯😮
-</p>
-`;
-
-exports[`Storyshots addonNotes with some text 1`] = `
-<div>
-  Hello guys
-</div>
-`;
-
 exports[`Storyshots component.Button first 1`] = `
 <button>
   first button
@@ -1902,3 +1860,33 @@ exports[`Storyshots component.common.Table second 1`] = `
   </tr>
 </table>
 `;
+
+exports[`Storyshots withNotes with a button and some emoji 1`] = `
+<button
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  😀 😎 👍 💯
+</button>
+`;
+
+exports[`Storyshots withNotes with old API 1`] = `
+<button
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  😀 😎 👍 💯
+</button>
+`;
+
+exports[`Storyshots withNotes with some emoji 1`] = `
+<p>
+  🤔😳😯😮
+</p>
+`;
+
+exports[`Storyshots withNotes with some text 1`] = `
+<div>
+  Hello guys
+</div>
+`;
diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js
@@ -3,12 +3,11 @@ import EventEmiter from 'eventemitter3';
 
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { addonNotes, WithNotes } from '@storybook/addon-notes';
+import { withNotes, WithNotes } from '@storybook/addon-notes';
 import { linkTo } from '@storybook/addon-links';
 import WithEvents from '@storybook/addon-events';
 import {
   withKnobs,
-  addonKnobs,
   text,
   number,
   boolean,
@@ -137,7 +136,7 @@ storiesOf('Button', module)
   .add(
     'addons composition',
     withInfo('see Notes panel for composition info')(
-      addonNotes({ notes: 'Composition: Info(Notes())' })(context =>
+      withNotes({ notes: 'Composition: Info(Notes())' })(context =>
         <div>
           click the <InfoButton /> label in top right for info about "{context.story}"
         </div>
@@ -208,12 +207,12 @@ storiesOf('WithEvents', module)
   )
   .add('Logger', () => <Logger emiter={emiter} />);
 
-storiesOf('addonNotes', module)
-  .add('with some text', addonNotes({ notes: 'Hello guys' })(() => <div>Hello guys</div>))
-  .add('with some emoji', addonNotes({ notes: 'My notes on emojies' })(() => <p>🤔😳😯😮</p>))
+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 a button and some emoji',
-    addonNotes({ notes: 'My notes on a button with emojies' })(() =>
+    withNotes({ notes: 'My notes on a button with emojies' })(() =>
       <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
     )
   )
@@ -223,35 +222,6 @@ storiesOf('addonNotes', module)
     </WithNotes>
   );
 
-storiesOf('Addon Knobs deprecated Decorator', module)
-  .addDecorator(withKnobs) // test deprecated
-  .add('with dynamic variables deprecated', () => {
-    const name = text('Name', 'Story Teller');
-    const age = number('Age', 120);
-
-    const content = `I am ${name} and I'm ${age} years old.`;
-    return (
-      <div>
-        {content}
-      </div>
-    );
-  });
-
-storiesOf('Addon Knobs', module).add(
-  'with dynamic variables new method',
-  addonKnobs()(() => {
-    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>
-    );
-  })
-);
-
 storiesOf('component.base.Link', module)
   .addDecorator(withKnobs)
   .add('first', () =>