leptos-shadcn-ui/scripts

Leptos Component Generation Scripts

This directory contains scripts to automate the creation of Leptos components for the shadcn/ui Rust port.

Scripts Overview

1. generate_leptos_component.sh - Basic Component Generator

Simple script for generating individual components with basic templates.

Usage:

./scripts/generate_leptos_component.sh <component_name> [description]

Example:

./scripts/generate_leptos_component.sh input "Form input component"

2. generate_leptos_component_advanced.sh - Advanced Component Generator

Advanced script that generates components with specific templates based on component type.

Usage:

./scripts/generate_leptos_component_advanced.sh <component_name> <component_type> [description]

Component Types:

• basic - Simple components with children support
• form - Form input components with value handling
• interactive - Interactive components with click handlers and variants
• layout - Layout components with header/footer support
• feedback - Feedback components with variants and dismiss functionality

Examples:

# Generate a form input component
./scripts/generate_leptos_component_advanced.sh input form "Form input component"

# Generate an interactive button component
./scripts/generate_leptos_component_advanced.sh button interactive "Button component"

# Generate a layout card component
./scripts/generate_leptos_component_advanced.sh card layout "Card layout component"

3. generate_batch_components.sh - Batch Component Generator

Generates multiple components at once based on predefined phases.

Usage:

./scripts/generate_batch_components.sh <phase>

Phases:

• 1 - Core UI Components (input, label, textarea, separator, avatar, progress, skeleton, switch, slider, breadcrumb)
• 2 - Interactive Components (dialog, popover, dropdown-menu, accordion, collapsible, tabs, hover-card, alert-dialog, combobox, command)
• 3 - Advanced Components (form, table, data-table, calendar, date-picker, navigation-menu, context-menu, menubar, pagination, scroll-area)
• 4 - Complex Components (carousel, chart, drawer, sheet, sidebar, resizable, toggle, toggle-group, input-otp, toast, sonner, typography)
• all - Generate all phases at once

Examples:

# Generate all core UI components
./scripts/generate_batch_components.sh 1

# Generate all components
./scripts/generate_batch_components.sh all

Generated Files

Each component generation creates the following structure:

packages/leptos/<component_name>/
├── Cargo.toml              # Package configuration
├── README.md               # Component documentation
└── src/
    ├── lib.rs              # Module exports
    ├── default.rs          # Default theme implementation
    ├── new_york.rs         # New York theme implementation
    └── tests.rs            # Test suite

Additionally, if the book examples directory exists:

book-examples/leptos/src/
├── default/<component_name>.rs    # Default theme example
└── new_york/<component_name>.rs   # New York theme example

Component Templates

Basic Template

Simple components with children support and standard props.

Form Template

Components with:

• Value handling (value, on_change)
• Placeholder support
• Input type configuration
• Disabled state

Interactive Template

Components with:

• Click event handling
• Variant support (default, destructive, outline, secondary, ghost, link)
• Disabled state

Layout Template

Components with:

• Header and footer sections
• Structured layout with padding

Feedback Template

Components with:

• Variant support (default, destructive, success, warning)
• Dismissible functionality
• Dismiss callback

Customization

After generation, you'll need to:

1. Update CSS Classes: Replace placeholder classes in default.rs and new_york.rs
2. Add Component Logic: Implement specific component behavior
3. Add Props: Add component-specific props as needed
4. Update Tests: Add meaningful test assertions
5. Verify Compilation: Run cargo check --workspace

Best Practices

1. Start with Phase 1: Begin with core UI components as they're used by others
2. Test Incrementally: Generate a few components and test before generating many
3. Customize Templates: Modify the script templates for your specific needs
4. Follow Naming Conventions: Use kebab-case for component names
5. Document Changes: Update README files with component-specific information

Troubleshooting

Component Already Exists

The batch script will skip components that already exist. To regenerate:

rm -rf packages/leptos/<component_name>
./scripts/generate_leptos_component_advanced.sh <component_name> <type>

Compilation Errors

After generation, run:

cargo check --workspace

Common issues:

• Missing CSS classes (update the constants in the component files)
• Type mismatches (check prop types and imports)
• Missing dependencies (add to Cargo.toml if needed)

Script Permissions

If scripts aren't executable:

chmod +x scripts/*.sh

Contributing

When adding new component types or templates:

1. Update the generate_component_by_type function in the advanced script
2. Add new template functions following the existing pattern
3. Update the README documentation
4. Test with a sample component

Examples

Generate a Single Component

# Generate an input component
./scripts/generate_leptos_component_advanced.sh input form "Form input component"

# Check compilation
cargo check --workspace

# Update classes and test

Generate Multiple Components

# Generate all core UI components
./scripts/generate_batch_components.sh 1

# Check compilation
cargo check --workspace

# Update classes and test incrementally

Custom Workflow

# Generate specific components
./scripts/generate_leptos_component_advanced.sh input form
./scripts/generate_leptos_component_advanced.sh label basic
./scripts/generate_leptos_component_advanced.sh button interactive

# Test compilation
cargo check --workspace

# Commit changes
git add .
git commit -m "Add input, label, and button components"