@djangocfg/ui-nextjs 2.1.89 → 2.1.91

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

@@ -1,263 +0,0 @@
-'use client';
-
-import {
-    BarChart3, Code, Database, FileText, Filter, Grid3X3, List, Search, Settings, Shield, Users
-} from 'lucide-react';
-import React, { useMemo } from 'react';
-
-import {
-    Badge, Button, Card, CardContent, CardHeader, CardTitle, Input, Select, SelectContent,
-    SelectItem, SelectTrigger, SelectValue, Skeleton, Table, TableBody, TableCell, TableHead,
-    TableHeader, TableRow
-} from '@djangocfg/ui-core/components';
-
-import { usePlaygroundContext } from '../context/PlaygroundContext';
-import useOpenApiSchema from '../hooks/useOpenApiSchema';
-import { getMethodColor } from '../utils';
-import { deduplicateEndpoints } from '../utils/versionManager';
-import { VersionSelector } from './VersionSelector';
-
-import type { ApiEndpoint } from '../types';
-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

@@ -1,125 +0,0 @@
-'use client';
-
-import { Menu, X } from 'lucide-react';
-import React from 'react';
-
-import { Button, Sheet, SheetContent, SheetTrigger } from '@djangocfg/ui-core/components';
-
-import { usePlaygroundContext } from '../context/PlaygroundContext';
-import { useMobile } from '../hooks/useMobile';
-import { EndpointsLibrary } from './EndpointsLibrary';
-import { PlaygroundStepper } from './PlaygroundStepper';
-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

@@ -1,100 +0,0 @@
-'use client';
-
-import { Check, ChevronLeft, ChevronRight, Code, FileText, Send } from 'lucide-react';
-import React from 'react';
-
-import { Badge, Button } from '@djangocfg/ui-core/components';
-
-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

@@ -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>
-  );
-};