@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

npm install @delightui/components

Usage

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

Development

Setup

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

npm test

Storybook

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.