Writing your first React UI Library - Part 2: Storybook
Tags: react, javascript, node
Published: 2020-06-16 20:53:31

![Storybook](https://res.cloudinary.com/carlosdev/image/upload/v1591847018/react-lerna-css/storybook_sfrxkq.png)

This is the second post on a series on how to make your own UI React Library.

## What are we going to do?

- Add storybook support for our project.
- Add a couple of stories using our components.
- Wire up some task for static documentation generation and pushing it to GitHub pages as a demo.

## Storybook

Storybook is a great tool to document and test our react components, it's super easy to get started and it can serve as a kitchen sink to experiment with our components.

We are going to run the storybook cli to get the project started using `--type react` since our library is made in React.

```sh
npx -p @storybook/cli sb init --type react
```

After this you should see your folder structure like this:
![storybook folder structure](https://res.cloudinary.com/carlosdev/image/upload/v1590728653/react-lerna-css/storybook_c9onej.png)

We are going to co-locate the stories along with the components, let's get rid of that `stories` folder.

```sh
rm -rf stories/
```

Now let's open `.storybook/main.js` and edit the pattern matches `stories` so **Storybook** can look for stories within our packages.

`.storybook/main.js`

```js
module.exports = {
  stories: ['../packages/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
};
```

### Writing our first story

Let's write our first story for `phoenix-button`!

I recommend you create a `docs` folder so you can collocate any related documentation for the component.

Create a file `phoenix-button.stories.js` inside `docs` as shown in the picture below:
![button story folder structure](https://res.cloudinary.com/carlosdev/image/upload/v1590728958/react-lerna-css/button-stories_nh50fu.png)

`phoenix-button/docs/phoenix-button.stories.js`

```jsx
import React from 'react';
// We want to always get from source
import { Button } from '../lib/phoenix-button';

export default { title: 'Button' };

export const primary = () => <Button>Hello Button</Button>;
```
Let's do the same for `phoenix-text`

`phoenix-text/docs/phoenix-text.stories.js`

```jsx
import React from 'react';
// We want to always get from source
import { Text } from '../lib/phoenix-text';

export default { title: 'Text' };

export const small = () => <Text>Hello Text</Text>;
```

After this run your storybook and you should see your two components rendered on storybook!!!🎉🎉🎉

```sh
npm run storybook
```

The display

![rendered storybook](https://res.cloudinary.com/carlosdev/image/upload/v1591848013/react-lerna-css/work_gpz488.png)

![It ain't much work but it's honest](https://media1.tenor.com/images/86f2936e3b4e83969d4096dc3a2635b2/tenor.gif)

## Making a demo site in Github

We want to have a demo site for our testing and also to share with our clients, fortunately Github has a feature called `Github pages` which can help us with this.

If you already started this tutorial from a fresh repository in your GitHub you can skip the next few paragraphs, but if you didn't...

Follow this guide to create a new repository in http://github.com

https://help.github.com/en/github/getting-started-with-github/create-a-repo

```sh
# Let's initialize the repo
git init
# Add the remote pointing to your origin
git remote add origin <your-origin>
# create a gitignore to untrack the node_modules
echo "node_modules" > .gitignore
# add all files
git add .
# commit
git commit -m "feat: add initial structure for UI Library"
# push
git push -u origin master
```

### gh-pages to the rescue

To push our site to `Github Pages` we are going to use a small npm module called `gh-pages`.

https://www.npmjs.com/package/gh-pages

Let's install it in our project

```sh
npm i --save-dev gh-pages
```

Now we need to create a script to do this; We are going to name it `deploy`.

`deploy` should build storybook first and then run `gh-pages` over the folder created; By default storybook creates a `storybook-static` folder when built which we can use.

```json
  "scripts": {
    "build": "lerna run build",
    "test": "echo \"Error: no test specified\" && exit 1",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "deploy": "npm run build-storybook && gh-pages -d storybook-static"
  },
```

After this once you run

```sh
npm run deploy
```

This should build storybook and push it to gh-pages. In your repository settings in Github you can find the url to the demo site that looks like this:

https://davixyz.github.io/phoenix-part2

## Conclusion

We bootstrapped our documentation/kitchen sink site to test our react components; Storybook makes it very easy to get started; We can see our documentation locally but we also want to share it with our external clients so for that we created a mechanism to deploy the static build of storybook.

## Resources

Code: https://github.com/davixyz/phoenix/tree/part2
Github: https://github.com/davixyz
Twitter: https://twitter.com/carloscastrodev