moex-vibe/apps/docs/docs/frontend/components.md
Sergey Krylov aac5b2f873
All checks were successful
CI / lint (pull_request) Successful in 1m32s
CI / test (pull_request) Successful in 1m23s
CI / build (pull_request) Successful in 1m27s
CI / lint (push) Successful in 1m16s
CI / test (push) Successful in 1m23s
CI / build (push) Successful in 1m32s
docs: add Docusaurus documentation site as npm workspace
- Create apps/docs/ with Docusaurus 3.7.0
- Add documentation: architecture, backend, frontend, infrastructure, development, ADR
- Include 5 Mermaid diagrams (system architecture, request flow, modules, caching, deployment)
- Configure as npm workspace with dev:docs/build:docs scripts
- Copy existing ADR documents from docs/architecture/adr/
2026-06-13 21:37:10 +03:00

1.8 KiB
Raw Blame History

Components

Layout (components/Layout.tsx)

Базовый layout с шапкой и <Outlet />.

  • Шапка: логотип "MoexVibe" (ссылка на /) + SearchBar
  • Основной контент: max-width 1200px, padding 24px

SearchBar (components/SearchBar.tsx)

Поиск инструментов с debounce (300ms).

  • Вызывает useSearch(debounced) при вводе 2+ символов
  • Показывает выпадающий список результатов
  • При клике на результат переходит на /stocks/:secid или /bonds/:secid
  • Закрывается при клике вне компонента

PriceChart (components/PriceChart.tsx)

График цены на основе lightweight-charts v4.

  • Принимает массив свечей: { open, high, low, close, begin }
  • Высота по умолчанию: 400px
  • Цвета: зелёный для роста, красный для падения
  • Адаптивная ширина (resize listener)

StockDetails (components/StockDetails.tsx)

Карточка с информацией об акции.

  • Принимает ShareResponse
  • Отображает: название, тикер, ISIN, цена, изменение (%), open/high/low, объём, капитализация, уровень листинга

BondDetails (components/BondDetails.tsx)

Карточка с информацией об облигации.

  • Принимает BondResponse
  • Отображает: название, ISIN, цена (в % от номинала), номинал, дата погашения, купон (сумма/%), период купона, НКД, доходность к погашению, дюрация, тип