REFACTOR state management

addons/options/README.md

@@ -22,7 +22,7 @@ import '@storybook/addon-options/register';
 
 ###Set options globally
 
-Import and use the `withOptions` decorator in your `config.js` file.
+Import and use the `addParameters` + `options`-key in your `config.js` file.
 
 ```js
 import { addParameters, configure } from '@storybook/react';
@@ -128,15 +128,13 @@ storiesOf('Addons|Custom options', module)
   );
 ```
 
-_NOTE_ that you must attach `withOptions` as a decorator (at the top-level) for this to work.
-
 ## Typescript
 
-To install type definitions: `npm install -D @types/storybook__addon-options`
+To install type definitions: `yarn add @types/storybook__addon-options --dev`
 
 Make sure you also have the type definitions installed for the following libs:
 
 - node
 - react
 
-You can install them using `npm install -D @types/node @types/react`, assuming you are using Typescript >2.0.
+You can install them using `yarn add @types/node @types/react --dev`, assuming you are using Typescript >2.0.

addons/options/package.json

@@ -15,7 +15,7 @@
     "url": "https://github.com/storybooks/storybook.git"
   },
   "license": "MIT",
-  "main": "preview.js",
+  "main": "dist/index.js",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },

addons/options/register.js

@@ -1,3 +1 @@
-// NOTE: loading addons using this file is deprecated!
-// please use manager.js and preview.js files instead
-require('./manager');
+require('./dist/register');

addons/options/src/shared/index.js → addons/options/src/constants.js

@@ -1,3 +1,6 @@
 // addons, panels and events get unique names using a prefix
 export const ADDON_ID = 'storybooks/options';
-export const EVENT_ID = `${ADDON_ID}/options-event`;
+
+export default {
+  SET: `${ADDON_ID}/options-event`,
+};

addons/options/src/preview/index.js → addons/options/src/index.js

@@ -1,12 +1,7 @@
 import deprecate from 'util-deprecate';
 import addons, { makeDecorator } from '@storybook/addons';
-import { EVENT_ID } from '../shared';
 
-// init function will be executed once when the storybook loads for the
-// first time. This is a good place to add global listeners on channel.
-export function init() {
-  // NOTE nothing to do here
-}
+import EVENTS from './constants';
 
 function emitOptions(options) {
   const channel = addons.getChannel();
@@ -18,7 +13,7 @@ function emitOptions(options) {
 
   // since 'undefined' and 'null' are the valid values we don't want to
   // override the hierarchySeparator or hierarchyRootSeparator if the prop is missing
-  channel.emit(EVENT_ID, {
+  channel.emit(EVENTS.SET, {
     options,
   });
 }
@@ -35,7 +30,7 @@ export const withOptions = makeDecorator({
   name: 'withOptions',
   parameterName: 'options',
   skipIfNoParametersOrOptions: false,
-  wrapper: (getStory, context, { options: inputOptions, parameters }) => {
+  wrapper: deprecate((getStory, context, { options: inputOptions, parameters }) => {
     // do not send hierachy related options over the channel
     const { hierarchySeparator, hierarchyRootSeparator, ...change } = {
       ...globalOptions,
@@ -67,7 +62,7 @@ export const withOptions = makeDecorator({
         ...parameters,
       },
     });
-  },
+  }, 'withOptions is deprecated, use addParameters({ options: {} }) instead'),
 });
 
 if (module && module.hot && module.hot.decline) {

addons/options/src/register.js

@@ -0,0 +1,10 @@
+import addons from '@storybook/addons';
+import EVENTS, { ADDON_ID } from './constants';
+
+addons.register(ADDON_ID, api => {
+  const channel = addons.getChannel();
+
+  channel.on(EVENTS.SET, data => {
+    api.setOptions(data.options);
+  });
+});

docs/src/pages/addons/using-addons/index.md

@@ -60,8 +60,7 @@ Then you'll be able to see those notes when you are viewing the story.
 Sometimes you might want to configure an addon globally, as in the case of collocating stories with components, or just simply to keep your stories file cleaner. To do that, you can add your decorators to a config file, typically in `.storybook/config.js`. Here's an example of how you might do that.
 
 ```js
-import { configure, addDecorator } from '@storybook/react';
-import { withOptions } from '@storybook/addon-options';
+import { configure, addParameters } from '@storybook/react';
 
 addParameters({
   options: {

docs/src/pages/configurations/theming/index.md

@@ -16,8 +16,7 @@ import '@storybook/addon-options/register';
 
 Then, modify `.storybook/config.js` to include your new options:  
 ```js
-import { addDecorator, configure } from '@storybook/react';
-import { withOptions } from '@storybook/addon-options';
+import { addParameters, configure } from '@storybook/react';
 
 addParameters({
   options: {
@@ -37,8 +36,7 @@ We have created 2 themes for you: "normal" (a light theme) and "dark" (a dark th
 You can get these themes like so:
 
 ```js
-import { addDecorator, configure } from '@storybook/react';
-import { withOptions } from '@storybook/addon-options';
+import { addParameters, configure } from '@storybook/react';
 import { themes } from '@storybook/components';
 
 // Option defaults.

examples/angular-cli/.storybook/config.ts

@@ -1,5 +1,4 @@
 import { configure, addParameters } from '@storybook/angular';
-import { withOptions } from '@storybook/addon-options';
 import addCssWarning from '../src/cssWarning';
 
 addCssWarning();

examples/marko-cli/src/stories/addon-knobs.stories.js

@@ -1,12 +1,10 @@
 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)
-  .addDecorator(withOptions)
-  .addDecorator(withKnobs)
   .addParameters({ options: { addonPanelInRight: true } })
+  .addDecorator(withKnobs)
   .add('Simple', () => {
     const name = text('Name', 'John Doe');
     const age = number('Age', 44);

examples/official-storybook/config.js

@@ -49,6 +49,7 @@ addDecorator((story, { kind }) =>
 addParameters({
   a11y: {},
   options: {
+    name: 'Storybook',
     hierarchySeparator: /\/|\./,
     hierarchyRootSeparator: '|',
     // theme: themes.dark,

examples/official-storybook/stories/addon-options.stories.js

@@ -2,17 +2,13 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 
 storiesOf('Addons|Options', module)
+  .add('setting name', () => <div>This story should have changed the name of the storybook</div>, {
+    options: {
+      name: 'Custom Storybook',
+    },
+  })
   .add(
-    'withOptions setting name',
-    () => <div>This story should have changed the name of the storybook</div>,
-    {
-      options: {
-        name: 'Custom Storybook',
-      },
-    }
-  )
-  .add(
-    'withOptions hiding addon panel',
+    'hiding addon panel',
     () => <div>This story should have changed hidden the addons panel</div>,
     {
       options: {

examples/svelte-kitchen-sink/.storybook/config.js

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

lib/ui/src/app.js

@@ -49,7 +49,7 @@ const App = () => (
           },
         ],
         options: {
-          ...state.ui,
+          ...state.layout,
         },
         viewMode: state.viewMode,
         componentId: state.componentId,

lib/ui/src/containers/nav.js

@@ -95,19 +95,20 @@ const createMenu = memoize(1)(
 
 export const mapper = ({ state, api }) => {
   const {
-    uiOptions: { name, url },
+    ui: { name, url },
     notifications,
     viewMode,
     componentId,
-    ui: { isFullscreen, showPanel, showNav, panelPosition },
+    layout: { isFullscreen, showPanel, showNav, panelPosition },
+    storiesHash,
   } = state;
 
   const shortcutKeys = get('shortcutKeys') || serializableKeyboardShortcuts;
   return {
     title: name,
     url,
     notifications,
-    stories: state.storiesHash,
+    stories: storiesHash,
     componentId,
     viewMode,
     menu: createMenu(api, shortcutKeys, isFullscreen, showPanel, showNav, panelPosition),

lib/ui/src/containers/nav.test.js

@@ -7,7 +7,7 @@ describe('manager.ui.containers.stories_panel', () => {
       const selectedKind = 'sk';
       const selectedStory = 'dd';
       const selectedHierarchy = ['sk'];
-      const uiOptions = {
+      const ui = {
         name: 'foo',
         url: 'bar',
       };
@@ -29,7 +29,7 @@ describe('manager.ui.containers.stories_panel', () => {
         stories,
         selectedKind,
         selectedStory,
-        uiOptions,
+        ui,
       };
       const result = mapper(state, props, env);
 
@@ -65,7 +65,7 @@ describe('manager.ui.containers.stories_panel', () => {
       ];
       const selectedKind = 'pk';
       const selectedStory = 'dd';
-      const uiOptions = {
+      const ui = {
         name: 'foo',
         url: 'bar',
       };
@@ -89,7 +89,7 @@ describe('manager.ui.containers.stories_panel', () => {
         stories,
         selectedKind,
         selectedStory,
-        uiOptions,
+        ui,
       };
       const result = mapper(state, props, env);
 
@@ -131,7 +131,7 @@ describe('manager.ui.containers.stories_panel', () => {
       ];
       const selectedKind = 'pk';
       const selectedStory = 'dd';
-      const uiOptions = {
+      const ui = {
         name: 'foo',
         url: 'bar',
         sortStoriesByKind: true,
@@ -156,7 +156,7 @@ describe('manager.ui.containers.stories_panel', () => {
         stories,
         selectedKind,
         selectedStory,
-        uiOptions,
+        ui,
       };
       const result = mapper(state, props, env);
 

lib/ui/src/containers/panel.js

@@ -16,7 +16,7 @@ export default props => (
       const customProps = {
         panels: api.getPanels(),
         selectedPanel: state.selectedPanel,
-        panelPosition: state.ui.panelPosition,
+        panelPosition: state.layout.panelPosition,
         actions: createPanelActions(api),
       };
 

lib/ui/src/containers/preview.js

@@ -15,7 +15,7 @@ export default React.memo(props => (
         channel: api.getChannel(),
         getElements: api.getElements,
         actions: createPreviewActions(api),
-        options: state.ui,
+        options: state.layout,
       };
       return <Preview {...props} {...customProps} />;
     }}

lib/ui/src/containers/themeProvider.js

@@ -3,5 +3,5 @@ import ThemeProvider from '@emotion/provider';
 import { Consumer } from '../core/context';
 
 export default props => (
-  <Consumer>{({ state }) => <ThemeProvider {...props} theme={state.uiOptions.theme} />}</Consumer>
+  <Consumer>{({ state }) => <ThemeProvider {...props} theme={state.ui.theme} />}</Consumer>
 );

lib/ui/src/core/addons.js

@@ -0,0 +1,35 @@
+import { types } from '@storybook/addons';
+
+export function ensurePanel(panels, selectedPanel, currentPanel) {
+  const keys = Object.keys(panels);
+
+  if (keys.indexOf(selectedPanel) >= 0) {
+    return selectedPanel;
+  }
+
+  if (keys.length) {
+    return keys[0];
+  }
+  return currentPanel;
+}
+
+export default ({ provider, store }) => {
+  const api = {
+    getElements: type => provider.getElements(type),
+    getPanels: () => api.getElements(types.PANEL),
+    getSelectedPanel: () => {
+      const { selectedPanel } = store.getState();
+      return ensurePanel(api.getPanels(), selectedPanel, selectedPanel);
+    },
+    setSelectedPanel: panelName => {
+      store.setState({ selectedPanel: panelName });
+    },
+  };
+
+  return {
+    api,
+    state: {
+      selectedPanel: ensurePanel(api.getPanels()),
+    },
+  };
+};

lib/ui/src/core/channel.js

@@ -0,0 +1,26 @@
+import { STORY_CHANGED } from '@storybook/core-events';
+
+export default ({ provider }) => {
+  const api = {
+    getChannel: () => provider.channel,
+    on: (type, cb, peer = true) => {
+      if (peer) {
+        provider.channel.addPeerListener(type, cb);
+      } else {
+        provider.channel.addListener(type, cb);
+      }
+
+      return () => provider.channel.removeListener(type, cb);
+    },
+    off: (type, cb) => {
+      provider.channel.removeListener(type, cb);
+    },
+    emit: (type, event) => {
+      provider.channel.emit(type, event);
+    },
+
+    // TODO: deprecate this
+    onStory: cb => api.on(STORY_CHANGED, cb),
+  };
+  return { api };
+};