dependencies addon in action

Install and configure storybook-deps-addon

1Install the plugin:

npm i -D storybook-addon-deps

2 Add the preset in your `.storybook/main.js`file.

module.exports = {

addons: ['storybook-addon-deps', ...]

...

}

3Configure the DocsPage and configure any parameters .storybook/preview.js (former .storybook/config.js ):

import { DocsPage } from 'storybook-addon-deps/blocks';



addParameters({

docs: { page: DocsPage },

dependencies: { withStoriesOnly: true, hideEmpty: true }

});

withStoriesOnly: if true, will display only dependencies components that have Storybook stories written for them. This removes some of the system clutter in the dependencies (ie the React library dependencies). However this only works when you have built a hierarchical UI library with components that are composed from other components in the library. Default: false.

hideEmpty: if true, will completely hide a dependency/dependents block when the current component has no dependencies data. Default: false.

4 Show dependencies in Storybook Docs. There are three ways to integrate the addon: DocsPage, MDX stories, and an addon tab. Use one or all depending on your workflow.

DocsPage integration

DocsPage (5.2+) automatically generates best practice UI docs from your components. We’ll further customize the default DocsPage to show the “Dependencies” and “Dependents” DocBlocks via `.storybook/preview.js` as outlined above in pt 3.

Specify the updated DocsPage from the deps addon.

import { DocsPage } from 'storybook-addon-deps/blocks'; addParameters({ docs: { page: DocsPage } });

You’ll now see DocBlocks for “Dependencies” and “Dependents”.

MDX integration

MDX (Storybook 5.3+) is a syntax for writing Markdown and stories side-by-side in the same .stories file. In contrast to DocsPage, which provides smart documentation out of the box, MDX gives you full control over your component documentation.

Import the Dependencies and Dependents DocBlocks in your MDX story. Here’s an example using a Button.stories.mdx file.

import { Story, Preview, Props, Description, Meta } from '@storybook/addon-docs/blocks';

import { Button } from '@storybook/design-system/dist/components/Button';

import { DependenciesTable, Dependencies, Dependents } from 'storybook-addon-deps/blocks'; <Meta title="Design System|Button" component={Button} parameters={{ component: Button }} /> # Selected story

<Preview withToolbar={true}>

<Story id="." />

</Preview> # Properties

<Props of={Button} /> # Table dependents + dependencies

<DependenciesTable titleDependencies='Dependencies' titleDependents='Dependents' of={Button} /> # Dependencies doc block

<Dependencies of={Button} /> # Dependents doc block

<Dependents of={Button} />

Your MDX docs will now show that component’s deps.

Addon tab for dependencies tree

In Storybook, you can also add custom addon panels. The storybook-addon-deps plugin offers an exploratory tree in its own tab.

To register the dependencies tree tab in storybook, replace the presetwith preset-explorer in `.storybook/main.js`:

module.exports = {

presets: ['storybook-addon-deps/preset-explorer', ...]

...

}

This will yield a new “Deps” tab that gives you an interactive dependency browser.