Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


Non-declarative configuration in the DSM Storybook integration

Follow

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.

If you're using Storybook's declarative configuration, refer to this article 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?

Still have a question?

Contact Us