在 Storybook 中展示 PrimeNG 组件：有人做过吗？ （风格指南灵感）

Question

我正在使用 PrimeNG 组件为我的 Angular 项目构建风格指南/设计系统。我想利用 Storybook 有效地隔离、记录和展示这些组件。

为了获得灵感，我希望实现类似于组织良好的 Brainly 风格指南的结构：https://github.com/brainly (https://styleguide.brainly.com/)。

有人成功将 PrimeNG 组件集成到 Storybook 中吗？是否需要任何特定配置来确保组件的正确渲染？

我以前没有使用过 Storybook，但我让 Angular、PrimeNg 和 Storybook 在一个示例项目中一起工作。我能够为按钮 PrimeNG 组件创建一个故事文件 (button.stories.ts)。我非常担心，我可能必须以故事的形式编写代码，而不是简单地导入 PrimeNg 控件（并生成故事）。这就是为什么我想找出答案：

• 将 PrimeNg 与 Storybook 集成的最佳方法是什么？
• 是否需要任何特定的配置或解决方法来确保在 Storybook 中正确渲染 PrimeNG 组件？
• 您能给我指出任何有效展示这种集成的资源或示例吗？

任何有关实现此设置或克服潜在挑战的提示或资源将不胜感激！

Answer 1

PrimeNG (<= 17)

对于 PrimeNG 版本 17 及之前版本，请执行以下操作：

1. 创建包含以下内容的样式表（例如，

   style.css

   ）：

   @import 'primeng/resources/themes/lara-light-blue/theme.css';
   @import 'primeng/resources/primeng.css';
   

2. 然后将此文件添加到您的

   angular.json

   中的 Storybook 生成器中：

   "styles": ["[PATH_TO_THE_FILE]/styles.css"],
   

PrimeNG (>= 18)

PrimeNG 版本 18 的设置完全改变了。您需要按照文档中的描述通过 Angular 的 DI 注入

PrimeNGConfig

。

1. 在故事书配置文件夹中创建预览文件（如果尚不存在）(

   .storybook/preview.ts

   )。
2. 在此文件中，您可以添加每个故事中可用的提供程序。一个典型的用例是在此处启用动画（

   provideAnimations()

   ），这也是 PrimeNG 所必需的。对于 PrimeNG 设置本身，我们可以使用

   APP_INITIALIZER

   将在应用程序引导期间运行的工厂提供程序。提供程序 (

   PrimeNGConfig

   ) 的依赖项将被注入并传递给工厂函数，然后我们可以在其中设置 PrimeNG。

import { APP_INITIALIZER } from '@angular/core';
import { provideAnimations } from '@angular/platform-browser/animations';
import { applicationConfig, Preview } from '@storybook/angular';
import { PrimeNGConfig } from 'primeng/api';
import { Aura } from 'primeng/themes/aura';

function provideTheme(config: PrimeNGConfig) {
  return () => {
    config.theme.set({
      preset: Aura,
    });
  };
}

const preview: Preview = {
  decorators: [
    applicationConfig({
      providers: [
        provideAnimations(),
        {
          provide: APP_INITIALIZER,
          useFactory: provideTheme,
          deps: [PrimeNGConfig],
          multi: true,
        },
      ],
    }),
  ],
};

export default preview;