Storybook Mirage

一個 Storybook 擴充功能，用於使用和與 MirageJS 伺服器互動

使用 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.dev.org.tw/api/classes/server/#logging
      logging: true,
      // customize when a request responds https://mirage.dev.org.tw/docs/main-concepts/route-handlers/#timing
      timing: 1000,
      // override route handlers for the story https://mirage.dev.org.tw/docs/main-concepts/route-handlers/
      handlers: {
        get: {
          '/api/user': 404, // status code
          '/api/items': [204, {}, { items: [] }], // arguments for Response https://mirage.dev.org.tw/api/classes/response/
          '/api/items/:id': (schema, request) => // Route handler function https://mirage.dev.org.tw/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.dev.org.tw/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 發佈。目錄是透過在 package.json 中查詢 npm 的登錄以取得 Storybook 特定中繼資料來填入的。此專案已設定範例資料。在 擴充功能中繼資料文件中了解更多可用選項。

發佈管理

設定

此專案已設定為使用 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 Actions

此範本已預先設定 GitHub actions，可在有人推送到您的儲存庫時發佈您的擴充功能。

前往 設定 > 機密，按一下 新增儲存庫機密，然後新增您的 NPM_TOKEN。

建立發佈

若要在本機建立發佈，您可以執行下列命令，否則 GitHub action 會為您建立發佈。

npm run release

這將會

• 建置和封裝擴充功能程式碼
• 遞增版本
• 將發佈推送至 GitHub 和 npm
• 將變更日誌推送至 GitHub