全局控制 Storybook 附加组件

有时您的设计是在各种项目之间进行扩展的，需要在这些项目之间设置一些自定义项。在这些情况下，您可能希望在全局上下文中设置变量，以根据特定项目的需要以特定方式配置组件。开发设计组件时，检查适用于它们的可能的预配置也是一个好主意。

对于这些，全局控制附加组件为您提供了与 Storybook Controls 相同的图形界面，但用于动态交互 Storybook 的全局变量。

入门

使用以下命令安装全局控制 Storybook 附加组件

yarn add -D @luigiminardim/storybook-addon-globals-controls

然后，将以下内容添加到 .storybook/main.js 中

module.exports = {
  addons: ['@luigiminardim/storybook-addon-globals-controls'],
};

使用

在您的 .storybook/preview.js 中，以与您设置 argTypes 相同的 API 导出全局类型。查看 Storybook 的官方控制注释文档，了解控制 API。

您还可以使用与标准 Storybook Controls 相同的 API 设置预设颜色。

虽然没有必要，但为了使用全局变量，我们建议使用导出的装饰器 withGlobals。

示例

// .storybook/preview.js

import { withGlobals } from "@luigiminardim/storybook-addon-globals-controls";

export const globalTypes = {
  uncontrolled: {
    name: "Uncontrolled",
    description: "Should not have any controls.",
  },
  boolean: {
    name: "Boolean",
    description: "Boolean Description",
    defaultValue: true,
    control: { type: "boolean" },
  },
  number: {
    name: "Number",
    description: "Number Description",
    defaultValue: 8,
    control: { type: "number", min: 6, max: 10, step: 2 },
  },
};

export const parameters = {
  globalsControls: {
    presetColors: [
      { color: "#ff4785", title: "Coral" },
      "rgba(0, 159, 183, 1)",
      "#fe4a49",
    ],
  },
};

const withDisplayGlobals = withGlobals((Story, globalValues) => (
  <div>
    {JSON.stringify(globalValues, null, 2)}
    <Story />
  </div>
));

export const decorators = [withDisplayGlobals];

注意：控制只对用 control 属性标记的参数有效，如 (control: {type: 'text'})。

贡献

通过派生 main 分支并发送拉取请求来为这个附加组件做出贡献，您也可以在仓库中发起一个问题以寻求帮助或请求新功能。