DEV Community 👩‍💻👨‍💻

Carlos Castro
Carlos Castro

Posted on • Updated on

Writing your first React UI Library - Part 2: Storybook

Storybook

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
Enter fullscreen mode Exit fullscreen mode

After this you should see your folder structure like this:
storybook folder structure

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

rm -rf stories/
Enter fullscreen mode Exit fullscreen mode

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'],
};
Enter fullscreen mode Exit fullscreen mode

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

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>;
Enter fullscreen mode Exit fullscreen mode

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>;
Enter fullscreen mode Exit fullscreen mode

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

npm run storybook
Enter fullscreen mode Exit fullscreen mode

The display

rendered storybook

It ain't much work but it's honest

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
  },
Enter fullscreen mode Exit fullscreen mode

After this once you run

npm run deploy
Enter fullscreen mode Exit fullscreen mode

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

Top comments (3)

Collapse
 
vladstart1 profile image
Vladyslav Beltsar

Also for those who will use storybook >=6 v., you should add react and react-dom as dev dependency to being able to setup storybook

Collapse
 
ilhamsa1 profile image
ilhamsa1 • Edited on

Thanks

lerna add react-dom --dev --scope '{@cddev/phoenix-button,@cddev/phoenix-text}'

Collapse
 
eliransu profile image
Eliran Suisa

thanks!

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.