@djangocfg/layouts 1.4.29 → 2.0.1

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

@@ -1,79 +0,0 @@
-/**
- * Configuration Types
- */
-
-import type { ReactNode } from 'react';
-import type { PublicLayoutConfig, PrivateLayoutConfig, AdminLayoutConfig } from './layout';
-import type { RouteConfig } from './routes';
-
-/**
- * Main AppLayout configuration
- */
-export interface AppLayoutConfig {
-  /** Application metadata */
-  app: {
-    name: string;
-    description?: string;
-    logoPath: string;
-    siteUrl?: string;
-    icons?: {
-      logo192?: string;
-      logo384?: string;
-      logo512?: string;
-      logoVector?: string;
-    };
-  };
-
-  /** Theme configuration */
-  theme?: {
-    /** Default theme (default: 'light') */
-    defaultTheme?: 'light' | 'dark';
-    /** Storage key for theme persistence (default: 'theme') */
-    storageKey?: string;
-  };
-
-  /** API configuration */
-  api: {
-    baseUrl: string;
-  };
-
-  /** Route configuration */
-  routes: RouteConfig;
-
-  /** Public layout configuration */
-  publicLayout: PublicLayoutConfig;
-
-  /** Private layout configuration */
-  privateLayout: PrivateLayoutConfig;
-
-  /** Admin layout configuration (optional) */
-  adminLayout?: AdminLayoutConfig;
-
-  /** 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;
-  };
-
-  /** Analytics configuration */
-  analytics?: {
-    /** Google Analytics Tracking ID (e.g., 'G-XXXXXXXXXX' or 'UA-XXXXXXXXX-X') */
-    googleTrackingId?: string;
-  };
-}

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

@@ -1,11 +0,0 @@
-/**
- * AppLayout Type Definitions
- *
- * All types for the unified AppLayout system
- */
-
-export * from './config';
-export * from './layout';
-export * from './navigation';
-export * from './routes';
-export * from './page';

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

@@ -1,54 +0,0 @@
-/**
- * Layout Configuration Types
- */
-
-import type { ReactNode } from 'react';
-import type { LucideIcon } from 'lucide-react';
-import type { NavigationSection, DashboardMenuGroup } from './navigation';
-
-/**
- * Public layout configuration
- */
-export interface PublicLayoutConfig {
-  navigation: {
-    homePath: string;
-    menuSections: NavigationSection[];
-  };
-  userMenu: {
-    dashboardPath?: string;
-    profilePath: string;
-  };
-  footer: {
-    badge: {
-      icon: LucideIcon;
-      text: string;
-    };
-    links: {
-      docs?: string;
-      privacy?: string;
-      terms?: string;
-      security?: string;
-      cookies?: string;
-    };
-    menuSections: NavigationSection[];
-  };
-}
-
-/**
- * Private/Dashboard layout configuration
- */
-export interface PrivateLayoutConfig {
-  homeHref: string;
-  profileHref: string;
-  showChat?: boolean;
-  menuGroups: DashboardMenuGroup[];
-  contentPadding?: 'default' | 'none';
-  headerActions?: ReactNode;
-}
-
-/**
- * Admin layout configuration
- */
-export interface AdminLayoutConfig {
-  menuSections: NavigationSection[];
-}

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

@@ -1,43 +0,0 @@
-/**
- * Navigation Types
- */
-
-import type { LucideIcon } from 'lucide-react';
-
-/**
- * Navigation menu item
- */
-export interface NavigationItem {
-  label: string;
-  path: string;
-  icon?: LucideIcon;
-  badge?: string | number;
-}
-
-/**
- * Navigation menu section
- */
-export interface NavigationSection {
-  title: string;
-  items: NavigationItem[];
-}
-
-/**
- * Dashboard menu item with icon
- */
-export interface DashboardMenuItem {
-  path: string;
-  label: string;
-  icon: LucideIcon;
-  badge?: string | number;
-  subItems?: DashboardMenuItem[]; // Support nested menu items
-}
-
-/**
- * Dashboard menu group
- */
-export interface DashboardMenuGroup {
-  label: string;
-  order: number;
-  items: DashboardMenuItem[];
-}

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

@@ -1,80 +0,0 @@
-/**
- * Page Type Definitions
- *
- * Universal types for Next.js pages with layout and SEO support
- */
-
-import type { ReactElement, ReactNode } from 'react';
-import type { NextPage } from 'next';
-import type { PageConfig } from '../../../types/pageConfig';
-
-/**
- * Layout mode types
- *
- * - 'public': Public layout (landing, docs, etc.)
- * - 'private': Private layout (dashboard, authenticated pages)
- * - 'auth': Auth layout (login, register, OTP)
- * - 'admin': Admin layout (Django CFG iframe integration)
- * - 'none': No layout (fully custom page)
- */
-export type LayoutMode = 'public' | 'private' | 'auth' | 'admin' | 'none';
-
-/**
- * Universal Page Type - combines layout and SEO configuration
- *
- * Extends NextPage with:
- * - Layout control (getLayout, layoutMode)
- * - SEO metadata (pageConfig)
- *
- * @example
- * ```tsx
- * // Custom layout using getLayout
- * const Page: PageWithLayout = () => <div>Content</div>;
- * Page.getLayout = (page) => <CustomLayout>{page}</CustomLayout>;
- *
- * // Force specific layout mode
- * const DashboardPage: PageWithLayout = () => <div>Dashboard</div>;
- * DashboardPage.layoutMode = 'private';
- *
- * // With SEO config
- * const HomePage: PageWithLayout = () => <div>Home</div>;
- * HomePage.pageConfig = {
- *   title: 'Home Page',
- *   description: 'Welcome to our site',
- *   ogImage: { title: 'Home', subtitle: 'Welcome' }
- * };
- *
- * // Disable all layouts
- * const LandingPage: PageWithLayout = () => <FullPageDesign />;
- * LandingPage.layoutMode = 'none';
- * ```
- */
-export type PageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
-  /**
-   * Custom layout function
-   * When provided, AppLayout will use this instead of automatic layout detection
-   *
-   * @param page - The page component wrapped in React element
-   * @returns Layout-wrapped page
-   */
-  getLayout?: (page: ReactElement) => ReactNode;
-
-  /**
-   * Force specific layout mode
-   * Overrides automatic route detection
-   *
-   * - undefined: Auto-detect based on route
-   * - 'public': Always use PublicLayout
-   * - 'private': Always use PrivateLayout
-   * - 'auth': Always use AuthLayout
-   * - 'admin': Always use AdminLayout
-   * - 'none': No layout (page renders directly)
-   */
-  layoutMode?: LayoutMode;
-
-  /**
-   * Page SEO and metadata configuration
-   * Used for <head> tags, OpenGraph, Twitter cards, etc.
-   */
-  pageConfig?: PageConfig;
-};

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

@@ -1,43 +0,0 @@
-/**
- * Route Types
- */
-
-/**
- * Route configuration
- */
-export interface RouteConfig {
-  /** Authentication route */
-  auth: string;
-
-  /** Default redirect after login */
-  defaultCallback: string;
-
-  /** Redirect for authenticated users on auth page */
-  defaultAuthCallback?: string;
-
-  /** Route detector functions */
-  detectors: RouteDetectors;
-}
-
-/**
- * Route detection functions
- */
-export interface RouteDetectors {
-  /** Check if route is public */
-  isPublicRoute: (path: string) => boolean;
-
-  /** Check if route is private/protected */
-  isPrivateRoute: (path: string) => boolean;
-
-  /** Check if route is admin */
-  isAdminRoute: (path: string) => boolean;
-
-  /** Check if route is auth page */
-  isAuthRoute: (path: string) => boolean;
-
-  /** Get redirect URL for unauthenticated users */
-  getUnauthenticatedRedirect: (path: string) => string | null;
-
-  /** Get page title for route */
-  getPageTitle: (path: string) => string;
-}

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

@@ -1,5 +0,0 @@
-/**
- * Utilities Module
- */
-
-export * from './routeDetection';

package/src/layouts/AppLayout/utils/routeDetection.ts

@@ -1,31 +0,0 @@
-/**
- * Route Detection Utilities
- */
-
-import type { LayoutMode, RouteDetectors } from '../types';
-
-/**
- * Determine layout mode from pathname
- */
-export function determineLayoutMode(
-  pathname: string,
-  detectors: RouteDetectors
-): LayoutMode {
-  if (detectors.isAuthRoute(pathname)) return 'auth';
-  if (detectors.isPrivateRoute(pathname)) return 'private';
-  return 'public';
-}
-
-/**
- * Check if redirect is needed for unauthenticated user
- */
-export function getRedirectUrl(
-  pathname: string,
-  isAuthenticated: boolean,
-  detectors: RouteDetectors
-): string | null {
-  if (!isAuthenticated) {
-    return detectors.getUnauthenticatedRedirect(pathname);
-  }
-  return null;
-}

package/src/layouts/ErrorLayout/ErrorLayout.tsx

@@ -1,173 +0,0 @@
-/**
- * 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 { 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) {
-  // 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 = () => {
-    // Use native navigation with full page reload instead of Next.js client-side navigation
-    if (document.referrer && document.referrer !== window.location.href) {
-      // Navigate to referrer with full reload
-      window.location.href = document.referrer;
-    } else if (window.history.length > 1) {
-      // Fallback: go back in history
-      window.history.back();
-    } else {
-      // Last resort: go to home
-      window.location.href = '/';
-    }
-  };
-
-  const handleGoHome = () => {
-    // Full page reload to home
-    window.location.href = '/';
-  };
-
-  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}
-                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/layouts/ErrorLayout/errorConfig.tsx

@@ -1,152 +0,0 @@
-/**
- * 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

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