Storybook Mirage

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

使用 Storybook 插件套件 创建

包含哪些内容？

从 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，以便在任何人推送至您的存储库时发布您的插件。

转到“设置 > 密钥”，点击“新建存储库密钥”，并添加您的 NPM_TOKEN。

创建发布

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

npm run release

这将

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