React Component Library

A reusable React component library built with Vite, TypeScript, Vitest, and Storybook. This project provides modular UI components that can be reused across multiple React applications.

✨ Features

• ⚛️ React components written in TypeScript
• ⚡ Vite for fast development and bundling
• 🧪 Vitest + Testing Library for unit testing
• 📚 Storybook for interactive component documentation
• 🎨 Custom ThemeProvider for consistent styling
• 🧩 Modular component architecture

📦 Installation

Install the library from npm:

npm install @lauraadan/react-component-library

or

yarn add @lauraadan/react-component-library

🚀 Usage

Example usage in a React project:

import { Button } from '@lauraadan/react-component-library';

function App() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

export default App;

📚 Storybook

Explore the components visually using Storybook.

Run locally:

npm run storybook

Or view the online documentation:

https://lauraadan.github.io/react-component-library

Storybook allows you to:

• view component variations
• test UI states
• document props
• check accessibility

📦 Components

The library currently includes the following components:

• Accordion
• Alert
• Button
• Card

Each component includes:

• TypeScript types
• Unit tests
• Storybook documentation
• Barrel export

Example structure:

src/components/Button
 ├ Button.tsx
 ├ Button.types.ts
 ├ Button.test.tsx
 ├ Button.stories.tsx
 └ index.ts

🚀 Getting Started

Install dependencies

npm install

or

yarn install

🧑‍💻 Development

Run the development environment:

npm run dev

🧪 Running Tests

Run unit tests with Vitest:

npm run test

Run tests with coverage:

npm run test:coverage

Tests are written using:

• Vitest
• Testing Library
• JSDOM

Example test:

render(<Button>Click me</Button>);
expect(screen.getByRole("button")).toBeInTheDocument();

🏗 Project Structure

src
 ├ components
 │   ├ Accordion
 │   ├ Alert
 │   ├ Button
 │   └ Card
 │
 ├ theme
 │   ├ ThemeProvider.tsx
 │   └ theme.ts
 │
 └ index.ts

🎨 Theming

The project includes a ThemeProvider to apply consistent styling across components.

Example usage:

import { ThemeProvider } from '@/theme/ThemeProvider';

<ThemeProvider>
  <App />
</ThemeProvider>;

📦 Build Library

Build the component library:

npm run build

The output will be generated in the dist folder.

🔍 Linting

Run ESLint:

npm run lint

🛠 Tech Stack

• React
• TypeScript
• Vite
• Vitest
• Testing Library
• Storybook
• ESLint

🔗 Links

GitHub repository https://github.com/lauraadan/react-component-library

npm package https://www.npmjs.com/package/@lauraadan/react-component-library

Storybook documentation https://lauraadan.github.io/react-component-library

Demo

Example usage:

https://github.com/lauraadan/react-component-library-demo