Roadmap — раскатка дизайн-системы по CJM¶
Источник истины — CJM (README). Приоритеты определены так: где боль больше всего бьёт по выручке и репутации, туда дизайн-система приходит раньше. Турист (47 mobile + 87 web экранов, P0) → Отельер (P1) → остальные роли (P2/P3).
Документ состоит из 5 фаз. Внутри каждой фазы — конкретные задачи, gap-анализ дизайн-бандла vs реальности, и acceptance criteria.
Phase A — Foundation (1–2 недели)¶
Цель: перенести дизайн-токены и базовые примитивы из бандла в репозиторий, чтобы все следующие фазы строились поверх единого фундамента.
Web¶
- [x]
src/styles/colors_and_type.css— 81 токен (цвета, типографика, радиусы, тени, spacing, status-палитра). - [x]
src/components/auth/shell/{AuthShell,AuthInput,AuthButton,AuthSegmented}.tsx— desktop auth по Figma. - [x] Все токены замаппены в Tailwind config (
theme.extend.{colors,fontSize,lineHeight,fontWeight,spacing,borderRadius,boxShadow,backgroundImage}) — единый источник правды.
Mobile¶
- [x]
mobile/src/theme/colors.ts— palette/typography/spacing/radii (RN-эквивалент токенов). - [x] Avenir Next Cyr Medium подгружен через
expo-font(fallback на системный). - [x] Примитивы созданы (Card/Screen + design-system компоненты в
mobile/src/components/).
Acceptance:
- Sample-screen тесты __tests__/design-primitives.test.tsx проходят.
- Storybook (или mobile-only Expo route /dev/primitives) показывает все примитивы.
Phase B — Reference screens (1 неделя)¶
Цель: на 3 эталонных экранах вылизать паттерны, чтобы дальше копировать их по cascade-refactor.
| Платформа | Экран | Зачем эталон |
|---|---|---|
| Mobile | (tourist)/login.tsx (есть в (auth)/) |
Простейший — только PillInput + PillButton. Закрепляет шрифт и flow. |
| Mobile | (tourist)/index.tsx |
Hero (WeatherCard) + категории (RoundIcon-сетка) + sections (SectionHead). Самый «фасадный» экран турист. |
| Mobile | (tourist)/hotels/[id].tsx |
Detail + sticky CTA (PillButton). Раскрывает booking-flow. |
Acceptance:
- Перед/после скриншоты в docs/cjm/_screenshots/phase-b/.
- Pixel-diff с Figma-баннером ≤ 4%.
Phase C — Cascade по ролям (4–6 недель)¶
Раскатываем дизайн-систему в порядке CJM-приоритета. На каждой роли — закрываем самые болезненные gap'ы из CJM, остальные экраны просто перекрашиваем токенами без переработки UX.
C.1 — Tourist (P0, 2 недели)¶
Из tourist.md Pain points / Opportunities:
- [x] Mobile booking-flow: эталоны Phase B применены к (tourist)/hotels/*, (tourist)/transfer/*, (tourist)/ski-pass/*, (tourist)/excursions/*.
- [x] Унификация чатов: legacy ChatPage.tsx удалён, остался P2P-стек.
- [x] Mobile «Trip plan» — собран в AI-чате + deep-link screen=trip_plan обрабатывается в _layout.tsx.
- [x] WeatherCard live (через src/integrations/weather/).
C.2 — Hotelier (P1, 1.5 недели)¶
Из hotelier.md:
- [x] Mobile-дашборд KPI-strip.
- [x] Mobile Bookings detail + edit ((hotelier)/bookings/[id].tsx).
- [x] Унификация чатов (P2P-стек переиспользован — см. HotelierRoutes).
- [x] Wizard onboarding отеля → закрыто в D-4.
C.3 — Instructor + Restaurant + Tour-operator (P2, 1.5 недели параллельно)¶
- [x] Mobile Schedule/Calendar для Instructor (
(instructor)/schedule.tsx). - [x] Mobile Orders для Restaurant + push «Готов к выдаче» (D-8 + D-9).
- [x] Funnel-графики на дашборде Tour-operator.
- [x] Унификация чатов во всех трёх.
C.4 — Transfer-provider + Admin (P3, 1 неделя)¶
- [x] Токены применены к
transfer/*(Live-карта + analytics dashboard). - [ ] Universal moderation queue для админа — out of scope (admin-панель)*.
* Admin-панели целенаправленно исключены — см. Out of scope.
Phase D — Missing UI (фичи, которых нет в реальности, но нужны по CJM)¶
Это новые экраны / переработки, выявленные при сравнении дизайн-бандла + CJM с текущим кодом.
| ID | Что | Где | Статус |
|---|---|---|---|
| D-1 | BookingConfirmationSheet (overlay) | mobile booking-flow | ✅ |
| D-2 | AlertBanner на главной | mobile (tourist)/index.tsx |
✅ |
| D-3 | Live WeatherCard | mobile + web главные | ✅ |
| D-4 | Wizard onboarding отеля | web /hotelier/hotels/wizard |
✅ HotelOnboardingWizard.tsx (5 шагов, ARIA, прогресс-бар) |
| D-5 | Mobile bookings detail/edit | hotelier | ✅ (hotelier)/bookings/[id].tsx |
| D-6 | Унифицированный календарь (Сетка / План / Аналитика) | web hotelier | ✅ HotelierUnifiedCalendarPage.tsx |
| D-7 | Mobile Schedule/Calendar для инструктора | mobile | ✅ (instructor)/schedule.tsx |
| D-8 | Mobile Orders для ресторатора | mobile | ✅ (restaurant)/orders.tsx |
| D-9 | Push «Готов к выдаче» гостю | api-admin + mobile _layout |
✅ через send_expo_push_to_user (priority=high) |
| D-10 | Live-карта водителей + GPS-pusher | web transfer + mobile (transfer-provider)/track.tsx |
✅ WebSocket /transfers/drivers/live + REST fallback |
| D-11 | Universal moderation queue | web admin | ⏭ out of scope (admin) |
Phase E — Cleanup¶
- [x] Удалить legacy
ChatPage.tsxво всех ролях — P2P-стек унифицирован. - [x] Удалить дубли экранов туриста.
- [x] Привести Tailwind arbitrary classes → токены (
text-[#7796F9]→text-ak-primary) — 6 проходов bulk-swap, ~270 → ~35 «настоящих» хардкодов. - [x] A11y: ~120 ARIA-лейблов на иконочных кнопках, focus-ring через
focus-visible:ring-ak-primary, keyboard nav на Stepper'ах и табах.
Что осталось хардкодом (намеренно)¶
widgetCodeGeneratorService.ts/widgetPreviewService.ts(~96) — embedded HTML strings уходят на 3rd-party сайты, должны быть self-contained без CSS-vars.- Recharts/D3 палитры в
*Charts.tsx/*Analytics.tsx(~73) — chart-libs принимают только string-hex per series. AIOrbCanvas.tsx(~18) — Canvas 2DfillStyleпринимает только string с template alpha.userUtils.ts(~9) — runtime-генерируемые avatar-градиенты.
Out of scope¶
- Rebrand desktop admin-панелей (P3, низкая ценность для пользователя — внутренний инструмент).
- Полная переработка dev/debug страниц.
- Email-шаблоны (отдельный трек).
Метрики успеха¶
- Adoption: % экранов, использующих
var(--ak-*)или mobile-токены вместо хардкода. Цель — 80% к концу Phase C. - Booking conversion (tourist): замер до/после Phase C.1, цель +10%.
- Time-to-confirm-booking (hotelier mobile): цель — ≤ 30 сек после push.
- Lighthouse a11y desktop: ≥ 90 на ключевых страницах туриста.