Let's create an Angular Story book! 🎨
Hello, Am Udhay (OO-dhy)
Agenda
- Hello Storybook! 👋
- Setup Storybook 🔧
- Run Storybook 🏁
- Dive into Stories 🎨
- Storybook Addons 🧱
- Publish Storybook 🌎
- Discussion (Q/A) 🎙️
Hello Storybook! 👋
- Storybook is an open source tool for developing UI components in isolation for React, Vue, Angular, and more.
- It makes building stunning UIs organized and efficient.
- It helps to develop Style guide (Minimal version of Design systems).
- Build component in isolation.
- Create components without individual screens, backend data, or build business logic.
- Once you are satisfied with component design, ship it for screen development.
Hello Storybook! 👋 (Contd..)
- Document use cases as stories. For ex: Button component can have multiple use cases like Primary, Secondary and Tertiary, With icon, Without icon and more.
- Unit test individual component for better quality.
Trusted by:
Setup Storybook🔧
- Create new Angular project.
- Add Storybook to the Angular project just created.
# Create new Angular project
ng new storybook
.
.
.
# Add Storybook to the Angular project just created
npx -p @storybook/cli sb init --type angular
Setup Storybook🔧 (Contd..)
- Storbook added default configuration and stories.
- We are all set to begin with Storybook!
Run Storybook 🏁
Okay, it's time to run Storybook and see how it looks!
npm run storybook
Dive into Stories! 🤿
What is a Story?
🎨
A story captures the rendered state of a UI component. Developers write multiple stories per component that describe all the “interesting” states a component can support.
For ex: Button with multiple states like Active, Disabled etc.,
Create Image Component
🖼️
ng g c image
Let's create a simple Image component to play around different attributes of it in terms of Stories..
Create Image Component (Contd..)
🖼️
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-image',
templateUrl: './image.component.html',
styleUrls: ['./image.component.css'],
})
export class ImageComponent implements OnInit {
@Input()
imgSrc: string = '<UPDATE IMAGE URL>'; //Make sure you add your image URL
@Input()
altTxt?: string = 'Pondicherry French Hotel';
@Input()
figCaptionTxt?: string =
'The French Quarter or White Town area in Pondicherry is filled with elegant colonial mansions in the midst of tree-lined boulevards, named on French streets beginning with "rue", numerous parks and charming cafés.';
@Input()
imgOpacity?: number = 1;
constructor() {}
ngOnInit(): void {}
}
image.component.ts
Create Image Component (Contd..)
🖼️
<figure>
<img
[ngStyle]="{ opacity: imgOpacity }"
src="{{ imgSrc }}"
alt="{{ altTxt }}"
style="width: 100%;"
/>
<figcaption *ngIf="figCaptionTxt && figCaptionTxt.trim().length > 0">
{{ figCaptionTxt }}
</figcaption>
</figure>
image.component.html
figcaption {
background-color: #ddd;
color: #000;
font-style: italic;
padding: 5px;
text-align: center;
font-size: 18px;
}
image.component.css
Create Image Component (Contd..)
🖼️
Create Stories
📚
#Create an Image Stories TypeScript file
cd src/stories
touch Image.stories.ts
Let's create multiple stories to render Image component with caption, without caption, with full opacity and with half opacity..
Create Stories
📚
import { moduleMetadata } from '@storybook/angular';
import { CommonModule } from '@angular/common';
// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
import { Story, Meta } from '@storybook/angular/types-6-0';
import { ImageComponent } from '../app/image/image.component';
export default {
title: 'Example/Image Component',
component: ImageComponent,
} as Meta;
const Template: Story<ImageComponent> = (args: ImageComponent) => ({
component: ImageComponent,
props: args,
});
export const NoImageCaption = Template.bind({});
NoImageCaption.args = {
figCaptionTxt: '',
};
export const WithImageCaption = Template.bind({});
WithImageCaption.args = {
figCaptionTxt: 'The French Quarter or White Town area in Pondicherry is filled with elegant colonial mansions in the midst of tree-lined boulevards, named on French streets beginning with "rue", numerous parks and charming cafés.'
};
export const WithZeroOpacity = Template.bind({});
WithZeroOpacity.args = {
imgOpacity: 1
};
export const WithHalfOpacity = Template.bind({});
WithHalfOpacity.args = {
imgOpacity: 0.5
};
Storybook Addons
🧱
Storybook addons enable advanced functionality and unlock new workflows. Contributed by core maintainers and the amazing developer community.
Essentials
- Docs
- Controls
- Actions
- Viewport
- Backgrounds
- Toolbars & globals
Publish Storybook
🌎
Build static site and publish it to your favorite hosting service.
- GitHub pages
- GitLab pages
- Google Cloud Storage
- Firebase
- AWS S3
- Chromatic
#Build storybook static site
npm run build-storybook
.
.
cd storybook-static
#To run locally
lite-server
.
.
#Deploy to GitHub Pages
npm run deploy-storybook
Demo
Code -
Demo -
Checkout my previous