react-vite-component-template

Template for building a React component library, with Vite, TypeScript and Storybook.

📐 Linting & formatting

Stylelint, Eslint & Prettier configured.

🧪 Testing

Using Vitest with jsdom environment and ready for generating coverages.

🤖 Scripts

| Script | Function | | :---------------: | ---------------------------------------------------------------------------------- | | build | Build the dist, with types declarations, after checking types with TypeScript. | | storybook | Start a Storybook development server. | | build-storybook | Build the Storybook dist. | | test | Run the tests with Vitest using jsdom and starts a Vitest UI dev server. | | coverage | Generate a coverage report, with v8. | | lint | Lint the project with Eslint. | | lint:fix | Lint and fix the project with Eslint. | | format | Check the project format with Prettier. | | format:fix | Format the project code with Prettier. | | stylelint | Lint the styles code with Stylelint. | | stylelint:fix | Lint and fix the styles code with Stylelint. |

🏛️ Exposing library entry points

Remember to align fileName value in lib object within vite.config.ts...

export default defineConfig({
  // Rest of vite.config.ts
  build: {
    lib: {
      entry: resolve(__dirname, 'src/main.ts'),
      name: 'MyLib',
      fileName: 'my-lib',
    },
  },
  // ...
})

With import and require values in exports, in package.json

{
  // Rest of package.json
  exports: {
    '.': {
      import: './dist/my-lib.js',
      require: './dist/my-lib.umd.cjs',
    },
  },
}

🌐 Exposing types entry point

If you modify the structure or naming, update they types key in package.json.

{
  // Rest of package.json
  types: './dist/main.d.ts',
}