Storybook Addon: Dependency Tree

Overview

Storybook Dependency Tree is a Storybook addon that visualizes the dependency hierarchy of each story in a tree view. This tool helps developers better understand and navigate the dependencies and dependents associated with their stories, making the development process more efficient.

> [!IMPORTANT]
> For Storybook 8.x Users: If you are using Storybook version 8.x, please use the v8 branch.

> Note: This project is a work in progress and is actively being developed.

Features

- Visual Dependency Mapping: Automatically loads and displays all dependencies for the currently open story, providing a clear and structured view similar to storybook-addon-deps.
- Dependents Visualization: In addition to dependencies, the addon also displays all dependents, helping you see which components rely on the current story.
- Seamless Integration: Integrates smoothly with Storybook, enhancing your development workflow.
- Runtime Execution: Runs at runtime without requiring any additional commands.
- Zero Configuration: No configuration is needed to get started.

Dependencies

- Dependency Loading: Powered by node-dependency-tree to accurately map and load dependencies.
- Tree View: Utilizes MUI X for a robust and interactive tree view experience.
- Local Storage: Uses it story dependency map

Installation

To install the addon, run the following command in your project directory:

``bash
npm i storybook-dependency-tree
`

After installation, add 'storybook-dependency-tree' to the addons property inside your main Storybook configuration file (e.g., main.js):

`javascript
stories: ["../src//.mdx", "../src//.stories.@(js|jsx|ts|tsx)"],
addons: [
...
"storybook-dependency-tree",
],
``