Atomic component library
Matthew Hill
⚛️⚡ Vite + React + Typescript Component Library
Features
⚛️ React 18
📚 Storybook 6 - Components preview
⏩ Vite - Run and build the project blazingly fast!
⚡ Vitest - Components Unit Testing
🐶 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 and main.
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...
Author
License
Like this project
Posted May 1, 2024
React component library build with styled components and based off Atomic design principles - GitHub - matthill8286/atomic-component-library: React component …
