mirror of
https://github.com/cloud-shuttle/leptos-shadcn-ui.git
synced 2025-12-22 22:00:00 +00:00
eba29c0868
�� MAJOR MILESTONE: Full Signal Management Integration Complete ## Signal Management System - ✅ Complete signal management infrastructure with ArcRwSignal & ArcMemo - ✅ Batched updates for performance optimization - ✅ Memory management with leak detection and pressure monitoring - ✅ Signal lifecycle management with automatic cleanup - ✅ Comprehensive testing with cargo nextest integration ## Component Migration (42/42 - 100% Success) - ✅ All 42 components migrated to new signal patterns - ✅ Signal-managed versions of all components (signal_managed.rs) - ✅ Zero compilation errors across entire workspace - ✅ Production-ready components with signal integration ## Developer Experience - ✅ Complete Storybook setup with interactive component playground - ✅ Comprehensive API documentation and migration guides - ✅ Integration examples and best practices - ✅ Component stories for Button, Input, Card, and Overview ## Production Infrastructure - ✅ Continuous benchmarking system (benchmark_runner.sh) - ✅ Production monitoring and health checks (production_monitor.sh) - ✅ Deployment validation scripts (deployment_validator.sh) - ✅ Performance tracking and optimization tools ## Key Features - ArcRwSignal for persistent state management - ArcMemo for computed values and optimization - BatchedSignalUpdater for performance - SignalMemoryManager for memory optimization - MemoryLeakDetector for leak prevention - TailwindSignalManager for styling integration ## Testing & Quality - ✅ Comprehensive test suite with TDD methodology - ✅ Integration tests for signal management - ✅ Performance benchmarks established - ✅ Memory management validation ## Documentation - ✅ Complete API documentation - ✅ Migration guides for Leptos 0.8.8 - ✅ Integration examples and tutorials - ✅ Architecture documentation This release represents a complete transformation of the component library to leverage Leptos 0.8.8's advanced signal system, providing developers with production-ready components that are optimized for performance, memory efficiency, and developer experience. Ready for production deployment and community adoption! 🚀
496 lines
16 KiB
Markdown
496 lines
16 KiB
Markdown
# 🚀 **leptos-shadcn-ui**
|
|
|
|
**Production-ready ShadCN UI components for Leptos v0.8+ applications**
|
|
|
|
[](https://rust-lang.org)
|
|
[](https://leptos.dev)
|
|
[](LICENSE)
|
|
[](docs/tdd/completion/TDD_COMPLETION_SUMMARY.md)
|
|
[](tests/e2e)
|
|
[](performance-audit)
|
|
|
|
## 🏆 **Project Status: Phase 4 Complete - 38 Components Published!**
|
|
|
|
**38 components successfully published to crates.io with exemplary quality standards!**
|
|
|
|
- ✅ **Published Components**: 38/85+ components at v0.7.0 (45% complete)
|
|
- ✅ **Unit Tests**: 500+ comprehensive tests (100% coverage)
|
|
- ✅ **E2E Tests**: Complete Playwright test suite covering all workflows
|
|
- ✅ **Quality Standards**: Industry-best practices implemented
|
|
- ✅ **Documentation**: Comprehensive guides and examples
|
|
- ✅ **Performance Audit**: Complete TDD performance monitoring system
|
|
- ✅ **CI/CD Pipeline**: 7-phase quality gates with automated enforcement
|
|
|
|
## 🎉 **Latest Release: v0.7.0 - Comprehensive Publishing Edition**
|
|
|
|
### **What's New in v0.7.0**
|
|
- 🚀 **38 Published Components** - Core UI, form, navigation, and interaction components
|
|
- ✨ **Complete TDD Implementation** - All critical remediation elements implemented
|
|
- 📊 **E2E Testing Infrastructure** - Comprehensive Playwright test suite
|
|
- ⚡ **Performance Benchmarking** - Criterion benchmarks for critical components
|
|
- 🛠️ **Cargo Nextest Configuration** - Improved test execution and reliability
|
|
- 📈 **CI/CD Pipeline Enhancement** - 7-phase quality gates with automated enforcement
|
|
- 🔒 **Security Scanning** - Automated vulnerability detection and compliance
|
|
- ♿ **Accessibility Testing** - WCAG 2.1 AA compliance testing
|
|
|
|
### **Quick Start with v0.7.0**
|
|
```bash
|
|
# Install any of the 38 published components
|
|
cargo add leptos-shadcn-button
|
|
cargo add leptos-shadcn-input
|
|
cargo add leptos-shadcn-card
|
|
cargo add leptos-shadcn-badge
|
|
# ... and 34 more components available!
|
|
|
|
# Use the comprehensive testing infrastructure
|
|
cargo nextest run
|
|
npx playwright test
|
|
|
|
# Run performance benchmarks
|
|
cargo bench
|
|
```
|
|
|
|
### **Release Notes**
|
|
- **[v0.7.0 Release Notes](RELEASE_NOTES_v0.7.0.md)** - Comprehensive release information
|
|
- **[Phase 4 Completion Summary](PHASE_4_COMPLETION_SUMMARY.md)** - Latest publishing achievements
|
|
|
|
---
|
|
|
|
## 🎯 **What This Is**
|
|
|
|
**leptos-shadcn-ui** is a comprehensive component library that brings the beautiful, accessible, and customizable ShadCN UI components to the Leptos ecosystem. Built with Rust and WebAssembly, it provides:
|
|
|
|
- **46 Production-Ready Components** - All thoroughly tested and validated
|
|
- **100% Test Coverage** - Comprehensive unit and integration testing
|
|
- **Accessibility First** - WCAG compliance built into every component
|
|
- **Performance Optimized** - No memory leaks or performance bottlenecks
|
|
- **Cross-Platform** - Works consistently across all major browsers and devices
|
|
- **Performance Monitoring** - Built-in performance audit and optimization tools
|
|
|
|
## 🚀 **Quick Start**
|
|
|
|
### **Installation**
|
|
|
|
#### **Option 1: Individual Components (Recommended)**
|
|
Add specific components to your `Cargo.toml`:
|
|
|
|
```toml
|
|
[dependencies]
|
|
leptos-shadcn-button = "0.4.0"
|
|
leptos-shadcn-input = "0.4.0"
|
|
leptos-shadcn-card = "0.4.0"
|
|
leptos-shadcn-checkbox = "0.4.0"
|
|
# ... add more components as needed
|
|
```
|
|
|
|
#### **Option 2: Main Package with Features**
|
|
Use the main package with feature flags:
|
|
|
|
```toml
|
|
[dependencies]
|
|
leptos-shadcn-ui = { version = "0.5.0", features = ["button", "input", "card", "checkbox"] }
|
|
```
|
|
|
|
#### **Option 3: With Performance Monitoring**
|
|
Include the performance audit system:
|
|
|
|
```toml
|
|
[dependencies]
|
|
leptos-shadcn-ui = { version = "0.5.0", features = ["button", "input", "performance-audit"] }
|
|
```
|
|
|
|
### **Basic Usage**
|
|
|
|
```rust
|
|
use leptos::*;
|
|
use leptos_shadcn_button::Button;
|
|
use leptos_shadcn_input::Input;
|
|
|
|
#[component]
|
|
pub fn MyForm() -> impl IntoView {
|
|
view! {
|
|
<div class="space-y-4">
|
|
<Input placeholder="Enter your name" />
|
|
<Button>"Submit"</Button>
|
|
</div>
|
|
}
|
|
}
|
|
```
|
|
|
|
### **Performance Monitoring**
|
|
|
|
Monitor and optimize your component performance with the built-in audit system:
|
|
|
|
#### **Install Performance Audit Tool**
|
|
```bash
|
|
cargo install leptos-shadcn-performance-audit
|
|
```
|
|
|
|
#### **Run Performance Audits**
|
|
```bash
|
|
# Complete performance audit
|
|
performance-audit audit
|
|
|
|
# Analyze bundle sizes only
|
|
performance-audit bundle --components-path packages/leptos
|
|
|
|
# Monitor real-time performance
|
|
performance-audit monitor --duration 30s --sample-rate 100ms
|
|
|
|
# Generate optimization roadmap
|
|
performance-audit roadmap --output roadmap.json --format json
|
|
```
|
|
|
|
#### **Performance Audit Features**
|
|
- **📊 Bundle Size Analysis** - Track component sizes and identify optimization opportunities
|
|
- **⚡ Real-time Monitoring** - Monitor render times and memory usage
|
|
- **🗺️ Optimization Roadmap** - Get actionable recommendations with ROI estimates
|
|
- **📈 Benchmarking** - Performance regression testing and comparison
|
|
- **🛠️ CLI Tool** - Professional command-line interface with multiple output formats
|
|
|
|
#### **Example Output**
|
|
```
|
|
🔍 Running comprehensive performance audit...
|
|
📊 Configuration:
|
|
Max Component Size: 5.0 KB
|
|
Max Render Time: 16.0 ms
|
|
Max Memory Usage: 1.0 MB
|
|
Output Format: Text
|
|
|
|
⏳ Analyzing components...
|
|
✅ Analysis complete!
|
|
|
|
📊 Performance Audit Results
|
|
Overall Score: 64.0/100 (D)
|
|
Meets Targets: ❌ No
|
|
|
|
📦 Bundle Analysis:
|
|
Overall Efficiency: 44.6%
|
|
Total Size: 23.0 KB
|
|
Average Component Size: 4.6 KB
|
|
|
|
⚡ Performance Monitoring:
|
|
Overall Score: 83.3%
|
|
Failing Components: 2
|
|
|
|
🗺️ Optimization Roadmap:
|
|
Total Recommendations: 6
|
|
Estimated Effort: 40.0 hours
|
|
Expected Impact: 470.0%
|
|
```
|
|
|
|
### **Run Examples**
|
|
|
|
```bash
|
|
# Clone the repository
|
|
git clone https://github.com/cloud-shuttle/leptos-shadcn-ui.git
|
|
cd leptos-shadcn-ui
|
|
|
|
# Run the example app
|
|
cd examples/leptos
|
|
trunk serve
|
|
```
|
|
|
|
---
|
|
|
|
## 📦 **Available Components**
|
|
|
|
### **Form Components**
|
|
- **Button** - `leptos-shadcn-button v0.4.0`
|
|
- **Input** - `leptos-shadcn-input v0.4.0`
|
|
- **Label** - `leptos-shadcn-label v0.4.0`
|
|
- **Checkbox** - `leptos-shadcn-checkbox v0.4.0`
|
|
- **Switch** - `leptos-shadcn-switch v0.4.0`
|
|
- **Radio Group** - `leptos-shadcn-radio-group v0.4.0`
|
|
- **Select** - `leptos-shadcn-select v0.4.0`
|
|
- **Textarea** - `leptos-shadcn-textarea v0.4.0`
|
|
- **Form** - `leptos-shadcn-form v0.4.0`
|
|
- **Combobox** - `leptos-shadcn-combobox v0.4.0`
|
|
- **Command** - `leptos-shadcn-command v0.4.0`
|
|
- **Input OTP** - `leptos-shadcn-input-otp v0.4.0`
|
|
|
|
### **Layout Components**
|
|
- **Card** - `leptos-shadcn-card v0.4.0`
|
|
- **Separator** - `leptos-shadcn-separator v0.4.0`
|
|
- **Tabs** - `leptos-shadcn-tabs v0.4.0`
|
|
- **Accordion** - `leptos-shadcn-accordion v0.4.0`
|
|
- **Collapsible** - `leptos-shadcn-collapsible v0.4.0`
|
|
- **Scroll Area** - `leptos-shadcn-scroll-area v0.4.0`
|
|
- **Aspect Ratio** - `leptos-shadcn-aspect-ratio v0.4.0`
|
|
- **Resizable** - `leptos-shadcn-resizable v0.4.0`
|
|
|
|
### **Overlay Components**
|
|
- **Dialog** - `leptos-shadcn-dialog v0.4.0`
|
|
- **Popover** - `leptos-shadcn-popover v0.4.0`
|
|
- **Tooltip** - `leptos-shadcn-tooltip v0.4.0`
|
|
- **Alert Dialog** - `leptos-shadcn-alert-dialog v0.4.0`
|
|
- **Sheet** - `leptos-shadcn-sheet v0.4.0`
|
|
- **Drawer** - `leptos-shadcn-drawer v0.4.0`
|
|
- **Hover Card** - `leptos-shadcn-hover-card v0.4.0`
|
|
|
|
### **Navigation Components**
|
|
- **Breadcrumb** - `leptos-shadcn-breadcrumb v0.4.0`
|
|
- **Navigation Menu** - `leptos-shadcn-navigation-menu v0.4.0`
|
|
- **Context Menu** - `leptos-shadcn-context-menu v0.4.0`
|
|
- **Dropdown Menu** - `leptos-shadcn-dropdown-menu v0.4.0`
|
|
- **Menubar** - `leptos-shadcn-menubar v0.4.0`
|
|
|
|
### **Feedback & Status**
|
|
- **Alert** - `leptos-shadcn-alert v0.4.0`
|
|
- **Badge** - `leptos-shadcn-badge v0.4.0`
|
|
- **Skeleton** - `leptos-shadcn-skeleton v0.4.0`
|
|
- **Progress** - `leptos-shadcn-progress v0.4.0`
|
|
- **Toast** - `leptos-shadcn-toast v0.4.0`
|
|
- **Table** - `leptos-shadcn-table v0.4.0`
|
|
- **Calendar** - `leptos-shadcn-calendar v0.4.0`
|
|
- **Date Picker** - `leptos-shadcn-date-picker v0.4.0`
|
|
- **Pagination** - `leptos-shadcn-pagination v0.4.0`
|
|
|
|
### **Interactive Components**
|
|
- **Slider** - `leptos-shadcn-slider v0.4.0`
|
|
- **Toggle** - `leptos-shadcn-toggle v0.4.0`
|
|
- **Carousel** - `leptos-shadcn-carousel v0.4.0`
|
|
- **Avatar** - `leptos-shadcn-avatar v0.4.0`
|
|
|
|
### **Performance & Development**
|
|
- **Performance Audit** - `leptos-shadcn-performance-audit v0.1.0` ⭐ **NEW!**
|
|
- **Error Boundary** - `leptos-shadcn-error-boundary v0.4.0`
|
|
- **Lazy Loading** - `leptos-shadcn-lazy-loading v0.4.0`
|
|
- **Registry** - `leptos-shadcn-registry v0.1.0`
|
|
|
|
---
|
|
|
|
## 🧪 **Testing & Quality**
|
|
|
|
### **Run Unit Tests**
|
|
|
|
```bash
|
|
# Test individual components
|
|
cargo test --package leptos-shadcn-button --lib
|
|
cargo test --package leptos-shadcn-input --lib
|
|
|
|
# Test performance audit system
|
|
cargo test -p leptos-shadcn-performance-audit
|
|
|
|
# Test all components
|
|
cargo test --workspace
|
|
```
|
|
|
|
### **Performance Audit Testing**
|
|
|
|
The performance audit system includes comprehensive testing:
|
|
|
|
```bash
|
|
# Run all performance audit tests (53 tests)
|
|
cargo test -p leptos-shadcn-performance-audit
|
|
|
|
# Run specific test suites
|
|
cargo test -p leptos-shadcn-performance-audit --lib
|
|
cargo test -p leptos-shadcn-performance-audit --test performance_audit_tests
|
|
|
|
# Test CLI tool
|
|
cargo run -p leptos-shadcn-performance-audit --bin performance-audit -- --help
|
|
```
|
|
|
|
### **Run E2E Tests**
|
|
|
|
```bash
|
|
# Install Playwright
|
|
make install-playwright
|
|
|
|
# Run all E2E tests
|
|
make test-e2e
|
|
|
|
# Run specific test categories
|
|
make test-e2e-specific FILE=tests/e2e/accessibility.spec.ts
|
|
```
|
|
|
|
### **Quality Metrics**
|
|
|
|
- **Components**: 46/46 (100% tested)
|
|
- **Unit Tests**: 300+ tests passing
|
|
- **E2E Tests**: 129 tests passing
|
|
- **Test Coverage**: 100% for all components
|
|
- **Quality Standards**: Production-ready
|
|
|
|
---
|
|
|
|
## 📚 **Documentation**
|
|
|
|
### **📁 Organized Documentation Structure**
|
|
|
|
- **[📚 Documentation Index](docs/README.md)** - Complete documentation overview
|
|
- **[🧪 TDD Implementation](docs/tdd/)** - Complete Test-Driven Development docs
|
|
- **[🏗️ Architecture](docs/architecture/)** - System design and migration guides
|
|
- **[🔧 Development](docs/development/)** - Tools and component generation
|
|
- **[📦 Releases](docs/releases/)** - Release notes and changelog
|
|
- **[🎨 Components](docs/components/)** - Usage examples and guides
|
|
|
|
### **Key Documentation**
|
|
|
|
- **[TDD Completion Summary](docs/tdd/completion/TDD_COMPLETION_SUMMARY.md)** - Our achievement story
|
|
- **[Testing Guide](docs/testing/TESTING_GUIDE.md)** - How to test components
|
|
- **[Component Examples](docs/components/example-usage.md)** - Usage patterns
|
|
- **[Release Notes](docs/releases/RELEASE_NOTES.md)** - What's new
|
|
|
|
---
|
|
|
|
## 🎨 **Available Components**
|
|
|
|
### **Form Components**
|
|
- **Button** - Variants, sizes, and accessibility
|
|
- **Input** - Text, email, password with validation
|
|
- **Checkbox** - State management and accessibility
|
|
- **Label** - Form associations and styling
|
|
- **Form** - Complete form handling
|
|
- **Textarea** - Multi-line input
|
|
- **Select** - Dropdown selection
|
|
- **Switch** - Toggle controls
|
|
- **Radio Group** - Radio button groups
|
|
- **Input OTP** - One-time password input
|
|
|
|
### **Layout Components**
|
|
- **Card** - Content containers
|
|
- **Separator** - Visual dividers
|
|
- **Accordion** - Collapsible content
|
|
- **Collapsible** - Content hiding/showing
|
|
- **Tabs** - Tabbed interfaces
|
|
- **Table** - Data presentation
|
|
- **Aspect Ratio** - Responsive containers
|
|
- **Scroll Area** - Scrollable content
|
|
|
|
### **Navigation Components**
|
|
- **Navigation Menu** - Main navigation
|
|
- **Menubar** - Application menus
|
|
- **Context Menu** - Right-click menus
|
|
- **Breadcrumb** - Navigation paths
|
|
- **Pagination** - Page navigation
|
|
|
|
### **Overlay Components**
|
|
- **Dialog** - Modal dialogs
|
|
- **Popover** - Floating content
|
|
- **Sheet** - Side panels
|
|
- **Drawer** - Drawer panels
|
|
- **Tooltip** - Hover information
|
|
- **Hover Card** - Rich hover content
|
|
- **Alert** - Notifications
|
|
- **Alert Dialog** - Confirmation dialogs
|
|
- **Toast** - Temporary messages
|
|
|
|
### **Data Display**
|
|
- **Calendar** - Date display
|
|
- **Date Picker** - Date selection
|
|
- **Progress** - Loading indicators
|
|
- **Skeleton** - Loading placeholders
|
|
- **Badge** - Status indicators
|
|
- **Avatar** - User representation
|
|
|
|
### **Interactive Components**
|
|
- **Slider** - Range input
|
|
- **Carousel** - Image rotation
|
|
- **Combobox** - Search and select
|
|
- **Command** - Command palette
|
|
- **Dropdown Menu** - Expandable menus
|
|
|
|
### **Utility Components**
|
|
- **Error Boundary** - Error handling
|
|
- **Lazy Loading** - Performance optimization
|
|
|
|
---
|
|
|
|
## 🏗️ **Architecture**
|
|
|
|
### **Built for Leptos v0.8+**
|
|
- **Modern Reactivity** - Uses latest Leptos signals and effects
|
|
- **Type Safety** - Comprehensive Rust type system
|
|
- **Performance** - WebAssembly compilation for speed
|
|
- **Accessibility** - WCAG compliance built-in
|
|
|
|
### **Design System**
|
|
- **ShadCN UI** - Beautiful, accessible design patterns
|
|
- **Tailwind CSS** - Utility-first styling
|
|
- **Theme Support** - Light/dark mode and customization
|
|
- **Responsive** - Mobile-first design approach
|
|
|
|
---
|
|
|
|
## 🤝 **Contributing**
|
|
|
|
### **Development Workflow**
|
|
1. **Fork** the repository
|
|
2. **Create** a feature branch
|
|
3. **Implement** your changes with tests
|
|
4. **Run** the test suite
|
|
5. **Submit** a pull request
|
|
|
|
### **Testing Requirements**
|
|
- All new components must have comprehensive unit tests
|
|
- E2E tests must pass for affected workflows
|
|
- Accessibility standards must be maintained
|
|
- Performance benchmarks must be met
|
|
|
|
### **Quality Standards**
|
|
- **100% Test Coverage** - Every component must be tested
|
|
- **Accessibility First** - WCAG compliance required
|
|
- **Performance** - No memory leaks or bottlenecks
|
|
- **Documentation** - Clear examples and guides
|
|
|
|
---
|
|
|
|
## 📊 **Performance & Quality**
|
|
|
|
### **Test Results**
|
|
- **Unit Tests**: ✅ All 300+ tests passing
|
|
- **E2E Tests**: ✅ All 129 tests passing
|
|
- **Accessibility**: ✅ WCAG 2.1 AA compliant
|
|
- **Performance**: ✅ No memory leaks detected
|
|
- **Cross-Browser**: ✅ Chrome, Firefox, Safari, Mobile
|
|
|
|
### **Bundle Optimization**
|
|
- **Code Splitting** - Components load on demand
|
|
- **Tree Shaking** - Unused code eliminated
|
|
- **WASM Optimization** - Optimized WebAssembly output
|
|
- **CSS Optimization** - Minimal, efficient styles
|
|
|
|
---
|
|
|
|
## 🚀 **Getting Help**
|
|
|
|
### **Resources**
|
|
- **[GitHub Issues](https://github.com/cloud-shuttle/leptos-shadcn-ui/issues)** - Bug reports and feature requests
|
|
- **[Discussions](https://github.com/cloud-shuttle/leptos-shadcn-ui/discussions)** - Community support
|
|
- **[Documentation](https://shadcn-ui.rustforweb.org/)** - Component API reference
|
|
|
|
### **Common Issues**
|
|
- Check the [testing guide](docs/testing/TESTING_GUIDE.md) for common problems
|
|
- Review the [defects register](docs/quality/defects-register.md) for known issues
|
|
- Consult the [architecture documentation](docs/architecture/) for system design questions
|
|
|
|
---
|
|
|
|
## 🏆 **Achievements**
|
|
|
|
This project represents a **major achievement** in component library development:
|
|
|
|
- **Industry-Leading Quality**: 100% test coverage with comprehensive validation
|
|
- **Production Ready**: All components tested and validated for real-world use
|
|
- **Accessibility First**: WCAG compliance built into every component
|
|
- **Performance Optimized**: No memory leaks or performance bottlenecks
|
|
- **Cross-Platform**: Works consistently across all major browsers and devices
|
|
|
|
**We've achieved what many enterprise teams strive for but rarely accomplish - comprehensive testing coverage at both the unit and integration levels!** 🚀
|
|
|
|
---
|
|
|
|
## 📄 **License**
|
|
|
|
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
|
|
|
---
|
|
|
|
**Last Updated**: December 2024
|
|
**Status**: ✅ **Production Ready**
|
|
**Version**: 0.2.0
|
|
|
|
**Built with ❤️ by the CloudShuttle team**
|