@ws-ui/ui-components 1.0.0

package/README.md

@@ -0,0 +1,146 @@
+# Web Studio Design System
+
+A comprehensive design system built with React, TypeScript, TailwindCSS, and Storybook for Qodly. This library provides a collection of reusable, accessible, and customizable UI components with consistent styling and behavior using a modern **configuration-driven architecture**.
+
+## ✨ Features
+
+- **🎨 Modern Design**: Clean, professional components with consistent styling
+- **♿ Accessibility First**: Full ARIA support and keyboard navigation
+- **🔧 Flexible & Configurable**: Separation of concerns with dedicated styling configurations
+- **📚 Well Documented**: Comprehensive Storybook documentation with interactive examples
+- **⚡ Performance Optimized**: Built with modern React patterns and optimized bundle size
+- **🎯 TypeScript**: Full type safety and excellent developer experience
+- **🌙 Dark Theme**: Built-in support for dark mode styling
+- **🔄 Consistent Patterns**: Unified architecture across all components for maintainability
+- **🧪 Comprehensive Testing**: Unit tests and Storybook testing for each component
+
+## 🚀 Quick Start
+
+### Installation
+
+```bash
+# Clone the repository
+git clone https://git.4d-ps.com/4d/web-studio/design-system.git
+cd design-system
+
+# Install dependencies
+npm install
+```
+
+### Development
+
+```bash
+# Start the development server
+npm run dev
+
+# Run Storybook for component development
+npm run storybook
+
+# Build the project
+npm run build
+
+# Run linting
+npm run lint
+```
+
+## 📖 Storybook
+
+View all components and their documentation in Storybook:
+
+```bash
+npm run storybook
+```
+
+This will start Storybook on `http://localhost:6006` where you can:
+
+- Browse all available components
+- Interact with component properties
+- View code examples
+- Test accessibility features
+- Explore different states and variants
+
+## 🛠️ Technical Stack
+
+- **React 19.1.0**: Latest React with modern features
+- **TypeScript 5.8.3**: Full type safety
+- **TailwindCSS 4.x**: Utility-first CSS framework
+- **Storybook 9.x**: Component development and documentation
+- **Vite 6.x**: Fast build tool and dev server
+- **Vitest 3.x**: Unit testing framework
+- **ESLint**: Code linting and formatting
+
+## 🔧 Development
+
+### Project Structure
+
+```
+src/                             # Reusable UI components
+│   ├── Checkbox/
+│   │   ├── Checkbox.tsx         # Component logic & rendering
+│   │   ├── Checkbox.stories.tsx # Storybook documentation
+│   │   ├── Checkbox.test.ts     # Unit tests
+│   │   ├── checkbox.types.ts    # TypeScript definitions
+│   │   ├── checkbox.style.ts    # Styling configuration
+│   │   └── index.ts             # Clean exports
+│   ├── Radio/
+│   │   ├── Radio.tsx
+│   │   ├── Radio.stories.tsx
+│   │   ├── Radio.test.ts
+│   │   ├── radio.types.ts
+│   │   ├── radio.style.ts
+│   │   └── index.ts
+│   └── ...                 # Other components
+├── styles/                 # Global styles and themes
+```
+
+### Adding New Components
+
+1. Create component directory in `src/components/ComponentName/`
+2. Create the five core files:
+   - `ComponentName.tsx` - Component logic & rendering
+   - `ComponentName.stories.tsx` - Storybook documentation
+   - `ComponentName.test.ts` - Unit tests
+   - `ComponentName.types.ts` - TypeScript definitions
+   - `ComponentName.style.ts` - Styling configuration
+   - `index.ts` - Clean exports
+3. Include TypeScript interfaces and props
+4. Add comprehensive Storybook stories
+5. Ensure accessibility compliance
+6. Add unit tests
+7. Update documentation
+
+### Design Guidelines
+
+- **Consistency**: Follow established patterns and conventions
+- **Accessibility**: Ensure WCAG 2.1 AA compliance
+- **Performance**: Optimize for bundle size and runtime performance
+- **Flexibility**: Support multiple variants and customization options
+- **Documentation**: Provide clear examples and usage guidelines
+- **Separation of Concerns**: Keep logic, types, styling, stories, and tests in separate files
+
+## 🧪 Testing
+
+```bash
+# Run unit tests
+npm run test
+
+# Run tests with storybook
+npm run test-storybook
+```
+
+## 📝 Contributing
+
+1. Fork the repository
+2. Create a feature branch: `git checkout -b feature/amazing-component`
+3. Follow the development guidelines
+4. Add tests and documentation
+5. Submit a pull request
+
+### Code Standards
+
+- Use TypeScript for all components
+- Follow React best practices and hooks
+- Ensure accessibility compliance
+- Add comprehensive Storybook stories
+- Include unit tests for complex logic
+- Use semantic versioning for releases