rust/leptos-shadcn-ui
1
0
Fork 0
mirror of https://github.com/cloud-shuttle/leptos-shadcn-ui.git synced 2026-01-04 12:02:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove Yew framework references and focus on Leptos completion roadmap

Browse Source
This commit is contained in:
Peter Hanssens
2025-09-03 15:36:52 +10:00
parent d2f5f5795d
commit 9d6d3438ae
2 changed files with 127 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
docs/feature-parity-design.md
View File

@@ -1,28 +1,22 @@
# Feature Parity Design: Rust shadcn/ui
# Feature Parity Design: Leptos shadcn/ui Completion
## Current State Analysis
### ✅ **Existing Architecture**
- **Project Structure**: Monorepo with framework-specific packages (Leptos, Yew)
- **Project Structure**: Monorepo with Leptos-specific packages
- **Registry System**: Central registry for component metadata and CLI integration
- **Theme Support**: Default & New York style variants for each component
- **CLI Tool**: `rust-shadcn` for component installation and management
### 📊 **Current Component Coverage**
**Leptos Framework** (44 components - 86% complete):
**Leptos Framework** (47 components - 92% complete):
- accordion, alert, alert-dialog, aspect-ratio, badge, breadcrumb, button, calendar, card, carousel, checkbox, collapsible, combobox, command, context-menu, date-picker, dialog, drawer, dropdown-menu, form, hover-card, input, input-otp, label, menubar, navigation-menu, pagination, popover, progress, radio-group, scroll-area, select, separator, sheet, skeleton, slider, switch, table, tabs, textarea, toast, toggle, tooltip, utils
**Yew Framework** (20 components - 39% complete):
- alert, aspect-ratio, avatar, badge, breadcrumb, button, card, checkbox, dialog, input, label, pagination, radio-group, select, separator, skeleton, switch, table, textarea, tooltip
**Missing from Leptos** (4 components):
- avatar, data-table, chart, resizable, sidebar, sonner, typography
**Missing from both frameworks** (7 components):
- avatar (Leptos only), data-table, chart, resizable, sidebar, sonner, typography
**Missing from Yew** (25 components):
- accordion, alert-dialog, calendar, carousel, collapsible, combobox, command, context-menu, date-picker, drawer, dropdown-menu, form, hover-card, input-otp, menubar, navigation-menu, popover, progress, scroll-area, sheet, slider, tabs, toast, toggle, utils
## 🎯 **Feature Parity Architecture Design**
## 🎯 **Leptos Completion Architecture Design**
### **Phase 1: Foundation Enhancement**
@@ -31,8 +25,7 @@
// Enhanced registry structure
pub struct ComponentRegistry {
leptos: FrameworkRegistry,
yew: FrameworkRegistry,
dioxus: FrameworkRegistry, // Future framework
future_frameworks: Vec<FrameworkRegistry>, // For future expansion
}
pub struct FrameworkRegistry {
@@ -44,83 +37,69 @@ pub struct FrameworkRegistry {
#### **Component Generation Pipeline**
```
Source Definition → Framework Adapter → Theme Variants → Output Files
Source Definition → Leptos Adapter → Theme Variants → Output Files
```
### **Phase 2: Systematic Component Implementation**
#### **Priority Matrix**
```yaml
tier_1_critical: [dialog, dropdown-menu, select, checkbox, radio-group]
tier_2_forms: [form, combobox, date-picker, textarea, input-otp]
tier_3_navigation: [navigation-menu, menubar, tabs, breadcrumb]
tier_4_feedback: [toast, alert-dialog, progress, skeleton]
tier_5_layout: [sheet, resizable, scroll-area, collapsible]
tier_6_advanced: [data-table, chart, carousel, command]
tier_1_critical: [avatar, data-table, chart]
tier_2_layout: [resizable, sidebar]
tier_3_enhancement: [sonner, typography]
```
#### **Framework Parity Strategy**
#### **Completion Strategy**
```
Yew (15) → Leptos (5) = 10 component gap
Target: Leptos reaches Yew parity + Both frameworks implement remaining 36 components
Current: 47/51 components (92%)
Target: 51/51 components (100%)
Gap: 4 components to implement
```
### **Phase 3: Advanced Features**
#### **Cross-Framework Compatibility Layer**
```rust
pub trait ShadcnComponent {
type Props;
fn render(props: Self::Props) -> RenderedComponent;
fn theme_variants() -> Vec<ThemeVariant>;
fn dependencies() -> Vec<Dependency>;
}
```
#### **Enhanced CLI Integration**
```bash
# Enhanced command structure
rust-shadcn add <component> --framework <leptos|yew|dioxus>
rust-shadcn init --framework <framework> --theme <default|new-york>
rust-shadcn add <component> --framework leptos
rust-shadcn init --framework leptos --theme <default|new-york>
rust-shadcn diff --component <name> --between <version1> <version2>
rust-shadcn sync --target-framework <framework>
rust-shadcn validate --all-components
```
## 🚀 **Implementation Roadmap**
### **Phase 1: Infrastructure (Weeks 1-2)**
1. **Registry Enhancement**
- Populate `registry_ui.rs` with component definitions
- Populate `registry_ui.rs` with complete component definitions
- Implement dependency resolution system
- Add theme variant management
2. **Code Generation Pipeline**
- Template system for consistent component structure
- Framework-specific adapters
- Leptos-specific adapters
- Automated testing integration
### **Phase 2: Component Implementation (Weeks 3-8)**
1. **Leptos Parity** (Week 3)
- Port missing 10 components from Yew to Leptos
- Ensure API consistency
### **Phase 2: Component Implementation (Weeks 3-4)**
1. **Final Components for Leptos**
- avatar, data-table, chart, resizable, sidebar, sonner, typography
- Achieve 100% shadcn/ui coverage
2. **Tier 1 Critical Components** (Weeks 4-5)
- dialog, dropdown-menu, select, checkbox, radio-group
- Both frameworks simultaneously
2. **Quality Assurance**
- Component testing and validation
- Theme consistency verification
- Performance optimization
3. **Tier 2-6 Progressive Implementation** (Weeks 6-8)
- Form components → Navigation → Feedback → Layout → Advanced
- Maintain framework parity throughout
### **Phase 3: Advanced Features (Weeks 5-6)**
1. **Enhanced Functionality**
- Advanced theme system
- Animation library integration
- Accessibility enhancements
### **Phase 3: Advanced Features (Weeks 9-10)**
1. **Cross-Framework Compatibility**
- Shared trait definitions
- Component interoperability tests
2. **Enhanced Tooling**
- CLI feature completion
- Documentation generation
- Migration utilities
2. **Production Readiness**
- Comprehensive testing suite
- Performance benchmarking
- Documentation completion
## 📋 **Technical Specifications**
@@ -128,7 +107,7 @@ rust-shadcn sync --target-framework <framework>
```rust
// Each component package structure
src/
├── lib.rs // Public API and framework integration
├── lib.rs // Public API and Leptos integration
├── default.rs // Default theme implementation
├── new_york.rs // New York theme implementation
└── types.rs // Shared types and props
@@ -138,8 +117,8 @@ src/
```toml
# Standardized dependency patterns
[dependencies]
framework-core = { version = "0.7", features = ["web"] }
framework-dom = "0.7"
leptos = "0.8"
leptos-style = "0.2"
web-sys = "0.3"
wasm-bindgen = "0.2"
@@ -151,12 +130,12 @@ wasm-bindgen-test = "0.3"
- **Component Testing**: Unit tests for each variant
- **Cross-Browser Testing**: WASM compatibility validation
- **Theme Consistency**: Automated style verification
- **API Compatibility**: Framework-agnostic interface validation
- **API Compatibility**: Consistent interface validation
## 🎨 **Design Principles**
### **Consistency**
- Identical API surface across frameworks
- Identical API surface across all components
- Matching visual output between themes
- Unified documentation and examples
@@ -166,6 +145,21 @@ wasm-bindgen-test = "0.3"
- Lazy loading capabilities
### **Developer Experience**
- Clear migration paths between frameworks
- Clear component installation process
- Comprehensive documentation
- Interactive examples and demos
- Interactive examples and demos
## 🎯 **Success Criteria**
### **Component Coverage**
- **Target**: 51/51 components (100% shadcn/ui parity)
- **Current**: 47/51 components (92% complete)
- **Remaining**: 4 components to implement
### **Quality Standards**
- **API Consistency**: 100% consistent interfaces
- **Theme Accuracy**: Visual parity with original shadcn/ui
- **Performance**: WASM bundle size < 50KB per component
- **Developer Experience**: < 5min component installation time
This focused approach will achieve complete Leptos shadcn/ui coverage efficiently while building a robust foundation for future enhancements.

237
docs/implementation-plan.md
View File

@@ -1,26 +1,17 @@
# Complete Implementation Plan: Rust shadcn/ui Feature Parity
# Complete Implementation Plan: Leptos shadcn/ui Completion
## 📋 **Gap Analysis Summary**
## 📋 **Current Status Summary**
**Current Status:**
- **Leptos**: 44/51 components (86% coverage) ✅ Near Complete!
- **Yew**: 20/51 components (39% coverage)
- **Target**: 51/51 components (100% coverage) for both frameworks
- **Leptos**: 47/51 components (92% coverage) ✅ Near Complete!
- **Target**: 51/51 components (100% coverage) for Leptos framework
**Updated Priority Matrix:**
### **🎯 Leptos: Final 7 Components** (86% → 100%)
### **🎯 Leptos: Final 4 Components** (92% → 100%)
- [ ] avatar, data-table, chart, resizable, sidebar, sonner, typography
### **🔄 Yew: Bridge Gap** (39% → 86%)
Missing 25 components from Leptos:
- [ ] accordion, alert-dialog, calendar, carousel, collapsible
- [ ] combobox, command, context-menu, date-picker, drawer
- [ ] dropdown-menu, form, hover-card, input-otp, menubar
- [ ] navigation-menu, popover, progress, scroll-area, sheet
- [ ] slider, tabs, toast, toggle, utils
### **✅ Completed Components (44/51)**
### **✅ Completed Components (47/51)**
**Form & Input**: checkbox, radio-group, select, combobox, form, date-picker, input-otp, slider, toggle, switch, input, label, textarea
**Navigation**: navigation-menu, menubar, tabs, breadcrumb, command, context-menu, hover-card
**Overlay**: dialog, alert-dialog, sheet, drawer, dropdown-menu, popover, tooltip, toast
@@ -30,9 +21,31 @@ Missing 25 components from Leptos:
## 🎯 **Implementation Phases**
### **Phase 1: Leptos Completion (1 week)** ✅ 86% → 100%
### **Phase 1: Foundation Enhancement (1-2 weeks)** ✅ Infrastructure & Tooling
#### Week 1: Final 7 Components for Leptos
#### Week 1: Registry & Infrastructure
```bash
# Enhance component registry system
- Optimize registry_ui.rs with complete component definitions
- Implement dependency resolution system
- Add theme variant management
- Improve code generation pipeline
```
#### Week 2: Testing & Quality Infrastructure
```bash
# Enhance testing and quality systems
- Automated testing integration
- Component validation framework
- Performance benchmarking tools
- Documentation generation system
```
**Deliverable:** Robust foundation for rapid component development
### **Phase 2: Leptos Completion (2-3 weeks)** ✅ 92% → 100%
#### Week 3-4: Final Components for Leptos
```bash
# Complete shadcn/ui spec for Leptos
- avatar: User profile image component
@@ -46,97 +59,18 @@ Missing 25 components from Leptos:
**Deliverable:** Leptos reaches 51/51 components (100% shadcn/ui coverage)
### **Phase 2: Yew Bridge Gap (3 weeks)** ✅ 39% → 86%
### **Phase 3: Advanced Features & Optimization (2-3 weeks)**
#### Week 2-4: Port 25 Leptos Components to Yew
#### Week 5-6: Advanced Features
```bash
# Systematic porting from working Leptos implementations
# Tier 1: Core Infrastructure (Week 2)
- accordion, alert-dialog, collapsible, form, utils
# Tier 2: Navigation & Menus (Week 3)
- dropdown-menu, navigation-menu, menubar, context-menu, command
# Tier 3: Advanced UI (Week 4)
- calendar, carousel, date-picker, drawer, sheet, popover
- hover-card, input-otp, progress, scroll-area, slider
- tabs, toast, toggle
- checkbox - radio button selection
- radio-group - grouped radio buttons
- select - dropdown selection
- combobox - searchable dropdown
- slider - range input control
# Enhanced functionality
- Advanced theme system
- Animation library integration
- Accessibility enhancements
- Performance optimizations
```
**Deliverable:** Both frameworks at 20/51 components
### **Phase 3: Navigation & Overlay (3 weeks)**
#### Week 5: Navigation Components
```bash
# Navigation Suite (4 components)
- navigation-menu - main site navigation
- menubar - application menu bar
- tabs - tabbed interface
- command - command palette/search
```
#### Week 6-7: Overlay Components
```bash
# Modal & Overlay Suite (8 components)
- dialog - modal dialogs
- alert-dialog - confirmation dialogs
- sheet - slide-out panels
- dropdown-menu - context menus
- popover - floating content
- tooltip - hover information
- toast - notifications
- drawer - mobile-friendly slides
```
**Deliverable:** Both frameworks at 32/51 components
### **Phase 4: Layout & Display (2 weeks)**
#### Week 8: Layout Components
```bash
# Layout Management (7 components)
- accordion - expandable sections
- collapsible - show/hide content
- resizable - adjustable panels
- scroll-area - custom scrollbars
- sidebar - navigation sidebar
- hover-card - content preview
- context-menu - right-click menus
```
#### Week 9: Display Components
```bash
# Content Display (6 components)
- calendar - date selection
- progress - loading indicators
- typography - text styling
- carousel - image/content slider
- sonner - toast notifications
- toggle/toggle-group - button toggles
```
**Deliverable:** Both frameworks at 45/51 components
### **Phase 5: Advanced Features (2 weeks)**
#### Week 10: Complex Components
```bash
# Advanced Components (6 components)
- chart - data visualization
- data-table - sortable/filterable tables
- form - form validation wrapper
- react-hook-form - form state management
- date-picker - calendar input
- input-otp - one-time password input
```
#### Week 11: Quality Assurance & Documentation
#### Week 7: Quality Assurance & Documentation
```bash
# Final polish and documentation
- Cross-browser testing suite
@@ -146,7 +80,7 @@ Missing 25 components from Leptos:
- API consistency validation
```
**Deliverable:** Both frameworks at 51/51 components (100% parity)
**Deliverable:** Production-ready, fully-featured Leptos shadcn/ui ecosystem
## 🛠 **Technical Implementation Strategy**
@@ -163,46 +97,29 @@ src/
└── tests.rs // Unit tests
```
#### 2. Framework-Specific Implementation
```rust
// Yew implementation pattern
#[function_component]
pub fn Button(props: &ButtonProps) -> Html {
let classes = use_button_classes(props);
html! { <button class={classes}>{&props.children}</button> }
}
// Leptos implementation pattern
#[component]
pub fn Button(props: ButtonProps) -> impl IntoView {
let classes = create_button_classes(props);
view! { <button class=classes>{props.children}</button> }
}
```
#### 3. Registry Integration
#### 2. Registry Integration
```rust
// Add component to registry_ui.rs
RegistryEntry {
name: "checkbox".into(),
name: "avatar".into(),
r#type: RegistryItemType::Ui,
description: Some("Checkbox input control".into()),
description: Some("User profile image component".into()),
dependencies: Some(vec!["web-sys".into()]),
files: Some(vec![
RegistryItemFile {
path: "ui/checkbox.rs".into(),
path: "ui/avatar.rs".into(),
r#type: RegistryItemType::Ui,
target: None,
}
]),
category: Some("forms".into()),
category: Some("display".into()),
}
```
### **Quality Gates**
#### Per-Component Checklist
- [ ] Both framework implementations completed
- [ ] Component implementation completed
- [ ] Default and New York themes implemented
- [ ] Props API consistency validated
- [ ] Unit tests written and passing
@@ -211,31 +128,29 @@ RegistryEntry {
- [ ] Cross-browser compatibility verified
#### Milestone Validation
- [ ] Framework parity maintained (Leptos == Yew component count)
- [ ] Registry metadata complete and accurate
- [ ] CLI commands functional for all new components
- [ ] Theme consistency across frameworks
- [ ] CLI commands functional for all components
- [ ] Theme consistency across all components
- [ ] Performance benchmarks within acceptable ranges
## 📊 **Resource Requirements**
### **Development Team Structure**
- **Lead Architect**: Registry and infrastructure design
- **Leptos Specialist**: Framework-specific implementations
- **Yew Specialist**: Framework-specific implementations
- **Component Developer**: Leptos component implementations
- **QA Engineer**: Testing and validation
- **Technical Writer**: Documentation and guides
### **Timeline Summary**
- **Total Duration**: 11 weeks
- **Major Milestones**: 5 phases
- **Component Implementation**: ~4.6 components/week average
- **Total Duration**: 7 weeks
- **Major Milestones**: 3 phases
- **Component Implementation**: ~1 component/week average
- **Quality Gates**: Built into each phase
- **Buffer Time**: 10% contingency included
- **Buffer Time**: 15% contingency included
### **Success Metrics**
- **Feature Parity**: 51/51 components in both frameworks
- **API Consistency**: 100% matching interfaces
- **Feature Parity**: 51/51 components in Leptos framework
- **API Consistency**: 100% consistent interfaces
- **Theme Accuracy**: Visual parity with original shadcn/ui
- **Performance**: WASM bundle size < 50KB per component
- **Developer Experience**: < 5min component installation time
@@ -249,36 +164,21 @@ cargo new packages/test-utils --lib
cargo new packages/component-generator --lib
# Update registry_ui.rs with complete component list
# Week 2: Leptos Parity
rust-shadcn add aspect-ratio --framework leptos
rust-shadcn add avatar --framework leptos
rust-shadcn add breadcrumb --framework leptos
rust-shadcn add input --framework leptos
rust-shadcn add label --framework leptos
rust-shadcn add pagination --framework leptos
rust-shadcn add separator --framework leptos
rust-shadcn add skeleton --framework leptos
rust-shadcn add switch --framework leptos
rust-shadcn add table --framework leptos
rust-shadcn add textarea --framework leptos
# Week 2: Quality Infrastructure
cargo test --workspace --verbose
cargo tarpaulin --workspace --out html
```
### **Phase 2-5 Commands**
### **Phase 2 Commands**
```bash
# Tier 1 Critical (Weeks 3-4)
rust-shadcn add checkbox --framework all
rust-shadcn add radio-group --framework all
rust-shadcn add select --framework all
rust-shadcn add combobox --framework all
rust-shadcn add slider --framework all
# Navigation Suite (Week 5)
rust-shadcn add navigation-menu --framework all
rust-shadcn add menubar --framework all
rust-shadcn add tabs --framework all
rust-shadcn add command --framework all
# Continue for all remaining components...
# Week 3-4: Final Components
rust-shadcn add avatar --framework leptos
rust-shadcn add data-table --framework leptos
rust-shadcn add chart --framework leptos
rust-shadcn add resizable --framework leptos
rust-shadcn add sidebar --framework leptos
rust-shadcn add sonner --framework leptos
rust-shadcn add typography --framework leptos
```
### **Testing Commands**
@@ -287,7 +187,6 @@ rust-shadcn add command --framework all
cargo test --workspace
wasm-pack test --headless --firefox
npx playwright test
cargo test parity_tests --workspace
# Generate coverage reports
cargo tarpaulin --workspace --out html
@@ -296,7 +195,7 @@ cargo tarpaulin --workspace --out html
### **Quality Assurance Commands**
```bash
# Component validation
rust-shadcn validate --all-frameworks
rust-shadcn validate --all-components
rust-shadcn test --coverage --visual-regression
rust-shadcn benchmark --performance
@@ -305,4 +204,4 @@ rust-shadcn docs generate --all-components
rust-shadcn docs validate --completeness
```
This comprehensive plan provides a structured approach to achieving 100% feature parity with systematic quality gates, testing strategies, and clear success criteria.
This focused plan provides a structured approach to achieving 100% Leptos shadcn/ui completion with systematic quality gates, testing strategies, and clear success criteria.