ochenstarik 721deee615 feat(communications): implement KRONA Design System v3.0 and rebuild Communications module

- 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

2026-09-11 16:30:39 +07:00

4.5 KiB

Raw Blame History

Использование 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'
Card	`import { Card } from '@krona/ui'`	`MessengersView.tsx`, `SettingsView.tsx`, `ChannelsView.tsx`	`variant` (`'default'
Modal	`import { Modal } from '@krona/ui'`	`Modals.tsx` (ComposeEmail, NewChannel, QuickReply, NewContact)	`isOpen`, `onClose`, `title`, `size` (`'sm'
Button	`import { Button } from '@krona/ui'`	Во всех представлениях `/communications`	`variant` (`'primary'
Input	`import { Input } from '@krona/ui'`	Поиск, модальные окна, фильтры	`label`, `placeholder`, `error`, `leftIcon`, `value`, `onChange`
Badge	`import { Badge } from '@krona/ui'`	Карточка контакта, список писем, каналы	`variant` (`'default'
Avatar	`import { Avatar } from '@krona/ui'`	Список диалогов, заголовок чата, участники	`name`, `src`, `size` (`'sm'

3. Потребление CSS токенов дизайн-системы V3

В src/index.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, обеспечивая бесшовное переключение всей цветовой палитры интерфейса.