Roadmap компонентів
Реалізовані пріоритети UI-компонентів і критерії наступного циклу розвитку бібліотеки.
Три цикли завершено — усі кандидати реалізовані, мають живі приклади, API-сторінки та accessibility-контракти. Початкові пріоритети були звірені з каталогами Radix Primitives, shadcn/ui та Headless UI.
P0 — основа форм і оверлеїв
| Компонент | Для чого | Основа композиції | Складність a11y | Статус |
|---|---|---|---|---|
UiCheckbox | Незалежні булеві параметри та множинний вибір | Form groups, Table settings | mixed state, label/error зв'язок | stable |
UiRadioGroup | Один вибір із 2–7 видимих варіантів | Налаштування, опитування | roving tabindex, Arrow/Home/End | stable |
UiPopover | Довільна немодальна панель біля trigger | HoverCard, складені фільтри | focus return, outside click, positioning | stable |
P1 — продуктові й адміністративні сценарії
| Компонент | Для чого | Основа композиції | Складність a11y | Статус |
|---|---|---|---|---|
UiContextMenu | Дії над рядком, вузлом або полотном | Menu + positioning | клавіша Context Menu, координати pointer | stable |
UiInputOtp | Коди підтвердження та 2FA | Input semantics | paste, mobile keyboard, єдине accessible value | stable |
UiNavigationMenu | Ієрархічна продуктова навігація | Popover + links | menubar/navigation semantics, focus | stable |
UiSidebar | Адаптивна навігація застосунку | Drawer + navigation | collapse state, landmarks, mobile focus | stable |
P2 — спеціалізовані складені контролі
| Компонент | Для чого | Основа композиції | Складність a11y | Статус |
|---|---|---|---|---|
UiScrollArea | Узгоджений scroll affordance | Dropdown, Sidebar, panels | не ламати нативну прокрутку | stable |
UiResizablePanels | Робочі області редакторів і dashboard | Pointer utilities | separator role, клавіатурний resize | stable |
UiCarousel | Послідовність промо або медіа | Buttons + reduced motion | оголошення slide, autoplay controls | stable |
UiHoverCard | Необов'язковий preview за посиланням | Popover | hover/focus parity, dismiss | stable |
Цикл 2 — CRM і адміністративні панелі
Другий цикл закриває те, чого бракувало для побудови CRM: дашборд, картка запису, стрічка активності й фільтр за періодом.
| Компонент | Для чого | Основа композиції | Складність a11y | Статус |
|---|---|---|---|---|
UiStatCard | Ключова метрика зі зміною за період | Card + Skeleton | стрілка як символ, скорочене значення | stable |
UiAvatarGroup | Учасники запису в один рядок | Avatar | приховані учасники лишаються названими | stable |
UiDescriptionList | Пари «назва — значення» в картці | — | справжні dl/dt/dd | stable |
UiSeparator | Межа між секціями | — | декоративний проти смислового | stable |
UiTimeline | Історія запису | — | <time datetime>, детермінований пояс | stable |
UiTagInput | Мітки з вільним вводом | Combobox + Chip | список міток проти listbox, live-region | stable |
UiNumberInput | Кількість, ціна, відсоток | Field styles | role="spinbutton", aria-valuetext | stable |
UiSplitButton | Головна дія плюс альтернативи | Button + Menu | role="group", ArrowDown на головній | stable |
UiCalendar | Сітка місяця, діапазони | Roving tabindex | role="grid", повна дата в назві дня | stable |
UiDateRangePicker | Період над таблицею чи звітом | Calendar + anchored panel | один tabindex="0" на два місяці | stable |
UiTable — вибір рядків | Масові дії над записами | Table + Checkbox | ім'я прапорця з назви рядка | stable |
Дати рахуються без бібліотеки дат: уся арифметика — в
app/utils/calendar.ts, і кожна нова дата будується конструктором
new Date(рік, місяць, день), а не додаванням мілісекунд. Це не стиль:
+ 86 400 000 ламає сітку місяця двічі на рік, у ночі переходу на літній і
зимовий час.
Цикл 3 — те, що продукти пишуть заново
Третій цикл зібрано не з каталогів інших бібліотек, а з кодових баз
продуктів: CRM, CMS, маркетплейсу, чату й дашбордів. Кожен компонент нижче
знайшовся щонайменше у двох із них, написаний окремо й по-різному —
спінер Loading.vue, ProgressRing, AdminDirtyBar, PageHeader,
KpiCard зі спарклайном, ImageLightbox, дзвіночок із лічильником,
групи кнопок у панелях інструментів.
| Компонент | Для чого | Основа композиції | Складність a11y | Статус |
|---|---|---|---|---|
UiFormField | Лейбл, опис і помилка для будь-якого контрола | Field styles | legend першою дитиною, один опис | stable |
UiRating | Оцінка у відгуку, середня оцінка в картці | Native radio | стрілки без зациклення, зняття оцінки | stable |
UiActionBar | Масові дії, незбережені зміни | Button | постійний live-регіон, sticky проти fixed | stable |
UiButtonGroup | Зчеплені кнопки панелі інструментів | Button | group з назвою, не toolbar | stable |
UiPageHeader | Шапка сторінки чи розділу | Breadcrumb + Tabs | рівень заголовка окремо від кегля | stable |
UiSparkline | Тренд у плитці метрики чи рядку | StatCard | один role="img" з підсумком | stable |
UiLightbox | Фото, відео й сторінки на весь екран — рівня Fancybox | Overlay stack + Carousel gestures + Fullscreen API | пастка фокуса, оголошення кадру, фокус на мініатюру після закриття | stable |
UiSpinner | Очікування без відомої тривалості | — | статус лише з назвою | stable |
UiProgressRing | Прогрес у щільному місці | Progress | невизначений стан без aria-valuenow | stable |
UiIndicator | Лічильник чи крапка на іконці | Avatar, Button | число в назві кнопки, не в значку | stable |
Разом із циклом у tokens.css з'явилась роль --rating: зірка оцінки — не
попередження, і бренд має змогу перефарбувати її окремо від статусів.
Як наступний компонент переходить у роботу
Кандидат піднімається у пріоритеті, якщо повторюється щонайменше у двох продуктах, має нетривіальний keyboard/ARIA-контракт або стає основою для кількох наступних компонентів. Реалізація має лишатися copy-first і не додавати runtime-залежність без окремого задокументованого винятку.