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`] = ` +`; + +exports[`Storyshots withNotes with old API 1`] = ` + +`; + +exports[`Storyshots withNotes with some emoji 1`] = ` +

+ 🤔😳😯😮 +

+`; + +exports[`Storyshots withNotes with some text 1`] = ` +
+ Hello guys +
+`; diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js index 04f633af4666..d37862c93dad 100644 --- 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 =>
click the label in top right for info about "{context.story}"
@@ -208,12 +207,12 @@ storiesOf('WithEvents', module) ) .add('Logger', () => ); -storiesOf('addonNotes', module) - .add('with some text', addonNotes({ notes: 'Hello guys' })(() =>
Hello guys
)) - .add('with some emoji', addonNotes({ notes: 'My notes on emojies' })(() =>

🤔😳😯😮

)) +storiesOf('withNotes', module) + .add('with some text', withNotes({ notes: 'Hello guys' })(() =>
Hello guys
)) + .add('with some emoji', withNotes({ notes: 'My notes on emojies' })(() =>

🤔😳😯😮

)) .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' })(() => ) ) @@ -223,35 +222,6 @@ storiesOf('addonNotes', module) ); -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 ( -
- {content} -
- ); - }); - -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 ( -
- {content} -
- ); - }) -); - storiesOf('component.base.Link', module) .addDecorator(withKnobs) .add('first', () => diff --git a/examples/vue-kitchen-sink/src/stories/index.js b/examples/vue-kitchen-sink/src/stories/index.js index 068d2c38cfcf..3e4814cf4725 100644 --- a/examples/vue-kitchen-sink/src/stories/index.js +++ b/examples/vue-kitchen-sink/src/stories/index.js @@ -4,10 +4,10 @@ import { storiesOf } from '@storybook/vue'; import { action } from '@storybook/addon-actions'; import { linkTo } from '@storybook/addon-links'; -import { addonNotes } from '@storybook/addon-notes'; +import { withNotes } from '@storybook/addon-notes'; import { - addonKnobs, + withKnobs, text, number, boolean, @@ -51,7 +51,7 @@ storiesOf('Method for rendering Vue', module) template: `

A template

-

rendered in vue in storybook

+

rendered in vue in storybook

`, })) .add('template + component', () => ({ @@ -137,14 +137,14 @@ storiesOf('Addon Actions', module) storiesOf('Addon Notes', module) .add( 'Simple note', - addonNotes({ notes: 'My notes on some bold text' })(() => ({ + withNotes({ notes: 'My notes on some bold text' })(() => ({ template: '

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.

', })) ) .add( 'Note with HTML', - addonNotes({ + withNotes({ notes: `

My notes on emojies

@@ -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: `
${content}
`, - }; - }) - ) - .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 $${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: `
${content}
`, + }; + }) + .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 $${price} each.` + : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`; + const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!'; + + return { + template: `

My name is ${name},

today is ${new Date(today).toLocaleDateString()}

@@ -206,6 +207,5 @@ storiesOf('Addon Knobs', module)

${salutation}

`, - }; - }) - ); + }; + });