# Роадмап миграции fenris-frontend ## Порядок фаз Строго по очереди. Не переходи к следующей пока текущая не завершена. --- ### Фаза 1 — shared/ui/ атомарные Стратегия: Vue-spec. ``` Badge, Chip, Icon, Spinner, Status, Toggle, ToggleSwitch Button, Checkbox, Radio, NoData, Card ``` ### Фаза 2 — shared/ui/ с локальным стейтом Стратегия: Vue-spec (без форм) / React-first (с формами). ``` TextField, NumberField, TextArea DatePicker, Select, Autocomplete Pagination, Tooltip, Modal, Alert ``` ### Фаза 3 — shared/ui/ сложные Стратегия: React-first. ``` Table (Head, Body, SearchModal) — Паттерн 5 List/Dropdown — Паттерн 5 WithLoader, WithOptions ErrorBoundary — Паттерн 7 CodeEditor — vue-codemirror CodeBlock — prismjs напрямую ``` ### Фаза 4 — Простые фичи Стратегия: Vue-spec. ``` active-jobs, failed-jobs, success-jobs, media-spends, modules ``` ### Фаза 5 — Средние фичи (формы) Стратегия: React-first. Все формы → Паттерн 3. ``` countries, device-types, campaign-types, partner-events, products create-job, glossary, alert, media-buyers, media-sources, payouts corrections, applications, ref-channels, team-leads, team-buyers tariffs, users, user-detail, traffic-owners ``` ### Фаза 6 — Модули ``` copy-link-with-alert — простой action-store — Паттерн 8 action-modal — Modal-паттерн marketing — detail/list/create/delete catalog — Паттерн 4, Chips.tsx → MANUAL-MIGRATION.md ``` ### Фаза 7 — Сложные фичи ``` spends — ImportForm (papaparse) statistics — chart.js → vue-chartjs short-links — Паттерн 6 auth — OAuth flow, guards sidebar — Паттерн 5 audiences — ПОСЛЕДНЕЙ: 40+ файлов, 6 хуков ``` ### Фаза 8 — App shell ``` BaseLayout, SimpleLayout, Error pages vue-router config (35 маршрутов) AuthWrapper → navigation guard Удалить React зависимости Обновить Storybook: @storybook/vue3-vite ``` --- ## Компоненты для MANUAL-MIGRATION.md | Компонент | Строк | Причина | |---|---|---| | `modules/catalog/ui/Chips.tsx` | 804 | createContext + 6 хуков | | `features/traffic-owners/ui/Form.tsx` | 443 | react-hook-form сложный | | `features/user-detail/ui/ApiPermissionsCard.tsx` | 415 | Сложный стейт | | `features/audiences/ui/exports-page/Form/FormGoogle.tsx` | 411 | RHF + useEffect + ref | | `features/audiences/core/application/options.tsx` | 389 | Хуки-провайдеры | --- ## Оценка трудоёмкости | Фаза | Дней | |---|---| | 1-3 (shared/ui) | 6-10 | | 4-5 (фичи) | 16-25 | | 6 (модули) | 8-12 | | 7 (сложные фичи) | 15-20 | | 8 (app shell) | 5-7 | | **Итого** | **50-74 дня** | С Claude Code на простых/средних — реально срезать ~40%.