排列组合

• 免责声明：仅保证与基于 React 的项目兼容。其他框架可能会导致意外错误。
• 仅限 TypeScript 项目。我们目前没有计划支持 JavaScript
• 现在支持 Storybook 8

此项目是一个插件，它为 Storybook 提供了额外的功能。在一个单独的面板中，您可以将组件的各个方面以表格的形式查看。

这个项目深受 Datadog 设计系统 DRUIDS 的启发，我们希望在 Storybook 中使用 DRUIDS 的组件排列功能。

---

🆘 帮助我们使 sb-addon-permutation-table 更加强大！ 🆘

在 v1.0.0 版本发布后，我们尝试让 sb-addon-permutation-table 也支持 Vue 和 Svelte，但遇到了一点小障碍。我们的插件非常依赖一个 React hook，无法舍弃！目前，它仍然深深地爱着 React，还没有向其他框架敞开心扉。

如果我们能够摆脱 Panel 和 Preview 中的 React hooks，这个神奇的插件将可以在任何框架中闪耀。

你能伸出援手吗？🥺

-The Mighty Quest-

1. Take a peek at our GitHub - the code is all there, waiting for your brilliance.
2. Got any bright ideas? Quirky solutions? Magical spells 🧙‍♂️? Share them with us, and we'll be forever grateful!
3. Spread the word! Let your fellow developers know about "sb-addon-permutation-table"'s quest for multi-framework love.
4. Together, we can make "sb-addon-permutation-table" truly awesome for all frameworks out there! 🌟

---

目录

• 功能
• 安装
  • 要求
• 为什么要使用它？
• 用法
  • 示例
  • 高级
• 演示
• 常见问题
• 许可证

功能

• 参数控制：直接操作组件的属性。您可以查看组件在上下文中的显示效果。

• 排列组合：提供一个包含不同属性组合视图的表格。您可以一目了然地比较和分析组合结果。

安装

yarn add sb-addon-permutation-table

要求

• Storybook >= 8.x
• node > 16.x

对于 SB 7.x 以下的用户

• 请尝试版本 1.0.21 yarn add [email protected]

为什么要使用它？

sb-addon-permutation 可以快速浏览复杂的多属性组件视图。开发人员可以通过提供的展示高效地调试和测试组件。

用法

在 .stories/main.ts 中添加插件代码，如下所示。

import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["sb-addon-permutation-table"],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};

export default config;

与 0.x 版本不同，从 1 版本开始，无需任何配置即可使用插件。插件会自动提取每个 Story 中的元素，但您可以通过传递参数来更细粒度地控制。作为参数接受的值如下所示。用作参数的值与 Preview 无关，而是指定在 Panel 中使用。

名称	描述	类型	默认值
componentName	显示在 Panel 中的组件名称	字符串？	Story 的名称
importPath	单击“复制导入路径”按钮时复制的组件路径。	字符串？	""
children	Story 组件中的子元素	字符串？	{{children}}
deactivate	您不想使用排列组合功能的属性名称	字符串数组	[]
autoload	加载 Story 时，您可以创建一个属性，该属性无需任何点击即可自动激活。	"all" 字符串数组	[]

关于参数 children 的更多信息

children 参数指的是子元素代码的形状，当 children 作为参数传递给 Story 时，它将显示在 Panel 的 CodeEditor 区域中。将 children 作为参数传递将在 Preview 中正确显示，但在 Panel 中，children 将显示为 {{children}}，除非您传递单独的参数。当您希望在 Panel 中显示 children 的结构时，请使用此参数。

另请参阅：如何在 Storybook 中使用 children 作为参数

示例

插件会自动使用组件的类型并在排列组合面板中提供。

// stories/Component.stories.(ts|tsx)

import React from "react";
import { PermutationMeta } from "sb-addon-permutation-table";
import YourComponent from "YourComponent";

const meta: PermutationMeta<typeof YourComponent> = {
  //...
  parameters: {
    permutation: {
      componentName: "Takahashi", // "Takahashi" in the panel, regardless of the name of the component.
      importPath: "@yourLib/yourComponent", // the value copied when clicked "Copy import" button
      children: "<div>Chef of the diamond city</div>", // a value passed to children
      deactivate: ["foo", "bar"], // deactviate property foo,bar
      autoload: "all", // activate all property except deactivated
    },
  },
};

您也可以在每个 Story 的基础上单独应用参数。

export const Primary: Story = {
  args: {
    primary: true,
    label:'Hello World'
  },
};

export const PermutationDeactivate: Story = {
  args:{
    label:'Hello World'
  }
  parameters: {
    permutation: {
      deactivate: ["primary", "size"],
    },
  },
};

高级

激活 autoload

启用 autoload 后，加载 Story 时会自动激活排列组合表格。

export const Primary: Story = {
  args: {
    primary: true,
  },
  parameters: {
    permutation: {
      // Now all element that can be permuted are now active when story is loaded
      autoload: "all",
    },
  },
};

您还可以仅启用某些属性

export const Primary: Story = {
  args: {
    primary: true,
  },
  parameters: {
    permuations: {
      // only 'foo' and 'bar' attribute will be activated
      autoload: ["foo", "bar"],
    },
  },
};

如果同时允许 autoload 和 deactivate，则 deactivate 优先。

export const Primary: Story = {
  args: {
    primary: true,
  },
  parameters: {
    permuations: {
      // only 'bar' attribute is permuted
      autoload: ["foo", "bar"],
      deactivate: ["foo"],
    },
  },
};

演示

演示页面

常见问题

我在 Story 上启用了排列组合，但它只显示具有相同参数的组件🥲

您是否使用装饰器作为 JSX 的一种形式？如果是，请确保正确地为 StoryFn 提供了检查上下文。如果未提供上下文，排列组合表将无法工作。

更改此内容

// .storybook/decorator.tsx

export const decorators = [
  (Story, context) => {
    return (
      <RandomWrapper>
        <ThemeProvider>
          <Story />
        </ThemeProvider>
      </RandomWrapper>
    );
  },
];

为这个👍

export const decorators = [
  (Story, context) => {
    return (
      <RandomWrapper>
        <ThemeProvider>{Story(context)}</ThemeProvider>
      </RandomWrapper>
    );
  },
];

检查为什么这样做有效

---

如果您遇到其他问题，请创建一个 问题 让我们知道。

许可证

MIT

赞助商