GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-06 07:21:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4899 from storybooks/fix/replace-setOptions-to-withOptions

Browse Source 
fix(): deprecations with replacing setOptions with withOptions
This commit is contained in:
Igor 2018-12-01 16:47:05 +02:00 committed by GitHub
commit 91ca873ddb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 142 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
examples/angular-cli/.storybook/config.ts
View File

@ -1,12 +1,14 @@
import { configure } from '@storybook/angular'; import { configure, addDecorator } from '@storybook/angular';
import { setOptions } from '@storybook/addon-options'; import { withOptions } from '@storybook/addon-options';
import addCssWarning from '../src/cssWarning'; import addCssWarning from '../src/cssWarning';
addCssWarning(); addCssWarning();
setOptions({ addDecorator(
hierarchyRootSeparator: /\|/, withOptions({
}); hierarchyRootSeparator: /\|/,
})
);
function loadStories() { function loadStories() {
// put welcome screen at the top of the list so it's the first one displayed // put welcome screen at the top of the list so it's the first one displayed

12
examples/marko-cli/.storybook/config.js
View File

@ -1,9 +1,11 @@
import { configure } from '@storybook/marko'; import { configure, addDecorator } from '@storybook/marko';
import { setOptions } from '@storybook/addon-options'; import { withOptions } from '@storybook/addon-options';
setOptions({ addDecorator(
hierarchyRootSeparator: /\|/, withOptions({
}); hierarchyRootSeparator: /\|/,
})
);
function loadStories() { function loadStories() {
// put welcome screen at the top of the list so it's the first one displayed // put welcome screen at the top of the list so it's the first one displayed

12
examples/mithril-kitchen-sink/.storybook/config.js
View File

@ -1,9 +1,11 @@
import { configure } from '@storybook/mithril'; import { configure, addDecorator } from '@storybook/mithril';
import { setOptions } from '@storybook/addon-options'; import { withOptions } from '@storybook/addon-options';
setOptions({ addDecorator(
hierarchyRootSeparator: /\|/, withOptions({
}); hierarchyRootSeparator: /\|/,
})
);
function loadStories() { function loadStories() {
const req = require.context('../src/stories', true, /\.stories\.js$/); const req = require.context('../src/stories', true, /\.stories\.js$/);

6
examples/official-storybook/stories/addon-a11y.stories.js
View File

@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import { storiesOf } from '@storybook/react'; import { storiesOf } from '@storybook/react';
import { setOptions } from '@storybook/addon-options';
import { checkA11y } from '@storybook/addon-a11y'; import { checkA11y } from '@storybook/addon-a11y';
import BaseButton from '../components/BaseButton'; import BaseButton from '../components/BaseButton';
@ -14,10 +13,7 @@ const text = 'Testing the a11y addon';
storiesOf('Addons|a11y', module) storiesOf('Addons|a11y', module)
.addDecorator(checkA11y) .addDecorator(checkA11y)
.addDecorator(fn => { .addParameters({ options: { selectedAddonPanel: '@storybook/addon-a11y/panel' } })
setOptions({ selectedAddonPanel: '@storybook/addon-a11y/panel' });
return fn();
})
.add('Default', () => <BaseButton label="" />) .add('Default', () => <BaseButton label="" />)
.add('Label', () => <BaseButton label={text} />) .add('Label', () => <BaseButton label={text} />)
.add('Disabled', () => <BaseButton disabled label={text} />) .add('Disabled', () => <BaseButton disabled label={text} />)

126
examples/official-storybook/stories/addon-actions.stories.js
View File

@ -7,7 +7,6 @@ import {
decorate, decorate,
decorateAction, decorateAction,
} from '@storybook/addon-actions'; } from '@storybook/addon-actions';
import { setOptions } from '@storybook/addon-options';
import { Button } from '@storybook/react/demo'; import { Button } from '@storybook/react/demo';
import { window, File } from 'global'; import { window, File } from 'global';
@ -60,70 +59,73 @@ storiesOf('Addons|Actions', module)
return <Button onClick={fn}>Action.name: {fn.name}</Button>; return <Button onClick={fn}>Action.name: {fn.name}</Button>;
}) })
.add('Reserved keyword as name', () => <Button onClick={action('delete')}>Delete</Button>) .add('Reserved keyword as name', () => <Button onClick={action('delete')}>Delete</Button>)
.add('All types', () => { .add(
function A() {} 'All types',
function B() {} () => {
function A() {}
function B() {}
const bound = B.bind({}); const bound = B.bind({});
let file; let file;
try { try {
file = new File([''], 'filename.txt', { type: 'text/plain', lastModified: new Date() }); file = new File([''], 'filename.txt', { type: 'text/plain', lastModified: new Date() });
} catch (error) { } catch (error) {
file = error; file = error;
} }
const reg = /fooBar/g; const reg = /fooBar/g;
return ( return (
<div> <div>
{setOptions({ selectedAddonPanel: 'storybook/actions/actions-panel' })} <Button onClick={() => action('Array')(['foo', 'bar', { foo: 'bar' }])}>Array</Button>
<Button onClick={() => action('Array')(['foo', 'bar', { foo: 'bar' }])}>Array</Button> <Button onClick={() => action('Boolean')(false)}>Boolean</Button>
<Button onClick={() => action('Boolean')(false)}>Boolean</Button> <Button onClick={() => action('Empty Object')({})}>Empty Object</Button>
<Button onClick={() => action('Empty Object')({})}>Empty Object</Button> <Button onClick={() => action('File')(file)}>File</Button>
<Button onClick={() => action('File')(file)}>File</Button> <Button onClick={() => action('Function')(A)}>Function A</Button>
<Button onClick={() => action('Function')(A)}>Function A</Button> <Button onClick={() => action('Function (bound)')(bound)}>Bound Function A</Button>
<Button onClick={() => action('Function (bound)')(bound)}>Bound Function A</Button> <Button onClick={() => action('Infinity')(Infinity)}>Infinity</Button>
<Button onClick={() => action('Infinity')(Infinity)}>Infinity</Button> <Button onClick={() => action('-Infinity')(-Infinity)}>-Infinity</Button>
<Button onClick={() => action('-Infinity')(-Infinity)}>-Infinity</Button> <Button onClick={() => action('NaN')(NaN)}>NaN</Button>
<Button onClick={() => action('NaN')(NaN)}>NaN</Button> <Button onClick={() => action('null')(null)}>null</Button>
<Button onClick={() => action('null')(null)}>null</Button> <Button onClick={() => action('Number')(10000)}>Number</Button>
<Button onClick={() => action('Number')(10000)}>Number</Button> <Button
<Button onClick={() =>
onClick={() => action('Multiple')(
action('Multiple')( 'foo',
'foo', 1000,
1000, true,
true, false,
false, [1, 2, 3],
[1, 2, 3], null,
null, undefined,
undefined, { foo: 'bar' },
{ foo: 'bar' }, window
window )
) }
} >
> Multiple
Multiple </Button>
</Button> <Button onClick={() => action('Plain Object')({ foo: { bar: { baz: { bar: 'foo' } } } })}>
<Button onClick={() => action('Plain Object')({ foo: { bar: { baz: { bar: 'foo' } } } })}> Plain Object
Plain Object </Button>
</Button> <Button
<Button onClick={() =>
onClick={() => action('ObjectDepth2', { depth: 2 })({ root: { one: { two: { three: 'foo' } } } })
action('ObjectDepth2', { depth: 2 })({ root: { one: { two: { three: 'foo' } } } }) }
} >
> Object (depth: 2)
Object (depth: 2) </Button>
</Button> <Button onClick={() => action('RegExp')(reg)}>RegExp</Button>
<Button onClick={() => action('RegExp')(reg)}>RegExp</Button> <Button onClick={() => action('String')('foo')}>String</Button>
<Button onClick={() => action('String')('foo')}>String</Button> <Button onClick={() => action('Symbol')(Symbol('A_SYMBOL'))}>Symbol</Button>
<Button onClick={() => action('Symbol')(Symbol('A_SYMBOL'))}>Symbol</Button> <Button onClick={action('SyntheticMouseEvent')}>SyntheticEvent</Button>
<Button onClick={action('SyntheticMouseEvent')}>SyntheticEvent</Button> <Button onClick={() => action('undefined')(undefined)}>undefined</Button>
<Button onClick={() => action('undefined')(undefined)}>undefined</Button> <Button onClick={() => action('window')(window)}>Window</Button>
<Button onClick={() => action('window')(window)}>Window</Button> </div>
</div> );
); },
}) { options: { selectedAddonPanel: 'storybook/actions/actions-panel' } }
)
.add('configureActionsDepth', () => { .add('configureActionsDepth', () => {
configureActions({ configureActions({
depth: 2, depth: 2,

12
examples/polymer-cli/.storybook/config.js
View File

@ -1,9 +1,11 @@
import { configure } from '@storybook/polymer'; import { configure, addDecorator } from '@storybook/polymer';
import { setOptions } from '@storybook/addon-options'; import { withOptions } from '@storybook/addon-options';
setOptions({ addDecorator(
hierarchyRootSeparator: /\|/, withOptions({
}); hierarchyRootSeparator: /\|/,
})
);
function loadStories() { function loadStories() {
require('../src/stories/index.stories'); require('../src/stories/index.stories');

12
examples/riot-kitchen-sink/.storybook/config.js
View File

@ -1,9 +1,11 @@
import { configure } from '@storybook/riot'; import { configure, addDecorator } from '@storybook/riot';
import { setOptions } from '@storybook/addon-options'; import { withOptions } from '@storybook/addon-options';
setOptions({ addDecorator(
hierarchyRootSeparator: /\|/, withOptions({
}); hierarchyRootSeparator: /\|/,
})
);
function loadStories() { function loadStories() {
require('../src/stories'); require('../src/stories');

6
examples/svelte-kitchen-sink/.storybook/config.js
View File

@ -1,8 +1,8 @@
import { configure } from '@storybook/svelte'; import { configure, addDecorator } from '@storybook/svelte';
import { setOptions } from '@storybook/addon-options'; import { withOptions } from '@storybook/addon-options';
// Used with @storybook/addon-options/register // Used with @storybook/addon-options/register
setOptions({ hierarchyRootSeparator: /\|/ }); addDecorator(withOptions({ hierarchyRootSeparator: /\|/ }));
function loadStories() { function loadStories() {
require('../src/stories'); require('../src/stories');

12
examples/vue-kitchen-sink/.storybook/config.js
View File

@ -1,5 +1,5 @@
import { configure } from '@storybook/vue'; import { configure, addDecorator } from '@storybook/vue';
import { setOptions } from '@storybook/addon-options'; import { withOptions } from '@storybook/addon-options';
import Vue from 'vue'; import Vue from 'vue';
import Vuex from 'vuex'; import Vuex from 'vuex';
@ -8,9 +8,11 @@ import MyButton from '../src/stories/Button.vue';
Vue.component('my-button', MyButton); Vue.component('my-button', MyButton);
Vue.use(Vuex); Vue.use(Vuex);
setOptions({ addDecorator(
hierarchyRootSeparator: /\|/, withOptions({
}); hierarchyRootSeparator: /\|/,
})
);
function loadStories() { function loadStories() {
require('../src/stories'); require('../src/stories');

18
examples/vue-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot
View File

@ -13,12 +13,20 @@ exports[`Storyshots Addon|Centered rounded 1`] = `
<div <div
style="margin: auto; max-height: 100%;" style="margin: auto; max-height: 100%;"
> >
<button <div
class="button rounded" style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
style="color: rgb(66, 185, 131); border-color: #42b983;"
> >
A Button with rounded edges! <div
</button> style="margin: auto; max-height: 100%;"
>
<button
class="button rounded"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
A Button with rounded edges!
</button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

30
examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot
View File

@ -8,13 +8,17 @@ exports[`Storyshots Custom|Decorator for Vue render 1`] = `
style="border: medium solid blue;" style="border: medium solid blue;"
> >
<div <div
style="border: medium solid red;" style="border: medium solid blue;"
> >
<button <div
class="button" style="border: medium solid red;"
> >
renders component: MyButton! <button
</button> class="button"
>
renders component: MyButton!
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -28,14 +32,18 @@ exports[`Storyshots Custom|Decorator for Vue template 1`] = `
style="border: medium solid blue;" style="border: medium solid blue;"
> >
<div <div
style="border: medium solid red;" style="border: medium solid blue;"
> >
<button <div
class="button" style="border: medium solid red;"
style="color: rgb(66, 185, 131); border-color: #42b983;"
> >
MyButton with template! <button
</button> class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
MyButton with template!
</button>
</div>
</div> </div>
</div> </div>
</div> </div>