Documenting Components with Storybook

[00:00:00]
>> We are gonna be documenting with Storybook. I had shown in the interest slides a couple of different tools that you can use, and I'll show them again at the end. Storybook is one tool you can use to document your components to show code, to add different features for testing.

[00:00:15]
And this is really, really great for a style guide. So this is what we're gonna use. So first, let's install Storybook and we can do this with npx. I'll make this a little bit bigger here. Okay, let me clear this. This is just a mess. Okay, npx- p @storybook/cli sb init.

[00:00:41]
If you go to their website, you can go see this command. It's also in the notes. What this is going to do is it's going to do all the configuration for you. This will set up a new directory called stories. It'll have two default stories in there for you.

[00:00:57]
It's even going to ulterior package.json for these commands. So it'll set up the build, it'll set up the dev server, it'll do all of it for you. So it will create a stories folder, and why does it create a stories folder? It doesn't know the architecture of your project.

[00:01:13]
And so it throws it all in the stories folder, but when you're developing these stories, you should put them with the components. So everything is kind of like right next to each other. Storybook actually works with other frameworks and libraries that are not just React. So you can see it said detecting project type and detecting all that stuff.

[00:01:29]
And you can use it with Vue and probably Angular two, it supports a bunch of things. So we can see our stories folder has been created here. We've got two different stories, a welcome story and a button story. We're actually not gonna use any of this, I don't really wanna go over it just cuz some of the notation is a little bit old.

[00:01:49]
So I would actually prefer not to go into that. We're actually just gonna delete that once Storybook has done installing. They're gonna be refactoring this new version of storybook to be using, I think a new version of Chromium is what they said. I forget exactly what they're changing.

[00:02:04]
But it doesn't really make sense to talk about notation that is potentially going to be changing.
>> A question.
>> Yeah.
>> Who is your target audience for Storybook? Is it more development or more product or a combination of both?
>> Both, so the default Storybook is gonna show code snippets.

[00:02:22]
You're gonna be able to test different states of your components. But what we're gonna do right now is gonna documentation, so you can actually use this to generate nice documentation where any developer can go and see what properties each component needs. Where any stakeholders like PMs or what not can go in and read your documentation.

[00:02:40]
So depending upon how you configure it, it can be for everyone. Ideally, what you would be able to do is create a fully fledged design system website style guide like IBM Carbon has done, like Material Design has done, right? Ideally, you could go build this on your own.

[00:02:58]
I think they're actually using Gatsby, I could be mistaken. Gatsby is a great tool for building static site generators. But ideally, a lot of teams building design systems do not have the time to do this. And so that's where Story about can really help us to save a lot of time and development effort on that.

[00:03:15]
Storybook has installed, okay. Once your Storybook is done creating, you can see again that we have the stories folder. And Storybook doesn't know the architecture of your project, so again, it's gonna generate the stories folder. If we go into our package.json, let's open this for a second. One of the things Storybook does is actually generate two different scripts for you here.

[00:03:39]
So we have storybook, we have build-storybook. We will build Storybook at the end of this section just so we can deploy it. But let's run our Storybook server. So, let's run npm run storybook. The other thing Storybook will generate for you, if you go up to the top, you'll see this .storybook folder.

[00:03:57]
It has one file in it I know, main. And anytime we use an addon, which we're gonna do in just a second, we have to add it to this array. So you should just have a storybook folder at the top level with a file in it called main and you should have a stories directory here.

[00:04:15]
When you open your Storybook, when you start your development server, it should look pretty simple. So we've got our welcome story which you can see here in Welcome.stories.js. And we have a button story that just has a button in it and an emoji, okay? We're gonna delete these, so go ahead and delete your entire stories directory.

[00:04:37]
We wanna actually create stories right next the components.