Udhayakumar G
Am a seasoned Full stack java developer, have close to 11 years experience in developing software systems (both frontend and backend). Love to share my knowledge with community. Happy coding!
Hello, Am Udhay (OO-dhy)
Trusted by:
# Create new Angular project
ng new storybook-ng-material
.
.
.
# Add Storybook to the Angular project
npx sb init
Okay, it's time to run Storybook and see how it looks!
npm run storybook
๐จ
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.,
๐ผ๏ธ
ng g c image
Let's create a simple Image component to play around different attributes of it in terms of Stories..
๐ผ๏ธ
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
๐ผ๏ธ
<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 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..
๐
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 enable advanced functionality and unlock new workflows. Contributed by core maintainers and the amazing developer community.
Essentials
๐
Build static site and publish it to your favorite hosting service.
#Build storybook static site
npm run build-storybook
.
.
cd storybook-static
#To run locally
lite-server
.
.
#Deploy to GitHub Pages
npm run deploy-storybook
Code -ย
Demo -ย
Checkout my previous
By Udhayakumar G
This is my recent talk for Angular Online Meetup on "Let's create an Angular Storybook! ๐จ". Reach me @askudhay on Twitter. Happy learning! Thanks.
Am a seasoned Full stack java developer, have close to 11 years experience in developing software systems (both frontend and backend). Love to share my knowledge with community. Happy coding!