Storybook for Angular
Easy way to build and document UI components isolated from the business logic
Storybook is a freely available resource that facilitates the creation and documentation of user interfaces isolated for React, Vue, Angular, and more. By using this tool we can make UI components that can run alongside our actual application.
Developers will be able to test the functionality and behavior of each component without running the entire application. Moreover it also provides the facility to do the documentation so that other users can view it and understand how it’s working and for what purpose it’s using.
Creating a storybook for an Angular application can be a great way to document and showcase your UI components. Storybook is a development environment and UI component explorer that allows you to build, test, and document your components in isolation.
Set up Storybook for Angular
To set up Storybook for an Angular project, you can follow these steps:
- Use a new Angular project or use an existing one
- Install the required dependencies by using the following command in your project’s root directory — npm install @storybook/angular — save-dev
- Once the installation is done, initialize our Storybook using the following command — npx sb init
- This command will set up the necessary configuration files and folder structure for Storybook
- Once the initialization is done, we can add stories for Angular components
What is story
Stories are individual pieces of UI that define different states of a component. Create a new file with a .stories.ts extension in the same directory as our component.
Suppose, if we have a component called StoryDemoComponent, create a file named storyDemo.stories.ts.
import { stories of } from @storybook/angular';
import { StoryDemoComponent} from './storyDemo.component';
storiesOf('storyDemo', module).add('Default', () => ({
component: StoryDemoComponent,
props: {
text: 'Click me',},}})
.add("Disabled', () => ({
component: StoryDemoComponent,
props: {
text: 'Disabled",
disabled: true,
},}));Use the following command to run Storybook locally — npm run storybook
While Storybook is active, any modifications applied to our component will be instantly reflected, enabling us to work on it independently, examine its functionality, and evaluate its visual design through the Canvas tab.
So first, let’s give our component some properties :
storyDemo.component.ts
export class storyDemoComponent {
@Input () color: 'primary' | 'secondary' = 'primary';
@Input () href: string;
@Input () target?: '_self' | '_blank' | '_parent' | '_top'
public get classes (): Array<string> {
return ['link', ${this.color}-link`];
}
}storyDemo.component.html
<a [ngclass]="classes" [href]="href" [target]="target">
<ng-content> </ng-content> </a>storyDemo.component.scss
.link {
text-decoration:
border-bottom:
none;
1px dotted;
@media screen and (min-width: 600px) {
font-size: 1.15em;
}
}
.primary-link {
color: #ff4785;
border-color: #ff4785;
}
.secondary-link {
color: #1ea7fd;
border-color: #1ea7fd;
}We need to update our story file as well.
storyDemo.stories.ts
const Template: Story<StoryDemoComponent>
component: Story Demo Component,
props: {
color: 'primary',
content: 'Visit Storybook',
href: 'https://storybook.js.org/',
target: '_blank',
},
template:
`<app-link [color]="color" [href]="href" [target]="target">
{{ content }} </app-link>`,
});Output
Documenting Component
Storybook offers support for .mdx files, enabling us to construct pages efficiently by leveraging the capabilities of both markdown and HTML elements.
Consequently, we can seamlessly integrate documentation into our component. To accomplish this, we’ll create a new file called storyDemo.stories.mdx, as illustrated below.
import { Meta } from '@storybook/addon-docs/blocks';
<Meta title="Components/Link/Documentation" />
<style>{`
#colors {
margin: 20px 0px;
}`
}</style>StoryBook Documentation
While Storybook already offers numerous advantages, the addition of the docs plugin further enhances its value. One of the key benefits of Storybook Docs is the ability to maintain component documentation in close proximity to the code, simplifying maintenance and updates as the project evolves. Developers can seamlessly incorporate documentation into Stories using markdown files.
About — StoryBook
This documentation encompasses various aspects of the component, including its description, intended behavior, recommended usage scenarios, props and their types, and even interactive examples showcasing the component’s functionality. Additionally, Storybook Docs supports global documentation, providing a centralized space to document guidelines and best practices for the entire component library.
The resulting perks are remarkable: a unified source of truth as all component-related information is stored and managed in a single location. The documentation is readily accessible through the published Storybook web app. Furthermore, Storybook’s editability is limited to developers, ensuring that any modifications to styling guidelines or a component’s appearance cannot be made without the developers’ awareness. All additions and changes must be deliberated by designers and developers, passing through the development team’s approval process before being incorporated into Storybook.
The following demonstrates the potential results we can achieve with it.
Complete source code of this storybook you can find in the following github repository — Source Code
References:
If you have reached this far, thank you for reading this blog, I hope you found it insightful 😃. Give us a follow for more content on technology, productivity, work habits, and more!
