5.2 KiB
5.2 KiB
Использование UI-библиотеки ochenstarik/library в krona-front
1. Архитектурный принцип
В рамках технического задания запрещено копирование компонентов из общей библиотеки в krona-front.
Все компоненты, токены и темы дизайна подключаются как внешние пакетные зависимости:
@omnichannel/tokensи@omnichannel/tokens/css@omnichannel/themesи@omnichannel/themes/css@omnichannel/ui
В директории src/ проекта krona-front нет ни одного форкнутого или дублированного файла из krona-library/packages/ui/src/components/.
2. Реестр используемых компонентов @omnichannel/ui
| Компонент | Импорт | Где используется в krona-front |
Передаваемые props и варианты |
|---|---|---|---|
| Tabs | import { Tabs } from '@omnichannel/ui' |
CommunicationsHeader.tsx |
items: [{ id, label, icon, badge }], activeId, onChange, ariaLabel |
| ConnectorPill | import { ConnectorPill } from '@omnichannel/ui' |
MessengersView.tsx |
active, onClick, count, alertCount, icon, children |
| MessageBubble | import { MessageBubble } from '@omnichannel/ui' |
MessengersView.tsx, ChannelsView.tsx |
direction (`'incoming' |
| Card | import { Card } from '@omnichannel/ui' |
MessengersView.tsx, SettingsView.tsx, ChannelsView.tsx |
variant (`'default' |
| Modal | import { Modal } from '@omnichannel/ui' |
Modals.tsx (ComposeEmail, NewChannel, QuickReply, NewContact) |
isOpen, onClose, title, size (`'sm' |
| Button | import { Button } from '@omnichannel/ui' |
Во всех представлениях /communications |
variant (`'primary' |
| Input | import { Input } from '@omnichannel/ui' |
Поиск, модальные окна, фильтры | label, placeholder, error, leftIcon, value, onChange |
| Badge | import { Badge } from '@omnichannel/ui' |
Карточка контакта, список писем, каналы | variant (`'default' |
| Avatar | import { Avatar } from '@omnichannel/ui' |
Список диалогов, заголовок чата, участники | name, src, size (`'sm' |
| SearchInput | import { SearchInput } from '@omnichannel/ui' |
Поиск диалогов | Подсказки, клавиатурная навигация, очистка, loading/error/no-results |
| StatePanel | import { StatePanel } from '@omnichannel/ui' |
Восстановление после пустого поиска | state, описание и действия восстановления |
| BottomSheet | import { BottomSheet } from '@omnichannel/ui' |
Готов для мобильных фильтров и действий | open, onClose, title, footer |
3. Потребление CSS токенов дизайн-системы V3
В src/index.css подключены:
@import '@omnichannel/tokens/tokens.css';
@import '@omnichannel/themes/themes.css';
В кодовой базе krona-front при оформлении коммуникаций используются исключительно семантические переменные:
- Цвета фона:
var(--krona-bg-workspace),var(--krona-surface),var(--krona-surface-hover),var(--krona-surface-muted),var(--krona-surface-selected) - Брендовые цвета:
var(--krona-primary),var(--krona-primary-hover),var(--krona-primary-active),var(--krona-primary-soft) - Границы:
var(--krona-border),var(--krona-border-subtle),var(--krona-border-focus) - Текст:
var(--krona-text-primary),var(--krona-text-secondary),var(--krona-text-muted),var(--krona-text-inverse) - Статусы:
var(--krona-status-success),var(--krona-status-warning),var(--krona-status-danger),var(--krona-status-info)
4. Поддержка тем оформления
Root элемент приложения (document.documentElement) управляется через src/stores/theme.ts:
data-krona-theme="noble-green"data-krona-theme="parchment-light"data-krona-theme="graphite-forest-dark"
Каждая тема активирует свой набор CSS-переменных из @omnichannel/themes/themes.css, обеспечивая бесшовное переключение всей цветовой палитры интерфейса.