# react-to-vue-migration
## Контекст проекта
```
/fenris-react/ # источник — только читать, никогда не менять
/fenris-vue/ # цель — сюда пишем
```
Мигрируется ТОЛЬКО слой `ui/`. Слои `core/` и `infrastructure/` не трогать.
---
## Перед началом — Context7
Перед тем как писать код для новой библиотеки:
```
use context7 to get docs for vee-validate v4 useForm defineField
use context7 to get docs for vue 3 script setup defineProps defineEmits
use context7 to get docs for pinia defineStore composition style
```
---
## Стратегия тестирования
| Категория | Критерии | Путь |
|---|---|---|
| Простой | < 100 строк, чистый UI, нет side effects | Vue-spec → Vue компонент |
| Средний | useState, useEffect, формы, 100-400 строк | React тест → зелёный → Vue тест → Vue компонент |
| Сложный | > 400 строк, контекст, сложный стейт | Флаг в MANUAL-MIGRATION.md, пропустить |
---
## Флоу
### Шаг 1 — Прочитай компонент
```bash
cat /fenris-react/src/.../ComponentName.tsx
```
### Шаг 2 — Резюме (обязательно перед кодом)
```
Компонент: ComponentName
Категория: простой / средний / сложный
Рендерит: ...
Props: ...
Events: ...
Локальный стейт: ...
Side effects: ...
Зависимости: ...
Паттерны: [из references/patterns.md]
Стратегия: Vue-spec / React-first / Флаг
```
### Шаг 3а — Простой: Vue тест как спека
Файл: `/fenris-vue/src/.../ComponentName.test.ts`
Описывает что компонент ДОЛЖЕН делать. Пишется до компонента.
### Шаг 3б — Средний: React тест сначала
Файл: `/fenris-react/src/.../ComponentName.test.tsx`
```bash
cd /fenris-react && vitest run src/**/ComponentName.test.tsx
```
Все зелёные → адаптируй под Vue → пиши компонент.
### Шаг 3в — Сложный: флаг и пропуск
Добавь в `/fenris-vue/MANUAL-MIGRATION.md`:
```md
## ComponentName
- Путь: src/.../ComponentName.tsx
- Строк: N
- Причина: > 400 строк / createContext / непонятная логика
- Паттерны: [список]
- Зависимости: [что от него зависит]
```
Переходи к следующему.
### Шаг 4 — Vue компонент
Файл: `/fenris-vue/src/.../ComponentName.vue`
- `<script setup lang="ts">` всегда
- `defineProps<{...}>()` / `defineEmits<{...}>()`
- Никакого Options API
- Паттерны → `references/patterns.md`
### Шаг 5 — Валидация
```bash
cd /fenris-vue && bash .claude/scripts/validate.sh ComponentName
```
Зелёный → следующий. Красный → правишь компонент, не тест.
---
## Порядок миграции
Полный роадмап → `references/roadmap.md`
1. `shared/ui/` атомарные (Badge, Button, Icon...)
2. `shared/ui/` с локальным стейтом (TextField, Modal...)
3. `shared/ui/` сложные (Table, ErrorBoundary, CodeEditor)
4. Простые фичи (Page + Table, без форм)
5. Средние фичи (формы — Паттерн 3)
6. Модули (catalog — последним)
7. Сложные фичи (audiences — самая последняя)
---
## Правила
1. `/fenris-react/` — только чтение, без исключений
2. Резюме перед кодом — всегда
3. Один компонент за раз
4. `core/` и `infrastructure/` не трогать
5. Для форм — только VeeValidate v4
6. Красный тест → правишь компонент, не тест
7. Context7 — перед каждой новой библиотекой
---
## Справочники
- Паттерны конвертации → `references/patterns.md`
- Роадмап и порядок → `references/roadmap.md`
- Скрипты валидации → `scripts/`