This is my own and go to boilerplate for creating my own React Component Libraries built with modern practices and tools I am comfortable to use with.
- 🔥 Type checking TypeScript
- 🎉 Storybook V8 Integration
- 👷 Testing with Jest and React Testing Library
- 📏 Linter with ESLint
- 🚫 Lint-staged for running linters on Git staged files
- 💖 Code Formatter with Prettier
- 🦊 Git Hooks with Husky
- 📜 Rollup for Bundling
- 🎁 Automatic changelog generation with Semantic Release
- 🤖 CI/CD for NPM Publishing and Storybook Deployment
- Node.js 20+ and npm
Run the following command on your local environment:
git clone https://github.com/Bernz322/react-library-boilerplate.git my-project-name
cd my-project-name
npm install
Note: I always update all dependencies whenever I have the time. Then run the storybook in development mode to see components by running:
npm run storybook
Open http://localhost:6006 with your favorite browser to see the storybook.
Create a new component file inside "src/components" directory and export it in "src/index.ts". Note: This is not limited to components only, you can add React Hooks, Utility Functions, and more to it.
To check your created component, create a story of it and run storybook.
You can execute testing by running:
npm run test
For linting and checking code quality and problems, execute:
npm run lint
To fix errors, execute:
npm run lint:fix
For formatting codes, execute:
npm run format
For building your library, execute:
npm run build
This will create a build folder containing index.esm.js, index.cjs.js and typings folder for declarations.
Deployment of Storybook is automated via Github Actions. You can check storybook.yml on how it's done.
Same with Storybook deployment, publishing to NPM is also automated. Just make sure to add NPM_TOKEN in your repositories "Secrets and variables" > "Actions".
NPM Link:
Storybook Link: