Introduction of Storybook using Angular part I

In this blog, I will be walking you through a series of posts to create isolated UI components using storybooks. In this part, I’ll cover the storybook and start with the angular framework.

What is a Storybook?

Storybook is an environment for defining, developing, and testing UI components. Using storybooks, we can create isolated components that make development faster and allow you to work on one component at a time.

It’s open-source and free to use.

Storybook is an attractive choice for pragmatic teams. It provides a hot-reloading of the dev environment, complete with addons for testing, deploying previews, responsive UI, and more.

Getting started with Angular Storybook

Storybook for Angular is also a UI development environment for your Angular components. With a storybook, you create stories for your components. Each story shows the behavior for a single component with specific states set.

Installing Storybook

First, create an Angular project using these commands,

Angular CLI | Angular Project Setup
Step-1: Install angular cli :- npm install -- g @angular/cli.
Step-2: Create a new project by this command. Choose yes for routing option and, CSS or SCSS:- ng new myNewApp.
Step-3: Go to your project directory:- cd myNewApp.
Step-4: Run server and see your application in action:- ng serve

Next, use the Storybook CLI to install it in a single command

Please note that sb init is not made for empty projects,

npx sb init

Storybook will look into your project’s dependencies during its install process and provide you with the best configuration available.

The next command to run on the terminal is:

npm run storybook

After the installation completes, storybooks will start locally and output the address. It will open automatically with the address in a new browser tab, and a welcome screen greets you.

The storybook provides example components such as button, header, etc., for our reference on the welcome page. We can further create components referring to these existing components.

Folder Structure of /.storybook

A /.storybook folder is created at the root directory which contains all the configuration files for our global settings in the storybook. New addons can be added by adding an entry to the main.js file.

Create a .storybook/preview.js file to control the way stories are rendered and add global decorator and parameters. This file loads in the Canvas tab, and the “preview” iframe renders the components in isolation. Use preview.js for global code (such as CSS imports or JavaScript mocks) to all stories.

The preview.js file can be an ES module and export the following keys:

decorators – an array of global decorators
parameters – an object of global parameters
globalTypes – definition of global Type

It also adds a /stories folder, which gives us some examples of Storybook usage, providing components that were built and documented.

The ‘.mdx’ extension

MDX captures long-form Markdown documentation and stories in one file. You can also write pure documentation pages in MDX and add them to the Storybook alongside your stories.

Next, we will see the story and how to write it in a storybook with an example.

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. The CLI created example components that demonstrate the types of components you can build with Storybook: Button, Header, and Page.

Note: In the newly created component, we have to use a copy-paste method for creating a stories.ts file.

Example of a link button

First, create a button component in that story as a function. This function describes how to render the button component in the primary state and export a story called primary. Also, I will show you how we can enable and disable states in our story.

The Github code shown below shows the example of the “link button.”

linkButton.component.ts
import { Component, Input } from '@angular/core';
@Component({
  selector: 'text-link-button',
  template: ` <button
    type="button"
    [ngStyle]="{'color':textColor}"
    [ngClass]="classes"
  >
    
  </button>`,
  styleUrls: ['./linkButton.css'],
})
export default class ButtonComponent {
    @Input() label = 'Link Button ';
    @Input() textColor;
    @Input() disabled = true;
    public get classes(): string[] {
        const mode = this.disabled ? 'btn-disabled' : 'btn-link';
        return ['btn', mode];
      }
}

linkButton.stories.ts
import { Story, Meta } from '@storybook/angular';
import LinkButton from './linkButton.component';
export default {
  title: 'Example/LinkButton',
  component: LinkButton,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
} as Meta;
const Template: Story<LinkButton> = (args: LinkButton) => ({
  component: LinkButton,
  props: args,
});
export const linkButton = Template.bind({});
linkButton.args = {
  disabled: true,
  label: 'Link Button',
};
linkButton.css
.btn-disabled{
  cursor: not-allowed !important;
}

We will see the below output after running the project using the command: npm run storybook.

Advantages of a Storybook

Storybook provides easy access to all components in one place with documentation and design reference.
Storybook provides good collaboration between developers for large projects, ensuring consistent and quality code.
It is easier to test and debug isolated components on the storybook.
Easier to demo components to clients, get to know the actual working before adding it to the project.

Up until now, I have introduced the storybook concept and installation in this part 1. In part 2 of this series, I will post details about adding add-ons to the storybook and stories.