“This is the 15th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Hello, everyone, I am quick frozen fish 🐟, a river front 💦, like the colorful 💐, continuous sand sculpture 🌲, is the good brother of the cold grass of the next door. Welcome to add my wechat: Sudongyuer pull you into the group, discuss together, look forward to growing together with you 🥂.

Read this article 📖

1. You will learn how to build and launch a component library in super fast 0-1 🦑

2. What will you learn about storybook🦧

3. You will learn how to build a component library using storybook 🦓

4. You will learn how to deploy our component library using Diagnostics 🦩

3. You will learn how to use GitHub Action to complete CI operations 🐇

GitHub repository address:taskbox

Component library online address:taskbox

Preface 🌵

Why to build front-end component library, more is to extract business components, reuse, but often the reality is cruel, a good component library is very large and difficult, but through this article we can still from development to online to complete a simple component library, let you understand the whole process

What is a StoryBook 🐇

Storybook is a development environment for UI components. It allows you to browse the component libraries and see the different states of each component and interactively develop and test components. It’s very simple and fast, and many companies use it, and you can develop component libraries with different technology stacks, which is very convenient and has a mature CIDI solution

In my words, Storybook is a powerful component development environment that allows you to focus on writing components without having to worry about documentation. Anyone who wants to experiment, or try component development, can do it very cheaply and quickly.

Storybook provides a sandbox to build the UI independently, so you can develop hard-to-reach states and edge cases.

Powerful CIDI

Development procedure ~ ⭐

Initialize the Storybook(Rect component library for example)☄️

# Create our application:
npx create-react-app taskbox

cd taskbox

# Add Storybook:
npx -p @storybook/cli sb init
Copy the code

This section describes the directory structure 🌞

• .storybook/main.jsActs as an entry point to our component library

• storiesStorybook will load the files in this array directory into the component library Index home page that we see
• addonsRepresents the plug-in we used

Start writing a simple component 🌻

Just write our component to any directory in the just-configured Stories array

To the most commonButtonComponent as an example

Button.jsx

button.css

Button.stories.jsx

Using Butto.stories.jsx as the vehicle for our components, Storybook does a good job of generating documentation for the components and presenting them on the page

Use export to export Button components in different states so that the components are written

See the effect 😊

Deploy our component library 💥

1. Create remote Github repository and push the code ⚡️

2. Install Storybook powerful tool diagnostics ✨ for projects

yarn add -D chromatic
Copy the code

To 3.ChromaticThe site is associated with our Github component library project at 🌼

What do you mean what?

Chromatic is a cloud-based tool chain, used for Storybook which helps the team to release more quickly UI components, using it we can complete the CIDI, super fast but also can easily manage our component library project, can go to the website to learn more about www.hellogithub.com/

4. Deploy online 🌸

After we associate the project, we get a token

Using this token the following commands will build and deploy our Storybook nicely

yarn chromatic --project-token=<project-token>
Copy the code

5. Obtain the project URL🌴

After executing the build command above, we will get a URL on the command line. This URL is the online address of our component library after deployment, so you can share this link with your colleagues or friends to show them your component library!! 👍

6. Add GitHub Action to deploy Storybook🌲

Now that our project is hosted in the Github repository, we are able to automate Storybook deployment using continuous integration CI services. GitHub Actions is a free CI service built into GitHub for easy automatic publishing.

Create a new directory under the project root folder named.github and create another workflows directory within it.

Create a new file called dache.yml as shown below. Replace project-token with your project token.

chromatic.yml

# .github/workflows/chromatic.yml

# Workflow name
name: 'Chromatic Deployment'

# Event for the workflow
on: push

# List of jobs
jobs:
  test:
    # Operating System
    runs-on: ubuntu-latest
    # Job steps
    steps:
      - uses: actions/checkout@v1
      - run: yarn
        #👇 Adds diagnostics as a step in the workflow
      - uses: chromaui/action@v1
        # Options required for Chromatic's GitHub Action
        with:
          # 👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/react/en/deploy/ to obtain it
          projectToken: The ${{ XXXXXXXX }}
          token: The ${{ secrets.GITHUB_TOKEN }}
Copy the code

Then just commit this change to the remote warehouse. With GitHub action set, your Storybook will be deployed what do when push code. You can find all the released storybooks out of the Chromatic build screen.

In addition, you can check what code has been modified in this submission and whether it can be combined. Many functions will not be explained here. If you are interested, you can explore them by yourself

Conclusion 🍁

🌈 This way our component library finally grew from scratch to write a Button component. From build to release, continuous integration was realized with GitHub Action and Storybook and dream linkage of what made this easier. Of course, this short article only helps you to have a comprehensive understanding. It is very difficult to develop a good component library, involving many things, from code specification to various plug-ins and testing, but with Storybook, we can quickly build our own component library. Hope each small partner can gain, to write a component library of their own style 🍄.

Source code repository address:taskbox👣

Component library online address:taskbox

Conclusion 🦚

Every front end then I deserve your component library, like every winter has long Johns ⛄ ️ this article ended, each front is worth to own their own component library, hope you don’t lack this winter wear long Johns 😂, actually very simple is the purpose of the article the author’s daily work and output, regardless of the food is not food output is always meaningful, Also hope to know more like-minded friends through this article, if you also like to toss, welcome to add my friend, sand sculpture, progress together.

Making 🤖 : sudongyu

Personal blog 👨💻: Frozen fish blog

Vx 👦 : sudongyuer

Write in the last

Guys, if you like my words, give 🐟🐟 a thumbs up 👍 or follow ➕ to support me the most.

Add me on wechat: Sudongyuer, invite you into the group and learning the front together, become a better engineer ~ (group of qr code here – > front to nap, qr code has expired, see the links to the boiling point in the comments, I will put the latest qr code in the comments section, of course, can also add me WeChat I pull you into the group, after all, I also am interesting front end, I also not bad 🌟 ~