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.

Currently works with React and Svelte. Angular support is coming soon.

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:

Demos

React demos

• React Storybook demo site
• React rendered example website
• React demo source code

Svelte demos

• Svelte Storybook demo site
• Svelte rendered example website
• Svelte demo source code

Installation guide

Package download

First you will need to install the plugin via npm as well as dependency-cruiser

npm install -D storybook-addon-dependency-previews dependency-cruiser

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.

Register with React

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

const config: StorybookConfig = {
	stories: ['../src/**/*.stories.@(ts|tsx|mdx)'],
	addons: [
		// autodocs is required for this addon to work
		'@storybook/addon-docs',
		// the storybook dependency previews addon registration
		'storybook-addon-dependency-previews/addon',
	],
	framework: {
		name: '@storybook/react-vite',
		options: {},
	},
}

export default config

Register with Svelte

import type { StorybookConfig } from '@storybook/sveltekit'

const config: StorybookConfig = {
	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts|svelte)'],
	addons: [
		// autodocs is required for this addon to work
		'@storybook/addon-docs',
		// required for .stories.svelte CSF format
		'@storybook/addon-svelte-csf',
		// the storybook dependency previews addon registration
		'storybook-addon-dependency-previews/addon',
	],
	framework: '@storybook/sveltekit',
}

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.

React .stories.tsx file example

import type { Meta, StoryObj } 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: {},
}

Svelte .stories.svelte file using Svelte CSF

<script module>
	import { defineMeta } from '@storybook/addon-svelte-csf'
	import ComponentName from './ComponentName.svelte'

	const { Story } = defineMeta({
		title: 'Component Name',
		component: ComponentName,
		// autodocs tag is required
		tags: ['autodocs'],
		// The `__filePath` property must be applied to every story file
		parameters: {
			__filePath: import.meta.url,
		},
	})
</script>

<Story name="Primary" />

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 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 .storybook/preview.ts file (or preview.tsx if your framework requires JSX) with the following content:

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

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 (optional)
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 URL to your src folder in your git repository.
			// This enables the addon to link to the source code of the component.
			sourceRootUrl:
				'https://github.com/your-org/your-repo/blob/main/src',
			// 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.