58 lines
5.2 KiB
Markdown
58 lines
5.2 KiB
Markdown
# Использование 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' | 'outgoing'`), `senderName`, `timestamp`, `status` (`'sent' | 'delivered' | 'read'`), `connector`, `isInternal`, `attachments`, `avatarUrl` |
|
||
| **Card** | `import { Card } from '@omnichannel/ui'` | `MessengersView.tsx`, `SettingsView.tsx`, `ChannelsView.tsx` | `variant` (`'default' | 'muted' | 'interactive'`), `padding` (`'sm' | 'md' | 'lg'`), `header`, `footer`, `children` |
|
||
| **Modal** | `import { Modal } from '@omnichannel/ui'` | `Modals.tsx` (ComposeEmail, NewChannel, QuickReply, NewContact) | `isOpen`, `onClose`, `title`, `size` (`'sm' | 'md' | 'lg' | 'xl'`), `footer`, `children` |
|
||
| **Button** | `import { Button } from '@omnichannel/ui'` | Во всех представлениях `/communications` | `variant` (`'primary' | 'secondary' | 'ghost' | 'danger'`), `size` (`'sm' | 'md' | 'lg'`), `disabled`, `icon`, `onClick` |
|
||
| **Input** | `import { Input } from '@omnichannel/ui'` | Поиск, модальные окна, фильтры | `label`, `placeholder`, `error`, `leftIcon`, `value`, `onChange` |
|
||
| **Badge** | `import { Badge } from '@omnichannel/ui'` | Карточка контакта, список писем, каналы | `variant` (`'default' | 'primary' | 'success' | 'warning' | 'danger' | 'outline'`), `size` (`'sm' | 'md'`), `children` |
|
||
| **Avatar** | `import { Avatar } from '@omnichannel/ui'` | Список диалогов, заголовок чата, участники | `name`, `src`, `size` (`'sm' | 'md' | 'lg'`), `status` (`'online' | 'offline' | 'busy'`) |
|
||
| **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` подключены:
|
||
```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`, обеспечивая бесшовное переключение всей цветовой палитры интерфейса.
|