GenetecGenetec UI Kit
Техническа задача: демо за събития с таблица, времева линия с клавиатурна навигация и валидиран формуляр.
Макети на устройства и снимки на публични сайтове от октомври 2026 г. Сайтовете може да включват промени, направени след моето участие.
Общ преглед
За техническа задача на Genetec създадох три компонента за многократна употреба в работещо демо: таблица на събитията, времева линия и форма за събитие. Те споделят данните, така че добавянето на събитие обновява и двата изгледа. Това е проект за оценка, а не продукционен продукт на Genetec.
Задачата
Да се изградят компоненти за многократна употреба със споделено състояние, ясни състояния на зареждане и грешка и достъпно управление с клавиатура.
Моята работа
Използвах React и TypeScript с отделни части на състоянието в Zustand. TanStack Table управлява таблицата, времевата линия поддържа навигация с клавиатура, а React Hook Form и Zod отговарят за валидирането и фокуса върху първото невалидно поле.
Резултати
- DataGrid: 200 редове, разбиване на страниците, сортиране, многофилтриране, конфигурируема видимост на колоните
- Временна шкала: события, групирани по ден, навигация със стрелки, aria-live съобщения
- Форма на събитие: валидиране на Zod, фокус на първото невалидно поле, регион на успеха
Имате идея за проект?
Разкажете какво искате да създадете. Ще обсъдим обхвата и следващите стъпки.
