Revert knobs API to previous API.

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.

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,8 @@ 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
+export function wrapperKnobs(options) {
   if (options) channel.emit('addon:knobs:setOptions', options);
 
   switch (window.STORYBOOK_ENV) {
@@ -105,3 +75,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);
+}

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

@@ -8,7 +8,6 @@ import { linkTo } from '@storybook/addon-links';
 import WithEvents from '@storybook/addon-events';
 import {
   withKnobs,
-  addonKnobs,
   text,
   number,
   boolean,
@@ -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', () =>

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

@@ -7,7 +7,7 @@ import { linkTo } from '@storybook/addon-links';
 import { addonNotes } from '@storybook/addon-notes';
 
 import {
-  addonKnobs,
+  withKnobs,
   text,
   number,
   boolean,
@@ -51,7 +51,7 @@ storiesOf('Method for rendering Vue', module)
     template: `
       <div>
         <h1>A template</h1>
-        <p>rendered in vue in storybook</p> 
+        <p>rendered in vue in storybook</p>
       </div>`,
   }))
   .add('template + component', () => ({
@@ -158,43 +158,44 @@ storiesOf('Addon Notes', module)
   );
 
 storiesOf('Addon Knobs', module)
-  .add(
-    'Simple',
-    addonKnobs()(() => {
-      const name = text('Name', 'John Doe');
-      const age = number('Age', 44);
-      const content = `I am ${name} and I'm ${age} years old.`;
-
-      return {
-        template: `<div>${content}</div>`,
-      };
-    })
-  )
-  .add(
-    'All knobs',
-    addonKnobs()(() => {
-      const name = text('Name', 'Jane');
-      const stock = number('Stock', 20, { range: true, min: 0, max: 30, step: 5 });
-      const fruits = {
-        apples: 'Apple',
-        bananas: 'Banana',
-        cherries: 'Cherry',
-      };
-      const fruit = select('Fruit', fruits, 'apple');
-      const price = number('Price', 2.25);
-
-      const colour = color('Border', 'deeppink');
-      const today = date('Today', new Date('Jan 20 2017'));
-      const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
-      const nice = boolean('Nice', true);
-
-      const stockMessage = stock
-        ? `I have a stock of ${stock} ${fruit}, costing &dollar;${price} each.`
-        : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
-      const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
-
-      return {
-        template: `
+  .addDecorator(withKnobs)
+  .add('Simple', () => {
+    const name = text('Name', 'John Doe');
+    const age = number('Age', 44);
+    const content = `I am ${name} and I'm ${age} years old.`;
+
+    return {
+      template: `<div>${content}</div>`,
+    };
+  })
+  .add('All knobs', () => {
+    const name = text('Name', 'Jane');
+    const stock = number('Stock', 20, {
+      range: true,
+      min: 0,
+      max: 30,
+      step: 5,
+    });
+    const fruits = {
+      apples: 'Apple',
+      bananas: 'Banana',
+      cherries: 'Cherry',
+    };
+    const fruit = select('Fruit', fruits, 'apple');
+    const price = number('Price', 2.25);
+
+    const colour = color('Border', 'deeppink');
+    const today = date('Today', new Date('Jan 20 2017'));
+    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
+    const nice = boolean('Nice', true);
+
+    const stockMessage = stock
+      ? `I have a stock of ${stock} ${fruit}, costing &dollar;${price} each.`
+      : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
+    const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
+
+    return {
+      template: `
           <div style="border:2px dotted ${colour}; padding: 8px 22px; border-radius: 8px">
             <h1>My name is ${name},</h1>
             <h3>today is ${new Date(today).toLocaleDateString()}</h3>
@@ -206,6 +207,5 @@ storiesOf('Addon Knobs', module)
             <p>${salutation}</p>
           </div>
         `,
-      };
-    })
-  );
+    };
+  });