73 lines
6.5 KiB
Markdown
73 lines
6.5 KiB
Markdown
# UI-каталог Storybook
|
|
|
|
Storybook 10.6.0 показывает реальные представления WealthLedger на общей
|
|
визуальной основе приложения без входа и подключения backend.
|
|
|
|
## Запуск и сборка
|
|
|
|
Каталог работает как отдельная локальная витрина по адресу
|
|
[localhost:6006](http://localhost:6006) либо как самостоятельная статическая
|
|
сборка. Его примеры не входят в пользовательские маршруты приложения.
|
|
Публикация отдельным сервисом не настроена.
|
|
|
|
## Компоненты и работа с примерами
|
|
|
|
Два блока каталога включают 9 групп и 30 примеров:
|
|
|
|
| Группа | Что показывает |
|
|
| --- | --- |
|
|
| Основы дизайн-системы | Палитры, семантические роли, типографику, интервалы, радиусы, тени и адаптивные размеры |
|
|
| Пустой результат и ошибки | Четыре варианта с действием и без |
|
|
| Загрузка | Доступную область занятости с нейтральными фигурами |
|
|
| Кнопки | Основное, вторичное и вспомогательное действие, выполнение и недоступность, работу с клавиатурой |
|
|
| Список счетов | Несколько валют, недоступную и пустую сводку, длинное название |
|
|
| Карточка позиции | Акцию с положительным результатом, облигацию с отрицательным, прочий инструмент и отсутствие оценки |
|
|
| Последние события | Успешный, загружаемый, ошибочный и пустой результат; неизвестную сумму |
|
|
| Обновление портфеля | Сохранённые суммы при обновлении и ошибке, локальную повторную попытку |
|
|
| Загрузка страницы счёта | Контур ожидаемых заголовка, сводки и строк |
|
|
|
|
Каталог не перечисляет все элементы библиотеки или приложения. Отсутствие
|
|
представления в витрине не означает его отсутствия в продукте. Основы показывают
|
|
опубликованные шкалы и смысл ролей; особые размеры и тени конкретных экранов
|
|
не объявляются общими токенами. Границы описаны в [дизайн-системе](design-system.md).
|
|
|
|
Canvas показывает выбранный пример. Docs поясняет назначение и ограничения,
|
|
Controls меняет доступные свойства, Actions показывает локальные действия.
|
|
Вымышленные исходные данные не редактируются через Controls: другой набор
|
|
данных выбирается отдельным примером. Свойства можно сбросить, пример —
|
|
смонтировать заново; изменение размера просмотра не сбрасывает выбранные значения.
|
|
|
|
Витрина и приложение используют одну тему. Примеры показываются по-русски
|
|
в светлой схеме. Ошибка сохраняет доступное объявление, загрузка — состояние
|
|
занятости; декоративные фигуры не получают фокус.
|
|
|
|
## Границы и сопровождение
|
|
|
|
Все счета, позиции, события и суммы вымышлены. Каталог не читает сессии,
|
|
cookies, секреты и реальные пользовательские данные. Вместо внешних логотипов
|
|
показываются буквенные заглушки. Сама витрина может сохранять свои настройки;
|
|
телеметрия отключена.
|
|
|
|
Действия не обращаются к application API. Ссылки меняют только локальное
|
|
состояние примера, не открывают продуктовую страницу назначения и не меняют
|
|
адрес приложения. Повторная попытка демонстрирует локальное действие и не
|
|
доказывает восстановление реального запроса.
|
|
|
|
Сохранённые суммы иллюстрируют Client Cached Snapshot, но его жизненный цикл
|
|
здесь не исполняется. В приложении первичная загрузка показывает контур
|
|
ожидаемого содержимого, фоновое обновление сохраняет данные, а выполняемое
|
|
действие имеет контекстный индикатор. Подробности —
|
|
[состояния интерфейса](../features/frontend-ui-resilience.md).
|
|
|
|
Автоматические проверки frontend охватывают каталог и его изоляцию от
|
|
продуктовых запросов. Примеры и их пояснения обновляются вместе с включёнными
|
|
представлениями. Клавиатура, реальные размеры и визуальное соответствие
|
|
проверяются в браузере; автоматической визуальной регрессии нет.
|
|
|
|
## Использование в UI задаче
|
|
|
|
Каталог помогает сравнить существующие состояния с ожидаемым пользовательским
|
|
сценарием. Он дополняет [принципы UI-решений](engineering-governance.md#ui-решения)
|
|
конкретными примерами, но успешная сборка не доказывает доступность,
|
|
визуальное соответствие и работу настоящего API.
|