@djangocfg/layouts 1.4.30 → 2.0.2

package/src/components/LucideIcon.tsx

@@ -0,0 +1,91 @@
+/**
+ * LucideIcon Component
+ *
+ * Smart component for rendering Lucide icons
+ * Supports both string names and icon components
+ *
+ * Usage:
+ * ```tsx
+ * // By name (string)
+ * <LucideIcon icon="CloudLightning" className="w-4 h-4" />
+ *
+ * // By component
+ * import { CloudLightning } from 'lucide-react';
+ * <LucideIcon icon={CloudLightning} className="w-4 h-4" />
+ * ```
+ */
+
+'use client';
+
+import React from 'react';
+import * as LucideIcons from 'lucide-react';
+import type { LucideIcon as LucideIconType } from 'lucide-react';
+import { cn } from '@djangocfg/ui';
+
+export interface LucideIconProps extends Omit<React.SVGProps<SVGSVGElement>, 'children'> {
+  /**
+   * Icon name (string) or icon component (LucideIcon)
+   * If string, will be resolved from lucide-react
+   * If component, will be used directly
+   */
+  icon?: LucideIconType | string;
+  /**
+   * Fallback icon if name not found
+   * @default CloudLightning
+   */
+  fallback?: LucideIconType;
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+/**
+ * Get Lucide icon by name or return the icon component
+ * @param icon - Icon name (string) or LucideIcon component
+ * @param fallback - Fallback icon if name not found (default: CloudLightning)
+ * @returns LucideIcon component
+ */
+function getLucideIcon(
+  icon: LucideIconType | string | undefined,
+  fallback: LucideIconType = LucideIcons.CloudLightning
+): LucideIconType {
+  if (!icon) {
+    return fallback;
+  }
+
+  if (typeof icon === 'string') {
+    const IconComponent = LucideIcons[icon as keyof typeof LucideIcons] as LucideIconType | undefined;
+    return IconComponent || fallback;
+  }
+
+  return icon;
+}
+
+/**
+ * LucideIcon Component
+ *
+ * Renders a Lucide icon either by name (string) or by component reference.
+ * Automatically resolves icon names from lucide-react package.
+ *
+ * Usage:
+ * ```tsx
+ * // By name (string)
+ * <LucideIcon icon="CloudLightning" className="w-4 h-4" />
+ *
+ * // By component
+ * import { CloudLightning } from 'lucide-react';
+ * <LucideIcon icon={CloudLightning} className="w-4 h-4" />
+ * ```
+ */
+export function LucideIcon({
+  icon,
+  fallback = LucideIcons.CloudLightning,
+  className,
+  ...props
+}: LucideIconProps) {
+  const IconComponent = getLucideIcon(icon, fallback);
+
+  return <IconComponent className={cn(className)} {...props} />;
+}
+

package/src/components/PageProgress.tsx

@@ -0,0 +1,127 @@
+/**
+ * PageProgress - Loading progress bar
+ * 
+ * Shows a progress bar at the top of the page during route transitions
+ */
+
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { useEffect, useRef, useState } from 'react';
+
+export function PageProgress() {
+  const pathname = usePathname();
+  const [loading, setLoading] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [mounted, setMounted] = useState(false);
+  const progressTimer = useRef<NodeJS.Timeout | null>(null);
+  const prevPathname = useRef<string | null>(null);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Simulate realistic progress
+  const startFakeProgress = () => {
+    // Clear any existing timer
+    if (progressTimer.current) {
+      clearInterval(progressTimer.current);
+    }
+
+    setProgress(0);
+
+    // Quickly go to 20% to show immediate feedback
+    setTimeout(() => setProgress(20), 50);
+
+    // Then slowly increase to 90% (never reach 100% until actually complete)
+    progressTimer.current = setInterval(() => {
+      setProgress((prevProgress) => {
+        if (prevProgress >= 90) {
+          if (progressTimer.current) {
+            clearInterval(progressTimer.current);
+          }
+          return 90;
+        }
+
+        // Slow down as we get closer to 90%
+        const increment = 90 - prevProgress;
+        return prevProgress + (increment / 10);
+      });
+    }, 300);
+  };
+
+  const completeProgress = () => {
+    // Clear any existing timer
+    if (progressTimer.current) {
+      clearInterval(progressTimer.current);
+      progressTimer.current = null;
+    }
+
+    // Jump to 100% and then hide after showing completion
+    setProgress(100);
+    setTimeout(() => {
+      setLoading(false);
+      setTimeout(() => {
+        setProgress(0);
+      }, 300); // Wait for fade out animation
+    }, 500); // Show 100% for half a second
+  };
+
+  // Track pathname changes (App Router equivalent of routeChangeStart/Complete)
+  useEffect(() => {
+    // Skip on initial mount
+    if (prevPathname.current === null) {
+      prevPathname.current = pathname;
+      return;
+    }
+
+    // Only trigger if pathname actually changed
+    if (prevPathname.current !== pathname) {
+      setLoading(true);
+      startFakeProgress();
+      
+      // Complete progress after a short delay (simulating route change)
+      const timeout = setTimeout(() => {
+        completeProgress();
+        prevPathname.current = pathname;
+      }, 100);
+
+      return () => {
+        clearTimeout(timeout);
+        if (progressTimer.current) {
+          clearInterval(progressTimer.current);
+        }
+      };
+    }
+  }, [pathname]);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <div
+      data-page-progress="root"
+      data-loading={loading}
+      data-progress={progress}
+      className={`fixed top-0 left-0 w-full transition-opacity duration-300 ${
+        loading ? 'opacity-100' : 'opacity-0'
+      }`}
+      style={{
+        zIndex: 99999,
+        height: '3px',
+      }}
+    >
+      <div
+        className="h-full transition-all duration-200 ease-linear"
+        style={{
+          width: `${progress}%`,
+          background: 'linear-gradient(90deg, #3b82f6 0%, #60a5fa 50%, #3b82f6 100%)',
+          boxShadow: '0 0 10px rgba(59, 130, 246, 0.6), 0 0 20px rgba(59, 130, 246, 0.4), 0 0 30px rgba(59, 130, 246, 0.2)',
+          filter: 'drop-shadow(0 0 8px rgba(59, 130, 246, 0.8))',
+        }}
+      />
+    </div>
+  );
+}
+

package/src/components/Suspense.tsx

@@ -0,0 +1,29 @@
+/**
+ * Suspense Wrapper Component
+ * 
+ * Reusable Suspense component with consistent loading fallback
+ * Used for wrapping layouts that may use useSearchParams or other async hooks
+ */
+
+'use client';
+
+import { Suspense as ReactSuspense, ReactNode } from 'react';
+
+interface SuspenseProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+const defaultFallback = (
+  <div className="flex items-center justify-center min-h-screen">
+    <div className="text-center">
+      <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]" />
+      <p className="mt-4 text-sm text-muted-foreground">Loading...</p>
+    </div>
+  </div>
+);
+
+export function Suspense({ children, fallback = defaultFallback }: SuspenseProps) {
+  return <ReactSuspense fallback={fallback}>{children}</ReactSuspense>;
+}
+

package/src/{layouts/AppLayout/components → components}/UpdateNotifier/UpdateNotifier.tsx

@@ -8,9 +8,10 @@
 
 'use client';
 
-import React, { useEffect, useState } from 'react';
+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
@@ -22,16 +23,34 @@ interface UpdateCheckCache {
   dismissed: boolean;
 }
 
+const defaultCache: UpdateCheckCache = {
+  lastCheck: 0,
+  latestVersion: '',
+  dismissed: false,
+};
+
 export interface UpdateNotifierProps {
   /**
    * Enable update notifications
    * @default false
    */
   enabled?: boolean;
-  /**
-   * Current package version (auto-injected from package.json)
-   */
-  currentVersion?: string;
+}
+
+/**
+ * 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;
+  }
 }
 
 /**
@@ -69,53 +88,36 @@ async function fetchLatestVersion(): Promise<string | null> {
   }
 }
 
-/**
- * Get cached update check data
- */
-function getCache(): UpdateCheckCache | null {
-  if (typeof window === 'undefined') return null;
-
-  try {
-    const cached = localStorage.getItem(CACHE_KEY);
-    if (!cached) return null;
-
-    const data: UpdateCheckCache = JSON.parse(cached);
-    return data;
-  } catch {
-    return null;
-  }
-}
-
-/**
- * Save update check data to cache
- */
-function setCache(data: UpdateCheckCache): void {
-  if (typeof window === 'undefined') return;
-
-  try {
-    localStorage.setItem(CACHE_KEY, JSON.stringify(data));
-  } catch (error) {
-    consola.warn('[UpdateNotifier] Failed to cache update check:', error);
-  }
-}
-
-export function UpdateNotifier({ enabled = false, currentVersion }: UpdateNotifierProps) {
+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;
-    if (!currentVersion) return;
 
     const checkForUpdates = async () => {
-      // Check cache first
-      const cache = getCache();
+      // 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 (cache && (now - cache.lastCheck) < CHECK_INTERVAL_MS) {
+      if (cachedData && cachedData.lastCheck > 0 && (now - cachedData.lastCheck) < CHECK_INTERVAL_MS) {
         // Show notification if there's an update and it wasn't dismissed
-        if (cache.latestVersion && !cache.dismissed && isNewerVersion(currentVersion, cache.latestVersion)) {
-          showUpdateNotification(currentVersion, cache.latestVersion);
+        if (cachedData.latestVersion && !cachedData.dismissed && isNewerVersion(currentVersion, cachedData.latestVersion)) {
+          showUpdateNotification(currentVersion, cachedData.latestVersion, setCache);
         }
         setChecked(true);
         return;
@@ -138,7 +140,7 @@ export function UpdateNotifier({ enabled = false, currentVersion }: UpdateNotifi
 
       // Show notification if newer version available
       if (isNewerVersion(currentVersion, latestVersion)) {
-        showUpdateNotification(currentVersion, latestVersion);
+        showUpdateNotification(currentVersion, latestVersion, setCache);
       }
 
       setChecked(true);
@@ -148,7 +150,8 @@ export function UpdateNotifier({ enabled = false, currentVersion }: UpdateNotifi
     const timer = setTimeout(checkForUpdates, 2000);
 
     return () => clearTimeout(timer);
-  }, [enabled, checked, currentVersion]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [enabled, checked]);
 
   return null; // This component doesn't render anything
 }
@@ -156,7 +159,11 @@ export function UpdateNotifier({ enabled = false, currentVersion }: UpdateNotifi
 /**
  * Show update notification toast
  */
-function showUpdateNotification(currentVersion: string, latestVersion: string) {
+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`,
@@ -164,8 +171,8 @@ function showUpdateNotification(currentVersion: string, latestVersion: string) {
   });
 
   // Mark as dismissed in cache after showing
-  const cache = getCache();
-  if (cache) {
-    setCache({ ...cache, dismissed: true });
-  }
+  setCache((prev) => {
+    if (!prev) return null;
+    return { ...prev, dismissed: true };
+  });
 }

package/src/components/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Components exports
+ */
+
+export { JsonLd } from './JsonLd';
+export { LucideIcon } from './LucideIcon';
+export type { LucideIconProps } from './LucideIcon';
+export { PageProgress } from './PageProgress';
+
+export { Suspense } from './Suspense';

package/src/index.ts

@@ -1,7 +1,28 @@
 /**
  * @djangocfg/layouts
- *
- * Reusable layout components and authentication system
+ * 
+ * Simple, straightforward layout components for Next.js
+ * Import and use directly with props - no complex configs needed!
+ * 
+ * @example
+ * ```tsx
+ * import { PublicLayout, PrivateLayout, AuthLayout } from '@djangocfg/layouts';
+ * 
+ * // Public page
+ * <PublicLayout logo="/logo.svg" siteName="My App" navigation={navItems}>
+ *   {children}
+ * </PublicLayout>
+ * 
+ * // Private page
+ * <PrivateLayout sidebar={{ items: menuItems }} header={{ title: 'Dashboard' }}>
+ *   {children}
+ * </PrivateLayout>
+ * 
+ * // Auth page
+ * <AuthLayout logo="/logo.svg" title="Sign In">
+ *   <LoginForm />
+ * </AuthLayout>
+ * ```
  */
 
 // Auth system
@@ -10,12 +31,9 @@ export * from './auth';
 // Layout components
 export * from './layouts';
 
-// Types
-export * from './types';
-
 // Snippets - Reusable UI components (includes Analytics)
 export * from './snippets';
 
-// Validation error tracking
-export * from './validation';
+// Components (includes ErrorTrackingProvider)
+export * from './components';
 

package/src/layouts/AdminLayout/AdminLayout.tsx

@@ -0,0 +1,46 @@
+/**
+ * Admin Layout
+ * 
+ * Layout for admin dashboard pages
+ * Import and use directly with props - no complex configs needed!
+ * 
+ * @example
+ * ```tsx
+ * import { AdminLayout } from '@djangocfg/layouts';
+ * 
+ * <AdminLayout
+ *   sidebar={{
+ *     items: [
+ *       { label: 'Overview', href: '/admin', icon: 'LayoutDashboard' },
+ *       { label: 'Users', href: '/admin/users', icon: 'Users' }
+ *     ]
+ *   }}
+ *   header={{
+ *     title: 'Admin Dashboard',
+ *     profilePath: '/profile' // Optional
+ *   }}
+ * >
+ *   {children}
+ * </AdminLayout>
+ * ```
+ */
+
+'use client';
+
+import { ReactNode } from 'react';
+import { PrivateLayout, type PrivateLayoutProps } from '../PrivateLayout/PrivateLayout';
+
+export interface AdminLayoutProps extends PrivateLayoutProps {
+  children: ReactNode;
+}
+
+/**
+ * Admin Layout Component
+ * 
+ * Wrapper around PrivateLayout with admin-specific defaults
+ * Same API as PrivateLayout - just a convenience export
+ */
+export function AdminLayout(props: AdminLayoutProps) {
+  return <PrivateLayout {...props} />;
+}
+

package/src/layouts/AdminLayout/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Admin Layout exports
+ */
+
+export { AdminLayout } from './AdminLayout';
+export type { AdminLayoutProps } from './AdminLayout';
+