@djangocfg/ui-tools 2.1.196 → 2.1.197

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

@@ -1,62 +1,55 @@
 'use client';
 
 import {
-    BarChart3, Code, Database, FileText, Filter, Grid3X3, List, Search, Settings, Shield, Users
+    Code, Filter, Grid3X3, List, Search,
 } 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
+    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 { 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" />,
+
+// 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 } = useOpenApiSchema({
+    const { endpoints, categories, loading, error, schemas, currentSchema, setCurrentSchema } = 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(
@@ -70,31 +63,33 @@ export const EndpointsLibrary: React.FC = () => {
         return filtered;
     }, [endpoints, state.selectedCategory, state.searchTerm, state.selectedVersion]);
 
-    const handleEndpointSelect = (endpoint: ApiEndpoint) => {
-        setSelectedEndpoint(endpoint);
-    };
+    const schemaOptions = useMemo(() =>
+        schemas.map((s) => ({ value: s.id, label: s.name })),
+        [schemas]
+    );
 
-    const getMethodBadges = (methods: string) => {
-        return methods.split(', ').map((method) => (
-            <Badge key={method} variant={getMethodColor(method) === 'success' ? 'default' : 'secondary'} className="text-xs">
-                {method}
-            </Badge>
-        ));
-    };
+    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-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 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-2">
-                    {Array.from({ length: 5 }).map((_, i) => (
-                        <Skeleton key={i} className="h-20 w-full" />
+                <div className="space-y-1">
+                    {Array.from({ length: 8 }).map((_, i) => (
+                        <Skeleton key={i} className="h-12 w-full" />
                     ))}
                 </div>
             </div>
@@ -103,13 +98,10 @@ export const EndpointsLibrary: React.FC = () => {
 
     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>
+            <div className="space-y-3">
                 <Card className="bg-destructive/10 border-destructive/20">
                     <CardContent className="p-4">
-                        <p className="text-sm text-destructive">Error loading endpoints: {error}</p>
+                        <p className="text-sm text-destructive">Failed to load schema: {error}</p>
                     </CardContent>
                 </Card>
             </div>
@@ -117,81 +109,104 @@ export const EndpointsLibrary: React.FC = () => {
     }
 
     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 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>
 
-                <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-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>
 
-                        {/* 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>
+                {/* Spacer */}
+                <div className="flex-1" />
 
-                        {/* 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>
+                {/* 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>
 
-            {/* Content */}
+            {/* Endpoints list */}
             {viewMode === 'table' ? (
                 <Card>
                     <Table>
                         <TableHeader>
                             <TableRow>
-                                <TableHead className="text-foreground">Methods</TableHead>
+                                <TableHead className="w-20 text-foreground">Method</TableHead>
                                 <TableHead className="text-foreground">Path</TableHead>
-                                <TableHead className="text-foreground">Description</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-8 text-muted-foreground">
+                                    <TableCell colSpan={3} className="text-center py-12 text-muted-foreground">
                                         No endpoints found
                                     </TableCell>
                                 </TableRow>
@@ -199,19 +214,21 @@ export const EndpointsLibrary: React.FC = () => {
                                 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)}
+                                        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>
-                                            <div className="flex space-x-1">
-                                                {getMethodBadges(endpoint.method)}
-                                            </div>
+                                        <TableCell className="py-2.5">
+                                            {getMethodBadge(endpoint.method)}
                                         </TableCell>
-                                        <TableCell className="font-mono text-sm text-muted-foreground">
+                                        <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-xs truncate">
+                                        <TableCell className="text-sm text-muted-foreground max-w-sm truncate py-2.5 hidden lg:table-cell">
                                             {endpoint.description}
                                         </TableCell>
                                     </TableRow>
@@ -221,34 +238,32 @@ export const EndpointsLibrary: React.FC = () => {
                     </Table>
                 </Card>
             ) : (
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                <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-8 text-muted-foreground">
+                        <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 ? 'ring-2 ring-primary' : ''
-                                    }`}
-                                onClick={() => handleEndpointSelect(endpoint)}
+                                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-3">
+                                <CardHeader className="pb-2 pt-3 px-4">
                                     <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>
+                                        <span className="font-mono text-xs text-muted-foreground truncate">
+                                            {getRelativePath(endpoint.path)}
+                                        </span>
+                                        {getMethodBadge(endpoint.method)}
                                     </CardTitle>
                                 </CardHeader>
-                                <CardContent className="space-y-2">
-                                    <p className="text-xs font-mono text-muted-foreground break-all">
-                                        {getRelativePath(endpoint.path)}
-                                    </p>
+                                <CardContent className="px-4 pb-3 pt-0">
                                     <p className="text-xs text-muted-foreground line-clamp-2">
                                         {endpoint.description}
                                     </p>
@@ -260,4 +275,4 @@ export const EndpointsLibrary: React.FC = () => {
             )}
         </div>
     );
-}; 
+};

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

@@ -29,92 +29,58 @@ export const PlaygroundLayout: React.FC = () => {
     }
   };
 
-  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>
+      {/* Stepper bar */}
       <div className="border-b">
-        <div className="container mx-auto px-4 py-4">
+        <div className="container mx-auto px-6 py-3">
           <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>
+            {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>
-                    <PlaygroundStepper />
-                  </div>
-                </SheetContent>
-              </Sheet>
+                  </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>
 
-      {/* Desktop Stepper */}
-      {!isMobile && <PlaygroundStepper />}
-
-      {/* Main Content */}
+      {/* 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>
+        {renderStepContent()}
       </div>
 
-      {/* Mobile Floating Action Button */}
+      {/* Mobile FAB */}
       {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>
@@ -122,4 +88,4 @@ export const PlaygroundLayout: React.FC = () => {
       )}
     </div>
   );
-}; 
+};

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

@@ -35,7 +35,7 @@ export const PlaygroundStepper: React.FC = () => {
   const canGoPrevious = currentIndex > 0;
 
   return (
-    <div className="flex items-center justify-between p-4 border-b">
+    <div className="flex items-center justify-between w-full">
       {/* Steps */}
       <div className="flex items-center space-x-4">
         {steps.map((step, index) => {

package/src/tools/OpenapiViewer/context/PlaygroundContext.tsx

@@ -151,11 +151,9 @@ export const PlaygroundProvider: React.FC<PlaygroundProviderProps> = ({ children
   // Endpoint management
   const setSelectedEndpoint = (endpoint: ApiEndpoint | null) => {
     if (endpoint) {
-      // All endpoints are GET only
-      // Path is already a full URL from the endpoint
       updateState({
         selectedEndpoint: endpoint,
-        requestMethod: 'GET',
+        requestMethod: endpoint.method,
         requestUrl: endpoint.path,
         parameters: {}, // Reset parameters when endpoint changes
         currentStep: 'request'