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}>;
}