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

[jasford]

It would be fantastic if there was a way to set up multiple "profiles" for global settings. So if you were designing a site that can be themed with a light or dark layout, you could choose "light" from a new nav area (maybe in the bottom left?) and then click through all the stories, then choose "dark" and click back through to see the dark variations of each one.

Think of designing a website template for something like Squarespace or WordPress – you would want to set up 4 or 5 different configuration sets of fonts, colors, etc. – and then flip through all aspects of the website with each configurations set.

I would envision this as a global setting in .storybook/config.js, that then provides a config object to each .add() call in your individual story definition files. I'd be up for helping to build this out if it made sense to add it to the project.

BTW – I love what you guys have done with Storybook. Thanks for building such a great tool for everyone to use!

[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)