@djangocfg/ui-nextjs 2.1.4 → 2.1.6

package/src/tools/OpenapiViewer/components/RequestBuilder.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import React, { useCallback } from 'react';
-import { Button, Card, CardContent, CardHeader, CardTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea, Badge, Skeleton } from '@djangocfg/ui-core/components';
-import { Play, Copy, RotateCcw, Loader2, Key, Settings, Send } from 'lucide-react';
+import { Button, Card, CardContent, CardHeader, CardTitle, Input, Textarea, CopyButton } from '@djangocfg/ui-core/components';
+import { Loader2, Key, Send } from 'lucide-react';
 import { usePlaygroundContext } from '../context/PlaygroundContext';
-import { findApiKeyById, logApiKeyUsage } from '../utils';
+import { findApiKeyById } from '../utils';
 import { isValidJson, parseRequestHeaders } from '../utils';
 import { RequestParametersForm } from './RequestParametersForm';
 import { EndpointInfo } from './EndpointInfo';
@@ -14,16 +14,8 @@ export const RequestBuilder: React.FC = () => {
   const {
     state,
     apiKeys,
-    apiKeysLoading,
-    setRequestUrl,
-    setRequestMethod,
-    setRequestHeaders,
     setRequestBody,
-    setResponse,
-    setLoading,
-    setSelectedApiKey,
     setManualApiToken,
-    copyToClipboard,
     sendRequest
   } = usePlaygroundContext();
 
@@ -143,15 +135,13 @@ export const RequestBuilder: React.FC = () => {
           <CardHeader>
             <div className="flex items-center justify-between">
               <CardTitle className="text-sm text-foreground">cURL Command</CardTitle>
-              <Button
+              <CopyButton
+                value={curlCommand}
                 variant="outline"
                 size="sm"
-                onClick={() => copyToClipboard(curlCommand)}
-                disabled={!curlCommand}
               >
-                <Copy className="h-4 w-4" />
-                <span className="hidden sm:inline">Copy cURL</span>
-              </Button>
+                Copy cURL
+              </CopyButton>
             </div>
           </CardHeader>
           <CardContent>

package/src/tools/OpenapiViewer/components/ResponseViewer.tsx

@@ -1,16 +1,35 @@
 'use client';
 
-import React from 'react';
-import { Badge, Button, Card, CardContent, CardHeader, CardTitle } from '@djangocfg/ui-core/components';
-import { Copy, XCircle, Download } from 'lucide-react';
+import React, { useMemo, useCallback } from 'react';
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, CopyButton } from '@djangocfg/ui-core/components';
+import { XCircle, Download } from 'lucide-react';
 import { usePlaygroundContext } from '../context/PlaygroundContext';
 import { getStatusColor } from '../utils';
 import JsonTree from '../../JsonTree';
 
 export const ResponseViewer: React.FC = () => {
-    const { state, copyToClipboard } = usePlaygroundContext();
+    const { state } = usePlaygroundContext();
     const { response } = state;
 
+    // Memoize response text for copy/download
+    const responseText = useMemo(() => {
+        if (!response?.data) return '';
+        return typeof response.data === 'string' ? response.data : JSON.stringify(response.data, null, 2);
+    }, [response?.data]);
+
+    const handleDownloadResponse = useCallback(() => {
+        if (!responseText) return;
+        const blob = new Blob([responseText], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'response.json';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }, [responseText]);
+
     if (!response) {
         return (
             <div className="space-y-4">
@@ -26,33 +45,14 @@ export const ResponseViewer: React.FC = () => {
         );
     }
 
-    const handleCopyResponse = () => {
-        const responseText = typeof response.data === 'string' ? response.data : JSON.stringify(response.data, null, 2);
-        copyToClipboard(responseText);
-    };
-
-    const handleDownloadResponse = () => {
-        const responseText = typeof response.data === 'string' ? response.data : JSON.stringify(response.data, null, 2);
-        const blob = new Blob([responseText], { type: 'application/json' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = 'response.json';
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-    };
-
     return (
         <div className="space-y-4">
             <div className="flex items-center justify-between">
                 <h2 className="text-lg font-semibold text-foreground">Response</h2>
                 <div className="flex items-center space-x-2">
-                    <Button variant="outline" size="sm" onClick={handleCopyResponse}>
-                        <Copy className="h-4 w-4" />
-                        <span className="hidden sm:inline">Copy</span>
-                    </Button>
+                    <CopyButton value={responseText} variant="outline" size="sm">
+                        Copy
+                    </CopyButton>
                     <Button variant="outline" size="sm" onClick={handleDownloadResponse}>
                         <Download className="h-4 w-4" />
                         <span className="hidden sm:inline">Download</span>

package/src/tools/OpenapiViewer/context/PlaygroundContext.tsx

@@ -5,7 +5,6 @@ import consola from 'consola';
 import { type ApiEndpoint, type ApiResponse, type PlaygroundContextType, type PlaygroundState, type PlaygroundStep, type PlaygroundConfig } from '../types';
 import { getDefaultVersion } from '../utils/versionManager';
 import { parseRequestHeaders, substituteUrlParameters } from '../utils';
-import { useCopy } from '@djangocfg/ui-core/hooks';
 
 const createInitialState = (): PlaygroundState => ({
   // Step management
@@ -59,11 +58,6 @@ export const PlaygroundProvider: React.FC<PlaygroundProviderProps> = ({ children
   const apiKeys = React.useMemo(() => [], []);
   const isLoadingApiKeys = false;
 
-  const { copyToClipboard } = useCopy({
-    successMessage: "cURL command copied to clipboard",
-    errorMessage: "Failed to copy cURL command"
-  });
-
   const updateState = (updates: Partial<PlaygroundState>) => {
     setState((prev) => ({ ...prev, ...updates }));
   };
@@ -330,7 +324,6 @@ export const PlaygroundProvider: React.FC<PlaygroundProviderProps> = ({ children
 
     // Actions
     clearAll,
-    copyToClipboard,
     sendRequest,
   };
 

package/src/tools/OpenapiViewer/types.ts

@@ -135,7 +135,6 @@ export interface PlaygroundContextType {
   
   // Actions
   clearAll: () => void;
-  copyToClipboard: (text: string) => void;
   sendRequest: () => Promise<void>;
 }
 

package/src/tools/PrettyCode/PrettyCode.client.tsx

@@ -1,10 +1,9 @@
 'use client';
 
 import { Highlight, Language, themes } from 'prism-react-renderer';
-import React, { useState } from 'react';
-import { Copy, Check } from 'lucide-react';
-import { useCopy } from '@djangocfg/ui-core/hooks';
-import { useTheme } from '../../hooks/useTheme';
+import React from 'react';
+import { CopyButton } from '@djangocfg/ui-core/components';
+import { useResolvedTheme } from '../../hooks/useResolvedTheme';
 
 interface PrettyCodeProps {
   data: string | object;
@@ -16,12 +15,7 @@ interface PrettyCodeProps {
 }
 
 const PrettyCode = ({ data, language, className, mode, inline = false, customBg }: PrettyCodeProps) => {
-  const detectedTheme = useTheme();
-  const [copied, setCopied] = useState(false);
-  const { copyToClipboard } = useCopy({
-    successMessage: "Code copied to clipboard",
-    errorMessage: "Failed to copy code"
-  });
+  const detectedTheme = useResolvedTheme();
 
   // Use provided mode or fall back to detected theme
   const currentTheme = mode || detectedTheme;
@@ -32,15 +26,6 @@ const PrettyCode = ({ data, language, className, mode, inline = false, customBg
 
   // Convert form object to JSON string with proper formatting
   const contentJson = typeof data === 'string' ? data : JSON.stringify(data || {}, null, 2);
-
-  // Handle copy
-  const handleCopy = async () => {
-    const success = await copyToClipboard(contentJson);
-    if (success) {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    }
-  };
   
   // Handle empty content
   if (!contentJson || contentJson.trim() === '') {
@@ -173,13 +158,13 @@ const PrettyCode = ({ data, language, className, mode, inline = false, customBg
         <span className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-background/80 text-muted-foreground border border-border/50 backdrop-blur-sm">
           {displayLanguage}
         </span>
-        <button
-          onClick={handleCopy}
-          className="inline-flex items-center justify-center p-1.5 rounded text-muted-foreground hover:text-foreground bg-background/80 border border-border/50 backdrop-blur-sm transition-colors"
+        <CopyButton
+          value={contentJson}
+          variant="ghost"
+          className="h-7 w-7 bg-background/80 border border-border/50 backdrop-blur-sm"
+          iconClassName="h-3.5 w-3.5"
           title="Copy code"
-        >
-          {copied ? <Check className="h-3.5 w-3.5 text-green-500" /> : <Copy className="h-3.5 w-3.5" />}
-        </button>
+        />
       </div>
       
       <div className="h-full overflow-auto">

package/src/tools/VideoPlayer/VideoPlayer.tsx

@@ -194,20 +194,20 @@ export const VideoPlayer = forwardRef<VideoPlayerRef, VideoPlayerProps>(({
           <MediaProvider />
           
           {/* Poster with proper aspect ratio handling */}
-          {source.poster && (
+          {posterUrl && (
             <Poster
               className="vds-poster"
-              src={source.poster}
+              src={posterUrl}
               alt={source.title || 'Video poster'}
               style={{ objectFit: 'cover' }}
             />
           )}
-          
+
           {/* Use Vidstack's built-in default layout */}
           {controls && (
             <DefaultVideoLayout
               icons={defaultLayoutIcons}
-              thumbnails={source.poster}
+              thumbnails={posterUrl}
             />
           )}
         </MediaPlayer>