排列組合

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

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	description	type	default Value
componentName	顯示在 Panel 中的元件名稱	`string?`	`Story 名稱`
importPath	按下 `複製匯入路徑` 按鈕時複製的元件路徑。	`string?`	`""`
children	Story 元件中的 children	`string?`	`{{children}}`
deactivate	您不想使用排列組合功能的屬性名稱	`string[]`	`[]`
autoload	載入 Story 時，您可以建立一個屬性，該屬性將在沒有任何點擊的情況下自動啟用。	`"all"` `string[]`	`[]`

更多關於參數 children 的資訊

children 參數是指當 children 作為參數傳遞給 Story 時，將在 Panel 的 CodeEditor 區域中顯示的 children 程式碼形狀。將 children 作為參數傳遞會在 Preview 中正確顯示，但在 Panel 中，除非您傳遞單獨的參數，否則 children 將顯示為 {{children}}。當您想在 Panel 中顯示 children 的幾何形狀時，請使用此參數。

另請參閱：如何在 Storybook 中將 children 用作 arg

範例

擴充套件會自動使用您元件的類型，並使其在排列組合 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"],
    },
  },
};

進階

啟用 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>
    );
  },
];

檢查為什麼這樣做

如果您遇到其他問題，請建立 issue 讓我們知道

授權

MIT

贊助商

由

daim-dyl

與

React

標籤

如何安裝擴充套件建立擴充套件

排列組合

目錄

功能

安裝

要求

對於 SB 7.x 以下的使用者

我為什麼應該使用它？

用法

範例

進階

啟用 autoload

演示

常見問題

授權

贊助商