React Component Library

This project skeleton was created to help people get started with creating their own React component library using:

It also features:

Storybook to help you create and show off your components
Jest and React Testing Library enabling testing of the components

Check out here to see the component library in action ▸

This starter kit also includes template for CONTRIBUTING.

Credits

This starter kit is forked from https://github.com/HarveyD/react-component-library. I have updated the pacakge versions and some more customisation to suit my style.

Development

I recommend to use below folder structure for better scalability

src
 └──├── assets
    │   └── scss
    │       ├── typography.scss
    │       └── variables.scss
    ├── components
    │   └── TestComponent
    │       ├── TestComponent.scss
    │       ├── TestComponent.stories.tsx
    │       ├── TestComponent.test.tsx
    │       ├── TestComponent.tsx
    │       ├── TestComponent.types.ts
    │       └── index.ts
    ├── hooks
    ├── index.ts
    ├── services
    ├── store
    └── utils

Testing

npm run test

Building

npm run build

Storybook

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

npm run storybook

Publishing

Hosting via NPM

First, make sure you have an NPM account and are logged into NPM using the npm login command.

Then update the name field in package.json to reflect your NPM package name in your private or public NPM registry. Then run:

npm publish

The "prepublishOnly": "npm run build" script in package.json will execute before publish occurs, ensuring the build/ directory and the compiled component library exist.

Deploy Storybook to GitHub Pages

Install gh-pages

npm install gh-pages --save-dev

Edit package.json file and add

"homepage": "http://YOUR_GITHUB_USERNAME.github.io/REPO_NAME

Add below scripts in package.json

"scripts": {
    "predeploy": "npm run build-storybook",
    "deploy-storybook": "gh-pages -d storybook-static",
    "build-storybook": "build-storybook"
},

Run npm run deploy-storybook to successfully host Storybook on github pages.

manisuec/react-ts-lib-starter