@djangocfg/layouts 1.2.33 → 1.2.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.2.33",
+  "version": "1.2.34",
   "description": "Layout system and components for Unrealon applications",
   "author": {
     "name": "DjangoCFG",
@@ -63,9 +63,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.2.33",
-    "@djangocfg/og-image": "^1.2.33",
-    "@djangocfg/ui": "^1.2.33",
+    "@djangocfg/api": "^1.2.34",
+    "@djangocfg/og-image": "^1.2.34",
+    "@djangocfg/ui": "^1.2.34",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.468.0",
@@ -86,7 +86,7 @@
     "vidstack": "0.6.15"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.2.33",
+    "@djangocfg/typescript-config": "^1.2.34",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/layouts/AppLayout/components/PackageVersions/packageVersions.config.ts

@@ -16,36 +16,36 @@ export interface PackageInfo {
 /**
  * Package versions registry
  * Auto-synced from package.json files
- * Last updated: 2025-11-10T16:46:04.571Z
+ * Last updated: 2025-11-11T06:22:05.284Z
  */
 const PACKAGE_VERSIONS: PackageInfo[] = [
   {
     "name": "@djangocfg/ui",
-    "version": "1.2.33"
+    "version": "1.2.34"
   },
   {
     "name": "@djangocfg/api",
-    "version": "1.2.33"
+    "version": "1.2.34"
   },
   {
     "name": "@djangocfg/layouts",
-    "version": "1.2.33"
+    "version": "1.2.34"
   },
   {
     "name": "@djangocfg/markdown",
-    "version": "1.2.33"
+    "version": "1.2.34"
   },
   {
     "name": "@djangocfg/og-image",
-    "version": "1.2.33"
+    "version": "1.2.34"
   },
   {
     "name": "@djangocfg/eslint-config",
-    "version": "1.2.33"
+    "version": "1.2.34"
   },
   {
     "name": "@djangocfg/typescript-config",
-    "version": "1.2.33"
+    "version": "1.2.34"
   }
 ];
 

package/src/validation/README.md

@@ -8,7 +8,8 @@ Automatic Zod validation error tracking with toast notifications and copy-to-cli
 
 ✅ **Auto-capture validation errors** from API client via CustomEvent
 ✅ **Toast notifications** with destructive styling
-✅ **Copy button** - One-click copy full error details to clipboard
+✅ **Copy Error button** - One-click copy full error details JSON to clipboard
+✅ **Copy cURL button** - Generate and copy cURL command with auth token
 ✅ **Error history** - Store and manage validation errors
 ✅ **Configurable** - Customize display and behavior
 ✅ **Type-safe** - Full TypeScript support
@@ -69,7 +70,9 @@ window.dispatchEvent(new CustomEvent('zod-validation-error', {
 You'll see a toast with:
 - **Title**: "❌ Validation Error in operation_name"
 - **Description**: Endpoint, error count, first 3 errors
-- **Copy Button**: "📋 Copy" - Copies full error JSON to clipboard
+- **Two Buttons** (displayed at bottom):
+  - **📋 Copy Error** - Copies full error JSON to clipboard
+  - **🔄 Copy cURL** - Generates and copies cURL command with auth token
 
 ---
 
@@ -490,8 +493,91 @@ validation/
 
 ---
 
+## Copy as cURL Feature
+
+### What Gets Copied
+
+When you click **🔄 Copy cURL**, a ready-to-use cURL command is generated:
+
+```bash
+curl 'http://localhost:8000/api/proxies/proxies/?page=1&page_size=100' \
+  -H 'Accept: */*' \
+  -H 'Content-Type: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
+```
+
+The generator automatically:
+- ✅ Adds your auth token from localStorage
+- ✅ Formats headers properly
+- ✅ Uses correct HTTP method
+- ✅ Escapes special characters
+
+### Token Auto-Detection
+
+The cURL generator looks for your token in localStorage:
+- `access_token` (default)
+- `token`
+- `auth_token`
+
+### Manual cURL Generation
+
+You can also generate cURL commands programmatically:
+
+```typescript
+import { generateCurl, copyCurlToClipboard } from '@djangocfg/layouts/validation';
+
+// Generate cURL
+const curl = generateCurl({
+  method: 'POST',
+  path: '/api/users/',
+  token: 'your-token',
+  body: { name: 'John' },
+  headers: { 'X-Custom': 'value' },
+});
+
+// Copy to clipboard
+await copyCurlToClipboard(curl);
+```
+
+### API Reference - cURL
+
+#### `generateCurl(options: CurlOptions): string`
+
+**Options:**
+```typescript
+interface CurlOptions {
+  method: string;              // HTTP method
+  path: string;                // API path
+  token?: string;              // Auth token (auto-fetched if omitted)
+  body?: any;                  // Request body
+  headers?: Record<string, string>;  // Custom headers
+  baseUrl?: string;            // API base URL (from env by default)
+}
+```
+
+#### `generateCurlFromError(detail): string`
+
+Generate cURL from validation error details. Auto-fetches token from localStorage.
+
+#### `getAuthToken(): string | null`
+
+Get authentication token from localStorage.
+
+#### `copyCurlToClipboard(curl: string): Promise<boolean>`
+
+Copy cURL command to clipboard. Returns `true` on success.
+
+---
+
 ## Changelog
 
+### 2025-11-11 - v2.1.0
+- ✨ Added **Copy cURL button** with automatic token injection
+- ✨ Added `curl-generator.ts` utilities
+- ✨ Added two buttons layout at bottom of toast
+- ✨ Auto-detect auth token from localStorage
+- 📝 Updated documentation with cURL examples
+
 ### 2025-11-11 - v2.0.0
 - ✨ Added copy-to-clipboard button in toast
 - ✨ Added `ValidationErrorToast` utilities

package/src/validation/REFACTORING.md

@@ -0,0 +1,162 @@
+# 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

@@ -0,0 +1,80 @@
+/**
+ * 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>
+  );
+}

package/src/validation/ValidationErrorToast.tsx

@@ -10,6 +10,7 @@
 import React from 'react';
 import { ToastAction } from '@djangocfg/ui';
 import type { ZodError } from 'zod';
+import { ValidationErrorButtons } from './ValidationErrorButtons';
 
 export interface ValidationErrorDetail {
   operation: string;
@@ -89,34 +90,6 @@ export function formatErrorForClipboard(detail: ValidationErrorDetail): string {
   return JSON.stringify(errorData, null, 2);
 }
 
-/**
- * Copy text to clipboard
- */
-async function copyToClipboard(text: string): Promise<boolean> {
-  if (typeof window === 'undefined') return false;
-
-  try {
-    if (navigator.clipboard && navigator.clipboard.writeText) {
-      await navigator.clipboard.writeText(text);
-      return true;
-    } else {
-      // Fallback for older browsers
-      const textarea = document.createElement('textarea');
-      textarea.value = text;
-      textarea.style.position = 'fixed';
-      textarea.style.opacity = '0';
-      document.body.appendChild(textarea);
-      textarea.select();
-      const success = document.execCommand('copy');
-      document.body.removeChild(textarea);
-      return success;
-    }
-  } catch (error) {
-    console.error('Failed to copy to clipboard:', error);
-    return false;
-  }
-}
-
 /**
  * Build toast title from validation error
  */
@@ -165,49 +138,6 @@ export function buildToastDescription(
   return descriptionParts.join(' • ');
 }
 
-/**
- * Create copy action button for toast
- *
- * @param detail - Validation error details
- * @param onCopySuccess - Optional callback when copy succeeds
- * @param onCopyError - Optional callback when copy fails
- */
-export function createCopyAction(
-  detail: ValidationErrorDetail,
-  onCopySuccess?: () => void,
-  onCopyError?: (error: Error) => void
-): React.ReactElement<typeof ToastAction> {
-  const handleCopy = async (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    try {
-      const formattedError = formatErrorForClipboard(detail);
-      const success = await copyToClipboard(formattedError);
-
-      if (success) {
-        console.log('✅ Validation error copied to clipboard');
-        onCopySuccess?.();
-      } else {
-        throw new Error('Clipboard API failed');
-      }
-    } catch (error) {
-      console.error('❌ Failed to copy validation error:', error);
-      onCopyError?.(error as Error);
-    }
-  };
-
-  return (
-    <ToastAction
-      altText="Copy error details"
-      onClick={handleCopy}
-      className="shrink-0"
-    >
-      📋 Copy
-    </ToastAction>
-  );
-}
-
 /**
  * Create complete toast options for validation error
  *
@@ -239,13 +169,13 @@ export function createValidationErrorToast(
 
   return {
     title: buildToastTitle(detail, config),
-    description: buildToastDescription(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,
-    action: createCopyAction(
-      detail,
-      options?.onCopySuccess,
-      options?.onCopyError
-    ),
   };
 }

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

@@ -16,10 +16,21 @@ export {
 
 export {
   createValidationErrorToast,
-  createCopyAction,
   buildToastTitle,
   buildToastDescription,
   formatZodIssuesForToast,
   formatErrorForClipboard,
   type ValidationErrorToastConfig,
 } from './ValidationErrorToast';
+
+export {
+  ValidationErrorButtons,
+  type ValidationErrorButtonsProps,
+} from './ValidationErrorButtons';
+
+export {
+  generateCurl,
+  generateCurlFromError,
+  getAuthToken,
+  type CurlOptions,
+} from './curl-generator';