Storybook Playroom 擴充功能

🧩 在 Storybook 內使用 Playroom 設計，並以每個 story 的原始碼作為起點。

檢視示範 →

開始使用

注意： 使用此擴充功能之前，必須先設定並執行 Playroom，請參閱說明。

npm install --save-dev storybook-addon-playroom

// .storybook/main.js

export default {
  addons: ['storybook-addon-playroom'],
}

設定

此擴充功能可透過 playroom 參數進行設定。以下為可用的選項

選項	類型	說明	預設值
url	字串	Playroom URL	https://127.0.0.1:9000
code	字串	要使用的程式碼，而不是 story 原始碼
disable	布林值	是否停用此擴充功能	false
includeDecorators	布林值	是否在 story 程式碼中包含全域裝飾器	false
reactElementToJSXStringOptions	物件	react-element-to-jsx-string 選項	{ sortProps: false }

若要設定所有 story，請設定 playroom 參數

// .storybook/preview.js

export const parameters = {
  playroom: {
    url: 'https://127.0.0.1:9000',
  },
}

您也可以使用參數繼承，在每個 story 或每個元件的基礎上進行設定

// Button.stories.js

export default {
  title: 'Button',
  component: Button,
  parameters: {
    playroom: {
      // Use predefined code instead of story source on all Button stories
      code: '<Button>Hello Button</Button>',
    },
  },
}

export const Large = {
  args: {
    size: 'large',
  },
  parameters: {
    playroom: {
      // Disable addon in Button/Large story only
      disable: true,
    },
  },
}

注意：停用此擴充功能並不會隱藏Playroom索引標籤。為此，您必須使用 Storybook 自己的 previewTabs 參數

// Button.stories.js

export const Large = {
  parameters: {
    playroom: {
      disable: true,
    },
    previewTabs: {
      // Hide Playroom tab
      'storybook/playroom/tab': {
        hidden: true,
      },
    },
  },
}

常見問題

為什麼我產生的 Playroom 程式碼包含無意義的元件名稱？

如果您看到扭曲的元件名稱，例如 <O /> 而不是 <Card />，您可能需要自訂 Storybook 的 Vite 設定並停用縮小化

// .storybook/main.js

export default {
  addons: ['storybook-addon-playroom'],
  async viteFinal(config) {
    return mergeConfig(config, {
      build: {
        // Disable minification
        minify: false,
      },
    })
  },
}