@djangocfg/layouts 2.0.9 → 2.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.0.9",
+  "version": "2.0.11",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -92,9 +92,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.4.39",
-    "@djangocfg/centrifugo": "^1.4.39",
-    "@djangocfg/ui": "^1.4.39",
+    "@djangocfg/api": "^1.4.41",
+    "@djangocfg/centrifugo": "^1.4.41",
+    "@djangocfg/ui": "^1.4.41",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -114,7 +114,7 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.4.39",
+    "@djangocfg/typescript-config": "^1.4.41",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/components/core/ClientOnly.tsx

@@ -0,0 +1,73 @@
+/**
+ * ClientOnly Component
+ *
+ * Renders children only on the client side to prevent SSR hydration mismatch.
+ * Shows a fallback (loading state) during SSR and initial client mount.
+ *
+ * @example
+ * ```tsx
+ * import { ClientOnly } from '@djangocfg/layouts/components';
+ *
+ * // With default loading fallback
+ * <ClientOnly>
+ *   <ComponentThatUsesClientOnlyAPIs />
+ * </ClientOnly>
+ *
+ * // With custom fallback
+ * <ClientOnly fallback={<MyCustomLoader />}>
+ *   <ComponentThatUsesClientOnlyAPIs />
+ * </ClientOnly>
+ * ```
+ */
+
+'use client';
+
+import { useState, useEffect, ReactNode } from 'react';
+import { Preloader } from '@djangocfg/ui/components';
+
+export interface ClientOnlyProps {
+  children: ReactNode;
+  /**
+   * Fallback to show during SSR and initial mount
+   * @default Preloader with "Loading..." text
+   */
+  fallback?: ReactNode;
+}
+
+/**
+ * Default fallback - fullscreen preloader
+ */
+const defaultFallback = (
+  <Preloader
+    variant="fullscreen"
+    text="Loading..."
+    size="lg"
+    backdrop={true}
+    backdropOpacity={80}
+  />
+);
+
+/**
+ * ClientOnly - Prevents SSR hydration mismatch
+ *
+ * Use this to wrap components that:
+ * - Access browser-only APIs (window, localStorage, etc.)
+ * - Have different initial state on server vs client
+ * - Use authentication state that differs between SSR and CSR
+ */
+export function ClientOnly({
+  children,
+  fallback = defaultFallback,
+}: ClientOnlyProps) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return <>{fallback}</>;
+  }
+
+  return <>{children}</>;
+}

package/src/components/core/index.ts

@@ -2,6 +2,8 @@
  * Core components exports
  */
 
+export { ClientOnly } from './ClientOnly';
+export type { ClientOnlyProps } from './ClientOnly';
 export { JsonLd } from './JsonLd';
 export { LucideIcon } from './LucideIcon';
 export type { LucideIconProps } from './LucideIcon';

package/src/components/errors/ErrorLayout.tsx

@@ -73,13 +73,12 @@ function getErrorIcon(code?: string | number): React.ReactNode {
           viewBox="0 0 24 24"
           aria-hidden="true"
         >
-          {/* Server Error Icon */}
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={1.5}
-            d="M18.364 18.364A9 9 0 005.636 5.636m12.728 0l-6.849 6.849m0 0l-6.849-6.849m6.849 6.849V21m0 0h7.5M12 21v-7.5M7.5 21H3m7.5 0h7.5M3 18V9a4.5 4.5 0 014.5-4.5h9A4.5 4.5 0 0121 9v9a4.5 4.5 0 01-4.5 4.5h-9A4.5 4.5 0 013 18z"
-          />
+          {/* Server Error Icon - Server with X */}
+          <rect x="2" y="3" width="20" height="7" rx="1" strokeWidth={1.5} />
+          <rect x="2" y="14" width="20" height="7" rx="1" strokeWidth={1.5} />
+          <circle cx="6" cy="6.5" r="1" fill="currentColor" />
+          <circle cx="6" cy="17.5" r="1" fill="currentColor" />
+          <path strokeLinecap="round" strokeWidth={1.5} d="M22 2L2 22" />
         </svg>
       );
     case '403':

package/src/components/index.ts

@@ -12,7 +12,4 @@ export * from './errors';
 export * from './RedirectPage';
 
 // ErrorsTracker
-export * from './errors/ErrorsTracker';
-
-// UpdateNotifier
-export * from './UpdateNotifier';
+export * from './errors/ErrorsTracker';

package/src/layouts/AppLayout/AppLayout.tsx

@@ -46,8 +46,7 @@ import { AuthProvider, type AuthConfig } from '../../auth/context';
 import { ErrorTrackingProvider, type ValidationErrorConfig, type CORSErrorConfig, type NetworkErrorConfig } from '../../components/errors/ErrorsTracker';
 import { AnalyticsProvider } from '../../snippets/Analytics';
 import { PageProgress } from '../../components/core/PageProgress';
-import { UpdateNotifier } from '../../components/UpdateNotifier';
-import { Suspense } from '../../components/core';
+import { Suspense, ClientOnly } from '../../components/core';
 
 export type LayoutMode = 'public' | 'private' | 'admin';
 
@@ -139,31 +138,25 @@ export interface AppLayoutProps {
     supportEmail?: string;
     onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
   };
-  
-  /** Update notifier configuration */
-  updateNotifier?: {
-    enabled?: boolean;
-  };
 }
 
 /**
  * AppLayout Content - Renders layout with all providers
+ *
+ * SSR is only enabled for publicLayout.
+ * Private and admin layouts are wrapped in ClientOnly to avoid hydration mismatch.
  */
 function AppLayoutContent({
   children,
   publicLayout,
   privateLayout,
   adminLayout,
-  theme,
-  auth,
   analytics,
   centrifugo,
-  errorTracking,
   errorBoundary,
-  updateNotifier,
 }: AppLayoutProps) {
   const pathname = usePathname();
-  
+
   const layoutMode = useMemo(
     () => determineLayoutMode(
       pathname,
@@ -173,46 +166,51 @@ function AppLayoutContent({
     ),
     [pathname, adminLayout, privateLayout, publicLayout]
   );
-  
+
   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>
+            <ClientOnly>
+              <Suspense>
+                <privateLayout.component>{children}</privateLayout.component>
+              </Suspense>
+            </ClientOnly>
           );
         }
         if (!adminLayout) {
           return children;
         }
         return (
-          <Suspense>
-            <adminLayout.component>{children}</adminLayout.component>
-          </Suspense>
+          <ClientOnly>
+            <Suspense>
+              <adminLayout.component>{children}</adminLayout.component>
+            </Suspense>
+          </ClientOnly>
         );
-        
+
       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>
+          <ClientOnly>
+            <Suspense>
+              <privateLayout.component>{children}</privateLayout.component>
+            </Suspense>
+          </ClientOnly>
         );
-        
+
       case 'public':
       default:
+        // Public layout renders with SSR (no ClientOnly wrapper)
         if (!publicLayout) {
           return children;
         }
@@ -252,9 +250,6 @@ function AppLayoutContent({
     <>
       {content}
       <PageProgress />
-      <UpdateNotifier 
-        enabled={updateNotifier?.enabled !== false} 
-      />
       <Toaster />
     </>
   );

package/src/layouts/PrivateLayout/PrivateLayout.tsx

@@ -1,19 +1,20 @@
 /**
  * Private Layout
- * 
+ *
  * Layout for authenticated user pages (dashboard, profile, etc.)
  * Import and use directly with props - no complex configs needed!
- * 
+ *
  * Features:
  * - Responsive sidebar with mobile burger menu
  * - Keyboard shortcut (Ctrl/Cmd + B) to toggle sidebar
  * - Header with sidebar trigger and user menu
  * - Configurable content padding
- * 
+ * - NO SSR - renders only on client to avoid hydration mismatch
+ *
  * @example
  * ```tsx
  * import { PrivateLayout } from '@djangocfg/layouts';
- * 
+ *
  * <PrivateLayout
  *   sidebar={{
  *     items: [
@@ -28,7 +29,7 @@
  * >
  *   {children}
  * </PrivateLayout>
- * 
+ *
  * Note: User data (name, email, avatar) is automatically loaded from useAuth() context
  * Keyboard shortcut: Ctrl/Cmd + B to toggle sidebar
  * ```
@@ -37,7 +38,7 @@
 'use client';
 
 import React, { ReactNode } from 'react';
-import { SidebarProvider, SidebarInset, Preloader, Button, ButtonLink } from '@djangocfg/ui/components';
+import { SidebarProvider, SidebarInset, Preloader, ButtonLink } from '@djangocfg/ui/components';
 import { useAuth } from '../../auth';
 import { PrivateSidebar, PrivateHeader, PrivateContent } from './components';
 import type { LucideIcon as LucideIconType } from 'lucide-react';
@@ -76,20 +77,10 @@ export function PrivateLayout({
   header,
   contentPadding = 'default',
 }: PrivateLayoutProps) {
-  const { isAuthenticated, isLoading, user } = useAuth();
-
-  // Debug logging in development
-  if (process.env.NODE_ENV === 'development') {
-    console.log('[PrivateLayout] Render state:', {
-      isLoading,
-      isAuthenticated,
-      hasUser: !!user,
-      hasSidebar: !!sidebar,
-      hasHeader: !!header,
-    });
-  }
+  const { isAuthenticated, isLoading } = useAuth();
 
   // Show loading state while auth is being checked
+  // Note: SSR hydration is handled by ClientOnly wrapper in AppLayout
   if (isLoading) {
     return (
       <Preloader
@@ -104,9 +95,6 @@ export function PrivateLayout({
 
   // Don't render if user is not authenticated
   if (!isAuthenticated) {
-    if (process.env.NODE_ENV === 'development') {
-      console.warn('[PrivateLayout] User not authenticated, returning null');
-    }
     return (
       <div className="flex flex-col items-center justify-center min-h-screen gap-4">
         <h3 className="text-2xl font-bold">

package/src/components/UpdateNotifier/UpdateNotifier.tsx

@@ -1,178 +0,0 @@
-/**
- * Update Notifier Component
- *
- * Checks npm registry for @djangocfg package updates
- * Shows toast notification when new version is available
- * Uses localStorage to cache check and avoid spam
- */
-
-'use client';
-
-import React, { useEffect, useState, useRef } from 'react';
-import consola from 'consola';
-import { toast } from '@djangocfg/ui/hooks';
-import { useLocalStorage } from '@djangocfg/ui/hooks';
-
-const PACKAGE_NAME = '@djangocfg/layouts';
-const CHECK_INTERVAL_MS = 24 * 60 * 60 * 1000; // 24 hours
-const CACHE_KEY = 'djangocfg_update_check';
-
-interface UpdateCheckCache {
-  lastCheck: number;
-  latestVersion: string;
-  dismissed: boolean;
-}
-
-const defaultCache: UpdateCheckCache = {
-  lastCheck: 0,
-  latestVersion: '',
-  dismissed: false,
-};
-
-export interface UpdateNotifierProps {
-  /**
-   * Enable update notifications
-   * @default false
-   */
-  enabled?: boolean;
-}
-
-/**
- * Get current package version from package.json
- * Uses require in runtime to avoid TypeScript rootDir issues
- */
-function getCurrentVersion(): string | null {
-  try {
-    // Use require in runtime (works in both dev and build)
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-    const packageJson = require('../../../package.json');
-    return packageJson.version || null;
-  } catch (error) {
-    consola.warn('[UpdateNotifier] Failed to load package.json:', error);
-    return null;
-  }
-}
-
-/**
- * Compare semver versions
- * Returns true if newVersion > currentVersion
- */
-function isNewerVersion(current: string, latest: string): boolean {
-  const parseCurrent = current.split('.').map(Number);
-  const parseLatest = latest.split('.').map(Number);
-
-  for (let i = 0; i < 3; i++) {
-    if (parseLatest[i] > parseCurrent[i]) return true;
-    if (parseLatest[i] < parseCurrent[i]) return false;
-  }
-  return false;
-}
-
-/**
- * Fetch latest version from npm registry
- */
-async function fetchLatestVersion(): Promise<string | null> {
-  try {
-    const response = await fetch(`https://registry.npmjs.org/${PACKAGE_NAME}/latest`, {
-      method: 'GET',
-      headers: { 'Accept': 'application/json' },
-    });
-
-    if (!response.ok) return null;
-
-    const data = await response.json();
-    return data.version || null;
-  } catch (error) {
-    consola.warn('[UpdateNotifier] Failed to check for updates:', error);
-    return null;
-  }
-}
-
-export function UpdateNotifier({ enabled = false }: UpdateNotifierProps) {
-  const [checked, setChecked] = useState(false);
-  const [cache, setCache] = useLocalStorage<UpdateCheckCache | null>(CACHE_KEY, null);
-  const cacheRef = useRef(cache);
-  
-  // Keep cacheRef in sync with cache
-  useEffect(() => {
-    cacheRef.current = cache;
-  }, [cache]);
-
-  useEffect(() => {
-    if (!enabled || checked || typeof window === 'undefined') return;
-
-    const checkForUpdates = async () => {
-      // Get current version from package.json
-      const currentVersion = getCurrentVersion();
-      if (!currentVersion) {
-        setChecked(true);
-        return;
-      }
-      
-      // Check cache first (use ref to get latest value)
-      const now = Date.now();
-      const cachedData = cacheRef.current || defaultCache;
-
-      // If we checked recently, skip
-      if (cachedData && cachedData.lastCheck > 0 && (now - cachedData.lastCheck) < CHECK_INTERVAL_MS) {
-        // Show notification if there's an update and it wasn't dismissed
-        if (cachedData.latestVersion && !cachedData.dismissed && isNewerVersion(currentVersion, cachedData.latestVersion)) {
-          showUpdateNotification(currentVersion, cachedData.latestVersion, setCache);
-        }
-        setChecked(true);
-        return;
-      }
-
-      // Fetch latest version from npm
-      const latestVersion = await fetchLatestVersion();
-
-      if (!latestVersion) {
-        setChecked(true);
-        return;
-      }
-
-      // Update cache
-      setCache({
-        lastCheck: now,
-        latestVersion,
-        dismissed: false,
-      });
-
-      // Show notification if newer version available
-      if (isNewerVersion(currentVersion, latestVersion)) {
-        showUpdateNotification(currentVersion, latestVersion, setCache);
-      }
-
-      setChecked(true);
-    };
-
-    // Check after a short delay to not block initial render
-    const timer = setTimeout(checkForUpdates, 2000);
-
-    return () => clearTimeout(timer);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [enabled, checked]);
-
-  return null; // This component doesn't render anything
-}
-
-/**
- * Show update notification toast
- */
-function showUpdateNotification(
-  currentVersion: string,
-  latestVersion: string,
-  setCache: (value: UpdateCheckCache | null | ((val: UpdateCheckCache | null) => UpdateCheckCache | null)) => void
-) {
-  toast({
-    title: `📦 Update Available`,
-    description: `New version ${latestVersion} of @djangocfg packages is available. You're using ${currentVersion}. Run: pnpm update @djangocfg/layouts@latest`,
-    duration: 10000,
-  });
-
-  // Mark as dismissed in cache after showing
-  setCache((prev) => {
-    if (!prev) return null;
-    return { ...prev, dismissed: true };
-  });
-}

package/src/components/UpdateNotifier/index.ts

@@ -1,2 +0,0 @@
-export { UpdateNotifier } from './UpdateNotifier';
-export type { UpdateNotifierProps } from './UpdateNotifier';