leptos-shadcn-ui/docs/remediation/command-component-fix.md

# 🔧 **Command Component Fix**

## **Critical Issues Identified**

### **Compilation Errors (88+)**
- **Missing Imports**: `view!`, `Callback`, `RwSignal` not imported
- **Unicode Issues**: `⌘` characters causing compilation errors
- **API Mismatches**: Tests written against non-existent APIs

### **Root Cause Analysis**
The TDD test refactoring created tests with:
1. **Missing Imports**: Core Leptos macros and types not imported
2. **Unicode Characters**: Command shortcut symbols causing token errors
3. **API Mismatches**: Tests for properties that don't exist

## **Fix Strategy**

### **Phase 1: Fix Import Issues**

#### **1.1 Add Missing Imports**
```rust
// Add to all test modules:
use leptos::prelude::*;
use leptos::view;
use leptos::callback::Callback;
use crate::default::*;
```

#### **1.2 Fix Unicode Issues**
```rust
// BEFORE (BROKEN):
<CommandShortcut>⌘K</CommandShortcut>

// AFTER (FIXED):
<CommandShortcut>"⌘K"</CommandShortcut>
// OR use HTML entities:
<CommandShortcut>"&#8984;K"</CommandShortcut>
```

#### **1.3 Fix API Mismatches**
```rust
// REMOVE these non-existent properties:
size=size                    // ❌ No such property
variant=variant              // ❌ No such property
disabled=disabled            // ❌ No such property
loading=loading              // ❌ No such property
```

### **Phase 2: Restructure Test Modules**

#### **2.1 Fix Test Module Structure**
```rust
// Update test modules to match actual Command API:
pub mod basic_rendering_tests {
    // Test actual properties: value, on_select, class, id
}

pub mod component_tests {
    // Test CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem
}

pub mod interaction_tests {
    // Test keyboard navigation, performance
}

pub mod accessibility_tests {
    // Test accessibility features
}
```

#### **2.2 Fix Module Dependencies**
```rust
// Fix module structure:
pub mod tdd_tests {
    pub mod basic_rendering_tests;
    pub mod component_tests;
    pub mod interaction_tests;
    pub mod accessibility_tests;
    pub mod integration_tests;
}
```

### **Phase 3: Implement Missing Features**

#### **3.1 Add Size Support (Optional)**
```rust
#[derive(Debug, Clone, PartialEq)]
pub enum CommandSize {
    Sm,
    Default,
    Lg,
}

impl Default for CommandSize {
    fn default() -> Self {
        Self::Default
    }
}
```

#### **3.2 Add Variant Support (Optional)**
```rust
#[derive(Debug, Clone, PartialEq)]
pub enum CommandVariant {
    Default,
    Destructive,
    Outline,
}

impl Default for CommandVariant {
    fn default() -> Self {
        Self::Default
    }
}
```

#### **3.3 Enhance Command API**
```rust
#[component]
pub fn Command(
    #[prop(into, optional)] value: Option<Signal<String>>,
    #[prop(into, optional)] on_select: Option<Callback<String>>,
    #[prop(into, optional)] class: Option<String>,
    #[prop(into, optional)] id: Option<String>,
    #[prop(into, optional)] placeholder: Option<String>,
    #[prop(into, optional)] disabled: Option<Signal<bool>>,
    #[prop(into, optional)] children: Option<Children>,
) -> impl IntoView
```

## **Implementation Plan**

### **Week 1: Critical Fixes**
- [ ] Fix all import issues
- [ ] Remove Unicode characters
- [ ] Fix API mismatches
- [ ] Align tests with actual Command API

### **Week 2: Feature Implementation**
- [ ] Implement size support (optional)
- [ ] Implement variant support (optional)
- [ ] Enhance Command API
- [ ] Add proper error handling

### **Week 3: Testing & Validation**
- [ ] Run full test suite
- [ ] Add integration tests
- [ ] Performance testing
- [ ] Documentation updates

## **Success Criteria**

### **Compilation**
- [ ] `cargo check` passes without errors
- [ ] `cargo test` runs successfully
- [ ] All test modules compile

### **Functionality**
- [ ] Command component works with actual API
- [ ] Keyboard navigation works
- [ ] Accessibility features work
- [ ] Performance is acceptable

### **Testing**
- [ ] All tests pass
- [ ] Test coverage is accurate
- [ ] Integration tests work
- [ ] Performance benchmarks pass

## **Risk Mitigation**

### **High Risk**
- **API Changes**: Ensure backward compatibility
- **Keyboard Navigation**: Ensure keyboard navigation works
- **Accessibility**: Ensure accessibility features work

### **Medium Risk**
- **Test Coverage**: Maintain comprehensive test coverage
- **Documentation**: Keep documentation up to date

### **Low Risk**
- **Import Issues**: Standardize import patterns
- **Code Style**: Maintain consistent code style

## **Files to Fix**

### **Critical Files**
1. `packages/leptos/command/src/tdd_tests/basic_rendering_tests.rs`
2. `packages/leptos/command/src/tdd_tests/component_tests.rs`
3. `packages/leptos/command/src/tdd_tests/interaction_tests.rs`
4. `packages/leptos/command/src/tdd_tests/accessibility_tests.rs`

### **Supporting Files**
1. `packages/leptos/command/src/default.rs`
2. `packages/leptos/command/src/lib.rs`
3. `packages/leptos/command/src/tdd_tests/mod.rs`

---

**Priority**: 🔴 **P0 - CRITICAL**
**Estimated Effort**: 3 weeks
**Dependencies**: None