From 465a6acb035f669d5ae61b1873a48ec15500a738 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 4 Feb 2026 14:53:32 +0100 Subject: [PATCH] complexity & risks --- packages/ui/PROJEKT.md | 76 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 76 insertions(+) diff --git a/packages/ui/PROJEKT.md b/packages/ui/PROJEKT.md index e8ff9a5c7..32297d37b 100644 --- a/packages/ui/PROJEKT.md +++ b/packages/ui/PROJEKT.md @@ -600,6 +600,7 @@ Integriert: 0 | 55 | Komponenten-Abgrenzung | Entscheidungsbaum | Library: präsentational, Webapp: Business-Logik (siehe §17) | | 56 | Externe Abhängigkeiten | Dokumentiert in §18 | eslint-config-it4c muss modularisiert werden | | 57 | Kompatibilitätstests | 4er-Matrix + CI | Vue 2/3 × Tailwind/CSS (siehe §19) | +| 58 | Komplexitätsanalyse | Dokumentiert in §20 | Risikofaktoren, Parallelisierbarkeit, Aufwandstreiber | --- @@ -632,6 +633,8 @@ Integriert: 0 | 2026-02-04 | **Externe Abhängigkeit** | eslint-config-it4c blockiert Linting-Setup, Workaround dokumentiert | | 2026-02-04 | **Kompatibilitätstests** | 4er-Matrix (Vue 2/3 × Tailwind/CSS), Example Apps, Playwright E2E | | 2026-02-04 | **Phasen umbenannt** | 0.5→1, 1→2, 2→3, 3→4, 4→5 (nur ganzzahlige Phasen) | +| 2026-02-04 | **Dokument-Konsolidierung** | §13 Zahlen korrigiert, §14 Link entfernt, §16 Reihenfolge, Terminologie vereinheitlicht | +| 2026-02-04 | **Komplexitätsanalyse** | §20 hinzugefügt: Risikofaktoren, Parallelisierbarkeit, Aufwandstreiber pro Komponente | --- @@ -1493,6 +1496,79 @@ jobs: --- +## 20. Komplexitätsanalyse & Risikofaktoren + +### Umfang nach Phasen + +| Phase | Aufgaben | Komplexität | Abhängigkeiten | +|-------|----------|-------------|----------------| +| Phase 0: Analyse | 6 Tasks | ✅ Erledigt | - | +| Phase 1: Vue 2.7 | 6 Tasks | ✅ Erledigt | - | +| Phase 2: Setup | 26 Tasks | Mittel | ⚠️ eslint-config-it4c (extern) | +| Phase 3: Tokens | 6 Tasks | Niedrig | Keine externen | +| Phase 4: Migration | 15 Komponenten | Hoch | Pro Komponente: Spec→Dev→Test→Integrate | +| Phase 5: Finalisierung | 7 Tasks | Niedrig | Alle vorherigen Phasen | + +### Bekannte Risikofaktoren + +| Risiko | Beschreibung | Auswirkung | Mitigation | +|--------|--------------|------------|------------| +| **eslint-config-it4c** | Externes Projekt muss zuerst modularisiert werden | Blockiert Linting-Setup in Phase 2 | Temporäre lokale ESLint-Config als Workaround | +| **vue-demi Kompatibilität** | Unbekannte Edge-Cases bei Vue 2/3 Dual-Support | Unerwartete Bugs bei Integration | Frühzeitig in Example Apps testen | +| **Visual Regression Baselines** | Können bei Design-Änderungen viel Nacharbeit erfordern | Zusätzlicher Aufwand bei Änderungen | Baselines erst nach Design-Freeze erstellen | +| **Feature-Parity** | Alte Komponenten haben undokumentierte Verhaltensweisen | Regressions bei Migration | Gründliche Analyse vor Implementierung | +| **Tailwind + CSS Dual-Build** | Komplexe Build-Konfiguration | Build-Fehler, Inkonsistenzen | Früh beide Varianten parallel testen | + +### Parallelisierbarkeit + +| Phase | Parallelisierbar | Details | +|-------|------------------|---------| +| Phase 2 | Teilweise | Die meisten Tasks sind sequentiell (Setup-Reihenfolge wichtig) | +| Phase 3 | Nein | Token-Ebenen bauen aufeinander auf (Base → Semantic → Component) | +| Phase 4 | Ja (nach Tier 1) | Tier 2/3 Komponenten können parallel entwickelt werden | +| Phase 5 | Teilweise | Dokumentation kann parallel zur letzten Integration | + +**Parallelisierbare Aufgaben in Phase 2:** +- 4 Example Apps (vue3-tailwind, vue3-css, vue2-tailwind, vue2-css) +- GitHub Workflows (unabhängig voneinander) +- LICENSE, README.md, CONTRIBUTING.md + +**Sequentielle Abhängigkeiten in Phase 2:** +1. Vite + Vue 3 Projekt → vue-demi → Tailwind → Build-Pipeline +2. Vitest → Tests → Visual Regression +3. Package-Struktur → release-please → npm Publish Workflow + +### Aufwandstreiber pro Komponente (Phase 4) + +Jede Komponente durchläuft: + +``` +┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ +│ ANALYSE │ → │ SPEC │ → │ DEVELOP │ → │ QA │ → │ INTEGRATE │ +├─────────────┤ ├─────────────┤ ├─────────────┤ ├─────────────┤ ├─────────────┤ +│ Bestehende │ │ Props │ │ Vue 3 Code │ │ Unit Tests │ │ In Webapp │ +│ Varianten │ │ Events │ │ TypeScript │ │ Vue 2 Tests │ │ einbinden │ +│ analysieren │ │ Slots │ │ Tailwind │ │ A11y Tests │ │ │ +│ │ │ Tokens │ │ Histoire │ │ Visual Reg. │ │ Alte Komp. │ +│ │ │ A11y │ │ Stories │ │ 4 Examples │ │ entfernen │ +└─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ +``` + +**Aufwand variiert stark nach Komponente:** + +| Komponente | Komplexität | Grund | +|------------|-------------|-------| +| OsIcon | Niedrig | Einfache Wrapper-Komponente | +| OsSpinner | Niedrig | Nur Animation + Größen | +| OsButton | Hoch | Viele Varianten, Link-Support, States | +| OsCard | Niedrig | Einfaches Layout | +| OsModal | Hoch | Teleport, Focus-Trap, Animations, A11y | +| OsDropdown | Hoch | Positioning, Click-Outside, Hover-States | +| OsInput | Mittel | Validierung, States, Icons | +| OsAvatar | Niedrig | Bild + Fallback | + +--- + ## Wie dieses Dokument verwendet wird **Zum Fortsetzen der Arbeit:**