@djangocfg/layouts 2.1.110 → 2.1.112

package/README.md

@@ -168,6 +168,75 @@ import { PublicLayout, PrivateLayout, AuthLayout } from '@djangocfg/layouts';
 | `AdminLayout` | Admin panel layout |
 | `ProfileLayout` | User profile pages |
 
+### i18n Support
+
+Pass `i18n` config to AppLayout for locale switching in all layouts:
+
+```tsx
+import { AppLayout } from '@djangocfg/layouts';
+import { useLocaleSwitcher } from '@djangocfg/nextjs/i18n/client';
+
+function RootLayout({ children }) {
+  const { locale, locales, changeLocale } = useLocaleSwitcher();
+
+  return (
+    <AppLayout
+      // ... other configs
+      i18n={{
+        locale,
+        locales,
+        onLocaleChange: changeLocale,
+      }}
+    >
+      {children}
+    </AppLayout>
+  );
+}
+```
+
+The `LocaleSwitcher` component will automatically appear in PublicLayout and PrivateLayout headers.
+
+### LocaleSwitcher Component
+
+A presentational locale switcher component that can be used standalone:
+
+```tsx
+import { LocaleSwitcher } from '@djangocfg/layouts';
+
+// Basic usage (pass locale data via props)
+<LocaleSwitcher
+  locale="en"
+  locales={['en', 'ru', 'ko']}
+  onChange={(locale) => router.push(`/${locale}`)}
+/>
+
+// With custom labels and styling
+<LocaleSwitcher
+  locale={currentLocale}
+  locales={['en', 'ru', 'ko']}
+  onChange={handleLocaleChange}
+  labels={{ en: 'English', ru: 'Русский', ko: '한국어' }}
+  variant="outline"
+  size="sm"
+  showIcon={true}
+/>
+```
+
+**Props:**
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `locale` | `string` | - | Current locale code |
+| `locales` | `string[]` | - | Available locale codes |
+| `onChange` | `(locale: string) => void` | - | Callback when locale changes |
+| `labels` | `Record<string, string>` | Built-in | Custom labels for locales |
+| `showCode` | `boolean` | `false` | Show locale code with label |
+| `variant` | `'ghost' \| 'outline' \| 'default'` | `'ghost'` | Button variant |
+| `size` | `'sm' \| 'default' \| 'lg' \| 'icon'` | `'sm'` | Button size |
+| `showIcon` | `boolean` | `true` | Show globe icon |
+| `className` | `string` | - | Custom CSS class |
+
+> **Smart version:** For automatic locale detection with next-intl hooks, use `@djangocfg/nextjs/i18n/components` which wraps this component.
+
 > **Extension Layouts:** Additional layouts like `SupportLayout` and `PaymentsLayout` are available in extension packages:
 > - `@djangocfg/ext-support` - Support ticket layouts
 > - `@djangocfg/ext-payments` - Payment flow layouts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.110",
+  "version": "2.1.112",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -74,11 +74,12 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.110",
-    "@djangocfg/centrifugo": "^2.1.110",
-    "@djangocfg/ui-core": "^2.1.110",
-    "@djangocfg/ui-nextjs": "^2.1.110",
-    "@djangocfg/ui-tools": "^2.1.110",
+    "@djangocfg/api": "^2.1.112",
+    "@djangocfg/centrifugo": "^2.1.112",
+    "@djangocfg/i18n": "^2.1.112",
+    "@djangocfg/ui-core": "^2.1.112",
+    "@djangocfg/ui-nextjs": "^2.1.112",
+    "@djangocfg/ui-tools": "^2.1.112",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -101,12 +102,13 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.110",
-    "@djangocfg/centrifugo": "^2.1.110",
-    "@djangocfg/typescript-config": "^2.1.110",
-    "@djangocfg/ui-core": "^2.1.110",
-    "@djangocfg/ui-nextjs": "^2.1.110",
-    "@djangocfg/ui-tools": "^2.1.110",
+    "@djangocfg/api": "^2.1.112",
+    "@djangocfg/i18n": "^2.1.112",
+    "@djangocfg/centrifugo": "^2.1.112",
+    "@djangocfg/typescript-config": "^2.1.112",
+    "@djangocfg/ui-core": "^2.1.112",
+    "@djangocfg/ui-nextjs": "^2.1.112",
+    "@djangocfg/ui-tools": "^2.1.112",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/components/errors/ErrorBoundary.tsx

@@ -1,6 +1,6 @@
 /**
  * Simple ErrorBoundary Component
- * 
+ *
  * Catches React errors and displays a fallback UI
  */
 
@@ -8,6 +8,8 @@
 
 import React, { Component, ErrorInfo, ReactNode } from 'react';
 
+import { getT } from '@djangocfg/i18n';
+
 interface ErrorBoundaryProps {
   children: ReactNode;
   supportEmail?: string;
@@ -34,7 +36,7 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
     if (this.props.onError) {
       this.props.onError(error, errorInfo);
     }
-    
+
     // Log to console in development
     if (process.env.NODE_ENV === 'development') {
       console.error('ErrorBoundary caught an error:', error, errorInfo);
@@ -43,16 +45,20 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
 
   render() {
     if (this.state.hasError) {
+      const title = getT('layouts.errors.somethingWentWrong');
+      const description = getT('layouts.errors.tryRefreshing');
+      const refreshButton = getT('layouts.errors.refreshPage');
+
       return (
         <div className="flex min-h-screen items-center justify-center bg-background p-4">
           <div className="max-w-md w-full space-y-4 text-center">
-            <h1 className="text-2xl font-bold text-foreground">Something went wrong</h1>
+            <h1 className="text-2xl font-bold text-foreground">{title}</h1>
             <p className="text-muted-foreground">
-              We're sorry, but something unexpected happened. Please try refreshing the page.
+              {description}
             </p>
             {this.props.supportEmail && (
               <p className="text-sm text-muted-foreground">
-                If the problem persists, please contact{' '}
+                {getT('layouts.errors.persistsContact', { email: '' })}{' '}
                 <a
                   href={`mailto:${this.props.supportEmail}`}
                   className="text-primary hover:underline"
@@ -65,7 +71,7 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
               onClick={() => window.location.reload()}
               className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
             >
-              Refresh Page
+              {refreshButton}
             </button>
           </div>
         </div>

package/src/components/errors/ErrorLayout.tsx

@@ -17,9 +17,10 @@
 
 'use client';
 
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { Button } from '@djangocfg/ui-core/components';
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 
 import { getErrorContent } from './errorConfig';
 
@@ -112,17 +113,26 @@ export function ErrorLayout({
   illustration,
   supportEmail = 'support@example.com',
 }: ErrorLayoutProps) {
-  
+  const t = useTypedT<I18nTranslations>();
+
+  const labels = useMemo(() => ({
+    goBack: t('layouts.errors.goBack'),
+    goHome: t('layouts.errors.goHome'),
+    needHelp: t('layouts.errors.needHelp'),
+    contactSupport: t('layouts.errors.contactSupport'),
+    error: t('layouts.errors.error'),
+  }), [t]);
+
   // 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)
+    ? getErrorContent(code, t)
     : null;
 
   // Fallback to auto-generated values
-  const finalTitle = title || autoContent?.title || 'Error';
+  const finalTitle = title || autoContent?.title || labels.error;
   const finalDescription = description || autoContent?.description;
-  
+
   // ILLUSTRATION FIX: Use passed prop OR compute the icon locally using getErrorIcon.
   const finalIllustration = illustration ?? getErrorIcon(code);
 
@@ -178,7 +188,7 @@ export function ErrorLayout({
                 onClick={handleGoBack}
                 style={{ minWidth: '140px', padding: '12px 32px' }}
               >
-                Go Back
+                {labels.goBack}
               </Button>
               <Button
                 variant="default"
@@ -186,7 +196,7 @@ export function ErrorLayout({
                 onClick={handleGoHome}
                 style={{ minWidth: '140px', padding: '12px 32px' }}
               >
-                Go Home
+                {labels.goHome}
               </Button>
             </>
           )}
@@ -195,12 +205,12 @@ export function ErrorLayout({
         {/* Additional Info */}
         <div className="pt-8 text-sm text-muted-foreground">
           <p>
-            Need help? Contact{' '}
+            {labels.needHelp}{' '}
             <a
               href={`mailto:${supportEmail}`}
               className="text-primary hover:underline"
             >
-              support
+              {labels.contactSupport}
             </a>
           </p>
         </div>

package/src/components/errors/errorConfig.ts

@@ -13,90 +13,96 @@ export interface ErrorContent {
   description: string;
 }
 
+type TranslationFn = (key: string, params?: Record<string, string | number>) => string;
+
 /**
  * Get standardized error content based on status code
  *
  * @param statusCode - HTTP status code or custom error type
+ * @param t - Translation function from useT()
  * @returns Error content configuration (title and description only)
  *
  * @example
  * ```tsx
- * const { title, description } = getErrorContent(404);
+ * const { title, description } = getErrorContent(404, t);
  * <ErrorLayout title={title} description={description} code={404} />
  * ```
  */
-export function getErrorContent(statusCode?: number | string): ErrorContent {
+export function getErrorContent(statusCode?: number | string, t?: TranslationFn): ErrorContent {
   const code = typeof statusCode === 'string' ? parseInt(statusCode, 10) : statusCode;
 
+  // Helper to get translation or fallback
+  const tr = (key: string, fallback: string) => t ? t(key) : fallback;
+
   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.',
+        title: tr('layouts.errors.badRequest', 'Bad Request'),
+        description: tr('layouts.errors.badRequestDesc', '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.',
+        title: tr('layouts.errors.authRequired', 'Authentication Required'),
+        description: tr('layouts.errors.authRequiredDesc', '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.",
+        title: tr('layouts.errors.accessDenied', 'Access Denied'),
+        description: tr('layouts.errors.accessDeniedDesc', "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.",
+        title: tr('layouts.errors.pageNotFound', 'Page Not Found'),
+        description: tr('layouts.errors.pageNotFoundDesc', "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.',
+        title: tr('layouts.errors.requestTimeout', 'Request Timeout'),
+        description: tr('layouts.errors.requestTimeoutDesc', '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.",
+        title: tr('layouts.errors.serverError', 'Server Error'),
+        description: tr('layouts.errors.serverErrorDesc', "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.',
+        title: tr('layouts.errors.badGateway', 'Bad Gateway'),
+        description: tr('layouts.errors.badGatewayDesc', '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.',
+        title: tr('layouts.errors.serviceUnavailable', 'Service Unavailable'),
+        description: tr('layouts.errors.serviceUnavailableDesc', '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.',
+        title: tr('layouts.errors.gatewayTimeout', 'Gateway Timeout'),
+        description: tr('layouts.errors.gatewayTimeoutDesc', '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.',
+        title: tr('layouts.errors.somethingWentWrong', 'Something Went Wrong'),
+        description: tr('layouts.errors.unknownErrorDesc', 'An unexpected error occurred. Please try again or contact support.'),
       };
   }
 }

package/src/layouts/AppLayout/AppLayout.tsx

@@ -85,26 +85,33 @@ function determineLayoutMode(
   return 'public';
 }
 
+/** i18n configuration for locale switching */
+export interface I18nLayoutConfig {
+  /** Current locale */
+  locale: string;
+  /** Available locales */
+  locales: string[];
+  /** Callback when locale changes */
+  onLocaleChange: (locale: string) => void;
+}
+
+/** Layout configuration with component and enabled paths */
+interface LayoutConfig {
+  component: React.ComponentType<{ children: ReactNode; i18n?: I18nLayoutConfig }>;
+  enabledPath?: string | string[];
+}
+
 export interface AppLayoutProps {
   children: ReactNode;
 
   /** Public layout component with enabled paths */
-  publicLayout?: {
-    component: React.ComponentType<{ children: ReactNode }>;
-    enabledPath?: string | string[];
-  };
+  publicLayout?: LayoutConfig;
 
   /** Private layout component with enabled paths */
-  privateLayout?: {
-    component: React.ComponentType<{ children: ReactNode }>;
-    enabledPath?: string | string[];
-  };
+  privateLayout?: LayoutConfig;
 
   /** Admin layout component with enabled paths */
-  adminLayout?: {
-    component: React.ComponentType<{ children: ReactNode }>;
-    enabledPath?: string | string[];
-  };
+  adminLayout?: LayoutConfig;
 
   /**
    * Paths that render without any layout wrapper (fullscreen pages)
@@ -142,6 +149,9 @@ export interface AppLayoutProps {
 
   /** Push Notifications configuration */
   pushNotifications?: PushNotificationsConfig;
+
+  /** i18n configuration for locale switching (applies to all layouts) */
+  i18n?: I18nLayoutConfig;
 }
 
 /**
@@ -156,6 +166,7 @@ function AppLayoutContent({
   privateLayout,
   adminLayout,
   noLayoutPaths,
+  i18n,
 }: AppLayoutProps) {
   const pathname = usePathname();
 
@@ -188,7 +199,9 @@ function AppLayoutContent({
           return (
             <ClientOnly>
               <Suspense>
-                <privateLayout.component>{children}</privateLayout.component>
+                <privateLayout.component i18n={i18n}>
+                  {children}
+                </privateLayout.component>
               </Suspense>
             </ClientOnly>
           );
@@ -199,7 +212,9 @@ function AppLayoutContent({
         return (
           <ClientOnly>
             <Suspense>
-              <adminLayout.component>{children}</adminLayout.component>
+              <adminLayout.component i18n={i18n}>
+                {children}
+              </adminLayout.component>
             </Suspense>
           </ClientOnly>
         );
@@ -207,14 +222,20 @@ function AppLayoutContent({
       case 'private':
         if (!privateLayout) {
           if (publicLayout) {
-            return <publicLayout.component>{children}</publicLayout.component>;
+            return (
+              <publicLayout.component i18n={i18n}>
+                {children}
+              </publicLayout.component>
+            );
           }
           return children;
         }
         return (
           <ClientOnly>
             <Suspense>
-              <privateLayout.component>{children}</privateLayout.component>
+              <privateLayout.component i18n={i18n}>
+                {children}
+              </privateLayout.component>
             </Suspense>
           </ClientOnly>
         );
@@ -225,7 +246,11 @@ function AppLayoutContent({
         if (!publicLayout) {
           return children;
         }
-        return <publicLayout.component>{children}</publicLayout.component>;
+        return (
+          <publicLayout.component i18n={i18n}>
+            {children}
+          </publicLayout.component>
+        );
     }
   };
   

package/src/layouts/PrivateLayout/PrivateLayout.tsx

@@ -91,6 +91,8 @@ export interface HeaderConfig {
   authPath?: string;
 }
 
+import type { I18nLayoutConfig } from '../AppLayout/AppLayout';
+
 export interface PrivateLayoutProps {
   children: ReactNode;
   /** Sidebar configuration */
@@ -99,6 +101,8 @@ export interface PrivateLayoutProps {
   header?: HeaderConfig;
   /** Content padding */
   contentPadding?: 'none' | 'default';
+  /** i18n configuration for locale switching */
+  i18n?: I18nLayoutConfig;
 }
 
 export function PrivateLayout({
@@ -106,6 +110,7 @@ export function PrivateLayout({
   sidebar,
   header,
   contentPadding = 'default',
+  i18n,
 }: PrivateLayoutProps) {
   const { isAuthenticated, isLoading, saveRedirectUrl } = useAuth();
   const router = useRouter();
@@ -145,7 +150,9 @@ export function PrivateLayout({
       {/* Main content area */}
       <SidebarInset className="flex flex-col">
         {/* Header with sidebar trigger */}
-        {(header || isAuthenticated) && <PrivateHeader header={header} />}
+        {(header || isAuthenticated) && (
+          <PrivateHeader header={header} i18n={i18n} />
+        )}
 
         {/* Page content */}
         <PrivateContent padding={contentPadding}>{children}</PrivateContent>

package/src/layouts/PrivateLayout/components/PrivateHeader.tsx

@@ -13,15 +13,19 @@ import { Separator } from '@djangocfg/ui-nextjs/components';
 import { SidebarTrigger } from '@djangocfg/ui-nextjs/components';
 import { ThemeToggle } from '@djangocfg/ui-nextjs/theme';
 
+import { LocaleSwitcher } from '../../_components/LocaleSwitcher';
 import { UserMenu } from '../../_components/UserMenu';
 
 import type { HeaderConfig } from '../PrivateLayout';
+import type { I18nLayoutConfig } from '../../AppLayout/AppLayout';
 
 interface PrivateHeaderProps {
   header?: HeaderConfig;
+  /** i18n configuration for locale switching */
+  i18n?: I18nLayoutConfig;
 }
 
-export function PrivateHeader({ header }: PrivateHeaderProps) {
+export function PrivateHeader({ header, i18n }: PrivateHeaderProps) {
   const { user, logout } = useAuth();
 
   return (
@@ -43,6 +47,15 @@ export function PrivateHeader({ header }: PrivateHeaderProps) {
 
       {/* Right side */}
       <div className="flex items-center gap-3">
+        {/* Locale Switcher */}
+        {i18n && (
+          <LocaleSwitcher
+            locale={i18n.locale}
+            locales={i18n.locales}
+            onChange={i18n.onLocaleChange}
+          />
+        )}
+
         {/* Theme Toggle */}
         <ThemeToggle />