diff --git a/addons/knobs/README.md b/addons/knobs/README.md
index f399021c3658..4f2a69ccceef 100644
--- 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', () => (
))
-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 (
{content}
);
-}));
+});
```
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
index a0a1448474a0..d508841a8ae4 100644
--- 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
index fb8d896c28f0..dffefb10732a 100644
--- 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'})(() => ));
+ .add('with some emoji', withNotes({ notes: 'A very simple component'})(() => ));
```
diff --git a/addons/notes/src/index.js b/addons/notes/src/index.js
index bb6e72ff288b..99808f7ed40b 100644
--- 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
index 8fcbcb0eee41..c49ce33222a0 100644
--- 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`] = `
-
- I am Story Teller and I'm 120 years old.
-
-`;
-
-exports[`Storyshots Addon Knobs with dynamic variables new method 1`] = `
-
- I am Arunoda Susiripala and I'm 89 years old.
-
-`;
-
exports[`Storyshots App full app 1`] = `
`;
-exports[`Storyshots addonNotes with a button and some emoji 1`] = `
-
-`;
-
-exports[`Storyshots addonNotes with old API 1`] = `
-
-`;
-
-exports[`Storyshots addonNotes with some emoji 1`] = `
-
- 🤔😳😯😮
-
-`;
-
-exports[`Storyshots addonNotes with some text 1`] = `
-
- Hello guys
-
-`;
-
exports[`Storyshots component.Button first 1`] = `