Storybook

[00:00 - 00:05] It's the time to add storybook to our application. I will reuse Monorepo from previous lesson.

[00:06 - 00:21] So to add storybook to your Monorepo, first of all, let's install necessary dependencies. So, yarn adds -d and add nx/storybook.

[00:22 - 00:41] So now, similar to our applications and libraries, we need to generate a story book configuration. So yarn nx generates add nx/storybook configuration.

[00:42 - 00:58] In the first step, the interactive process will ask you for which projects you want to generate storybook configuration. And project means applications, libraries, so we can have even multiple story books for multiple applications you keep in the same Monorepo.

[00:59 - 01:10] I'm going to generate it for my main app, so Angular app. In the next step, you can just, if you're going to use interaction tests from storybook or in add, I'm not going to do this so now.

[01:11 - 01:20] And now you have to choose which storybook frameworks you need to use. So it doesn't know if the app is Angular app, React app or something else.

[01:21 - 01:26] Of course, I'm going to choose Angular here. After some time, everything is installed.

[01:27 - 01:32] So let's run the storybook for our application. To do this, you need to execute comment.

[01:33 - 01:46] Yarn nx run and then name of your application. So my application was Angular app storybook.

[01:47 - 01:53] And basically, that's it. That's everything you need to know about running storybook for your application .

[01:54 - 02:00] So let's check how it looks like. After the compilation process, our storybook looks like this.

[02:01 - 02:10] So we don't have any story, so your storybook is empty, possible reasons and so on. So we need to create a simple story just to check how it works.

[02:11 - 02:15] To create a simple story, I'm opening my Monorepo. I'm going to apps.

[02:16 - 02:20] I have my Angular app here. Let's check what is inside a Cersei app.

[02:21 - 02:26] And we have our nx welcome component. Let's create a simple storybook story for this component.

[02:27 - 02:35] So I need to create a new file. I'm going to call it nx welcome component.stories.ts.

[02:36 - 02:43] So here we have our empty stories file. So let's export by default a simple object.

[02:44 - 02:58] Maybe let's try to type it just to make everything works. So as meta from storybook angular and we want it for our nx welcome component.

[02:59 - 03:09] So the title here will be nx welcome component. Let's use the same here and we need to set up the component here.

[03:10 - 03:21] It's very simple. And the last part here is to export counts component.

[03:22 - 03:37] So let's try to do this. And then there should be render function here inside and we will have arcs that are type of our component.

[03:38 - 03:48] And then let's return props as our arcs. It is a very simple story.

[03:49 - 03:54] You can follow instructions from storybook documentation. I'm not going to cover everything about it.

[03:55 - 03:59] So let's check how it works. And as you can see, everything works fine.