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

Useful links

ngThanks!

Let's create an Angular Storybook! ๐ŸŽจ

By Udhayakumar G

Let's create an Angular Storybook! ๐ŸŽจ

This is my recent talk for Angular Online Meetup on "Let's create an Angular Storybook! ๐ŸŽจ". Reach me @askudhay on Twitter. Happy learning! Thanks.

  • 8,047