Question: How to register additional Storybook addon?

[Brandon Orther]

Problem

I'd like to use @storybook/addon-docs in Storybook but I can't figure out how to register the addon using the local monorepo Storybook config files listed in the docs here.

I've tried adding a .storybook/addons.js file to the root of my monorepo but it's not clear to me what should go in there. Everything I have tried doesn't work. I've reviewed the addons-preset.js file in the @design-systems/storybook package but it's still not clear to me how it works.

I've setup an example repo with addon-docs setup (see orther/integration-ds#1). You can see the file changes here: https://github.com/orther/integration-ds/pull/1/files

Question

How can I configure Storybook to register an additional addon?

[Brandon Orther]

Hack Solution

I've been able to get addon-docs registered by manually editing the local @design-systems/storybook package in node_modules to include require.resolve('@storybook/addon-docs/register').

The edited ./node_modules/@design-systems/storybook/.storybook/addons-preset.js file:

// ./node_modules/@design-systems/storybook/.storybook/addons-preset.js

const { getMonorepoRoot } = require('@design-systems/cli-utils');
const fs = require('fs');
const path = require('path');

function managerEntries(entry = []) {
  const projectRoot = getMonorepoRoot();
  const hasAddons =
    fs.existsSync(path.join(projectRoot, '.storybook/addons.js')) ||
    fs.existsSync(path.join(projectRoot, '.storybook/addons.ts'));
  let newAddons = [...entry];

  if (hasAddons) {
    newAddons = [...newAddons, path.join(projectRoot, '.storybook/addons')];
  } else {
    newAddons = [
      ...newAddons, // Panels
      require.resolve('@storybook/addon-notes/register-panel'),
      require.resolve('storybook-addon-react-docgen/register'),
      require.resolve('storybook-addon-jsx/register'),
      require.resolve('@storybook/addon-knobs/register'),
      require.resolve('@storybook/addon-actions/register'),
      require.resolve('@storybook/addon-a11y/register'),

      // Tools
      require.resolve('@storybook/addon-backgrounds/register'),
      require.resolve('storybook-dark-mode/register'),
      require.resolve('storybook-addon-sketch/register-options'),
      require.resolve('@storybook/addon-viewport/register'),
      require.resolve('@storybook/addon-docs/register') // <<---- ADDED THIS LINE
    ];
  }

  return newAddons;
}

module.exports = { managerEntries };

[Andrew Lisowski]

All you have to do is add .storybook/presets.js and set it to this

module.exports = ['@storybook/addon-docs/preset'];

[Andrew Lisowski]

When storybook 6.0 ships we will probably rethink what the recommended storybook configuration path is

[Brandon Orther]

That config worked. Thanks!