Create and publish a React UI component library with Storyboard

Hi again, in this post I will give step-by-step instructions to create a UI component library from scratch and publish it using Storybook, inspired by different tutorials.

What is Storybook? it's a graphical workshop for building UI components. Especially it displays your components in a web-site, including the documentation and code examples.

The different steps are:

1. Creation of a React app with Vite

2. Configure the app with Tailwind (this step is not mandatory)

3. Install Storybook

4. Publish the Storybook website as a GitHub Page

Note that I have been using MacOS but the instructions should also work under another Operating Systems.

Resources:

• GitHub repository with source code and script to publish

• Published Storybook on GitHub pages

1. Creation of a React app with Vite

Meanwhile "Create React App" has been deprecated that's why I use "Vite", which is much convenient and performant. A basic app gets created with these commands:

npx create-vite design-library --template react
cd design-library
npm install

Executing npm run dev it looks like this:

2. Configure the app with Tailwind

This step is not essential but Tailwind is a popular CSS framework. It gets installed and initialized as follows:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

Check the content of the file "postcss.config.js": (no change needed - it is all about the configuration of plugins)

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Edit "tailwind.config.js" to define the content's mask:

export default {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Import Tailwind from your component's CSS file:

/* styles/index.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

And use a Tailwind class in your component:

<p class='font-mono'>This is an example with font mono</p>

It will be rendered like this:

To finish this step I have imported a component TreeMenuList to the repo and referenced Tailwind as well.

For more information how to use Tailwind, please look at this tutorial.

3. Install Storybook

Execute following command to install Storybook:

npx storybook@latest init

As a result, a folder "src/stories" is created with some examples of stories, 2 scrips "storybook" and "build-storybooks" are added to package.json.

Then you can start storybook locally:

npm run storybook

Hints about Storybook:

• Each Storybook page is described in a ".stories.jsx" file.

• Storybook will use the help comments in the components, including comments of the PropTypes declarations

• In our case we needed to implement the TreeMenuList story in JSX format (instead of JS), that's why we updated the file: ".storybook/main.js": stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],

• In our case we needed a State to synchronise the "selectedOption" with the "onChange" handler, this is done with a template.

• In case of error, take care to define the defaultProps properly, the

  error messages are not always comprehensive.

Result:

Note: in case of problem it may be good to check the « builder-vite »:

npm install @storybook/builder-vite @storybook/addon-essentials @storybook/react --save-dev

For more details, see also the following tutorial.

4. Publish the Storybook website as a GitHub Page

In this last step we intend to publish the generated storybook into GitHub pages.

First configure GitHub pages of your repository to use as source a GitHub Actions (instead of Deploy from a branch) like this:

Then create a file "./.github/workflows/deploy-storybook.yml" with the deployment actions.

Finally the GitHub page will be published on each push.

For more details, see also the following tutorial.