Sergey Krylov
bd33412691
- HomePage: replace inline styles with <Heading>, <Text>, <Box> - SearchBar: replace <input> with <TextField>, <ul> with <Surface>, <li> with <Box>+<Text>+<Chip>, hardcoded hex with theme tokens - ESLint no-restricted-imports respected via @mui/material/Box deep import - Logic unchanged, all 111 tests pass
61 lines
2.9 KiB
Markdown
61 lines
2.9 KiB
Markdown
# Pilot Migration — Implementation Plan
|
||
|
||
## Architecture
|
||
|
||
Миграция слоя представления без изменения логики. HomePage меняет JSX на DS-компоненты. SearchBar заменяет inline-стили на DS-компоненты + MUI `Box` (разрешён layout utility).
|
||
|
||
## Files
|
||
|
||
### Modify
|
||
- `apps/frontend/src/pages/home/ui/HomePage.tsx` — замена JSX
|
||
- `apps/frontend/src/widgets/search-bar/ui/SearchBar.tsx` — замена JSX
|
||
|
||
### No changes
|
||
- `apps/frontend/src/widgets/search-bar/ui/SearchBar.test.tsx` — тесты не меняются (те же тексты)
|
||
- `apps/frontend/src/styles.css` — CSS-переменные всё ещё используются broker-страницами
|
||
|
||
## Step-by-step
|
||
|
||
### Step 1: Migrate HomePage
|
||
|
||
```tsx
|
||
// До
|
||
<div style={{ textAlign: 'center', paddingTop: 120 }}>
|
||
<h1 style={{ fontSize: 32, fontWeight: 700, marginBottom: 12 }}>MoexVibe</h1>
|
||
<p style={{ color: 'var(--color-text-secondary)', fontSize: 16, marginBottom: 32 }}>
|
||
Анализ акций и облигаций Московской биржи
|
||
</p>
|
||
<p style={{ color: '#888', fontSize: 13 }}>Введите название или тикер в строку поиска выше</p>
|
||
<p style={{ color: '#aaa', fontSize: 12, marginTop: 8 }}>
|
||
Данные задерживаются на 15 минут · Бесплатный API MOEX ISS
|
||
</p>
|
||
</div>
|
||
|
||
// После
|
||
import { Box } from '@mui/material';
|
||
import { Heading, Text } from '@moex-vibe/design-system';
|
||
|
||
<Box textAlign="center" pt={30}>
|
||
<Heading level={1} size="display">MoexVibe</Heading>
|
||
<Text tone="secondary">Анализ акций и облигаций Московской биржи</Text>
|
||
<Text tone="muted">Введите название или тикер в строку поиска выше</Text>
|
||
<Text tone="muted">Данные задерживаются на 15 минут · Бесплатный API MOEX ISS</Text>
|
||
</Box>
|
||
```
|
||
|
||
### Step 2: Migrate SearchBar
|
||
|
||
- `<input>` → `<TextField label="Поиск" hiddenLabel placeholder="Поиск акций и облигаций..." />`
|
||
- `<ul>` dropdown wrapper → `<Surface elevation="sm">` (с inline-стилями для absolute positioning)
|
||
- `<li>` loading → `<Text tone="muted">Загрузка...</Text>`
|
||
- `<li>` empty → `<Text tone="muted">Ничего не найдено</Text>`
|
||
- `<li>` result item → `<Box>` + `<Text>` + `<Chip>`
|
||
- Hover effect (`onMouseEnter/onMouseLeave`) → MUI `sx={{ '&:hover': { bgcolor: 'action.hover' } }}`
|
||
- Hardcoded hex colors → MUI theme tokens (`text.disabled`, `divider`, etc.)
|
||
|
||
### Step 3: Verify
|
||
|
||
- `npm run test:frontend` — все тесты проходят
|
||
- `npm run lint -w apps/frontend` — lint чист, нет неразрешённых MUI-импортов
|
||
- `npm run build:frontend` — сборка проходит
|