# @bryophyte/storybook-addon 中文文档

规范地址：https://npmcn.com/package/%40bryophyte/storybook-addon/

版本：0\.1\.0
npm 元数据更新时间：2026-02-15T17:22:02.926Z
中文译文更新时间：2026-11-08T17:04:00.471Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40bryophyte/storybook-addon
原文对照：https://npmcn.com/package/%40bryophyte/storybook-addon/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：90 kB，7 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：7 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^18\.0\.0 \|\| ^19\.0\.0，storybook ^8\.0\.0 \|\| ^9\.0\.0 \|\| ^10\.0\.0
- 首次发布：2026-02-15T17:22:02.124Z
- 最新版本发布：2026-02-15T17:22:02.409Z
- 近 30 天下载量：2286（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 1 个）

## 中文简介

Bryophyte 分析数据的故事手册

## 安装

```sh
npm install @bryophyte/storybook-addon
```

也可以使用：`pnpm add @bryophyte/storybook-addon`、`yarn add @bryophyte/storybook-addon`、`bun add @bryophyte/storybook-addon`

## README

# @bryophyte/故事书-addon

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

## 先决条件

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

### 生成分析数据

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

```bash
bunx bryophyte init <rootPath>
```

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

```bash
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`数字 :

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

## 安装

```bash
bun add -D @bryophyte/storybook-addon
```

## 故事书设置

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

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

## 用法(小组)

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

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

或者直接导入分析 JSON :

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

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

## 用法 (Docs / MDX 块)

```tsx
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.analysisUrl`JSON分析的URL.
-   `bryophyte.packageName`: 从一系列分析中选择.
-   `bryophyte.componentName`: 组件导出名称(需要).
-   `bryophyte.componentFile`:可选文件路径相匹配以解析.

## 常见问题

### @bryophyte/storybook-addon 是什么？

Bryophyte 分析数据的故事手册

### 如何安装 @bryophyte/storybook-addon？

在项目目录运行 npm install @bryophyte/storybook-addon，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.0\.0 \|\| ^19\.0\.0）、react-dom（^18\.0\.0 \|\| ^19\.0\.0）、storybook（^8\.0\.0 \|\| ^9\.0\.0 \|\| ^10\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @bryophyte/storybook-addon 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @bryophyte/storybook-addon 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @bryophyte/storybook-addon 可以商用吗？

@bryophyte/storybook-addon 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @bryophyte/storybook-addon 的下载量有多少？

根据 npm 官方下载统计，@bryophyte/storybook-addon 在 2026/10/09 – 2026/11/07 这 30 天内被下载 2,286 次，日均约 76 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bryophyte/storybook-addon 还在维护吗？

最新版本 0\.1\.0 发布于 2026/02/16（8 个月前）；至今共发布 1 个版本，其中过去 12 个月发布了 1 个；首次发布于 2026/02/16。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。