# User Registration LiveComponent Demo

Einfaches Beispiel für die Integration von LiveComponent + FormBuilder.

## Übersicht

Dieses Demo zeigt ein Multi-Step User Registration Formular mit:
- 3 Steps (Personal Info, Account Type, Preferences)
- Conditional Fields (Company-Felder nur bei Business Account)
- Automatische LiveComponent Updates
- Keine Code-Duplizierung (nutzt bestehenden FormBuilder)

## Files

```
src/Application/LiveComponents/UserRegistration/
├── UserRegistrationFormDefinition.php  ← Form-Definition (deklarativ)
└── README.md                            ← Diese Datei

src/Application/Api/
└── LiveComponentDemoController.php      ← Controller mit Route

src/Framework/View/templates/pages/
└── livecomponent-demo.view.php          ← Demo-Page Template
```

## Zugriff

**URL**: `https://localhost/demo/livecomponent-form`

## Form Structure

### Step 1: Persönliche Informationen
- `first_name` (text, required)
- `last_name` (text, required)
- `email` (email, required)

### Step 2: Konto-Typ
- `account_type` (radio: personal/business, required)
- `company_name` (text, conditional: nur bei business)
- `vat_number` (text, conditional: nur bei business)

### Step 3: Präferenzen
- `newsletter` (checkbox)
- `language` (select: en/de/fr/es)
- `timezone` (select: UTC/Berlin/New York/Tokyo)

## Code-Beispiel

```php
// Deklarative Form-Definition
$formDef = UserRegistrationFormDefinition::create();

// Generische Component - funktioniert für JEDE Form!
$component = new MultiStepFormComponent(
    id: ComponentId::generate('user-registration'),
    formDefinition: $formDef
);

// In Template einbinden
return new ViewResult(
    template: 'pages/livecomponent-demo',
    data: ['registration_form' => $component]
);
```

## Conditional Fields Beispiel

```php
// Company Name nur anzeigen wenn account_type === 'business'
FormFieldDefinition::text(
    name: 'company_name',
    label: 'Firmenname',
    required: true
)->showWhen(
    FieldCondition::equals('account_type', 'business')
)
```

## Features

### ✅ Nutzt bestehenden FormBuilder
Keine Code-Duplizierung - `LiveFormBuilder` erweitert den bestehenden `FormBuilder` aus dem View-Modul.

### ✅ Type-Safe Value Objects
Alles sind readonly Value Objects:
- `FormFieldDefinition`
- `FormStepDefinition`
- `MultiStepFormDefinition`
- `FieldCondition`

### ✅ Deklarativ statt Imperativ
Form wird deklarativ definiert, nicht programmiert. Kein Custom-Code für Rendering.

### ✅ Automatic Debounce
Text-Inputs haben automatisch 300ms Debounce, um unnötige Server-Requests zu vermeiden.

### ✅ Generisch Wiederverwendbar
`MultiStepFormComponent` ist vollständig generisch - funktioniert mit jeder Form-Definition.

## Erweiterungen

### Validation hinzufügen

```php
// Validator implementieren
final readonly class PersonalInfoValidator implements StepValidator
{
    public function validate(array $formData): array
    {
        $errors = [];

        if (empty($formData['first_name'] ?? '')) {
            $errors['first_name'] = 'Vorname ist erforderlich';
        }

        return $errors;
    }
}

// In FormStepDefinition verwenden
new FormStepDefinition(
    title: 'Personal Info',
    description: '...',
    fields: [...],
    validator: new PersonalInfoValidator()  // ← Validator hinzufügen
)
```

### Submit Handler hinzufügen

```php
final readonly class UserRegistrationSubmitHandler implements FormSubmitHandler
{
    public function handle(array $formData): SubmitResult
    {
        // Business Logic
        $user = $this->userService->registerUser($formData);

        return SubmitResult::success(
            message: 'Registrierung erfolgreich!',
            redirectUrl: '/dashboard'
        );
    }
}

// In MultiStepFormDefinition verwenden
new MultiStepFormDefinition(
    steps: [...],
    submitHandler: new UserRegistrationSubmitHandler()  // ← Submit Handler
)
```

## Testing

```bash
# Browser öffnen
https://localhost/demo/livecomponent-form

# Formular ausfüllen und testen:
1. Step 1: Personal Info eingeben
2. Auf "Weiter →" klicken
3. Step 2: "Geschäftskonto" wählen → Company-Felder erscheinen
4. Step 2: "Privatkonto" wählen → Company-Felder verschwinden
5. Auf "Weiter →" klicken
6. Step 3: Präferenzen auswählen
7. Auf "Absenden" klicken
8. Success-Message mit Submission-ID wird angezeigt
```

## Architektur-Diagramm

```
UserRegistrationFormDefinition
    │
    └─► MultiStepFormDefinition (Value Object)
           │
           ├─► FormStepDefinition (Step 1)
           │     └─► FormFieldDefinition[] (Fields)
           │
           ├─► FormStepDefinition (Step 2)
           │     └─► FormFieldDefinition[] (Fields mit Conditions)
           │
           └─► FormStepDefinition (Step 3)
                 └─► FormFieldDefinition[] (Fields)

LiveComponentDemoController
    │
    └─► MultiStepFormComponent (Generic!)
           │
           ├─► Nutzt FormDefinition
           └─► Rendert via LiveFormBuilder
                  │
                  └─► Nutzt bestehenden FormBuilder
```

## Vorteile dieser Architektur

1. **Keine Code-Duplizierung**: Nutzt bestehenden FormBuilder
2. **Type-Safe**: Alles Value Objects mit compile-time safety
3. **Deklarativ**: Forms werden definiert, nicht programmiert
4. **Wiederverwendbar**: Ein Component für alle Forms
5. **Testbar**: Einfach zu testen (Unit + Integration)
6. **Erweiterbar**: Neue FieldTypes, Validators, Submit Handlers

## Nächste Schritte

Für Production-Use:
1. Validators hinzufügen für alle Steps
2. Submit Handler implementieren
3. Error Handling verbessern
4. Accessibility testen (WCAG Compliance)
5. E2E Tests mit Playwright schreiben
