@djangocfg/layouts 2.1.110 → 2.1.111

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.110",
+  "version": "2.1.111",
   "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.111",
+    "@djangocfg/centrifugo": "^2.1.111",
+    "@djangocfg/i18n": "^2.1.111",
+    "@djangocfg/ui-core": "^2.1.111",
+    "@djangocfg/ui-nextjs": "^2.1.111",
+    "@djangocfg/ui-tools": "^2.1.111",
     "@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.111",
+    "@djangocfg/i18n": "^2.1.111",
+    "@djangocfg/centrifugo": "^2.1.111",
+    "@djangocfg/typescript-config": "^2.1.111",
+    "@djangocfg/ui-core": "^2.1.111",
+    "@djangocfg/ui-nextjs": "^2.1.111",
+    "@djangocfg/ui-tools": "^2.1.111",
     "@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.'),
       };
   }
 }