Presets: Ability to combine presets into another preset

[igor-dv]

Issue: We want to be able to combine presets into another custom preset file, so it will be easier to customise them.

What I did

Currently we support preset file to be something like this:

export async function webpack() { }
export async function babel() { }

or

function webpack() {}
function babel() {}

module.exports = {
  webpack,
  babel,
}

In both options an object is exported from the module.

Now, we can export an array, which means we are exporting a set of presets out of preset (yo dawg)

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/storybook/monorepo/85f3yi05n
🌍 Preview: https://monorepo-git-presets-combine-presets-in-one.storybook.now.sh

[shilman]

Pretty nice -- great work! 👍

Let's merge this later for 5.2

[joeycozza]

@igor-dv
I have a question about a potential scenario with a preset of presets.

Let's say I'm making a preset-foo that uses preset-typescript and preset-knobs under the hood.

Now app Bar is using my preset-foo in their .storybook/presets.js file.

Question 1) Does the Bar app still need to do the following? If not, what is the mechanism to use addDecorator within a preset?

//Inside the Bar app's .storybook/config.js file

import { addParameters, addDecorator } from '@storybook/react'
import { withKnobs } from '@storybook/addon-knobs'
addDecorator(withKnobs)

Question 2) The Bar app will want to utilize knobs like boolean, text, etc. Does preset-foo need to do an export * from '@storybook/addon-knobs in order to expose them to the Bar app? Or is the Bar app expected to have @storybook/addon-knobs as a direct dependency and access/use it directly in their .stories files?

Thanks for your help and clarification!

[igor-dv]

@joeycozza , sorry for the delay.

1. addDecorator could be used in preset if preset extends the config and addons entry point.
   something like this:

// this will customise the preview entry point
export function config(entry = []) {
  return [
    require.resolve('./path/to/knobs-config.js'),
    // "entry" here will contain a config.js from the .storybook dir, 
    // so you need to configure before or somehow skip it. 
    // maybe we need to have a preset for that =)
    ...entry, 
  ] 
}

// this is an alternative for "addons.js"
export function addons(entry = []) {
  return [
    ...entry, 
    require.resolve('@storybook/addon-knobs/register')
  ];
}

where the knobs-config.js will be something like this:

import { addDecorator } from '@storybook/react'
import { withKnobs } from '@storybook/addon-knobs'
addDecorator(withKnobs)

2. Here could be 2 possibilities:
   a. The addon (for example addon-knobs) will have a preset for itself, so you will need to install it anyway to use preset and to use what it exports.
   b. We have a different preset that needs to have a peer dep to the addon-knobs in order to not mess with the dependencies hell, so you will need to install it anyway.

Does it answer your question ?

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[shilman]

👍

[ndelangen]

I'm working on this to be aligned with #8597

[ndelangen]

presets can now export presets like this:

// preset.js
module.exports = ['preset1', 'preset2'];

but also like so:

// preset.js
module.exports = {
  presets: ['preset1', 'preset2'],
  otherValue: true,
};