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