React Component Library Template

Template for developing react components. A SimpleButton component with tailwindcss3 is implemented as an example.

Deps

React + Typescript + Rollup + Jest + Storybook + Tailwind3 + PostCSS8 + Webpack5

Setup

# clone the template
git clone git@github.com:ZitySpace/react-component-template.git ${YOUR_REACT_LIB_FOLDER}

# update `name` in `package.json`.
cd ${YOUR_REACT_LIB_FOLDER}

# install dependencies
yarn install

# setup husky precommit
yarn husky install && yarn husky add .husky/commit-msg 'yarn commitlint --edit $1' && yarn husky add .husky/pre-commit 'yarn lint-staged --allow-empty'

# remove storybook examples (optional)
rm -rf src/stories

Development

yarn dev

Implement custom components inside src/components folder.

Preview

# visit localhost:6006, should be able to see the styled component
yarn storybook

Test

yarn test

Packaging

# package the lib inside dist folder, insert tailwind css (only for tags
# that are used in the library) in the head of packed library, you can
# find it in dist/*/index.js
yarn build

Release

Git push to remote will trigger auto release

Publish

1. Create $REPO/.npmrc file with content:

   registry=https://registry.npmjs.org/
   @ZitySpace:registry=https://npm.pkg.github.com/
   //npm.pkg.github.com/:_authToken=$GITHUB_PERSONAL_AUTH_TOKEN
   

   @ZitySpace scope refers to the prefix of package name in package.json.

2. Publish: npm publish or yarn publish will publish to github repo.

Reference

How to package

• How to Create and Publish a React Component Library
• Creating a React Component Library using Rollup, Typescript, Sass and Storybook
• Build a component library with React and TypeScript

How to integrate tailwind

• TailwindCSS with ReactJS
• Building Component libraries with TSDX and Tailwind
• Bundle Stylesheets and Add LiveReload With Rollup
• Storybook + Tailwind 2 + PostCSS 8

How to auto release

• 前端工程化自动化配置处理
• 使用 semantic-release 搞定自动化部署
• Automated versioning and package publishing using GitHub Actions and semantic-release