Storybook Add On - Dependency Previews

What is this?

This plugin is built for Storybook 10

A plugin for Storybook that shows the full dependency tree in both directions (built with and used by) the components in your application.

This is what you will see in Storybook after Dependency Previews have been installed and configured:

The below image demonstrates what you will see when you open up some of the dependency segments:

See the dependency previews add on in action at the Storybook addon demo site.

You can also visit the example website that the Storybook demo is built for.

Also visit the npm page if you are reading this on GitHub

Installation guide

Package download

First you will need to install the plugin via npm

npm install storybook-addon-dependency-previews

Register the add-on

From your root folder, open your .storybook/main.ts file.

Edit the main.ts to contain the following values or copy/paste the below to replace the full contents of the main.ts file.

import { StorybookConfig } from '@storybook/react-vite'

const config: StorybookConfig = {
	// tells storybook what files to look for when it goes searching for story files
	stories: ['../src/**/*.stories.@(ts|tsx|mdx|svelte|vue)'],
	addons: [
		// autodocs is required for this addon to work
		'@storybook/addon-docs',
		// the storybook dependency previews addon registration
		'storybook-addon-dependency-previews/addon',
	],
	framework: {
		// The framework that storybook uses to read story components
		// Use @storybook/*-vite for your framework of choice
		name: '@storybook/react-vite',
		options: {},
	},
}

export default config

Bare minimum storybook story example

Get a story ready so you have something to test with.

Below is the bare minimum needed to generate a viable story that is compatible with the add-on.

import type { Meta } from '@storybook/react-vite'
import { ComponentName } from './ComponentName'

const meta: Meta<typeof ComponentName> = {
	// You can use spaces here to make the title of the story page more human readable
	title: 'Component Name',
	component: ComponentName,
	// autodocs tag is required
	tags: ['autodocs'],
	// The `__filePath` property must be applied to every story file
	// for the addon to track dependencies effectively
	// `import.meta.url` is a Vite specific value that automatically generates the path for you
	parameters: {
		__filePath: import.meta.url,
	},
}

export default meta

type Story = StoryObj<typeof meta>

export const Primary: Story = {
	args: {},
}

package.json scripts

You will need the following scripts in your package.json file:

// package.json
{
	...
	"scripts": {
		...
		"sb": "sb-deps --watch --run-storybook",
		"sb:build": "sb-deps && storybook build",
		"sb:deps": "sb-deps",
		"sb:alt-port": "sb-deps --watch --run-storybook --sb-port 7020"
	}
	...
}

Don't run any of these yet, you are not finished with the installation.

npm run sb will run storybook in watch mode. It will update the dependency-previews.json file whenever a story file changes, is added, or removed. Use this instead of the storybook command to take advantage of automatic dependency tracking while you work and auto scaffolding of stories when new story files are created.

npm run sb:build will do a one off compile of your storybook website

npm run sb:deps will generate a fresh dependency-previews.json on demand

npm run sb:alt-port (optional) will run storybook in watch mode and run it using a specific port number.

Create the preview.tsx file

First run npm run sb:deps to generate a fresh dependency-previews.json file in the .storybook folder.

Make sure that the "resolveJsonModule" tsConfig.json setting is set to true to import this file.

Now create a preview.tsx file in the .storybook folder with the following content:

/// <reference types="vite/client" />

import * as React from 'react'
import {
	defaultPreviewParameters,
	dependencyPreviewDecorators,
	type StorybookPreviewConfig,
} from 'storybook-addon-dependency-previews'

// Import the generated dependency-previews.json file
import dependenciesJson from './dependency-previews.json'

// Global styles are imported here
import '../src/styles.css'

const previewConfig: StorybookPreviewConfig = {
	decorators: [...dependencyPreviewDecorators],
	parameters: {
		...defaultPreviewParameters,
		dependencyPreviews: {
			dependenciesJson,
			storyModules: import.meta.glob(
				'/src/**/*.stories.@(tsx|ts|jsx|js|svelte)',
				{ eager: false },
			),
			// Replace this with the base url of your git repository
			// This enables the addon to link to the source code of the component
			sourceRootUrl:
				'https://github.com/Dan503/storybook-addon-dependency-previews/blob/main/example-site',
			// This allows Source File Path to open the
			// component file directly in VS Code when
			// running in a local host environment.
			// `import.meta.url` is a Vite specific feature
			projectRootPath: new URL('..', import.meta.url).pathname,
		},
	},
}

export default previewConfig

Run it!

You should be all set now.

Try running npm run sb to boot up storybook, leave it running as you work.

As you create new component files, the component will be auto-scaffolded for you and a matching story file will be created for it automatically. The dependency previews json file will also be auto-updated.

This workflow allows you to focus on what matters instead of having to waste time writing lots of boilerplate code every time you want to create a new component.