排列组合

一个用表格展示组件的 Storybook 插件

每周下载量

免责声明：此插件仅保证在基于 React 的项目中工作。其他框架可能会引入意外错误。
仅限 Typescript 项目。我们没有支持 Javascript 的计划
现已支持 STORYBOOK 8

demo

本项目是一个 Storybook 插件，提供额外的功能。在一个单独的面板中，你可以以表格的形式查看组件的各种方面。

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

🆘 帮助我们让 sb-addon-permutation-table 变得更加出色！ 🆘

在 v1.0.0 版本发布后，我们也尝试让 sb-addon-permutation-table 与 Vue 和 Svelte 一起工作，但遇到了一个小小的障碍。我们的插件对 React Hook 情有独钟，爱不释手！截至目前，它仍然深深地爱着 React，还没有完全向其他框架敞开心扉。

如果我们能在 Panel 和 Preview 中移除 React Hook，这个出色的插件将无论你使用哪个框架都能大放异彩。

你能帮帮忙吗？🥺

-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! 🌟

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 指定的。

name	描述	类型	默认值
componentName	出现在 Panel 中的组件名称	`string?`	`Story 的名称`
importPath	点击 `Copy import path` 按钮时复制的组件路径。	`string?`	`""`
children	Story 组件中的 children	`string?`	`{{children}}`
停用	你不想使用 Permutation 功能的属性名称	`string[]`	`[]`
自动加载	加载 Story 时，你可以创建一个属性，使其无需任何点击即可自动激活。	`"all"` `string[]`	`[]`

关于参数 children 的更多信息

children 参数指的是当 children 作为参数传递给 Story 时，将在 Panel 的 CodeEditor 区域显示的 children 代码的形状。将 children 作为参数传递会在 Preview 中正确显示，但在 Panel 中，除非你传入一个单独的参数，否则 children 将显示为 {{children}}。当你希望在 Panel 中显示 children 的结构时使用此参数。

另请参见：如何在 Storybook 中将 children 用作 arg

示例

插件会自动使用你的组件类型，并在 Permutation Panel 中可用。

// 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"],
    },
  },
};

进阶

激活自动加载

当自动加载启用时，加载 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"],
    },
  },
};

如果同时允许自动加载和停用，则停用优先。

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

在显示时使用替代属性名称

你可以在排列组合表中使用不同的属性名称。

export const Primary: Story = {
  args: {
    primary: { control: "boolean", name: "primary Alt name" }, // now primary is displayed as 'primary Alt name'
  },
};

altnames

这是可选的。如果未指定 name 字段，排列组合表将显示组件的原始字段名称。

演示

演示页面

常见问题

我在 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>
    );
  },
];

查看为何这样可以工作

如果你遇到其他问题，请创建 issue 告知我们

许可证

MIT

赞助商

制作人

daim-dyl

兼容

React

标签

如何安装插件创建插件

排列组合

目录

功能

安装

要求

对于使用低于 React 19 的用户

对于使用 SB 7.x 及以下版本的用户

为什么我应该使用它？

使用方法

示例

进阶

激活自动加载

在显示时使用替代属性名称

演示

常见问题

许可证

赞助商