Storybook: Feature Request: Should we unify and configure storybook in one place?

[mshaaban088]

Issue details

I see every addon comes/might come with its own configuration/customization approaches, and I think we can benefit from addon-options to unify all of the configurations as described below:

1. setOptions is called with all the needed configurations

setOptions({
  name: 'My Storybook',
  goFullScreen: false,
  addons: {
    'storybook-addon-viewport': {  // or 'viewports' for simplicity 
      defaultViewport: 'Kindle Fire 2',
      viewports: {
        name: 'Kindle Fire 2',
        styles: {
          width: '600px',
          height: '963px'
        }
      }
    }
  }
});

1. addon-options is responsible to emit a configure/options-event with the passed configurations
2. storybook-addon-viewport for instances takes its configuration and adjusts accordingly.

I think we should also use the addon unique-ID to be used as a configuration key

This is just my proposal and of course open for feedbacks, what do you think?

Edit:

I think if we go for the addon unique-ID, it will be easy to dispatch separate event for each addon with the subset of configuration needed for that addon, like

// in addon-options
channel.emit('storybook-addon-viewport/configure', {
  defaultViewport: 'Kindle Fire 2',
  viewports: {
    name: 'Kindle Fire 2',
    styles: {
      width: '600px',
      height: '963px'
    }
  }
});

[igor-dv]

We can think of something like that for the v4 release since it will be breaking. I would go further with that by making config.js even more formatted - webpack style.

for example

module.exports = {
   stories: () => {}, 
   addons: () => {},  
   babelConfig,
   webpackConfig,
   tsConfig,
}

This way we can control a lifecycle of storybook config.

[mshaaban088]

I like the way you formatted config.js

[mshaaban088]

As we are talking about v4, do you think options should only be supported as an addon, because I think it should be included by default (e.g. part of config.js)

[mrlubos]

+1 @igor-dv for the idea to reuse standard structure people understand from Webpack. So often new tools require people to learn a completely new set of commands, muscle memory would be thankful for this one!

[igor-dv]

I don't want to take a full credit on that since I think @ndelangen was the first to suggest it somewhere =)

do you think options should only be supported as an addon

IMO it shouldn't be an addon =)

[mrlubos]

@igor-dv Honestly, just using the same config for most popular tools would make front-end development so much easier to pick up or maintain project in my opinion 👏

[mshaaban088]

Exactly, that's what I meant. I phrased it wrong by putting only, but you got the point ;-)

[ndelangen]

In the long long term, a overhaul of config/settings is inevitable.

I like the idea @mshaaban088 actually brings up here to actually facilitate "settings for addons". Certainly something we want to address in the overhaul.

[igor-dv]

It's in the roadmap now.
https://storybook.canny.io/roadmap/p/universal-config-file

[pksunkara]

Related to #4169.

[ndelangen]

Let's consider this a duplicate of #4169.