PrimeNG and Storybook Integration

[DionJoubert]

Hi everyone,

I'm working on building a style guide/design system for my project using PrimeNG components. I'm interested in using Storybook to showcase and document these components, similar to the well-structured Brainly style guide https://github.com/brainly (https://styleguide.brainly.com/).

Has anyone had experience using PrimeNG components within Storybook? Any tips or resources on how to achieve a similar setup like Brainly's would be greatly appreciated!

Thanks in advance!

[SoyDiego]

Maybe @kyjus25 can help here!

[alfredoperez]

I was trying to setup PrimeNG 18, and I am not able to see the theme. All the components are rendering without style.

Does anyone know how to set it up?

I tried this

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;

Also this

const preview: Preview = {
  decorators: [
    applicationConfig({
      providers: [
        provideAnimations(),
        providePrimeNG({
          theme: Aura,
        }),