From 45179d2a2c68ad847124495141799d05dad53b90 Mon Sep 17 00:00:00 2001 From: ochenstarik Date: Sun, 20 Sep 2026 09:45:29 +0700 Subject: [PATCH] feat: integrate omnichannel design library --- .gitignore | 2 + UI_LIBRARY_USAGE.md | 39 +++++++------- design/penpot/generate-module-screens.mjs | 2 +- package-lock.json | 52 +++++++++++++++++++ package.json | 6 +-- .../communicationsDesignSystem.test.tsx | 17 +++--- .../components/ChannelsView.tsx | 2 +- .../components/CommunicationsHeader.tsx | 2 +- .../components/ContactsView.tsx | 2 +- .../communications/components/EmailView.tsx | 2 +- .../components/MessengersView.tsx | 36 +++++++------ .../communications/components/Modals.tsx | 2 +- .../components/SettingsView.tsx | 2 +- src/index.css | 5 +- src/stores/theme.ts | 5 ++ tsconfig.app.json | 11 ++-- vite.config.ts | 23 ++++---- vitest.config.ts | 23 ++++---- 18 files changed, 154 insertions(+), 79 deletions(-) diff --git a/.gitignore b/.gitignore index 2ef611c..cb91e40 100644 --- a/.gitignore +++ b/.gitignore @@ -8,6 +8,8 @@ pnpm-debug.log* lerna-debug.log* node_modules +.library-update/ +.pnpm-store/ dist dist-ssr *.local diff --git a/UI_LIBRARY_USAGE.md b/UI_LIBRARY_USAGE.md index ddc92c3..47e36aa 100644 --- a/UI_LIBRARY_USAGE.md +++ b/UI_LIBRARY_USAGE.md @@ -1,30 +1,33 @@ -# Использование UI-библиотеки krona-library в krona-front +# Использование UI-библиотеки `ochenstarik/library` в krona-front ## 1. Архитектурный принцип -В рамках технического задания **запрещено копирование компонентов из `krona-library` в `krona-front`**. +В рамках технического задания **запрещено копирование компонентов из общей библиотеки в `krona-front`**. Все компоненты, токены и темы дизайна подключаются как внешние пакетные зависимости: -- `@krona/tokens` и `@krona/tokens.css` -- `@krona/themes` и `@krona/themes.css` -- `@krona/ui` +- `@omnichannel/tokens` и `@omnichannel/tokens/css` +- `@omnichannel/themes` и `@omnichannel/themes/css` +- `@omnichannel/ui` В директории `src/` проекта `krona-front` нет ни одного форкнутого или дублированного файла из `krona-library/packages/ui/src/components/`. --- -## 2. Реестр используемых компонентов @krona/ui +## 2. Реестр используемых компонентов @omnichannel/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'`) | +| **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` | --- @@ -32,8 +35,8 @@ В `src/index.css` подключены: ```css -@import '@krona/tokens.css'; -@import '@krona/themes.css'; +@import '@omnichannel/tokens/tokens.css'; +@import '@omnichannel/themes/themes.css'; ``` В кодовой базе `krona-front` при оформлении коммуникаций используются исключительно семантические переменные: @@ -52,4 +55,4 @@ Root элемент приложения (`document.documentElement`) управ - `data-krona-theme="parchment-light"` - `data-krona-theme="graphite-forest-dark"` -Каждая тема активирует свой набор CSS-переменных из `@krona/themes.css`, обеспечивая бесшовное переключение всей цветовой палитры интерфейса. +Каждая тема активирует свой набор CSS-переменных из `@omnichannel/themes/themes.css`, обеспечивая бесшовное переключение всей цветовой палитры интерфейса. diff --git a/design/penpot/generate-module-screens.mjs b/design/penpot/generate-module-screens.mjs index a410f33..a104fd5 100644 --- a/design/penpot/generate-module-screens.mjs +++ b/design/penpot/generate-module-screens.mjs @@ -30,7 +30,7 @@ const modules = [ ]; const nav=['Главная','Аналитика','Маркетинг','Коммуникации','CRM','Продажи','Склад','Закупки','Финансы','Сотрудники','Проекты','Задачи','Документы','Автоматизация','Сайты','Поддержка','Настройки']; -function make([slug,module,title,statsRaw,rowsRaw]){ +function make([_slug,module,title,statsRaw,rowsRaw]){ const stats=statsRaw.split(';').map(x=>x.split('|')), rows=rowsRaw.split(';').map(x=>x.split('|')); const navSvg=nav.map((n,i)=>`${esc(n)}`).join(''); const statSvg=stats.map((s,i)=>`${esc(s[0])}${esc(s[1])}`).join(''); diff --git a/package-lock.json b/package-lock.json index 6aa0259..1336e27 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "krona-front", "version": "0.0.0", "dependencies": { + "@omnichannel/themes": "file:../library/packages/themes", + "@omnichannel/tokens": "file:../library/packages/tokens", + "@omnichannel/ui": "file:../library/packages/ui", "@tanstack/react-table": "^9.2.4", "clsx": "^2.1.1", "idb": "^8.0.3", @@ -39,6 +42,43 @@ "vitest": "^5.0.0" } }, + "../library/packages/themes": { + "name": "@omnichannel/themes", + "version": "0.1.2", + "devDependencies": { + "@types/react": "^18.2.55", + "@types/react-dom": "^18.2.18", + "vite": "^5.1.0" + }, + "peerDependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + } + }, + "../library/packages/tokens": { + "name": "@omnichannel/tokens", + "version": "0.1.0", + "devDependencies": { + "vite": "^5.1.0" + } + }, + "../library/packages/ui": { + "name": "@omnichannel/ui", + "version": "0.1.2", + "dependencies": { + "clsx": "^2.1.0", + "tailwind-merge": "^2.2.1" + }, + "devDependencies": { + "@types/react": "^18.2.55", + "@types/react-dom": "^18.2.18", + "vite": "^5.1.0" + }, + "peerDependencies": { + "react": ">=18.0.0", + "react-dom": ">=18.0.0" + } + }, "node_modules/@adobe/css-tools": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.5.0.tgz", @@ -377,6 +417,18 @@ "node": ">= 8" } }, + "node_modules/@omnichannel/themes": { + "resolved": "../library/packages/themes", + "link": true + }, + "node_modules/@omnichannel/tokens": { + "resolved": "../library/packages/tokens", + "link": true + }, + "node_modules/@omnichannel/ui": { + "resolved": "../library/packages/ui", + "link": true + }, "node_modules/@oxc-project/types": { "version": "0.149.0", "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.149.0.tgz", diff --git a/package.json b/package.json index 4aebf48..5c46daa 100644 --- a/package.json +++ b/package.json @@ -25,9 +25,9 @@ "tailwind-merge": "^3.6.0", "ulidx": "^2.4.1", "zustand": "^5.0.15", - "@krona/tokens": "file:../krona-library/packages/tokens", - "@krona/themes": "file:../krona-library/packages/themes", - "@krona/ui": "file:../krona-library/packages/ui" + "@omnichannel/tokens": "file:../library/packages/tokens", + "@omnichannel/themes": "file:../library/packages/themes", + "@omnichannel/ui": "file:../library/packages/ui" }, "devDependencies": { "@playwright/test": "^1.63.0", diff --git a/src/features/__tests__/communicationsDesignSystem.test.tsx b/src/features/__tests__/communicationsDesignSystem.test.tsx index 09c040d..60eb989 100644 --- a/src/features/__tests__/communicationsDesignSystem.test.tsx +++ b/src/features/__tests__/communicationsDesignSystem.test.tsx @@ -8,10 +8,11 @@ import { useThemeStore } from '../../stores/theme'; describe('Communications Module & Design System V3 Test Suite', () => { beforeEach(() => { + localStorage.clear(); useThemeStore.getState().setTheme('noble-green'); }); - it('renders Communications header with 5 main tabs and slogan watermark', () => { + it('renders the compact Communications header and keeps optional sections hidden by default', () => { render( @@ -19,17 +20,14 @@ describe('Communications Module & Design System V3 Test Suite', () => { ); expect(screen.getByText('Коммуникации')).toBeInTheDocument(); - expect( - screen.getByText('Все сообщения, почта и каналы компании в одном пространстве') - ).toBeInTheDocument(); expect(screen.getByRole('tab', { name: /мессенджеры/i })).toBeInTheDocument(); - expect(screen.getByRole('tab', { name: /email/i })).toBeInTheDocument(); - expect(screen.getByRole('tab', { name: /каналы/i })).toBeInTheDocument(); + expect(screen.queryByRole('tab', { name: /email/i })).not.toBeInTheDocument(); + expect(screen.queryByRole('tab', { name: /каналы/i })).not.toBeInTheDocument(); expect(screen.getByRole('tab', { name: /контакты/i })).toBeInTheDocument(); expect(screen.getByRole('tab', { name: /настройки/i })).toBeInTheDocument(); }); - it('renders connectors row with Telegram, WhatsApp, VK, MAX, Email pills', () => { + it('renders only messenger connectors in the messenger workspace', () => { render( @@ -41,7 +39,7 @@ describe('Communications Module & Design System V3 Test Suite', () => { expect(screen.getByRole('button', { name: /whatsapp.*8/i })).toBeInTheDocument(); expect(screen.getByRole('button', { name: /vk.*6/i })).toBeInTheDocument(); expect(screen.getByRole('button', { name: /max.*4/i })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: /email.*10/i })).toBeInTheDocument(); + expect(screen.queryByRole('button', { name: /email.*10/i })).not.toBeInTheDocument(); }); it('allows sending an interactive message in active chat and displays outgoing bubble', async () => { @@ -101,6 +99,7 @@ describe('Communications Module & Design System V3 Test Suite', () => { }); it('switches to Email tab and displays mailboxes and messages', async () => { + localStorage.setItem('krona-show-email', 'true'); render( @@ -119,6 +118,7 @@ describe('Communications Module & Design System V3 Test Suite', () => { }); it('switches to Channels tab and supports toggling message reactions', () => { + localStorage.setItem('krona-show-bot-channels', 'true'); render( @@ -166,6 +166,7 @@ describe('Communications Module & Design System V3 Test Suite', () => { const settingsTab = screen.getByRole('tab', { name: /настройки/i }); fireEvent.click(settingsTab); + fireEvent.click(screen.getByRole('tab', { name: 'Организация' })); expect(screen.getByText('Подключенные мессенджеры и коннекторы')).toBeInTheDocument(); expect(screen.getByText(/Сетевой шлюз и VPN/i)).toBeInTheDocument(); diff --git a/src/features/communications/components/ChannelsView.tsx b/src/features/communications/components/ChannelsView.tsx index 49ddaef..4518679 100644 --- a/src/features/communications/components/ChannelsView.tsx +++ b/src/features/communications/components/ChannelsView.tsx @@ -1,7 +1,7 @@ import { useState, type FormEvent } from 'react'; import { Hash, Lock, Users, Pin, Send, Plus } from 'lucide-react'; import { useCommunicationsStore } from '../services/communicationsService'; -import { Button } from '@krona/ui'; +import { Button } from '@omnichannel/ui'; interface ChannelsViewProps { onCreateChannelModal: () => void; diff --git a/src/features/communications/components/CommunicationsHeader.tsx b/src/features/communications/components/CommunicationsHeader.tsx index d26ed15..307ad2b 100644 --- a/src/features/communications/components/CommunicationsHeader.tsx +++ b/src/features/communications/components/CommunicationsHeader.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { MessageSquare, Mail, Hash, Users, Settings } from 'lucide-react'; import { CommunicationTab } from '../types'; -import { Tabs } from '@krona/ui'; +import { Tabs } from '@omnichannel/ui'; interface CommunicationsHeaderProps { activeTab: CommunicationTab; diff --git a/src/features/communications/components/ContactsView.tsx b/src/features/communications/components/ContactsView.tsx index 22b6e22..8c429eb 100644 --- a/src/features/communications/components/ContactsView.tsx +++ b/src/features/communications/components/ContactsView.tsx @@ -1,7 +1,7 @@ import { useState } from 'react'; import { Search, Plus, MessageSquare, Star, Clock } from 'lucide-react'; import { useCommunicationsStore } from '../services/communicationsService'; -import { Badge, Button } from '@krona/ui'; +import { Badge, Button } from '@omnichannel/ui'; interface ContactsViewProps { onAddContactModal: () => void; diff --git a/src/features/communications/components/EmailView.tsx b/src/features/communications/components/EmailView.tsx index 14703c2..deed806 100644 --- a/src/features/communications/components/EmailView.tsx +++ b/src/features/communications/components/EmailView.tsx @@ -4,7 +4,7 @@ import { Reply, Forward, ArrowLeft } from 'lucide-react'; import { useCommunicationsStore } from '../services/communicationsService'; -import { Button } from '@krona/ui'; +import { Button } from '@omnichannel/ui'; import { useToast } from '../../../shared/ui'; interface EmailViewProps { diff --git a/src/features/communications/components/MessengersView.tsx b/src/features/communications/components/MessengersView.tsx index d1d403b..354375d 100644 --- a/src/features/communications/components/MessengersView.tsx +++ b/src/features/communications/components/MessengersView.tsx @@ -1,13 +1,13 @@ import React, { useState, useRef, useEffect, type FormEvent } from 'react'; import { - Search, ArrowUpDown, Star, Phone, Video, UserPlus, + ArrowUpDown, Star, Phone, Video, UserPlus, MoreVertical, Paperclip, Sparkles, Smile, Mic, Send, Download, FileText, ArrowLeft, CheckCheck, Plus, Briefcase, CheckSquare, ShieldCheck } from 'lucide-react'; import { useCommunicationsStore } from '../services/communicationsService'; import { ChatConversation, ConnectorType } from '../types'; -import { Avatar, Badge, Button, ConnectorPill } from '@krona/ui'; +import { Avatar, Badge, Button, ConnectorPill, SearchInput, StatePanel } from '@omnichannel/ui'; import { useToast, Drawer } from '../../../shared/ui'; interface MessengersViewProps { @@ -180,16 +180,18 @@ export function MessengersView({ onOpenConnectModal, onOpenAddContactModal }: Me > {/* Search and filters header */}
-
- - setSearchQuery(e.target.value)} - placeholder="Поиск по чатам..." - className="w-full h-9 pl-9 pr-3 rounded-lg bg-[var(--krona-bg-workspace)] border border-[var(--krona-border)] text-sm text-[var(--krona-text-primary)] placeholder-[var(--krona-text-muted)] focus:outline-none focus:border-[var(--krona-primary)] transition-colors" - /> -
+ ({ + id: item.id, + label: item.contact.name, + description: item.contact.company, + }))} + onSelect={(item) => setActiveChatId(item.id)} + />
@@ -244,9 +246,13 @@ export function MessengersView({ onOpenConnectModal, onOpenAddContactModal }: Me {/* Conversation list */}
{filteredConversations.length === 0 ? ( -
- Диалоги не найдены -
+ setSearchQuery('') }} + /> ) : ( filteredConversations.map((item) => { const isActive = item.id === activeChat.id; diff --git a/src/features/communications/components/Modals.tsx b/src/features/communications/components/Modals.tsx index 98b7c46..31b0b59 100644 --- a/src/features/communications/components/Modals.tsx +++ b/src/features/communications/components/Modals.tsx @@ -1,5 +1,5 @@ import { useState, type FormEvent } from 'react'; -import { Modal, Button, Input } from '@krona/ui'; +import { Modal, Button, Input } from '@omnichannel/ui'; import { useCommunicationsStore } from '../services/communicationsService'; import { useToast } from '../../../shared/ui'; import { Paperclip } from 'lucide-react'; diff --git a/src/features/communications/components/SettingsView.tsx b/src/features/communications/components/SettingsView.tsx index 820eb6c..7ffbc3c 100644 --- a/src/features/communications/components/SettingsView.tsx +++ b/src/features/communications/components/SettingsView.tsx @@ -1,7 +1,7 @@ import { useState } from 'react'; import { RefreshCw, Trash2, Globe, UserCog, Bell, Volume2, PanelTop } from 'lucide-react'; import { useCommunicationsStore } from '../services/communicationsService'; -import { Button, Badge } from '@krona/ui'; +import { Button, Badge } from '@omnichannel/ui'; import { useToast } from '../../../shared/ui'; interface SettingsViewProps { diff --git a/src/index.css b/src/index.css index b125a78..3d60e12 100644 --- a/src/index.css +++ b/src/index.css @@ -1,6 +1,5 @@ -@import '@krona/tokens.css'; -@import '@krona/themes.css'; -@import '@krona/ui.css'; +@import '@omnichannel/tokens/css'; +@import '@omnichannel/themes/css'; @tailwind base; @tailwind components; diff --git a/src/stores/theme.ts b/src/stores/theme.ts index c080684..ce66952 100644 --- a/src/stores/theme.ts +++ b/src/stores/theme.ts @@ -57,6 +57,11 @@ function applyThemeToDom(theme: ThemeMode) { const activeLegacy = legacyThemeMap[theme] || 'light'; document.documentElement.setAttribute('data-krona-theme', activeKrona); + document.documentElement.setAttribute('data-omni-theme', activeKrona); + document.documentElement.setAttribute( + 'data-omni-density', + window.matchMedia('(max-width: 600px)').matches ? 'touch' : 'workspace', + ); document.documentElement.setAttribute('data-theme', activeLegacy); } diff --git a/tsconfig.app.json b/tsconfig.app.json index 3ca1612..2eb84c4 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -17,9 +17,14 @@ /* Paths */ "paths": { "@/*": ["./src/*"], - "@krona/tokens": ["../krona-library/packages/tokens/dist/index.d.ts"], - "@krona/themes": ["../krona-library/packages/themes/dist/index.d.ts"], - "@krona/ui": ["../krona-library/packages/ui/dist/index.d.ts"] + "react": ["./node_modules/@types/react/index.d.ts"], + "react/jsx-runtime": ["./node_modules/@types/react/jsx-runtime.d.ts"], + "react/jsx-dev-runtime": ["./node_modules/@types/react/jsx-dev-runtime.d.ts"], + "clsx": ["./node_modules/clsx/clsx.d.ts"], + "tailwind-merge": ["./node_modules/tailwind-merge/dist/types.d.ts"], + "@omnichannel/tokens": ["../library/packages/tokens/src/index.ts"], + "@omnichannel/themes": ["../library/packages/themes/src/index.tsx"], + "@omnichannel/ui": ["../library/packages/ui/src/index.ts"] }, /* Linting */ diff --git a/vite.config.ts b/vite.config.ts index 1d2907b..cc0fc41 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -9,17 +9,18 @@ const currentDir = path.dirname(fileURLToPath(import.meta.url)) export default defineConfig({ plugins: [react()], resolve: { - alias: { - '@': path.resolve(currentDir, './src'), - react: path.resolve(currentDir, './node_modules/react'), - 'react-dom': path.resolve(currentDir, './node_modules/react-dom'), - '@krona/tokens': path.resolve(currentDir, '../krona-library/packages/tokens/dist/index.mjs'), - '@krona/themes': path.resolve(currentDir, '../krona-library/packages/themes/dist/index.mjs'), - '@krona/ui': path.resolve(currentDir, '../krona-library/packages/ui/dist/index.mjs'), - '@krona/tokens.css': path.resolve(currentDir, '../krona-library/packages/tokens/src/tokens.css'), - '@krona/themes.css': path.resolve(currentDir, '../krona-library/packages/themes/src/themes.css'), - '@krona/ui.css': path.resolve(currentDir, '../krona-library/packages/ui/dist/style.css'), - }, + alias: [ + { find: '@', replacement: path.resolve(currentDir, './src') }, + { find: 'react', replacement: path.resolve(currentDir, './node_modules/react') }, + { find: 'react-dom', replacement: path.resolve(currentDir, './node_modules/react-dom') }, + { find: 'clsx', replacement: path.resolve(currentDir, './node_modules/clsx/dist/clsx.mjs') }, + { find: 'tailwind-merge', replacement: path.resolve(currentDir, './node_modules/tailwind-merge/dist/bundle-mjs.mjs') }, + { find: '@omnichannel/tokens/css', replacement: path.resolve(currentDir, '../library/packages/tokens/src/tokens.css') }, + { find: '@omnichannel/themes/css', replacement: path.resolve(currentDir, '../library/packages/themes/src/themes.css') }, + { find: '@omnichannel/tokens', replacement: path.resolve(currentDir, '../library/packages/tokens/src/index.ts') }, + { find: '@omnichannel/themes', replacement: path.resolve(currentDir, '../library/packages/themes/src/index.tsx') }, + { find: '@omnichannel/ui', replacement: path.resolve(currentDir, '../library/packages/ui/src/index.ts') }, + ], }, build: { chunkSizeWarningLimit: 1200, diff --git a/vitest.config.ts b/vitest.config.ts index dcbdddc..3e7b29a 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -8,17 +8,18 @@ const currentDir = path.dirname(fileURLToPath(import.meta.url)) export default defineConfig({ plugins: [react()], resolve: { - alias: { - '@': path.resolve(currentDir, './src'), - react: path.resolve(currentDir, './node_modules/react'), - 'react-dom': path.resolve(currentDir, './node_modules/react-dom'), - '@krona/tokens': path.resolve(currentDir, '../krona-library/packages/tokens/dist/index.mjs'), - '@krona/themes': path.resolve(currentDir, '../krona-library/packages/themes/dist/index.mjs'), - '@krona/ui': path.resolve(currentDir, '../krona-library/packages/ui/dist/index.mjs'), - '@krona/tokens.css': path.resolve(currentDir, '../krona-library/packages/tokens/src/tokens.css'), - '@krona/themes.css': path.resolve(currentDir, '../krona-library/packages/themes/src/themes.css'), - '@krona/ui.css': path.resolve(currentDir, '../krona-library/packages/ui/dist/style.css'), - }, + alias: [ + { find: '@', replacement: path.resolve(currentDir, './src') }, + { find: 'react', replacement: path.resolve(currentDir, './node_modules/react') }, + { find: 'react-dom', replacement: path.resolve(currentDir, './node_modules/react-dom') }, + { find: 'clsx', replacement: path.resolve(currentDir, './node_modules/clsx/dist/clsx.mjs') }, + { find: 'tailwind-merge', replacement: path.resolve(currentDir, './node_modules/tailwind-merge/dist/bundle-mjs.mjs') }, + { find: '@omnichannel/tokens/css', replacement: path.resolve(currentDir, '../library/packages/tokens/src/tokens.css') }, + { find: '@omnichannel/themes/css', replacement: path.resolve(currentDir, '../library/packages/themes/src/themes.css') }, + { find: '@omnichannel/tokens', replacement: path.resolve(currentDir, '../library/packages/tokens/src/index.ts') }, + { find: '@omnichannel/themes', replacement: path.resolve(currentDir, '../library/packages/themes/src/index.tsx') }, + { find: '@omnichannel/ui', replacement: path.resolve(currentDir, '../library/packages/ui/src/index.ts') }, + ], }, test: { environment: 'jsdom',