ochenstarik
721deee615
- Integrate @krona/tokens, @krona/themes, and @krona/ui from krona-library without code duplication - Support three official V3 themes: noble-green, parchment-light, and graphite-forest-dark - Rebuild Communications module with 5 interactive views: Messengers, Email, Channels, Contacts, Settings - Implement mobile-first drill-down, tablet 2-column, and desktop 3-column responsive layouts - Connect Telegram, WhatsApp, VK, MAX, and Email connector pills with real-time filters - Implement simulated incoming replies, quick replies manager, CRM deal/task creation, Sing-box VPN status monitor - Add comprehensive test suite in communicationsDesignSystem.test.tsx (11/11 passing) - Add IMPLEMENTATION_REPORT.md, UI_LIBRARY_USAGE.md, and COMMUNICATIONS_HANDOFF.md
55 lines
4.5 KiB
Markdown
55 lines
4.5 KiB
Markdown
# Использование UI-библиотеки krona-library в krona-front
|
||
|
||
## 1. Архитектурный принцип
|
||
|
||
В рамках технического задания **запрещено копирование компонентов из `krona-library` в `krona-front`**.
|
||
Все компоненты, токены и темы дизайна подключаются как внешние пакетные зависимости:
|
||
- `@krona/tokens` и `@krona/tokens.css`
|
||
- `@krona/themes` и `@krona/themes.css`
|
||
- `@krona/ui`
|
||
|
||
В директории `src/` проекта `krona-front` нет ни одного форкнутого или дублированного файла из `krona-library/packages/ui/src/components/`.
|
||
|
||
---
|
||
|
||
## 2. Реестр используемых компонентов @krona/ui
|
||
|
||
| Компонент | Импорт | Где используется в `krona-front` | Передаваемые props и варианты |
|
||
|---|---|---|---|
|
||
| **Tabs** | `import { Tabs } from '@krona/ui'` | `CommunicationsHeader.tsx` | `items`: `[{ id, label, icon, badge }]`, `activeId`, `onChange`, `ariaLabel` |
|
||
| **ConnectorPill** | `import { ConnectorPill } from '@krona/ui'` | `MessengersView.tsx` | `active`, `onClick`, `count`, `alertCount`, `icon`, `children` |
|
||
| **MessageBubble** | `import { MessageBubble } from '@krona/ui'` | `MessengersView.tsx`, `ChannelsView.tsx` | `direction` (`'incoming' | 'outgoing'`), `senderName`, `timestamp`, `status` (`'sent' | 'delivered' | 'read'`), `connector`, `isInternal`, `attachments`, `avatarUrl` |
|
||
| **Card** | `import { Card } from '@krona/ui'` | `MessengersView.tsx`, `SettingsView.tsx`, `ChannelsView.tsx` | `variant` (`'default' | 'muted' | 'interactive'`), `padding` (`'sm' | 'md' | 'lg'`), `header`, `footer`, `children` |
|
||
| **Modal** | `import { Modal } from '@krona/ui'` | `Modals.tsx` (ComposeEmail, NewChannel, QuickReply, NewContact) | `isOpen`, `onClose`, `title`, `size` (`'sm' | 'md' | 'lg' | 'xl'`), `footer`, `children` |
|
||
| **Button** | `import { Button } from '@krona/ui'` | Во всех представлениях `/communications` | `variant` (`'primary' | 'secondary' | 'ghost' | 'danger'`), `size` (`'sm' | 'md' | 'lg'`), `disabled`, `icon`, `onClick` |
|
||
| **Input** | `import { Input } from '@krona/ui'` | Поиск, модальные окна, фильтры | `label`, `placeholder`, `error`, `leftIcon`, `value`, `onChange` |
|
||
| **Badge** | `import { Badge } from '@krona/ui'` | Карточка контакта, список писем, каналы | `variant` (`'default' | 'primary' | 'success' | 'warning' | 'danger' | 'outline'`), `size` (`'sm' | 'md'`), `children` |
|
||
| **Avatar** | `import { Avatar } from '@krona/ui'` | Список диалогов, заголовок чата, участники | `name`, `src`, `size` (`'sm' | 'md' | 'lg'`), `status` (`'online' | 'offline' | 'busy'`) |
|
||
|
||
---
|
||
|
||
## 3. Потребление CSS токенов дизайн-системы V3
|
||
|
||
В `src/index.css` подключены:
|
||
```css
|
||
@import '@krona/tokens.css';
|
||
@import '@krona/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-переменных из `@krona/themes.css`, обеспечивая бесшовное переключение всей цветовой палитры интерфейса.
|