Обзор frontend

React SPA, собранная с Vite.

Технологический стек

React 18
react-router-dom v6
TanStack Query v5
lightweight-charts v4
openapi-fetch (с рукописными типами responses.ts)
Vitest + Testing Library + MSW
Vite 5

Структура исходников

apps/frontend/src/
├── main.tsx                  # Точка входа
├── app/                      # FSD app layer
│   ├── App.tsx               # BrowserRouter → AppRoutes
│   ├── index.ts              # barrel
│   ├── providers/
│   │   ├── AppProviders.tsx  # QueryClientProvider + SessionProvider
│   │   ├── SessionProvider.tsx
│   │   └── index.ts
│   ├── routing/
│   │   ├── AppRoutes.tsx     # Все маршруты
│   │   ├── ProtectedRoute.tsx
│   │   └── index.ts
│   └── layouts/
│       ├── AppLayout.tsx     # Шапка + <Outlet/>
│       └── index.ts
├── api/
│   └── screener.ts           # Screener API helpers (не мигрирован)
├── hooks/
│   └── useScreener.ts        # Screener hook (не мигрирован)
├── components/
│   └── screener/             # Screener UI (не мигрирован)
├── entities/                 # FSD business entities
│   ├── session/              # Auth/session (api, model)
│   ├── stock/                # Акции (api, model)
│   ├── bond/                 # Облигации (api, model)
│   ├── portfolio/            # Портфели (api, model)
│   └── search/               # Поиск (model)
├── widgets/                  # FSD compositional widgets
│   ├── stock-details/        # Детальная карточка акции
│   ├── bond-details/         # Детальная карточка облигации
│   ├── price-chart/          # График цены
│   ├── dividends-table/      # Таблица дивидендов
│   ├── search-bar/           # Поисковая строка
│   ├── portfolio-card/       # Карточка портфеля
│   ├── portfolio-form/       # Форма портфеля
│   ├── portfolio-summary/    # Сводка портфеля (график + стоимость)
│   ├── portfolio-analytics/  # Метрики портфеля
│   ├── share-positions-table/  # Таблица позиций-акций
│   └── bond-positions-table/   # Таблица позиций-облигаций
├── pages/                    # FSD page entrypoints
│   ├── home/                 # Главная
│   ├── stock/                # Страница акции
│   ├── bond/                 # Страница облигации
│   ├── login/                # Вход
│   ├── register/             # Регистрация
│   ├── profile/              # Профиль
│   ├── portfolios/           # Список и детальная портфеля
│   ├── screener/             # Скринер (не мигрирован)
│   └── broker-*/             # Брокерские страницы
├── test/
│   ├── factories.ts          # Фабрики тестовых данных
│   ├── handlers.ts           # MSW handlers
│   ├── server.ts             # MSW server
│   ├── test-utils.tsx        # Обёртка рендера
│   └── setup.ts              # Настройка jsdom
└── styles.css

FSD-миграция

app-слой

Создан app/ слой FSD, в который перенесены инфраструктурные модули:

app/providers/ — композиция провайдеров (SessionProvider, QueryClientProvider)
app/routing/ — маршруты и ProtectedRoute
app/layouts/ — AppLayout (шапка + Outlet)
app/App.tsx — BrowserRouter → AppRoutes

entities

Домены бизнес-сущностей переведены в FSD:

Сущность	api	model	ui
`session`	login, register, refresh, logout, getMe, updateProfile	SessionContext, useSession	—
`stock`	getStock, getStockCandles, getStockDividends	useStock, useStockCandles, useStockDividends	—
`bond`	getBond, getBondCandles	useBond, useBondCandles	—
`portfolio`	CRUD портфелей и позиций, аналитика	usePortfolio, usePortfolios, usePortfolioAnalytics, usePortfolioMutations, usePositionMutations	—
`search`	—	useSearch	—

Каждая сущность имеет barrel-файл index.ts, реэкспортирующий публичное API.

widgets

Композиционные блоки UI. Каждый виджет — директория с index.ts и ui/:

stock-details, bond-details — детальные карточки бумаг
price-chart, dividends-table — графики и таблицы
search-bar — поиск с автодополнением
portfolio-card, portfolio-form, portfolio-summary, portfolio-analytics — UI портфелей
share-positions-table, bond-positions-table — таблицы позиций

pages

Страницы-точки входа. FSD-страницы мигрированы: home/, stock/, bond/, broker-*. Временно не мигрированы: portfolios/, screener/, LoginPage.tsx, RegisterPage.tsx, ProfilePage.tsx.

Не мигрировано

Скринер остаётся в исторической структуре:

api/screener.ts — API-вызовы
hooks/useScreener.ts — логика с URLSearchParams
components/screener/ — FilterPanel, FilterPanelBond, FilterPanelShare, ScreenerTable
pages/screener/ScreenerPage.tsx — страница

ESLint-правила на границы импортов FSD пока не введены.

6.1 KiB Raw Blame History Unescape Escape