react-component-library-boilerplate

Optimized template repository for React component libraries.

Introduction

This template will give you a jumpstart on designing, testing, and publishing your very own React component library!

Click on the Use this template button to generate your own repository from this one.

Usage

Prerequisites

• Node.js

Commands

Run npm install first to install package dependencies.

• npm start - Shortcut for npm run styleguide:serve
• npm run lint - Run the StandardJS linter to check for warnings and errors
• npm run build - Build the component library to the dist folder
• npm test - Run the Jest testing suite to verify that the components will behave correctly
• npm run storybook:serve - Run the Styleguidist server for component visualization
• npm run storybook:build - Build a static Styleguidist site to the docs folder

Theme

Import the theme file in your application the apply the correct styling to all components.

import '~@matthewdowns/react-component-library-boilerplate/styles/theme.less';

Colors

Components that use colors will import the LESS variables defined in _colors.less.

 #f0f0f0 light

 #353535 dark

 #aa55ff primary

 #0088ff secondary

 #aaffff info

 #0be06b success

 #ffff03 warning

 #db3a35 error

Publishing

Package publishing is handled automatically via GitHub Actions. You can view the publishing workflow here.

How to trigger the publish workflow

First, create a new branch - release/vx.x.x - and run the `npm version {major,minor,patch,etc.} command to update the package.json version automatically.

For example, if the lastest tag version is v1.0.4, then you would create a new branch off of main called v1.0.5, and then run npm version patch to upgrade the packge version from 1.0.4 to 1.0.5.

Please note that the package.json version should never include the "v" prefix, according to the semantic versioning specification. However, it does specifies that tags on GitHub or other version control systems can be prefixed with a "v".

After you've pushed the branch to GitHub, you can create a new release, where the Choose a tag dropdown lets you specify the tag version (remember to include a "v" prefix) as well as the target, which would be your release branch.

At this point, the publish workflow should be running - you can see the status of all actions on the repository here.

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Matthew Downs

Email: [email protected]

Twitter: @mdownsxy

Project Link: https://github.com/matthewdowns/react-component-library-boilerplate