@djangocfg/layouts 1.4.30 → 2.0.1

package/src/layouts/AppLayout/AppLayout.tsx

@@ -1,358 +1,310 @@
-// @ts-nocheck
 /**
- * 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
- * - Optional Django CFG admin mode with iframe integration
- *
- * Usage in _app.tsx:
+ * AppLayout - Smart Layout Router with All Providers
+ * 
+ * Automatically detects route type and applies the correct layout
+ * Includes all necessary providers: Theme, Auth, Analytics, Centrifugo, Error Tracking
+ * Simple props-based configuration - no complex configs needed!
+ * 
+ * @example
  * ```tsx
- * // Standard usage
- * <AppLayout config={appLayoutConfig}>
- *   <Component {...pageProps} />
- * </AppLayout>
- *
- * // Django CFG admin mode (with iframe integration)
- * <AppLayout config={appLayoutConfig} isCfgAdmin={true}>
- *   <Component {...pageProps} />
+ * import { AppLayout } from '@djangocfg/layouts';
+ * 
+ * <AppLayout
+ *   publicLayout={{
+ *     logo: '/logo.svg',
+ *     siteName: 'My App',
+ *     navigation: [{ label: 'Home', href: '/' }]
+ *   }}
+ *   privateLayout={{
+ *     enabledPath: ['/dashboard', '/profile'],
+ *     sidebar: { items: [{ label: 'Dashboard', href: '/dashboard' }] }
+ *   }}
+ *   authLayout={{
+ *     enabledPath: '/auth',
+ *     logo: '/logo.svg',
+ *     siteName: 'My App'
+ *   }}
+ *   adminLayout={{
+ *     enabledPath: '/admin',
+ *     sidebar: { items: [{ label: 'Admin', href: '/admin' }] }
+ *   }}
+ * >
+ *   {children}
  * </AppLayout>
  * ```
  */
 
 'use client';
 
-import React, { ReactNode, useEffect, useState } from 'react';
-import { useRouter } from 'next/router';
-import dynamic from 'next/dynamic';
-import { AppContextProvider } from './context';
-import { CoreProviders } from './providers';
-import { Seo, PageProgress, ErrorBoundary, UpdateNotifier } from './components';
+import React, { ReactNode, useMemo } from 'react';
+import { usePathname } from 'next/navigation';
+import { ThemeProvider, Toaster } from '@djangocfg/ui';
+import { CentrifugoProvider } from '@djangocfg/centrifugo';
+import { ErrorBoundary } from '../../components/ErrorBoundary';
+import { AuthProvider, type AuthConfig } from '../../auth/context';
+import { ErrorTrackingProvider, type ValidationErrorConfig, type CORSErrorConfig, type NetworkErrorConfig } from '../../components/ErrorsTracker';
 import { AnalyticsProvider } from '../../snippets/Analytics';
-import { PublicLayout } from './layouts/PublicLayout';
-import { PrivateLayout } from './layouts/PrivateLayout';
-import { AuthLayout } from './layouts/AuthLayout';
-import { PagePreloader } from './layouts/AdminLayout/components';
-import { determineLayoutMode, getRedirectUrl } from './utils';
-import { useAuth } from '../../auth';
-import type { AppLayoutConfig, PageWithLayout, LayoutMode } from './types';
-import type { ValidationErrorConfig, CORSErrorConfig, NetworkErrorConfig } from '../../validation';
-import { determinePageConfig } from '../../types/pageConfig';
-import packageJson from '../../../package.json';
-
-// Dynamic import for AdminLayout to prevent SSR hydration issues
-const AdminLayout = dynamic(
-  () => import('./layouts/AdminLayout').then((mod) => ({ default: mod.AdminLayout })),
-  { ssr: false }
-);
+import { PageProgress } from '../../components/PageProgress';
+import { UpdateNotifier } from '../../components/UpdateNotifier';
+import { Suspense } from '../../components';
 
-export interface AppLayoutProps {
-  children: ReactNode;
-  config: AppLayoutConfig;
-  /**
-   * Next.js page component (for reading pageConfig and layout preferences)
-   * Pass Component from _app.tsx to enable smart layout detection
-   * @example component={Component}
-   */
-  component?: PageWithLayout | any;
-  /**
-   * Next.js page props (for reading dynamic pageConfig from SSR)
-   * @example pageProps={pageProps}
-   */
-  pageProps?: Record<string, any>;
-  /**
-   * Font family to apply globally
-   * Accepts Next.js font object or CSS font-family string
-   * @example fontFamily={manrope.style.fontFamily}
-   * @example fontFamily="Inter, sans-serif"
-   */
-  fontFamily?: string;
-  /**
-   * Show update notifier (checks npm for new versions)
-   * @default true
-   * @example showUpdateNotifier={false}
-   */
-  showUpdateNotifier?: boolean;
-  /**
-   * Validation error tracking configuration
-   * @default { enabled: true, showToast: true, maxErrors: 50 }
-   */
-  validation?: Partial<ValidationErrorConfig>;
-  /**
-   * CORS error tracking configuration
-   * @default { enabled: true, showToast: true }
-   */
-  cors?: Partial<CORSErrorConfig>;
-  /**
-   * Network error tracking configuration
-   * @default { enabled: false }
-   */
-  network?: Partial<NetworkErrorConfig>;
-}
+export type LayoutMode = 'public' | 'private' | 'admin';
 
 /**
- * Layout Router Component
- *
- * Smart layout detection with priority:
- * 1. component.getLayout (custom layout function)
- * 2. component.layoutMode ('none' | 'public' | 'private' | 'auth' | 'admin')
- * 3. Automatic route-based detection
+ * Check if pathname matches enabledPath
  */
-function LayoutRouter({
-  children,
-  component,
-  config
-}: {
-  children: ReactNode;
-  component?: PageWithLayout | any;
-  config: AppLayoutConfig;
-}) {
-  const router = useRouter();
-  const { isAuthenticated, isLoading } = useAuth();
-  const [isMounted, setIsMounted] = useState(false);
-
-  // SSR/Hydration protection
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  // Priority 1: Check if page has custom getLayout function
-  const hasCustomLayout = component && typeof component.getLayout === 'function';
-  if (hasCustomLayout) {
-    // Use custom layout - render children directly (getLayout applied in _app.tsx)
-    return <>{children}</>;
-  }
-
-  // Priority 2: Check component.layoutMode
-  const componentLayoutMode = component?.layoutMode;
-
-  // If layoutMode is 'none', render children directly
-  if (componentLayoutMode === 'none') {
-    return <>{children}</>;
-  }
-
-  // Check route type (synchronous - works with SSR)
-  const isAuthRoute = config.routes.detectors.isAuthRoute(router.pathname);
-  const isPrivateRoute = config.routes.detectors.isPrivateRoute(router.pathname);
-  const isAdminRoute = config.routes.detectors.isAdminRoute(router.pathname);
-
-  // Admin routes: Always show loading during SSR and initial client render
-  // This prevents hydration mismatch when isAuthenticated differs between server/client
-  if ((isAdminRoute && !componentLayoutMode) || componentLayoutMode === 'admin') {
-    // In embedded mode (iframe), render AdminLayout immediately to receive postMessage
-    const isEmbedded = typeof window !== 'undefined' && window !== window.parent;
-
-    if (isEmbedded) {
-      // Skip loading checks - AdminLayout will handle auth via postMessage
-      return (
-        <AdminLayout enableParentSync={true}>
-          {children}
-        </AdminLayout>
-      );
-    }
-
-    // Standalone mode: show loading during initialization
-    if (!isMounted || isLoading) {
-      return <PagePreloader text="Loading admin..." />;
-    }
-
-    // After mount: check authentication
-    if (!isAuthenticated) {
-      // Redirect to auth
-      return (
-        <AuthLayout
-          termsUrl={config.auth?.termsUrl}
-          privacyUrl={config.auth?.privacyUrl}
-          supportUrl={config.auth?.supportUrl}
-          enablePhoneAuth={config.auth?.enablePhoneAuth}
-        />
-      );
-    }
-
-    // Admin routes use AdminLayout with ParentSync
-    return (
-      <AdminLayout enableParentSync={true}>
-        {children}
-      </AdminLayout>
-    );
+function matchesPath(pathname: string, enabledPath?: string | string[]): boolean {
+  if (!enabledPath) return false;
+  
+  if (typeof enabledPath === 'string') {
+    return pathname === enabledPath || pathname.startsWith(enabledPath + '/');
   }
+  
+  // Array of paths
+  return enabledPath.some(path => pathname === path || pathname.startsWith(path + '/'));
+}
 
-  // Private routes: Always show loading during SSR and initial client render
-  // This prevents hydration mismatch when isAuthenticated differs between server/client
-  if ((isPrivateRoute && !componentLayoutMode) || componentLayoutMode === 'private') {
-    if (!isMounted || isLoading) {
-      return <PagePreloader />;
-    }
-
-    // After mount: check authentication
-    if (!isAuthenticated) {
-      // Redirect to auth (handled in PrivateLayout)
-      return (
-        <AuthLayout
-          termsUrl={config.auth?.termsUrl}
-          privacyUrl={config.auth?.privacyUrl}
-          supportUrl={config.auth?.supportUrl}
-          enablePhoneAuth={config.auth?.enablePhoneAuth}
-        />
-      );
-    }
-
-    return <PrivateLayout>{children}</PrivateLayout>;
-  }
+/**
+ * Determine layout mode from pathname and enabledPath props
+ */
+function determineLayoutMode(
+  pathname: string,
+  adminLayout?: { component: any; enabledPath?: string | string[] },
+  privateLayout?: { component: any; enabledPath?: string | string[] },
+  publicLayout?: { component: any; enabledPath?: string | string[] }
+): LayoutMode {
+  // Check in order: admin -> private -> public
+  if (adminLayout && matchesPath(pathname, adminLayout.enabledPath)) return 'admin';
+  if (privateLayout && matchesPath(pathname, privateLayout.enabledPath)) return 'private';
+  if (publicLayout && matchesPath(pathname, publicLayout.enabledPath)) return 'public';
+  
+  // Default: if no enabledPath specified, use public as fallback
+  return 'public';
+}
 
-  // Determine layout mode for non-private/admin routes
-  const getLayoutMode = (): 'public' | 'auth' | 'admin' => {
-    // Priority: componentLayoutMode > auto-detect
-    if (componentLayoutMode === 'auth') return 'auth';
-    if (componentLayoutMode === 'public') return 'public';
-    if (componentLayoutMode === 'admin') return 'admin';
-    if (isAuthRoute) return 'auth';
-    return 'public';
+export interface AppLayoutProps {
+  children: ReactNode;
+  
+  /** Public layout component with enabled paths */
+  publicLayout?: {
+    component: React.ComponentType<{ children: ReactNode }>;
+    enabledPath?: string | string[];
+  };
+  
+  /** Private layout component with enabled paths */
+  privateLayout?: {
+    component: React.ComponentType<{ children: ReactNode }>;
+    enabledPath?: string | string[];
+  };
+  
+  /** Admin layout component with enabled paths */
+  adminLayout?: {
+    component: React.ComponentType<{ children: ReactNode }>;
+    enabledPath?: string | string[];
+  };
+  
+  /** Theme configuration */
+  theme?: {
+    defaultTheme?: 'light' | 'dark' | 'system';
+    storageKey?: string;
+  };
+  
+  /** Auth configuration */
+  auth?: AuthConfig;
+  
+  /** Analytics configuration */
+  analytics?: {
+    googleTrackingId?: string;
+  };
+  
+  /** Centrifugo configuration */
+  centrifugo?: {
+    enabled?: boolean;
+    autoConnect?: boolean;
+    url?: string;
+  };
+  
+  /** Error tracking configuration */
+  errorTracking?: {
+    validation?: Partial<ValidationErrorConfig>;
+    cors?: Partial<CORSErrorConfig>;
+    network?: Partial<NetworkErrorConfig>;
+    onError?: (error: any) => boolean | void;
+  };
+  
+  /** Error boundary configuration */
+  errorBoundary?: {
+    enabled?: boolean;
+    supportEmail?: string;
+    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+  };
+  
+  /** Update notifier configuration */
+  updateNotifier?: {
+    enabled?: boolean;
   };
-
-  const layoutMode = getLayoutMode();
-
-  // Render appropriate layout
-  switch (layoutMode) {
-    case 'admin':
-      return (
-        <AdminLayout enableParentSync={true}>
-          {children}
-        </AdminLayout>
-      );
-    // Public routes: render immediately (SSR enabled)
-    case 'public':
-      return <PublicLayout>{children}</PublicLayout>;
-
-    // Auth routes: render inside AuthLayout
-    case 'auth':
-      return (
-        <AuthLayout
-          termsUrl={config.auth?.termsUrl}
-          privacyUrl={config.auth?.privacyUrl}
-          supportUrl={config.auth?.supportUrl}
-          enablePhoneAuth={config.auth?.enablePhoneAuth}
-        >
-          {children}
-        </AuthLayout>
-      );
-
-    default:
-      return <PublicLayout>{children}</PublicLayout>;
-  }
 }
 
 /**
- * AppLayout - Main Component
- *
- * Single entry point for all layout logic with smart layout detection
- * Wrap your app once in _app.tsx
- *
- * @example
- * ```tsx
- * // Smart auto-detection (recommended)
- * <AppLayout config={appLayoutConfig} component={Component} pageProps={pageProps}>
- *   {Component.getLayout ? Component.getLayout(<Component {...pageProps} />) : <Component {...pageProps} />}
- * </AppLayout>
- *
- * // With custom font
- * <AppLayout config={appLayoutConfig} component={Component} fontFamily={inter.style.fontFamily}>
- *   <Component {...pageProps} />
- * </AppLayout>
- *
- * // Page with custom layout (in page file)
- * const Page: PageWithLayout = () => <div>Content</div>;
- * Page.getLayout = (page) => <CustomLayout>{page}</CustomLayout>;
- *
- * // Page with forced layout mode (in page file)
- * const DashboardPage: PageWithLayout = () => <div>Dashboard</div>;
- * DashboardPage.layoutMode = 'private';
- *
- * // Page without layout (in page file)
- * const LandingPage: PageWithLayout = () => <FullPageDesign />;
- * LandingPage.layoutMode = 'none';
- * ```
+ * AppLayout Content - Renders layout with all providers
  */
-export function AppLayout({ children, config, component, pageProps, fontFamily, showUpdateNotifier, validation, cors, network }: AppLayoutProps) {
-  const router = useRouter();
-
-  // Check if ErrorBoundary is enabled (default: true)
-  const enableErrorBoundary = config.errors?.enableErrorBoundary !== false;
-  const supportEmail = config.errors?.supportEmail;
-  const onError = config.errors?.onError;
-
-  // Determine final pageConfig (merges static + dynamic from SSR)
-  const finalPageConfig = component && pageProps
-    ? determinePageConfig(
-        component,
-        pageProps,
-        config.app.name,
-        config.app.description
-      )
-    : {
-        title: config.app.name,
-        description: config.app.description,
-        ogImage: {
-          title: config.app.name,
-          subtitle: config.app.description,
-        },
-      };
-
-  const appContent = (
-    <AppContextProvider config={config} showUpdateNotifier={showUpdateNotifier}>
-      <AnalyticsProvider>
-        {/* SEO Meta Tags */}
-        <Seo
-          pageConfig={finalPageConfig}
-          icons={config.app.icons}
-          siteUrl={config.app.siteUrl}
-        />
-
-        {/* Update Notifier */}
-        <UpdateNotifier enabled={showUpdateNotifier} currentVersion={packageJson.version} />
-
-        {/* Loading Progress Bar */}
-        <PageProgress />
-
-        {/* Smart Layout Router */}
-        <LayoutRouter component={component} config={config}>
-          {children}
-        </LayoutRouter>
-      </AnalyticsProvider>
-    </AppContextProvider>
+function AppLayoutContent({
+  children,
+  publicLayout,
+  privateLayout,
+  adminLayout,
+  theme,
+  auth,
+  analytics,
+  centrifugo,
+  errorTracking,
+  errorBoundary,
+  updateNotifier,
+}: AppLayoutProps) {
+  const pathname = usePathname();
+  
+  const layoutMode = useMemo(
+    () => determineLayoutMode(
+      pathname,
+      adminLayout,
+      privateLayout,
+      publicLayout
+    ),
+    [pathname, adminLayout, privateLayout, publicLayout]
   );
-
-  const content = (
+  
+  const enableErrorBoundary = errorBoundary?.enabled !== false;
+  
+  // Render appropriate layout based on mode
+  const renderLayout = () => {
+    switch (layoutMode) {
+      case 'admin':
+        if (!adminLayout && privateLayout) {
+          // Fallback to private layout if no admin layout provided
+          return (
+            <Suspense>
+              <privateLayout.component>{children}</privateLayout.component>
+            </Suspense>
+          );
+        }
+        if (!adminLayout) {
+          return children;
+        }
+        return (
+          <Suspense>
+            <adminLayout.component>{children}</adminLayout.component>
+          </Suspense>
+        );
+        
+      case 'private':
+        if (!privateLayout) {
+          // Fallback to public if no private layout provided
+          if (publicLayout) {
+            return <publicLayout.component>{children}</publicLayout.component>;
+          }
+          return children;
+        }
+        return (
+          <Suspense>
+            <privateLayout.component>{children}</privateLayout.component>
+          </Suspense>
+        );
+        
+      case 'public':
+      default:
+        if (!publicLayout) {
+          return children;
+        }
+        return <publicLayout.component>{children}</publicLayout.component>;
+    }
+  };
+  
+  const layoutContent = renderLayout();
+  
+  // Wrap with providers (order matters!)
+  let content: ReactNode = layoutContent;
+  
+  // Analytics Provider (if enabled)
+  if (analytics?.googleTrackingId) {
+    content = <AnalyticsProvider trackingId={analytics.googleTrackingId}>{content}</AnalyticsProvider>;
+  }
+  
+  // Centrifugo Provider (if enabled)
+  if (centrifugo?.enabled !== false) {
+    // Auto-detect URL from env if not provided
+    // NEXT_PUBLIC_* variables are automatically available in client components
+    const centrifugoUrl = centrifugo?.url || process.env.NEXT_PUBLIC_CENTRIFUGO_URL;
+    
+    content = (
+      <CentrifugoProvider
+        enabled={centrifugo?.enabled}
+        autoConnect={centrifugo?.autoConnect}
+        url={centrifugoUrl}
+      >
+        {content}
+      </CentrifugoProvider>
+    );
+  }
+  
+  // Global toast notifications (always rendered)
+  content = (
     <>
-      {/* Global Font Styles */}
-      {fontFamily && (
-        <style dangerouslySetInnerHTML={{
-          __html: `html { font-family: ${fontFamily}; }`
-        }} />
-      )}
-
-      <CoreProviders config={config} validation={validation} cors={cors} network={network}>
-        {appContent}
-      </CoreProviders>
+      {content}
+      <PageProgress />
+      <UpdateNotifier 
+        enabled={updateNotifier?.enabled !== false} 
+      />
+      <Toaster />
     </>
   );
-
+  
   // Wrap with ErrorBoundary if enabled
   if (enableErrorBoundary) {
     return (
-      <React.Fragment key={router.pathname}>
-        <ErrorBoundary
-          supportEmail={supportEmail}
-          onError={onError}
-        >
-          {content}
-        </ErrorBoundary>
-      </React.Fragment>
+      <ErrorBoundary
+        supportEmail={errorBoundary?.supportEmail}
+        onError={errorBoundary?.onError}
+      >
+        {content}
+      </ErrorBoundary>
     );
   }
-
+  
   return content;
 }
+
+/**
+ * AppLayout - Main Component with All Providers
+ */
+export function AppLayout(props: AppLayoutProps) {
+  const { theme, auth, errorTracking } = props;
+  
+  // Convert 'system' to actual theme based on system preference
+  const getResolvedTheme = (): 'light' | 'dark' => {
+    if (theme?.defaultTheme === 'system') {
+      if (typeof window !== 'undefined') {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+      }
+      return 'light'; // Default fallback for SSR
+    }
+    return theme?.defaultTheme || 'light';
+  };
+  
+  return (
+    <ThemeProvider
+      defaultTheme={getResolvedTheme()}
+      storageKey={theme?.storageKey}
+    >
+      <AuthProvider config={auth}>
+        <ErrorTrackingProvider
+          validation={errorTracking?.validation}
+          cors={errorTracking?.cors}
+          network={errorTracking?.network}
+          onError={errorTracking?.onError}
+        >
+          <AppLayoutContent {...props} />
+        </ErrorTrackingProvider>
+      </AuthProvider>
+    </ThemeProvider>
+  );
+}

package/src/layouts/AppLayout/index.ts

@@ -1,44 +1,7 @@
 /**
- * AppLayout - Unified Application Layout System
- *
- * Smart layout system with automatic detection
+ * AppLayout exports
  */
 
-// Main component
 export { AppLayout } from './AppLayout';
+export type { AppLayoutProps, LayoutMode } from './AppLayout';
 
-// Types
-export type {
-  AppLayoutConfig,
-  PublicLayoutConfig,
-  PrivateLayoutConfig,
-  RouteConfig,
-  RouteDetectors,
-  LayoutMode,
-  NavigationItem,
-  NavigationSection,
-  DashboardMenuItem,
-  DashboardMenuGroup,
-  PageWithLayout,
-} from './types';
-
-// Context and hooks
-export { useAppContext, AppContextProvider } from './context';
-export { useLayoutMode, useNavigation } from './hooks';
-
-// Layouts (for custom usage if needed)
-export { PublicLayout } from './layouts/PublicLayout';
-export { PrivateLayout } from './layouts/PrivateLayout';
-export { AuthLayout } from './layouts/AuthLayout';
-
-// AdminLayout - Django CFG iframe integration
-export { AdminLayout } from './layouts/AdminLayout';
-export { useCfgApp, useApp } from './layouts/AdminLayout';
-export { ParentSync, AuthStatusSync } from './layouts/AdminLayout';
-export type {
-  AdminLayoutConfig,
-  UseCfgAppReturn,
-  UseCfgAppOptions,
-  UseAppReturn,
-  UseAppOptions
-} from './layouts/AdminLayout';