Scaling a UI Delivery with Storybook-Part 2

In the past article, I went through a brief introduction of the features of the Storybook, now I will demonstrate some advanced concepts, thing you will use in a real project.

The Dependency Injection

The moduleMetadata is a great feature in the Storybook, with it we can add the services and modules we need to render the stories.

It is the principle we have in TestBed to testing component. Just inject the strictly necessary dependencies. So it’s possible to inject the real service and a fake.

We have here some information:

• app-foobar, from application;
• mat-icon, from material;
• FoobarService;
• ComplexService, and we wil mock this one;

We injected the dependencies needed to render the component:

• Imports -> MatIconModule to satisfy the mat-icon dependency;
• Declarations ->SomeComponent, and FoobarComponent to render app-some;
• Provides -> FoobarService and fake ComplexService;

Capturing Component Output Events

The last thing to make our story real, in a real project, is capturing the events from the components.

In the same principle as Input, the we send to the component we can get de events from Output.

By default we have installed some Storybook addons, you can check in demo stories. There we have the Notes, Links, and the amazing Action!

The Action allows us to get the events from a defined component Ouput and and print it in Action Logger tab.

The Button component have a Output called onClick and emits an event. This event is captured and its value is logged in the Action Logger tab.

You may find this Storybook screen strange. It’s already fueled by several Addons that help us with the productivity and organization of our showroom components.

The action demonstration gif is from a project I did to demonstrate some Storybook features. There you can check how they are configured in addition to the demonstration of operation. You can see it on my Github!

If you have not read the first article, it is very important, as I explain some concepts and talk about configuration and installation.