Non-declarative configuration in the DSM Storybook integration
- 06 Feb 2023
- 1 Minute to read
- DarkLight
Non-declarative configuration in the DSM Storybook integration
- Updated on 06 Feb 2023
- 1 Minute to read
- DarkLight
Article Summary
Share feedback
Thanks for sharing your feedback!
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 non-declarative configuration.
Storybook introduced declarative configuration in version 5.3. If you're using Storybook v5.3 or newer, refer to our article on declarative configuration instead.
Changes to addons.js
Navigate to the .storybook
folder of your Storybook component library project and add the following code to .storybook/addons.js
:
import { registerDsm } from '@invisionapp/dsm-storybook/register';
registerDsm(process.env.STORYBOOK_DSM);
Changes to config.js
Depending on your version of Storybook, change .storybook/config.js
to include one of the following DSM-specific code snippets.
In the first line of each of the following code snippets, replace
@storybook/vue
with your chosen framework. For example, if you're using HTML, type @storybook/html
.If you're using Storybook v4, add this code snippet:
import { configure, addDecorator } from '@storybook/vue';
import { initDsm } from '@invisionapp/dsm-storybook';
// automatically import all files ending in *.stories.js
const req = require.context('../src', true, /\.stories\.js$/);
function loadStories() {
req.keys().forEach((filename) => req(filename));
}
//Init Dsm
initDsm({
addDecorator,
callback: () => configure(loadStories, module)
});
If you're using Storybook v5, add this code snippet:
import { configure, addDecorator, addParameters } from '@storybook/vue';
import { initDsm } from '@invisionapp/dsm-storybook';
// automatically import all files ending in *.stories.js
const req = require.context('../src', true, /\.stories\.js$/);
function loadStories() {
req.keys().forEach((filename) => req(filename));
}
//Init Dsm
initDsm({
addDecorator,
addParameters,
callback: () => configure(loadStories, module)
});
Was this article helpful?