Sergey Krylov bd33412691 feat(frontend): migrate HomePage and SearchBar to design system components

- 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

2026-06-21 16:57:19 +03:00

2.9 KiB

Raw Permalink Blame History

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

// До
<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 — сборка проходит

2.9 KiB Raw Permalink Blame History Unescape Escape