Skip to content

Latest commit

 

History

History
36 lines (27 loc) · 1.86 KB

README.md

File metadata and controls

36 lines (27 loc) · 1.86 KB
Raw

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.

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

Dependency Tree Preview

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.

Installation

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

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):

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