🌟 Universal Cards Monorepo Огляд Проєкту Цей проєкт є монорепозиторієм, керованим за допомогою pnpm Workspaces, призначеним для розробки та централізованого керування логікою та UI-компонентами ігрових карток. Основна архітектурна мета — забезпечити повну незалежність бізнес-логіки (Ядра) від UI-фреймворків (Framework Agnostic Core).Для розробки UI-компонентів в ізоляції використовується Storybook.ТехнологіїІнструменти Архітектура TypeScript, React 19pnpm (Workspaces), Vite (Збірка/Dev)Core-Adapter-App Pattern, Storybook📦 Структура Пакетів Пакет Шлях Опис card-corepackages/card-coreЯдро. Містить чисту TS-логіку, класи (AbstractCardComponent), фабрики та інтерфейси (PickUpCardData). Не залежить від React. Збирається першим.react-card-adapterpackages/react-card-adapterАдаптер. Містить UI-компоненти (наприклад, CardRenderer.tsx) та VisualComponentMap. Перетворює логіку з card-core на React/JSX. Хост для Storybook.demo-react-appapps/demo-react-appДемонстраційний Додаток. Використовує react-card-adapter для перевірки інтеграції в повноцінному застосунку. Виконує роль фінального інтеграційного тесту.⚙️ Скрипти та Запуск (pnpm Workspaces) Усі команди запускаються з кореневого каталогу монорепозиторію.1. Встановлення ЗалежностейВстановлення всіх залежностей у всіх пакетах:Bashpnpm install 2. Послідовна Збірка Проєкту. Через залежність пакетів (core -> adapter -> app), збірка виконується послідовно. Це запобігає помилкам, пов'язаним з відсутніми файлами типів (.d.ts). Bash pnpm run build 💡 Примітка: Команда pnpm run build у корені виконує послідовно: pnpm --filter=card-core build ➡️ pnpm --filter=react-card-adapter build ➡️ pnpm --filter=demo-react-app build. 3. Запуск Демонстраційного Додатку (Інтеграційний Тест) Запуск React-додатка у режимі розробки для перевірки інтеграції:Bashpnpm --filter=demo-react-app dev 📚 Розробка Компонентів (Storybook)Storybook встановлений у пакеті react-card-adapter для ізольованої розробки та документування UI-компонентів.1. Запуск StorybookЗапуск dev-сервера Storybook:Bash pnpm --filter=react-card-adapter storybook ➡️ Доступ: http://localhost:6006/ 2. Створення ІсторіїДля створення нової історії використовуйте синтаксис ES Modules та забезпечте, щоб у *.stories.tsx ви завжди інстанціювали клас ядра (new CommonPickUpCard(...)) і передавали його компоненту:TypeScript// Example: packages/react-card-adapter/src/MyComponent.stories.tsx import { CommonPickUpCard } from 'card-core';

// ... створення інстанса: const cardInstance = new CommonPickUpCard({ title: '...', ... });

export const MyStory = { args: { card: cardInstance // передаємо інстанс, а не чистий об'єкт } }