Genetec · 2025
Genetec UI Kit - Event Manager
Огляд
Genetec - глобальна компанія у сфері технологій фізичної безпеки зі штаб-квартирою в Монреалі, що постачає уніфіковані платформи для відеоспостереження, контролю доступу та розпізнавання номерних знаків. Тестове завдання вимагало розробки невеликої бібліотеки з трьох багаторазових компонентів виробничої якості та демонстрації їх у реалістичному демо-застосунку. DataGrid обробляє 200 тестових подій з клієнтською пагінацією, сортуванням, багатоколонковою фільтрацією, налаштовуваною видимістю і мітками колонок та станами завантаження/порожнього/помилки. Timeline відображає події, згруповані за календарним днем, з повноцінною навігацією з клавіатури (Ліво/Право між групами, Вгору/Вниз всередині груп) та оголошеннями aria-live для screen reader при переміщенні фокусу. Модальне вікно форми подій використовує React Hook Form + Zod - валідує обов'язкові поля назви та дати, показує повідомлення на рівні поля, фокусується на першому невалідному полі при відправці та забезпечує потік скасування/збереження з регіоном успіху. Всі три компоненти з'єднані через Zustand-стор з розподілом по доменах, тому додавання події через форму оновлює і DataGrid, і Timeline в реальному часі.
Виклик
Завдання вимагало трьох незалежно багаторазових компонентів - не просто монолітну сторінку. Кожен мав вимоги до доступності (навігація з клавіатури WCAG 2.1 AA, оголошення aria-live) та мав чисто ділитися станом. DataGrid потребував налаштовуваних колонок (приховати/показати, перейменувати, кастомний аксесор) та явних станів завантаження/порожнього/помилки. Форма мала фокусуватися на першому невалідному полі при відправці - деталь, що потребує цілеспрямованого управління DOM.
Рішення
Розроблено на Vite + React 19 + TypeScript. Zustand-стор розподілено на доменні слайси (event, datagrid, timeline, modal) - кожен компонент відповідає за свій слайс, спільні дані проходять через слайс подій. TanStack Table v8 керує DataGrid. Навігація з клавіатури в Timeline реалізована власноруч з aria-live="polite" для оголошень screen reader. React Hook Form + Zod обробляють валідацію з управлінням фокусом через useRef для першого невалідного поля. shadcn/ui + Radix UI забезпечують доступні примітивні компоненти повсюдно.
