Drupal Storybook 擴充套件

Storybook 中用於最佳實務 Drupal 整合擴充套件的函式庫

• 易於使用的 Drupal 整合
• 簡單的下拉式選單
• 可連結 URL 的狀態以便分享

請依照 Drupal 模組 CL Server 文件中的指示操作。

啟動 Storybook

啟動開發伺服器 Storybook 伺服器

yarn storybook

撰寫 YML 故事的提示

• 註解範例，其中包含撰寫故事的不同選項：https://gitlab.com/-/snippets/2556203
• 已關閉的問題，其中包含一些巧妙的提示：https://github.com/Lullabot/storybook-drupal-addon/issues/34

---

Storybook 擴充套件作者

身為擴充套件作者，您可以將此函式庫新增為依賴項目，並將下列程式碼新增至您的 src/manager.ts 和 src/preview.ts 檔案中

src/manager.ts

export * from '@lullabot/storybook-drupal-addon/manager';

src/preview.ts

import type { Renderer, ProjectAnnotations } from '@storybook/types';
import drupalPreview from '@lullabot/storybook-drupal-addon/preview';
import { withYourDrupalDecorator } from './withYourDecorator';

// @ts-ignore
const drupalDecorators = drupalPreview?.decorators || [];

const preview: ProjectAnnotations<Renderer> = {
    ...drupalPreview,
    decorators: [...drupalDecorators, withYourI18nDecorator],
}

export default preview;

目前選取的 Drupal 主題可在 drupalTheme 全域變數中使用，因此您可以使用下列程式碼片段在裝飾器中存取它

import { MyProvider } from 'your-drupal-library';
import { useGlobals } from '@storybook/manager-api';

const myDecorator = (story, context) => {
  const [{drupalTheme}] = useGlobals();
  
  return <MyProvider drupalTheme={drupalTheme}>;
}