Add new tab in Storybook story

Question

I'm starting to setup Storybook in a React project and I can see it shows 2 tabs by default (Canvas and Docs).

I'd like to have another tab to show the changelog for that specific component. Is there a way to add this third tab and show the content of the CHANGELOG.md file there?

Answer 1

I've faced this issue myself lately (that's how I got to this thread) so I hope I can be helpful to others in the future.

Create a custom storybook tab and register it into storybook addons:

// addon-tab/register.js

import React from 'react';

import { addons, types } from '@storybook/addons';

addons.register('changelog', () => {
  addons.add('changelog', {
    type: types.TAB,
    title: 'Storybook changelog tab',
    route: ({ storyId, refId }) => (refId ? `/changelog/${refId}_${storyId}` : `/changelog/${storyId}`),
    match: ({ viewMode }) => viewMode === 'changelog',
    render: () => (
      <div>
        <MyChangelog />
      </div>
    ),
  });
});

Make sure to update your main.js file:

// .storybook/main.js

module.exports = {
  stories: [],
  addons: [
    // Other Storybook addons
    '../addon-tab/register.js'
  ],
};

** You can also change it's name/position in the preview.js file:

addParameters({
  previewTabs: {
    docs: {
      title: 'Docs',
      hidden: false
    },
    canvas: {
      title: 'Story',
      hidden: false,
    },
      changelog: {
      title: 'CHANGELOG',
      hidden: false,
    },
  },
})

Next you can just create a changelog provider that accepts a story name and returns the proper changelog.md file (require.context could be a good way to do it), and display it using MyChangelog component inside the render function. You can use storybook's Description component from @storybook/addon-docs like so:

<Description markdown={myMarkdown} />