Toggle global settings (like a multi-component props addon) about storybook

[arunoda]

I like to learn more about this. Is that showing the same stories but with some different profiles (like CSS stuff and so on).

I also want know about what we can do when we select a profile. How the components in the story get to know about this.

[jasford]

Say I was building an app that provided a displayDensity setting for the user with options for "Comfortable", "Cozy" or "Compact (like Gmail). This is a global setting, and most/many components would render differently based on the setting. Rather than add duplicate stories in React Storybook for each displayDensity setting, it would be ideal to make that choice once, and have all stories reflect the updated value.

To give a loose proposal for how this could be implemented, in the example above I would add a configuration object to the configure() method call in config.js, like this:

// .storybook/config.js

import { configure } from '@kadira/storybook';

function loadStories() {
  require('../components/stories/button');
  // require as many stories as you need.
}

configure(loadStories, {
  contexts: [
    {label: 'Comfortable', values: {displayDensity: 'comfortable'}},
    {label: 'Cozy', values: {displayDensity: 'cozy'}},
    {label: 'Compact', values: {displayDensity: 'compact'}},
  ],
}, module);

And then in the stories themselves, you would get passed a context object that you can use however you see fit:

// components/stories/button.js

import React from 'react';
import { storiesOf, action } from '@kadira/storybook';

storiesOf('Button', module)
  .add('with text', ({context}) => (
    <button displayDensity={context.displayDensity} onClick={action('clicked')}>
      My First Button
    </button>
  ))
  .add('with no text', ({context}) => (
    <button displayDensity={context.displayDensity}></button>
  ));

Then in the UI there could be a simple drop down to choose your context, with the first one in the list always being the default.

[isuvorov]

dark layout +1

[arunoda]

@isuvorov Could you submit a new issue about the Dark Layout.
I hope this is something else.

[ndelangen]

#1209 I'm going to take this idea and give it thought when implementing api-v2

[mderazon]

Is this possible to achieve in any way ?
Could be good for something like theme (light dark)