Non-declarative configuration in the DSM Storybook integration

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.

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.

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)
});