⚛️ ⚡ Vite + React + Typescript Component Library Template
Features
⚛️ React 18📚 Storybook 6 - Components preview🖌️ Tailwind CSS 3⏩ Vite - Run and build the project blazingly fast!⚡ Vitest - Components Unit Testing📐 ESLint & Prettier - Formatting and Linting🌟 Typescript🐶 Husky & Lint Staged - Pre-commit Hooks⏰ Release Please — Generate the changelog with the release-please workflow👷 Github Actions — Releasing versions to NPM- Initial components setup using Atomic Design
Getting Started
-
Create a new repository using this one as template
-
Create 2 core branches:
develop
andmain
.2.1
develop
will serve all your versions.2.2 new additions should be pushed to
main
when they have been approved/tested appropriately. -
Clone your repo
-
Install dependencies with
yarn
-
Run
yarn prepare
command to setup Husky pre-commit hooks.
Main Scripts
Always prepending yarn:
-
dev
: Bootstrap the Storybook preview with Hot Reload. -
build
: Builds the static storybook project. -
build:lib
: Builds the component library into the dist folder. -
lint:fix
: Applies linting based on the rules defined in .eslintrc.js. -
format:prettier
: Formats files using the prettier rules defined in .prettierrc. -
test
: Runs testing using watch mode. -
test:cov
: Runs testing displaying a coverage report.
Publishing the Library to NPM
Using Github as the hosting service:
- Check the
Allow GitHub Actions to create and approve pull requests
box under the Settings>Code and automation>Actions>General repository configuration. This will allow the release-please workflow to create a PR increasing the version. - Create a repository secret called
NPM_TOKEN
under Settings>Security>Secrets and variables>Actions for the github action to be able to publish the library to npm.
With these 2 requirements, Pull Requests raised by release-please will have enough permissions. For more details, check the official documentation.
Versioning
Following Conventional Commits.
release-please will bump a patch version if new commits are only fixes.
It will bump a minor version if new commits include a feat.
feat!
, fix!
, refactor!
, etc., which represent a breaking change, will result in a major version.
In order to change the version manually (i.e. force it), a new commit has to be created including Release-As: X.X.X
as the description.
Example: git commit -m "chore: v1.2.0" -m "Release-As: 1.2.0"
Using the library in a React frontend app
Install the library running yarn <your-library>
.
To import the styles the library needs:
/* _app.tsx */
import '<your-library>/dist/style.css'
// More imports and your App component ...
To import library components:
/* pages/index.tsx */
import { AtButton } from '<your-library>'
// More imports and your Page component...