遊樂場

一個讓消費者學習如何使用元件庫或重現錯誤的遊樂場

每週下載次數

遊樂場 - Storybook 擴充套件

這個擴充套件透過允許您與元件互動來增強您的 Storybook 體驗。它非常適合希望即時實驗、偵錯問題或建立複雜組件的開發人員。

安裝

要安裝這個擴充套件，請在您的專案目錄中執行以下其中一個指令

yarn add -D storybook-addon-playground
# or
npm install -D storybook-addon-playground

設定

在您的 Storybook 設定檔 .storybook/main.js 或 .storybook/main.ts 中新增這個擴充套件

const config = {
  addons: [
    // rest of your addons ...
    "storybook-addon-playground",
  ],
};

這個擴充套件的設定是透過 Storybook 的 preview 參數完成的。

參數	必要	預設值	描述
`storyId`	`true`		您的遊樂場在 Storybook 上的 story id。
`components`	`true`		一個物件，其中包含應在遊樂場中呈現的元件。鍵是元件名稱，值是元件本身。
`autocompletions`	`false`	`[]`	一個應在遊樂場上使用的自動完成陣列。建議使用 `react-docgen` 來產生文件輸出。
`editorTheme`	`false`	您的 Storybook 主題	應該在遊樂場上使用的主題。
`initialCode`	`false`	空的編輯器	應該在遊樂場上呈現的初始程式碼（「歡迎」）。
`share`	`false`	`false`	是否允許分享功能。

在您的 .storybook/preview.ts 檔案中，您應該新增類似以下的內容

import MyComponentsLibrary from "my-components-library";
import MyIconsLibrary from "my-icons-library";
import reactDocgenOutput from "./react-docgen-output.json";
import { generateAutocompletions } from "storybook-addon-playground";

const preview = {
  parameters: {
    playground: {
      storyId: "playground",
      components: { ...MyComponentsLibrary, ...MyIconsLibrary },
      autocompletions: generateAutocompletions(reactDocgenOutput),
      editorTheme: "light",
      introCode: { jsx: `<div>Welcome to my Playground!</div>`, css: "" },
    },
  },
};

在您的 Storybook 故事中設定遊樂場環境

import { withPlayground } from "storybook-addon-playground";

export default {
  title: "Playground",
  decorators: [withPlayground],
};

export const Playground = {};