⚛️⚡ Component Library

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

Getting Started

1. run yarn install

2. Run yarn prepare command to setup Husky pre-commit hooks.

3. run yarn dev to lanch a storybook.

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

TODO

• ci to publish library to npm
• some gitlab version of release-please to handle release versions

Versioning

Following Conventional Commits.

Using the library in a React frontend app

Install the library running yarn component-library.

To import the styles the library needs:

/* _app.tsx */
import 'hat-trick/dist/style.css'
// More imports and your App component ...

To import library components:

/* pages/index.tsx */
import { Button } from 'hat-trick'
// More imports and your Page component...