update for app1 stories

apps/app1/project.json

@@ -86,6 +86,7 @@
       "executor": "@nrwl/storybook:storybook",
       "options": {
         "uiFramework": "@storybook/angular",
+        "styles": ["apps/app1/src/styles.css"],
         "port": 4400,
         "config": {
           "configFolder": "apps/app1/.storybook"
@@ -103,6 +104,7 @@
       "outputs": ["{options.outputPath}"],
       "options": {
         "uiFramework": "@storybook/angular",
+        "styles": ["apps/app1/src/styles.css"],
         "outputPath": "dist/storybook/app1",
         "config": {
           "configFolder": "apps/app1/.storybook"

apps/app1/src/app/app.component.html

@@ -1,8 +1,8 @@
 <div class="font-mono">
-  <angular-tailwind-nx-header></angular-tailwind-nx-header>
+  <angular-tailwind-nx-header>{{title}}</angular-tailwind-nx-header>
 
   <main
-    class="max-w-xl md:max-w-2xl lg:max-w-6xl mx-auto py-xl px-md md:px-xl grid grid-cols-1 gap-md md:grid-cols-2 lg:grid-cols-3"
+    class="max-w-xl md:max-w-2xl lg:max-w-6xl mx-auto py-xl px-md md:px-xl grid grid-cols-1 gap-md md:grid-cols-2 lg:grid-cols-4"
   >
     <angular-tailwind-nx-card title="Angular" url="https://angular.io/">
       Angular is an application design framework and development platform for
@@ -22,5 +22,10 @@
       Nx is a smart, fast and extensible build system with first class monorepo
       support and powerful integrations.
     </angular-tailwind-nx-card>
+
+    <angular-tailwind-nx-card title="Storybook" url="https://storybook.js.org/">
+      Storybook is an open source tool for building UI components and pages in
+      isolation. It streamlines UI development, testing, and documentation.
+    </angular-tailwind-nx-card>
   </main>
 </div>

apps/app1/src/app/app.component.stories.ts

@@ -1,3 +1,5 @@
+import { Lib1Module } from '@angular-tailwind-nx/lib1';
+import { Lib2Module } from '@angular-tailwind-nx/lib2';
 import { moduleMetadata, Story, Meta } from '@storybook/angular';
 import { AppComponent } from './app.component';
 
@@ -6,7 +8,8 @@ export default {
   component: AppComponent,
   decorators: [
     moduleMetadata({
-      imports: [],
+      declarations: [AppComponent],
+      imports: [Lib1Module, Lib2Module],
     })
   ],
 } as Meta<AppComponent>;
@@ -18,4 +21,5 @@ const Template: Story<AppComponent> = (args: AppComponent) => ({
 
 export const Primary = Template.bind({});
 Primary.args = {
+  title: 'Lorem + Ipsum + Dolor + Sit'
 }

apps/app1/src/app/app.component.ts

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
-  title = 'app1';
+  title = 'Angular + Tailwind CSS + Nx + Storybook';
 }

apps/app1/src/app/app.module.ts

@@ -1,12 +1,11 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent } from './app.component';
-import { NxWelcomeComponent } from './nx-welcome.component';
 import { Lib1Module } from '@angular-tailwind-nx/lib1';
 import { Lib2Module } from '@angular-tailwind-nx/lib2';
 
 @NgModule({
-  declarations: [AppComponent, NxWelcomeComponent],
+  declarations: [AppComponent],
   imports: [BrowserModule, Lib1Module, Lib2Module],
   providers: [],
   bootstrap: [AppComponent],