@djangocfg/layouts 1.4.30 → 2.0.1

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

@@ -1,123 +0,0 @@
-"use client"
-
-import { useRouter } from 'next/router';
-import { useEffect, useRef, useState } from 'react';
-
-const PageProgress = () => {
-    const router = useRouter();
-    const [loading, setLoading] = useState(false);
-    const [progress, setProgress] = useState(0);
-    const [mounted, setMounted] = useState(false);
-    const progressTimer = useRef<NodeJS.Timeout | 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
-    };
-
-    useEffect(() => {
-        const handleRouteChangeStart = (url: string, { shallow }: { shallow: boolean }) => {
-            if (!shallow) {
-                setLoading(true);
-                startFakeProgress();
-            }
-        };
-
-        const handleRouteChangeComplete = () => {
-            completeProgress();
-        };
-
-        const handleRouteChangeError = () => {
-            completeProgress();
-        };
-
-        router.events.on('routeChangeStart', handleRouteChangeStart);
-        router.events.on('routeChangeComplete', handleRouteChangeComplete);
-        router.events.on('routeChangeError', handleRouteChangeError);
-
-        return () => {
-            if (progressTimer.current) {
-                clearInterval(progressTimer.current);
-            }
-            router.events.off('routeChangeStart', handleRouteChangeStart);
-            router.events.off('routeChangeComplete', handleRouteChangeComplete);
-            router.events.off('routeChangeError', handleRouteChangeError);
-        };
-    }, [router.events]);
-
-    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>
-    );
-};
-
-export default PageProgress; 

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

@@ -1,171 +0,0 @@
-"use client"
-
-import { Fragment } from 'react';
-import Head from 'next/head';
-import { useRouter } from 'next/router';
-import { generateOgImageUrl } from '@djangocfg/og-image/utils';
-
-import { PageConfig } from '../../../types/pageConfig';
-
-interface SeoProps {
-  pageConfig: PageConfig;
-  icons?: {
-    logo192?: string;
-    logo384?: string;
-    logo512?: string;
-    logoVector?: string;
-  };
-  siteUrl?: string;
-  /** Override canonical URL (defaults to current page URL) */
-  canonicalUrl?: string;
-}
-
-/**
- * Check if URL is absolute (starts with http:// or https://)
- */
-function isAbsoluteUrl(url: string): boolean {
-  return /^https?:\/\//i.test(url);
-}
-
-/**
- * Get absolute site URL with smart fallbacks
- *
- * Priority:
- * 1. Provided siteUrl (if absolute)
- * 2. NEXT_PUBLIC_SITE_URL env var
- * 3. window.location.origin (client-side only)
- */
-function getAbsoluteSiteUrl(siteUrl?: string): string | null {
-  // 1. Check if provided siteUrl is already absolute
-  if (siteUrl && isAbsoluteUrl(siteUrl)) {
-    return siteUrl.replace(/\/$/, ''); // Remove trailing slash
-  }
-
-  // 2. Check NEXT_PUBLIC_SITE_URL env var
-  const envSiteUrl = process.env.NEXT_PUBLIC_SITE_URL;
-  if (envSiteUrl && isAbsoluteUrl(envSiteUrl)) {
-    return envSiteUrl.replace(/\/$/, '');
-  }
-
-  // 3. Client-side fallback (not available during SSR)
-  if (typeof window !== 'undefined') {
-    return window.location.origin;
-  }
-
-  return null;
-}
-
-export default function Seo({ pageConfig, icons, siteUrl, canonicalUrl }: SeoProps) {
-  const router = useRouter();
-
-  const {
-    title,
-    description,
-    keywords,
-    jsonLd,
-    ogImage,
-    openGraph,
-    twitter,
-  } = pageConfig;
-
-  const ogTitle = ogImage?.title || title;
-  const ogSubtitle = ogImage?.subtitle || description;
-
-  // Get absolute site URL with smart fallbacks
-  const absoluteSiteUrl = getAbsoluteSiteUrl(siteUrl);
-
-  // Build canonical URL: custom > siteUrl + current path
-  const currentPath = router.asPath.split('?')[0]; // Remove query params
-  const absoluteCanonicalUrl = canonicalUrl
-    || (absoluteSiteUrl ? `${absoluteSiteUrl}${currentPath}` : null);
-
-  // Generate OG image URL using @djangocfg/og-image utilities
-  const ogImageUrl = ogImage
-    ? generateOgImageUrl('/api/og', {
-        title: ogTitle || 'Untitled',
-        subtitle: ogSubtitle || '',
-        description: ogSubtitle || '',
-      })
-    : null;
-
-  // Make absolute URL - only render og:image if we have absolute site URL
-  const absoluteOgImageUrl = ogImageUrl && absoluteSiteUrl
-    ? `${absoluteSiteUrl}${ogImageUrl}`
-    : null;
-
-  return (
-    <Head>
-      <title>{title}</title>
-      <meta name="description" content={description} />
-      {keywords && <meta name="keywords" content={keywords} />}
-
-      {/* Favicon */}
-      <link rel="icon" type="image/png" href={icons?.logo192 || '/favicon.png'} />
-
-      {/* Canonical URL - important for SEO */}
-      {absoluteCanonicalUrl && (
-        <link rel="canonical" href={absoluteCanonicalUrl} />
-      )}
-
-      {/* Open Graph */}
-      <meta property="og:title" content={openGraph?.title || ogTitle} />
-      <meta property="og:description" content={openGraph?.description || ogSubtitle} />
-      <meta property="og:type" content={openGraph?.type || 'website'} />
-
-      {/* OG Canonical URL */}
-      {absoluteCanonicalUrl && (
-        <meta property="og:url" content={absoluteCanonicalUrl} />
-      )}
-
-      {/* Site Name */}
-      {(openGraph?.siteName || pageConfig.projectName) && (
-        <meta property="og:site_name" content={openGraph?.siteName || pageConfig.projectName} />
-      )}
-
-      {/* Twitter */}
-      <meta name="twitter:card" content={twitter?.card || 'summary_large_image'} />
-      <meta name="twitter:title" content={twitter?.title || ogTitle} />
-      <meta name="twitter:description" content={twitter?.description || ogSubtitle} />
-      {twitter?.site && <meta name="twitter:site" content={twitter.site} />}
-      {twitter?.creator && <meta name="twitter:creator" content={twitter.creator} />}
-
-      {/* OG Images */}
-      {openGraph?.images?.length ? (
-        openGraph.images.map((image, index) => (
-          <Fragment key={index}>
-            <meta property="og:image" content={image.url} />
-            {image.width && <meta property="og:image:width" content={String(image.width)} />}
-            {image.height && <meta property="og:image:height" content={String(image.height)} />}
-            {image.alt && <meta property="og:image:alt" content={image.alt} />}
-          </Fragment>
-        ))
-      ) : absoluteOgImageUrl ? (
-        <>
-          <meta property="og:image" content={absoluteOgImageUrl} />
-          <meta property="og:image:width" content="1200" />
-          <meta property="og:image:height" content="630" />
-          <meta property="og:image:type" content="image/png" />
-        </>
-      ) : null}
-
-      {/* Twitter Images */}
-      {twitter?.images?.length ? (
-        twitter.images.map((image, index) => (
-          <meta key={index} name="twitter:image" content={image} />
-        ))
-      ) : absoluteOgImageUrl ? (
-        <meta name="twitter:image" content={absoluteOgImageUrl} />
-      ) : null}
-
-      {/* JSON-LD */}
-      {jsonLd && (
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify(jsonLd),
-          }}
-        />
-      )}
-    </Head>
-  );
-}

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

@@ -1,385 +0,0 @@
-/**
- * Universal User Menu Component
- *
- * Single unified component for both Desktop and Mobile user menus
- * Uses AppContext and Auth context directly - no prop drilling!
- */
-
-'use client';
-
-import React from 'react';
-import { useRouter } from 'next/router';
-import { User, ChevronDown, Crown, LogOut, Settings } from 'lucide-react';
-import { Button, ButtonLink, Card, CardContent, Avatar, AvatarImage, AvatarFallback } from '@djangocfg/ui/components';
-import { ThemeToggle } from '@djangocfg/ui/theme';
-import { useAppContext } from '../context';
-import { useAuth } from '../../../auth';
-
-export interface UserMenuProps {
-  variant: 'desktop' | 'mobile';
-  /** Mobile only: callback when navigation happens */
-  onNavigate?: () => void;
-}
-
-interface MenuItem {
-  id: string;
-  type: 'link' | 'button';
-  icon: React.ReactNode;
-  label: string;
-  href?: string;
-  onClick?: () => void;
-  variant?: 'default' | 'ghost' | 'destructive';
-  className?: string;
-}
-
-export function UserMenu({ variant, onNavigate }: UserMenuProps) {
-  const router = useRouter();
-  const { config, userMenuOpen, toggleUserMenu, closeUserMenu } = useAppContext();
-  const { user, isAuthenticated, logout } = useAuth();
-
-  // Fix hydration mismatch by only rendering auth-dependent content after mount
-  const [mounted, setMounted] = React.useState(false);
-  React.useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  const { publicLayout, routes } = config;
-
-  // Desktop: determine if user is on dashboard
-  const isDashboard = variant === 'desktop' && publicLayout.userMenu.dashboardPath
-    ? router.pathname.includes(publicLayout.userMenu.dashboardPath)
-    : false;
-
-  // === DATA PREPARATION (before rendering) ===
-
-  // Prepare user data
-  const userAvatar = user?.avatar || '';
-  const userEmail = user?.email || '';
-  const displayName = user?.display_username || userEmail || 'User';
-  const userInitial = displayName.charAt(0).toUpperCase();
-  const dashboardPath = publicLayout.userMenu.dashboardPath;
-  const profilePath = publicLayout.userMenu.profilePath;
-
-  // Handle logout
-  const handleLogout = React.useCallback(() => {
-    logout();
-    if (variant === 'desktop') {
-      closeUserMenu();
-    } else if (onNavigate) {
-      onNavigate();
-    }
-  }, [logout, variant, closeUserMenu, onNavigate]);
-
-  // Prepare menu items
-  const menuItems = React.useMemo<MenuItem[]>(() => {
-    const items: MenuItem[] = [];
-
-    // Profile
-    items.push({
-      id: 'profile',
-      type: 'link',
-      icon: <Settings className="size-4" />,
-      label: 'Profile',
-      href: profilePath,
-      variant: 'ghost',
-    });
-
-    // Logout
-    items.push({
-      id: 'logout',
-      type: 'button',
-      icon: <LogOut className="size-4" />,
-      label: 'Sign out',
-      onClick: handleLogout,
-      variant: 'ghost',
-      className: 'text-destructive hover:text-destructive hover:bg-destructive/10',
-    });
-
-    return items;
-  }, [profilePath, handleLogout]);
-
-  // === UNIFIED MENU ITEM RENDERER ===
-
-  /**
-   * Renders a single menu item (link or button)
-   * Used for both desktop dropdown and mobile icons
-   */
-  const renderMenuItem = React.useCallback((
-    item: MenuItem,
-    mode: 'desktop' | 'mobile-icon',
-    onClick?: () => void
-  ) => {
-    if (mode === 'mobile-icon') {
-      // Mobile: render as icon-only button
-      const iconElement = item.icon as React.ReactElement;
-      const resizedIcon = React.isValidElement(iconElement)
-        ? React.cloneElement(iconElement, { className: 'h-5 w-5' } as any)
-        : iconElement;
-
-      if (item.type === 'link' && item.href) {
-        return (
-          <ButtonLink
-            key={item.id}
-            href={item.href}
-            variant={item.variant as any}
-            size="icon"
-            className="h-9 w-9"
-            onClick={onClick}
-            aria-label={item.label}
-          >
-            {resizedIcon}
-          </ButtonLink>
-        );
-      }
-
-      return (
-        <Button
-          key={item.id}
-          onClick={item.onClick}
-          variant={item.variant as any}
-          size="icon"
-          className={`h-9 w-9 ${item.className || ''}`}
-          aria-label={item.label}
-        >
-          {resizedIcon}
-        </Button>
-      );
-    }
-
-    // Desktop: render with text and icon
-    const baseClassName = `w-full justify-start gap-2 ${item.className || ''}`;
-
-    if (item.type === 'link' && item.href) {
-      return (
-        <ButtonLink
-          key={item.id}
-          href={item.href}
-          variant={item.variant as any}
-          size="sm"
-          className={baseClassName}
-          onClick={onClick}
-        >
-          {item.icon}
-          {item.label}
-        </ButtonLink>
-      );
-    }
-
-    return (
-      <Button
-        key={item.id}
-        onClick={item.onClick}
-        variant={item.variant as any}
-        size="sm"
-        className={baseClassName}
-      >
-        {item.icon}
-        {item.label}
-      </Button>
-    );
-  }, []);
-
-  // === RENDERING ===
-
-  // Desktop variant
-  if (variant === 'desktop') {
-    // Show loading state during hydration
-    if (!mounted) {
-      return (
-        <div className="flex items-center gap-3">
-          <div className="h-9 w-20 animate-pulse bg-muted rounded-sm" />
-        </div>
-      );
-    }
-
-    return (
-      <div className="flex items-center gap-3">
-        {isAuthenticated ? (
-          <div className="flex items-center gap-3">
-            {/* Dashboard button (only if not on dashboard) */}
-            {dashboardPath && !isDashboard && (
-              <ButtonLink
-                href={dashboardPath}
-                variant="default"
-                size="sm"
-                className="gap-2"
-              >
-                <Crown className="size-4" />
-                Dashboard
-              </ButtonLink>
-            )}
-
-            {/* User Dropdown */}
-            <div className="relative">
-              <button
-                className="flex items-center gap-2 px-2 py-1.5 rounded-sm text-sm font-medium transition-colors text-foreground hover:text-primary hover:bg-accent/50 cursor-pointer"
-                onClick={toggleUserMenu}
-                aria-haspopup="true"
-                aria-expanded={userMenuOpen}
-              >
-                <Avatar className="h-7 w-7 ring-1 ring-primary/20">
-                  <AvatarImage
-                    src={userAvatar}
-                    alt={displayName}
-                  />
-                  <AvatarFallback className="bg-primary/10 text-primary text-xs">
-                    {userInitial}
-                  </AvatarFallback>
-                </Avatar>
-                <span className="max-w-[120px] truncate">
-                  {displayName}
-                </span>
-                <ChevronDown
-                  className={`size-4 transition-transform ${
-                    userMenuOpen ? 'rotate-180' : ''
-                  }`}
-                />
-              </button>
-
-              {userMenuOpen && (
-                <>
-                  {/* Backdrop */}
-                  <div
-                    className="fixed inset-0 z-9995 bg-transparent"
-                    onClick={closeUserMenu}
-                    aria-hidden="true"
-                    style={{ cursor: 'default' }}
-                  />
-                  {/* Dropdown */}
-                  <div
-                    className="absolute top-full right-0 mt-2 w-52 rounded-sm shadow-sm backdrop-blur-xl z-9996 bg-popover border border-border"
-                    role="menu"
-                    aria-label="User menu"
-                  >
-                    <div className="p-2">
-                      {/* User info */}
-                      <div className="px-3 py-2 text-sm mb-2 border-b border-border">
-                        <div className="text-muted-foreground">Signed in as:</div>
-                        <div className="font-medium truncate text-popover-foreground mt-1">
-                          {userEmail}
-                        </div>
-                      </div>
-
-                      {/* Menu items - unified rendering */}
-                      {menuItems.map((item) => renderMenuItem(item, 'desktop', closeUserMenu))}
-                    </div>
-                  </div>
-                </>
-              )}
-            </div>
-          </div>
-        ) : (
-          /* Guest - Sign in button */
-          <ButtonLink href={routes.auth} variant="default" size="sm" className="h-9 gap-1.5">
-            <User className="w-4 h-4" />
-            Sign In
-          </ButtonLink>
-        )}
-      </div>
-    );
-  }
-
-  // Mobile variant
-  // Show loading state during hydration
-  if (!mounted) {
-    return (
-      <Card className="border-border !bg-accent/50">
-        <CardContent className="p-4">
-          <div className="h-24 animate-pulse bg-muted rounded-sm" />
-        </CardContent>
-      </Card>
-    );
-  }
-
-  if (isAuthenticated) {
-    return (
-      <Card className="border-primary/20 shadow-lg !bg-accent/50">
-        <CardContent className="p-4">
-          {/* User Info Header */}
-          <div className="flex items-center gap-3 mb-4 p-3 rounded-sm border border-border bg-accent/70">
-            <div className="w-10 h-10 rounded-full flex items-center justify-center bg-primary flex-shrink-0 overflow-hidden relative">
-              {userAvatar ? (
-                <img
-                  src={userAvatar}
-                  alt={displayName}
-                  className="w-10 h-10 rounded-full object-cover"
-                />
-              ) : (
-                <User className="w-5 h-5 text-primary-foreground" />
-              )}
-              {/* Active indicator */}
-              <div className="absolute -bottom-0.5 -right-0.5 size-3 rounded-full bg-green-500 border-2 border-background" />
-            </div>
-            <div className="flex-1 min-w-0">
-              <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                Signed in as
-              </p>
-              <p className="text-sm font-semibold truncate text-foreground">
-                {displayName}
-              </p>
-            </div>
-          </div>
-
-          {/* Action Buttons */}
-          <div className="space-y-3">
-            {/* Dashboard link */}
-            {dashboardPath && (
-              <ButtonLink
-                href={dashboardPath}
-                variant="default"
-                size="sm"
-                className="w-full h-9 gap-2"
-                onClick={onNavigate}
-              >
-                <Crown className="size-4" />
-                Dashboard
-              </ButtonLink>
-            )}
-
-            {/* Quick Actions - Icons only - unified rendering */}
-            <div className="flex items-center justify-center gap-2 pt-3 mt-1 border-t border-border/30">
-              {menuItems.map((item) => renderMenuItem(item, 'mobile-icon', onNavigate))}
-
-              {/* Theme Toggle */}
-              <ThemeToggle />
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    );
-  }
-
-  // Mobile Guest Card
-  return (
-    <Card className="border-border !bg-accent/50">
-      <CardContent className="p-4">
-        <div className="text-center space-y-4">
-          <div className="w-12 h-12 rounded-full flex items-center justify-center mx-auto bg-muted">
-            <User className="w-6 h-6 text-muted-foreground" />
-          </div>
-          <div>
-            <p className="text-sm font-medium mb-1 text-foreground">Welcome!</p>
-            <p className="text-xs text-muted-foreground">
-              Sign in to access your dashboard
-            </p>
-          </div>
-          <ButtonLink
-            href={routes.auth}
-            variant="default"
-            size="default"
-            className="w-full gap-2"
-            onClick={onNavigate}
-          >
-            <User className="w-5 h-5" />
-            Sign In
-          </ButtonLink>
-
-          {/* Theme toggle */}
-          <div className="flex justify-center pt-2 border-t border-border/30">
-            <ThemeToggle />
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}

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

@@ -1,11 +0,0 @@
-/**
- * Components Module
- */
-
-export { default as Seo } from './Seo';
-export { default as PageProgress } from './PageProgress';
-export { ErrorBoundary } from './ErrorBoundary';
-export { UpdateNotifier } from './UpdateNotifier';
-export { UserMenu } from './UserMenu';
-export type { UpdateNotifierProps } from './UpdateNotifier';
-export type { UserMenuProps } from './UserMenu';