@djangocfg/layouts 1.4.30 → 2.0.1

package/src/layouts/AppLayout/SUMMARY.md

@@ -1,240 +0,0 @@
-# AppLayout - Implementation Summary
-
-## ✅ Что создано
-
-### 📁 Структура (идеально декомпозированная)
-
-```
-AppLayout/
-├── types/                      # ✅ Все типы
-│   ├── config.ts              # AppLayoutConfig
-│   ├── layout.ts              # PublicLayoutConfig, PrivateLayoutConfig
-│   ├── navigation.ts          # NavigationItem, DashboardMenuItem
-│   ├── routes.ts              # RouteConfig, LayoutMode
-│   └── index.ts
-│
-├── context/                    # ✅ Unified context
-│   ├── AppContext.tsx         # Главный контекст со всем состоянием
-│   └── index.ts
-│
-├── hooks/                      # ✅ Custom hooks
-│   ├── useLayoutMode.ts       # Текущий режим layout'а
-│   ├── useNavigation.ts       # Навигационные утилиты
-│   └── index.ts
-│
-├── providers/                  # ✅ Provider wrappers
-│   ├── CoreProviders.tsx      # Theme + Auth + Toaster
-│   └── index.ts
-│
-├── layouts/                    # ✅ Layout components
-│   ├── PublicLayout/          # Публичный layout (refactored MainLayout)
-│   │   ├── PublicLayout.tsx
-│   │   ├── components/
-│   │   │   ├── Navigation.tsx
-│   │   │   └── Footer.tsx
-│   │   └── index.ts
-│   │
-│   ├── PrivateLayout/         # Приватный layout (refactored DashboardLayout)
-│   │   ├── PrivateLayout.tsx
-│   │   └── index.ts
-│   │
-│   ├── AuthLayout/            # Auth layout (перенесен)
-│   └── index.ts
-│
-├── components/                 # ✅ UI components
-│   ├── Seo.tsx                # SEO meta tags
-│   ├── PageProgress.tsx       # Loading progress bar
-│   └── index.ts
-│
-├── utils/                      # ✅ Utilities
-│   ├── routeDetection.ts      # Определение типа route
-│   └── index.ts
-│
-├── AppLayout.tsx              # ✅ Main component
-├── index.ts                   # ✅ Public exports
-├── README.md                  # ✅ Architecture docs
-├── USAGE.md                   # ✅ Usage guide
-└── SUMMARY.md                 # ✅ This file
-```
-
-## 🎯 Ключевые особенности
-
-### 1. Zero Prop Drilling
-```typescript
-// ❌ Старый подход
-<Layout
-  config={config}
-  user={user}
-  isAuthenticated={isAuthenticated}
-  onLogout={logout}
-  menuOpen={menuOpen}
-  onToggleMenu={toggleMenu}
->
-
-// ✅ Новый подход
-<AppLayout config={config}>
-  {/* Всё доступно через контекст! */}
-</AppLayout>
-```
-
-### 2. Unified Context
-```typescript
-const {
-  config,              // Вся конфигурация
-  layoutMode,          // Текущий режим
-  mobileMenuOpen,      // UI состояние
-  toggleMobileMenu,    // Actions
-  sidebarCollapsed,
-  toggleSidebar,
-} = useAppContext();
-```
-
-### 3. Smart Layout Detection
-```typescript
-// Автоматически определяет layout на основе route:
-/           → PublicLayout
-/private/*  → PrivateLayout
-/auth/*     → AuthLayout
-```
-
-### 4. Single Entry Point
-```typescript
-// _app.tsx - единственное место подключения
-<AppLayout config={appLayoutConfig}>
-  <Component {...pageProps} />
-</AppLayout>
-```
-
-## 📝 Что сделано в cloud app
-
-### 1. Создан appLayoutConfig.ts
-```typescript
-// apps/cloud/src/core/appLayoutConfig.ts
-export const appLayoutConfig: AppLayoutConfig = {
-  app: { /* ... */ },
-  api: { /* ... */ },
-  routes: { /* ... */ },
-  publicLayout: { /* ... */ },
-  privateLayout: { /* ... */ },
-};
-```
-
-### 2. Обновлен _app.tsx
-```typescript
-// Было: ~50 строк с SmartLayout и логикой
-// Стало: 15 строк с AppLayout
-<AppLayout config={appLayoutConfig}>
-  <Component {...pageProps} />
-</AppLayout>
-```
-
-### 3. Обновлен core/index.ts
-```typescript
-export { appLayoutConfig } from './appLayoutConfig';
-```
-
-## 🎨 Как использовать
-
-### В любом компоненте:
-```typescript
-import { useAppContext } from '@djangocfg/layouts';
-
-function MyComponent() {
-  const { config, layoutMode } = useAppContext();
-  // Всё доступно!
-}
-```
-
-### С хуками:
-```typescript
-import { useLayoutMode, useNavigation } from '@djangocfg/layouts';
-
-function MyComponent() {
-  const mode = useLayoutMode();
-  const { isActive } = useNavigation();
-}
-```
-
-## 🏗️ Архитектурные принципы
-
-### ✅ Separation of Concerns
-Каждая папка отвечает за свою область:
-- `types/` - типы
-- `context/` - состояние
-- `hooks/` - логика
-- `layouts/` - рендеринг
-- `components/` - UI
-
-### ✅ Single Source of Truth
-Один `AppLayoutConfig` для всего
-
-### ✅ Context over Props
-Никакого prop drilling
-
-### ✅ Composability
-Легко расширять и модифицировать
-
-### ✅ Type Safety
-TypeScript везде
-
-## 📊 Миграция
-
-### Старые компоненты → Новые
-
-```
-MainLayout       → AppLayout (PublicLayout)
-DashboardLayout  → AppLayout (PrivateLayout)
-AuthLayout       → AppLayout (AuthLayout)
-
-layoutConfig      → appLayoutConfig.publicLayout
-dashboardConfig   → appLayoutConfig.privateLayout
-smartLayoutConfig → appLayoutConfig (unified)
-```
-
-### Старые файлы
-```
-_old/MainLayout/       → Reference only
-_old/DashboardLayout/  → Reference only
-_old/AppLayout/        → Reference only
-```
-
-## 🚀 Next Steps
-
-### Immediate:
-1. ✅ Refactor Navigation component from _old/MainLayout
-2. ✅ Refactor Footer component from _old/MainLayout
-3. ✅ Refactor PrivateLayout components from _old/DashboardLayout
-4. ✅ Test all routes and layouts
-5. ✅ Remove _old/ folder
-
-### Future:
-- Add tests
-- Add Storybook stories
-- Add accessibility improvements
-- Add analytics integration
-
-## 💡 Benefits
-
-### For Developers:
-- **Простота**: Один компонент для всего
-- **Понятность**: Чистая структура папок
-- **Удобство**: Хуки для всего
-- **Скорость**: Нет prop drilling
-
-### For Architecture:
-- **Масштабируемость**: Легко добавлять функционал
-- **Тестируемость**: Всё изолировано
-- **Поддерживаемость**: Чистый код
-- **Производительность**: Context оптимизирован
-
-## 🎉 Result
-
-**Одна строка подключения. Бесконечные возможности.**
-
-```typescript
-<AppLayout config={appLayoutConfig}>
-  <YourApp />
-</AppLayout>
-```
-
-Вот и всё! 🚀

package/src/layouts/AppLayout/USAGE.md

@@ -1,312 +0,0 @@
-# AppLayout - Usage Guide
-
-## 🎯 Философия
-
-**Одна точка входа. Ноль prop drilling. Максимум умности.**
-
-AppLayout - это единственный компонент, который нужен для управления всеми layout'ами в приложении.
-
-## 🚀 Quick Start
-
-### 1. Создай конфиг (один раз)
-
-```typescript
-// apps/cloud/src/core/appLayoutConfig.ts
-import type { AppLayoutConfig } from '@djangocfg/layouts';
-
-export const appLayoutConfig: AppLayoutConfig = {
-  app: {
-    name: 'My App',
-    logoPath: '/logo.svg',
-  },
-  api: {
-    baseUrl: process.env.NEXT_PUBLIC_API_URL!,
-  },
-  routes: {
-    auth: '/auth',
-    defaultCallback: '/dashboard',
-    detectors: {
-      isPublicRoute: (path) => !path.startsWith('/private'),
-      isPrivateRoute: (path) => path.startsWith('/private'),
-      isAuthRoute: (path) => path.startsWith('/auth'),
-      getUnauthenticatedRedirect: (path) =>
-        path.startsWith('/private') ? '/auth' : null,
-      getPageTitle: (path) => 'My App',
-    },
-  },
-  publicLayout: {
-    navigation: {
-      homePath: '/',
-      menuSections: [
-        {
-          title: 'Main',
-          items: [
-            { label: 'Home', path: '/' },
-            { label: 'Docs', path: '/docs' },
-          ],
-        },
-      ],
-    },
-    userMenu: {
-      profilePath: '/profile',
-    },
-    footer: {
-      badge: { icon: MyIcon, text: 'My App' },
-      links: { privacy: '/privacy', terms: '/terms' },
-      menuSections: [],
-    },
-  },
-  privateLayout: {
-    homeHref: '/',
-    profileHref: '/profile',
-    showChat: true,
-    menuGroups: [
-      {
-        label: 'Main',
-        order: 1,
-        items: [
-          { path: '/dashboard', label: 'Dashboard', icon: DashboardIcon },
-        ],
-      },
-    ],
-    contentPadding: 'default',
-  },
-};
-```
-
-### 2. Используй в _app.tsx (один раз)
-
-```typescript
-// pages/_app.tsx
-import { AppLayout } from '@djangocfg/layouts';
-import { appLayoutConfig } from '@/core';
-
-export default function App({ Component, pageProps }: AppProps) {
-  return (
-    <AppLayout config={appLayoutConfig}>
-      <Component {...pageProps} />
-    </AppLayout>
-  );
-}
-```
-
-### 3. Всё! 🎉
-
-Теперь:
-- ✅ Public страницы автоматически получат MainLayout
-- ✅ Private страницы (`/private/*`) автоматически получат DashboardLayout
-- ✅ Auth страницы (`/auth/*`) получат минимальный layout
-- ✅ Все компоненты имеют доступ к конфигу через `useAppContext()`
-
-## 🎨 Использование в компонентах
-
-### Доступ к конфигу и состоянию
-
-```typescript
-import { useAppContext } from '@djangocfg/layouts';
-
-function MyComponent() {
-  const {
-    config,                  // Весь конфиг
-    layoutMode,              // 'public' | 'private' | 'auth'
-    currentPath,             // Текущий путь
-    mobileMenuOpen,          // Состояние мобильного меню
-    toggleMobileMenu,        // Функция для переключения
-    sidebarCollapsed,        // Sidebar в dashboard
-    toggleSidebar,           // Функция для sidebar
-  } = useAppContext();
-
-  return (
-    <button onClick={toggleMobileMenu}>
-      Menu
-    </button>
-  );
-}
-```
-
-### Использование хуков
-
-```typescript
-import { useLayoutMode, useNavigation } from '@djangocfg/layouts';
-
-function MyComponent() {
-  const mode = useLayoutMode();
-  const { isActive, getPageTitle } = useNavigation();
-
-  if (mode === 'private') {
-    return <DashboardContent />;
-  }
-
-  return <PublicContent />;
-}
-```
-
-### Доступ к auth
-
-```typescript
-import { useAuth } from '@djangocfg/layouts';
-
-function UserProfile() {
-  const { user, isAuthenticated, logout } = useAuth();
-
-  if (!isAuthenticated) {
-    return <div>Not authenticated</div>;
-  }
-
-  return (
-    <div>
-      <p>Welcome, {user.email}</p>
-      <button onClick={logout}>Logout</button>
-    </div>
-  );
-}
-```
-
-## 🔧 Настройка layout'ов
-
-### Public Layout
-
-Управляется через `config.publicLayout`:
-
-```typescript
-publicLayout: {
-  navigation: {
-    homePath: '/',
-    menuSections: [/* меню для navbar */],
-  },
-  userMenu: {
-    dashboardPath: '/dashboard',  // Опционально
-    profilePath: '/profile',
-  },
-  footer: {
-    badge: { icon: MyIcon, text: 'App Name' },
-    links: { privacy: '/privacy', terms: '/terms' },
-    menuSections: [/* меню для footer */],
-  },
-}
-```
-
-### Private Layout
-
-Управляется через `config.privateLayout`:
-
-```typescript
-privateLayout: {
-  homeHref: '/',
-  profileHref: '/profile',
-  showChat: true,                    // Показывать чат
-  contentPadding: 'default',         // или 'none'
-  menuGroups: [
-    {
-      label: 'Main',
-      order: 1,
-      items: [
-        { path: '/dashboard', label: 'Dashboard', icon: Icon },
-      ],
-    },
-  ],
-  headerActions: <CustomActions />,  // Опционально
-}
-```
-
-## 📊 Структура проекта
-
-```
-apps/cloud/
-├── src/
-│   ├── core/
-│   │   ├── appLayoutConfig.ts      ← Единый конфиг
-│   │   ├── routes.ts               ← Определение маршрутов
-│   │   └── settings.ts             ← Настройки приложения
-│   │
-│   └── pages/
-│       ├── _app.tsx                ← AppLayout подключается здесь
-│       ├── index.tsx               ← Публичная страница (auto)
-│       ├── auth/
-│       │   └── index.tsx           ← Auth layout (auto)
-│       └── private/
-│           └── dashboard.tsx       ← Dashboard layout (auto)
-```
-
-## 🎯 Преимущества
-
-### ✅ Нет prop drilling
-Всё через контекст - никаких пропсов вниз по дереву
-
-### ✅ Автоматический роутинг
-Layout определяется автоматически на основе пути
-
-### ✅ Единый конфиг
-Один объект конфигурации для всего приложения
-
-### ✅ Типобезопасность
-TypeScript везде
-
-### ✅ Легкое тестирование
-Весь функционал доступен через хуки
-
-### ✅ Простота использования
-Подключил один раз в `_app.tsx` - и всё работает
-
-## 🔍 Как это работает
-
-```
-_app.tsx
-  ↓
-AppLayout (config)
-  ↓
-CoreProviders (Theme, Auth, Toaster)
-  ↓
-AppContextProvider (State management)
-  ↓
-LayoutRouter (Auto-detect route)
-  ↓
-├─ PublicLayout     (/)
-├─ PrivateLayout    (/private/*)
-└─ AuthLayout       (/auth/*)
-     ↓
-   Page Component
-```
-
-## 💡 Best Practices
-
-### 1. Один конфиг
-Храни всю конфигурацию в одном файле `appLayoutConfig.ts`
-
-### 2. Используй хуки
-Вместо прямого доступа к контексту, используй специализированные хуки
-
-### 3. Не гоняй пропсы
-Если данные доступны в контексте - берите их там, не передавайте пропсами
-
-### 4. Кастомные layout'ы
-Если нужен кастомный layout для страницы - используй `getLayout`:
-
-```typescript
-// pages/special.tsx
-import { CustomLayout } from '@/layouts';
-
-function SpecialPage() {
-  return <div>Special content</div>;
-}
-
-SpecialPage.getLayout = (page) => {
-  return <CustomLayout>{page}</CustomLayout>;
-};
-
-export default SpecialPage;
-```
-
-## 🐛 Troubleshooting
-
-### "useAppContext must be used within AppContextProvider"
-
-Убедись что компонент рендерится внутри `<AppLayout>`
-
-### Layout не меняется
-
-Проверь `routes.detectors` в конфиге - они определяют тип layout'а
-
-### Sidebar не работает
-
-Используй `useAppContext()` для доступа к `sidebarCollapsed` и `toggleSidebar`

package/src/layouts/AppLayout/components/ErrorBoundary.tsx

@@ -1,112 +0,0 @@
-/**
- * ErrorBoundary - Automatic Error Handling
- *
- * Built-in React Error Boundary for AppLayout
- * Catches all runtime errors and displays ErrorLayout
- * No manual setup required - works automatically!
- */
-
-'use client';
-
-import React, { Component, ReactNode } from 'react';
-import { ErrorLayout } from '../../ErrorLayout';
-import { Bug } from 'lucide-react';
-import logger from '../../../utils/logger';
-import { Analytics, AnalyticsEvent, AnalyticsCategory } from '../../../snippets/Analytics';
-
-interface ErrorBoundaryProps {
-  children: ReactNode;
-  /** Callback when error occurs */
-  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
-  /** Custom fallback UI */
-  fallback?: (error: Error, reset: () => void) => ReactNode;
-  /** Support email for error pages */
-  supportEmail?: string;
-}
-
-interface ErrorBoundaryState {
-  hasError: boolean;
-  error?: Error;
-  errorInfo?: React.ErrorInfo;
-}
-
-/**
- * ErrorBoundary Component
- *
- * Automatically wraps all AppLayout children
- * Catches React errors and shows ErrorLayout
- */
-export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  declare state: ErrorBoundaryState;
-  declare props: Readonly<ErrorBoundaryProps>;
-
-  constructor(props: ErrorBoundaryProps) {
-    super(props);
-    this.state = { hasError: false };
-  }
-
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
-    return { hasError: true, error };
-  }
-
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    // Log error
-    logger.error('ErrorBoundary caught error:', error);
-    logger.error('Error info:', errorInfo);
-
-    // Track error in analytics
-    Analytics.event(AnalyticsEvent.ERROR_BOUNDARY, {
-      category: AnalyticsCategory.ERROR,
-      label: error.message,
-      error_name: error.name,
-      component_stack: errorInfo.componentStack?.slice(0, 500), // Limit size
-    });
-
-    // Call optional callback
-    this.props.onError?.(error, errorInfo);
-
-    // Store error info in state using base class method
-    Component.prototype.setState.call(this, { errorInfo });
-  }
-
-  resetError = () => {
-    Component.prototype.setState.call(this, { hasError: false, error: undefined, errorInfo: undefined });
-  };
-
-  render() {
-    if (this.state.hasError && this.state.error) {
-      // Use custom fallback if provided
-      if (this.props.fallback) {
-        return this.props.fallback(this.state.error, this.resetError);
-      }
-
-      // Default error UI using ErrorLayout
-      return (
-        <ErrorLayout
-          title="Application Error"
-          description="Something went wrong while rendering the page. Try refreshing or going back."
-          illustration={<Bug className="w-24 h-24 text-destructive/50" strokeWidth={1.5} />}
-          supportEmail={this.props.supportEmail}
-          actions={
-            <div className="flex gap-4">
-              <button
-                onClick={() => window.location.reload()}
-                className="px-6 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors font-medium"
-              >
-                Refresh Page
-              </button>
-              <button
-                onClick={() => window.history.back()}
-                className="px-6 py-3 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary/90 transition-colors font-medium"
-              >
-                Go Back
-              </button>
-            </div>
-          }
-        />
-      );
-    }
-
-    return this.props.children;
-  }
-}