# @delightui/components

A comprehensive React component library built with TypeScript, providing a complete set of UI components following atomic design principles. This library offers flexible, accessible, and highly customizable components for building modern web applications.

## Features

- **Atomic Design Architecture**: Components organized into Atoms, Molecules, and Organisms
- **TypeScript Support**: Full TypeScript support with comprehensive type definitions
- **Accessible**: Built with accessibility in mind following WCAG guidelines
- **Customizable**: Flexible theming system with SCSS modules
- **Modern React**: Built with React 18+ and modern hooks
- **Storybook Integration**: Interactive component documentation and testing
- **Testing**: Comprehensive test coverage with Vitest and Testing Library

## Installation

```bash
npm install @delightui/components
```

## Usage

```tsx
import { Button, Card, Modal } from '@delightui/components';

function App() {
  return (
    <Card>
      <Button variant="primary">Click me</Button>
    </Card>
  );
}
```

## Tools & Libraries

### Core Dependencies
- **React 18.3+** - Modern React with concurrent features
- **TypeScript** - Type-safe development
- **SCSS/Sass** - Styling with CSS modules
- **classnames** - Conditional CSS class management

### UI & Interaction
- **@dnd-kit** - Drag and drop functionality
- **react-overlays** - Positioning and overlay management
- **react-dropzone** - File upload handling
- **flatpickr** - Date/time picker component
- **react-router-dom** - Navigation and routing

### Development Tools
- **Vite** - Fast build tool and development server
- **Storybook** - Component development and documentation
- **Vitest** - Unit testing framework
- **Testing Library** - React component testing utilities
- **ESLint** - Code linting with Airbnb TypeScript config
- **Rollup** - Library bundling and packaging

### Build & Deployment
- **Rollup** - Production build bundling
- **PostCSS** - CSS processing and optimization
- **Bitbucket Pipelines** - CI/CD automation

## Component Library

[component list](./docs/README.md)

## Development

### Setup
```bash
npm install
npm start
```

### Available Scripts
- `npm start` - Start development server
- `npm run build` - Build for production
- `npm test` - Run tests
- `npm run test:ui` - Run tests with UI
- `npm run storybook` - Start Storybook development server
- `npm run build-storybook` - Build Storybook for production
- `npm run lint` - Run ESLint
- `npm run lint:fix` - Fix ESLint issues

### Testing
```bash
npm test
```

### Storybook
```bash
npm run storybook
```

## Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests for new components
5. Update documentation
6. Submit a pull request

## License

This project is licensed under the MIT License.