@djangocfg/layouts 2.0.4 → 2.0.6

package/README.md

@@ -254,41 +254,89 @@ import { ChatWidget, ChatUIProvider, useChatUI } from '@djangocfg/layouts/snippe
 
 ## Components
 
-Utility components for common use cases.
+Utility components organized by category.
+
+### Core Components
 
 ```tsx
 import { 
-  ErrorBoundary, 
-  PageProgress, 
   JsonLd, 
-  LucideIcon 
-} from '@djangocfg/layouts/components';
+  LucideIcon,
+  PageProgress,
+  Suspense
+} from '@djangocfg/layouts/components/core';
 ```
 
 | Component | Description |
 |-----------|-------------|
-| `ErrorBoundary` | React error boundary component |
-| `PageProgress` | Page loading progress indicator |
 | `JsonLd` | JSON-LD structured data component |
 | `LucideIcon` | Lucide icon wrapper component |
+| `PageProgress` | Page loading progress indicator |
+| `Suspense` | Suspense wrapper component |
 
-## Validation
-
-Error tracking and validation utilities.
+### Error Components
 
 ```tsx
 import { 
-  ErrorTrackingProvider, 
-  useErrors,
-  ErrorButtons,
-  ErrorToast
-} from '@djangocfg/layouts/validation';
+  ErrorBoundary,
+  ErrorLayout,
+  getErrorContent,
+  ERROR_CODES
+} from '@djangocfg/layouts/components/errors';
+```
+
+| Component | Description |
+|-----------|-------------|
+| `ErrorBoundary` | React error boundary component |
+| `ErrorLayout` | Reusable error page layout (404, 500, etc.) |
+| `getErrorContent` | Get error content by status code |
+| `ERROR_CODES` | Common HTTP error code constants |
+
+**ErrorLayout Usage:**
+
+```tsx
+// app/not-found.tsx
+import { ErrorLayout } from '@djangocfg/layouts/components/errors';
+
+export default function NotFound() {
+  return <ErrorLayout code={404} supportEmail="support@example.com" />;
+}
+
+// app/error.tsx
+'use client';
+import { ErrorLayout } from '@djangocfg/layouts/components/errors';
+
+export default function Error({ error, reset }) {
+  return <ErrorLayout code={500} supportEmail="support@example.com" />;
+}
+```
+
+### Redirect Component
+
+```tsx
+import { RedirectPage } from '@djangocfg/layouts/components/RedirectPage';
+
+// app/page.tsx
+export default function Page() {
+  return (
+    <RedirectPage
+      authenticatedPath="/dashboard"
+      unauthenticatedPath="/auth"
+      loadingText="Loading..."
+    />
+  );
+}
 ```
 
 ### Error Tracking
 
 ```tsx
-import { ErrorTrackingProvider, useErrors } from '@djangocfg/layouts/validation';
+import { 
+  ErrorTrackingProvider, 
+  useErrors,
+  ErrorButtons,
+  ErrorToast
+} from '@djangocfg/layouts/components/errors/ErrorsTracker';
 
 <ErrorTrackingProvider>
   <YourApp />
@@ -298,6 +346,76 @@ import { ErrorTrackingProvider, useErrors } from '@djangocfg/layouts/validation'
 const { addError, clearErrors, errors } = useErrors();
 ```
 
+### Update Notifier
+
+```tsx
+import { UpdateNotifier } from '@djangocfg/layouts/components/UpdateNotifier';
+
+<UpdateNotifier />
+```
+
+## Pages
+
+Ready-to-use page components.
+
+### Legal Pages
+
+Pre-built legal page components with default configurations.
+
+```tsx
+import { 
+  PrivacyPage, 
+  TermsPage, 
+  CookiesPage, 
+  SecurityPage 
+} from '@djangocfg/layouts/pages/legal';
+
+// app/legal/privacy/page.tsx
+export default PrivacyPage;
+
+// Or customize
+import { PrivacyPage, privacyConfig } from '@djangocfg/layouts/pages/legal';
+
+export default function CustomPrivacy() {
+  return <PrivacyPage config={{
+    ...privacyConfig,
+    lastUpdated: '2024-01-01',
+  }} />;
+}
+```
+
+| Page | Description |
+|------|-------------|
+| `PrivacyPage` | Privacy policy page |
+| `TermsPage` | Terms of service page |
+| `CookiesPage` | Cookie policy page |
+| `SecurityPage` | Security policy page |
+
+## Utils
+
+Utility functions and helpers.
+
+```tsx
+import { 
+  generateOgImageUrl,
+  getAbsoluteOgImageUrl,
+  createOgImageUrlBuilder
+} from '@djangocfg/layouts/utils/og-image';
+
+// Generate OG image URL
+const ogUrl = generateOgImageUrl('/api/og', {
+  title: 'My Page',
+  description: 'Page description',
+  siteName: 'My Site',
+});
+```
+
+| Utility | Description |
+|---------|-------------|
+| `generateOgImageUrl` | Generate OG image URL with base64 encoding |
+| `getAbsoluteOgImageUrl` | Get absolute OG image URL |
+| `createOgImageUrlBuilder` | Create OG image URL builder with defaults |
+
 ## Exports
 
 | Path | Content |
@@ -308,10 +426,10 @@ const { addError, clearErrors, errors } = useErrors();
 | `@djangocfg/layouts/auth/context` | Auth context only |
 | `@djangocfg/layouts/auth/hooks` | Auth hooks only |
 | `@djangocfg/layouts/snippets` | Reusable components + Analytics |
-| `@djangocfg/layouts/components` | Utility components |
-| `@djangocfg/layouts/validation` | Validation & error tracking |
-| `@djangocfg/layouts/utils` | Utilities |
-| `@djangocfg/layouts/types` | TypeScript types |
+| `@djangocfg/layouts/components` | All utility components |
+| `@djangocfg/layouts/pages` | Page components (legal pages) |
+| `@djangocfg/layouts/pages/legal` | Legal page components |
+| `@djangocfg/layouts/utils` | Utilities (og-image, logger) |
 | `@djangocfg/layouts/styles` | CSS |
 | `@djangocfg/layouts/styles/dashboard` | Dashboard-specific CSS |
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -64,6 +64,21 @@
       "import": "./src/utils/index.ts",
       "default": "./src/utils/index.ts"
     },
+    "./components": {
+      "types": "./src/components/index.ts",
+      "import": "./src/components/index.ts",
+      "default": "./src/components/index.ts"
+    },
+    "./pages": {
+      "types": "./src/pages/index.ts",
+      "import": "./src/pages/index.ts",
+      "default": "./src/pages/index.ts"
+    },
+    "./contexts": {
+      "types": "./src/contexts/index.ts",
+      "import": "./src/contexts/index.ts",
+      "default": "./src/contexts/index.ts"
+    },
     "./styles": "./src/styles/index.css",
     "./styles/dashboard": "./src/styles/dashboard.css"
   },
@@ -77,9 +92,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.4.34",
-    "@djangocfg/centrifugo": "^1.4.34",
-    "@djangocfg/ui": "^1.4.34",
+    "@djangocfg/api": "^1.4.36",
+    "@djangocfg/centrifugo": "^1.4.36",
+    "@djangocfg/ui": "^1.4.36",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.468.0",
@@ -98,7 +113,7 @@
     "react-ga4": "^2.1.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.4.34",
+    "@djangocfg/typescript-config": "^1.4.36",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/components/RedirectPage/RedirectPage.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useAuth } from '../../auth';
+import { useRouter } from '@djangocfg/ui/hooks';
+import { Preloader } from '@djangocfg/ui/components';
+
+export interface RedirectPageProps {
+  /**
+   * Path to redirect to when user is authenticated
+   * @default '/private'
+   */
+  authenticatedPath?: string;
+  /**
+   * Path to redirect to when user is not authenticated
+   * @default '/auth'
+   */
+  unauthenticatedPath?: string;
+  /**
+   * Custom loading text
+   * @default 'Loading...'
+   */
+  loadingText?: string;
+}
+
+/**
+ * RedirectPage - Root page component that handles authentication redirect
+ *
+ * Redirects authenticated users to authenticatedPath, otherwise to unauthenticatedPath
+ *
+ * Usage:
+ * ```tsx
+ * // app/page.tsx
+ * import { RedirectPage } from '@djangocfg/layouts/components';
+ *
+ * export default function Page() {
+ *   return (
+ *     <RedirectPage
+ *       authenticatedPath="/private"
+ *       unauthenticatedPath="/auth"
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export function RedirectPage({
+  authenticatedPath = '/private',
+  unauthenticatedPath = '/auth',
+  loadingText = 'Loading...',
+}: RedirectPageProps) {
+  const { isAuthenticated } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      router.push(unauthenticatedPath);
+    } else {
+      router.push(authenticatedPath);
+    }
+  }, [isAuthenticated, router, authenticatedPath, unauthenticatedPath]);
+
+  return (
+    <Preloader
+      variant="fullscreen"
+      text={loadingText}
+      size="lg"
+    />
+  );
+}
+

package/src/components/RedirectPage/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Redirect component exports
+ */
+
+export { RedirectPage } from './RedirectPage';
+export type { RedirectPageProps } from './RedirectPage';
+

package/src/components/core/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Core 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/components/errors/ErrorLayout.tsx

@@ -0,0 +1,228 @@
+/**
+ * ErrorLayout - Universal Error Display
+ *
+ * Minimalist error page with customizable content
+ * Works with Next.js error pages (404.tsx, 500.tsx, error.tsx)
+ *
+ * Usage:
+ * ```tsx
+ * // app/not-found.tsx
+ * import { ErrorLayout } from '@djangocfg/layouts/components';
+ *
+ * export default function NotFound() {
+ *   return <ErrorLayout code={404} supportEmail={settings.contact.email} />;
+ * }
+ * ```
+ */
+
+'use client';
+
+import React from 'react';
+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;
+}
+
+// Local function to select the icon based on the code. 
+// This is safe as it's defined and used inside a Client Component.
+function getErrorIcon(code?: string | number): React.ReactNode {
+  const c = code ? String(code) : '';
+  
+  // NOTE: You can replace these SVG paths with imported Lucid Icons 
+  // (e.g., <AlertTriangle />) if you prefer.
+  switch (c) {
+    case '404':
+      return (
+        <svg
+          className="w-24 h-24 mx-auto text-muted-foreground/50"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          {/* Missing Page Icon */}
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.5}
+            d="M9.343 3.07a7.227 7.227 0 0111.558 0c.806.515 1.393 1.39 1.393 2.37v6.636c0 .98-.587 1.855-1.393 2.37a7.227 7.227 0 01-11.558 0c-.806-.515-1.393-1.39-1.393-2.37V5.44c0-.98.587-1.855 1.393-2.37zM12 13a1 1 0 100-2 1 1 0 000 2z"
+          />
+        </svg>
+      );
+    case '500':
+      return (
+        <svg
+          className="w-24 h-24 mx-auto text-muted-foreground/50"
+          fill="none"
+          stroke="currentColor"
+          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"
+          />
+        </svg>
+      );
+    case '403':
+      return (
+        <svg
+          className="w-24 h-24 mx-auto text-muted-foreground/50"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          {/* Forbidden Icon */}
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.5}
+            d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+          />
+        </svg>
+      );
+    default:
+      return null;
+  }
+}
+
+/**
+ * ErrorLayout Component
+ */
+export function ErrorLayout({
+  code,
+  title,
+  description,
+  actions,
+  showDefaultActions = true,
+  illustration,
+  supportEmail = 'support@example.com',
+}: ErrorLayoutProps) {
+  
+  // Get content (Title/Description) from config. Note: Illustration check removed.
+  // The function getErrorContent MUST NOT return React components/functions.
+  const autoContent = code && (!title || !description)
+    ? getErrorContent(code)
+    : null;
+
+  // Fallback to auto-generated values
+  const finalTitle = title || autoContent?.title || 'Error';
+  const finalDescription = description || autoContent?.description;
+  
+  // ILLUSTRATION FIX: Use passed prop OR compute the icon locally using getErrorIcon.
+  const finalIllustration = illustration ?? getErrorIcon(code);
+
+
+  const handleGoBack = () => {
+    if (document.referrer && document.referrer !== window.location.href) {
+      window.location.href = document.referrer;
+    } else if (window.history.length > 1) {
+      window.history.back();
+    } else {
+      window.location.href = '/';
+    }
+  };
+
+  const handleGoHome = () => {
+    window.location.href = '/';
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center px-4 bg-background">
+      <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}
+                style={{ minWidth: '140px', padding: '12px 32px' }}
+              >
+                Go Back
+              </Button>
+              <Button
+                variant="default"
+                size="lg"
+                onClick={handleGoHome}
+                style={{ minWidth: '140px', padding: '12px 32px' }}
+              >
+                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/components/errors/errorConfig.ts

@@ -0,0 +1,118 @@
+/**
+ * Universal Error Configuration
+ *
+ * Provides standard error content for common HTTP status codes
+ * Use this to maintain consistency across error pages
+ *
+ * NOTE: Only returns primitives (title, description) - NO React components
+ * This ensures safe serialization during prerendering
+ */
+
+export interface ErrorContent {
+  title: string;
+  description: string;
+}
+
+/**
+ * Get standardized error content based on status code
+ *
+ * @param statusCode - HTTP status code or custom error type
+ * @returns Error content configuration (title and description only)
+ *
+ * @example
+ * ```tsx
+ * const { title, description } = getErrorContent(404);
+ * <ErrorLayout title={title} description={description} code={404} />
+ * ```
+ */
+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.',
+      };
+
+    // 401 Unauthorized
+    case 401:
+      return {
+        title: 'Authentication Required',
+        description: 'You need to sign in to access this page.',
+      };
+
+    // 403 Forbidden
+    case 403:
+      return {
+        title: 'Access Denied',
+        description: "You don't have permission to access this resource.",
+      };
+
+    // 404 Not Found
+    case 404:
+      return {
+        title: 'Page Not Found',
+        description: "The page you're looking for doesn't exist or has been moved.",
+      };
+
+    // 408 Request Timeout
+    case 408:
+      return {
+        title: 'Request Timeout',
+        description: 'The request took too long to process. Please try again.',
+      };
+
+    // 500 Internal Server Error
+    case 500:
+      return {
+        title: 'Server Error',
+        description: "Something went wrong on our end. We're working to fix it.",
+      };
+
+    // 502 Bad Gateway
+    case 502:
+      return {
+        title: 'Bad Gateway',
+        description: 'The server received an invalid response. Please try again later.',
+      };
+
+    // 503 Service Unavailable
+    case 503:
+      return {
+        title: 'Service Unavailable',
+        description: 'The service is temporarily unavailable. Please try again later.',
+      };
+
+    // 504 Gateway Timeout
+    case 504:
+      return {
+        title: 'Gateway Timeout',
+        description: 'The server took too long to respond. Please try again.',
+      };
+
+    // Default / Unknown Error
+    default:
+      return {
+        title: 'Something Went Wrong',
+        description: 'An unexpected error occurred. Please try again or contact support.',
+      };
+  }
+}
+
+/**
+ * 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;
+

package/src/components/errors/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Error components exports
+ */
+
+export { ErrorBoundary } from './ErrorBoundary';
+export { ErrorLayout } from './ErrorLayout';
+export type { ErrorLayoutProps } from './ErrorLayout';
+export { getErrorContent, ERROR_CODES } from './errorConfig';
+export type { ErrorContent } from './errorConfig';
+