DEV Community: Alexey Pavlov

How to deploy and publish to NPM your own React Components library

Alexey Pavlov — Thu, 08 Sep 2022 04:08:06 +0000

Deploy Storybook to GitHub Pages

Now we are going to deploy Storybook to GitHub Pages.

For that we create a new branch "gh-pages" in our repo.

Then go to settings -> pages and we can find there a link for Storybook. If "gh-pages" branch wasn't chosen automatically, do it manually.

For Storybook deploy, we will use github-pages-deploy-action

Create a new workflow file storybook.yml in the workflows folder and past code below. The workflow starts for every push that contain changes in storybook or src directories.

Let's push it to GitHub and check that it works. For that, we need to do some changes in any file storybook or src directories and push it. Go to GitHub repo _-> _actions and check the workflow. When it finishes, we can open a live Storybook page using the link we noticed before (settings -> pages).

Storybook for my project is located here
All project files you can find in my GitHub repo

Publish a package to NPM

I suggest you to use semantic-release - fully automated version management and package publishing. It makes the process of publishing super easy.

To start, run this command in your project directory. It will set up semantic-release for your project.

npx semantic-release-cli setup

It will ask us some questions, to answer that, you need to be already signed up in npm:

What is your npm registry? (I left this field by default)
What is your npm username? (use your personal username)
What is your npm password? (use your personal password)
What is your NPM two-factor authentication code?
Provide a GitHub Personal Access Token (follow instructions bellow to create it)

To create a GitHub Personal Access Token go to this page , add name to your token, click first checkboxes group (repo) and click "generate token" button. Copy it and paste to terminal.

Then the script offers us some CI for choosing. Chose "GitHub Actions"

After that, we create a release.yml workflow to release the library. Go to semantic-release docs and copy this code for a new workflow

name: Release
on:
  push:
    branches:
      - master
jobs:
  release:
    name: Release
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
        with:
          fetch-depth: 0
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: 'lts/*'
      - name: Install dependencies
        run: npm ci
      - name: Release
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
        run: npx semantic-release

In my project, I will only change a command to install dependencies for a command I already use in other workflows

      - name: Install deps and build (with cache)
        uses: bahmutov/npm-install@v1

instead of

      - name: Install dependencies
        run: npm ci

Then run

yarn

And push changes to GitHub repo.

Important notice! You can publish only a package with unique name for NPM registry. Be sure a name you are using in package.json name field in unique.

After workflow finishes, you will be able to find your package on NPM.

One more benefit of using semantic-release, you can use commit message to choose a release type:

Hope you find this article useful and will easily deploy and push your package to NPM!

How to test your own React Components library

Alexey Pavlov — Mon, 22 Aug 2022 07:39:31 +0000

We are going to test the components library, that we have created in this article. We have the Button component for testing.

We will use React Testing Library. To install it, run this script

yarn add -D @testing-library/react

If you use CSS files

As you may know from a previous article, we use a CSS file to add styles to our button, but Jest can't handle such files by default and tests will fail. To run tests, we need to mock CSS files first.

To do that, add a jest.config.js file to the root of your project and paste a code below, it says that all CSS files should be handled by identity-obj-proxy library

module.exports = {
  moduleNameMapper: {
    '\\.(css)$': 'identity-obj-proxy',
  },
};

and run

yarn add -D identity-obj-proxy

Well, now we can start writing tests

Writing tests

Firstly, we have to decide that exactly we want to test. Let's check if the button is rendered correctly in different states and if it is clickable/not clickable. So we create a template and comment that we don't need for now.

For the first test, we need to import a render function from React Testing Library. We will check if default button has a primary variant. There are few ways to do it. For the first one, we need a function of searching element in the screen, let's import an object screen, that contains the function we need.

The next one is to test a success variant. Let's have a look at another way of implementing such test. We will find our button by querySelector function.

Snapshot test

For disabled button state, let's use a snapshot test - the third way of implementing this type of tests. For that, we need an asFragment function, that we get from render.

After running the test, Jest will generate a snapshot and paste it to our test as a toMatchInlineSnapshot function argument:

Next time we will run the test, Jest will compare a result of asFragment function with this snapshot. Every time we create a new snapshot, we need to check that it meets our expectations.

Move on, now we will check if button is clickable. For that, we will mock onClick function and pass it to our button, then, emulate on button click with fireEvent.click. In the end, check that click was done, and it was done 1 time.

For testing a disabled button state, we will do the same, but use expect().not.toHaveBeenCalled() to be sure that click wasn't done. See example below:

I will run all tests one more time to be sure that all is fine

Good, I pushed it to my GitHub. You can find all tests here

In the next article, we will deploy storybook to GitHub pages.

How to create your own React Components library

Alexey Pavlov — Thu, 18 Aug 2022 12:15:00 +0000

Are you curious about how to create your own components library on React + Typescript?

In this set of articles we will go through such aspects as: setup project structure, writing a small component, testing, connecting to storybook, deploying project to GitHub Pages and pushing a package to NPM. Let's start by setting up a project!

Set up

We will use a TSDX library - this tool is something similar to create-react-app, but for creating components library. It allows as to initialize a project immediately with already set up bundler, Rollup with Typescript supporting, testing with Jest, code formatter, Prettier and Storybook.

To start, run this command in your terminal with your library name

npx tsdx create fancy-react-lib

Choose a template react-with-storybook - it is a React package with necessary development dependencies and @types installed, with React Storybook already setup as well

Now we can open a generated project and browse the structure. The first folder is GitHub workflows. The First of them - main.yml, it runs linting, tests and builds the project. The main goal is to check that the project is building successfully in different operating systems and node versions. Some dependencies require node version 14 and upper, so let's update this part of the file:

    strategy:
      matrix:
        node: ['14.x', '16.x']
        os: [ubuntu-latest, windows-latest, macOS-latest]

The next - size.yml. It uses action size-limit to get a final bundle size and push it to pull request. Also, it rejects a pull request if the size is higher than the limit, that was mentioned in package.json.

  "size-limit": [
    {
      "path": "dist/react-super-library.cjs.production.min.js",
      "limit": "10 KB"
    },
    {
      "path": "dist/react-super-library.esm.js",
      "limit": "10 KB"
    }
  ],

We also have next folders in our project:

storybook
example (it is a playground, but we will use storybook for these purposes)
src (we will place our components here)
stories (here will be our stories for storybook)
test

In general, this is all that we need to know about the project structure. Now we can init a git repository and push it to GitHub.

It's time to create the first piece of code!

Creating a component

Let's start with the button component.

Create a Button folder in src, then create a Button.tsx file.

Nothing complicated, just standard HTML button and several props: onClick, children (ReactNode - it is a type including React Element, string, number, whatever), isDisabled, variant (to use different styles, let's start with primary and success variants).

Styling

You can use any approach to adding CSS styles, that you like. I will show the easiest way - just add a CSS file for our component. Create a Button.css in src/Button folder and paste styles below

We want bundler to provide styles as separate CSS file, for that we need to change Rollup settings bit.

Run this command and follow TSDX customization instructions

yarn add -D postcss rollup-plugin-postcss autoprefixer cssnano

Create a tsdx.config.js file in the root directory and past this code

Storybook

Let's create a story for our button! We already have a default story in the stories folder, so we can create the same one. Create a new file Button.stories.tsx in storybook folder

To build storybook locally, run this command:

 yarn storybook

The last but not least, let's export the Button component in src/index.js file - the entry point of our package.

export * from './Button/Button'

Cool! We can check that storybook is working.

Hope it was helpful. The project files you can find also in a GitHub repo.

Svelte app: create Loading Overlay component using svelte/motion

Alexey Pavlov — Thu, 26 May 2022 06:26:05 +0000

For one of my projects, I needed to create a loading overlay component to hide the app until the loading is complete. In this article, I want to share how I did it.

First, let's sketch out the HTML and CSS markup. This is quite simple. I create a block, position it fixed, stretch it to full-screen size, and centre its content. Notice how we use the svg gradient to fill the text with different colours.

<div class="overlay">
    <svg width="115" height="32" viewBox="0 0 78 32" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <linearGradient id="filler">
                <stop offset="50%" stop-color="#ff006e" />
                <stop offset="50%" stop-color="white" />
            </linearGradient>
        </defs>

        <text x="0" y="24px" fill="url(#filler)">Loading...</text>
    </svg>
</div>

<style>
  .overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3a86ff;
    font-family: "Arial", sans-serif;
    font-size: 1.375rem;
  }
</style>

Cool. We are done with the markup. Now let's move on to animation. To do this, we will use standard Svelte tools. Using tweened from svelte/motion we create a progress variable and use its value in the svg gradient.

const progress = tweened(0, { easing: linear, duration: 3000 });

  <linearGradient id="filler">
    <stop offset={`${$progress}%`} stop-color="#ff006e" />
    <stop offset={`${$progress}%`} stop-color="white" />
  </linearGradient>

Next, let's create animate function that we will call when the component mounts. We make this function recursive so that the animation continues indefinitely. Like any other recursive function, it must have an exit point. Therefore, in order to avoid memory leaks, we make sure that the execution of the function ends when the component instance is destroyed.

  let destroyed = false

  async function animate() {
    if (destroyed) {
      return
    }

    await width.set(100)
    await width.set(0, { duration: 0 })
    await animate()
  }

  onMount(() => {
    animate()
  })

  onDestroy(() => {
    destroyed = true
  })

Fine. Our component already looks good. Now we will improve the resulting animation by making it two-stage, where in the first stage we paint over the white text with pink, and vice versa, in stage number 2 we paint over the pink text with white. To do this, we will create a writable store with a boolean value that we will use to indicate the current stage of the animation. With each call of the animate function, we will change this value to the opposite.

  const isFirstStage = writable(true)

  async function animate() {
    if (destroyed) {
      return
    }

    await width.set(100)
    await width.set(0, { duration: 0 })
    isFirstStage.update((value) => !value)
    await animate()
  }

<linearGradient id="filler">
  <stop offset={`${$progress}%`} stop-color={$isFirstStage ? '#ff006e' : 'white'} />
  <stop offset={`${$progress}%`} stop-color={$isFirstStage ? 'white' : '#ff006e'} />
</linearGradient>

So, we are done with the loading indicator component itself. Now let's imagine that there can be several components that use our indicator. We could render our overlay in each of them, but let's better refine our approach and create functionality that will allow us to render the indicator once and provide functions for turning the indicator on and off. To do this, we will create another writable store, which will contain requests to display the indicator. The indicator itself will be rendered as long as there is at least one request left in the store.

import { writable, derived } from "svelte/store";
import { nanoid } from "nanoid";

export const loadingOverlayQueue = writable([]);

export function showLoadingOverlay() {
  const newRequestId = nanoid();

  loadingOverlayQueue.update((currentValue) => [...currentValue, newRequestId]);

  return newRequestId;
}

export function hideLoadingOverlay(requestId) {
  loadingOverlayQueue.update((currentValue) =>
    currentValue.filter((item) => item !== requestId)
  );
}

export const isLoadingOverlayShown = derived(
  loadingOverlayQueue,
  (requests) => requests.length > 0
);

Now, all done. We've created an original animated loading indicator in a few easy steps. The source code can be found on my GitHub. Do you enjoy working with svelte?