@djangocfg/layouts 1.2.39 → 1.2.41

package/src/validation/types.ts

@@ -0,0 +1,278 @@
+/**
+ * Error Tracking Types
+ *
+ * Common types for all error tracking functionality
+ */
+
+import type { ZodError } from 'zod';
+
+/**
+ * Base error detail from CustomEvent
+ */
+export interface BaseErrorDetail {
+  /** Timestamp of the error */
+  timestamp: Date;
+}
+
+/**
+ * Validation error detail (from zod-validation-error event)
+ */
+export interface ValidationErrorDetail extends BaseErrorDetail {
+  type: 'validation';
+  /** Operation/function name that failed validation */
+  operation: string;
+  /** API endpoint path */
+  path: string;
+  /** HTTP method */
+  method: string;
+  /** Zod validation error */
+  error: ZodError;
+  /** Raw response data that failed validation */
+  response: any;
+}
+
+/**
+ * CORS error detail (from cors-error event)
+ */
+export interface CORSErrorDetail extends BaseErrorDetail {
+  type: 'cors';
+  /** API endpoint that was blocked */
+  url: string;
+  /** HTTP method */
+  method: string;
+  /** Error message */
+  error: string;
+}
+
+/**
+ * Network error detail (from network-error event)
+ */
+export interface NetworkErrorDetail extends BaseErrorDetail {
+  type: 'network';
+  /** API endpoint that failed */
+  url: string;
+  /** HTTP method */
+  method: string;
+  /** Error message */
+  error: string;
+  /** Status code if available */
+  statusCode?: number;
+}
+
+/**
+ * Union type of all error details
+ */
+export type ErrorDetail = ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail;
+
+/**
+ * Stored error with unique ID
+ */
+export type StoredError<T extends ErrorDetail = ErrorDetail> = T & {
+  /** Unique identifier for this error instance */
+  id: string;
+};
+
+/**
+ * Configuration for specific error type
+ */
+export interface ErrorTypeConfig {
+  /**
+   * Enable tracking for this error type
+   * @default true
+   */
+  enabled?: boolean;
+
+  /**
+   * Show toast notifications
+   * @default true
+   */
+  showToast?: boolean;
+
+  /**
+   * Maximum number of errors to keep in history
+   * @default 50
+   */
+  maxErrors?: number;
+
+  /**
+   * Toast duration in milliseconds (0 = no auto-dismiss)
+   * @default 8000 for validation, 0 for cors/network
+   */
+  duration?: number;
+}
+
+/**
+ * Validation error specific config
+ */
+export interface ValidationErrorConfig extends ErrorTypeConfig {
+  /**
+   * Show operation name in toast
+   * @default true
+   */
+  showOperation?: boolean;
+
+  /**
+   * Show endpoint path in toast
+   * @default true
+   */
+  showPath?: boolean;
+
+  /**
+   * Show error count in toast
+   * @default true
+   */
+  showErrorCount?: boolean;
+
+  /**
+   * Maximum number of issues to show in toast
+   * @default 3
+   */
+  maxIssuesInToast?: number;
+}
+
+/**
+ * CORS error specific config
+ */
+export interface CORSErrorConfig extends ErrorTypeConfig {
+  /**
+   * Show full URL in toast
+   * @default true
+   */
+  showUrl?: boolean;
+
+  /**
+   * Show HTTP method in toast
+   * @default true
+   */
+  showMethod?: boolean;
+}
+
+/**
+ * Network error specific config
+ */
+export interface NetworkErrorConfig extends ErrorTypeConfig {
+  /**
+   * Show full URL in toast
+   * @default true
+   */
+  showUrl?: boolean;
+
+  /**
+   * Show HTTP method in toast
+   * @default true
+   */
+  showMethod?: boolean;
+
+  /**
+   * Show status code in toast
+   * @default true
+   */
+  showStatusCode?: boolean;
+}
+
+/**
+ * Complete error tracking configuration
+ */
+export interface ErrorTrackingConfig {
+  /**
+   * Validation error tracking configuration
+   */
+  validation?: ValidationErrorConfig;
+
+  /**
+   * CORS error tracking configuration
+   */
+  cors?: CORSErrorConfig;
+
+  /**
+   * Network error tracking configuration
+   */
+  network?: NetworkErrorConfig;
+
+  /**
+   * Custom error handler (called before toast for all errors)
+   * Return false to prevent default toast notification
+   */
+  onError?: (error: ErrorDetail) => boolean | void;
+}
+
+/**
+ * Error tracking context value
+ */
+export interface ErrorTrackingContextValue {
+  /** All errors */
+  errors: StoredError[];
+
+  /** Validation errors only */
+  validationErrors: StoredError<ValidationErrorDetail>[];
+
+  /** CORS errors only */
+  corsErrors: StoredError<CORSErrorDetail>[];
+
+  /** Network errors only */
+  networkErrors: StoredError<NetworkErrorDetail>[];
+
+  /** Clear all errors */
+  clearErrors: () => void;
+
+  /** Clear errors by type */
+  clearErrorsByType: (type: 'validation' | 'cors' | 'network') => void;
+
+  /** Clear specific error by ID */
+  clearError: (id: string) => void;
+
+  /** Get error count */
+  errorCount: number;
+
+  /** Get latest error */
+  latestError: StoredError | null;
+
+  /** Configuration */
+  config: {
+    validation: Required<ValidationErrorConfig>;
+    cors: Required<CORSErrorConfig>;
+    network: Required<NetworkErrorConfig>;
+  };
+}
+
+/**
+ * Event names for error tracking
+ */
+export const ERROR_EVENTS = {
+  VALIDATION: 'zod-validation-error',
+  CORS: 'cors-error',
+  NETWORK: 'network-error',
+} as const;
+
+/**
+ * Default configurations
+ */
+export const DEFAULT_ERROR_CONFIG: Required<ErrorTypeConfig> = {
+  enabled: true,
+  showToast: true,
+  maxErrors: 50,
+  duration: 8000,
+};
+
+export const DEFAULT_VALIDATION_CONFIG: Required<ValidationErrorConfig> = {
+  ...DEFAULT_ERROR_CONFIG,
+  showOperation: true,
+  showPath: true,
+  showErrorCount: true,
+  maxIssuesInToast: 3,
+};
+
+export const DEFAULT_CORS_CONFIG: Required<CORSErrorConfig> = {
+  ...DEFAULT_ERROR_CONFIG,
+  duration: 0, // Don't auto-dismiss CORS errors
+  showUrl: true,
+  showMethod: true,
+};
+
+export const DEFAULT_NETWORK_CONFIG: Required<NetworkErrorConfig> = {
+  ...DEFAULT_ERROR_CONFIG,
+  duration: 0, // Don't auto-dismiss network errors
+  showUrl: true,
+  showMethod: true,
+  showStatusCode: true,
+};

package/src/validation/utils/formatters.ts

@@ -0,0 +1,114 @@
+/**
+ * Error Formatters
+ *
+ * Format different error types for display and copying
+ */
+
+import type { ZodError } from 'zod';
+import type { ValidationErrorDetail, CORSErrorDetail, NetworkErrorDetail } from '../types';
+
+/**
+ * Format Zod error issues for display
+ */
+export function formatZodIssues(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 validation error for clipboard
+ */
+export function formatValidationErrorForClipboard(detail: ValidationErrorDetail): string {
+  const errorData = {
+    type: 'validation',
+    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);
+}
+
+/**
+ * Format CORS error for clipboard
+ */
+export function formatCORSErrorForClipboard(detail: CORSErrorDetail): string {
+  const errorData = {
+    type: 'cors',
+    timestamp: detail.timestamp.toISOString(),
+    url: detail.url,
+    method: detail.method,
+    error: detail.error,
+  };
+
+  return JSON.stringify(errorData, null, 2);
+}
+
+/**
+ * Format network error for clipboard
+ */
+export function formatNetworkErrorForClipboard(detail: NetworkErrorDetail): string {
+  const errorData = {
+    type: 'network',
+    timestamp: detail.timestamp.toISOString(),
+    url: detail.url,
+    method: detail.method,
+    error: detail.error,
+    ...(detail.statusCode && { statusCode: detail.statusCode }),
+  };
+
+  return JSON.stringify(errorData, null, 2);
+}
+
+/**
+ * Extract domain from URL
+ */
+export function extractDomain(url: string): string {
+  try {
+    const urlObj = new URL(url);
+    return urlObj.origin;
+  } catch {
+    return url;
+  }
+}
+
+/**
+ * Format error title based on type
+ */
+export function formatErrorTitle(detail: ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail): string {
+  switch (detail.type) {
+    case 'validation':
+      return `❌ Validation Error in ${detail.operation}`;
+    case 'cors':
+      return '🚫 CORS Error';
+    case 'network':
+      return detail.statusCode
+        ? `⚠️ Network Error (${detail.statusCode})`
+        : '⚠️ Network Error';
+    default:
+      return '❌ Error';
+  }
+}

package/src/validation/REFACTORING.md

@@ -1,162 +0,0 @@
-# Validation Error System - Refactoring Summary
-
-## Changes Made
-
-### ✅ Added: Copy as cURL Feature
-
-**New Files:**
-- `curl-generator.ts` - cURL command generation
-- `ValidationErrorButtons.tsx` - Button component using `useCopy` hook
-
-**Key Improvements:**
-1. **Auto token injection** - Token automatically fetched from localStorage
-2. **useCopy integration** - Uses existing `useCopy` hook instead of custom clipboard logic
-3. **Two buttons layout** - Both buttons at bottom of toast (not on the side)
-4. **Clean separation** - Buttons in separate component, generator in separate file
-
-### 🗑️ Removed: Legacy Code
-
-**Removed Functions:**
-- `copyToClipboard()` from ValidationErrorToast.tsx (replaced by `useCopy`)
-- `copyCurlToClipboard()` from curl-generator.ts (replaced by `useCopy`)
-- `createCopyAction()` (replaced by ValidationErrorButtons)
-- `createCopyErrorAction()` (replaced by ValidationErrorButtons)
-- `createCopyCurlAction()` (replaced by ValidationErrorButtons)
-
-### ♻️ Refactored: Cleaner API
-
-**Before:**
-```typescript
-// Multiple separate functions
-createCopyAction(detail, onSuccess, onError);
-createCopyErrorAction(detail, onSuccess, onError);
-createCopyCurlAction(detail, onSuccess, onError);
-```
-
-**After:**
-```typescript
-// Single component with useCopy
-<ValidationErrorButtons detail={detail} />
-```
-
-### 📦 File Structure
-
-```
-validation/
-├── curl-generator.ts              # cURL generation logic only
-├── ValidationErrorButtons.tsx     # Button component (uses useCopy)
-├── ValidationErrorToast.tsx       # Toast utilities (no copy logic)
-├── ValidationErrorContext.tsx     # Provider & hook
-├── index.ts                       # Public exports
-└── README.md                      # Documentation
-```
-
-## Benefits
-
-1. **No code duplication** - Uses existing `useCopy` instead of custom clipboard code
-2. **Consistent UX** - All copy operations show the same toast feedback
-3. **Cleaner separation** - Each file has single responsibility
-4. **Easier to maintain** - Less code, clearer structure
-5. **Better DX** - Simple `<ValidationErrorButtons />` instead of 3 separate functions
-
-## API Changes
-
-### Removed Exports
-```typescript
-// ❌ No longer exported
-createCopyAction
-createCopyErrorAction
-createCopyCurlAction
-copyCurlToClipboard
-```
-
-### New Exports
-```typescript
-// ✅ New exports
-ValidationErrorButtons          // Component
-generateCurl                    // Generate cURL string
-generateCurlFromError          // Generate from error detail
-getAuthToken                   // Get token from localStorage
-```
-
-### Unchanged Exports
-```typescript
-// ✅ Still available
-ValidationErrorProvider
-useValidationErrors
-createValidationErrorToast
-formatErrorForClipboard
-buildToastTitle
-buildToastDescription
-```
-
-## Migration Guide
-
-If you were using the old `createCopyAction`:
-
-**Before:**
-```typescript
-const toastOptions = createValidationErrorToast(errorDetail, {
-  onCopySuccess: () => console.log('Copied'),
-  onCopyError: (e) => console.error(e),
-});
-```
-
-**After:**
-```typescript
-// Just use it - ValidationErrorButtons handles everything
-const toastOptions = createValidationErrorToast(errorDetail);
-// That's it! Toast feedback is automatic via useCopy
-```
-
-## Implementation Details
-
-### ValidationErrorButtons Component
-
-Uses `useCopy` hook from `@djangocfg/ui`:
-
-```typescript
-const { copyToClipboard } = useCopy();
-
-const handleCopyError = async (e) => {
-  const json = JSON.stringify(errorData, null, 2);
-  await copyToClipboard(json, '✅ Error details copied');
-};
-
-const handleCopyCurl = async (e) => {
-  const curl = generateCurlFromError(detail);
-  await copyToClipboard(curl, '✅ cURL command copied');
-};
-```
-
-### Auto Token Injection
-
-```typescript
-export function generateCurl(options: CurlOptions): string {
-  const { token = getAuthToken() || undefined } = options;
-  // ...
-}
-```
-
-Token is auto-fetched if not provided.
-
-## Testing
-
-1. Trigger validation error (e.g., visit `/api/proxies/proxies/`)
-2. Toast appears with two buttons at bottom
-3. Click **📋 Copy Error** → Success toast appears → JSON in clipboard
-4. Click **🔄 Copy cURL** → Success toast appears → cURL in clipboard
-5. Paste cURL in terminal → Works with your auth token!
-
-## What's Next
-
-Possible future enhancements:
-- [ ] Support POST/PUT body in cURL
-- [ ] Option to copy without token
-- [ ] Different formats (fetch, axios)
-- [ ] Copy request+response together
-
----
-
-**Date:** 2025-11-11
-**Impact:** Breaking changes for anyone using internal copy functions (unlikely)

package/src/validation/ValidationErrorButtons.tsx

@@ -1,80 +0,0 @@
-/**
- * ValidationErrorButtons Component
- *
- * Copy buttons for validation errors using useCopy hook
- */
-
-'use client';
-
-import React from 'react';
-import { Button, useCopy } from '@djangocfg/ui';
-import { generateCurlFromError } from './curl-generator';
-import type { ValidationErrorDetail } from './ValidationErrorToast';
-
-export interface ValidationErrorButtonsProps {
-  detail: ValidationErrorDetail;
-}
-
-export function ValidationErrorButtons({ detail }: ValidationErrorButtonsProps) {
-  const { copyToClipboard } = useCopy();
-
-  const handleCopyError = async (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    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 }),
-      })),
-      response: detail.response,
-      total_errors: detail.error.issues.length,
-    };
-
-    const formattedError = JSON.stringify(errorData, null, 2);
-    await copyToClipboard(formattedError, '✅ Error details copied');
-  };
-
-  const handleCopyCurl = async (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    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="outline"
-        onClick={handleCopyError}
-        className="h-8 text-xs"
-      >
-        📋 Copy Error
-      </Button>
-      <Button
-        size="sm"
-        variant="outline"
-        onClick={handleCopyCurl}
-        className="h-8 text-xs"
-      >
-        🔄 Copy cURL
-      </Button>
-    </div>
-  );
-}