Overview:

This project is a React component library skeleton that helps users get started with creating their own React component libraries. It uses Rollup and TypeScript to bundle and type-check the components. It also includes Storybook for creating and showcasing the components, as well as Jest and React Testing Library for testing the components. The project can be hosted via various methods such as S3, GitHub pages, or Express.

Features:

• React Component Library Skeleton: A project skeleton designed to help users create their own React component libraries.
• Rollup and TypeScript: Uses Rollup for bundling the components and TypeScirpt for type-checking.
• Storybook: Includes Storybook for creating and showcasing the components.
• Jest and React Testing Library: Enables users to write tests for their components using Jest and React Testing Library.

Installation:

To run a live-reload Storybook server on your local machine:

npm run storybook

To export your Storybook as static files:

npm run build-storybook

You can then serve the files under the storybook-static directory using S3, GitHub pages, Express, etc.

To generate new components using the included NodeJS util file:

node util/create-component.js [ComponentName]

This will generate the necessary files to start building a new component. The default templates for each file can be modified under util/templates. Don’t forget to add the component to your index.ts exports if you want the library to export the component.

To install the component library locally:

npm install path/to/component-library

Replace path/to/component-library with the actual path to the component library directory. After installation, the library will appear as a dependency in package.json and you can import and use the components in your project. Note that you may encounter issues if you have multiple copies of React in your app. To resolve this, you can follow the provided instructions to ensure the component library uses the React version in the consuming app.

Summary:

This React component library skeleton provides developers with a starting point for creating their own component libraries. It includes essential tools such as Rollup, TypeScript, Storybook, Jest, and React Testing Library to streamline the development, testing, and showcasing of components. The provided installation instructions guide users on how to set up the library locally and address potential issues. With this skeleton, developers can easily create and publish their own custom React component libraries.