Workaround for using non-declarative configuration in the DSM Storybook integration
  • 03 Feb 2023
  • 2 Minutes to read
  • Dark
    Light

Workaround for using non-declarative configuration in the DSM Storybook integration

  • Dark
    Light

Article Summary

In version 5.3, Storybook introduced declarative configuration, which is fully supported by the DSM Storybook integration.

You can also use the integration with the non-declarative configuration from Storybook 5.2 and earlier. Note that you won't lose any features by opting for the non-declarative configuration.

The declarative configuration in Storybook 5.3 introduces three new files:

  • main.js
  • manager.js
  • preview.js

Rolling back to the non-declarative configuration requires changes to these files. This article details how to make those changes.

Replacing main.js

In the declarative configuration, main.js is responsible for 3 tasks:

  • Configuring the path for your stories
  • Initializing presets
  • Registering addons

Your main.js may look something like this:

module.exports = {
  stories: ['../**/*.stories.js'],
  addons: [
    '@storybook/preset-create-react-app',
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true
      }
    },
    '@storybook/addon-knobs/register',
  ]
};

In the non-declarative configuration, these responsibilities are divided among multiple files.

First, create an addons.js file in your storybook folder (.storybook by default). This file will be used to register any addons. Take the addons from your main.js addons array and add them to the addons.js file as imports. Using the previous main.js example, here’s how that might look:

// main.js
module.exports = {
  stories: ['../**/*.stories.js'],
  addons: [
    '@storybook/preset-create-react-app'
    // note that we removed the addons from the addons array
  ]
};



// addons.js
// add the addons from main.js here as imports
import '@storybook/addon-docs/register',
import '@storybook/addon-knobs/register'

Second, create apresets.js file in your storybook folder (.storybook by default). This file is used to initialize any presets you have. Take the presets from your main.js addons array and move them to the presets file as an array of exports. Here’s how that might look:

// main.js
module.exports = {
  stories: ['../**/*.stories.js'],
  addons: [
    // note that we removed the presets from the addons array
  ]
};


// presets.js
// add the presets from main.js here in an exported array
module.exports = ['@storybook/preset-create-react-app']
};

Lastly, if your story paths are configured in main.js, we want to move them to config.js. Create a config.js file in your storybook folder (.storybook by default). Take the path in the stories array and move them to the config file. We will be using a framework-specific API from Storybook to load the story paths, so use the import that's appropriate for you. Note that the method of configuring the path is slightly different. DSM passes a string with the location of the stories as well as a regex for the stories. Here’s how that might look:

// main.js
module.exports = {
  stories: [// note that we removed the story path glob],
};


// config.js
import { configure } from ‘@storybook/react’

  // add the path and regex of your stories to the configure call
configure(require.context('../src/components', true, /\.stories\.js$/), module)

You can now delete the main.js file.

Resources

To view related resources on Github, check out the following links:

Replacing manager.js and preview.js

In the declarative configuration, there are two more configuration files—manager.js and preview.js. These are used to configure the manager and preview windows with functionality such as theming, parameters, and decorators.

In Storybook 5.2, the functionality for both manager.js and preview.js is in the config.js file. If you are using any Storybook APIs in manager.js or preview.js, move them to config.js.

// preview.js
import { addDecorator } from '@storybook/svelte';
import { withA11y } from '@storybook/addon-a11y';

addDecorator(withA11y);



// config.js
// after
import { addDecorator } from '@storybook/svelte';
import { withA11y } from '@storybook/addon-a11y';
addDecorator(withA11y);

After migrating the code to config.js, you can delete manager.js and preview.js

Resources

To view related resources on Github, check out the following links:

Documentation

For additional information, check out the non-declarative configuration documentation source on GitHub.


Was this article helpful?