Overview

The SetupReact v18TypeScriptUI is a development boilerplate that provides a preconfigured setup for developing UI components with React v18, TypeScript, and Storybook. It also includes features such as unit testing with Testing-library, linting with Eslint, code formatting with Prettier, and conventional commit messages with Commitlint. The boilerplate also offers automated release functionality with changesets.

Features

• React v18: Develop UI components using the latest version of React.
• TypeScript: Utilize the benefits of type checking and enhanced developer experience.
• Storybook: Prototype and document UI components in an isolated development environment.
• Testing-library: Write unit tests for components using the Testing-library framework.
• Eslint: Ensure code quality and adherence to best practices with linting rules.
• Prettier: Enforce consistent code formatting across the project.
• Commitlint: Maintain consistent commit message formatting and conventions.
• Rollup: Build the library using the Rollup bundler for optimized production builds.
• Automated release with changesets: Generate changelogs, create releases, and publish to the NPM registry automatically using changesets and GitHub Actions.

Installation

To get started with the SetupReact v18TypeScriptUI boilerplate, follow the steps below:

1. Use the Boilertown CLI to generate a new repository with the same structure and files. Alternatively, click the “Use this template” button on GitHub to create a new repository from the boilerplate.

2. Build the library by running the following command:

   npm run build
   

3. Run Storybook to view and test the components:

   npm run storybook
   

4. Unit test a component using Testing-library:

   npm run test
   

5. Create a changeset for release:

   npm run changeset
   

6. Release and publish the package using the automated release functionality:

   npm run release
   

Note: To automate the publication of your library, you need to create an NPM_TOKEN. Follow the instructions provided in this article to generate the token and add it as a secret in your GitHub Actions workflow. Also, make sure to allow GitHub Actions to create and approve pull requests in your repository settings.

Summary

The SetupReact v18TypeScriptUI is a comprehensive development boilerplate that simplifies the setup of a React v18 UI components library. It includes essential features such as TypeScript, Storybook, testing, linting, code formatting, and automated release functionality with changesets. Developers can quickly start developing UI components with minimal configuration and benefit from the provided tooling and automation. Contributions to the boilerplate are encouraged and welcome.