@djangocfg/ui-tools 2.1.287 → 2.1.290

package/src/tools/OpenapiViewer/components/DocsLayout/Sidebar.tsx

@@ -1,211 +0,0 @@
-'use client';
-
-import { Search } from 'lucide-react';
-import React, { useEffect, useMemo, useState } from 'react';
-
-import {
-    Combobox,
-    Input,
-    Tooltip,
-    TooltipContent,
-    TooltipTrigger,
-} from '@djangocfg/ui-core/components';
-import { cn } from '@djangocfg/ui-core/lib';
-
-import type { ApiEndpoint, OpenApiInfo, SchemaSource } from '../../types';
-import { deduplicateEndpoints } from '../../utils/versionManager';
-import { MethodBadge, ScrollArea } from '../shared/ui';
-import { endpointAnchor } from './anchor';
-import { longestCommonPrefix, sidebarLabel, sidebarTooltip } from './sidebarLabel';
-
-type Group = {
-    category: string;
-    endpoints: ApiEndpoint[];
-    /** Longest ``/``-aligned prefix shared by every endpoint in this group.
-     *  Stripped from labels that fall back to showing the path. */
-    commonPrefix: string;
-};
-
-const METHOD_ORDER: Record<string, number> = {
-    GET: 0, POST: 1, PUT: 2, PATCH: 3, DELETE: 4,
-};
-
-function groupEndpoints(list: ApiEndpoint[]): Group[] {
-    const map = new Map<string, ApiEndpoint[]>();
-    for (const ep of list) {
-        const arr = map.get(ep.category) ?? [];
-        arr.push(ep);
-        map.set(ep.category, arr);
-    }
-    const groups: Group[] = Array.from(map.entries()).map(([category, endpoints]) => ({
-        category,
-        endpoints: [...endpoints].sort((a, b) => {
-            const byPath = a.path.localeCompare(b.path);
-            if (byPath !== 0) return byPath;
-            return (METHOD_ORDER[a.method] ?? 99) - (METHOD_ORDER[b.method] ?? 99);
-        }),
-        commonPrefix: longestCommonPrefix(endpoints.map((e) => e.path)),
-    }));
-    // Alphabetical, but "Other" sinks to the bottom.
-    groups.sort((a, b) => {
-        if (a.category === 'Other') return 1;
-        if (b.category === 'Other') return -1;
-        return a.category.localeCompare(b.category);
-    });
-    return groups;
-}
-
-export interface DocsSidebarProps {
-    info: OpenApiInfo | null;
-    endpoints: ApiEndpoint[];
-    schemas: SchemaSource[];
-    currentSchemaId: string | null;
-    onSchemaChange: (id: string) => void;
-    activeEndpointId: string | null;
-    selectedVersion: string;
-    onNavigate: (anchor: string) => void;
-}
-
-export function DocsSidebar({
-    info,
-    endpoints,
-    schemas,
-    currentSchemaId,
-    onSchemaChange,
-    activeEndpointId,
-    selectedVersion,
-    onNavigate,
-}: DocsSidebarProps) {
-    const [search, setSearch] = useState('');
-    const [debounced, setDebounced] = useState('');
-
-    useEffect(() => {
-        const id = setTimeout(() => setDebounced(search), 120);
-        return () => clearTimeout(id);
-    }, [search]);
-
-    const filteredGroups = useMemo(() => {
-        let list = deduplicateEndpoints(endpoints, selectedVersion);
-        if (debounced) {
-            const q = debounced.toLowerCase();
-            list = list.filter((e) =>
-                e.summary.toLowerCase().includes(q) ||
-                e.name.toLowerCase().includes(q) ||
-                e.description.toLowerCase().includes(q) ||
-                e.path.toLowerCase().includes(q),
-            );
-        }
-        return groupEndpoints(list);
-    }, [endpoints, debounced, selectedVersion]);
-
-    const schemaOptions = useMemo(
-        () => schemas.map((s) => ({ value: s.id, label: s.name })),
-        [schemas],
-    );
-    const hasMultipleSchemas = schemas.length > 1;
-    const apiTitle = info?.title ?? 'API Reference';
-
-    return (
-        <aside className="flex flex-col min-h-0 border-r bg-muted/10">
-            {/* Brand row */}
-            <div className="shrink-0 border-b px-4 h-12 flex items-center gap-2">
-                <span className="text-[13px] font-semibold text-foreground truncate">
-                    {apiTitle}
-                </span>
-                {info?.version && (
-                    <span className="font-mono text-[10px] text-muted-foreground/70 shrink-0">
-                        v{info.version}
-                    </span>
-                )}
-            </div>
-
-            {/* Controls */}
-            <div className="shrink-0 border-b px-3 py-3 space-y-2">
-                {hasMultipleSchemas && (
-                    <Combobox
-                        options={schemaOptions}
-                        value={currentSchemaId ?? ''}
-                        onValueChange={(id) => id && onSchemaChange(id)}
-                        placeholder="Select API"
-                        searchPlaceholder="Search APIs…"
-                        emptyText="No APIs found"
-                        className="w-full h-8 text-xs"
-                    />
-                )}
-                <div className="relative">
-                    <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground/50 pointer-events-none" />
-                    <Input
-                        placeholder="Search endpoints…"
-                        value={search}
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value)}
-                        className="pl-8 h-8 text-xs"
-                    />
-                </div>
-            </div>
-
-            <ScrollArea>
-                {filteredGroups.length === 0 ? (
-                    <div className="py-10 px-4 text-center text-xs text-muted-foreground">
-                        {debounced
-                            ? `No endpoints match "${debounced}"`
-                            : 'No endpoints in this schema'}
-                    </div>
-                ) : (
-                    <nav className="py-2">
-                        {filteredGroups.map((group) => (
-                            <div key={group.category} className="mb-4 last:mb-2">
-                                <div className="px-4 py-1.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground/50 select-none">
-                                    {group.category}
-                                </div>
-                                <div>
-                                    {group.endpoints.map((ep) => {
-                                        const anchor = endpointAnchor(ep);
-                                        const isActive = activeEndpointId === anchor;
-                                        const label = sidebarLabel(ep, group.commonPrefix);
-                                        const tooltip = sidebarTooltip(ep);
-                                        // Summary → sans-serif (reads like an outline).
-                                        // Path-tail fallback → mono (reads like code).
-                                        const useMono = !ep.summary;
-                                        return (
-                                            <Tooltip key={`${ep.method}-${ep.path}`} delayDuration={350}>
-                                                <TooltipTrigger asChild>
-                                                    <button
-                                                        onClick={() => onNavigate(anchor)}
-                                                        aria-current={isActive ? 'location' : undefined}
-                                                        className={cn(
-                                                            'relative group w-full text-left flex items-center gap-2 pl-4 pr-3 py-1.5 transition-colors',
-                                                            isActive
-                                                                ? 'bg-primary/10 text-foreground'
-                                                                : 'hover:bg-muted/40 text-foreground/75 hover:text-foreground',
-                                                        )}
-                                                    >
-                                                        {isActive && (
-                                                            <span className="absolute left-0 top-1 bottom-1 w-0.5 rounded-r bg-primary" />
-                                                        )}
-                                                        <MethodBadge method={ep.method} />
-                                                        <span
-                                                            className={cn(
-                                                                'truncate leading-tight flex-1 min-w-0',
-                                                                useMono ? 'font-mono text-[11px]' : 'text-[12px]',
-                                                                isActive && 'text-foreground font-medium',
-                                                            )}
-                                                        >
-                                                            {label}
-                                                        </span>
-                                                    </button>
-                                                </TooltipTrigger>
-                                                <TooltipContent side="right" align="center" className="font-mono text-[11px]">
-                                                    {tooltip}
-                                                </TooltipContent>
-                                            </Tooltip>
-                                        );
-                                    })}
-                                </div>
-                            </div>
-                        ))}
-                    </nav>
-                )}
-            </ScrollArea>
-        </aside>
-    );
-}

package/src/tools/OpenapiViewer/components/shared/ResponsePanel.tsx

@@ -1,127 +0,0 @@
-'use client';
-
-import { Loader2, Send, Terminal, WifiOff } from 'lucide-react';
-import { useMemo } from 'react';
-
-import { CopyButton } from '@djangocfg/ui-core/components';
-
-import JsonTree from '../../../JsonTree';
-import { usePlaygroundContext } from '../../context/PlaygroundContext';
-import { EmptyState, ScrollArea, StatusBadge } from './ui';
-
-// ─── JsonTree config (static, no re-creation on render) ──────────────────────
-
-const JSON_TREE_CONFIG = {
-    maxAutoExpandDepth: 2,
-    maxAutoExpandArrayItems: 10,
-    maxAutoExpandObjectKeys: 5,
-    maxStringLength: 200,
-    collectionLimit: 50,
-    showCollectionInfo: true,
-    showExpandControls: true,
-    showActionButtons: false,
-    preserveKeyOrder: true,
-    className: 'border-0 rounded-none',
-} as const;
-
-// ─── ResponsePanel ────────────────────────────────────────────────────────────
-
-export function ResponsePanel() {
-    const { state } = usePlaygroundContext();
-    const { response, loading, selectedEndpoint } = state;
-
-    // ── Normalise response data ───────────────────────────────────────────────
-    // Always try to parse as JSON first so JsonTree gets an object, not a string.
-    // Falls back to raw text for non-JSON responses (HTML errors, plain text, etc.)
-    const { treeData, rawText } = useMemo(() => {
-        const d = response?.data;
-        if (d == null) return { treeData: null, rawText: '' };
-
-        if (typeof d === 'string') {
-            try {
-                return { treeData: JSON.parse(d), rawText: d };
-            } catch {
-                return { treeData: null, rawText: d };
-            }
-        }
-
-        return { treeData: d, rawText: JSON.stringify(d, null, 2) };
-    }, [response?.data]);
-
-    // ── Derived ───────────────────────────────────────────────────────────────
-    const sizeKb     = rawText ? `${(rawText.length / 1024).toFixed(1)} KB` : '';
-    const duration   = response?.duration != null ? `${response.duration}ms` : '';
-    const hasError   = Boolean(response?.error);
-    const hasStatus  = response?.status != null;
-    const hasCopy    = Boolean(rawText);
-
-    // ── Early returns ─────────────────────────────────────────────────────────
-    if (loading) {
-        return (
-            <div className="flex items-center justify-center h-full gap-2">
-                <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
-                <span className="text-xs text-muted-foreground">Sending…</span>
-            </div>
-        );
-    }
-
-    if (!selectedEndpoint) return <EmptyState icon={Terminal} text="Response will appear here" />;
-    if (!response)         return <EmptyState icon={Send} text='Press "Send Request" to see the response' />;
-
-    // Pure network error (no HTTP response at all — CORS, offline, timeout)
-    if (hasError && !hasStatus) {
-        return (
-            <EmptyState
-                icon={WifiOff}
-                text={response.error!}
-                className="text-destructive [&_svg]:text-destructive"
-            />
-        );
-    }
-
-    // ── Render ────────────────────────────────────────────────────────────────
-    return (
-        <>
-            {/* Status bar */}
-            <div className="shrink-0 border-b px-4 py-2 flex items-center justify-between gap-3 bg-muted/20">
-                <div className="flex items-center gap-2 min-w-0">
-                    {hasStatus && <StatusBadge status={response.status!} />}
-                    {response.statusText && (
-                        <span className="text-xs text-muted-foreground truncate">{response.statusText}</span>
-                    )}
-                    {sizeKb && (
-                        <span className="text-[10px] text-muted-foreground/50 tabular-nums shrink-0">{sizeKb}</span>
-                    )}
-                    {duration && (
-                        <span className="text-[10px] text-muted-foreground/50 tabular-nums shrink-0">{duration}</span>
-                    )}
-                </div>
-                {hasCopy && (
-                    <CopyButton value={rawText} variant="ghost" size="sm" className="h-6 px-2 text-[10px] text-muted-foreground shrink-0">
-                        Copy
-                    </CopyButton>
-                )}
-            </div>
-
-            {/* HTTP-level error body (4xx/5xx — has status but also error flag) */}
-            {hasError && (
-                <div className="shrink-0 mx-4 mt-3 rounded border border-destructive/20 bg-destructive/5 px-3 py-2">
-                    <p className="text-xs text-destructive">{response.error}</p>
-                </div>
-            )}
-
-            {/* Body */}
-            <ScrollArea>
-                {treeData != null ? (
-                    <JsonTree title="Response Body" data={treeData} config={JSON_TREE_CONFIG} />
-                ) : rawText ? (
-                    <pre className="p-4 text-[11px] font-mono text-foreground/70 whitespace-pre-wrap break-all leading-relaxed">
-                        {rawText}
-                    </pre>
-                ) : (
-                    <div className="py-10 text-center text-xs text-muted-foreground">Empty response body</div>
-                )}
-            </ScrollArea>
-        </>
-    );
-}