LAB.md

💻 Lab 10 - Generate Storybook stories for the shared ui component

⏰ Estimated time: 10-15 minutes

Let's explore some more Nx plugins by generating and running a storybook configuration for our shared store header.

📚 Learning outcomes:

• Explore other Nx plugins to create a storybook configuration
  
  
  

📲 After this workshop, you should have:

App Screenshot

No change in how the app looks!

File structure

🏋️‍♀️ Steps:

1. Install @nx/storybook
   
   

2. Use the @nx/angular:storybook-configuration generator to generate a storybook configuration for the store-ui-shared project

   ⚠️ Answer YES to all questions
   
   

3. Inside libs/store/ui-shared/src/lib/header/header.component.stories.ts:

   • Import the MatToolbarModule
   🐳 Hint

   //IMPORT TOOLBAR MODULE
   import { MatToolbarModule } from '@angular/material/toolbar';
   
   //......
   export default {
     title: 'HeaderComponent',
     component: HeaderComponent,
     decorators: [
       moduleMetadata({
         imports: [MatToolbarModule], // <-- import the module
       }),
       //...
     ],
   } as Meta<HeaderComponent>;

   
   

4. Inside libs/store/ui-shared/project.json:

   • Add the Material stylesheet to the build-storybook target
   🐳 Hint

   "build-storybook": {
      "executor": "@storybook/angular:build-storybook",
      "outputs": ["{options.outputDir}"],
      "options": {
        "outputDir": "dist/storybook/store-ui-shared",
        "configDir": "libs/store/ui-shared/.storybook",
        "browserTarget": "store:build",
        "compodoc": false,
        "styles": [
          "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
        ]
      }
   }

   
   

5. Serve storybook!

   🐳 Hint

   nx storybook store-ui-shared

   
   

6. Start typing in different titles and see how they appear in the header

   
   
   

7. Inspect what changed from the last time you committed, then commit your changes
   
   

---

🎓If you get stuck, check out the solution

---

➡️ Next lab ➡️