Storybook Mirage

一个用于使用和与 MirageJS 服务器 交互的 Storybook 插件

使用 Storybook Addon Kit 创建

包含什么？

从 Storybook 设置自定义请求处理器：

查看请求日志：

开始使用

使用您选择的包管理器安装

npm install --save-dev storybook-mirage

或

yarn add --dev storybook-mirage

注册插件

// .storybook/main.js

module.exports = {
  stories: [],
  addons: [
    // Other Storybook addons
    "storybook-mirage", //👈 the addon registered here
  ],
};

设置装饰器

// .storybook/preview.js

import { withServer } from "storybook-mirage";
import { makeServer } from "../path/to/server";

// optionally pass the server creator function to the decorator
export const decorators = [withServer(makeServer)];

makeServer 是一个函数，它返回一个 Mirage 服务器 实例，通常通过调用 Mirage 的 createServer 函数实现。

使用 mirage 参数 配置装饰器

// Button.stories.js | Button.stories.ts

import Button from './Button';

export default {
  title: 'Button',
  component: Button,
  parameters: {
    mirage: {
      // automatically log requests to browser console https://mirage.node.org.cn/api/classes/server/#logging
      logging: true,
      // customize when a request responds https://mirage.node.org.cn/docs/main-concepts/route-handlers/#timing
      timing: 1000,
      // override route handlers for the story https://mirage.node.org.cn/docs/main-concepts/route-handlers/
      handlers: {
        get: {
          '/api/user': 404, // status code
          '/api/items': [204, {}, { items: [] }], // arguments for Response https://mirage.node.org.cn/api/classes/response/
          '/api/items/:id': (schema, request) => // Route handler function https://mirage.node.org.cn/docs/main-concepts/route-handlers
              new Response(200, {}, { id: request.params.id, name: `Item ${request.params.id}` })
        },
        post: {
          'api/task': { task: {} } // body for Response
        }
      },
      // data to seed Mirage ORM https://mirage.node.org.cn/docs/main-concepts/fixtures/
      fixtures: null,
      // pass in a custom Mirage server instance to override the global setting
      instance: null,
      // created seeded data from Factories defined within your makeServer function,
      // with the key names corresponding to Factory names.
      factorySeeds: {
        // create 2 addresses with the same traits.
        address: [{ traits: ['withRecipient', 'withCompleteAddress'], count: 2 }],
        // create a single cart item with no specific traits
        cart: 1,
        // create 2 users that contain override values
        user: [
          {
            traits: [
              'withSomeTrait',
              'withOtherTrait',
            ],
              // override specific attribute swith the `attrs` property 
            attrs: {
              name: 'R2D2',
              gender: 'Male',
            },
          },
          {
            traits: [
              'withSomeTrait',
              'withOtherTrait',
            ],
            attrs: {
              name: 'BB8',
              gender: 'Male',
            },
          },
        ],
    },
    }
  },
};

开发脚本

• npm run start 在监听模式下运行 babel 并启动 Storybook
• npm run build 构建并打包插件代码

插件代码位于 src 目录中。

• src/Panel.js (显示服务器请求和处理器统计信息)
• src/withServer.js (用于消费和配置 MirageJS 服务器的装饰器)

这些以及插件本身都注册在 src/preset/manager.js 中。

在 src/constants.js 中配置插件名称。

元数据

Storybook 插件列在 目录 中，并通过 npm 分发。目录是通过查询 npm 注册表中 package.json 中 Storybook 特定的元数据来填充的。本项目已配置了示例数据。在 插件元数据文档 中了解更多可用选项。

发布管理

设置

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

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

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

• 名称
• 作者
• 仓库

本地

要在本地使用 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 Actions

此模板已配置好 GitHub actions，以便在有人推送到您的仓库时随时发布您的插件。

转到 Settings > Secrets，点击 New repository secret，并添加您的 NPM_TOKEN。

创建发布

要在本地创建发布，您可以运行以下命令，否则 GitHub action 会为您创建发布。

npm run release

这会

• 构建并打包插件代码
• 升级版本
• 将发布推送到 GitHub 和 npm
• 将更改日志推送到 GitHub