From 55610ea2b4dc687f76ee9eb37c14d887b1b70100 Mon Sep 17 00:00:00 2001 From: Sergey Krylov Date: Tue, 22 Sep 2026 22:11:04 +0300 Subject: [PATCH] docs: describe local frontend packages and ownership OpenSpec change: evolve-frontend-stack --- architecture/containers.md | 14 ++++++++++++++ design/overview.md | 32 ++++++++++++++++++++++++++++++-- 2 files changed, 44 insertions(+), 2 deletions(-) diff --git a/architecture/containers.md b/architecture/containers.md index 99761a4..9f6930b 100644 --- a/architecture/containers.md +++ b/architecture/containers.md @@ -86,6 +86,20 @@ Frontend организован слоями `app → pages → features → ent где локальная аутентификация отделена от подключения брокера и инвестиционных сценариев. Это внутренняя организация приложений, не набор микросервисов. +Маршруты и AppShell принадлежат `app`. Page controller/VM управляет запросами, +формой и восстановлением; presentation получает данные и callbacks, поля +могут использовать контекст React Hook Form. В OperationForm controller +сохраняет intent операции, черновик и явное принятие актуальной версии после +конфликта. В account-income чистые преобразования периода принадлежат модели +страницы и не связывают форму с её запросами. + +Локальные packages tokens/ui/icons образуют [визуальную основу](../design/overview.md#общая-основа-и-каталог) +внутри frontend и входят в сборку SPA. Это библиотеки, а не дополнительные +runtime-контейнеры. Провайдеры темы принадлежат приложению и Storybook; +предметные компоненты и API-клиент остаются в приложении. Отдельный API-пакет +и registry-поставка визуальных пакетов не реализованы. Существующие Docker +images приложения не означают независимого npm-выпуска этих библиотек. + Финансовые HTTP-запросы браузера идут через backend. Пользователь вводит token T-Bank в форме и отправляет его для сохранения, но API не возвращает token в ответах; SPA не использует его для прямых брокерских запросов. Прямая diff --git a/design/overview.md b/design/overview.md index e8ab385..07bcbf5 100644 --- a/design/overview.md +++ b/design/overview.md @@ -4,6 +4,34 @@ типографику, интервалы, радиусы, тени и адаптивные размеры. Поддерживается светлая схема; тёмная тема не заявлена. +## Общая основа и каталог + +Внутри frontend используются три private npm workspace-пакета: + +| Пакет | Ответственность | +| --- | --- | +| `@wealthledger/tokens` | JSON со значениями палитры, типографики, интервалов и других визуальных параметров | +| `@wealthledger/ui` | Mantine-тема, общие стили, StateView, LoadingSkeleton и EntryCard | +| `@wealthledger/icons` | React-иконки добавления, редактирования и удаления | + +EntryCard отвечает за расположение переданных подписей, значения и действий. +Предметный компонент определяет смысл операции, форматирует данные и выбирает +цветовую роль. Денежные расчёты и запросы не входят в общий UI-пакет. + +Иконки наследуют цвет через `currentColor`. По умолчанию они декоративные: +доступное имя принадлежит кнопке. Самостоятельная смысловая иконка получает +явные роль изображения и доступное имя. Предметные рисунки и анимации +остаются в приложении; поставки raw SVG и мобильного UI нет. + +Storybook объединяет примеры приложения и пакетов. Он показывает синтетические +состояния без API, авторизации и query providers; формы получают локальные +callbacks. Каталог помогает проверять представление, но не заменяет проверки +запросов, денежных ограничений и восстановления после ошибок. + +Пакеты используются локально и не опубликованы в registry. Независимый выпуск +не настроен. Потребители импортируют публичные exports пакетов напрямую; прежние +compatibility re-exports `shared/theme` и `shared/ui` удалены. + ## Семантические роли | Роль | Цветовая основа | Применение | @@ -16,8 +44,8 @@ | border | gray.3 | Граница поверхности | | primary | blue filled | Основное действие и активная навигация | | info | blue.6 | Информация | -| positive | green.6 | Положительный результат с текстом или знаком | -| negative | red.6 | Ошибка или отрицательный результат с текстом или знаком | +| positive | green.9 | Положительный результат с текстом или знаком | +| negative | red.9 | Ошибка или отрицательный результат с текстом или знаком | | warning | yellow.6 | Предупреждение; не мелкий текст на белом | Цвет не заменяет подпись или знак. Палитра не гарантирует доступный контраст