@djangocfg/ui-tools 2.1.289 → 2.1.291

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

@@ -1,439 +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, OpenApiSchema, SchemaSource } from '../../types';
-import { deduplicateEndpoints } from '../../utils/versionManager';
-import { MethodBadge, ScrollArea } from '../shared/ui';
-import { endpointAnchor } from './anchor';
-import { buildSchemaSections, groupEndpoints, type EndpointGroup } from './grouping';
-import { SchemaCopyMenu } from './SchemaCopyMenu';
-import { sidebarLabel, sidebarTooltip } from './sidebarLabel';
-
-// ─── Public props ────────────────────────────────────────────────────────────
-
-export interface DocsSidebarProps {
-    info: OpenApiInfo | null;
-    /** Active-schema endpoints — used by ``selector`` mode. */
-    endpoints: ApiEndpoint[];
-    /** All configured schemas (used by both modes). */
-    schemas: SchemaSource[];
-    currentSchemaId: string | null;
-    onSchemaChange: (id: string) => void;
-    activeEndpointId: string | null;
-    selectedVersion: string;
-    onNavigate: (anchor: string, schemaId?: string | null) => void;
-    /** Presentation mode. Default: ``selector`` (back-compat). */
-    grouping?: 'selector' | 'sections';
-    /** Required for ``sections`` mode — endpoints grouped by their source
-     *  schema id. The sidebar renders them as two-level sections. */
-    endpointsBySchema?: Record<string, ApiEndpoint[]>;
-    /** Raw active schema + resolved base URL — used by the Copy-for-AI
-     *  dropdown in the brand row. ``null`` disables the button. */
-    rawSchema?: OpenApiSchema | null;
-    resolvedBaseUrl?: string;
-}
-
-/** HTTP methods the sidebar can filter by. Reordered like the docs
- *  themselves: read, then write. ``ALL`` is a sentinel for no filter. */
-const METHOD_FILTERS = ['ALL', 'GET', 'POST', 'PUT', 'PATCH', 'DELETE'] as const;
-type MethodFilter = (typeof METHOD_FILTERS)[number];
-
-// ─── View-model types ────────────────────────────────────────────────────────
-
-interface EndpointRowVM {
-    key: string;
-    anchor: string;
-    schemaId: string | null;
-    label: string;
-    tooltip: string;
-    method: string;
-    /** Summary-less endpoints get a monospace font for the path-tail label. */
-    useMono: boolean;
-    isActive: boolean;
-}
-
-interface CategoryVM {
-    key: string;
-    category: string;
-    rows: EndpointRowVM[];
-}
-
-interface SchemaSectionVM {
-    sourceId: string;
-    sourceName: string;
-    categories: CategoryVM[];
-}
-
-type SidebarBodyVM =
-    | { kind: 'flat'; categories: CategoryVM[]; emptyText: string }
-    | { kind: 'sections'; sections: SchemaSectionVM[]; emptyText: string };
-
-// ─── Pure builders ───────────────────────────────────────────────────────────
-
-function filterEndpoints(
-    list: ApiEndpoint[],
-    query: string,
-    method: MethodFilter,
-): ApiEndpoint[] {
-    let out = list;
-    if (method !== 'ALL') {
-        out = out.filter((e) => e.method === method);
-    }
-    if (query) {
-        const q = query.toLowerCase();
-        out = out.filter(
-            (e) =>
-                e.summary.toLowerCase().includes(q) ||
-                e.name.toLowerCase().includes(q) ||
-                e.description.toLowerCase().includes(q) ||
-                e.path.toLowerCase().includes(q),
-        );
-    }
-    return out;
-}
-
-function buildCategory(
-    group: EndpointGroup,
-    activeEndpointId: string | null,
-    schemaId: string | null,
-    keyPrefix: string,
-): CategoryVM {
-    const rows: EndpointRowVM[] = group.endpoints.map((ep) => {
-        const anchor = endpointAnchor(ep, schemaId ?? ep.schemaId ?? null);
-        return {
-            key: `${ep.method}-${ep.path}`,
-            anchor,
-            schemaId: schemaId ?? ep.schemaId ?? null,
-            label: sidebarLabel(ep, group.commonPrefix),
-            tooltip: sidebarTooltip(ep),
-            method: ep.method,
-            useMono: !ep.summary,
-            isActive: activeEndpointId === anchor,
-        };
-    });
-    return {
-        key: `${keyPrefix}${group.category}`,
-        category: group.category,
-        rows,
-    };
-}
-
-const emptyTextFor = (query: string, method: MethodFilter, defaultText: string): string => {
-    if (query && method !== 'ALL') return `No ${method} endpoints match "${query}"`;
-    if (query) return `No endpoints match "${query}"`;
-    if (method !== 'ALL') return `No ${method} endpoints`;
-    return defaultText;
-};
-
-function buildFlatVM(
-    endpoints: ApiEndpoint[],
-    selectedVersion: string,
-    query: string,
-    method: MethodFilter,
-    activeEndpointId: string | null,
-): SidebarBodyVM {
-    const filtered = filterEndpoints(deduplicateEndpoints(endpoints, selectedVersion), query, method);
-    const groups = groupEndpoints(filtered);
-    return {
-        kind: 'flat',
-        categories: groups.map((g) => buildCategory(g, activeEndpointId, null, '')),
-        emptyText: emptyTextFor(query, method, 'No endpoints in this schema'),
-    };
-}
-
-function buildSectionsVM(
-    schemas: SchemaSource[],
-    endpointsBySchema: Record<string, ApiEndpoint[]>,
-    selectedVersion: string,
-    query: string,
-    method: MethodFilter,
-    activeEndpointId: string | null,
-): SidebarBodyVM {
-    const filteredMap: Record<string, ApiEndpoint[]> = {};
-    for (const src of schemas) {
-        const raw = endpointsBySchema[src.id] ?? [];
-        filteredMap[src.id] = filterEndpoints(deduplicateEndpoints(raw, selectedVersion), query, method);
-    }
-    const rawSections = buildSchemaSections(schemas, filteredMap);
-    const sections: SchemaSectionVM[] = rawSections
-        .filter((s) => s.groups.length > 0)
-        .map((s) => ({
-            sourceId: s.source.id,
-            sourceName: s.source.name,
-            categories: s.groups.map((g) => buildCategory(g, activeEndpointId, s.source.id, `${s.source.id}-`)),
-        }));
-    return {
-        kind: 'sections',
-        sections,
-        emptyText: emptyTextFor(query, method, 'No endpoints in any schema'),
-    };
-}
-
-// ─── Component ───────────────────────────────────────────────────────────────
-
-export function DocsSidebar({
-    info,
-    endpoints,
-    schemas,
-    currentSchemaId,
-    onSchemaChange,
-    activeEndpointId,
-    selectedVersion,
-    onNavigate,
-    grouping = 'selector',
-    endpointsBySchema,
-    rawSchema,
-    resolvedBaseUrl,
-}: DocsSidebarProps) {
-    const [search, setSearch] = useState('');
-    const [debounced, setDebounced] = useState('');
-    const [methodFilter, setMethodFilter] = useState<MethodFilter>('ALL');
-
-    useEffect(() => {
-        const id = setTimeout(() => setDebounced(search), 120);
-        return () => clearTimeout(id);
-    }, [search]);
-
-    const body = useMemo<SidebarBodyVM>(() => {
-        if (grouping === 'sections') {
-            return buildSectionsVM(
-                schemas,
-                endpointsBySchema ?? {},
-                selectedVersion,
-                debounced,
-                methodFilter,
-                activeEndpointId,
-            );
-        }
-        return buildFlatVM(endpoints, selectedVersion, debounced, methodFilter, activeEndpointId);
-    }, [
-        grouping,
-        schemas,
-        endpointsBySchema,
-        endpoints,
-        selectedVersion,
-        debounced,
-        methodFilter,
-        activeEndpointId,
-    ]);
-
-    const schemaOptions = useMemo(
-        () => schemas.map((s) => ({ value: s.id, label: s.name })),
-        [schemas],
-    );
-    const hasMultipleSchemas = schemas.length > 1;
-    const apiTitle = info?.title ?? 'API Reference';
-    const showCombobox = grouping === 'selector' && hasMultipleSchemas;
-    const copyReady = rawSchema !== null && rawSchema !== undefined && endpoints.length > 0;
-
-    return (
-        <aside className="flex flex-col h-full min-h-0 border-r bg-muted/10">
-            {/* Brand row */}
-            <div className="shrink-0 border-b px-3 h-12 flex items-center gap-2">
-                <div className="flex items-center gap-2 flex-1 min-w-0">
-                    <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>
-                {copyReady && (
-                    <SchemaCopyMenu
-                        schema={rawSchema ?? null}
-                        endpoints={endpoints}
-                        baseUrl={resolvedBaseUrl}
-                        variant="icon"
-                    />
-                )}
-            </div>
-
-            {/* Controls */}
-            <div className="shrink-0 border-b px-3 py-3 space-y-2">
-                {showCombobox && (
-                    <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>
-                <MethodChips value={methodFilter} onChange={setMethodFilter} />
-            </div>
-
-            <ScrollArea>
-                <SidebarBody body={body} onNavigate={onNavigate} />
-            </ScrollArea>
-        </aside>
-    );
-}
-
-function MethodChips({
-    value,
-    onChange,
-}: {
-    value: MethodFilter;
-    onChange: (v: MethodFilter) => void;
-}) {
-    return (
-        <div className="flex items-center gap-1 flex-wrap">
-            {METHOD_FILTERS.map((m) => {
-                const active = value === m;
-                return (
-                    <button
-                        key={m}
-                        type="button"
-                        onClick={() => onChange(m)}
-                        aria-pressed={active}
-                        className={cn(
-                            'px-2 py-0.5 rounded font-mono text-[10px] font-semibold tracking-wide transition-colors border',
-                            active
-                                ? 'bg-primary/15 border-primary/40 text-foreground'
-                                : 'bg-transparent border-border/40 text-muted-foreground hover:text-foreground hover:border-border',
-                        )}
-                    >
-                        {m}
-                    </button>
-                );
-            })}
-        </div>
-    );
-}
-
-// ─── Rendering primitives ────────────────────────────────────────────────────
-
-type NavigateFn = (anchor: string, schemaId?: string | null) => void;
-
-function SidebarBody({ body, onNavigate }: { body: SidebarBodyVM; onNavigate: NavigateFn }) {
-    if (body.kind === 'flat') {
-        if (body.categories.length === 0) {
-            return (
-                <div className="py-10 px-4 text-center text-xs text-muted-foreground">
-                    {body.emptyText}
-                </div>
-            );
-        }
-        return (
-            <nav className="py-2">
-                {body.categories.map((cat) => (
-                    <CategoryBlock key={cat.key} category={cat} onNavigate={onNavigate} />
-                ))}
-            </nav>
-        );
-    }
-
-    if (body.sections.length === 0) {
-        return (
-            <div className="py-10 px-4 text-center text-xs text-muted-foreground">
-                {body.emptyText}
-            </div>
-        );
-    }
-
-    return (
-        <nav className="py-2">
-            {body.sections.map((section) => (
-                <div key={section.sourceId} className="mb-5 last:mb-2">
-                    <div className="px-4 py-2 sticky top-0 z-[1] bg-muted/30 backdrop-blur-[2px] border-b border-border/30">
-                        <span className="text-[11px] font-bold uppercase tracking-[0.12em] text-foreground/80">
-                            {section.sourceName}
-                        </span>
-                    </div>
-                    {section.categories.map((cat) => (
-                        <CategoryBlock key={cat.key} category={cat} onNavigate={onNavigate} />
-                    ))}
-                </div>
-            ))}
-        </nav>
-    );
-}
-
-const CategoryBlock = React.memo(function CategoryBlock({
-    category,
-    onNavigate,
-}: {
-    category: CategoryVM;
-    onNavigate: NavigateFn;
-}) {
-    return (
-        <div 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">
-                {category.category}
-            </div>
-            <div>
-                {category.rows.map((row) => (
-                    <EndpointRow key={row.key} row={row} onNavigate={onNavigate} />
-                ))}
-            </div>
-        </div>
-    );
-});
-
-const EndpointRow = React.memo(function EndpointRow({
-    row,
-    onNavigate,
-}: {
-    row: EndpointRowVM;
-    onNavigate: NavigateFn;
-}) {
-    return (
-        <Tooltip delayDuration={350}>
-            <TooltipTrigger asChild>
-                <button
-                    onClick={() => onNavigate(row.anchor, row.schemaId)}
-                    aria-current={row.isActive ? 'location' : undefined}
-                    className={cn(
-                        'relative group w-full text-left flex items-start gap-2 pl-4 pr-3 py-1.5 transition-colors',
-                        row.isActive
-                            ? 'bg-primary/10 text-foreground'
-                            : 'hover:bg-muted/40 text-foreground/75 hover:text-foreground',
-                    )}
-                >
-                    {row.isActive && (
-                        <span className="absolute left-0 top-1 bottom-1 w-0.5 rounded-r bg-primary" />
-                    )}
-                    <span className="shrink-0 mt-[1px]">
-                        <MethodBadge method={row.method} />
-                    </span>
-                    <span
-                        className={cn(
-                            'line-clamp-2 leading-snug flex-1 min-w-0',
-                            row.useMono ? 'font-mono text-[11px] break-all' : 'text-[12px]',
-                            row.isActive && 'text-foreground font-medium',
-                        )}
-                    >
-                        {row.label}
-                    </span>
-                </button>
-            </TooltipTrigger>
-            <TooltipContent side="right" align="center" className="font-mono text-[11px]">
-                {row.tooltip}
-            </TooltipContent>
-        </Tooltip>
-    );
-});

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