After adding a DSM configuration file to your Storybook component library project, you'll need to add DSM as a Storybook addon. This article walks through how to do so using Storybook's declarative configuration.
Registering the DSM Storybook integration (required)
The DSM Storybook integration now aligns with the standard method of registering an addon in Storybook. Just add @invisionapp/dsm-storybook to your addons array in main.js.
Adding DSM-specific options (required)
In version 5.3, Storybook introduced a new API for setting options parameters. The DSM Storybook integration requires certain options to be set in order to render optimally on the web—most importantly, the showNav option. To set these options, import getDsmOptions from @invisionapp/dsm-storybook in manager.js and apply it using the new addons.setConfig Storybook API.
To return the correct options for dsm-storybook
preview or dsm-storybook publish, getDsmOptions requires the STORYBOOK_DSM environment variable. Pass the environment variable to the getDsmOptions function call.
Adding the decorator (required)
The DSM Storybook integration now exports a decorator that you need to add to your stories. Import withDsm from @invisionapp/dsm-storybook in preview.js. Depending on which version of Storybook you’re using, you'll use the withDsm decorator differently in preview.js
If you’re using Storybook 6, add withDsm to your decorators array.
If you’re using Storybook 5.3, pass withDsm as a parameter to addDecorator.
Adding the DSM-specific theme (optional)
DSM Storybook integration also now ships with an optional theme. In previous versions, this theme was automatically applied. If you liked the theme, import getDsmTheme from @invisionapp/dsm-storybook and apply it to the addons configuration in your manager.js file.
The following APIs are not used with the declarative configuration. However, they will continue to work and be supported if you opt to use the non-declarative configuration.