# Components Foundation Library

Reusable UI components for Rustelo web applications built with Leptos.

## Quick Start

### Basic Component Usage
```rust
use components::{
    navigation::{BrandHeader, Footer, NavMenu},
    content::{UnifiedContentCard, ContentManager},
    ui::{SpaLink, MobileMenu},
    theme::{ThemeProvider, DarkModeToggle},
};

#[component]
fn MyApp() -> impl IntoView {
    view! {
        <ThemeProvider>
            <BrandHeader />
            <main>
                <UnifiedContentCard title="Hello World" />
            </main>
            <Footer />
        </ThemeProvider>
    }
}
```

### Component Sets
```rust
// Import entire component categories
use components::navigation::*;  // All navigation components
use components::forms::*;       // All form components  
use components::layout::*;      // All layout components
```

### Custom Theming
```rust
use components::theme::{ThemeProvider, ThemeConfig};

let theme = ThemeConfig::builder()
    .primary_color("#007acc")
    .font_family("Inter")
    .build();

view! {
    <ThemeProvider config=theme>
        <App />
    </ThemeProvider>
}
```

## Usage Patterns

### 1. Direct Import (Simplest)
Import individual components as needed:
```rust
use components::navigation::BrandHeader;
use components::content::UnifiedContentCard;
```

### 2. Category Import
Import entire component categories:
```rust
use components::forms::*;
use components::navigation::*;
```

### 3. Themed Components
Use components with custom theming:
```rust
use components::theme::{ThemeProvider, use_theme};

#[component] 
fn CustomComponent() -> impl IntoView {
    let theme = use_theme();
    // Use theme.primary_color, theme.font_size, etc.
}
```

### 4. Extended Components
Extend foundation components with custom functionality:
```rust
use components::content::UnifiedContentCard;

#[component]
fn CustomCard(
    #[prop(into)] title: String,
    children: Children,
) -> impl IntoView {
    view! {
        <UnifiedContentCard title=title>
            <div class="custom-wrapper">
                {children()}
            </div>
        </UnifiedContentCard>
    }
}
```

## Available Components

### Navigation
- `BrandHeader` - Main application header
- `Footer` - Application footer
- `NavMenu` - Navigation menu
- `LanguageSelector` - Language switching

### Content
- `UnifiedContentCard` - Flexible content card
- `ContentManager` - Content loading and display
- `HtmlContent` - Safe HTML content rendering
- `SimpleContentGrid` - Grid layout for content

### UI
- `SpaLink` - SPA-aware navigation links
- `MobileMenu` - Mobile-responsive menu
- `PageTransition` - Page transition effects
- `DarkModeToggle` - Theme switching

### Forms
- Coming in future versions

### Layout
- Coming in future versions

### Admin
- `AdminLayout` - Admin panel layout
- `AdminCard` - Admin content cards
- `AdminHeader` - Admin page headers

## Documentation

- [📚 Usage Patterns](docs/USAGE_PATTERNS.md) - Detailed usage examples
- [🎨 Component Catalog](docs/COMPONENT_CATALOG.md) - All available components
- [🎭 Customization Guide](docs/CUSTOMIZATION_GUIDE.md) - How to extend components
- [🎨 Theming Guide](docs/THEMING_GUIDE.md) - Styling and themes
- [🔧 Integration Guide](docs/INTEGRATION_GUIDE.md) - Using with applications

## Examples

- [📁 examples/](examples/) - Complete usage examples
- [🏗️ Basic Layout](examples/basic_layout.rs) - Simple layout setup  
- [📝 Custom Forms](examples/custom_forms.rs) - Form component usage
- [🧭 Navigation Demo](examples/navigation_demo.rs) - Navigation patterns
- [📄 Content Showcase](examples/content_showcase.rs) - Content components

## Features

- `hydrate` - Enable client-side hydration
- `ssr` - Enable server-side rendering  
- `theme` - Theme system support

## Installation

Add to your `Cargo.toml`:
```toml
[dependencies]
components = { path = "path/to/rustelo/crates/foundation/crates/components" }

# Enable features as needed
components = { path = "...", features = ["hydrate", "theme"] }
```
