@djangocfg/layouts 1.2.32 → 1.2.34

package/src/validation/ValidationErrorToast.tsx

@@ -0,0 +1,181 @@
+/**
+ * ValidationErrorToast Component
+ *
+ * Custom toast for validation errors with copy button
+ * Formats Zod validation errors and provides one-click copy functionality
+ */
+
+'use client';
+
+import React from 'react';
+import { ToastAction } from '@djangocfg/ui';
+import type { ZodError } from 'zod';
+import { ValidationErrorButtons } from './ValidationErrorButtons';
+
+export interface ValidationErrorDetail {
+  operation: string;
+  path: string;
+  method: string;
+  error: ZodError;
+  response: any;
+  timestamp: Date;
+}
+
+export interface ValidationErrorToastConfig {
+  /** Show operation name in title */
+  showOperation?: boolean;
+  /** Show API path in description */
+  showPath?: boolean;
+  /** Show error count in description */
+  showErrorCount?: boolean;
+  /** Maximum number of issues to show in description */
+  maxIssuesInDescription?: number;
+  /** Custom title prefix */
+  titlePrefix?: string;
+}
+
+const defaultConfig: ValidationErrorToastConfig = {
+  showOperation: true,
+  showPath: true,
+  showErrorCount: true,
+  maxIssuesInDescription: 3,
+  titlePrefix: '❌ Validation Error',
+};
+
+/**
+ * Format Zod error issues for display in toast description
+ */
+export function formatZodIssuesForToast(
+  error: ZodError,
+  maxIssues: number = 3
+): string {
+  const issues = error.issues.slice(0, maxIssues);
+  const formatted = issues.map((issue) => {
+    const path = issue.path.join('.') || 'root';
+    return `${path}: ${issue.message}`;
+  });
+
+  if (error.issues.length > maxIssues) {
+    formatted.push(`... and ${error.issues.length - maxIssues} more`);
+  }
+
+  return formatted.join(', ');
+}
+
+/**
+ * Format full error details for copying to clipboard
+ * Includes all error information in structured JSON format
+ */
+export function formatErrorForClipboard(detail: ValidationErrorDetail): string {
+  const errorData = {
+    timestamp: detail.timestamp.toISOString(),
+    operation: detail.operation,
+    endpoint: {
+      method: detail.method,
+      path: detail.path,
+    },
+    validation_errors: detail.error.issues.map((issue) => ({
+      path: issue.path.join('.') || 'root',
+      message: issue.message,
+      code: issue.code,
+      ...(('expected' in issue) && { expected: issue.expected }),
+      ...(('received' in issue) && { received: issue.received }),
+      ...(('minimum' in issue) && { minimum: issue.minimum }),
+      ...(('maximum' in issue) && { maximum: issue.maximum }),
+    })),
+    response: detail.response,
+    total_errors: detail.error.issues.length,
+  };
+
+  return JSON.stringify(errorData, null, 2);
+}
+
+/**
+ * Build toast title from validation error
+ */
+export function buildToastTitle(
+  detail: ValidationErrorDetail,
+  config: ValidationErrorToastConfig = defaultConfig
+): string {
+  const titleParts: string[] = [config.titlePrefix || '❌ Validation Error'];
+
+  if (config.showOperation) {
+    titleParts.push(`in ${detail.operation}`);
+  }
+
+  return titleParts.join(' ');
+}
+
+/**
+ * Build toast description from validation error
+ */
+export function buildToastDescription(
+  detail: ValidationErrorDetail,
+  config: ValidationErrorToastConfig = defaultConfig
+): string {
+  const descriptionParts: string[] = [];
+
+  // Add HTTP method and path
+  if (config.showPath) {
+    descriptionParts.push(`${detail.method} ${detail.path}`);
+  }
+
+  // Add error count
+  if (config.showErrorCount) {
+    const count = detail.error.issues.length;
+    const plural = count === 1 ? 'error' : 'errors';
+    descriptionParts.push(`${count} ${plural}`);
+  }
+
+  // Add formatted error messages
+  descriptionParts.push(
+    formatZodIssuesForToast(
+      detail.error,
+      config.maxIssuesInDescription
+    )
+  );
+
+  return descriptionParts.join(' • ');
+}
+
+/**
+ * Create complete toast options for validation error
+ *
+ * Usage:
+ * ```typescript
+ * const { toast } = useToast();
+ *
+ * const toastOptions = createValidationErrorToast(errorDetail, {
+ *   onCopySuccess: () => toast({ title: '✅ Copied!' }),
+ *   onCopyError: () => toast({ title: '❌ Copy failed', variant: 'destructive' }),
+ * });
+ *
+ * toast(toastOptions);
+ * ```
+ */
+export function createValidationErrorToast(
+  detail: ValidationErrorDetail,
+  options?: {
+    config?: Partial<ValidationErrorToastConfig>;
+    duration?: number;
+    onCopySuccess?: () => void;
+    onCopyError?: (error: Error) => void;
+  }
+) {
+  const config: ValidationErrorToastConfig = {
+    ...defaultConfig,
+    ...options?.config,
+  };
+
+  return {
+    title: buildToastTitle(detail, config),
+    description: (
+      <div className="flex flex-col gap-2">
+        <div>{buildToastDescription(detail, config)}</div>
+        <ValidationErrorButtons detail={detail} />
+      </div>
+    ),
+    variant: 'destructive' as const,
+    duration: options?.duration,
+  };
+}

package/src/validation/curl-generator.ts

@@ -0,0 +1,118 @@
+/**
+ * cURL Generator
+ *
+ * Generates cURL commands from API request details with authentication token
+ */
+
+export interface CurlOptions {
+  method: string;
+  path: string;
+  token?: string;
+  body?: any;
+  headers?: Record<string, string>;
+  baseUrl?: string;
+  queryParams?: Record<string, string>;
+}
+
+/**
+ * Get authentication token from localStorage
+ */
+export function getAuthToken(): string | null {
+  if (typeof window === 'undefined') return null;
+
+  try {
+    // Priority order: access_token > token > auth_token
+    const token = localStorage.getItem('access_token') ||
+                  localStorage.getItem('token') ||
+                  localStorage.getItem('auth_token');
+
+    return token;
+  } catch (error) {
+    console.error('Failed to get auth token:', error);
+    return null;
+  }
+}
+
+/**
+ * Format headers for cURL command
+ */
+function formatHeaders(headers: Record<string, string>): string[] {
+  return Object.entries(headers).map(
+    ([key, value]) => `-H '${key}: ${value}'`
+  );
+}
+
+/**
+ * Escape single quotes in string for shell
+ */
+function escapeShell(str: string): string {
+  return str.replace(/'/g, "'\\''");
+}
+
+/**
+ * Generate cURL command from request details
+ */
+export function generateCurl(options: CurlOptions): string {
+  const {
+    method,
+    path,
+    token = getAuthToken() || undefined,  // Auto-fetch if not provided
+    body,
+    headers = {},
+    baseUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000',
+  } = options;
+
+  const curlParts: string[] = ['curl'];
+
+  // Build URL
+  const url = `${baseUrl}${path}`;
+  curlParts.push(`'${url}'`);
+
+  // Add method if not GET
+  if (method.toUpperCase() !== 'GET') {
+    curlParts.push(`-X ${method.toUpperCase()}`);
+  }
+
+  // Default headers
+  const allHeaders: Record<string, string> = {
+    'Accept': '*/*',
+    'Content-Type': 'application/json',
+    ...headers,
+  };
+
+  // Add Authorization header if token exists
+  if (token) {
+    allHeaders['Authorization'] = `Bearer ${token}`;
+  }
+
+  // Add all headers
+  const headerStrings = formatHeaders(allHeaders);
+  curlParts.push(...headerStrings);
+
+  // Add body for non-GET requests
+  if (body && method.toUpperCase() !== 'GET') {
+    const bodyJson = typeof body === 'string'
+      ? body
+      : JSON.stringify(body, null, 2);
+    curlParts.push(`-d '${escapeShell(bodyJson)}'`);
+  }
+
+  // Join with line continuation
+  return curlParts.join(' \\\n  ');
+}
+
+/**
+ * Generate cURL from validation error details
+ * Auto-fetches token from localStorage
+ */
+export function generateCurlFromError(detail: {
+  method: string;
+  path: string;
+  response?: any;
+}): string {
+  return generateCurl({
+    method: detail.method,
+    path: detail.path,
+    // token is auto-fetched in generateCurl
+  });
+}

package/src/validation/index.ts

@@ -0,0 +1,36 @@
+/**
+ * Validation Error Tracking
+ *
+ * Automatic capture and management of Zod validation errors
+ * from API client using browser CustomEvent API.
+ */
+
+export {
+  ValidationErrorProvider,
+  useValidationErrors,
+  type ValidationErrorDetail,
+  type StoredValidationError,
+  type ValidationErrorConfig,
+  type ValidationErrorContextValue,
+} from './ValidationErrorContext';
+
+export {
+  createValidationErrorToast,
+  buildToastTitle,
+  buildToastDescription,
+  formatZodIssuesForToast,
+  formatErrorForClipboard,
+  type ValidationErrorToastConfig,
+} from './ValidationErrorToast';
+
+export {
+  ValidationErrorButtons,
+  type ValidationErrorButtonsProps,
+} from './ValidationErrorButtons';
+
+export {
+  generateCurl,
+  generateCurlFromError,
+  getAuthToken,
+  type CurlOptions,
+} from './curl-generator';