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 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.

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    // ... other addons
    '@invisionapp/dsm-storybook'
  ]
};

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.

import { addons } from '@storybook/addons';
import { getDsmOptions } from '@invisionapp/dsm-storybook';
addons.setConfig({
  ...getDsmOptions(process.env.STORYBOOK_DSM)
});

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.

To apply your own options—or overwrite the DSM-specific ones—add the option after the getDsmOptions assignment as you normally would in a JavaScript object.

import { addons } from '@storybook/addons';
import { getDsmOptions } from '@invisionapp/dsm-storybook';
addons.setConfig({
  ...getDsmOptions(process.env.STORYBOOK_DSM),
  showPanel: true // your own options
});

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.

import { withDsm } from '@invisionapp/dsm-storybook';
export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' }
};
export const decorators = [withDsm];

If you’re using Storybook 5.3, pass withDsm as a parameter to addDecorator.

import { addDecorator } from '@storybook/react';
import { withDsm } from '@invisionapp/dsm-storybook';
addDecorator(withDsm);

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.

import { addons } from '@storybook/addons';
import { getDsmOptions, getDsmTheme } from '@invisionapp/dsm-storybook';
addons.setConfig({
  ...getDsmOptions(process.env.STORYBOOK_DSM),
  theme: {
    ...getDsmTheme(process.env.STORYBOOK_DSM)
  }
});

To overwrite the DSM theme with your own values, apply the theming property after the DSM theme as you normally would in a JavaScript object.

import { addons } from '@storybook/addons';
import { getDsmOptions, getDsmTheme } from '@invisionapp/dsm-storybook';
addons.setConfig({
  ...getDsmOptions(process.env.STORYBOOK_DSM),
  theme: {
    ...getDsmTheme(process.env.STORYBOOK_DSM),
    fontBase: "'Open Sans', sans-serif",
    colorPrimary: '#123456' // you can overwrite the DSM theme
  }
});

Unused APIs

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.

• initDsm
• registerDsm