@djangocfg/layouts 1.0.6 → 1.1.0

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

@@ -9,15 +9,12 @@
 
 import React from 'react';
 import Link from 'next/link';
-import { Menu } from 'lucide-react';
+import { Menu, ChevronDown } from 'lucide-react';
 import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
 } from '@djangocfg/ui/components';
 import { ThemeToggle } from '@djangocfg/ui/theme';
 import { cn } from '@djangocfg/ui/lib';
@@ -45,15 +42,16 @@ export function Navigation() {
   const { user, isAuthenticated, logout } = useAuth();
   const { isActive } = useNavigation();
   const isMobile = useIsMobile();
+  const [openDropdown, setOpenDropdown] = React.useState<string | null>(null);
 
   const { app, publicLayout } = config;
 
   return (
-    <nav className="sticky top-0 w-full border-b backdrop-blur-xl z-[100] bg-background/80 border-border/30">
+    <nav className="sticky top-0 w-full border-b backdrop-blur-xl z-10 bg-background/80 border-border/30">
       <div className="w-full px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between h-16">
           {/* Left side - Logo and Navigation Menu */}
-          <div className="flex items-center gap-6 flex-1">
+          <div className="flex items-center gap-6">
             {/* Logo */}
             <Link
               href={publicLayout.navigation.homePath}
@@ -69,11 +67,9 @@ export function Navigation() {
               </span>
             </Link>
 
-            {/* Desktop Navigation Menu using @djangocfg/ui NavigationMenu */}
+            {/* Desktop Navigation Menu */}
             {!isMobile && (
-            <div>
-              <NavigationMenu>
-              <NavigationMenuList>
+              <div className="flex items-center gap-1">
                 {publicLayout.navigation.menuSections.map((section) => {
                   // Single item section - render as direct link
                   if (section.items.length === 1) {
@@ -81,53 +77,69 @@ export function Navigation() {
                     if (!item) return null;
 
                     return (
-                      <NavigationMenuItem key={section.title}>
-                        <NavigationMenuLink asChild>
-                          <Link
-                            href={item.path}
-                            className={cn(
-                              navigationMenuTriggerStyle(),
-                              isActive(item.path) && 'bg-accent text-accent-foreground'
-                            )}
-                          >
-                            {item.label}
-                          </Link>
-                        </NavigationMenuLink>
-                      </NavigationMenuItem>
+                      <Link
+                        key={section.title}
+                        href={item.path}
+                        className={cn(
+                          'inline-flex h-9 items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50',
+                          isActive(item.path) && 'bg-accent text-accent-foreground'
+                        )}
+                      >
+                        {item.label}
+                      </Link>
                     );
                   }
 
                   // Multiple items - render as dropdown menu
                   return (
-                    <NavigationMenuItem key={section.title}>
-                      <NavigationMenuTrigger>{section.title}</NavigationMenuTrigger>
-                      <NavigationMenuContent>
-                        <ul className="grid gap-3 p-4" style={{ width: '400px' }}>
+                    <div
+                      key={section.title}
+                      onMouseEnter={() => setOpenDropdown(section.title)}
+                      onMouseLeave={() => setOpenDropdown(null)}
+                    >
+                      <DropdownMenu
+                        open={openDropdown === section.title}
+                        onOpenChange={(open) => setOpenDropdown(open ? section.title : null)}
+                        modal={false}
+                      >
+                        <DropdownMenuTrigger
+                          className={cn(
+                            "inline-flex h-9 items-center justify-center gap-1 rounded-md px-4 py-2 text-sm font-medium transition-colors focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50",
+                            openDropdown === section.title ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
+                          )}
+                        >
+                          {section.title}
+                          <ChevronDown className="h-3 w-3 transition-transform duration-200 group-data-[state=open]:rotate-180" />
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent
+                          align="start"
+                          sideOffset={0}
+                          className="p-2"
+                          style={{
+                            minWidth: '250px',
+                            backdropFilter: 'blur(24px)',
+                            WebkitBackdropFilter: 'blur(24px)'
+                          }}
+                        >
                           {section.items.map((item) => (
-                            <li key={item.path}>
-                              <NavigationMenuLink asChild>
-                                <Link
-                                  href={item.path}
-                                  className={cn(
-                                    'block select-none rounded-md p-3 leading-none no-underline outline-none transition-colors whitespace-nowrap hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
-                                    isActive(item.path) && 'bg-accent/50'
-                                  )}
-                                >
-                                  <div className="text-sm font-medium leading-none">
-                                    {item.label}
-                                  </div>
-                                </Link>
-                              </NavigationMenuLink>
-                            </li>
+                            <DropdownMenuItem key={item.path} asChild>
+                              <Link
+                                href={item.path}
+                                className={cn(
+                                  'cursor-pointer w-full hover:bg-accent hover:text-accent-foreground transition-colors text-base px-4 py-3 rounded-md',
+                                  isActive(item.path) && 'bg-accent/50'
+                                )}
+                              >
+                                {item.label}
+                              </Link>
+                            </DropdownMenuItem>
                           ))}
-                        </ul>
-                      </NavigationMenuContent>
-                    </NavigationMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
                   );
                 })}
-              </NavigationMenuList>
-              </NavigationMenu>
-            </div>
+              </div>
             )}
           </div>
 

package/src/layouts/AppLayout/types/config.ts

@@ -37,4 +37,26 @@ export interface AppLayoutConfig {
 
   /** Private layout configuration */
   privateLayout: PrivateLayoutConfig;
+
+  /** Error handling configuration */
+  errors?: {
+    /** Enable automatic error boundary (default: true) */
+    enableErrorBoundary?: boolean;
+    /** Support email for error pages */
+    supportEmail?: string;
+    /** Custom error handler callback */
+    onError?: (error: Error, errorInfo?: React.ErrorInfo) => void;
+  };
+
+  /** Auth configuration */
+  auth?: {
+    /** Terms of Service URL */
+    termsUrl?: string;
+    /** Privacy Policy URL */
+    privacyUrl?: string;
+    /** Support URL for auth help */
+    supportUrl?: string;
+    /** Enable phone authentication (default: false) */
+    enablePhoneAuth?: boolean;
+  };
 }

package/src/layouts/ErrorLayout/ErrorLayout.tsx

@@ -0,0 +1,169 @@
+/**
+ * ErrorLayout - Universal Error Display
+ *
+ * Minimalist error page with customizable content
+ * Works with Next.js error pages (404.tsx, 500.tsx, error.tsx)
+ *
+ * Usage:
+ * ```tsx
+ * // pages/404.tsx
+ * import { ErrorLayout } from '@djangocfg/layouts/AppLayout';
+ *
+ * export default function NotFound() {
+ *   return (
+ *     <ErrorLayout
+ *       code="404"
+ *       title="Page Not Found"
+ *       description="The page you're looking for doesn't exist."
+ *     />
+ *   );
+ * }
+ * ```
+ */
+
+'use client';
+
+import React from 'react';
+import { useRouter } from 'next/router';
+import { Button } from '@djangocfg/ui/components';
+import { getErrorContent } from './errorConfig';
+
+export interface ErrorLayoutProps {
+  /** Error code (e.g., "404", "500", "403") - if provided, auto-configures title/description/icon */
+  code?: string | number;
+  /** Error title (auto-generated from code if not provided) */
+  title?: string;
+  /** Error description (auto-generated from code if not provided) */
+  description?: string;
+  /** Custom action buttons */
+  actions?: React.ReactNode;
+  /** Show default actions (back, home) */
+  showDefaultActions?: boolean;
+  /** Custom illustration/icon (auto-generated from code if not provided) */
+  illustration?: React.ReactNode;
+  /** Support email for contact link */
+  supportEmail?: string;
+}
+
+/**
+ * ErrorLayout Component
+ *
+ * Clean, minimal error display with semantic colors
+ * Standalone layout - doesn't depend on AppLayout context
+ *
+ * Smart auto-configuration:
+ * - Pass only `code` prop and everything is configured automatically
+ * - Or override with custom title/description/illustration
+ */
+export function ErrorLayout({
+  code,
+  title,
+  description,
+  actions,
+  showDefaultActions = true,
+  illustration,
+  supportEmail = 'support@example.com',
+}: ErrorLayoutProps) {
+  const router = useRouter();
+
+  // Auto-configure content from error code if not provided
+  const autoContent = code && (!title || !description || !illustration)
+    ? getErrorContent(code)
+    : null;
+
+  // Use provided values or fall back to auto-generated
+  const finalTitle = title || autoContent?.title || 'Error';
+  const finalDescription = description || autoContent?.description;
+  const finalIllustration = illustration || autoContent?.icon;
+
+  const handleGoBack = () => {
+    if (window.history.length > 1) {
+      router.back();
+    } else {
+      router.push('/');
+    }
+  };
+
+  const handleGoHome = () => {
+    router.push('/');
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center px-4">
+      <div className="max-w-2xl w-full text-center space-y-8">
+        {/* Error Code */}
+        {code && (
+          <div className="relative">
+            <h1
+              className="text-[12rem] font-bold leading-none text-muted/20 select-none"
+              aria-hidden="true"
+            >
+              {code}
+            </h1>
+          </div>
+        )}
+
+        {/* Illustration */}
+        {finalIllustration && (
+          <div className="flex justify-center py-8">
+            {finalIllustration}
+          </div>
+        )}
+
+        {/* Error Content */}
+        <div className="space-y-4">
+          <h2 className="text-4xl font-bold text-foreground">
+            {finalTitle}
+          </h2>
+
+          {finalDescription && (
+            <p className="text-lg text-muted-foreground max-w-md mx-auto">
+              {finalDescription}
+            </p>
+          )}
+        </div>
+
+        {/* Actions */}
+        <div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4">
+          {/* Custom actions */}
+          {actions}
+
+          {/* Default actions */}
+          {showDefaultActions && !actions && (
+            <>
+              <Button
+                variant="outline"
+                size="lg"
+                onClick={handleGoBack}
+                className="min-w-[140px]"
+              >
+                Go Back
+              </Button>
+              <Button
+                variant="default"
+                size="lg"
+                onClick={handleGoHome}
+                className="min-w-[140px]"
+              >
+                Go Home
+              </Button>
+            </>
+          )}
+        </div>
+
+        {/* Additional Info */}
+        <div className="pt-8 text-sm text-muted-foreground">
+          <p>
+            Need help? Contact{' '}
+            <a
+              href={`mailto:${supportEmail}`}
+              className="text-primary hover:underline"
+            >
+              support
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/layouts/ErrorLayout/errorConfig.tsx

@@ -0,0 +1,152 @@
+/**
+ * Universal Error Configuration
+ *
+ * Provides standard error content for common HTTP status codes
+ * Use this to maintain consistency across error pages
+ */
+
+import React from 'react';
+import { FileQuestion, ServerCrash, ShieldAlert, Clock, AlertTriangle, Ban } from 'lucide-react';
+
+export interface ErrorContent {
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+}
+
+/**
+ * Get standardized error content based on status code
+ *
+ * @param statusCode - HTTP status code or custom error type
+ * @returns Error content configuration
+ *
+ * @example
+ * ```tsx
+ * const { title, description, icon } = getErrorContent(404);
+ * <ErrorLayout title={title} description={description} illustration={icon} />
+ * ```
+ */
+export function getErrorContent(statusCode?: number | string): ErrorContent {
+  const code = typeof statusCode === 'string' ? parseInt(statusCode, 10) : statusCode;
+
+  switch (code) {
+    // 400 Bad Request
+    case 400:
+      return {
+        title: 'Bad Request',
+        description: 'The request could not be understood. Please check your input and try again.',
+        icon: <AlertTriangle className="w-24 h-24 text-warning/50" strokeWidth={1.5} />,
+      };
+
+    // 401 Unauthorized
+    case 401:
+      return {
+        title: 'Authentication Required',
+        description: 'You need to sign in to access this page.',
+        icon: <ShieldAlert className="w-24 h-24 text-warning/50" strokeWidth={1.5} />,
+      };
+
+    // 403 Forbidden
+    case 403:
+      return {
+        title: 'Access Denied',
+        description: "You don't have permission to access this resource.",
+        icon: <Ban className="w-24 h-24 text-destructive/50" strokeWidth={1.5} />,
+      };
+
+    // 404 Not Found
+    case 404:
+      return {
+        title: 'Page Not Found',
+        description: "The page you're looking for doesn't exist or has been moved.",
+        icon: <FileQuestion className="w-24 h-24 text-muted-foreground/50" strokeWidth={1.5} />,
+      };
+
+    // 408 Request Timeout
+    case 408:
+      return {
+        title: 'Request Timeout',
+        description: 'The request took too long to process. Please try again.',
+        icon: <Clock className="w-24 h-24 text-warning/50" strokeWidth={1.5} />,
+      };
+
+    // 500 Internal Server Error
+    case 500:
+      return {
+        title: 'Server Error',
+        description: "Something went wrong on our end. We're working to fix it.",
+        icon: <ServerCrash className="w-24 h-24 text-destructive/50" strokeWidth={1.5} />,
+      };
+
+    // 502 Bad Gateway
+    case 502:
+      return {
+        title: 'Bad Gateway',
+        description: 'The server received an invalid response. Please try again later.',
+        icon: <ServerCrash className="w-24 h-24 text-destructive/50" strokeWidth={1.5} />,
+      };
+
+    // 503 Service Unavailable
+    case 503:
+      return {
+        title: 'Service Unavailable',
+        description: 'The service is temporarily unavailable. Please try again later.',
+        icon: <ServerCrash className="w-24 h-24 text-destructive/50" strokeWidth={1.5} />,
+      };
+
+    // 504 Gateway Timeout
+    case 504:
+      return {
+        title: 'Gateway Timeout',
+        description: 'The server took too long to respond. Please try again.',
+        icon: <Clock className="w-24 h-24 text-warning/50" strokeWidth={1.5} />,
+      };
+
+    // Default / Unknown Error
+    default:
+      return {
+        title: 'Something Went Wrong',
+        description: 'An unexpected error occurred. Please try again or contact support.',
+        icon: <AlertTriangle className="w-24 h-24 text-warning/50" strokeWidth={1.5} />,
+      };
+  }
+}
+
+/**
+ * Common error codes as constants
+ */
+export const ERROR_CODES = {
+  BAD_REQUEST: 400,
+  UNAUTHORIZED: 401,
+  FORBIDDEN: 403,
+  NOT_FOUND: 404,
+  TIMEOUT: 408,
+  SERVER_ERROR: 500,
+  BAD_GATEWAY: 502,
+  SERVICE_UNAVAILABLE: 503,
+  GATEWAY_TIMEOUT: 504,
+} as const;
+
+/**
+ * Ready-to-use getInitialProps for Next.js _error.tsx page
+ *
+ * Extracts status code from response or error automatically
+ * Works for both server-side and client-side errors
+ *
+ * @example
+ * ```tsx
+ * // pages/_error.tsx
+ * import { ErrorLayout, errorPageGetInitialProps } from '@djangocfg/layouts';
+ *
+ * function ErrorPage({ statusCode }) {
+ *   return <ErrorLayout code={statusCode} />;
+ * }
+ *
+ * ErrorPage.getInitialProps = errorPageGetInitialProps;
+ * export default ErrorPage;
+ * ```
+ */
+export const errorPageGetInitialProps = ({ res, err }: any) => {
+  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
+  return { statusCode };
+};

package/src/layouts/ErrorLayout/index.ts

@@ -0,0 +1,8 @@
+/**
+ * ErrorLayout Module
+ */
+
+export { ErrorLayout } from './ErrorLayout';
+export type { ErrorLayoutProps } from './ErrorLayout';
+export { getErrorContent, ERROR_CODES, errorPageGetInitialProps } from './errorConfig';
+export type { ErrorContent } from './errorConfig';