@djangocfg/layouts 1.2.58 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.2.58",
+  "version": "1.4.0",
   "description": "Layout system and components for Unrealon applications",
   "author": {
     "name": "DjangoCFG",
@@ -63,9 +63,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.2.58",
-    "@djangocfg/og-image": "^1.2.58",
-    "@djangocfg/ui": "^1.2.58",
+    "@djangocfg/api": "^1.4.0",
+    "@djangocfg/og-image": "^1.4.0",
+    "@djangocfg/ui": "^1.4.0",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.468.0",
@@ -86,7 +86,7 @@
     "vidstack": "0.6.15"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.2.58",
+    "@djangocfg/typescript-config": "^1.4.0",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/layouts/AppLayout/AppLayout.tsx

@@ -29,7 +29,7 @@ import { useRouter } from 'next/router';
 import dynamic from 'next/dynamic';
 import { AppContextProvider } from './context';
 import { CoreProviders } from './providers';
-import { Seo, PageProgress, ErrorBoundary } from './components';
+import { Seo, PageProgress, ErrorBoundary, UpdateNotifier } from './components';
 import { PublicLayout } from './layouts/PublicLayout';
 import { PrivateLayout } from './layouts/PrivateLayout';
 import { AuthLayout } from './layouts/AuthLayout';
@@ -40,6 +40,7 @@ import type { AppLayoutConfig } from './types';
 import type { ValidationErrorConfig, CORSErrorConfig, NetworkErrorConfig } from '../../validation';
 import type { PageWithConfig } from '../../types/pageConfig';
 import { determinePageConfig } from '../../types/pageConfig';
+import packageJson from '../../../package.json';
 
 // Dynamic import for AdminLayout to prevent SSR hydration issues
 const AdminLayout = dynamic(
@@ -84,11 +85,11 @@ export interface AppLayoutProps {
    */
   fontFamily?: string;
   /**
-   * Show package versions button in sidebar footer
-   * @default false
-   * @example showPackageVersions={true}
+   * Show update notifier (checks npm for new versions)
+   * @default true
+   * @example showUpdateNotifier={false}
    */
-  showPackageVersions?: boolean;
+  showUpdateNotifier?: boolean;
   /**
    * Validation error tracking configuration
    * @default { enabled: true, showToast: true, maxErrors: 50 }
@@ -276,7 +277,7 @@ function LayoutRouter({
  * </AppLayout>
  * ```
  */
-export function AppLayout({ children, config, component, pageProps, disableLayout = false, forceLayout, fontFamily, showPackageVersions, validation, cors, network }: AppLayoutProps) {
+export function AppLayout({ children, config, component, pageProps, disableLayout = false, forceLayout, fontFamily, showUpdateNotifier, validation, cors, network }: AppLayoutProps) {
   const router = useRouter();
 
   // Check if ErrorBoundary is enabled (default: true)
@@ -302,7 +303,7 @@ export function AppLayout({ children, config, component, pageProps, disableLayou
       };
 
   const appContent = (
-    <AppContextProvider config={config} showPackageVersions={showPackageVersions}>
+    <AppContextProvider config={config} showUpdateNotifier={showUpdateNotifier}>
       {/* SEO Meta Tags */}
       <Seo
         pageConfig={finalPageConfig}
@@ -310,6 +311,9 @@ export function AppLayout({ children, config, component, pageProps, disableLayou
         siteUrl={config.app.siteUrl}
       />
 
+      {/* Update Notifier */}
+      <UpdateNotifier enabled={showUpdateNotifier} currentVersion={packageJson.version} />
+
       {/* Loading Progress Bar */}
       <PageProgress />
 

package/src/layouts/AppLayout/components/UpdateNotifier/UpdateNotifier.tsx

@@ -0,0 +1,170 @@
+/**
+ * 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 } from 'react';
+import { toast } 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;
+}
+
+export interface UpdateNotifierProps {
+  /**
+   * Enable update notifications
+   * @default false
+   */
+  enabled?: boolean;
+  /**
+   * Current package version (auto-injected from package.json)
+   */
+  currentVersion?: string;
+}
+
+/**
+ * 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) {
+    console.warn('[UpdateNotifier] Failed to check for updates:', error);
+    return 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) {
+    console.warn('[UpdateNotifier] Failed to cache update check:', error);
+  }
+}
+
+export function UpdateNotifier({ enabled = false, currentVersion }: UpdateNotifierProps) {
+  const [checked, setChecked] = useState(false);
+
+  useEffect(() => {
+    if (!enabled || checked || typeof window === 'undefined') return;
+    if (!currentVersion) return;
+
+    const checkForUpdates = async () => {
+      // Check cache first
+      const cache = getCache();
+      const now = Date.now();
+
+      // If we checked recently, skip
+      if (cache && (now - cache.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);
+        }
+        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);
+      }
+
+      setChecked(true);
+    };
+
+    // Check after a short delay to not block initial render
+    const timer = setTimeout(checkForUpdates, 2000);
+
+    return () => clearTimeout(timer);
+  }, [enabled, checked, currentVersion]);
+
+  return null; // This component doesn't render anything
+}
+
+/**
+ * Show update notification toast
+ */
+function showUpdateNotification(currentVersion: string, latestVersion: string) {
+  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
+  const cache = getCache();
+  if (cache) {
+    setCache({ ...cache, dismissed: true });
+  }
+}

package/src/layouts/AppLayout/components/UpdateNotifier/index.ts

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

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

@@ -5,7 +5,7 @@
 export { default as Seo } from './Seo';
 export { default as PageProgress } from './PageProgress';
 export { ErrorBoundary } from './ErrorBoundary';
-export { PackageVersions, getPackageVersions, getPackageVersion } from './PackageVersions';
+export { UpdateNotifier } from './UpdateNotifier';
 export { UserMenu } from './UserMenu';
-export type { PackageInfo } from './PackageVersions';
+export type { UpdateNotifierProps } from './UpdateNotifier';
 export type { UserMenuProps } from './UserMenu';

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

@@ -43,7 +43,7 @@ interface AppContextValue {
   toggleSidebar: () => void;
 
   // Features
-  showPackageVersions?: boolean;
+  showUpdateNotifier?: boolean;
 }
 
 // ═══════════════════════════════════════════════════════════════════════════
@@ -59,7 +59,7 @@ const AppContext = createContext<AppContextValue | null>(null);
 export interface AppContextProviderProps {
   children: ReactNode;
   config: AppLayoutConfig;
-  showPackageVersions?: boolean;
+  showUpdateNotifier?: boolean;
 }
 
 /**
@@ -68,7 +68,7 @@ export interface AppContextProviderProps {
  * Provides unified application context to all child components
  * Manages layout state and exposes configuration
  */
-export function AppContextProvider({ children, config, showPackageVersions }: AppContextProviderProps) {
+export function AppContextProvider({ children, config, showUpdateNotifier }: AppContextProviderProps) {
   const router = useRouter();
 
   // UI state
@@ -117,7 +117,7 @@ export function AppContextProvider({ children, config, showPackageVersions }: Ap
     collapseSidebar,
     expandSidebar,
     toggleSidebar,
-    showPackageVersions,
+    showUpdateNotifier,
   };
 
   return <AppContext.Provider value={value}>{children}</AppContext.Provider>;

package/src/layouts/AppLayout/layouts/PrivateLayout/components/DashboardSidebar.tsx

@@ -29,7 +29,6 @@ import {
 } from '@djangocfg/ui/components';
 import { useAppContext } from '../../../context';
 import { useNavigation } from '../../../hooks';
-import { PackageVersions } from '../../../components';
 
 export interface DashboardSidebarProps {
   isAdmin?: boolean;
@@ -49,7 +48,7 @@ export interface DashboardSidebarProps {
  * All data from context!
  */
 export function DashboardSidebar({ isAdmin = false }: DashboardSidebarProps) {
-  const { config, showPackageVersions } = useAppContext();
+  const { config } = useAppContext();
   const { currentPath } = useNavigation();
   const { state, isMobile } = useSidebar();
 
@@ -177,12 +176,6 @@ export function DashboardSidebar({ isAdmin = false }: DashboardSidebarProps) {
           </SidebarGroup>
         ))}
       </SidebarContent>
-
-      {showPackageVersions && (
-        <SidebarFooter>
-          <PackageVersions variant="sidebar" />
-        </SidebarFooter>
-      )}
     </Sidebar>
   );
 }

package/src/layouts/AppLayout/layouts/PublicLayout/components/Footer.tsx

@@ -11,7 +11,6 @@ import React from 'react';
 import Link from 'next/link';
 import { useIsMobile } from '@djangocfg/ui/hooks';
 import { useAppContext } from '../../../context';
-import { PackageVersions } from '../../../components';
 
 /**
  * Footer Component
@@ -28,7 +27,7 @@ import { PackageVersions } from '../../../components';
  * All data from context!
  */
 export function Footer() {
-  const { config, showPackageVersions } = useAppContext();
+  const { config } = useAppContext();
   const isMobile = useIsMobile();
 
   const { app, publicLayout } = config;
@@ -60,9 +59,6 @@ export function Footer() {
 
           {/* Quick Links */}
           <div className="flex flex-wrap justify-center gap-4 mb-6 items-center">
-            {showPackageVersions && (
-              <PackageVersions variant="footer-minimal" />
-            )}
             {footer.links.docs && (
               <a
                 href={footer.links.docs}
@@ -193,9 +189,6 @@ export function Footer() {
               </a>
             </div>
             <div className="flex flex-wrap items-center gap-4">
-              {showPackageVersions && (
-                <PackageVersions variant="footer-minimal" />
-              )}
               {footer.links.docs && (
                 <a
                   href={footer.links.docs}

package/src/layouts/AppLayout/components/PackageVersions/PackageVersions.tsx

@@ -1,101 +0,0 @@
-/**
- * Package Versions Display
- *
- * Shows all @djangocfg packages versions in a popover
- * Works in both sidebar (PrivateLayout) and footer (PublicLayout)
- */
-
-'use client';
-
-import React from 'react';
-import { Info, Package } from 'lucide-react';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@djangocfg/ui/components';
-import { Button } from '@djangocfg/ui/components';
-import { getPackageVersions } from './packageVersions.config';
-
-export interface PackageVersionsProps {
-  /**
-   * Display variant
-   * - 'sidebar': Adapts to sidebar collapsed state (PrivateLayout)
-   * - 'footer': Simple button for footer (PublicLayout)
-   * - 'footer-minimal': Only icon, no text (for compact footer)
-   */
-  variant?: 'sidebar' | 'footer' | 'footer-minimal';
-}
-
-export function PackageVersions({ variant = 'footer' }: PackageVersionsProps) {
-  // Try to use sidebar state if available (only in PrivateLayout)
-  let isCollapsed = false;
-  if (variant === 'sidebar') {
-    try {
-      // Dynamic import to avoid errors in PublicLayout
-      const { useSidebar } = require('@djangocfg/ui/components');
-      const { state } = useSidebar();
-      isCollapsed = state === 'collapsed';
-    } catch (e) {
-      // Sidebar not available, use default
-    }
-  }
-
-  const isSidebarVariant = variant === 'sidebar';
-  const isMinimalVariant = variant === 'footer-minimal';
-  const popoverAlign = isSidebarVariant ? 'start' : 'center';
-  const popoverSide = isSidebarVariant ? 'right' : 'top';
-
-  // Determine if we should show text
-  const showText = !isCollapsed && !isMinimalVariant;
-
-  // Get package versions dynamically
-  const packages = getPackageVersions();
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant="ghost"
-          size={isCollapsed || isMinimalVariant ? "icon" : "sm"}
-          className={isSidebarVariant
-            ? "w-full justify-start text-xs text-muted-foreground hover:text-foreground"
-            : isMinimalVariant
-              ? "h-auto w-auto p-1 text-muted-foreground hover:text-primary transition-colors"
-              : "text-xs text-muted-foreground hover:text-foreground"
-          }
-          title={isMinimalVariant ? "Package Versions" : undefined}
-        >
-          <Info className={isMinimalVariant ? "h-3 w-3" : "h-3.5 w-3.5"} />
-          {showText && <span className="ml-2">Package Versions</span>}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent align={popoverAlign} side={popoverSide} className="w-80">
-        <div className="space-y-3">
-          <div className="flex items-center gap-2">
-            <Package className="h-4 w-4 text-primary" />
-            <h4 className="font-semibold text-sm">Package Versions</h4>
-          </div>
-          <div className="space-y-1.5">
-            {packages.map((pkg) => (
-              <a
-                key={pkg.name}
-                href={`https://www.npmjs.com/package/${pkg.name}`}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center justify-between py-1.5 px-2 rounded-sm hover:bg-accent/50 transition-colors cursor-pointer group"
-              >
-                <span className="text-xs font-mono text-muted-foreground group-hover:text-foreground transition-colors">
-                  {pkg.name}
-                </span>
-                <span className="text-xs font-semibold bg-primary/10 text-primary px-2 py-0.5 rounded group-hover:bg-primary/20 transition-colors">
-                  v{pkg.version}
-                </span>
-              </a>
-            ))}
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}

package/src/layouts/AppLayout/components/PackageVersions/index.ts

@@ -1,7 +0,0 @@
-/**
- * Package Versions Module
- */
-
-export { PackageVersions } from './PackageVersions';
-export { getPackageVersions, getPackageVersion } from './packageVersions.config';
-export type { PackageInfo } from './packageVersions.config';

package/src/layouts/AppLayout/components/PackageVersions/packageVersions.config.ts

@@ -1,65 +0,0 @@
-/**
- * Package Versions Configuration
- *
- * NOTE: This file is auto-generated by packages/scripts/sync-package-versions.js
- * Do not edit manually! Run 'make build' or 'pnpm sync-versions' to update.
- *
- * Versions are synced from actual package.json files in the monorepo.
- * This ensures compatibility with both monorepo (dev) and npm (production).
- */
-
-export interface PackageInfo {
-  name: string;
-  version: string;
-}
-
-/**
- * Package versions registry
- * Auto-synced from package.json files
- * Last updated: 2025-11-23T06:18:54.167Z
- */
-const PACKAGE_VERSIONS: PackageInfo[] = [
-  {
-    "name": "@djangocfg/ui",
-    "version": "1.2.58"
-  },
-  {
-    "name": "@djangocfg/api",
-    "version": "1.2.58"
-  },
-  {
-    "name": "@djangocfg/layouts",
-    "version": "1.2.58"
-  },
-  {
-    "name": "@djangocfg/markdown",
-    "version": "1.2.58"
-  },
-  {
-    "name": "@djangocfg/og-image",
-    "version": "1.2.58"
-  },
-  {
-    "name": "@djangocfg/eslint-config",
-    "version": "1.2.58"
-  },
-  {
-    "name": "@djangocfg/typescript-config",
-    "version": "1.2.58"
-  }
-];
-
-/**
- * Get all package versions
- */
-export function getPackageVersions(): PackageInfo[] {
-  return PACKAGE_VERSIONS;
-}
-
-/**
- * Get single package version by name
- */
-export function getPackageVersion(packageName: string): string | undefined {
-  const packages = getPackageVersions();
-  return packages.find((pkg) => pkg.name === packageName)?.version;
-}