@djangocfg/ui-nextjs 1.4.45

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

@@ -0,0 +1,253 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import {
+  Card, CardContent, CardHeader, CardTitle,
+  Input, Label, Textarea, Button, Badge,
+  Tabs, TabsContent, TabsList, TabsTrigger,
+  Accordion, AccordionContent, AccordionItem, AccordionTrigger,
+  Tooltip, TooltipContent, TooltipProvider, TooltipTrigger
+} from '@djangocfg/ui-core/components';
+import { HelpCircle } from 'lucide-react';
+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

@@ -0,0 +1,169 @@
+'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 { usePlaygroundContext } from '../context/PlaygroundContext';
+import { getStatusColor } from '../utils';
+import JsonTree from '../../JsonTree';
+
+export const ResponseViewer: React.FC = () => {
+    const { state, copyToClipboard } = usePlaygroundContext();
+    const { response } = state;
+
+    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>
+        );
+    }
+
+    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>
+                    <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

@@ -0,0 +1,64 @@
+'use client';
+
+import React from 'react';
+import { Badge, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@djangocfg/ui-core/components';
+import { GitBranch, Info } from 'lucide-react';
+import { usePlaygroundContext } from '../context/PlaygroundContext';
+import { API_VERSIONS, getVersionById, getVersionStats } from '../utils/versionManager';
+import useOpenApiSchema from '../hooks/useOpenApiSchema';
+
+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>
+  );
+};

package/src/tools/OpenapiViewer/components/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Playground Components
+ *
+ * Centralized exports for all playground components
+ */
+
+export { PlaygroundLayout } from './PlaygroundLayout';
+export { PlaygroundStepper } from './PlaygroundStepper';
+export { EndpointsLibrary } from './EndpointsLibrary';
+export { EndpointInfo } from './EndpointInfo';
+export { RequestBuilder } from './RequestBuilder';
+export { RequestParametersForm } from './RequestParametersForm';
+export { ResponseViewer } from './ResponseViewer';
+export { VersionSelector } from './VersionSelector'; 

package/src/tools/OpenapiViewer/constants.ts

@@ -0,0 +1,39 @@
+// HTTP method colors mapping
+export const HTTP_METHOD_COLORS = {
+  GET: 'success',
+  POST: 'primary',
+  PUT: 'warning',
+  DELETE: 'error',
+  PATCH: 'default',
+} as const;
+
+// HTTP status code colors mapping
+export const HTTP_STATUS_COLORS = {
+  '2': 'success',
+  '3': 'default',
+  '4': 'warning',
+  '5': 'error',
+} as const;
+
+// Default request headers
+export const DEFAULT_HEADERS = {
+  'Content-Type': 'application/json',
+} as const;
+
+// Playground steps configuration
+export const PLAYGROUND_STEPS = ['endpoints', 'request', 'response'] as const;
+
+export const STEP_CONFIG = {
+  endpoints: {
+    title: 'API Endpoints',
+    description: 'Browse and select API endpoints',
+  },
+  request: {
+    title: 'Request Builder',
+    description: 'Configure your API request',
+  },
+  response: {
+    title: 'Response Viewer',
+    description: 'View API response and details',
+  },
+} as const;