@djangocfg/ui-nextjs 1.4.45

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

@@ -0,0 +1,255 @@
+'use client';
+
+import React, { useMemo } from 'react';
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Skeleton } from '@djangocfg/ui-core/components';
+import { Search, Code, Database, Shield, Settings, Users, FileText, BarChart3, Filter, Grid3X3, List } from 'lucide-react';
+import { usePlaygroundContext } from '../context/PlaygroundContext';
+import type { ApiEndpoint } from '../types';
+import { getMethodColor } from '../utils';
+import useOpenApiSchema from '../hooks/useOpenApiSchema';
+import { deduplicateEndpoints } from '../utils/versionManager';
+import { VersionSelector } from './VersionSelector';
+
+const categoryIcons: Record<string, React.ReactNode> = {
+    'Authentication': <Shield className="h-4 w-4" />,
+    'Users': <Users className="h-4 w-4" />,
+    'Data': <Database className="h-4 w-4" />,
+    'Analytics': <BarChart3 className="h-4 w-4" />,
+    'Files': <FileText className="h-4 w-4" />,
+    'Settings': <Settings className="h-4 w-4" />,
+    'Other': <Code className="h-4 w-4" />,
+};
+
+export const EndpointsLibrary: React.FC = () => {
+    const { state, config, setSelectedEndpoint, setSelectedCategory, setSearchTerm } = usePlaygroundContext();
+    const { endpoints, categories, loading, error } = useOpenApiSchema({
+        schemas: config.schemas,
+        defaultSchemaId: config.defaultSchemaId,
+    });
+    const [viewMode, setViewMode] = React.useState<'table' | 'grid'>('table');
+
+    // Helper to extract relative path from full URL
+    const getRelativePath = (fullPath: string): string => {
+        try {
+            const url = new URL(fullPath);
+            return url.pathname;
+        } catch {
+            // If not a valid URL, return as is (already relative)
+            return fullPath;
+        }
+    };
+
+    const filteredEndpoints = useMemo(() => {
+        // First, deduplicate endpoints based on selected version
+        let filtered = deduplicateEndpoints(endpoints, state.selectedVersion);
+
+        // Filter by category
+        if (state.selectedCategory && state.selectedCategory !== 'All') {
+            filtered = filtered.filter((endpoint) => endpoint.category === state.selectedCategory);
+        }
+
+        // Filter by search term
+        if (state.searchTerm) {
+            const searchLower = state.searchTerm.toLowerCase();
+            filtered = filtered.filter(
+                (endpoint) =>
+                    endpoint.name.toLowerCase().includes(searchLower) ||
+                    endpoint.description.toLowerCase().includes(searchLower) ||
+                    endpoint.path.toLowerCase().includes(searchLower)
+            );
+        }
+
+        return filtered;
+    }, [endpoints, state.selectedCategory, state.searchTerm, state.selectedVersion]);
+
+    const handleEndpointSelect = (endpoint: ApiEndpoint) => {
+        setSelectedEndpoint(endpoint);
+    };
+
+    const getMethodBadges = (methods: string) => {
+        return methods.split(', ').map((method) => (
+            <Badge key={method} variant={getMethodColor(method) === 'success' ? 'default' : 'secondary'} className="text-xs">
+                {method}
+            </Badge>
+        ));
+    };
+
+    if (loading) {
+        return (
+            <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                    <h2 className="text-lg font-semibold text-foreground">API Endpoints</h2>
+                    <div className="flex items-center space-x-2">
+                        <Skeleton className="h-8 w-32" />
+                        <Skeleton className="h-8 w-48" />
+                    </div>
+                </div>
+                <div className="space-y-2">
+                    {Array.from({ length: 5 }).map((_, i) => (
+                        <Skeleton key={i} className="h-20 w-full" />
+                    ))}
+                </div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                    <h2 className="text-lg font-semibold text-foreground">API Endpoints</h2>
+                </div>
+                <Card className="bg-destructive/10 border-destructive/20">
+                    <CardContent className="p-4">
+                        <p className="text-sm text-destructive">Error loading endpoints: {error}</p>
+                    </CardContent>
+                </Card>
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-4">
+            {/* Header */}
+            <div className="flex flex-col gap-4">
+                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                    <h2 className="text-lg font-semibold text-foreground">API Endpoints</h2>
+                    <VersionSelector />
+                </div>
+
+                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                    <div className="flex items-center space-x-2">
+                        {/* View Mode Toggle */}
+                        <div className="flex items-center border rounded-md">
+                            <Button
+                                variant={viewMode === 'table' ? 'default' : 'ghost'}
+                                size="sm"
+                                onClick={() => setViewMode('table')}
+                                className="rounded-r-none"
+                            >
+                                <List className="h-4 w-4" />
+                            </Button>
+                            <Button
+                                variant={viewMode === 'grid' ? 'default' : 'ghost'}
+                                size="sm"
+                                onClick={() => setViewMode('grid')}
+                                className="rounded-l-none"
+                            >
+                                <Grid3X3 className="h-4 w-4" />
+                            </Button>
+                        </div>
+
+                        {/* Category Filter */}
+                        <Select value={state.selectedCategory} onValueChange={setSelectedCategory}>
+                            <SelectTrigger className="w-32">
+                                <Filter className="h-4 w-4 mr-2" />
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="All">All</SelectItem>
+                                {categories.map((category) => (
+                                    <SelectItem key={category} value={category}>
+                                        {category}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+
+                        {/* Search */}
+                        <div className="relative">
+                            <Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                            <Input
+                                placeholder="Search endpoints..."
+                                value={state.searchTerm}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
+                                className="w-48 pl-8"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Content */}
+            {viewMode === 'table' ? (
+                <Card>
+                    <Table>
+                        <TableHeader>
+                            <TableRow>
+                                <TableHead className="text-foreground">Methods</TableHead>
+                                <TableHead className="text-foreground">Path</TableHead>
+                                <TableHead className="text-foreground">Description</TableHead>
+                            </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                            {filteredEndpoints.length === 0 ? (
+                                <TableRow>
+                                    <TableCell colSpan={3} className="text-center py-8 text-muted-foreground">
+                                        No endpoints found
+                                    </TableCell>
+                                </TableRow>
+                            ) : (
+                                filteredEndpoints.map((endpoint) => (
+                                    <TableRow
+                                        key={`${endpoint.method}-${endpoint.path}`}
+                                        className={`cursor-pointer transition-colors hover:bg-muted/50 ${state.selectedEndpoint?.path === endpoint.path ? 'bg-primary/10' : ''
+                                            }`}
+                                        onClick={() => handleEndpointSelect(endpoint)}
+                                    >
+                                        <TableCell>
+                                            <div className="flex space-x-1">
+                                                {getMethodBadges(endpoint.method)}
+                                            </div>
+                                        </TableCell>
+                                        <TableCell className="font-mono text-sm text-muted-foreground">
+                                            {getRelativePath(endpoint.path)}
+                                        </TableCell>
+                                        <TableCell className="text-sm text-muted-foreground max-w-xs truncate">
+                                            {endpoint.description}
+                                        </TableCell>
+                                    </TableRow>
+                                ))
+                            )}
+                        </TableBody>
+                    </Table>
+                </Card>
+            ) : (
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    {filteredEndpoints.length === 0 ? (
+                        <div className="col-span-full text-center py-8 text-muted-foreground">
+                            No endpoints found
+                        </div>
+                    ) : (
+                        filteredEndpoints.map((endpoint) => (
+                            <Card
+                                key={`${endpoint.method}-${endpoint.path}`}
+                                className={`cursor-pointer transition-all hover:shadow-md ${state.selectedEndpoint?.path === endpoint.path ? 'ring-2 ring-primary' : ''
+                                    }`}
+                                onClick={() => handleEndpointSelect(endpoint)}
+                            >
+                                <CardHeader className="pb-3">
+                                    <CardTitle className="flex items-center justify-between text-sm">
+                                        <div className="flex items-center space-x-2">
+                                            {categoryIcons[endpoint.category] || <Code className="h-4 w-4" />}
+                                            <span className="truncate">{endpoint.name}</span>
+                                        </div>
+                                        <div className="flex space-x-1">
+                                            {getMethodBadges(endpoint.method)}
+                                        </div>
+                                    </CardTitle>
+                                </CardHeader>
+                                <CardContent className="space-y-2">
+                                    <p className="text-xs font-mono text-muted-foreground break-all">
+                                        {getRelativePath(endpoint.path)}
+                                    </p>
+                                    <p className="text-xs text-muted-foreground line-clamp-2">
+                                        {endpoint.description}
+                                    </p>
+                                </CardContent>
+                            </Card>
+                        ))
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}; 

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

@@ -0,0 +1,123 @@
+'use client';
+
+import React from 'react';
+import { Button, Sheet, SheetContent, SheetTrigger } from '@djangocfg/ui-core/components';
+import { Menu, X } from 'lucide-react';
+import { usePlaygroundContext } from '../context/PlaygroundContext';
+import { useMobile } from '../hooks/useMobile';
+import { PlaygroundStepper } from './PlaygroundStepper';
+import { EndpointsLibrary } from './EndpointsLibrary';
+import { RequestBuilder } from './RequestBuilder';
+import { ResponseViewer } from './ResponseViewer';
+
+export const PlaygroundLayout: React.FC = () => {
+  const { state, setSidebarOpen } = usePlaygroundContext();
+  const { isMobile } = useMobile();
+
+  const renderStepContent = () => {
+    switch (state.currentStep) {
+      case 'endpoints':
+        return <EndpointsLibrary />;
+      case 'request':
+        return <RequestBuilder />;
+      case 'response':
+        return <ResponseViewer />;
+      default:
+        return <EndpointsLibrary />;
+    }
+  };
+
+  const getStepTitle = () => {
+    switch (state.currentStep) {
+      case 'endpoints':
+        return 'API Endpoints';
+      case 'request':
+        return 'Request Builder';
+      case 'response':
+        return 'Response Viewer';
+      default:
+        return 'API Playground';
+    }
+  };
+
+  return (
+    <div className="min-h-screen">
+      {/* Header */}
+      <div className="border-b">
+        <div className="container mx-auto px-4 py-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-4">
+              <h1 className="text-xl font-bold text-foreground">API Playground</h1>
+              <p className="text-sm text-muted-foreground hidden sm:block">
+                Test and explore API endpoints
+              </p>
+            </div>
+            
+            {/* Mobile Menu */}
+            {isMobile && (
+              <Sheet open={state.sidebarOpen} onOpenChange={setSidebarOpen}>
+                <SheetTrigger asChild>
+                  <Button variant="outline" size="sm">
+                    <Menu className="h-4 w-4" />
+                  </Button>
+                </SheetTrigger>
+                <SheetContent side="left" className="w-80">
+                  <div className="space-y-4">
+                    <div className="flex items-center justify-between">
+                      <h2 className="text-lg font-semibold text-foreground">Navigation</h2>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => setSidebarOpen(false)}
+                      >
+                        <X className="h-4 w-4" />
+                      </Button>
+                    </div>
+                    <PlaygroundStepper />
+                  </div>
+                </SheetContent>
+              </Sheet>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Desktop Stepper */}
+      {!isMobile && <PlaygroundStepper />}
+
+      {/* Main Content */}
+      <div className="container mx-auto px-6 py-6">
+          {/* Step Title */}
+          <div className="mb-6">
+            <h2 className="text-2xl font-bold text-foreground">{getStepTitle()}</h2>
+            <p className="text-muted-foreground mt-1">
+              {state.currentStep === 'endpoints' && 'Browse and select API endpoints'}
+              {state.currentStep === 'request' && 'Configure your API request'}
+              {state.currentStep === 'response' && 'View API response and details'}
+            </p>
+          </div>
+
+          {/* Content */}
+          <div className="space-y-6">
+            {renderStepContent()}
+          </div>
+      </div>
+
+      {/* Mobile Floating Action Button */}
+      {isMobile && state.currentStep === 'request' && (
+        <div className="fixed bottom-4 right-4 z-50">
+          <Button
+            size="lg"
+            className="rounded-full shadow-lg"
+            onClick={() => {
+              // Auto-advance to response step
+              // This would be handled by the context
+            }}
+          >
+            Send Request
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}; 

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

@@ -0,0 +1,98 @@
+'use client';
+
+import React from 'react';
+import { Badge, Button } from '@djangocfg/ui-core/components';
+import { ChevronLeft, ChevronRight, Check, Code, Send, FileText } from 'lucide-react';
+import { usePlaygroundContext } from '../context/PlaygroundContext';
+import { PlaygroundStep } from '../types';
+
+const stepConfig = {
+  endpoints: {
+    title: 'Endpoints',
+    icon: Code,
+    description: 'Select API endpoint'
+  },
+  request: {
+    title: 'Request',
+    icon: Send,
+    description: 'Configure request'
+  },
+  response: {
+    title: 'Response',
+    icon: FileText,
+    description: 'View response'
+  }
+};
+
+export const PlaygroundStepper: React.FC = () => {
+  const { state, setCurrentStep, goToNextStep, goToPreviousStep } = usePlaygroundContext();
+  const { currentStep, steps } = state;
+
+  const currentIndex = steps.indexOf(currentStep);
+  const canGoNext = currentIndex < steps.length - 1;
+  const canGoPrevious = currentIndex > 0;
+
+  return (
+    <div className="flex items-center justify-between p-4 border-b">
+      {/* Steps */}
+      <div className="flex items-center space-x-4">
+        {steps.map((step, index) => {
+          const config = stepConfig[step];
+          const Icon = config.icon;
+          const isActive = step === currentStep;
+          const isCompleted = index < currentIndex;
+          const isClickable = index <= currentIndex + 1;
+
+          return (
+            <div key={step} className="flex items-center space-x-2">
+              <Button
+                variant={isActive ? 'default' : 'ghost'}
+                size="sm"
+                onClick={() => isClickable && setCurrentStep(step)}
+                className={`flex items-center space-x-2 ${isClickable ? 'cursor-pointer' : 'cursor-not-allowed opacity-50'
+                  }`}
+                disabled={!isClickable}
+              >
+                {isCompleted ? (
+                  <Check className="h-4 w-4" />
+                ) : (
+                  <Icon className="h-4 w-4" />
+                )}
+                <span className="hidden sm:inline">{config.title}</span>
+              </Button>
+
+              {index < steps.length - 1 && (
+                <div className="w-8 h-px bg-border" />
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Navigation */}
+      <div className="flex items-center space-x-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={goToPreviousStep}
+          disabled={!canGoPrevious}
+          className="flex items-center space-x-1"
+        >
+          <ChevronLeft className="h-4 w-4" />
+          <span className="hidden sm:inline">Previous</span>
+        </Button>
+
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={goToNextStep}
+          disabled={!canGoNext}
+          className="flex items-center space-x-1"
+        >
+          <span className="hidden sm:inline">Next</span>
+          <ChevronRight className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}; 

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

@@ -0,0 +1,164 @@
+'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 { usePlaygroundContext } from '../context/PlaygroundContext';
+import { findApiKeyById, logApiKeyUsage } from '../utils';
+import { isValidJson, parseRequestHeaders } from '../utils';
+import { RequestParametersForm } from './RequestParametersForm';
+import { EndpointInfo } from './EndpointInfo';
+import PrettyCode from '../../PrettyCode';
+
+export const RequestBuilder: React.FC = () => {
+  const {
+    state,
+    apiKeys,
+    apiKeysLoading,
+    setRequestUrl,
+    setRequestMethod,
+    setRequestHeaders,
+    setRequestBody,
+    setResponse,
+    setLoading,
+    setSelectedApiKey,
+    setManualApiToken,
+    copyToClipboard,
+    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>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => copyToClipboard(curlCommand)}
+                disabled={!curlCommand}
+              >
+                <Copy className="h-4 w-4" />
+                <span className="hidden sm:inline">Copy cURL</span>
+              </Button>
+            </div>
+          </CardHeader>
+          <CardContent>
+              <PrettyCode data={curlCommand} language="bash" />
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+};