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

// Add to all test modules:
use leptos::prelude::*;
use leptos::view;
use leptos::callback::Callback;
use crate::default::*;

1.2 Fix Unicode Issues

// BEFORE (BROKEN):
<CommandShortcut>⌘K</CommandShortcut>

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

1.3 Fix API Mismatches

// 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

// 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

// 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)

#[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)

#[derive(Debug, Clone, PartialEq)]
pub enum CommandVariant {
    Default,
    Destructive,
    Outline,
}

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

3.3 Enhance Command API

#[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