Single Configuration File - A.K.A. storybook.config.js - monoconfig

[igor-dv]

let's discuss the "Single Configuration File" feature

I will update this template with the agreed changes. The inspiration is from here

API

The storybook.config.js will be at a root level, but we also may consider it to be configurable with the cli argumetns (for example for people that will have a few configurations).

structure

interface SbConfg {
  entries?: Array<string> | string
  addons?: Array<string>
  presets?: Array<string> | Array<object>
  webpack?: object | function
  babel?: object | funciton
};

storybook.config.js exposes an object

module.exports = SbConfg;

storybook.config.js exposes a fuction

module.exports = (env, mode) => SbConfg  // anything else ?

entries

Let's not call this field stories, because semantics will maybe changed

globs:

{
  entries: 'src/**/*.story.js'
}

array of globs:

{
  entries: ['src/**/*.stories.js', 'src/**/*.examples.js']
}

path to file:

{
  entries: 'path/to/stories.js' // it may have a `require.context` or something else
}

combination

{
  entries: ['path/to/stories.js',  'src/**/*.stories.js']
}

• I am not sure, but maybe regex is also relevant.
• we should add a sensible default, so it will work without any configuration

addons

An array of addons in the following structure:

{
  addons: ['@storybook/addon-X', '@storybook/addon-Y']
}

We will register the addons by ourselves (no need of addons.js). The question is what to do with the addon's defaults, for example with what we setup today in config.js ? we can use the same pattern as in presets 🤷‍♂️

presets

array of strings

{
  presets: ['@storybook/preset-scss', '@storybook/preset-typescript']
}

array of objects

{
  presets: [
    {
      preset: '@storybook/preset-scss',
      options: { }
    }
  ]
}

combination

{
  presets: [
    {
      preset: '@storybook/preset-scss',
      options: { }
    },
    '@storybook/preset-typescript'
  ]
}

webpack

object

Will be merged to the final SB webpack config

{
  webpack: {
    module: {
      rulese: []
    },
    // other stuff
  }
}

function

Like today, but we may change if something is redundnat

{
  webpack: (config, mode. default) => {} 
}

babel

same as for webpack

object

Will be merged to the final SB babel config

{
  babel: {
    plugins: [],
    presets: []
  }
}

function

{
  babel: (config, mode) => {} 
}

things to cover

• global decorators. How we will set them ?
• there are apps that has a customisation of configuration, for example we support custom tsconfig.json to be set in .storybook dir, only for angular app. How we will configure this ? maybe with presets ? IDK
• RN

deprecations:

• ./storybook dir
• custom webpack.config.js
• custom babelrc
• addons.js
• config.js
• parts of the @storybook/app api, like a configure method, that is used in config.js

[pksunkara]

All the client part of @storybook/[apps] can be deprecated also, right?

[igor-dv]

Which one? I am not sure

[tmeasday]

Re configuring addons, client side:

we can use the same pattern as in presets 🤷‍♂️

Only if the config is static though. If you e.g. want to register a react class or something, this is going to be tricky via a config file evaluated on the server. Maybe this is mostly fine though?

[tmeasday]

Also, what about global parameters? Can we add that to the unknowns list @igor-dv? :)

[igor-dv]

Global parameters?

[tmeasday]

Sure, like

import { addParameters } from '@storybook/react';
addParameters({ ... });

[igor-dv]

I think it's just one of the entries

[tmeasday]

We are not doing this in v5

[ndelangen]

Working on this

[leoyli]

I'm having a customized story loader that will generate stories on the fly..., it will also do something like addon-smart-knobs. Not sure if this can be done in the core or reserve an option entry to run customized scripts?!

[ndelangen]

@leoyli that's something presets should be able to do.

[backbone87]

it should still be possible to use a storybook dir:

• it has just no special meaning
• the configuration can be set via cli option: --config ./path/to/storybook.config.js (filename optional, so --config ./path/to would be the same)
• entries can be referenced in parent dirs: ../src/**/*.stories.ts (relative to config file)

theme configuration, automatically gets passed through theme.create:

module.exports = {
  theme: {
    base: 'dark',
    brandImage: '???', // previously it was possible to use webpack image imports here
  },
  theme: 'dark',
}

favicon configuration (maybe should be an option of theme):

module.exports = {
  favicon: '???', // previously it was possible to use webpack image imports here
}

[leoyli]

Are #6806 overlapped with this old issue?!

[ndelangen]

@leoyli you are 💯% correct sir.

I have a WIP branch, which does things a little differently from what's described in this issue, but is addresses these points.

I'll close this issue in favor of #6806