feat: Add @originjs/vite-plugin-federation for module federation support

* Updated package.json to include @originjs/vite-plugin-federation as a development dependency.
* Configured Vite to use the federation plugin, enabling module federation with shared React components.
* Enhanced build configuration for improved output handling and compatibility.

Author: ermolaev-frontend

frontend/README-MODULE-FEDERATION.md

@@ -0,0 +1,121 @@
+# Module Federation - Remote Configuration
+
+Этот проект настроен как **remote** в системе Module Federation, что позволяет другим приложениям (host) импортировать и использовать основное приложение Draftly.
+
+## Что экспортируется
+
+### Основной компонент
+- `./App` - Главный компонент приложения Draftly
+
+## Как использовать в host приложении
+
+### 1. Установка зависимостей
+```bash
+npm install @originjs/vite-plugin-federation
+```
+
+### 2. Конфигурация Vite в host приложении
+```typescript
+import federation from '@originjs/vite-plugin-federation';
+
+export default defineConfig({
+  plugins: [
+    federation({
+      name: 'host',
+      remotes: {
+        draftly: 'http://localhost:5173/assets/remoteEntry.js',
+      },
+      shared: {
+        react: { requiredVersion: '^19.1.0' },
+        'react-dom': { requiredVersion: '^19.1.0' },
+      },
+    }),
+  ],
+});
+```
+
+### 3. Импорт основного компонента
+```typescript
+import { lazy } from 'react';
+
+const DraftlyApp = lazy(() => import('draftly/App'));
+```
+
+### 4. Использование в компонентах
+```tsx
+import React, { Suspense } from 'react';
+
+function App() {
+  return (
+    <div>
+      <Suspense fallback={<div>Loading Draftly...</div>}>
+        <DraftlyApp />
+      </Suspense>
+    </div>
+  );
+}
+```
+
+## Сборка и развертывание
+
+### Разработка
+```bash
+pnpm dev
+```
+
+### Продакшн сборка
+```bash
+pnpm build
+```
+
+После сборки в папке `dist` появится файл `remoteEntry.js`, который нужно разместить на сервере.
+
+## Важные моменты
+
+1. **Версии зависимостей**: Убедитесь, что версии React и React-DOM совпадают между host и remote приложениями.
+
+2. **CORS**: При развертывании на разных доменах настройте CORS для доступа к `remoteEntry.js`.
+
+3. **Типы TypeScript**: Для корректной работы типов в host приложении скопируйте файл `src/types/federation.d.ts`.
+
+## Структура файлов
+
+```
+frontend/
+├── src/
+│   └── types/
+│       └── federation.d.ts    # Декларации типов для Module Federation
+├── vite.config.ts             # Конфигурация с Module Federation
+└── README-MODULE-FEDERATION.md
+```
+
+## Примеры использования
+
+### Простой импорт
+```tsx
+import { CanvasWrapper } from 'draftly/App';
+
+function MyApp() {
+  return (
+    <div>
+      <h1>Мое приложение</h1>
+      <DraftlyApp />
+    </div>
+  );
+}
+```
+
+### Динамический импорт
+```tsx
+import { lazy, Suspense } from 'react';
+
+const DraftlyApp = lazy(() => import('draftly/App'));
+
+function App() {
+  return (
+    <Suspense fallback={<div>Загрузка Draftly...</div>}>
+      <DraftlyApp />
+    </Suspense>
+  );
+}
+```

frontend/package.json

@@ -27,6 +27,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.29.0",
+    "@originjs/vite-plugin-federation": "^1.4.1",
     "@stylistic/eslint-plugin": "^5.1.0",
     "@types/jest": "^30.0.0",
     "@types/react": "^19.1.8",

frontend/pnpm-lock.yaml

@@ -0,0 +1,3 @@
+// Re-export all types for Module Federation
+export * from './canvas';
+export * from './colors';

frontend/src/shared/types/index.ts

@@ -0,0 +1,5 @@
+declare module 'draftly/App' {
+  import { ComponentType } from 'react';
+  const App: ComponentType;
+  export default App;
+}

frontend/src/types/federation.d.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { VitePWA } from 'vite-plugin-pwa';
+import federation from '@originjs/vite-plugin-federation';
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -29,7 +30,28 @@ export default defineConfig({
         start_url: '.',
       },
     }),
+    federation({
+      name: 'draftly',
+      filename: 'remoteEntry.js',
+      exposes: {
+        './App': './src/app/App.tsx',
+      },
+      shared: {
+        react: { requiredVersion: '^19.1.0' },
+        'react-dom': { requiredVersion: '^19.1.0' },
+      },
+    }),
   ],
+  build: {
+    target: 'esnext',
+    minify: false,
+    cssCodeSplit: false,
+    rollupOptions: {
+      output: {
+        minifyInternalExports: false,
+      },
+    },
+  },
   resolve: {
     alias: {
       shared: '/src/shared',