https://github.com/bluzzi/react-components-lib-test
An example of a React component library structure with TypeScript, Vite, Tailwind, Vitest, Testing Library and Storybook.
https://github.com/bluzzi/react-components-lib-test
Last synced: about 1 year ago
JSON representation
An example of a React component library structure with TypeScript, Vite, Tailwind, Vitest, Testing Library and Storybook.
- Host: GitHub
- URL: https://github.com/bluzzi/react-components-lib-test
- Owner: Bluzzi
- Created: 2022-12-18T18:34:16.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-09T15:04:42.000Z (over 3 years ago)
- Last Synced: 2025-03-29T06:22:48.871Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 45.9 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Components Library Example
An example of a React component library structure with TypeScript, Vite, Tailwind, Vitest, Testing Library and Storybook.
## Installation (/!\ example /!\\)
Install the package:
```
npm install react-components-lib-example
```
In your Tailwind configuration, import the design system configuration as a preset and into the content source:
```ts
/** @type {import("tailwindcss"_).Config} */
module.exports = {
presets: [
require("react-components-lib-example/tailwind.config.cjs")
],
content: [
"./node_modules/react-components-lib-example/dist/**/*.{js,ts}",
// ...
]
// ...
};
```
## Component structure
- `element.tsx`: component (React, Tailwind)
- `element.test.tsx`: tests (Vitest, Testing Library)
- `element.story.tsx`: story definitions (Storybook)
- `element.type.ts`: types (TypeScript)
- `index.ts`: barrel export