@djangocfg/layouts 1.2.39 → 1.2.40

package/src/validation/components/ErrorButtons.tsx

@@ -0,0 +1,100 @@
+/**
+ * ErrorButtons - Universal copy buttons for all error types
+ *
+ * Provides copy functionality for validation, CORS, and network errors
+ */
+
+'use client';
+
+import React from 'react';
+import { Button, useCopy } from '@djangocfg/ui';
+import { Copy, Terminal } from 'lucide-react';
+import type { ValidationErrorDetail, CORSErrorDetail, NetworkErrorDetail } from '../types';
+import {
+  formatValidationErrorForClipboard,
+  formatCORSErrorForClipboard,
+  formatNetworkErrorForClipboard,
+} from '../utils/formatters';
+import { generateCurlFromError } from '../utils/curl-generator';
+
+export interface ErrorButtonsProps {
+  detail: ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail;
+}
+
+/**
+ * Format error for clipboard based on type
+ */
+function formatErrorForClipboard(detail: ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail): string {
+  switch (detail.type) {
+    case 'validation':
+      return formatValidationErrorForClipboard(detail);
+    case 'cors':
+      return formatCORSErrorForClipboard(detail);
+    case 'network':
+      return formatNetworkErrorForClipboard(detail);
+    default:
+      return JSON.stringify(detail, null, 2);
+  }
+}
+
+/**
+ * Check if error supports cURL generation
+ */
+function supportsCurl(detail: ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail): boolean {
+  return detail.type === 'validation';
+}
+
+/**
+ * Universal error buttons
+ */
+export function ErrorButtons({ detail }: ErrorButtonsProps) {
+  const { copyToClipboard } = useCopy();
+
+  const handleCopyError = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const formattedError = formatErrorForClipboard(detail);
+    await copyToClipboard(formattedError, '✅ Error details copied');
+  };
+
+  const handleCopyCurl = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (detail.type === 'validation') {
+      const curl = generateCurlFromError({
+        method: detail.method,
+        path: detail.path,
+        response: detail.response,
+      });
+      await copyToClipboard(curl, '✅ cURL command copied');
+    }
+  };
+
+  return (
+    <div className="flex gap-2 mt-2">
+      <Button
+        size="sm"
+        variant="secondary"
+        onClick={handleCopyError}
+        className="h-8 text-xs bg-background hover:bg-background/80 text-foreground border border-border gap-1.5"
+      >
+        <Copy className="h-3.5 w-3.5" />
+        Copy Error
+      </Button>
+
+      {supportsCurl(detail) && (
+        <Button
+          size="sm"
+          variant="secondary"
+          onClick={handleCopyCurl}
+          className="h-8 text-xs bg-background hover:bg-background/80 text-foreground border border-border gap-1.5"
+        >
+          <Terminal className="h-3.5 w-3.5" />
+          Copy cURL
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/validation/components/ErrorToast.tsx

@@ -0,0 +1,174 @@
+/**
+ * ErrorToast - Universal toast for all error types
+ *
+ * Formats validation, CORS, and network errors with appropriate styling
+ */
+
+'use client';
+
+import React from 'react';
+import type {
+  ValidationErrorDetail,
+  CORSErrorDetail,
+  NetworkErrorDetail,
+  ValidationErrorConfig,
+  CORSErrorConfig,
+  NetworkErrorConfig,
+} from '../types';
+import { formatZodIssues, formatErrorTitle, extractDomain } from '../utils/formatters';
+import { ErrorButtons } from './ErrorButtons';
+
+/**
+ * Build validation error description
+ */
+function buildValidationDescription(
+  detail: ValidationErrorDetail,
+  config: Required<ValidationErrorConfig>
+): React.ReactNode {
+  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
+  const issuesText = formatZodIssues(detail.error, config.maxIssuesInToast);
+
+  return (
+    <div className="flex flex-col gap-2 text-sm">
+      {descriptionParts.length > 0 && (
+        <div className="font-mono text-xs opacity-90">
+          {descriptionParts.join(' • ')}
+        </div>
+      )}
+      <div className="opacity-90">{issuesText}</div>
+      <ErrorButtons detail={detail} />
+    </div>
+  );
+}
+
+/**
+ * Build CORS error description
+ */
+function buildCORSDescription(
+  detail: CORSErrorDetail,
+  config: Required<CORSErrorConfig>
+): React.ReactNode {
+  const domain = extractDomain(detail.url);
+  const parts: string[] = [];
+
+  // Add method and URL info
+  if (config.showMethod && config.showUrl) {
+    parts.push(`${detail.method} ${detail.url}`);
+  } else if (config.showUrl) {
+    parts.push(detail.url);
+  } else if (config.showMethod) {
+    parts.push(`${detail.method} request blocked`);
+  }
+
+  return (
+    <div className="flex flex-col gap-2 text-sm">
+      {parts.length > 0 && (
+        <div className="font-mono text-xs opacity-90">
+          {parts.join(' • ')}
+        </div>
+      )}
+
+      <div className="flex flex-col gap-1">
+        <div className="font-medium">Сервер заблокировал запрос из-за CORS политики</div>
+
+        <div className="text-xs opacity-75 mt-1">
+          <div className="font-semibold mb-1">Возможные причины:</div>
+          <ul className="list-disc list-inside space-y-0.5 ml-2">
+            <li>Сервер не настроен для cross-origin запросов</li>
+            <li>Отсутствует заголовок Access-Control-Allow-Origin</li>
+            <li>Неверные CORS настройки на {domain}</li>
+          </ul>
+        </div>
+
+        <div className="text-xs opacity-75 mt-2">
+          <div className="font-semibold mb-1">Что делать:</div>
+          <ul className="list-disc list-inside space-y-0.5 ml-2">
+            <li>Проверьте CORS настройки Django (CORS_ALLOWED_ORIGINS)</li>
+            <li>Убедитесь что django-cors-headers установлен</li>
+            <li>Проверьте что сервер доступен</li>
+          </ul>
+        </div>
+      </div>
+
+      <ErrorButtons detail={detail} />
+    </div>
+  );
+}
+
+/**
+ * Build network error description
+ */
+function buildNetworkDescription(
+  detail: NetworkErrorDetail,
+  config: Required<NetworkErrorConfig>
+): React.ReactNode {
+  const parts: string[] = [];
+
+  // Add method and URL info
+  if (config.showMethod && config.showUrl) {
+    parts.push(`${detail.method} ${detail.url}`);
+  } else if (config.showUrl) {
+    parts.push(detail.url);
+  } else if (config.showMethod) {
+    parts.push(`${detail.method} request failed`);
+  }
+
+  // Add status code
+  if (config.showStatusCode && detail.statusCode) {
+    parts.push(`Status: ${detail.statusCode}`);
+  }
+
+  return (
+    <div className="flex flex-col gap-2 text-sm">
+      {parts.length > 0 && (
+        <div className="font-mono text-xs opacity-90">
+          {parts.join(' • ')}
+        </div>
+      )}
+
+      <div className="opacity-90">{detail.error}</div>
+
+      <ErrorButtons detail={detail} />
+    </div>
+  );
+}
+
+/**
+ * Create toast options for any error type
+ */
+export function createErrorToast(
+  detail: ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail,
+  config: Required<ValidationErrorConfig | CORSErrorConfig | NetworkErrorConfig>
+) {
+  let description: React.ReactNode;
+
+  // Build description based on error type
+  if (detail.type === 'validation') {
+    description = buildValidationDescription(detail, config as Required<ValidationErrorConfig>);
+  } else if (detail.type === 'cors') {
+    description = buildCORSDescription(detail, config as Required<CORSErrorConfig>);
+  } else {
+    description = buildNetworkDescription(detail, config as Required<NetworkErrorConfig>);
+  }
+
+  return {
+    title: formatErrorTitle(detail),
+    description,
+    variant: 'destructive' as const,
+    duration: config.duration,
+  };
+}

package/src/validation/hooks.ts

@@ -0,0 +1,10 @@
+/**
+ * Error Tracking Hooks
+ *
+ * React hooks for accessing error state
+ */
+
+export { useErrors } from './providers/ErrorTrackingProvider';
+
+// Type exports for convenience
+export type { ErrorTrackingContextValue } from './types';

package/src/validation/index.ts

@@ -1,36 +1,44 @@
 /**
- * Validation Error Tracking
+ * Error Tracking - Unified error tracking for all error types
  *
- * Automatic capture and management of Zod validation errors
- * from API client using browser CustomEvent API.
+ * Single provider and hook for validation, CORS, and network errors
  */
 
-export {
-  ValidationErrorProvider,
-  useValidationErrors,
-  type ValidationErrorDetail,
-  type StoredValidationError,
-  type ValidationErrorConfig,
-  type ValidationErrorContextValue,
-} from './ValidationErrorContext';
+// Main provider and hook
+export { ErrorTrackingProvider } from './providers/ErrorTrackingProvider';
+export { useErrors } from './hooks';
 
-export {
-  createValidationErrorToast,
-  buildToastTitle,
-  buildToastDescription,
-  formatZodIssuesForToast,
-  formatErrorForClipboard,
-  type ValidationErrorToastConfig,
-} from './ValidationErrorToast';
+// Types
+export type {
+  ErrorDetail,
+  ValidationErrorDetail,
+  CORSErrorDetail,
+  NetworkErrorDetail,
+  StoredError,
+  ErrorTrackingConfig,
+  ValidationErrorConfig,
+  CORSErrorConfig,
+  NetworkErrorConfig,
+  ErrorTrackingContextValue,
+} from './types';
+
+// Components
+export { ErrorButtons } from './components/ErrorButtons';
+export { createErrorToast } from './components/ErrorToast';
 
+// Utilities
 export {
-  ValidationErrorButtons,
-  type ValidationErrorButtonsProps,
-} from './ValidationErrorButtons';
+  formatZodIssues,
+  formatValidationErrorForClipboard,
+  formatCORSErrorForClipboard,
+  formatNetworkErrorForClipboard,
+  formatErrorTitle,
+  extractDomain,
+} from './utils/formatters';
 
 export {
   generateCurl,
   generateCurlFromError,
   getAuthToken,
   type CurlOptions,
-} from './curl-generator';
+} from './utils/curl-generator';

package/src/validation/providers/ErrorTrackingProvider.tsx

@@ -0,0 +1,265 @@
+/**
+ * ErrorTrackingProvider - Universal error tracking
+ *
+ * Single provider that tracks all error types:
+ * - Validation errors (Zod)
+ * - CORS errors
+ * - Network errors
+ *
+ * @example
+ * ```tsx
+ * // Default - all enabled
+ * <ErrorTrackingProvider>
+ *   <App />
+ * </ErrorTrackingProvider>
+ *
+ * // Custom configuration
+ * <ErrorTrackingProvider
+ *   validation={{ showToast: true, maxErrors: 100 }}
+ *   cors={{ enabled: true }}
+ *   network={{ enabled: false }}
+ * >
+ *   <App />
+ * </ErrorTrackingProvider>
+ * ```
+ */
+
+'use client';
+
+import React, { createContext, useContext, useCallback, useEffect, useState, ReactNode } from 'react';
+import { toast } from '@djangocfg/ui';
+import type {
+  ErrorDetail,
+  StoredError,
+  ErrorTrackingConfig,
+  ValidationErrorConfig,
+  CORSErrorConfig,
+  NetworkErrorConfig,
+  ValidationErrorDetail,
+  CORSErrorDetail,
+  NetworkErrorDetail,
+  ErrorTrackingContextValue,
+} from '../types';
+import {
+  DEFAULT_VALIDATION_CONFIG,
+  DEFAULT_CORS_CONFIG,
+  DEFAULT_NETWORK_CONFIG,
+  ERROR_EVENTS,
+} from '../types';
+import { createErrorToast } from '../components/ErrorToast';
+
+const ErrorTrackingContext = createContext<ErrorTrackingContextValue | undefined>(undefined);
+
+/**
+ * Generate unique ID for error
+ */
+let errorIdCounter = 0;
+function generateErrorId(type: string): string {
+  return `${type}-error-${Date.now()}-${++errorIdCounter}`;
+}
+
+export interface ErrorTrackingProviderProps {
+  children: ReactNode;
+  validation?: Partial<ValidationErrorConfig>;
+  cors?: Partial<CORSErrorConfig>;
+  network?: Partial<NetworkErrorConfig>;
+  onError?: (error: ErrorDetail) => boolean | void;
+}
+
+/**
+ * Universal Error Tracking Provider
+ *
+ * Tracks all error types with a single provider
+ */
+export function ErrorTrackingProvider({
+  children,
+  validation: userValidationConfig,
+  cors: userCorsConfig,
+  network: userNetworkConfig,
+  onError,
+}: ErrorTrackingProviderProps) {
+  const [errors, setErrors] = useState<StoredError[]>([]);
+
+  // Merge user configs with defaults
+  const validationConfig: Required<ValidationErrorConfig> = {
+    ...DEFAULT_VALIDATION_CONFIG,
+    ...userValidationConfig,
+  };
+
+  const corsConfig: Required<CORSErrorConfig> = {
+    ...DEFAULT_CORS_CONFIG,
+    ...userCorsConfig,
+  };
+
+  const networkConfig: Required<NetworkErrorConfig> = {
+    ...DEFAULT_NETWORK_CONFIG,
+    ...userNetworkConfig,
+  };
+
+  /**
+   * Clear all errors
+   */
+  const clearErrors = useCallback(() => {
+    setErrors([]);
+  }, []);
+
+  /**
+   * Clear errors by type
+   */
+  const clearErrorsByType = useCallback((type: 'validation' | 'cors' | 'network') => {
+    setErrors((prev) => prev.filter((error) => error.type !== type));
+  }, []);
+
+  /**
+   * Clear specific error
+   */
+  const clearError = useCallback((id: string) => {
+    setErrors((prev) => prev.filter((error) => error.id !== id));
+  }, []);
+
+  /**
+   * Handle any error event
+   */
+  const handleError = useCallback(
+    (detail: ErrorDetail, config: Required<ValidationErrorConfig | CORSErrorConfig | NetworkErrorConfig>) => {
+      // Create stored error with ID
+      const storedError: StoredError = {
+        ...detail,
+        id: generateErrorId(detail.type),
+      };
+
+      // Add to errors array (limited by maxErrors)
+      setErrors((prev) => {
+        const updated = [storedError, ...prev];
+        return updated.slice(0, config.maxErrors);
+      });
+
+      // Call custom error handler
+      const shouldShowToast = onError?.(detail) !== false;
+
+      // Show toast notification
+      if (config.showToast && shouldShowToast) {
+        const toastOptions = createErrorToast(detail, config);
+        toast(toastOptions);
+      }
+    },
+    [onError]
+  );
+
+  /**
+   * Setup event listeners
+   */
+  useEffect(() => {
+    // Only run in browser
+    if (typeof window === 'undefined') return;
+
+    const handlers: Array<{ event: string; handler: (e: Event) => void }> = [];
+
+    // Validation errors
+    if (validationConfig.enabled) {
+      const handler = (event: Event) => {
+        if (!(event instanceof CustomEvent)) return;
+        const detail: ValidationErrorDetail = {
+          ...event.detail,
+          type: 'validation' as const,
+        };
+        handleError(detail, validationConfig);
+      };
+      window.addEventListener(ERROR_EVENTS.VALIDATION, handler);
+      handlers.push({ event: ERROR_EVENTS.VALIDATION, handler });
+    }
+
+    // CORS errors
+    if (corsConfig.enabled) {
+      const handler = (event: Event) => {
+        if (!(event instanceof CustomEvent)) return;
+        const detail: CORSErrorDetail = {
+          ...event.detail,
+          type: 'cors' as const,
+        };
+        handleError(detail, corsConfig);
+      };
+      window.addEventListener(ERROR_EVENTS.CORS, handler);
+      handlers.push({ event: ERROR_EVENTS.CORS, handler });
+    }
+
+    // Network errors
+    if (networkConfig.enabled) {
+      const handler = (event: Event) => {
+        if (!(event instanceof CustomEvent)) return;
+        const detail: NetworkErrorDetail = {
+          ...event.detail,
+          type: 'network' as const,
+        };
+        handleError(detail, networkConfig);
+      };
+      window.addEventListener(ERROR_EVENTS.NETWORK, handler);
+      handlers.push({ event: ERROR_EVENTS.NETWORK, handler });
+    }
+
+    // Cleanup
+    return () => {
+      handlers.forEach(({ event, handler }) => {
+        window.removeEventListener(event, handler);
+      });
+    };
+  }, [handleError, validationConfig, corsConfig, networkConfig]);
+
+  // Filter errors by type
+  const validationErrors = errors.filter((e) => e.type === 'validation') as StoredError<ValidationErrorDetail>[];
+  const corsErrors = errors.filter((e) => e.type === 'cors') as StoredError<CORSErrorDetail>[];
+  const networkErrors = errors.filter((e) => e.type === 'network') as StoredError<NetworkErrorDetail>[];
+
+  const value: ErrorTrackingContextValue = {
+    errors,
+    validationErrors,
+    corsErrors,
+    networkErrors,
+    clearErrors,
+    clearErrorsByType,
+    clearError,
+    errorCount: errors.length,
+    latestError: errors[0] || null,
+    config: {
+      validation: validationConfig,
+      cors: corsConfig,
+      network: networkConfig,
+    },
+  };
+
+  return (
+    <ErrorTrackingContext.Provider value={value}>
+      {children}
+    </ErrorTrackingContext.Provider>
+  );
+}
+
+/**
+ * useErrors Hook
+ *
+ * Access errors from any component
+ *
+ * @example
+ * ```tsx
+ * function ErrorPanel() {
+ *   const { errors, validationErrors, clearErrors } = useErrors();
+ *
+ *   return (
+ *     <div>
+ *       <h3>Errors ({errors.length})</h3>
+ *       <h4>Validation: {validationErrors.length}</h4>
+ *       <button onClick={clearErrors}>Clear All</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useErrors(): ErrorTrackingContextValue {
+  const context = useContext(ErrorTrackingContext);
+
+  if (context === undefined) {
+    throw new Error('useErrors must be used within ErrorTrackingProvider');
+  }
+
+  return context;
+}