@djangocfg/ui-tools 2.1.268 → 2.1.271

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

@@ -1,157 +0,0 @@
-'use client';
-
-import { Key, Loader2, Send } from 'lucide-react';
-import React, { useCallback } from 'react';
-
-import {
-    Button, Card, CardContent, CardHeader, CardTitle, CopyButton, Input, Textarea
-} from '@djangocfg/ui-core/components';
-
-import PrettyCode from '../../PrettyCode';
-import { usePlaygroundContext } from '../context/PlaygroundContext';
-import { findApiKeyById, isValidJson, parseRequestHeaders } from '../utils';
-import { EndpointInfo } from './EndpointInfo';
-import { RequestParametersForm } from './RequestParametersForm';
-
-export const RequestBuilder: React.FC = () => {
-  const {
-    state,
-    apiKeys,
-    setRequestBody,
-    setManualApiToken,
-    sendRequest
-  } = usePlaygroundContext();
-
-  const isJsonValid = state.requestBody ? isValidJson(state.requestBody) : true;
-
-  // Generate cURL command
-  const generateCurlCommand = () => {
-    if (!state.requestUrl) return '';
-
-    const apiKey = state.selectedApiKey ? findApiKeyById(apiKeys, state.selectedApiKey) : null;
-    const headers = parseRequestHeaders(state.requestHeaders);
-
-    if (apiKey) {
-      headers['X-API-Key'] = apiKey.id || ''; // Note: using id as full key not available
-    }
-
-    let curl = `curl -X ${state.requestMethod} "${state.requestUrl}"`;
-
-    // Add headers
-    Object.entries(headers).forEach(([key, value]) => {
-      curl += ` \\\n  -H "${key}: ${value}"`;
-    });
-
-    // Add body for non-GET requests
-    if (state.requestBody && state.requestMethod !== 'GET' && isJsonValid) {
-      curl += ` \\\n  -d '${state.requestBody}'`;
-    }
-
-    return curl;
-  };
-
-  const curlCommand = generateCurlCommand();
-
-  const handleSendRequest = useCallback(async () => {
-    await sendRequest();
-  }, [sendRequest]);
-
-  return (
-    <div className="space-y-4">
-      {/* Endpoint Info */}
-      {state.selectedEndpoint && <EndpointInfo />}
-
-      {/* Request Parameters Form */}
-      {state.selectedEndpoint && (
-        <RequestParametersForm />
-      )}
-
-      {/* Request Body */}
-      {state.requestMethod !== 'GET' && (
-        <Card className="">
-          <CardHeader>
-            <CardTitle className="text-sm text-foreground">Request Body</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Textarea
-              placeholder='{\n  "key": "value"\n}'
-              value={state.requestBody}
-              onChange={(e) => setRequestBody(e.target.value)}
-              className={`font-mono text-sm  ${
-                !isJsonValid ? 'border-destructive' : ''
-              }`}
-              rows={6}
-            />
-            {!isJsonValid && (
-              <p className="mt-1 text-xs text-destructive">Invalid JSON format</p>
-            )}
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Bearer Token Authentication */}
-      <Card className="">
-        <CardHeader>
-          <CardTitle className="flex items-center space-x-2 text-sm text-foreground">
-            <Key className="h-4 w-4" />
-            <span>Bearer Token</span>
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="flex flex-col sm:flex-row sm:items-center gap-2">
-            <div className="flex-1">
-              <Input
-                type="password"
-                placeholder="Enter Bearer token (optional, uses JWT if empty)"
-                value={state.manualApiToken}
-                onChange={(e) => setManualApiToken(e.target.value)}
-                className="font-mono text-sm"
-              />
-              <p className="mt-1 text-xs text-muted-foreground">
-                Leave empty to use JWT token from localStorage
-              </p>
-            </div>
-            <Button
-              onClick={handleSendRequest}
-              disabled={state.loading || !state.requestUrl || !isJsonValid}
-              className="bg-primary hover:bg-primary/90 text-primary-foreground flex items-center gap-2"
-            >
-              {state.loading ? (
-                <>
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                  <span className="hidden sm:inline">Sending...</span>
-                </>
-              ) : (
-                <>
-                  <Send className="h-4 w-4" />
-                  <span className="hidden sm:inline">Send Request</span>
-                </>
-              )}
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* cURL Command */}
-      {curlCommand && (
-        <Card>
-          <CardHeader>
-            <div className="flex items-center justify-between">
-              <CardTitle className="text-sm text-foreground">cURL Command</CardTitle>
-              <CopyButton
-                value={curlCommand}
-                variant="outline"
-                size="sm"
-              >
-                Copy cURL
-              </CopyButton>
-            </div>
-          </CardHeader>
-          <CardContent>
-              <PrettyCode data={curlCommand} language="bash" />
-          </CardContent>
-        </Card>
-      )}
-    </div>
-  );
-}; 

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

@@ -1,253 +0,0 @@
-'use client';
-
-import { HelpCircle } from 'lucide-react';
-import React, { useEffect, useState } from 'react';
-
-import {
-    Accordion, AccordionContent, AccordionItem, AccordionTrigger, Badge, Button, Card, CardContent,
-    CardHeader, CardTitle, Input, Label, Tabs, TabsContent, TabsList, TabsTrigger, Textarea,
-    Tooltip, TooltipContent, TooltipProvider, TooltipTrigger
-} from '@djangocfg/ui-core/components';
-
-import { usePlaygroundContext } from '../context/PlaygroundContext';
-
-interface Parameter {
-  name: string;
-  type: string;
-  required: boolean;
-  description?: string;
-}
-
-export const RequestParametersForm: React.FC = () => {
-  const { state, setParameters } = usePlaygroundContext();
-  const [formData, setFormData] = useState<Record<string, string>>({});
-  const [activeTab, setActiveTab] = useState('required');
-
-  // Reset form data when endpoint changes
-  useEffect(() => {
-    if (state.selectedEndpoint?.parameters) {
-      const initialData: Record<string, string> = {};
-      state.selectedEndpoint.parameters.forEach(param => {
-        initialData[param.name] = '';
-      });
-      setFormData(initialData);
-    }
-  }, [state.selectedEndpoint?.path, state.selectedEndpoint?.parameters]);
-
-  const handleInputChange = (name: string, value: string) => {
-    const newFormData = {
-      ...formData,
-      [name]: value
-    };
-    setFormData(newFormData);
-
-    // Update parameters in context for URL substitution
-    setParameters(newFormData);
-  };
-
-  const handleClearForm = () => {
-    setFormData({});
-    setParameters({});
-  };
-
-  const handleGenerateJson = () => {
-    const hasData = Object.values(formData).some(value => value !== '' && value !== null && value !== undefined);
-    if (hasData) {
-      const jsonString = JSON.stringify(formData, null, 2);
-      navigator.clipboard.writeText(jsonString);
-    }
-  };
-
-  if (!state.selectedEndpoint) return null;
-
-  const requiredParams = state.selectedEndpoint.parameters?.filter(param => param.required) || [];
-  const optionalParams = state.selectedEndpoint.parameters?.filter(param => !param.required) || [];
-  const hasParameters = (state.selectedEndpoint.parameters?.length || 0) > 0;
-
-  if (!hasParameters) {
-    return null;
-  }
-
-  const hasFormData = Object.values(formData).some(value => value !== '' && value !== null && value !== undefined);
-
-  // Component for rendering parameter fields
-  const ParameterField = ({ param }: { param: Parameter }) => (
-    <div className="space-y-2">
-      <div className="flex items-center space-x-1">
-        <Label htmlFor={param.name} className="text-xs font-medium text-foreground">
-          {param.name}
-          {param.required && <span className="text-destructive ml-1">*</span>}
-        </Label>
-        {param.description && (
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <HelpCircle className="h-3 w-3 text-muted-foreground hover:text-foreground cursor-help" />
-              </TooltipTrigger>
-              <TooltipContent side="top" className="max-w-xs">
-                <p className="text-xs">{param.description}</p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        )}
-      </div>
-      <Input
-        id={param.name}
-        value={formData[param.name] || ''}
-        onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange(param.name, e.target.value)}
-        placeholder={`Enter ${param.name}${param.required ? '' : ' (optional)'}`}
-        className="text-sm"
-      />
-    </div>
-  );
-
-  // Component for rendering parameters in grid or list layout
-  const ParametersGrid = ({ params, title, badgeVariant }: {
-    params: Parameter[],
-    title: string,
-    badgeVariant: 'destructive' | 'secondary'
-  }) => {
-    if (params.length === 0) return null;
-
-    return (
-      <div className="space-y-3">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center space-x-2">
-            <Badge variant={badgeVariant} className="text-xs">{title}</Badge>
-            <span className="text-xs text-muted-foreground">
-              {params.length} parameter{params.length !== 1 ? 's' : ''}
-            </span>
-          </div>
-        </div>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {params.map((param) => (
-            <ParameterField key={param.name} param={param} />
-          ))}
-        </div>
-      </div>
-    );
-  };
-
-  return (
-    <TooltipProvider>
-      <Card>
-        <CardHeader className="pb-3">
-          <div className="flex items-center justify-between">
-            <CardTitle className="text-sm text-foreground">Request Parameters</CardTitle>
-            <div className="flex items-center space-x-2">
-              {hasFormData && (
-                <Button
-                  variant="default"
-                  size="sm"
-                  onClick={handleGenerateJson}
-                  className="text-xs"
-                >
-                  Copy JSON
-                </Button>
-              )}
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleClearForm}
-                className="text-xs"
-              >
-                Clear
-              </Button>
-            </div>
-          </div>
-        </CardHeader>
-
-        <CardContent className="space-y-4">
-          {/* Use Tabs for better organization when there are many parameters */}
-          {(requiredParams.length + optionalParams.length) > 10 ? (
-            <Tabs value={activeTab} onValueChange={setActiveTab}>
-              <TabsList className="grid w-full grid-cols-2">
-                <TabsTrigger value="required" className="text-xs">
-                  Required ({requiredParams.length})
-                </TabsTrigger>
-                <TabsTrigger value="optional" className="text-xs">
-                  Optional ({optionalParams.length})
-                </TabsTrigger>
-              </TabsList>
-
-              <TabsContent value="required" className="space-y-4">
-                <ParametersGrid
-                  params={requiredParams}
-                  title="Required"
-                  badgeVariant="destructive"
-                />
-              </TabsContent>
-
-              <TabsContent value="optional" className="space-y-4">
-                <ParametersGrid
-                  params={optionalParams}
-                  title="Optional"
-                  badgeVariant="secondary"
-                />
-              </TabsContent>
-            </Tabs>
-          ) : (
-            /* Use Accordion for smaller parameter sets */
-            <Accordion type="multiple" defaultValue={requiredParams.length > 0 ? ["required"] : ["optional"]}>
-              {requiredParams.length > 0 && (
-                <AccordionItem value="required">
-                  <AccordionTrigger className="text-sm text-foreground">
-                    <div className="flex items-center space-x-2">
-                      <Badge variant="destructive" className="text-xs">Required</Badge>
-                      <span className="text-xs text-muted-foreground">
-                        {requiredParams.length} parameter{requiredParams.length !== 1 ? 's' : ''}
-                      </span>
-                    </div>
-                  </AccordionTrigger>
-                  <AccordionContent>
-                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pt-2">
-                      {requiredParams.map((param) => (
-                        <ParameterField key={param.name} param={param} />
-                      ))}
-                    </div>
-                  </AccordionContent>
-                </AccordionItem>
-              )}
-
-              {optionalParams.length > 0 && (
-                <AccordionItem value="optional">
-                  <AccordionTrigger className="text-sm text-foreground">
-                    <div className="flex items-center space-x-2">
-                      <Badge variant="secondary" className="text-xs">Optional</Badge>
-                      <span className="text-xs text-muted-foreground">
-                        {optionalParams.length} parameter{optionalParams.length !== 1 ? 's' : ''}
-                      </span>
-                    </div>
-                  </AccordionTrigger>
-                  <AccordionContent>
-                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pt-2">
-                      {optionalParams.map((param) => (
-                        <ParameterField key={param.name} param={param} />
-                      ))}
-                    </div>
-                  </AccordionContent>
-                </AccordionItem>
-              )}
-            </Accordion>
-          )}
-
-          {/* JSON Preview */}
-          {hasFormData && (
-            <div className="space-y-2 mt-6 pt-4 border-t">
-              <Label className="text-xs text-foreground">Generated JSON</Label>
-              <Textarea
-                value={JSON.stringify(formData, null, 2)}
-                readOnly
-                className="text-xs font-mono"
-                rows={4}
-              />
-              <p className="text-xs text-muted-foreground">
-                Click &quot;Copy JSON&quot; to copy this to clipboard, then paste it into the Request Body field above.
-              </p>
-            </div>
-          )}
-        </CardContent>
-      </Card>
-    </TooltipProvider>
-  );
-}; 

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

@@ -1,173 +0,0 @@
-'use client';
-
-import { Download, XCircle } from 'lucide-react';
-import React, { useCallback, useMemo } from 'react';
-
-import {
-    Badge, Button, Card, CardContent, CardHeader, CardTitle, CopyButton
-} from '@djangocfg/ui-core/components';
-
-import JsonTree from '../../JsonTree';
-import { usePlaygroundContext } from '../context/PlaygroundContext';
-import { getStatusColor } from '../utils';
-
-export const ResponseViewer: React.FC = () => {
-    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">
-                <div className="flex items-center justify-between">
-                    <h2 className="text-lg font-semibold text-foreground">Response</h2>
-                </div>
-                <Card>
-                    <CardContent className="flex items-center justify-center py-8">
-                        <p className="text-sm text-muted-foreground">No response yet. Send a request to see the response here.</p>
-                    </CardContent>
-                </Card>
-            </div>
-        );
-    }
-
-    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">
-                    <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>
-                    </Button>
-                </div>
-            </div>
-
-            {/* Response Status */}
-            <Card>
-                <CardHeader>
-                    <CardTitle className="text-sm text-foreground">Response Information</CardTitle>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                        <div className="space-y-2">
-                            <div className="flex items-center justify-between">
-                                <span className="text-sm font-medium text-foreground">Status Code:</span>
-                                <Badge
-                                    variant={getStatusColor(response.status || 0) === 'success' ? 'default' :
-                                        getStatusColor(response.status || 0) === 'error' ? 'destructive' : 'secondary'}
-                                    className="text-xs"
-                                >
-                                    {response.status}
-                                </Badge>
-                            </div>
-                            {response.statusText && (
-                                <div className="flex items-center justify-between">
-                                    <span className="text-sm font-medium text-foreground">Status Text:</span>
-                                    <span className="text-sm text-muted-foreground">{response.statusText}</span>
-                                </div>
-                            )}
-                        </div>
-
-                        <div className="space-y-2">
-                            <div className="flex items-center justify-between">
-                                <span className="text-sm font-medium text-foreground">Response Type:</span>
-                                <span className="text-sm text-muted-foreground">
-                                    {typeof response.data === 'string' ? 'Text' : 'JSON'}
-                                </span>
-                            </div>
-                            <div className="flex items-center justify-between">
-                                <span className="text-sm font-medium text-foreground">Data Size:</span>
-                                <span className="text-sm text-muted-foreground">
-                                    {typeof response.data === 'string' ? response.data.length : JSON.stringify(response.data).length} chars
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-
-                    {response.error && (
-                        <div className="bg-destructive/10 border border-destructive/20 rounded p-3">
-                            <div className="flex items-center space-x-2">
-                                <XCircle className="h-4 w-4 text-destructive" />
-                                <p className="text-sm text-destructive">{response.error}</p>
-                            </div>
-                        </div>
-                    )}
-                </CardContent>
-            </Card>
-
-            {/* Response Body */}
-            <Card>
-                <CardContent className="p-0">
-                    {(() => {
-                        // Check if response body should be hidden
-                        const is404 = response.status === 404;
-                        const isNonJson = typeof response.data === 'string';
-
-                        if (is404 || isNonJson) {
-                            return (
-                                <div className="p-8 text-center">
-                                    <p className="text-sm text-muted-foreground">
-                                        {is404
-                                            ? 'Response body hidden for 404 Not Found status'
-                                            : 'Response body hidden for non-JSON responses'}
-                                    </p>
-                                </div>
-                            );
-                        }
-
-                        if (response.data) {
-                            return (
-                                <JsonTree
-                                    title="Response Body"
-                                    data={response.data}
-                                    config={{
-                                        // Smart defaults for API responses
-                                        maxAutoExpandDepth: 2,
-                                        maxAutoExpandArrayItems: 10,
-                                        maxAutoExpandObjectKeys: 5,
-                                        maxStringLength: 200,
-                                        collectionLimit: 50,
-                                        showCollectionInfo: true,
-                                        showExpandControls: true,
-                                        showActionButtons: false, // We have our own copy/download buttons above
-                                        preserveKeyOrder: true,
-                                        className: "border-0 rounded-none"
-                                    }}
-                                />
-                            );
-                        }
-
-                        return (
-                            <div className="p-8 text-center">
-                                <p className="text-sm text-muted-foreground">No response body available</p>
-                            </div>
-                        );
-                    })()}
-                </CardContent>
-            </Card>
-
-        </div>
-    );
-}; 

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

@@ -1,68 +0,0 @@
-'use client';
-
-import { GitBranch, Info } from 'lucide-react';
-import React from 'react';
-
-import {
-    Badge, Select, SelectContent, SelectItem, SelectTrigger, SelectValue
-} from '@djangocfg/ui-core/components';
-
-import { usePlaygroundContext } from '../context/PlaygroundContext';
-import useOpenApiSchema from '../hooks/useOpenApiSchema';
-import { API_VERSIONS, getVersionById, getVersionStats } from '../utils/versionManager';
-
-export const VersionSelector: React.FC = () => {
-  const { state, config, setSelectedVersion } = usePlaygroundContext();
-  const { endpoints } = useOpenApiSchema({
-    schemas: config.schemas,
-    defaultSchemaId: config.defaultSchemaId,
-  });
-
-  const currentVersion = getVersionById(state.selectedVersion);
-  const versionStats = getVersionStats(endpoints);
-
-  const handleVersionChange = (versionId: string) => {
-    setSelectedVersion(versionId);
-  };
-
-  return (
-    <div className="flex items-center space-x-3">
-      <div className="flex items-center space-x-2">
-        <GitBranch className="h-4 w-4 text-muted-foreground" />
-        <span className="text-sm font-medium text-foreground">API Version:</span>
-      </div>
-
-      <Select value={state.selectedVersion} onValueChange={handleVersionChange}>
-        <SelectTrigger className="w-48">
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          {API_VERSIONS.map((version) => (
-            <SelectItem key={version.id} value={version.id}>
-              <div className="flex items-center justify-between w-full">
-                <div className="flex items-center space-x-2">
-                  <span className="font-medium">{version.name}</span>
-                  {version.isDefault && (
-                    <Badge variant="secondary" className="text-xs">
-                      Default
-                    </Badge>
-                  )}
-                </div>
-                <span className="text-xs text-muted-foreground ml-2">
-                  {versionStats[version.id] || 0} endpoints
-                </span>
-              </div>
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-
-      {currentVersion && (
-        <div className="flex items-center space-x-1 text-xs text-muted-foreground">
-          <Info className="h-3 w-3" />
-          <span>{currentVersion.description}</span>
-        </div>
-      )}
-    </div>
-  );
-};