Should I Utilize Storybook as a Library and Configure Global Styles and Assets from the Apps Folder?

[jon9090]

I'm currently set up with an Angular application using Nx. Within this setup, my application consists solely of the app component, which contains a router outlet. All code, including components, services, and shared UI components, resides within the libs folder under each package.

Furthermore, I have global styles and assets located in the application folder, distinct from the libs. Now, I'm looking to integrate Storybook into my project to detect all Storybook files within the libs folder. Naturally, I'll need to incorporate the global styles into the Storybook configuration.

My question is: Should I employ Storybook as a library? If so, is it acceptable to configure the global styles and assets from the apps folder?

Here's a rough representation of my current architectural structure:

apps/
    ng-app/
        styles/
        assets/
        app.component.ts
libs/
    lib1/
    ui/
        select/
        input/

Do you suggest any alternative architectural structures?

[jaysoo]

It sounds like Storybook stories are part of the UI library, so in that case it is fine to add it directly to the libs/ui project using the @nx/angular:storybook-configuration generator. As for the shared CSS, if possible I'd move it to a shared lib, and you can use stylePreprocessorOption in ng-app to include the stylesheet from the library. https://angular.io/guide/workspace-config#styles-and-scripts-configuration