storybook-addon-theme-playground

storybook-addon-theme-playground 是一個 Storybook 的主題擴充套件。它提供一個面板，可在其中直接調整主題值。

🌍 範例

功能

• 🎛 獨立面板，具有為每個主題值自動產生的控制項
• 🧬 根據您的需求自訂控制項

目錄

• 安裝
• 參數
• 設定
• 控制項
• 控制元件
• 預設控制項
• Typescript

安裝

1. 安裝擴充套件

npm install -D storybook-addon-theme-playground

yarn add -D storybook-addon-theme-playground

2. 將擴充套件新增至您的 Storybook 設定

新增至 .storybook/main.js

module.exports = {
  addons: ["storybook-addon-theme-playground"],
};

3. 新增參數

新增至 .storybook/preview.js。

// Import a theme provider of your choice
import { ThemeProvider } from "styled-components";

import theme from "path/to/theme";

export const parameters = {
  themePlayground: {
    theme,
    provider: ThemeProvider,
  },
};

若要新增多個主題，請將 Array 新增至 theme 鍵。每個主題都必須具有 name 和 theme 鍵。

import { ThemeProvider } from "styled-components";
import defaultTheme from "path/to/default/theme";
import anotherTheme from "path/to/another/theme";

export const parameters = {
  themePlayground: {
    theme: [
      { name: "Default Theme", theme: defaultTheme },
      { name: "Another Theme", theme: anotherTheme },
    ],
    provider: ThemeProvider,
  },
};

參數

theme

object | Array<{ name: string, theme: object }> | 必要

主題 object 或多個主題，以 objects 的 array 形式呈現。

provider

any | 必要

任何接受主題物件屬性和子元件的供應器元件。由於可擴充性，storybook-addon-theme-playground 沒有預設的供應器。

controls

object | 選用

選用的控制元件或預設控制項。請參閱控制項章節以取得詳細的文件。

config

object | 選用

可以新增額外的設定物件。請參閱設定章節以取得詳細的文件。

config.labelFormat

"path" || "startCase" || (path: string[]) => string | 預設值："startCase"

config.debounce

boolean | 預設值：true

設為 false 更新主題值將不會進行去抖動。

config.debounceRate

number | 預設值：500

config.showCode

boolean | 預設值：true

設為 false 將不會呈現程式碼元件。

config.showDiff

boolean | 預設值：false

顯示初始主題和修改過的主題之間的差異。目前處於實驗狀態。例如，呈現多個全域樣式會互相覆寫。

disabled

boolean | 預設值：false

設為 true 可針對單個故事停用擴充套件面板。

export default {
  title: "Disabled story",
  parameters: {
    themePlayground: { disabled: true },
  },
};

設定

範例

import { ThemeProvider } from "styled-components";

export const parameters = {
  themePlayground: {
    theme: { button: { color: "#000" } },
    provider: ThemeProvider,
    config: {
      // One of "path"
      labelFormat: "path", // "button.color"
      // or "startCase"
      labelFormat: "startCase", // "Button Color"
      // or a custom function
      labelFormat: (path) => {
        // path is equal to ["button", "color"]
        return path.join("-"); // "button-color"
      },
      debounce: true || false,
      debounceRate: 500,
      showConfig: true || false,
    },
  },
};

控制項

storybook-addon-theme-playground 會根據主題值呈現預設控制項。如果您想要自訂它們，可以將 controls 物件新增至參數來覆寫預設控制項。

以主題物件路徑作為鍵，例如 'button.spacing'。

所有控制項都接受 type、label、description 和 icon 屬性。您可以使用Storybook 風格指南中的所有圖示。

範例

import { ThemeProvider } from "styled-components";

import theme from "path/to/theme";

const controls = {
  "button.spacing": {
    type: "number",
    icon: "expand",
    label: "Button Spacing",
    description: "Spacing for all buttons",
    min: 1,
    max: 20,
    steps: 1,
  },
  "button.color.primary": {
    type: "color",
    label: "Button Primary Color",
  },
};

export const parameters = {
  themePlayground: { theme, controls, provider: ThemeProvider },
};

隱藏特定的主題值

也可以隱藏特定的主題值或物件，例如：

const controls = {
  breakpoints: {
    hidden: true,
  },
  "button.spacing": {
    hidden: true,
  },
};

控制元件

顏色

'theme.path': {
  type: 'color',
  icon: string,
  hidden: boolean,
  label: string | 'Theme Path',
  description: string | null
}

數字

'theme.path': {
  type: 'number',
  icon: string,
  hidden: boolean,
  label: string | 'Theme Path',
  description: string | null,
  min: number | 0,
  max: number | 100,
  steps: number | 1
}

選取

'theme.path': {
  type: 'select',
  icon: string,
  hidden: boolean,
  label: string | 'Theme Path',
  description: string | null
  options: [
    {
      value: string | number,
      label: string
    }
  ]
}

簡寫

'theme.path': {
  type: 'shorthand',
  icon: string,
  hidden: boolean,
  label: string | 'Theme Path',
  description: string | null
}

開關

'theme.path': {
  type: 'switch',
  icon: string,
  hidden: boolean,
  label: string | 'Theme Path',
  description: string | null
}

單選群組

'theme.path': {
  type: 'radio',
  icon: string,
  hidden: boolean,
  label: string | 'Theme Path',
  description: string | null
  options: [
    {
      value: string,
      label: string
    }
  ]
}

範圍

'theme.path': {
  type: 'range',
  icon: string,
  hidden: boolean,
  label: string | 'Theme Path',
  description: string | null,
  min: number | 0,
  max: number | 100,
  steps: number | 1
}

預設控制項

storybook-addon-theme-playground 將根據值呈現下列元件。

開關

布林值

數字

數字

文字

字串

範圍

string && string.endsWith("px" || "rem" || "em" || "%")

顏色

string && string.startsWith("#" || "rgba" || "rgba") || label.includes("color")

簡寫

object && Object.keys(object).length === 4 && Object.keys(object).includes("top" && "right" && "bottom" && "left")

Typescript

// .storybook/preview.ts

import {
  withThemePlayground,
  ThemePlaygroundProps,
} from "storybook-addon-theme-playground";

import theme from "path/to/theme";

interface ThemePlaygroundParams extends ThemePlaygroundProps {
  theme: typeof theme;
}

const params: ThemePlaygroundParams = {
  theme,
  provider: ThemeProvider,
  controls: {
    "headline.fontWeight": {
      type: "range",
      max: 900,
      min: 1,
      description: "Define the font weight of the variable font",
    },
    "copy.fontWeight": {
      type: "range",
      max: 900,
      min: 1,
      description: "Define the font weight of the variable font",
    },
  },
};

export const parameters = { themePlayground: params };