Storybook: [Question] How to load decorators from different addons in preset

Created on 9 Dec 2020  路  2Comments  路  Source: storybookjs/storybook

Hello!

I'm creating a preset which is supposed to load a couple of different addons together - something similar to addon essentials. I'm not able to find any example of how to easily load decorators from other addons to be enabled by default. I've come up with something like this:

// my-preset/index.js
function managerEntries(entry = []) {
    return [
        ...entry,
        require.resolve('my-addon-theming/register'),
    ];
}

const config = (entry = [], options) => {
    return [
        ...entry,
        require.resolve('my-addon-theming/addDecorator'),
    ];
};

module.exports = {
managerEntries,
config
}

This my-preset will load more different addons and also allow to configure them. What is the recommended approach for it?

Is it possible to pass configuration to these add-ons through the my-preset addon?

Storybook: v6.1

addons documentation question / support

Most helpful comment

If you control the other addons, e.g. my-addons-theming, my suggestion would be to copy what we did in addon-essentials.

export const addons = (options) => [
  { name: 'my-addon-theming', options: { ... } },
  'something-else',
];

This would example that my-addon-theming have its own preset which calls addDecorator, which is the recommended way to write addons now.

If you don't control the other addons, what you're doing should also work and will give you full control to do whatever you want.

cc @jonniebigodes @winkerVSbecks

All 2 comments

If you control the other addons, e.g. my-addons-theming, my suggestion would be to copy what we did in addon-essentials.

export const addons = (options) => [
  { name: 'my-addon-theming', options: { ... } },
  'something-else',
];

This would example that my-addon-theming have its own preset which calls addDecorator, which is the recommended way to write addons now.

If you don't control the other addons, what you're doing should also work and will give you full control to do whatever you want.

cc @jonniebigodes @winkerVSbecks

Thank you! Works perfectly ;)

Feel free to change this issue topic to some documentation update or close it.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

MrOrz picture MrOrz  路  3Comments

rpersaud picture rpersaud  路  3Comments

shilman picture shilman  路  3Comments

dnlsandiego picture dnlsandiego  路  3Comments

tlrobinson picture tlrobinson  路  3Comments