Rustelo/info/daisyui_integration.md

# DaisyUI Integration Guide

This document explains how DaisyUI has been integrated into this Rust web application template using UnoCSS.

## Overview

DaisyUI is a semantic component library built on top of Tailwind CSS that provides pre-built components like buttons, cards, modals, and more. This project integrates DaisyUI using the `unocss-preset-daisy` preset, which allows you to use DaisyUI components with UnoCSS instead of Tailwind CSS.

## Installation

DaisyUI has been integrated using the following steps:

1. **Installed the preset**: `unocss-preset-daisy` package
2. **Updated UnoCSS configuration**: Added the DaisyUI preset to `uno.config.ts`
3. **Created example components**: Added comprehensive examples in `client/src/components/daisy_example.rs`
4. **Added route**: Created `/daisyui` route to showcase the components

## Configuration

The DaisyUI preset is configured in `uno.config.ts`:

```typescript
import { presetDaisy } from "unocss-preset-daisy";

export default defineConfig({
  // ... other config
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      scale: 1.2,
      autoInstall: true,
      collections: {
        carbon: () =>
          import("@iconify-json/carbon/icons.json").then((i) => i.default),
      },
    }),
    presetTypography(),
    presetWebFonts({
      fonts: {
        // ...
      },
    }),
    presetDaisy(), // DaisyUI preset
  ],
  // ... other config
});
```

## Available Components

The integration includes all standard DaisyUI components:

### Buttons
- `btn` - Basic button
- `btn-primary`, `btn-secondary`, `btn-accent` - Colored buttons
- `btn-outline` - Outline buttons
- `btn-ghost`, `btn-link` - Ghost and link buttons
- `btn-lg`, `btn-md`, `btn-sm`, `btn-xs` - Button sizes

### Cards
- `card` - Basic card container
- `card-body` - Card content area
- `card-title` - Card title
- `card-actions` - Card action buttons area

### Forms
- `form-control` - Form control wrapper
- `label` - Form labels
- `input` - Text inputs with `input-bordered` variant
- `select` - Select dropdowns with `select-bordered` variant
- `checkbox` - Checkboxes
- `radio` - Radio buttons

### Feedback
- `alert` - Alert messages with variants: `alert-info`, `alert-success`, `alert-warning`, `alert-error`
- `badge` - Small status indicators with color variants
- `progress` - Progress bars with color variants
- `loading` - Loading spinners and dots

### Navigation
- `tabs` - Tab navigation with `tab-lifted` variant
- `modal` - Modal dialogs with `modal-box` content

### Layout
- `hero` - Hero sections with `hero-content`
- `container` - Container for content

## Color System

DaisyUI uses a semantic color system:

- **Primary Colors**: `primary`, `primary-content`
- **Secondary Colors**: `secondary`, `secondary-content`
- **Accent Colors**: `accent`, `accent-content`
- **Neutral Colors**: `neutral`, `neutral-content`
- **Base Colors**: `base-100`, `base-200`, `base-300`, `base-content`
- **State Colors**: `info`, `success`, `warning`, `error`

## Usage in Leptos Components

Here's an example of using DaisyUI components in a Leptos component:

```rust
use leptos::prelude::*;

#[component]
pub fn ExampleComponent() -> impl IntoView {
    let (count, set_count) = signal(0);

    view! {
        <div class="card bg-base-100 shadow-xl">
            <div class="card-body">
                <h2 class="card-title">"Counter Example"</h2>
                <div class="text-center">
                    <div class="text-4xl font-bold text-primary mb-4">
                        {move || count.get()}
                    </div>
                    <div class="card-actions justify-center">
                        <button 
                            class="btn btn-primary"
                            on:click=move |_| set_count.update(|c| *c += 1)
                        >
                            "Increment"
                        </button>
                        <button 
                            class="btn btn-secondary"
                            on:click=move |_| set_count.set(0)
                        >
                            "Reset"
                        </button>
                    </div>
                </div>
            </div>
        </div>
    }
}
```

## Themes

DaisyUI supports multiple themes. To use a theme, add the `data-theme` attribute to your HTML:

```html
<html data-theme="dark">
<!-- or -->
<html data-theme="cupcake">
```

Available themes include:
- `light` (default)
- `dark`
- `cupcake`
- `bumblebee`
- `emerald`
- `corporate`
- `synthwave`
- `retro`
- `cyberpunk`
- `valentine`
- `halloween`
- `garden`
- `forest`
- `aqua`
- `lofi`
- `pastel`
- `fantasy`
- `wireframe`
- `black`
- `luxury`
- `dracula`
- `cmyk`
- `autumn`
- `business`
- `acid`
- `lemonade`
- `night`
- `coffee`
- `winter`
- `dim`
- `nord`
- `sunset`

## Building and Development

To build the CSS with DaisyUI components:

```bash
pnpm run build:css
```

To watch for changes during development:

```bash
pnpm run dev
```

## Example Page

Visit `/daisyui` to see a comprehensive showcase of all DaisyUI components in action. The example page includes:

- Button variations and sizes
- Card layouts
- Form elements
- Interactive components (modals, counters)
- Alerts and badges
- Progress indicators
- Tab navigation
- Loading states

## Customization

You can customize DaisyUI by:

1. **CSS Variables**: Override DaisyUI's CSS variables in your global styles
2. **UnoCSS Shortcuts**: Add custom shortcuts in `uno.config.ts`
3. **Theme Customization**: Create custom themes using DaisyUI's theme system

## Performance

Using `unocss-preset-daisy` with UnoCSS provides:

- **On-demand generation**: Only the components you use are included in the final CSS
- **Fast builds**: UnoCSS's atomic approach ensures fast compilation
- **Small bundle size**: Optimized CSS output with minimal overhead
- **Hot reload**: Instant updates during development

## Troubleshooting

1. **Components not styling**: Make sure to run `pnpm run build:css` after making changes
2. **Missing styles**: Check that the DaisyUI preset is properly added to `uno.config.ts`
3. **Theme not applying**: Ensure the `data-theme` attribute is set on the HTML element

## Resources

- [DaisyUI Documentation](https://daisyui.com/)
- [UnoCSS Preset Daisy](https://github.com/kidonng/unocss-preset-daisy)
- [UnoCSS Documentation](https://unocss.dev/)
- [Leptos Documentation](https://leptos.dev/)

## Contributing

To add new DaisyUI components or examples:

1. Add the component to `client/src/components/daisy_example.rs`
2. Update the menu structure if needed
3. Rebuild the CSS with `pnpm run build:css`
4. Test the component in the `/daisyui` route