leptos-shadcn-ui/docs/remediation/component-designs

🎨 Component Design Documents

Overview

This directory contains small design files (under 300 lines) for each component that needs to be built or fixed in the leptos-shadcn-ui project.

Design Documents

🔴 P0 - Critical Components (Broken)

• signal-management-design.md - Signal lifecycle management utilities
• input-component-design.md - Text input with validation
• command-component-design.md - Command palette interface

🟢 P2 - Working Components (Reference)

• button-component-design.md - Interactive buttons with variants
• form-component-design.md - Form building blocks

Design Principles

1. Small and Focused

• Each design file is under 300 lines
• Focused on a single component or related components
• Clear separation of concerns

2. Production Ready

• Complete API definitions
• Proper error handling
• Accessibility features
• Type safety

3. Leptos 0.8+ Compatible

• Uses latest Leptos patterns
• Signal-based reactivity
• Proper component structure
• Modern Rust practices

4. ShadCN UI Compatible

• Matches ShadCN UI design system
• Consistent styling patterns
• Proper variant and size support
• Accessibility compliance

Component Structure

Core Component

#[component]
pub fn ComponentName(
    // Props with proper types
    #[prop(into, optional)] prop1: Option<Type1>,
    #[prop(into, optional)] prop2: Option<Signal<Type2>>,
    // ... other props
) -> impl IntoView {
    // Component implementation
}

Supporting Types

#[derive(Debug, Clone, PartialEq)]
pub enum ComponentVariant {
    // Variant options
}

#[derive(Debug, Clone, PartialEq)]
pub enum ComponentSize {
    // Size options
}

Usage Examples

view! {
    <ComponentName
        prop1=value1
        prop2=signal2
    >
        "Content"
    </ComponentName>
}

Implementation Guidelines

1. Props Design

• Use Option<T> for optional props
• Use Signal<T> for reactive props
• Use Callback<T> for event handlers
• Use Children for child content

2. Styling

• Use Tailwind CSS classes
• Support custom classes via class prop
• Implement variant and size systems
• Ensure responsive design

3. Accessibility

• Proper ARIA attributes
• Keyboard navigation support
• Screen reader compatibility
• Focus management

4. Error Handling

• Use Result<T, E> for fallible operations
• Provide meaningful error messages
• Handle edge cases gracefully
• Log errors appropriately

Testing Strategy

1. Unit Tests

• Test component rendering
• Test prop handling
• Test event handling
• Test state management

2. Integration Tests

• Test component interactions
• Test form validation
• Test accessibility features
• Test performance

3. E2E Tests

• Test user workflows
• Test keyboard navigation
• Test screen reader compatibility
• Test responsive behavior

Documentation Standards

1. API Documentation

• Document all props
• Provide usage examples
• Explain behavior
• Note limitations

2. Code Comments

• Explain complex logic
• Document assumptions
• Provide context
• Note future improvements

3. Examples

• Basic usage
• Advanced features
• Common patterns
• Best practices

Quality Checklist

Before Implementation

• Design document is complete
• API is well-defined
• Examples are provided
• Accessibility is considered

During Implementation

• Follows design document
• Implements all features
• Handles errors properly
• Includes tests

After Implementation

• All tests pass
• Documentation is updated
• Examples work
• Performance is acceptable

---

Last Updated: 2025-01-27 Status: 📋 DESIGN PHASE