Writing your first React UI Library - Part 2: Storybook

#react #javascript #node

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.

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

After this you should see your folder structure like this:

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

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

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:

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

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

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!!!🎉🎉🎉

npm run storybook

The display

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

# 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

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.

  "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

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.