Storybook 擴充套件 Drupal SCSS 主題

Storybook 擴充套件，用於顯示主題並使用具凝聚力的生態系統來取得全域主題值。此擴充套件會將其他主題樣式表放在 Storybook 的 head 中，並在切換元件或變更主題時移除。

安裝

從您的儲存庫根目錄

yarn add -D @square360/drupal-scss-addon

開始使用

首先啟用擴充套件。將其加入 .storybook/main.js 中的 addons。

// .storybook/main.js
module.exports = {
  // ...
  addons: [
    // ...
    '@square360/drupal-scss-addon',
  ],
  // ...
};

然後，在 .storybook/preview.js 中設定 supportedThemes 和 selectedTheme 參數。

supportedThemes 是一個物件，其中的鍵是下拉式選單的 ID，而值是將在 Storybook 預覽工具列的下拉式選單中顯示的主題名稱。

// .storybook/preview.js
export const parameters = {
  // ...
  selectedTheme: "primary",
  supportedThemes: {
    primary: "Primary",
    secondary: "Secondary"
  },
  // ...
};

啟動 Storybook

yarn storybook

在 Stories 中的用法

目前選取的主題在全域 selectedTheme 中可用，您可以在 MyComponent.stories.js 中存取它。例如

const Template = (args, { globals: { selectedTheme } }) => {
  console.log("Template selectedTheme:", selectedTheme);

  return <Button {...args} selectedTheme={selectedTheme} />;
};

與 CSS 搭配使用

還有另一種使用此擴充套件的方式。您只需在全域的 .storybook/main.js 中啟用 ../dist/ staticDir。

module.exports = {
  stories: [
    '../src/**/*.stories.@(js|ts)',
  ],
  addons: [
    '@storybook/addon-a11y',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@square360/drupal-scss-addon',
  ],
  staticDirs: [
    '../dist/', // this one
    './fontawesome'
  ],
};

現在您的目錄結構應該如下所示

/{component-name}
  {component-name}.stories.js
  {component-name}.js
  {component-name}.scss
  {component-name}.twig
  {component-name}.yml
  /{theme-name}
    {component-name}.{theme-name}.js
    {component-name}.{theme-name}.scss
    {component-name}.{theme-name}.yml (optional)
    {component-name}.{theme-name}.twig (optional)

以上應該會在根目錄的 dist 資料夾內建立以下檔案

{component-name}/{component-name}.css
{component-name}/{component-name}.js
{component-name}/{theme-name}/{component-name}.{theme-name}.css
{component-name}/{theme-name}/{component-name}.{theme-name}.js

依照以上指示，擴充套件會根據載入的 Story 元件以及從下拉式選單中變更的主題來呼叫 css 檔案。