@djangocfg/layouts 1.0.1

package/src/auth/hooks/useSessionStorage.ts

@@ -0,0 +1,186 @@
+import { useState } from 'react';
+
+/**
+ * Simple sessionStorage hook with better error handling
+ * @param key - Storage key
+ * @param initialValue - Default value if key doesn't exist
+ * @returns [value, setValue, removeValue] - Current value, setter function, and remove function
+ */
+export function useSessionStorage<T>(key: string, initialValue: T) {
+  // Get initial value from sessionStorage or use provided initialValue
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    if (typeof window === 'undefined') {
+      return initialValue;
+    }
+
+    try {
+      const item = window.sessionStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.error(`Error reading sessionStorage key "${key}":`, error);
+      return initialValue;
+    }
+  });
+
+  // Check data size and limit
+  const checkDataSize = (data: any): boolean => {
+    try {
+      const jsonString = JSON.stringify(data);
+      const sizeInBytes = new Blob([jsonString]).size;
+      const sizeInKB = sizeInBytes / 1024;
+      
+      // Limit to 1MB per item
+      if (sizeInKB > 1024) {
+        console.warn(`Data size (${sizeInKB.toFixed(2)}KB) exceeds 1MB limit for key "${key}"`);
+        return false;
+      }
+      
+      return true;
+    } catch (error) {
+      console.error(`Error checking data size for key "${key}":`, error);
+      return false;
+    }
+  };
+
+  // Clear old data when sessionStorage is full
+  const clearOldData = () => {
+    try {
+      const keys = Object.keys(sessionStorage).filter(key => key && typeof key === 'string');
+      // Remove oldest items if we have more than 50 items
+      if (keys.length > 50) {
+        const itemsToRemove = Math.ceil(keys.length * 0.2);
+        for (let i = 0; i < itemsToRemove; i++) {
+          try {
+            const key = keys[i];
+            if (key) {
+              sessionStorage.removeItem(key);
+              sessionStorage.removeItem(`${key}_timestamp`);
+            }
+          } catch {
+            // Ignore errors when removing items
+          }
+        }
+      }
+    } catch (error) {
+      console.error('Error clearing old sessionStorage data:', error);
+    }
+  };
+
+  // Force clear all data if quota is exceeded
+  const forceClearAll = () => {
+    try {
+      const keys = Object.keys(sessionStorage);
+      for (const key of keys) {
+        try {
+          sessionStorage.removeItem(key);
+        } catch {
+          // Ignore errors when removing items
+        }
+      }
+    } catch (error) {
+      console.error('Error force clearing sessionStorage:', error);
+    }
+  };
+
+  // Update sessionStorage when value changes
+  const setValue = (value: T | ((val: T) => T)) => {
+    try {
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      
+      // Check data size before attempting to save
+      if (!checkDataSize(valueToStore)) {
+        console.warn(`Data size too large for key "${key}", removing key`);
+        // Remove the key if data is too large
+        try {
+          window.sessionStorage.removeItem(key);
+          window.sessionStorage.removeItem(`${key}_timestamp`);
+        } catch {
+          // Ignore errors when removing
+        }
+        // Still update the state
+        setStoredValue(valueToStore);
+        return;
+      }
+      
+      setStoredValue(valueToStore);
+
+      if (typeof window !== 'undefined') {
+        // Try to set the value
+        try {
+          window.sessionStorage.setItem(key, JSON.stringify(valueToStore));
+          // Add timestamp for cleanup
+          window.sessionStorage.setItem(`${key}_timestamp`, Date.now().toString());
+        } catch (storageError: any) {
+          // If quota exceeded, clear old data and try again
+          if (storageError.name === 'QuotaExceededError' || 
+              storageError.code === 22 || 
+              storageError.message?.includes('quota')) {
+            console.warn('sessionStorage quota exceeded, clearing old data...');
+            clearOldData();
+            
+            // Try again after clearing
+            try {
+              window.sessionStorage.setItem(key, JSON.stringify(valueToStore));
+              window.sessionStorage.setItem(`${key}_timestamp`, Date.now().toString());
+            } catch (retryError) {
+              console.error(`Failed to set sessionStorage key "${key}" after clearing old data:`, retryError);
+              // If still fails, force clear all and try one more time
+              try {
+                forceClearAll();
+                window.sessionStorage.setItem(key, JSON.stringify(valueToStore));
+                window.sessionStorage.setItem(`${key}_timestamp`, Date.now().toString());
+              } catch (finalError) {
+                console.error(`Failed to set sessionStorage key "${key}" after force clearing:`, finalError);
+                // If still fails, just update the state without sessionStorage
+                setStoredValue(valueToStore);
+              }
+            }
+          } else {
+            throw storageError;
+          }
+        }
+      }
+    } catch (error) {
+      console.error(`Error setting sessionStorage key "${key}":`, error);
+      // Still update the state even if sessionStorage fails
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+    }
+  };
+
+  // Remove value from sessionStorage
+  const removeValue = () => {
+    try {
+      setStoredValue(initialValue);
+      if (typeof window !== 'undefined') {
+        try {
+          window.sessionStorage.removeItem(key);
+          window.sessionStorage.removeItem(`${key}_timestamp`);
+        } catch (removeError: any) {
+          // If removal fails due to quota, try to clear some data first
+          if (removeError.name === 'QuotaExceededError' || 
+              removeError.code === 22 || 
+              removeError.message?.includes('quota')) {
+            console.warn('sessionStorage quota exceeded during removal, clearing old data...');
+            clearOldData();
+            
+            try {
+              window.sessionStorage.removeItem(key);
+              window.sessionStorage.removeItem(`${key}_timestamp`);
+            } catch (retryError) {
+              console.error(`Failed to remove sessionStorage key "${key}" after clearing:`, retryError);
+              // If still fails, force clear all
+              forceClearAll();
+            }
+          } else {
+            throw removeError;
+          }
+        }
+      }
+    } catch (error) {
+      console.error(`Error removing sessionStorage key "${key}":`, error);
+    }
+  };
+
+  return [storedValue, setValue, removeValue] as const;
+}

package/src/auth/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Auth Module
+ *
+ * Authentication system with context, hooks and UI components
+ */
+
+export * from './context';
+export * from './hooks';
+export * from './utils';
+export * from './middlewares';

package/src/auth/middlewares/index.ts

@@ -0,0 +1 @@
+export { middleware, config } from './proxy'; 

package/src/auth/middlewares/proxy.ts

@@ -0,0 +1,24 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export function middleware(request: NextRequest) {
+  const { pathname, search } = request.nextUrl;
+  const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+
+  // Proxy /media/* - Images and static files
+  if (pathname.startsWith('/media/')) {
+    const targetUrl = `${apiUrl}${pathname}${search}`;
+    return NextResponse.rewrite(targetUrl, { request: { headers: request.headers } });
+  }
+
+  // Proxy /api/* - API endpoints
+  if (pathname.startsWith('/api/')) {
+    const targetUrl = `${apiUrl}${pathname}${search}`;
+    return NextResponse.rewrite(targetUrl, { request: { headers: request.headers } });
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ['/media/:path*', '/api/:path*'],
+};

package/src/auth/server.ts

@@ -0,0 +1,6 @@
+/**
+ * @djangocfg/auth/server - Server-side exports
+ * Contains middleware and other server-only functionality
+ */
+
+export * from './middlewares'; 

package/src/auth/utils/errors.ts

@@ -0,0 +1,34 @@
+/**
+ * Format authentication error messages
+ */
+export const formatAuthError = (error: any): string => {
+  if (typeof error === 'string') {
+    return error;
+  }
+  
+  if (error?.message) {
+    return error.message;
+  }
+  
+  if (error?.response?.data?.message) {
+    return error.response.data.message;
+  }
+  
+  if (error?.response?.data?.detail) {
+    return error.response.data.detail;
+  }
+  
+  return 'An unexpected error occurred';
+};
+
+/**
+ * Common error messages
+ */
+export const AUTH_ERRORS = {
+  INVALID_EMAIL: 'Please enter a valid email address',
+  INVALID_OTP: 'Please enter a valid 6-digit verification code',
+  NETWORK_ERROR: 'Network error. Please check your connection',
+  SERVER_ERROR: 'Server error. Please try again later',
+  UNAUTHORIZED: 'Unauthorized. Please sign in again',
+  TOKEN_EXPIRED: 'Session expired. Please sign in again',
+} as const; 

package/src/auth/utils/index.ts

@@ -0,0 +1,2 @@
+export { validateEmail } from './validation';
+export { formatAuthError } from './errors'; 

package/src/auth/utils/validation.ts

@@ -0,0 +1,14 @@
+/**
+ * Email validation utility
+ */
+export const validateEmail = (email: string): boolean => {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(email);
+};
+
+/**
+ * OTP validation utility
+ */
+export const validateOTP = (otp: string): boolean => {
+  return /^\d{6}$/.test(otp);
+}; 

package/src/index.ts

@@ -0,0 +1,15 @@
+/**
+ * @djangocfg/layouts
+ * 
+ * Reusable layout components and authentication system
+ */
+
+// Auth system
+export * from './auth';
+
+// Layout components
+export * from './layouts';
+
+// Snippets - Reusable UI components
+export * from './snippets';
+

package/src/layouts/AppLayout/AppLayout.tsx

@@ -0,0 +1,123 @@
+/**
+ * AppLayout - Unified Application Layout System
+ *
+ * Single component that handles all layout logic:
+ * - Auto-detects route type (public/private/auth)
+ * - Applies correct layout automatically
+ * - Manages all state through context
+ * - Zero prop drilling
+ *
+ * Usage in _app.tsx:
+ * ```tsx
+ * <AppLayout config={appLayoutConfig}>
+ *   <Component {...pageProps} />
+ * </AppLayout>
+ * ```
+ */
+
+'use client';
+
+import React, { ReactNode, useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
+import { AppContextProvider } from './context';
+import { CoreProviders } from './providers';
+import { Seo, PageProgress } from './components';
+import { PublicLayout } from './layouts/PublicLayout';
+import { PrivateLayout } from './layouts/PrivateLayout';
+import { AuthLayout } from './layouts/AuthLayout';
+import { determineLayoutMode, getRedirectUrl } from './utils';
+import { useAuth } from '../../auth';
+import type { AppLayoutConfig } from './types';
+
+export interface AppLayoutProps {
+  children: ReactNode;
+  config: AppLayoutConfig;
+}
+
+/**
+ * Layout Router Component
+ *
+ * Determines which layout to use based on route
+ * Uses AppContext - no props passed down!
+ */
+function LayoutRouter({ children }: { children: ReactNode }) {
+  const router = useRouter();
+  const { isAuthenticated, isLoading } = useAuth();
+  const [isMounted, setIsMounted] = useState(false);
+
+  // SSR/Hydration protection
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  // Get layout mode from context
+  const [layoutMode, setLayoutMode] = useState<'public' | 'private' | 'auth'>('public');
+
+  useEffect(() => {
+    // This will be properly determined by AppContext
+    // For now, simple detection
+    if (router.pathname.startsWith('/auth')) {
+      setLayoutMode('auth');
+    } else if (router.pathname.startsWith('/private')) {
+      setLayoutMode('private');
+    } else {
+      setLayoutMode('public');
+    }
+  }, [router.pathname]);
+
+  // Show loading during SSR or auth check
+  if (!isMounted || isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-muted-foreground">Loading...</div>
+      </div>
+    );
+  }
+
+  // Render appropriate layout
+  switch (layoutMode) {
+    case 'auth':
+      return <AuthLayout>{children}</AuthLayout>;
+
+    case 'private':
+      return <PrivateLayout>{children}</PrivateLayout>;
+
+    case 'public':
+    default:
+      return <PublicLayout>{children}</PublicLayout>;
+  }
+}
+
+/**
+ * AppLayout - Main Component
+ *
+ * Single entry point for all layout logic
+ * Wrap your app once in _app.tsx
+ */
+export function AppLayout({ children, config }: AppLayoutProps) {
+  return (
+    <CoreProviders config={config}>
+      <AppContextProvider config={config}>
+        {/* SEO Meta Tags */}
+        <Seo
+          pageConfig={{
+            title: config.app.name,
+            description: config.app.description,
+            ogImage: {
+              title: config.app.name,
+              subtitle: config.app.description,
+            },
+          }}
+          icons={config.app.icons}
+          siteUrl={config.app.siteUrl}
+        />
+
+        {/* Loading Progress Bar */}
+        <PageProgress />
+
+        {/* Smart Layout Router */}
+        <LayoutRouter>{children}</LayoutRouter>
+      </AppContextProvider>
+    </CoreProviders>
+  );
+}

package/src/layouts/AppLayout/README.md

@@ -0,0 +1,204 @@
+# AppLayout - Unified Application Layout System
+
+Умный самодостаточный компонент для управления всеми layout'ами приложения.
+
+## 📁 Структура
+
+```
+AppLayout/
+├── types/                  # Все типы
+│   ├── config.ts          # AppLayoutConfig
+│   ├── layout.ts          # PublicLayoutConfig, PrivateLayoutConfig
+│   ├── navigation.ts      # NavigationItem, DashboardMenuItem
+│   ├── routes.ts          # RouteConfig, RouteDetectors
+│   └── index.ts
+│
+├── context/                # Unified App Context
+│   ├── AppContext.tsx     # Главный контекст приложения
+│   └── index.ts
+│
+├── hooks/                  # Custom hooks
+│   ├── useLayoutMode.ts   # Определение текущего режима
+│   ├── useNavigation.ts   # Навигационные хуки
+│   └── index.ts
+│
+├── providers/              # Provider components
+│   ├── ThemeProvider.tsx  # Тема
+│   ├── AuthProvider.tsx   # Аутентификация
+│   └── index.ts
+│
+├── layouts/                # Layout renderers
+│   ├── PublicLayout/      # Публичный layout
+│   ├── PrivateLayout/     # Приватный layout (Dashboard)
+│   ├── AuthLayout/        # Auth layout (минимальный)
+│   └── index.ts
+│
+├── components/             # UI components
+│   ├── Seo.tsx           # SEO meta tags
+│   ├── PageProgress.tsx  # Loading bar
+│   └── index.ts
+│
+├── utils/                  # Utilities
+│   ├── routeDetection.ts # Определение типа маршрута
+│   └── index.ts
+│
+├── AppLayout.tsx          # Главный компонент
+├── index.ts               # Public exports
+└── README.md              # Документация
+```
+
+## 🎯 Основная идея
+
+**Единая точка входа** - один компонент `<AppLayout>` управляет всем:
+- Автоматически определяет тип страницы (public/private/auth)
+- Применяет нужный layout
+- Управляет состоянием через единый контекст
+- Предоставляет хуки для доступа к функционалу
+
+## 🚀 Использование
+
+### В _app.tsx (единственное место подключения)
+
+```tsx
+import { AppLayout } from '@djangocfg/layouts';
+import { appLayoutConfig } from '@/core/appLayoutConfig';
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <AppLayout config={appLayoutConfig}>
+      <Component {...pageProps} />
+    </AppLayout>
+  );
+}
+```
+
+### Конфигурация
+
+```tsx
+// 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: { /* ... */ },
+    userMenu: { /* ... */ },
+    footer: { /* ... */ },
+  },
+  privateLayout: {
+    menuGroups: [ /* ... */ ],
+    showChat: true,
+  },
+};
+```
+
+## 🎨 Использование в компонентах
+
+### Доступ к контексту
+
+```tsx
+import { useAppContext } from '@djangocfg/layouts';
+
+function MyComponent() {
+  const {
+    config,
+    layoutMode,
+    mobileMenuOpen,
+    toggleMobileMenu
+  } = useAppContext();
+
+  return (
+    <button onClick={toggleMobileMenu}>
+      {layoutMode === 'private' ? 'Dashboard' : 'Home'}
+    </button>
+  );
+}
+```
+
+### Использование хуков
+
+```tsx
+import { useLayoutMode, useNavigation } from '@djangocfg/layouts';
+
+function MyComponent() {
+  const mode = useLayoutMode(); // 'public' | 'private' | 'auth'
+  const { isActive } = useNavigation();
+
+  if (mode === 'private') {
+    return <DashboardView />;
+  }
+
+  return <PublicView />;
+}
+```
+
+## 🏗️ Архитектурные принципы
+
+### 1. Single Source of Truth
+Вся конфигурация в одном месте - `AppLayoutConfig`
+
+### 2. Context над Props
+Никакого prop drilling - всё через `useAppContext()`
+
+### 3. Декомпозиция
+Каждая папка отвечает за свою область:
+- `types/` - только типы
+- `context/` - состояние и контекст
+- `hooks/` - переиспользуемая логика
+- `layouts/` - рендеринг layout'ов
+- `components/` - UI компоненты
+
+### 4. Автоматизация
+Layout определяется автоматически на основе маршрута
+
+### 5. Расширяемость
+Легко добавить новый layout или функционал
+
+## 📦 Экспорты
+
+```tsx
+// Главный компонент
+export { AppLayout } from './AppLayout';
+
+// Контекст и хуки
+export { useAppContext } from './context';
+export { useLayoutMode, useNavigation } from './hooks';
+
+// Типы
+export type {
+  AppLayoutConfig,
+  PublicLayoutConfig,
+  PrivateLayoutConfig,
+  RouteConfig,
+  NavigationItem,
+  DashboardMenuItem,
+} from './types';
+```
+
+## 🎯 Преимущества
+
+✅ **Одно место подключения** - только в `_app.tsx`
+✅ **Нет prop drilling** - всё через контекст
+✅ **Автоматический роутинг** - layout определяется сам
+✅ **Типобезопасность** - TypeScript везде
+✅ **Легкая настройка** - один конфиг объект
+✅ **Декомпозиция** - чистая структура папок
+✅ **Переиспользование** - хуки для всего