Deprecate setOptions, use withOptions as a decorator to solve res…

…etting issue
storybookjs · Sep 8, 2018 · d9ab31c · d9ab31c
1 parent 9e9dfe2
commit d9ab31c
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 96 deletions.
diff --git a/addons/options/README.md b/addons/options/README.md
@@ -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.
diff --git a/addons/options/package.json b/addons/options/package.json
@@ -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": "*"

diff --git a/addons/options/src/preview/index.js b/addons/options/src/preview/index.js
@@ -1,3 +1,4 @@
+import deprecate from 'util-deprecate';
 import addons, { makeDecorator } from '@storybook/addons';
 import { EVENT_ID } from '../shared';
 
@@ -43,16 +44,17 @@ 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 => {
   globalOptions = options;
   emitOptions(options);
-}
+}, '`setOptions(options)` is deprecated. Please use the `withOptions(options)` decorator globally.');
 
 export const withOptions = makeDecorator({
   name: 'withOptions',
   parameterName: 'options',
   skipIfNoParametersOrOptions: false,
   wrapper: (getStory, context, { options: inputOptions, parameters }) => {
+    console.log(inputOptions, parameters);
     emitOptions({
       ...globalOptions,
       ...inputOptions,

diff --git a/examples/official-storybook/config.js b/examples/official-storybook/config.js
@@ -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 }) =>

diff --git a/examples/official-storybook/stories/addon-options.stories.js b/examples/official-storybook/stories/addon-options.stories.js
@@ -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>,