Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revert knobs API to previous API. #1527

Merged
merged 3 commits into from
Jul 27, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions addons/knobs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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.
Expand Down
44 changes: 12 additions & 32 deletions addons/knobs/src/index.js
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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) {
Expand All @@ -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);
}
4 changes: 2 additions & 2 deletions addons/notes/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>));
```
2 changes: 1 addition & 1 deletion addons/notes/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down
72 changes: 30 additions & 42 deletions examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
`;
42 changes: 6 additions & 36 deletions examples/cra-kitchen-sink/src/stories/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
)
)
Expand All @@ -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', () =>
Expand Down
Loading