Storybook 附加组件故事覆盖面板

一个 Storybook 附加组件，与 @storybook/addon-coverage 协同工作，以在 Storybook UI 面板中显示覆盖率指标

开发脚本

• npm run start 在监视模式下运行 babel 并启动 Storybook
• npm run build 构建和打包您的附加组件代码

从 TypeScript 切换到 JavaScript

不想使用 TypeScript？我们提供一个方便的弹出命令：npm run eject-ts

这将把所有代码转换为 JS。这是一个破坏性的过程，因此我们建议您在开始编写任何代码之前运行它。

包含什么？

附加组件代码位于 src 中。它演示了所有与核心附加组件相关的概念。三个 基于 UI 的附加组件范式

• src/Tool.tsx
• src/Panel.tsx
• src/Tab.tsx

它们与附加组件本身一起在 src/manager.ts 中注册。

管理状态并与故事交互

• src/withGlobals.ts & src/Tool.tsx 演示了如何使用 useGlobals 来管理全局状态并修改故事的内容。
• src/withRoundTrip.ts & src/Panel.tsx 演示了使用通道进行双向通信。
• src/Tab.tsx 演示了如何使用 useParameter 来访问当前故事的参数。

您的附加组件可能会使用其中一种或多种模式。请随时删除未使用的代码。相应地更新 src/manager.ts 和 src/preview.ts。

最后，在 src/constants.ts 中配置您的附加组件名称。

捆绑

附加组件可以通过多种方式与 Storybook 项目进行交互。建议您在开始之前熟悉 基础知识。

• 管理器条目用于向 Storybook 管理器 UI 添加 UI 或行为。
• 预览条目用于向渲染故事的预览 iframe 添加 UI 或行为。
• 预设用于修改 Storybook 配置，类似于 用户如何配置其 main.ts 配置。

由于这些地方中的每一个都代表着具有不同功能和模块的不同环境，因此还建议相应地拆分和构建您的模块。此附加组件工具包附带预配置的 捆绑配置，它支持此拆分，您可以根据需要自由修改和扩展它。

您可以在 package.json#bundler 属性中定义哪些模块与哪些环境匹配

• exportEntries 是用户可以从他们需要的任何地方手动导入的模块条目的列表。例如，您可能拥有用户需要导入到其 preview.ts 文件中的装饰器，或者可以将其用于其 main.ts 文件中的实用函数。
• managerEntries 是仅供管理器 UI 使用的模块条目的列表。这些模块将被捆绑到 ESM，并且不会包含类型，因为它们主要由 Storybook 直接加载。
• previewEntries 是仅供预览 UI 使用的模块条目的列表。这些模块将被捆绑到 ESM，并且不会包含类型，因为它们主要由 Storybook 直接加载。

管理器和预览条目仅在浏览器中使用，因此它们只输出 ESM 模块。导出条目可以在浏览器和节点中使用，具体取决于它们的用例，因此它们同时输出 ESM 和 CJS 模块。

全局化包

Storybook 提供了一组预定义的包，这些包在管理器 UI 和预览 UI 中可用。在附加组件的最终捆绑包中，不应包含这些包。相反，导入应该保留在原位，允许 Storybook 在 Storybook 构建过程中用实际的包替换这些导入。

包列表在管理器和预览之间有所不同，这就是 managerEntries 和 previewEntries 之间略有区别的原因。最值得注意的是，react 和 react-dom 在管理器中是预捆绑的，但在预览中不是。这意味着您的管理器条目可以使用 React 来构建 UI，而无需捆绑它或直接引用它。因此，即使您在生产环境中使用它，将 React 作为 devDependency 也是安全的。将 React 作为对等依赖项会不必要地强迫您的用户安装 React。

此规则的一个例外是，如果您使用 React 将 UI 注入到预览中，而预览中没有预捆绑的 React。在这种情况下，您需要将 react 和 react-dom 移动到对等依赖项。但是，我们通常建议不要使用此模式，因为它会将附加组件的使用限制在基于 React 的 Storybook。

元数据

Storybook 附加组件列在 目录 中，并通过 npm 分发。目录通过查询 npm 注册表以获取 package.json 中特定于 Storybook 的元数据来填充。该项目已配置了示例数据。在 附加组件元数据文档 中了解有关可用选项的更多信息。

文档

为了帮助社区使用您的附加组件并了解其功能，请对其进行彻底的文档记录。

要开始使用，请将此自述文件替换为此示例模板中的内容，该模板仿照基本附加组件（如 操作）的文档方式。然后更新内容以描述您的附加组件。

示例文档模板

# My Addon

## Installation

First, install the package.

```sh
npm install --save-dev my-addon
```

Then, register it as an addon in `.storybook/main.js`.

```js
// .storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';

const config: StorybookConfig = {
  // ...rest of config
  addons: [
    '@storybook/addon-essentials'
    'my-addon', // 👈 register the addon here
  ],
};

export default config;
```

## Usage

The primary way to use this addon is to define the `exampleParameter` parameter. You can do this the
component level, as below, to affect all stories in the file, or you can do it for a single story.

```js
// Button.stories.ts

// Replace your-framework with the name of your framework
import type { Meta } from '@storybook/your-framework';

import { Button } from './Button';

const meta: Meta<typeof Button> = {
  component: Button,
  parameters: {
    myAddon: {
      exampleParameter: true,
      // See API section below for available parameters
    }
  }
};

export default meta;
```

Another way to use the addon is...

## API

### Parameters

This addon contributes the following parameters to Storybook, under the `myAddon` namespace:

#### `disable`

Type: `boolean`

Disable this addon's behavior. This parameter is most useful to allow overriding at more specific
levels. For example, if this parameter is set to true at the project level, it could then be
re-enabled by setting it to false at the meta (component) or story level.

### Options

When registering this addon, you can configure it with the following options, which are passed when
registering the addon, like so:

```ts
// .storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';

const config: StorybookConfig = {
  // ...rest of config
  addons: [
    '@storybook/essentials',
    {
      name: 'my-addon',
      options: {
        // 👈 options for my-addon go here
      },
    },
  ],
};

export default config;
```

#### `useExperimentalBehavior`

Type: `boolean`

Enable experimental behavior to...

发布管理

设置

该项目配置为使用 auto 进行发布管理。它会生成变更日志并将其推送到 GitHub 和 npm。因此，您需要配置对二者的访问

• NPM_TOKEN 创建一个具有读取和发布权限的令牌。
• GH_TOKEN 创建一个具有 repo 范围的令牌。

然后打开您的 package.json 并编辑以下字段

• name
• author
• repository

本地

要在本地使用 auto，请在项目根目录中创建一个 .env 文件，并将您的令牌添加到其中

GH_TOKEN=<value you just got from GitHub>
NPM_TOKEN=<value you just got from npm>

最后，在 GitHub 上创建标签。您将在将来进行包更改时使用这些标签。

npx auto create-labels

如果您在 GitHub 上查看，您现在将看到一组 auto 希望您使用的标签。使用这些标签来标记未来的拉取请求。

GitHub 操作

此模板附带了已设置的 GitHub 操作，以便在任何人推送到您的存储库时发布您的附加组件。

转到 设置 > 机密，单击 新建存储库机密，并添加您的 NPM_TOKEN。

创建发布

要本地创建发布，您可以运行以下命令，否则 GitHub 操作将为您进行发布。

npm run release

那将

• 构建和打包附加组件代码
• 提升版本
• 将发布推送到 GitHub 和 npm
• 将变更日志推送到 GitHub