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. yarn add @nrwl/storybook
   
   

2. Use the @nrwl/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
   • Import the Angular Material Theme
   🐳 Hint

   //IMPORT TOOLBAR MODULE
   import { MatToolbarModule } from '@angular/material/toolbar';
   
   //IMPORT THEME
   import '@angular/material/prebuilt-themes/deeppurple-amber.css';
   
   //......
   
   export const primary = () => ({
     moduleMetadata: {
       imports: [MatToolbarModule] // <-- import the module
     }
     //...
   });

   
   

4. Serve storybook!

   🐳 Hint

   nx storybook store-ui-shared

   
   

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

   
   
   

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

---

🎓If you get stuck, check out the solution

---

➡️ Next lab ➡️