@djangocfg/layouts 1.4.29 → 2.0.1

package/src/layouts/AppLayout/context/AppContext.tsx

@@ -1,151 +0,0 @@
-/**
- * App Context
- *
- * Unified context for entire application layout system
- * Provides centralized access to configuration, state, and utilities
- */
-
-'use client';
-
-import React, { createContext, useContext, useState, ReactNode, useMemo } from 'react';
-import { useRouter } from 'next/router';
-import type { AppLayoutConfig, LayoutMode, RouteDetectors } from '../types';
-
-// ═══════════════════════════════════════════════════════════════════════════
-// Context Types
-// ═══════════════════════════════════════════════════════════════════════════
-
-interface AppContextValue {
-  // Configuration
-  config: AppLayoutConfig;
-
-  // Route detection
-  routes: RouteDetectors;
-  currentPath: string;
-  layoutMode: LayoutMode;
-
-  // Mobile drawer state
-  mobileDrawerOpen: boolean;
-  openMobileDrawer: () => void;
-  closeMobileDrawer: () => void;
-  toggleMobileDrawer: () => void;
-
-  // User menu state (desktop dropdown)
-  userMenuOpen: boolean;
-  openUserMenu: () => void;
-  closeUserMenu: () => void;
-  toggleUserMenu: () => void;
-
-  // Sidebar state (dashboard)
-  sidebarCollapsed: boolean;
-  collapseSidebar: () => void;
-  expandSidebar: () => void;
-  toggleSidebar: () => void;
-
-  // Features
-  showUpdateNotifier?: boolean;
-}
-
-// ═══════════════════════════════════════════════════════════════════════════
-// Context Creation
-// ═══════════════════════════════════════════════════════════════════════════
-
-const AppContext = createContext<AppContextValue | null>(null);
-
-// ═══════════════════════════════════════════════════════════════════════════
-// Provider Component
-// ═══════════════════════════════════════════════════════════════════════════
-
-export interface AppContextProviderProps {
-  children: ReactNode;
-  config: AppLayoutConfig;
-  showUpdateNotifier?: boolean;
-}
-
-/**
- * AppContext Provider
- *
- * Provides unified application context to all child components
- * Manages layout state and exposes configuration
- */
-export function AppContextProvider({ children, config, showUpdateNotifier }: AppContextProviderProps) {
-  const router = useRouter();
-
-  // UI state
-  const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);
-  const [userMenuOpen, setUserMenuOpen] = useState(false);
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-
-  // Determine current layout mode
-  const layoutMode = useMemo((): LayoutMode => {
-    const { isAuthRoute, isPrivateRoute } = config.routes.detectors;
-
-    if (isAuthRoute(router.pathname)) return 'auth';
-    if (isPrivateRoute(router.pathname)) return 'private';
-    return 'public';
-  }, [router.pathname, config.routes.detectors]);
-
-  // Mobile drawer handlers
-  const openMobileDrawer = () => setMobileDrawerOpen(true);
-  const closeMobileDrawer = () => setMobileDrawerOpen(false);
-  const toggleMobileDrawer = () => setMobileDrawerOpen(prev => !prev);
-
-  // User menu handlers
-  const openUserMenu = () => setUserMenuOpen(true);
-  const closeUserMenu = () => setUserMenuOpen(false);
-  const toggleUserMenu = () => setUserMenuOpen(prev => !prev);
-
-  // Sidebar handlers
-  const collapseSidebar = () => setSidebarCollapsed(true);
-  const expandSidebar = () => setSidebarCollapsed(false);
-  const toggleSidebar = () => setSidebarCollapsed(prev => !prev);
-
-  const value: AppContextValue = {
-    config,
-    routes: config.routes.detectors,
-    currentPath: router.pathname,
-    layoutMode,
-    mobileDrawerOpen,
-    openMobileDrawer,
-    closeMobileDrawer,
-    toggleMobileDrawer,
-    userMenuOpen,
-    openUserMenu,
-    closeUserMenu,
-    toggleUserMenu,
-    sidebarCollapsed,
-    collapseSidebar,
-    expandSidebar,
-    toggleSidebar,
-    showUpdateNotifier,
-  };
-
-  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
-}
-
-// ═══════════════════════════════════════════════════════════════════════════
-// Hook
-// ═══════════════════════════════════════════════════════════════════════════
-
-/**
- * Hook to access AppContext
- *
- * @throws {Error} If used outside AppContextProvider
- *
- * @example
- * ```tsx
- * const { config, layoutMode, toggleMobileDrawer } = useAppContext();
- * ```
- */
-export function useAppContext(): AppContextValue {
-  const context = useContext(AppContext);
-
-  if (!context) {
-    throw new Error(
-      'useAppContext must be used within AppContextProvider. ' +
-      'Make sure your component is wrapped with <AppLayout>.'
-    );
-  }
-
-  return context;
-}

package/src/layouts/AppLayout/context/index.ts

@@ -1,5 +0,0 @@
-/**
- * Context Module
- */
-
-export * from './AppContext';

package/src/layouts/AppLayout/hooks/index.ts

@@ -1,8 +0,0 @@
-'use client';
-
-/**
- * Hooks Module
- */
-
-export * from './useLayoutMode';
-export * from './useNavigation';

package/src/layouts/AppLayout/hooks/useLayoutMode.ts

@@ -1,26 +0,0 @@
-/**
- * useLayoutMode Hook
- *
- * Returns current layout mode
- */
-
-import { useAppContext } from '../context';
-import type { LayoutMode } from '../types';
-
-/**
- * Get current layout mode
- *
- * @returns Current layout mode ('public' | 'private' | 'auth')
- *
- * @example
- * ```tsx
- * const mode = useLayoutMode();
- * if (mode === 'private') {
- *   return <DashboardContent />;
- * }
- * ```
- */
-export function useLayoutMode(): LayoutMode {
-  const { layoutMode } = useAppContext();
-  return layoutMode;
-}

package/src/layouts/AppLayout/hooks/useNavigation.ts

@@ -1,51 +0,0 @@
-/**
- * useNavigation Hook
- *
- * Navigation utilities
- */
-
-'use client';
-
-import { useRouter } from 'next/navigation';
-import { useAppContext } from '../context';
-
-export interface UseNavigationReturn {
-  /** Current pathname */
-  currentPath: string;
-
-  /** Check if path is active */
-  isActive: (path: string) => boolean;
-
-  /** Get page title for current route */
-  getPageTitle: () => string;
-}
-
-/**
- * Navigation utilities hook
- *
- * @example
- * ```tsx
- * const { isActive, getPageTitle } = useNavigation();
- * const title = getPageTitle();
- * ```
- */
-export function useNavigation(): UseNavigationReturn {
-  const router = useRouter();
-  const { routes, currentPath } = useAppContext();
-
-  const isActive = (path: string): boolean => {
-    if (currentPath === path) return true;
-    if (path !== '/' && currentPath.startsWith(path)) return true;
-    return false;
-  };
-
-  const getPageTitle = (): string => {
-    return routes.getPageTitle(currentPath);
-  };
-
-  return {
-    currentPath,
-    isActive,
-    getPageTitle,
-  };
-}

package/src/layouts/AppLayout/layouts/AdminLayout/AdminLayout.tsx

@@ -1,224 +0,0 @@
-// @ts-nocheck
-// ============================================================================
-// AdminLayout - Django CFG Layout with iframe Integration
-// ============================================================================
-// Universal layout component that handles:
-// - iframe embedding detection
-// - Parent ↔ iframe communication (postMessage)
-// - Theme synchronization from Django Unfold
-// - Auth token passing from parent window (automatically sets in API client)
-// - Auth status reporting to parent window
-// - Automatic layout disable in iframe mode
-//
-// This is a lightweight wrapper that can be used with any layout system
-// (AppLayout, custom layouts, etc.)
-
-'use client';
-
-import React, { ReactNode } from 'react';
-import { ShieldAlert } from 'lucide-react';
-import { ParentSync, PagePreloader } from './components';
-import { CfgAppProvider, useCfgAppContext } from './context';
-import type { AdminLayoutConfig } from './types';
-import { api } from '@djangocfg/api';
-import { useAuth } from '../../../../auth';
-import { consola } from 'consola';
-
-export interface AdminLayoutProps {
-  children: ReactNode;
-  config?: AdminLayoutConfig;
-  /**
-   * Whether to render ParentSync component
-   * Set to false if you want to handle sync manually
-   * @default true
-   */
-  enableParentSync?: boolean;
-}
-
-/**
- * AdminLayout - Universal Layout Component for Django CFG
- *
- * Provides iframe integration features:
- * - Auto-detects iframe embedding
- * - Syncs theme from parent window (Django Unfold)
- * - Receives auth tokens from parent window and automatically sets them in API client
- * - Sends auth status to parent window
- * - Provides useApp hook data via context
- *
- * Usage:
- * ```tsx
- * // Wrap your app in _app.tsx - no config needed!
- * <AdminLayout>
- *   <AppLayout config={appLayoutConfig}>
- *     <Component {...pageProps} />
- *   </AppLayout>
- * </AdminLayout>
- * ```
- *
- * Or with custom auth handler:
- * ```tsx
- * <AdminLayout config={{
- *   onAuthTokenReceived: (authToken, refreshToken) => {
- *     // Custom logic before/after setting tokens
- *     console.log('Tokens received');
- *   }
- * }}>
- *   <AppLayout config={appLayoutConfig}>
- *     <Component {...pageProps} />
- *   </AppLayout>
- * </AdminLayout>
- * ```
- *
- * Use useCfgApp hook directly:
- * ```tsx
- * import { useCfgApp } from '@djangocfg/layouts/AdminLayout';
- *
- * function MyComponent() {
- *   const { isEmbedded, disableLayout, parentTheme } = useCfgApp();
- *   // ...
- * }
- * ```
- */
-export function AdminLayout({
-  children,
-  config,
-  enableParentSync = true
-}: AdminLayoutProps) {
-  return (
-    <AdminLayoutClientWithProvider config={config} enableParentSync={enableParentSync}>{children}</AdminLayoutClientWithProvider>
-  );
-}
-
-// Wrapper component that provides CfgAppProvider with auth callback
-function AdminLayoutClientWithProvider({
-  children,
-  config,
-  enableParentSync
-}: AdminLayoutProps) {
-  const { loadCurrentProfile } = useAuth();
-
-  // Use refs to prevent re-renders and maintain state across renders
-  const profileLoadedRef = React.useRef(false);
-  const tokensReceivedRef = React.useRef(false);
-  const loadCurrentProfileRef = React.useRef(loadCurrentProfile);
-
-  // Update ref when loadCurrentProfile changes (but don't trigger re-render)
-  React.useEffect(() => {
-    loadCurrentProfileRef.current = loadCurrentProfile;
-  }, [loadCurrentProfile]);
-
-  // Create a STABLE callback that NEVER changes (no dependencies)
-  // Use refs to access latest values without recreating the callback
-  const handleAuthToken = React.useCallback(async (authToken: string, refreshToken?: string) => {
-    consola.info('[AdminLayout] handleAuthToken called', {
-      tokensReceived: tokensReceivedRef.current,
-      profileLoaded: profileLoadedRef.current
-    });
-
-    // Prevent duplicate token processing
-    if (tokensReceivedRef.current) {
-      consola.warn('[AdminLayout] Tokens already received and processed, ignoring duplicate');
-      return;
-    }
-
-    // Mark tokens as received IMMEDIATELY to prevent race conditions
-    tokensReceivedRef.current = true;
-
-    consola.start('[AdminLayout] First time receiving tokens, processing...');
-    consola.debug('[AdminLayout] Tokens:', {
-      authToken: authToken.substring(0, 20) + '...',
-      refreshToken: refreshToken ? refreshToken.substring(0, 20) + '...' : 'null'
-    });
-
-    // Always set tokens in API client
-    api.setToken(authToken, refreshToken);
-    consola.success('[AdminLayout] Tokens set in API client');
-
-    // Load user profile after setting tokens - ONLY ONCE per session
-    if (!profileLoadedRef.current) {
-      consola.start('[AdminLayout] Loading user profile (first time)...');
-      try {
-        await loadCurrentProfileRef.current('AdminLayout.onAuthTokenReceived');
-        profileLoadedRef.current = true;
-        consola.success('[AdminLayout] User profile loaded successfully');
-      } catch (error) {
-        consola.error('[AdminLayout] Failed to load profile:', error);
-        // Reset flags on error so user can retry
-        tokensReceivedRef.current = false;
-        profileLoadedRef.current = false;
-      }
-    } else {
-      consola.info('[AdminLayout] Profile already loaded, skipping duplicate call');
-    }
-
-    // Call custom handler if provided
-    if (config?.onAuthTokenReceived) {
-      consola.info('[AdminLayout] Calling custom onAuthTokenReceived handler');
-      config.onAuthTokenReceived(authToken, refreshToken);
-    }
-  }, []); // ← EMPTY DEPS - callback NEVER changes
-
-  return (
-    <CfgAppProvider options={{
-      onAuthTokenReceived: handleAuthToken
-    }}>
-      <AdminLayoutClient config={config} enableParentSync={enableParentSync}>{children}</AdminLayoutClient>
-    </CfgAppProvider>
-  );
-}
-
-function AdminLayoutClient({
-  children,
-  config,
-  enableParentSync = true
-}: AdminLayoutProps) {
-  const { isAdminUser, user, isLoading, isAuthenticated } = useAuth();
-  // console.log('[AdminLayout] Rendering with user:', user, 'isLoading:', isLoading, 'isAuthenticated:', isAuthenticated);
-
-  // Get embedding state from context (provided by CfgAppProvider wrapper)
-  const { isEmbedded } = useCfgAppContext();
-
-  // console.log('[AdminLayout] isEmbedded:', isEmbedded);
-
-  // Show loading while auth is initializing (waiting for tokens from parent or profile loading)
-  // OR if user object is not loaded yet (null/undefined)
-  // OR if authentication status is not yet determined
-  if (isLoading || !user || !isAuthenticated) {
-    // console.log('[AdminLayout] Showing loading state - isLoading:', isLoading, 'user:', user, 'isAuthenticated:', isAuthenticated);
-    return <PagePreloader text="Authenticating..." size="lg" />;
-  }
-
-  // Only show "Access Denied" when we are CERTAIN user doesn't have permissions
-  // This prevents showing the message during auth/loading states
-  if (!isAdminUser) {
-    // Only show this when user is fully authenticated but lacks permissions
-    // console.log('[AdminLayout] Authenticated user lacks admin permissions');
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-background">
-        <div className="text-center space-y-4 p-8">
-          <div className="flex justify-center">
-            <ShieldAlert className="w-16 h-16 text-destructive" />
-          </div>
-          <h1 className="text-2xl font-bold text-foreground">Access Denied</h1>
-          <p className="text-muted-foreground max-w-md">
-            You don't have permission to access this admin panel.
-            <br />
-            Staff or superuser privileges are required.
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      {/* ParentSync handles theme sync and auth status reporting */}
-      {enableParentSync && <ParentSync />}
-
-      {/* Apply padding only when NOT in iframe */}
-      <div>
-        {children}
-      </div>
-    </>
-  );
-}