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