Merge pull request #3958 from nm123github/options-param

Make addon-options work with story parameters
storybookjs · Aug 6, 2018 · b4df20c · b4df20c
2 parents 907b316 + b8b6086
commit b4df20c
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 4 deletions.
diff --git a/addons/options/README.md b/addons/options/README.md
@@ -105,4 +105,29 @@ setOptions({
 
 storybook.configure(() => require('./stories'), module);
 ```
+
+### using withOptions options or parameters
+
+The options-addon accepts story paramters to set options (as shown below).
+
+```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)
+  .addDecorator(withOptions)
+  .addDecorator(withKnobs)
+  .addParameters({ options: { addonPanelInRight: true } })
+  .add('Simple', () => {
+    const name = text('Name', 'John Doe');
+    const age = number('Age', 44);
+    return Hello.renderSync({
+      name,
+      age,
+    });
+  });
+```
+
 It is also possible to call `setOptions()` inside individual stories. Note that this will bring impact story render performance significantly.
diff --git a/addons/options/preview.js b/addons/options/preview.js
@@ -1,4 +1,6 @@
 const preview = require('./dist/preview');
 
 exports.setOptions = preview.setOptions;
+exports.withOptions = preview.withOptions;
+
 preview.init();
diff --git a/addons/options/src/preview/index.js b/addons/options/src/preview/index.js
@@ -1,4 +1,4 @@
-import addons from '@storybook/addons';
+import addons, { makeDecorator } from '@storybook/addons';
 import { EVENT_ID } from '../shared';
 
 // init function will be executed once when the storybook loads for the
@@ -41,3 +41,32 @@ export function setOptions(newOptions) {
 
   channel.emit(EVENT_ID, { options });
 }
+
+export const withOptions = makeDecorator({
+  name: 'withOptions',
+  parameterName: 'options',
+  skipIfNoParametersOrOptions: false,
+  allowDeprecatedUsage: true,
+  wrapper: (getStory, context, { newOptions, parameters }) => {
+    const optionsIn = parameters || newOptions || {};
+
+    const channel = addons.getChannel();
+    if (!channel) {
+      throw new Error(
+        'Failed to find addon channel. This may be due to https://github.com/storybooks/storybook/issues/1192.'
+      );
+    }
+
+    // since 'undefined' and 'null' are the valid values we don't want to
+    // override the hierarchySeparator or hierarchyRootSeparator if the prop is missing
+    const options = {
+      ...optionsIn,
+      ...withRegexProp(optionsIn, 'hierarchySeparator'),
+      ...withRegexProp(optionsIn, 'hierarchyRootSeparator'),
+    };
+
+    channel.emit(EVENT_ID, { options });
+
+    return getStory(context);
+  },
+});
diff --git a/examples/marko-cli/src/stories/addon-knobs.stories.js b/examples/marko-cli/src/stories/addon-knobs.stories.js
@@ -1,11 +1,14 @@
 import { storiesOf } from '@storybook/marko';
 import { withKnobs, boolean, text, number } from '@storybook/addon-knobs';
+import { withOptions } from '@storybook/addon-options';
 import Hello from '../components/hello/index.marko';
 import MarkoWidgetHello from '../components/marko-widgets/hello';
 import MarkoWidgetButton from '../components/marko-widgets/button';
 
 storiesOf('Addons|Knobs/Hello', module)
+  .addDecorator(withOptions)
   .addDecorator(withKnobs)
+  .addParameters({ options: { addonPanelInRight: true } })
   .add('Simple', () => {
     const name = text('Name', 'John Doe');
     const age = number('Age', 44);
@@ -16,7 +19,9 @@ storiesOf('Addons|Knobs/Hello', module)
   });
 
 storiesOf('Addons|Knobs/Hello (Marko Widget)', module)
+  .addDecorator(withOptions)
   .addDecorator(withKnobs)
+  .addParameters({ options: { addonPanelInRight: false } })
   .add('Simple', () => {
     const name = text('Name', 'John Doe');
     return MarkoWidgetHello.renderSync({

diff --git a/examples/marko-cli/src/stories/index.stories.js b/examples/marko-cli/src/stories/index.stories.js
@@ -1,5 +1,5 @@
 import { storiesOf } from '@storybook/marko';
-
+import { withOptions } from '@storybook/addon-options';
 import Hello from '../components/hello/index.marko';
 import ClickCount from '../components/click-count/index.marko';
 import StopWatch from '../components/stop-watch/index.marko';
@@ -8,9 +8,17 @@ import Welcome from '../components/welcome/index.marko';
 storiesOf('Welcome', module).add('welcome', () => Welcome.renderSync({}));
 
 storiesOf('Hello', module)
+  .addDecorator(withOptions)
+  .addParameters({ options: { addonPanelInRight: false } })
   .add('Simple', () => Hello.renderSync({ name: 'abc', age: 20 }))
   .add('with ERROR!', () => 'NOT A MARKO RENDER_RESULT');
 
-storiesOf('ClickCount', module).add('Simple', () => ClickCount.renderSync({}));
+storiesOf('ClickCount', module)
+  .addDecorator(withOptions)
+  .addParameters({ options: { addonPanelInRight: true } })
+  .add('Simple', () => ClickCount.renderSync({}), { hierarchyRootSeparator: /\|/ });
 
-storiesOf('StopWatch', module).add('Simple', () => StopWatch.renderSync({}));
+storiesOf('StopWatch', module)
+  .addDecorator(withOptions)
+  .addParameters({ options: { addonPanelInRight: false } })
+  .add('Simple', () => StopWatch.renderSync({}));