Storybook JSON Schema 附加元件

使用豐富的 JSON Schema Explorer 介面顯示相關的 JSON Schema 文件，並新增具有語義自動完成功能的驗證 JSON 程式碼編輯器，以便與您的元件互動，並輕鬆複製設定。

JSON Schema Explorer 基於出色的 Atlassian JSON Schema Viewer。它經過少量修改，以產生可供部分使用的套件，就像這個附加元件一樣。

JSON Code Editor 基於 @monaco-editor/react。編輯器連接到您的 Story 狀態/參數，因此通過 Controls 更改屬性會反映在顯示的程式碼中。反之，如果您編輯 JSON，並且結果根據 Schema 有效，您變更的參數也會應用於 Story。

顯示運作中的演示 （點擊 JSON Schema 附加元件索引標籤）

目錄

• Storybook JSON Schema 附加元件
  • 用途
  • 開始使用
  • 進階設定
  • 作者

用途

您可以使用此附加元件的三个用途

1. 在 JSON Schema Explorer 中，以有條理的方式探索相關的 JSON Schema 文件
2. 透過 Controls 設定元件，將產生的 JSON 複製為 API 使用/資料產生用途的起點或範本，在 JSON Code Editor 中
3. 貼上 JSON 以驗證資料或在 JSON Code Editor 中預覽元件狀態

開始使用

先決條件：您的元件需要有相關聯的 JSON Schema 檔案。此外，Schema 需要事先取消參照，因為 $ref 解析不是（已測試）此附加元件的一部分（還沒有嗎？...如果您需要此功能，請在 Issues 中告訴我們）。

第一步是安裝附加元件

$ yarn add --dev @kickstartds/storybook-addon-jsonschema

第二步，在您的 .storybook/main.js 中註冊附加元件（只需將其新增到清單中）

module.exports = {
  addons: ["@kickstartds/storybook-addon-jsonschema"],
};

第三步，將 Schema 匯出為 元件或 Story 參數

export default {
  title: "Button",
  component: Button,
  parameters: {
    jsonschema: {
      schema: {
        $schema: "https://json-schema.dev.org.tw/draft-07/schema#",
        $id: "https://my-components/button.schema.json",
        type: "object",
        properties: {
          primary: {
            type: "boolean",
            default: false,
          },
          label: {
            type: "string",
          },
        },
      },
    },
  },
};

進階設定

此附加元件仍處於早期階段，進階設定選項將在稍後加入。如果有任何不清楚或無法運作的地方，請隨時在 Issues 中告訴我們！

作者

此附加元件是由 kickstartDS - frontend first framework 背後的團隊用 🍋 製作的！

kickstartDS 是一個全面的元件和模式程式庫

我們使 Web 開發團隊能夠非常有效率地建立一致且符合品牌規範的 Web 前端。具有內建的設計系統，可服務您的所有數位接觸點。像擠檸檬一樣簡單。

我們使用此附加元件，讓我們的設計系統解決方案的使用者透過我們的核心 JSON Schema 屬性層與其元件互動。查看我們的登陸頁面以了解更多資訊！👋