@bryophyte/storybook-addon

Storybook addon that surfaces Bryophyte analysis data inside Storybook. It renders a Bryophyte panel and provides React blocks you can drop into Docs/MDX.

Prerequisites

This addon expects analysis data generated by the Bryophyte CLI. The CLI stores analysis files in a centralized .bryophyte/analyses/ folder at your project root.

Generate analysis data

First, initialize the .bryophyte folder at your monorepo/project root:

bunx bryophyte init <rootPath>

Then analyze the packages you want to track:

bunx bryophyte analyse <projectPath>

This creates files in the structure:

.bryophyte/
  config.json
  analyses/
    _packagename.json           # e.g., _test_package.json
    _other_package.json

The filename is derived from the package name (e.g., @test/package becomes _test_package.json).

Serving analysis data in Storybook

The recommended approach is to serve the .bryophyte folder via Storybook's staticDirs and reference files via analysisUrl:

// .storybook/main.ts
export default {
  staticDirs: ['../public', '.bryophyte'],  // Adjust path based on your structure
  // ...
}

Install

bun add -D @bryophyte/storybook-addon

Storybook setup

Add the addon to .storybook/main.ts:

export default {
  addons: ['@bryophyte/storybook-addon/manager'],
}

Usage (Panel)

Provide Bryophyte data via story parameters using analysisUrl (recommended for monorepos):

export default {
  component: Button,
  parameters: {
    bryophyte: {
      analysisUrl: '/analyses/_test_package.json',  // Served from staticDirs
      componentName: 'Button',
    },
  },
}

Or import the analysis JSON directly:

import analysis from '.bryophyte/analyses/_test_package.json'

export default {
  component: Button,
  parameters: {
    bryophyte: {
      analysis,
      componentName: 'Button',
    },
  },
}

Usage (Docs / MDX block)

import { PropUsageBlock } from '@bryophyte/storybook-addon'
import analysis from '.bryophyte/analysis.json'

<PropUsageBlock
  analysis={analysis}
  componentName='Button'
  title='Button prop usage'
/>

Parameters

• bryophyte.analysis: Analysis JSON (object or array).
• bryophyte.analysisUrl: URL to the analysis JSON.
• bryophyte.packageName: Select from an array of analyses.
• bryophyte.componentName: Component export name (required).
• bryophyte.componentFile: Optional file path match for disambiguation.