Skip to content

Commit

Permalink
Deprecate setOptions, use withOptions as a decorator to solve res…
Browse files Browse the repository at this point in the history
…etting issue
tmeasday committed Sep 8, 2018

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 9e9dfe2 commit d309b91
Showing 5 changed files with 100 additions and 96 deletions.
171 changes: 87 additions & 84 deletions addons/options/README.md
Original file line number Diff line number Diff line change
@@ -20,105 +20,106 @@ Add this line to your `addons.js` file (create this file inside your storybook c
import '@storybook/addon-options/register';
```

Import and use the `setOptions` function in your config.js file.
Import and use the `withOptions` decorator in your config.js file.

```js
import * as storybook from '@storybook/react';
import { setOptions } from '@storybook/addon-options';
import { addDecorator, configure } from '@storybook/react';
import { withOptions } from '@storybook/addon-options';

// Option defaults:
setOptions({
/**
* name to display in the top left corner
* @type {String}
*/
name: 'Storybook',
/**
* URL for name in top left corner to link to
* @type {String}
*/
url: '#',
/**
* show story component as full screen
* @type {Boolean}
*/
goFullScreen: false,
/**
* display panel that shows a list of stories
* @type {Boolean}
*/
showStoriesPanel: true,
/**
* display panel that shows addon configurations
* @type {Boolean}
*/
showAddonPanel: true,
/**
* display floating search box to search through stories
* @type {Boolean}
*/
showSearchBox: false,
/**
* show addon panel as a vertical panel on the right
* @type {Boolean}
*/
addonPanelInRight: false,
/**
* sorts stories
* @type {Boolean}
*/
sortStoriesByKind: false,
/**
* regex for finding the hierarchy separator
* @example:
* null - turn off hierarchy
* /\// - split by `/`
* /\./ - split by `.`
* /\/|\./ - split by `/` or `.`
* @type {Regex}
*/
hierarchySeparator: null,
/**
* regex for finding the hierarchy root separator
* @example:
* null - turn off multiple hierarchy roots
* /\|/ - split by `|`
* @type {Regex}
*/
hierarchyRootSeparator: null,
/**
* sidebar tree animations
* @type {Boolean}
*/
sidebarAnimations: true,
/**
* id to select an addon panel
* @type {String}
*/
selectedAddonPanel: undefined, // The order of addons in the "Addon panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook
/**
* enable/disable shortcuts
* @type {Boolean}
*/
enableShortcuts: false, // true by default
});

storybook.configure(() => require('./stories'), module);
addDecorator(
withOptions({
/**
* name to display in the top left corner
* @type {String}
*/
name: 'Storybook',
/**
* URL for name in top left corner to link to
* @type {String}
*/
url: '#',
/**
* show story component as full screen
* @type {Boolean}
*/
goFullScreen: false,
/**
* display panel that shows a list of stories
* @type {Boolean}
*/
showStoriesPanel: true,
/**
* display panel that shows addon configurations
* @type {Boolean}
*/
showAddonPanel: true,
/**
* display floating search box to search through stories
* @type {Boolean}
*/
showSearchBox: false,
/**
* show addon panel as a vertical panel on the right
* @type {Boolean}
*/
addonPanelInRight: false,
/**
* sorts stories
* @type {Boolean}
*/
sortStoriesByKind: false,
/**
* regex for finding the hierarchy separator
* @example:
* null - turn off hierarchy
* /\// - split by `/`
* /\./ - split by `.`
* /\/|\./ - split by `/` or `.`
* @type {Regex}
*/
hierarchySeparator: null,
/**
* regex for finding the hierarchy root separator
* @example:
* null - turn off multiple hierarchy roots
* /\|/ - split by `|`
* @type {Regex}
*/
hierarchyRootSeparator: null,
/**
* sidebar tree animations
* @type {Boolean}
*/
sidebarAnimations: true,
/**
* id to select an addon panel
* @type {String}
*/
selectedAddonPanel: undefined, // The order of addons in the "Addon panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook
/**
* enable/disable shortcuts
* @type {Boolean}
*/
enableShortcuts: false, // true by default
})
);

configure(() => require('./stories'), module);
```

### using withOptions options or parameters
### Using per-story options

The options-addon accepts story parameters if you use the `withOptions` decorator (as shown below).
The options-addon accepts story parameters on the `options` key:

```js
import { storiesOf } from '@storybook/marko';
import { withKnobs, text, number } from '@storybook/addon-knobs';
import { withOptions } from '@storybook/addon-options';
import Hello from '../components/hello/index.marko';

storiesOf('Addons|Knobs/Hello', module)
// If you want to set the option for all stories in of this kind
.addDecorator(withOptions({ addonPanelInRight: true }))
.addParameters({ options: { addonPanelInRight: true } })
.addDecorator(withKnobs)
.add(
'Simple',
@@ -134,3 +135,5 @@ storiesOf('Addons|Knobs/Hello', module)
{ options: { addonPanelInRight: false } }
);
```

_NOTE_ that you must attach `withOptions` as a decorator (at the top-level) for this to work.
3 changes: 2 additions & 1 deletion addons/options/package.json
Original file line number Diff line number Diff line change
@@ -19,7 +19,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "4.0.0-alpha.21"
"@storybook/addons": "4.0.0-alpha.21",
"util-deprecate": "^1.0.2"
},
"peerDependencies": {
"react": "*"
5 changes: 3 additions & 2 deletions addons/options/src/preview/index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import deprecate from 'util-deprecate';
import addons, { makeDecorator } from '@storybook/addons';
import { EVENT_ID } from '../shared';

@@ -43,10 +44,10 @@ function emitOptions(options) {
// setOptions function will send Storybook UI options when the channel is
// ready. If called before, options will be cached until it can be sent.
let globalOptions = {};
export function setOptions(options) {
export const setOptions = deprecate(options => {

This comment has been minimized.

Copy link
@igor-dv

igor-dv Sep 8, 2018

Member

If it will be merged to v3.4, can we remove the deprecation from v4 ?

globalOptions = options;
emitOptions(options);
}
}, '`setOptions(options)` is deprecated. Please use the `withOptions(options)` decorator globally.');

export const withOptions = makeDecorator({
name: 'withOptions',
14 changes: 8 additions & 6 deletions examples/official-storybook/config.js
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@ import React from 'react';
import ThemeProvider from '@emotion/provider';
import { configure, addDecorator } from '@storybook/react';
import { themes } from '@storybook/components';
import { setOptions } from '@storybook/addon-options';
import { withOptions } from '@storybook/addon-options';
import { configureViewport, INITIAL_VIEWPORTS } from '@storybook/addon-viewport';

import 'react-chromatic/storybook-addon';
@@ -12,11 +12,13 @@ import extraViewports from './extra-viewports.json';
addHeadWarning('Preview head not loaded', 'preview-head-not-loaded');
addHeadWarning('Dotenv file not loaded', 'dotenv-file-not-loaded');

setOptions({
hierarchySeparator: /\/|\./,
hierarchyRootSeparator: /\|/,
theme: themes.dark,
});
addDecorator(
withOptions({
hierarchySeparator: /\/|\./,
hierarchyRootSeparator: /\|/,
theme: themes.dark,
})
);

addDecorator(
(story, { kind }) =>
3 changes: 0 additions & 3 deletions examples/official-storybook/stories/addon-options.stories.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
import React from 'react';
import { storiesOf } from '@storybook/react';

import { withOptions } from '@storybook/addon-options';

storiesOf('Addons|Options', module)
.addDecorator(withOptions)
.add(
'withOptions setting name',
() => <div>This story should have changed the name of the storybook</div>,

0 comments on commit d309b91

Please sign in to comment.