@djangocfg/ui-tools 2.1.267 → 2.1.270

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

@@ -1,149 +0,0 @@
-'use client';
-
-import { AlertCircle, ChevronDown, Code, Database, FileText } from 'lucide-react';
-import React, { useMemo } from 'react';
-
-import {
-    Badge, Card, CardContent, CardHeader, CardTitle, Collapsible, CollapsibleContent,
-    CollapsibleTrigger, CopyButton
-} from '@djangocfg/ui-core/components';
-
-import { usePlaygroundContext } from '../context/PlaygroundContext';
-import { getMethodColor, getStatusColor } from '../utils';
-
-export const EndpointInfo: React.FC = () => {
-  const { state } = usePlaygroundContext();
-  const { selectedEndpoint } = state;
-
-  // Memoize endpoint JSON for copy
-  const endpointJson = useMemo(() => {
-    if (!selectedEndpoint) return '';
-    return JSON.stringify({
-      name: selectedEndpoint.name,
-      method: selectedEndpoint.method,
-      path: selectedEndpoint.path,
-      description: selectedEndpoint.description,
-      parameters: selectedEndpoint.parameters,
-      requestBody: selectedEndpoint.requestBody,
-      responses: selectedEndpoint.responses
-    }, null, 2);
-  }, [selectedEndpoint]);
-
-  if (!selectedEndpoint) {
-    return null;
-  }
-
-  const getMethodBadges = (methods: string) => {
-    return methods.split(', ').map((method) => (
-      <Badge key={method} variant={getMethodColor(method) === 'success' ? 'default' : 'secondary'} className="text-xs">
-        {method}
-      </Badge>
-    ));
-  };
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <h2 className="text-lg font-semibold text-foreground">Selected Endpoint</h2>
-        <CopyButton value={endpointJson} variant="outline" size="sm">
-          Copy
-        </CopyButton>
-      </div>
-
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center justify-between text-sm text-foreground">
-            <div className="flex items-center space-x-2">
-              <Code className="h-4 w-4" />
-              <span className="font-medium">{selectedEndpoint.name}</span>
-            </div>
-            <div className="flex space-x-1">{getMethodBadges(selectedEndpoint.method)}</div>
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div>
-            <p className="text-xs font-mono text-muted-foreground break-all">
-              {selectedEndpoint.path}
-            </p>
-            <p className="text-xs text-muted-foreground mt-1">
-              {selectedEndpoint.description}
-            </p>
-          </div>
-
-          {/* Parameters */}
-          {selectedEndpoint.parameters && selectedEndpoint.parameters.length > 0 && (
-            <Collapsible>
-              <CollapsibleTrigger className="flex items-center space-x-2 text-sm font-medium text-foreground">
-                <Database className="h-4 w-4" />
-                <span>Parameters ({selectedEndpoint.parameters.length})</span>
-                <ChevronDown className="h-4 w-4" />
-              </CollapsibleTrigger>
-              <CollapsibleContent className="mt-2 space-y-2">
-                {selectedEndpoint.parameters.map((param, index) => (
-                  <div key={index} className="flex items-center space-x-2 text-xs">
-                    <Badge variant={param.required ? 'destructive' : 'secondary'} className="text-xs">
-                      {param.required ? 'Required' : 'Optional'}
-                    </Badge>
-                    <span className="font-mono text-muted-foreground">
-                      {param.name}: {param.type}
-                    </span>
-                    {param.description && (
-                      <span className="text-muted-foreground">- {param.description}</span>
-                    )}
-                  </div>
-                ))}
-              </CollapsibleContent>
-            </Collapsible>
-          )}
-
-          {/* Request Body */}
-          {selectedEndpoint.requestBody && (
-            <Collapsible>
-              <CollapsibleTrigger className="flex items-center space-x-2 text-sm font-medium text-foreground">
-                <FileText className="h-4 w-4" />
-                <span>Request Body</span>
-                <ChevronDown className="h-4 w-4" />
-              </CollapsibleTrigger>
-              <CollapsibleContent className="mt-2">
-                <div className="text-xs text-muted-foreground">
-                  <p>Type: {selectedEndpoint.requestBody.type}</p>
-                  {selectedEndpoint.requestBody.description && (
-                    <p className="mt-1">{selectedEndpoint.requestBody.description}</p>
-                  )}
-                </div>
-              </CollapsibleContent>
-            </Collapsible>
-          )}
-
-          {/* Responses */}
-          {selectedEndpoint.responses && selectedEndpoint.responses.length > 0 && (
-            <Collapsible>
-              <CollapsibleTrigger className="flex items-center space-x-2 text-sm font-medium text-foreground">
-                <AlertCircle className="h-4 w-4" />
-                <span>Responses ({selectedEndpoint.responses.length})</span>
-                <ChevronDown className="h-4 w-4" />
-              </CollapsibleTrigger>
-              <CollapsibleContent className="mt-2 space-y-2">
-                {selectedEndpoint.responses.map((response, index) => {
-                  const statusColor = getStatusColor(parseInt(response.code));
-                  const badgeVariant = statusColor === 'success' ? 'default' :
-                                      statusColor === 'error' ? 'destructive' : 'secondary';
-                  return (
-                    <div key={index} className="flex items-center space-x-2 text-xs">
-                      <Badge variant={badgeVariant} className="text-xs">
-                        {response.code}
-                      </Badge>
-                      <span className="text-muted-foreground">
-                        {response.description}
-                      </span>
-                    </div>
-                  );
-                })}
-              </CollapsibleContent>
-            </Collapsible>
-          )}
-        </CardContent>
-      </Card>
-    </div>
-  );
-}; 

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

@@ -1,278 +0,0 @@
-'use client';
-
-import {
-    Code, Filter, Grid3X3, List, Search,
-} from 'lucide-react';
-import React, { useMemo } from 'react';
-
-import {
-    Badge, Button, Card, CardContent, CardHeader, CardTitle, Combobox, DownloadButton, 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 { deduplicateEndpoints } from '../utils/versionManager';
-
-import type { ApiEndpoint } from '../types';
-
-// Method color mapping for badges
-const METHOD_BADGE_VARIANTS: Record<string, string> = {
-    GET: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/20',
-    POST: 'bg-blue-500/15 text-blue-600 dark:text-blue-400 border-blue-500/20',
-    PUT: 'bg-amber-500/15 text-amber-600 dark:text-amber-400 border-amber-500/20',
-    PATCH: 'bg-orange-500/15 text-orange-600 dark:text-orange-400 border-orange-500/20',
-    DELETE: 'bg-red-500/15 text-red-600 dark:text-red-400 border-red-500/20',
-};
-
-export const EndpointsLibrary: React.FC = () => {
-    const { state, config, setSelectedEndpoint, setSelectedCategory, setSearchTerm } = usePlaygroundContext();
-    const { endpoints, categories, loading, error, schemas, currentSchema, setCurrentSchema } = useOpenApiSchema({
-        schemas: config.schemas,
-        defaultSchemaId: config.defaultSchemaId,
-    });
-    const [viewMode, setViewMode] = React.useState<'table' | 'grid'>('table');
-
-    const getRelativePath = (fullPath: string): string => {
-        try {
-            const url = new URL(fullPath);
-            return url.pathname;
-        } catch {
-            return fullPath;
-        }
-    };
-
-    const filteredEndpoints = useMemo(() => {
-        let filtered = deduplicateEndpoints(endpoints, state.selectedVersion);
-
-        if (state.selectedCategory && state.selectedCategory !== 'All') {
-            filtered = filtered.filter((endpoint) => endpoint.category === state.selectedCategory);
-        }
-
-        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 schemaOptions = useMemo(() =>
-        schemas.map((s) => ({ value: s.id, label: s.name })),
-        [schemas]
-    );
-
-    const getMethodBadge = (method: string) => (
-        <Badge
-            key={method}
-            variant="outline"
-            className={`text-xs font-mono font-semibold ${METHOD_BADGE_VARIANTS[method.toUpperCase()] || ''}`}
-        >
-            {method}
-        </Badge>
-    );
-
-    if (loading) {
-        return (
-            <div className="space-y-3">
-                <div className="flex items-center gap-2">
-                    <Skeleton className="h-9 w-44" />
-                    <Skeleton className="h-9 flex-1 max-w-xs" />
-                    <div className="flex-1" />
-                    <Skeleton className="h-9 w-24" />
-                </div>
-                <div className="space-y-1">
-                    {Array.from({ length: 8 }).map((_, i) => (
-                        <Skeleton key={i} className="h-12 w-full" />
-                    ))}
-                </div>
-            </div>
-        );
-    }
-
-    if (error) {
-        return (
-            <div className="space-y-3">
-                <Card className="bg-destructive/10 border-destructive/20">
-                    <CardContent className="p-4">
-                        <p className="text-sm text-destructive">Failed to load schema: {error}</p>
-                    </CardContent>
-                </Card>
-            </div>
-        );
-    }
-
-    return (
-        <div className="space-y-3">
-            {/* Toolbar — single row */}
-            <div className="flex items-center gap-2 flex-wrap">
-                {/* Left: Schema selector */}
-                {schemas.length > 1 && (
-                    <Combobox
-                        options={schemaOptions}
-                        value={currentSchema?.id || ''}
-                        onValueChange={(id) => id && setCurrentSchema(id)}
-                        placeholder="Select API"
-                        searchPlaceholder="Search APIs..."
-                        emptyText="No APIs found"
-                        className="w-44"
-                    />
-                )}
-
-                {/* Search */}
-                <div className="relative flex-1 max-w-xs">
-                    <Search className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
-                    <Input
-                        placeholder="Search..."
-                        value={state.searchTerm}
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
-                        className="h-9 pl-8 text-sm"
-                    />
-                </div>
-
-                {/* Category filter */}
-                <Select value={state.selectedCategory} onValueChange={setSelectedCategory}>
-                    <SelectTrigger className="w-auto h-9 gap-1.5">
-                        <Filter className="h-3.5 w-3.5" />
-                        <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                        <SelectItem value="All">All</SelectItem>
-                        {categories.map((category) => (
-                            <SelectItem key={category} value={category}>
-                                {category}
-                            </SelectItem>
-                        ))}
-                    </SelectContent>
-                </Select>
-
-                {/* Spacer */}
-                <div className="flex-1" />
-
-                {/* Right: View toggle + count + download */}
-                <span className="text-xs text-muted-foreground tabular-nums hidden sm:inline">
-                    {filteredEndpoints.length} endpoint{filteredEndpoints.length !== 1 ? 's' : ''}
-                </span>
-
-                <div className="flex items-center border rounded-md">
-                    <Button
-                        variant={viewMode === 'table' ? 'default' : 'ghost'}
-                        size="icon"
-                        className="h-8 w-8 rounded-r-none"
-                        onClick={() => setViewMode('table')}
-                    >
-                        <List className="h-3.5 w-3.5" />
-                    </Button>
-                    <Button
-                        variant={viewMode === 'grid' ? 'default' : 'ghost'}
-                        size="icon"
-                        className="h-8 w-8 rounded-l-none"
-                        onClick={() => setViewMode('grid')}
-                    >
-                        <Grid3X3 className="h-3.5 w-3.5" />
-                    </Button>
-                </div>
-
-                {currentSchema && (
-                    <DownloadButton
-                        url={currentSchema.url}
-                        filename={`${currentSchema.id}-openapi.json`}
-                        variant="outline"
-                        size="sm"
-                        className="h-8"
-                    >
-                        <span className="hidden sm:inline">Schema</span>
-                    </DownloadButton>
-                )}
-            </div>
-
-            {/* Endpoints list */}
-            {viewMode === 'table' ? (
-                <Card>
-                    <Table>
-                        <TableHeader>
-                            <TableRow>
-                                <TableHead className="w-20 text-foreground">Method</TableHead>
-                                <TableHead className="text-foreground">Path</TableHead>
-                                <TableHead className="text-foreground hidden lg:table-cell">Description</TableHead>
-                            </TableRow>
-                        </TableHeader>
-                        <TableBody>
-                            {filteredEndpoints.length === 0 ? (
-                                <TableRow>
-                                    <TableCell colSpan={3} className="text-center py-12 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 &&
-                                            state.selectedEndpoint?.method === endpoint.method
-                                                ? 'bg-primary/5'
-                                                : ''
-                                        }`}
-                                        onClick={() => setSelectedEndpoint(endpoint)}
-                                    >
-                                        <TableCell className="py-2.5">
-                                            {getMethodBadge(endpoint.method)}
-                                        </TableCell>
-                                        <TableCell className="font-mono text-sm text-muted-foreground py-2.5">
-                                            {getRelativePath(endpoint.path)}
-                                        </TableCell>
-                                        <TableCell className="text-sm text-muted-foreground max-w-sm truncate py-2.5 hidden lg:table-cell">
-                                            {endpoint.description}
-                                        </TableCell>
-                                    </TableRow>
-                                ))
-                            )}
-                        </TableBody>
-                    </Table>
-                </Card>
-            ) : (
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
-                    {filteredEndpoints.length === 0 ? (
-                        <div className="col-span-full text-center py-12 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 &&
-                                    state.selectedEndpoint?.method === endpoint.method
-                                        ? 'ring-2 ring-primary'
-                                        : ''
-                                }`}
-                                onClick={() => setSelectedEndpoint(endpoint)}
-                            >
-                                <CardHeader className="pb-2 pt-3 px-4">
-                                    <CardTitle className="flex items-center justify-between text-sm">
-                                        <span className="font-mono text-xs text-muted-foreground truncate">
-                                            {getRelativePath(endpoint.path)}
-                                        </span>
-                                        {getMethodBadge(endpoint.method)}
-                                    </CardTitle>
-                                </CardHeader>
-                                <CardContent className="px-4 pb-3 pt-0">
-                                    <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,91 +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 />;
-    }
-  };
-
-  return (
-    <div>
-      {/* Stepper bar */}
-      <div className="border-b">
-        <div className="container mx-auto px-6 py-3">
-          <div className="flex items-center justify-between">
-            {/* Mobile Menu */}
-            {isMobile ? (
-              <>
-                <Sheet open={state.sidebarOpen} onOpenChange={setSidebarOpen}>
-                  <SheetTrigger asChild>
-                    <Button variant="ghost" 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>
-                <span className="text-sm font-medium text-foreground capitalize">{state.currentStep}</span>
-                <div className="w-8" /> {/* Spacer for centering */}
-              </>
-            ) : (
-              <PlaygroundStepper />
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Content */}
-      <div className="container mx-auto px-6 py-6">
-        {renderStepContent()}
-      </div>
-
-      {/* Mobile FAB */}
-      {isMobile && state.currentStep === 'request' && (
-        <div className="fixed bottom-4 right-4 z-50">
-          <Button
-            size="lg"
-            className="rounded-full shadow-lg"
-          >
-            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 w-full">
-      {/* 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>
-  );
-};