Storybook 擴充功能 Highlight

Storybook 擴充功能允許您在您的故事中醒目提示特定的 DOM 節點。

使用它來吸引對故事中特定部分的注意。或者使用它來增強您可能正在建構的其他擴充功能。例如，無障礙擴充功能使用它來醒目提示未通過無障礙檢查的 DOM 節點。

用法

此擴充功能需要 Storybook 6.5 或更高版本。Highlight 是基本功能的一部分，因此預設安裝在所有新的 Storybook 中。如果您需要將它新增至您的 Storybook，您可以執行以下命令

yarn

yarn add --dev @storybook/addon-highlight

npm

npm install @storybook/addon-highlight --save-dev

pnpm

pnpm add --save-dev @storybook/addon-highlight

將 "@storybook/addon-highlight" 新增至您的 .storybook/main.js|ts 中的 addons 陣列

// .storybook/main.ts
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';

const config: StorybookConfig = {
  addons: ['@storybook/addon-highlight'],
};

export default config;

醒目提示 DOM 元素

透過從故事或擴充功能內發出 HIGHLIGHT 事件來醒目提示 DOM 節點。事件酬載必須包含一個 elements 屬性，該屬性被指派為一個選擇器陣列，該陣列與您要醒目提示的元素匹配。

// MyComponent.stories.ts
import type { Meta, StoryObj } from '@storybook/react';
import { useChannel } from '@storybook/preview-api';
import { HIGHLIGHT } from '@storybook/addon-highlight';
import { MyComponent } from './MyComponent';

const meta: Meta<typeof MyComponent> = {
  component: MyComponent,
};

export default meta;
type Story = StoryObj<typeof MyComponent>;

export const Highlighted: Story = {
  decorators: [
    (storyFn) => {
      const emit = useChannel({});
      emit(HIGHLIGHT, {
        elements: ['.title', '.subtitle'],
      });
      return storyFn();
    },
  ],
};

重設醒目提示的元素

當故事變更時，醒目提示會自動清除。您也可以透過發出 RESET_HIGHLIGHT 事件來手動清除它們。

// MyComponent.stories.ts|tsx
import type { Meta, StoryObj } from '@storybook/react';
import { useChannel } from '@storybook/preview-api';
import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
import { MyComponent } from './MyComponent';

const meta: Meta<typeof MyComponent> = {
  component: MyComponent,
};

export default meta;
type Story = StoryObj<typeof MyComponent>;

export const ResetHighlight: Story = {
  decorators: [
    (storyFn) => {
      const emit = useChannel({});
      emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements
      emit(HIGHLIGHT, {
        elements: ['header', 'section', 'footer'],
      });
      return storyFn();
    },
  ],
};

自訂樣式

擴充功能會將標準樣式套用至您為故事啟用的醒目提示元素。但是，您可以透過擴展酬載物件並提供 color 和/或 style 屬性來啟用您的自訂樣式。例如

// MyComponent.stories.ts
import type { Meta, StoryObj } from '@storybook/react';
import { useChannel } from '@storybook/preview-api';
import { HIGHLIGHT } from '@storybook/addon-highlight';
import { MyComponent } from './MyComponent';

const meta: Meta<typeof MyComponent> = {
  component: MyComponent,
};

export default meta;
type Story = StoryObj<typeof MyComponent>;

export const StyledHighlight: Story = {
  decorators: [
    (storyFn) => {
      const emit = useChannel({});
      emit(HIGHLIGHT, {
        elements: ['.title', '.subtitle'],
        color: 'red',
        style: 'solid', // 'dotted' | 'dashed' | 'solid' | 'double'
      });
      return storyFn();
    },
  ],
};