@bryophyte/故事书-addon

故事本上添加了Bryophyte分析数据 在故事本里。 它使一个Bryophyte面板,并提供反应块,你可以降入Docs/MDX.

先决条件

这个加通预期由Bryophyte CLI生成的分析数据. CLI 集中存储分析文件 .bryophyte/analyses/ 文件夹在您的工程根.

生成分析数据

首先,初始化 .bryophyte 位于您单曲/ 项目根的文件夹 :

bunx bryophyte init <rootPath>

然后分析您想要跟踪的软件包 :

bunx bryophyte analyse <projectPath>

在结构中创建文件 :

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

文件名来源于软件包名称(例如, @test/package 变成 _test_package.json) (中文(简体) ).

在故事书中提供分析数据

建议采取的办法是,为非政府组织提供服务 .bryophyte 通过故事书的文件夹 staticDirs 通过 analysisUrl数字 :

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

安装

bun add -D @bryophyte/storybook-addon

故事书设置

添加加词到 .storybook/main.ts数字 :

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

用法(小组)

通过故事参数提供Bryophyte数据 analysisUrl (建议单体):

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

或者直接导入分析 JSON :

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

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

用法 (Docs / MDX 块)

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

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

参数

• bryophyte.analysis: 分析 JSON(对象或阵列).
• bryophyte.analysisUrlJSON分析的URL.
• bryophyte.packageName: 从一系列分析中选择.
• bryophyte.componentName: 组件导出名称(需要).
• bryophyte.componentFile:可选文件路径相匹配以解析.