🐛 Task 5.2: Fix Component Story ID Type Issues #237

New issue

Open

opened 2025-08-09 20:53:46 +00:00 by goern · 0 comments

goern commented

2025-08-09 20:53:46 +00:00

(Migrated from codeberg.org)

📋 Beschreibung

Behebung von TypeScript Type-Inkompatibilitäten bei Component Story IDs in Storybook. Die ID-Props in mehreren Komponenten sind nicht korrekt typisiert, was zu TypeScript-Fehlern führt.

🎯 Ziele

Type-Fehler in allen Story-Dateien beheben
Konsistente ID-Typisierung über alle Komponenten etablieren
Helper-Funktionen für Story-Validierung erstellen

✅ Implementation Checklist

Note.stories.tsx - Fixed in component
Occurrence.stories.tsx - Fixed in component
Create src/stories/utils/storyHelpers.ts
Create src/stories/utils/storyValidation.ts
Check and fix Recording.stories.tsx
Check and fix Observation.stories.tsx
Check and fix ObservationGroup.stories.tsx
Test all stories render correctly

🐛 Bekannte Probleme

Note Component

ID-Typ war inkompatibel zwischen Story und Component
✅ Bereits behoben durch Anpassung des Component-Types

Occurrence Component

Ähnliche ID-Type-Inkompatibilität
✅ Bereits behoben

Verbleibende Komponenten

Recording, Observation, ObservationGroup müssen noch überprüft werden

📊 Akzeptanzkriterien

Alle Story-Dateien kompilieren ohne TypeScript-Fehler
Storybook startet und zeigt alle Stories korrekt an
Helper-Utilities für zukünftige Story-Erstellung verfügbar
Dokumentation für korrekte ID-Typisierung erstellt

🔗 Abhängigkeiten

Prerequisites: Task 5.1 (#236) - Storybook Test Runner Setup
Blocks: Task 5.3 (#239) - Visual Regression Testing

📝 Notizen

Priority: High
Estimated Time: 4 hours
Part of PR #225 (Testing Infrastructure Improvements)
Teilweise bereits abgeschlossen (2 von 7 Komponenten gefixt)

🛠️ Technische Details

Problem

TypeScript erwartet bei Komponenten oft string | number für IDs, während Storybook-Args häufig nur string liefern.

Lösung

Komponenten-Props anpassen für flexiblere ID-Types
Story-Helper erstellen für Type-Safe ID-Generation
Validierungs-Utilities für Story-Args

📚 Referenzen

Storybook TypeScript Guide
Interne Komponenten: /src/components/
Story-Dateien: /src/stories/

## 📋 Beschreibung Behebung von TypeScript Type-Inkompatibilitäten bei Component Story IDs in Storybook. Die ID-Props in mehreren Komponenten sind nicht korrekt typisiert, was zu TypeScript-Fehlern führt. ## 🎯 Ziele - Type-Fehler in allen Story-Dateien beheben - Konsistente ID-Typisierung über alle Komponenten etablieren - Helper-Funktionen für Story-Validierung erstellen ## ✅ Implementation Checklist - [x] Note.stories.tsx - Fixed in component - [x] Occurrence.stories.tsx - Fixed in component - [ ] Create src/stories/utils/storyHelpers.ts - [ ] Create src/stories/utils/storyValidation.ts - [ ] Check and fix Recording.stories.tsx - [ ] Check and fix Observation.stories.tsx - [ ] Check and fix ObservationGroup.stories.tsx - [ ] Test all stories render correctly ## 🐛 Bekannte Probleme ### Note Component - ID-Typ war inkompatibel zwischen Story und Component - ✅ Bereits behoben durch Anpassung des Component-Types ### Occurrence Component - Ähnliche ID-Type-Inkompatibilität - ✅ Bereits behoben ### Verbleibende Komponenten - Recording, Observation, ObservationGroup müssen noch überprüft werden ## 📊 Akzeptanzkriterien - Alle Story-Dateien kompilieren ohne TypeScript-Fehler - Storybook startet und zeigt alle Stories korrekt an - Helper-Utilities für zukünftige Story-Erstellung verfügbar - Dokumentation für korrekte ID-Typisierung erstellt ## 🔗 Abhängigkeiten - **Prerequisites**: Task 5.1 (#236) - Storybook Test Runner Setup - **Blocks**: Task 5.3 (#239) - Visual Regression Testing ## 📝 Notizen - Priority: **High** - Estimated Time: **4 hours** - Part of PR #225 (Testing Infrastructure Improvements) - Teilweise bereits abgeschlossen (2 von 7 Komponenten gefixt) ## 🛠️ Technische Details ### Problem TypeScript erwartet bei Komponenten oft `string | number` für IDs, während Storybook-Args häufig nur `string` liefern. ### Lösung 1. Komponenten-Props anpassen für flexiblere ID-Types 2. Story-Helper erstellen für Type-Safe ID-Generation 3. Validierungs-Utilities für Story-Args ## 📚 Referenzen - [Storybook TypeScript Guide](https://storybook.js.org/docs/react/configure/typescript) - Interne Komponenten: `/src/components/` - Story-Dateien: `/src/stories/`