Genetec · 2025
Genetec UI Kit - Event Manager
Überblick
Genetec ist ein globales Unternehmen für physische Sicherheitstechnologie mit Hauptsitz in Montreal, das einheitliche Plattformen für Videoüberwachung, Zugangskontrolle und Kennzeichenerkennung liefert. Die Testaufgabe erforderte den Aufbau einer kleinen Bibliothek aus drei wiederverwendbaren, produktionsreifen Komponenten und deren Präsentation in einer realistischen Demo-App. Das DataGrid verwaltet 200 Mock-Events mit clientseitiger Pagination, Sortierung, Multi-Spalten-Filterung, konfigurierbarer Spalten-Sichtbarkeit und -Bezeichnungen sowie Lade-, Leer- und Fehlerzuständen. Die Timeline rendert Events, nach Kalendertag gruppiert, mit vollständiger Tastaturnavigation (Links/Rechts zwischen Gruppen, Hoch/Runter innerhalb von Gruppen) und aria-live Screen-Reader-Ankündigungen bei Fokuswechsel. Das Ereignisformular-Modal verwendet React Hook Form + Zod - validiert Pflichtfelder (Titel und Datum), zeigt feldspezifische Meldungen, fokussiert das erste ungültige Feld beim Absenden und bietet einen Abbrechen/Speichern-Flow mit Erfolgsbereich. Alle drei Komponenten sind über einen domänensplit Zustand-Store verbunden, sodass das Hinzufügen eines Events aus dem Formular sowohl das DataGrid als auch die Timeline in Echtzeit aktualisiert.
Die Herausforderung
Die Aufgabe erforderte drei unabhängig wiederverwendbare Komponenten - nicht nur eine monolithische Seite. Jede hatte Barrierefreiheitsanforderungen (WCAG 2.1 AA Tastaturnavigation, aria-live-Ankündigungen) und musste State sauber teilen. DataGrid benötigte konfigurierbare Spalten (Ein-/Ausblenden, Umbenennen, benutzerdefinierter Accessor) und explizite Lade-/Leer-/Fehlerzustände. Das Formular musste das erste ungültige Feld beim Absenden fokussieren - ein Detail, das gezieltes DOM-Management erfordert.
Die Lösung
Aufgebaut mit Vite + React 19 + TypeScript. Der Zustand-Store ist in Domänen-Slices aufgeteilt (Event, DataGrid, Timeline, Modal) - jede Komponente besitzt ihren Slice, geteilte Daten fließen durch den Event-Slice. TanStack Table v8 treibt das DataGrid an. Timeline-Tastaturnavigation ist benutzerdefiniert entwickelt mit aria-live="polite" für Screen-Reader-Ankündigungen. React Hook Form + Zod behandelt Validierung mit useRef-basiertem Fokus-Management für das erste ungültige Feld. shadcn/ui + Radix UI bieten überall barrierefreie Primitive-Komponenten.
