⚛️⚡ Vite + React + Typescript Component Library Template

Features

• ⚛️ React 18
• 📚 Storybook 7 - 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

1. Create a new repository using this one as template
2. Clone your repo
3. Install dependencies with pnpm i (first run corepack enable to enable pnpm)
4. Run pnpm prepare command to setup Husky pre-commit hooks.

Main Scripts

Always prepending pnpm:

• 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.

Blog Post

I created a post explaning how to set up this library and publish it to a package registry! You can read it here. [ - i saved a print out in local folder ]

Author

Ignacio Miranda Figueroa

License

MIT

install with .npmrc in project repo

@vincentreynaud:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

add GITHUB_TOKEN to .env

export GITHUB_TOKEN=ghp_...

bass source .env
pnpm i @vincentreynaud/desy-book

Tailwind classes

prevent tailwind from purging styles from these packages

tailwindcss.config.js

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/daisyui/dist/**/*.js',
    './node_modules/@vincentreynaud/desy-book/**/*.js',
  ],
  // ...
};

Intellisense

tsconfig.json

{
  "include": [
    ".node_modules/@vincentreynaud/desy-book/dist/index.d.ts" // adds type declaration for intellisense?
  ]
}