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,
  },
};

要添加多个主题，请向 theme 键添加一个 Array。每个主题都必须具有 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 或作为 object 数组的多个主题。

provider

any | 必需

任何提供程序组件，它将接受一个主题对象 prop 和子元素。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 prop。您可以使用 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 };