@djangocfg/layouts 1.2.31 → 1.2.33

package/src/layouts/UILayout/components/layout/Header/TestValidationButton.tsx

@@ -0,0 +1,265 @@
+/**
+ * TestValidationButton Component
+ *
+ * Developer tool for testing Zod validation error events
+ * Dispatches mock CustomEvent to test ValidationErrorProvider
+ *
+ * Only visible in development mode
+ */
+
+'use client';
+
+import React, { useState } from 'react';
+import { Button } from '@djangocfg/ui';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@djangocfg/ui';
+import { Bug, AlertCircle } from 'lucide-react';
+
+/**
+ * Mock Zod error factory
+ */
+function createMockZodError(type: 'simple' | 'multiple' | 'nested' | 'array') {
+  const errors: Record<string, any> = {
+    simple: {
+      issues: [
+        {
+          path: ['email'],
+          message: 'Invalid email format',
+          code: 'invalid_string',
+          expected: 'email',
+          received: 'string',
+        }
+      ]
+    },
+    multiple: {
+      issues: [
+        {
+          path: ['email'],
+          message: 'Invalid email format',
+          code: 'invalid_string',
+        },
+        {
+          path: ['age'],
+          message: 'Number must be greater than 0',
+          code: 'too_small',
+          minimum: 0,
+        },
+        {
+          path: ['username'],
+          message: 'Required field',
+          code: 'invalid_type',
+          expected: 'string',
+          received: 'undefined',
+        }
+      ]
+    },
+    nested: {
+      issues: [
+        {
+          path: ['address', 'street'],
+          message: 'Street is required',
+          code: 'invalid_type',
+        },
+        {
+          path: ['address', 'zipCode'],
+          message: 'Invalid zip code format',
+          code: 'invalid_string',
+        }
+      ]
+    },
+    array: {
+      issues: [
+        {
+          path: ['items', 0, 'quantity'],
+          message: 'Quantity must be at least 1',
+          code: 'too_small',
+          minimum: 1,
+        },
+        {
+          path: ['items', 1, 'price'],
+          message: 'Price is required',
+          code: 'invalid_type',
+        }
+      ]
+    },
+  };
+
+  return errors[type];
+}
+
+/**
+ * Dispatch validation error event
+ */
+function dispatchValidationError(type: 'simple' | 'multiple' | 'nested' | 'array') {
+  const operations: Record<string, { operation: string; path: string; method: string; response: any }> = {
+    simple: {
+      operation: 'createUser',
+      path: '/api/users',
+      method: 'POST',
+      response: { email: 'not-an-email@' },
+    },
+    multiple: {
+      operation: 'updateProfile',
+      path: '/api/profile/123',
+      method: 'PATCH',
+      response: { email: 'bad', age: -5 },
+    },
+    nested: {
+      operation: 'createAddress',
+      path: '/api/addresses',
+      method: 'POST',
+      response: { address: { street: null, zipCode: '12' } },
+    },
+    array: {
+      operation: 'createOrder',
+      path: '/api/orders',
+      method: 'POST',
+      response: { items: [{ quantity: 0 }, { price: undefined }] },
+    },
+  };
+
+  const config = operations[type];
+  const error = createMockZodError(type);
+
+  const event = new CustomEvent('zod-validation-error', {
+    detail: {
+      operation: config.operation,
+      path: config.path,
+      method: config.method,
+      error: error,
+      response: config.response,
+      timestamp: new Date(),
+    },
+    bubbles: true,
+    cancelable: false,
+  });
+
+  window.dispatchEvent(event);
+
+  console.group('🧪 Test Validation Error Dispatched');
+  console.log('Type:', type);
+  console.log('Operation:', config.operation);
+  console.log('Endpoint:', config.method, config.path);
+  console.log('Issues:', error.issues);
+  console.groupEnd();
+}
+
+export interface TestValidationButtonProps {
+  /** Show in production (default: false - dev only) */
+  showInProduction?: boolean;
+  /** Button size */
+  size?: 'default' | 'sm' | 'lg' | 'icon';
+  /** Additional CSS classes */
+  className?: string;
+}
+
+/**
+ * Test Validation Button
+ *
+ * Dropdown menu with different validation error test cases
+ * Only visible in development by default
+ */
+export function TestValidationButton({
+  showInProduction = false,
+  size = 'sm',
+  className,
+}: TestValidationButtonProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Hide in production unless explicitly enabled
+  if (!showInProduction && process.env.NODE_ENV === 'production') {
+    return null;
+  }
+
+  return (
+    <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size={size}
+          className={className}
+        >
+          <Bug className="h-4 w-4" />
+          <span className="ml-2 hidden sm:inline">Test Validation</span>
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="end" className="w-[240px]">
+        <DropdownMenuLabel className="flex items-center gap-2">
+          <AlertCircle className="h-4 w-4 text-orange-500" />
+          <span>Test Validation Errors</span>
+        </DropdownMenuLabel>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuItem
+          onClick={() => {
+            dispatchValidationError('simple');
+            setIsOpen(false);
+          }}
+        >
+          <div className="flex flex-col gap-1">
+            <div className="font-medium">Simple Error</div>
+            <div className="text-xs text-muted-foreground">
+              Single field validation
+            </div>
+          </div>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem
+          onClick={() => {
+            dispatchValidationError('multiple');
+            setIsOpen(false);
+          }}
+        >
+          <div className="flex flex-col gap-1">
+            <div className="font-medium">Multiple Errors</div>
+            <div className="text-xs text-muted-foreground">
+              3 validation errors
+            </div>
+          </div>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem
+          onClick={() => {
+            dispatchValidationError('nested');
+            setIsOpen(false);
+          }}
+        >
+          <div className="flex flex-col gap-1">
+            <div className="font-medium">Nested Object</div>
+            <div className="text-xs text-muted-foreground">
+              Nested property errors
+            </div>
+          </div>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem
+          onClick={() => {
+            dispatchValidationError('array');
+            setIsOpen(false);
+          }}
+        >
+          <div className="flex flex-col gap-1">
+            <div className="font-medium">Array Validation</div>
+            <div className="text-xs text-muted-foreground">
+              Array item errors
+            </div>
+          </div>
+        </DropdownMenuItem>
+
+        <DropdownMenuSeparator />
+
+        <div className="px-2 py-1.5 text-xs text-muted-foreground">
+          💡 Check console and toast notifications
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/layouts/UILayout/components/layout/Header/index.ts

@@ -7,3 +7,5 @@ export type { HeaderProps } from './Header';
 export { HeaderMobile } from './HeaderMobile';
 export { HeaderDesktop } from './HeaderDesktop';
 export { CopyAIButton } from './CopyAIButton';
+export { TestValidationButton } from './TestValidationButton';
+export type { TestValidationButtonProps } from './TestValidationButton';

package/src/utils/logger.ts

@@ -13,9 +13,11 @@ import { createConsola } from 'consola';
  * - 5: trace, verbose
  */
 const isDevelopment = process.env.NODE_ENV === 'development';
+const isStaticBuild = process.env.NEXT_PUBLIC_STATIC_BUILD === 'true';
+const showLogs = isDevelopment || isStaticBuild;
 
 export const logger = createConsola({
-  level: isDevelopment ? 4 : 1,  // dev: debug, production: errors only
+  level: showLogs ? 4 : 1,  // dev: debug, production: errors only
 }).withTag('layouts');
 
 // ─────────────────────────────────────────────────────────────────────────