@djangocfg/ui-tools 2.1.285 → 2.1.287

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

@@ -1,228 +0,0 @@
-'use client';
-
-import { ChevronRight, Filter, Search } from 'lucide-react';
-import React, { useEffect, useMemo, useState } from 'react';
-
-import {
-    Combobox,
-    DownloadButton,
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-    Input,
-    Skeleton,
-} from '@djangocfg/ui-core/components';
-import { cn } from '@djangocfg/ui-core/lib';
-
-import { usePlaygroundContext } from '../../context/PlaygroundContext';
-import useOpenApiSchema from '../../hooks/useOpenApiSchema';
-import { deduplicateEndpoints } from '../../utils/versionManager';
-import { MethodBadge, ScrollArea, relativePath } from './ui';
-
-// ─── Endpoint row ─────────────────────────────────────────────────────────────
-
-function EndpointRow({
-    method,
-    path,
-    description,
-    isActive,
-    onClick,
-}: {
-    method: string;
-    path: string;
-    description: string;
-    isActive: boolean;
-    onClick: () => void;
-}) {
-    const displayPath = relativePath(path);
-    const rowCls = cn(
-        'group w-full text-left flex items-start gap-2.5 px-3 py-2.5 transition-colors hover:bg-muted/40',
-        isActive && 'bg-primary/[0.06] hover:bg-primary/[0.09]',
-    );
-    const arrowCls = cn(
-        'h-3.5 w-3.5 shrink-0 mt-px transition-opacity',
-        isActive ? 'text-primary opacity-100' : 'opacity-0 group-hover:opacity-30',
-    );
-
-    return (
-        <button className={rowCls} onClick={onClick}>
-            <MethodBadge method={method} />
-            <div className="flex-1 min-w-0">
-                <p className="font-mono text-[11px] text-foreground/75 truncate leading-tight">
-                    {displayPath}
-                </p>
-                {description && (
-                    <p className="text-[10px] text-muted-foreground/60 truncate leading-tight mt-0.5">
-                        {description}
-                    </p>
-                )}
-            </div>
-            <ChevronRight className={arrowCls} />
-        </button>
-    );
-}
-
-// ─── EndpointList ─────────────────────────────────────────────────────────────
-
-export function EndpointList() {
-    const { state, config, setSelectedEndpoint, setSelectedCategory, setSearchTerm } =
-        usePlaygroundContext();
-    const { endpoints, categories, loading, error, schemas, currentSchema, setCurrentSchema } =
-        useOpenApiSchema({ schemas: config.schemas, defaultSchemaId: config.defaultSchemaId });
-
-    // ── Debounced search ──────────────────────────────────────────────────────
-    const [debouncedSearch, setDebouncedSearch] = useState(state.searchTerm);
-    useEffect(() => {
-        const id = setTimeout(() => setDebouncedSearch(state.searchTerm), 150);
-        return () => clearTimeout(id);
-    }, [state.searchTerm]);
-
-    // ── Data ──────────────────────────────────────────────────────────────────
-    const schemaOptions = useMemo(
-        () => schemas.map((s) => ({ value: s.id, label: s.name })),
-        [schemas],
-    );
-
-    const filtered = useMemo(() => {
-        let list = deduplicateEndpoints(endpoints, state.selectedVersion);
-        if (state.selectedCategory !== 'All') {
-            list = list.filter((e) => e.category === state.selectedCategory);
-        }
-        if (debouncedSearch) {
-            const q = debouncedSearch.toLowerCase();
-            list = list.filter((e) =>
-                e.name.toLowerCase().includes(q) ||
-                e.description.toLowerCase().includes(q) ||
-                e.path.toLowerCase().includes(q),
-            );
-        }
-        return list;
-    }, [endpoints, state.selectedCategory, debouncedSearch, state.selectedVersion]);
-
-    // ── Derived ───────────────────────────────────────────────────────────────
-    const isFiltered = state.selectedCategory !== 'All';
-    const hasCategories = categories.length > 0;
-    const hasMultipleSchemas = schemas.length > 1;
-    const endpointLabel = `${filtered.length} endpoint${filtered.length !== 1 ? 's' : ''}`;
-    const downloadFilename = currentSchema ? `${currentSchema.id}-openapi.json` : 'openapi.json';
-
-    // ── Early returns ─────────────────────────────────────────────────────────
-    if (loading) {
-        return (
-            <div className="p-3 space-y-1.5">
-                {Array.from({ length: 12 }).map((_, i) => (
-                    <Skeleton key={i} className="h-10 w-full rounded" />
-                ))}
-            </div>
-        );
-    }
-
-    if (error) {
-        return (
-            <div className="p-4">
-                <p className="text-xs text-destructive">Failed to load schema: {error}</p>
-            </div>
-        );
-    }
-
-    // ── Render ────────────────────────────────────────────────────────────────
-    return (
-        <>
-            {/* Toolbar */}
-            <div className="shrink-0 border-b px-2.5 py-2 space-y-2">
-                {hasMultipleSchemas && (
-                    <Combobox
-                        options={schemaOptions}
-                        value={currentSchema?.id ?? ''}
-                        onValueChange={(id) => id && setCurrentSchema(id)}
-                        placeholder="Select API"
-                        searchPlaceholder="Search APIs…"
-                        emptyText="No APIs found"
-                        className="w-full h-8 text-xs"
-                    />
-                )}
-
-                <div className="flex gap-1.5">
-                    <div className="relative flex-1 min-w-0">
-                        <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={state.searchTerm}
-                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
-                            className="pl-8 h-8 text-xs"
-                        />
-                    </div>
-
-                    {hasCategories && (
-                        <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                                <button className={cn(
-                                    'relative shrink-0 flex items-center justify-center h-8 w-8 rounded-md border transition-colors',
-                                    isFiltered
-                                        ? 'border-primary bg-primary/10 text-primary'
-                                        : 'border-input bg-background text-muted-foreground hover:text-foreground hover:bg-muted/50',
-                                )}>
-                                    <Filter className="h-3.5 w-3.5" />
-                                    {isFiltered && (
-                                        <span className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-primary" />
-                                    )}
-                                </button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end" className="min-w-[160px] max-h-72 overflow-y-auto">
-                                {['All', ...categories].map((c) => (
-                                    <DropdownMenuItem
-                                        key={c}
-                                        onClick={() => setSelectedCategory(c)}
-                                        className={cn('text-xs', state.selectedCategory === c && 'bg-accent font-medium')}
-                                    >
-                                        {c}
-                                    </DropdownMenuItem>
-                                ))}
-                            </DropdownMenuContent>
-                        </DropdownMenu>
-                    )}
-                </div>
-            </div>
-
-            {/* Meta row */}
-            <div className="shrink-0 flex items-center justify-between px-3 py-1 border-b bg-muted/20">
-                <span className="text-[10px] text-muted-foreground/50 tabular-nums">{endpointLabel}</span>
-                {currentSchema && (
-                    <DownloadButton
-                        url={currentSchema.url}
-                        filename={downloadFilename}
-                        variant="ghost"
-                        size="sm"
-                        className="h-6 px-2 text-[10px] text-muted-foreground/50 hover:text-foreground"
-                    >
-                        JSON
-                    </DownloadButton>
-                )}
-            </div>
-
-            {/* List */}
-            <ScrollArea>
-                {filtered.length === 0 ? (
-                    <div className="py-10 text-center text-xs text-muted-foreground">No endpoints found</div>
-                ) : (
-                    <div className="divide-y divide-border/40">
-                        {filtered.map((ep) => (
-                            <EndpointRow
-                                key={`${ep.method}-${ep.path}`}
-                                method={ep.method}
-                                path={ep.path}
-                                description={ep.description}
-                                isActive={
-                                    state.selectedEndpoint?.path === ep.path &&
-                                    state.selectedEndpoint?.method === ep.method
-                                }
-                                onClick={() => setSelectedEndpoint(ep)}
-                            />
-                        ))}
-                    </div>
-                )}
-            </ScrollArea>
-        </>
-    );
-}

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

@@ -1,107 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import { cn } from '@djangocfg/ui-core/lib';
-
-import { useMobile } from '../../hooks/useMobile';
-import { usePlaygroundContext } from '../../context/PlaygroundContext';
-import { EndpointList } from './EndpointList';
-import { RequestPanel } from './RequestPanel';
-import { ResponsePanel } from './ResponsePanel';
-import { Panel, PanelHeader } from './ui';
-
-// ─── Mobile tab layout ────────────────────────────────────────────────────────
-
-type MobileTab = 'endpoints' | 'request' | 'response';
-
-const MOBILE_TABS: { id: MobileTab; label: string }[] = [
-    { id: 'endpoints', label: 'Endpoints' },
-    { id: 'request',   label: 'Request' },
-    { id: 'response',  label: 'Response' },
-];
-
-function MobileView() {
-    const { state } = usePlaygroundContext();
-    const [tab, setTab] = React.useState<MobileTab>('endpoints');
-
-    React.useEffect(() => {
-        if (state.selectedEndpoint) setTab('request');
-    }, [state.selectedEndpoint?.path, state.selectedEndpoint?.method]);
-
-    React.useEffect(() => {
-        if (state.response && !state.loading) setTab('response');
-    }, [state.response, state.loading]);
-
-    const hasResponse = Boolean(state.response) && !state.loading;
-
-    return (
-        <Panel className="h-full">
-            <div className="shrink-0 flex border-b">
-                {MOBILE_TABS.map((t) => {
-                    const isActive  = tab === t.id;
-                    const showDot   = t.id === 'response' && hasResponse;
-                    return (
-                        <button
-                            key={t.id}
-                            onClick={() => setTab(t.id)}
-                            className={cn(
-                                'flex-1 py-2.5 text-xs font-medium transition-colors border-b-2 -mb-px relative',
-                                isActive
-                                    ? 'border-primary text-foreground'
-                                    : 'border-transparent text-muted-foreground hover:text-foreground',
-                            )}
-                        >
-                            {t.label}
-                            {showDot && (
-                                <span className="absolute top-2 right-[calc(50%-16px)] h-1.5 w-1.5 rounded-full bg-primary" />
-                            )}
-                        </button>
-                    );
-                })}
-            </div>
-
-            <Panel className="flex-1">
-                {tab === 'endpoints' && <EndpointList />}
-                {tab === 'request'   && <RequestPanel />}
-                {tab === 'response'  && <ResponsePanel />}
-            </Panel>
-        </Panel>
-    );
-}
-
-// ─── Desktop 3-column layout ─────────────────────────────────────────────────
-
-function DesktopView() {
-    return (
-        <div className="grid grid-cols-[260px_1fr_1fr] divide-x h-full min-h-0 overflow-hidden">
-            <Panel>
-                <PanelHeader title="Endpoints" />
-                <EndpointList />
-            </Panel>
-            <Panel>
-                <PanelHeader title="Request" />
-                <RequestPanel />
-            </Panel>
-            <Panel>
-                <PanelHeader title="Response" />
-                <ResponsePanel />
-            </Panel>
-        </div>
-    );
-}
-
-// ─── Root ─────────────────────────────────────────────────────────────────────
-
-export const PlaygroundLayout: React.FC = () => {
-    const { isMobile } = useMobile();
-
-    return (
-        <div
-            className="flex flex-col overflow-hidden"
-            style={{ height: 'calc(100dvh - var(--navbar-height, 64px))' }}
-        >
-            {isMobile ? <MobileView /> : <DesktopView />}
-        </div>
-    );
-};