@djangocfg/ui-tools 2.1.268 → 2.1.271

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

@@ -0,0 +1,127 @@
+'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>
+        </>
+    );
+}

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

@@ -0,0 +1,107 @@
+'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>
+    );
+};

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

@@ -0,0 +1,137 @@
+'use client';
+
+/**
+ * Shared primitive UI components used across all PlaygroundLayout panels.
+ * Keep this file free of any business logic or context reads.
+ */
+
+import { ChevronRight } from 'lucide-react';
+import React from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+
+// ─── Style helpers ────────────────────────────────────────────────────────────
+
+const METHOD_STYLES: Record<string, string> = {
+    GET:    'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/25',
+    POST:   'bg-blue-500/10    text-blue-600    dark:text-blue-400    border-blue-500/25',
+    PUT:    'bg-amber-500/10   text-amber-600   dark:text-amber-400   border-amber-500/25',
+    PATCH:  'bg-orange-500/10  text-orange-600  dark:text-orange-400  border-orange-500/25',
+    DELETE: 'bg-red-500/10     text-red-600     dark:text-red-400     border-red-500/25',
+} as const;
+
+const METHOD_FALLBACK = 'bg-muted text-muted-foreground border-border';
+
+export function getMethodStyle(method: string): string {
+    return METHOD_STYLES[method.toUpperCase()] ?? METHOD_FALLBACK;
+}
+
+export function getStatusStyle(status: number): string {
+    if (status >= 500) return 'bg-red-500/10 text-red-500 dark:text-red-400 border-red-500/25';
+    if (status >= 400) return 'bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/25';
+    if (status >= 300) return 'bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/25';
+    return 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/25';
+}
+
+export function relativePath(full: string): string {
+    try { return new URL(full).pathname; } catch { return full; }
+}
+
+// ─── Atoms ────────────────────────────────────────────────────────────────────
+
+export function MethodBadge({ method }: { method: string }) {
+    return (
+        <span className={cn(
+            'inline-flex shrink-0 items-center rounded border px-1.5 py-px',
+            'font-mono text-[10px] font-bold uppercase tracking-wider leading-none',
+            getMethodStyle(method),
+        )}>
+            {method}
+        </span>
+    );
+}
+
+export function StatusBadge({ status }: { status: number }) {
+    return (
+        <span className={cn(
+            'inline-flex items-center rounded border px-1.5 py-px',
+            'font-mono text-[11px] font-bold leading-none',
+            getStatusStyle(status),
+        )}>
+            {status}
+        </span>
+    );
+}
+
+export function SectionLabel({ children }: { children: React.ReactNode }) {
+    return (
+        <p className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/60 select-none">
+            {children}
+        </p>
+    );
+}
+
+export function Panel({ children, className }: { children: React.ReactNode; className?: string }) {
+    return (
+        <div className={cn('flex flex-col min-h-0 overflow-hidden', className)}>
+            {children}
+        </div>
+    );
+}
+
+export function ScrollArea({ children, className }: { children: React.ReactNode; className?: string }) {
+    return (
+        <div className={cn('flex-1 overflow-y-auto min-h-0', className)}>
+            {children}
+        </div>
+    );
+}
+
+export function PanelHeader({ title }: { title: string }) {
+    return (
+        <div className="shrink-0 border-b px-4 h-10 flex items-center">
+            <span className="text-[11px] font-semibold uppercase tracking-widest text-muted-foreground/50">
+                {title}
+            </span>
+        </div>
+    );
+}
+
+export function EmptyState({ icon: Icon, text }: { icon: React.ElementType; text: string }) {
+    return (
+        <div className="flex flex-col items-center justify-center h-full gap-3 px-6 text-center">
+            <Icon className="h-7 w-7 text-muted-foreground/25" />
+            <p className="text-xs text-muted-foreground">{text}</p>
+        </div>
+    );
+}
+
+export function CollapsibleSection({
+    label,
+    action,
+    children,
+    defaultOpen = false,
+}: {
+    label: React.ReactNode;
+    action?: React.ReactNode;
+    children: React.ReactNode;
+    defaultOpen?: boolean;
+}) {
+    const [open, setOpen] = React.useState(defaultOpen);
+    return (
+        <div className="space-y-0">
+            <div className="flex items-center justify-between">
+                <button
+                    type="button"
+                    onClick={() => setOpen((v) => !v)}
+                    className="flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/60 hover:text-muted-foreground transition-colors py-1"
+                >
+                    <ChevronRight className={cn('h-3 w-3 transition-transform', open && 'rotate-90')} />
+                    {label}
+                </button>
+                {action && <div className="shrink-0">{action}</div>}
+            </div>
+            {open && <div>{children}</div>}
+        </div>
+    );
+}

package/src/tools/OpenapiViewer/components/index.ts

@@ -1,14 +1,5 @@
 /**
  * Playground Components
- *
- * Centralized exports for all playground components
  */
 
 export { PlaygroundLayout } from './PlaygroundLayout';
-export { PlaygroundStepper } from './PlaygroundStepper';
-export { EndpointsLibrary } from './EndpointsLibrary';
-export { EndpointInfo } from './EndpointInfo';
-export { RequestBuilder } from './RequestBuilder';
-export { RequestParametersForm } from './RequestParametersForm';
-export { ResponseViewer } from './ResponseViewer';
-export { VersionSelector } from './VersionSelector';