@djangocfg/ui-tools 2.1.268 → 2.1.270

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

@@ -0,0 +1,231 @@
+'use client';
+
+import { Key, Loader2, Send, Terminal } from 'lucide-react';
+import React, { useMemo } from 'react';
+
+import {
+    Button,
+    CopyButton,
+    Input,
+    Textarea,
+} from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import PrettyCode from '../../../PrettyCode';
+import { usePlaygroundContext } from '../../context/PlaygroundContext';
+import { findApiKeyById, isValidJson, parseRequestHeaders } from '../../utils';
+import {
+    CollapsibleSection,
+    EmptyState,
+    MethodBadge,
+    ScrollArea,
+    SectionLabel,
+    StatusBadge,
+    relativePath,
+} from './ui';
+
+// ─── Param fields ─────────────────────────────────────────────────────────────
+
+type Param = { name: string; type: string; required: boolean; description?: string };
+
+function ParamFields({ label, params }: { label: string; params: Param[] }) {
+    const { state, setParameters } = usePlaygroundContext();
+
+    function handleChange(name: string, value: string) {
+        setParameters({ ...state.parameters, [name]: value });
+    }
+
+    return (
+        <div className="space-y-2">
+            <SectionLabel>{label}</SectionLabel>
+            <div className="space-y-2">
+                {params.map((p) => {
+                    const value = state.parameters[p.name] ?? '';
+                    const placeholder = p.description || p.name;
+                    return (
+                        <div key={p.name} className="space-y-1">
+                            <div className="flex items-center gap-1.5">
+                                <span className="font-mono text-[11px] text-foreground/80">{p.name}</span>
+                                {p.required && (
+                                    <span className="text-[9px] text-destructive font-bold leading-none">*</span>
+                                )}
+                                <span className="font-mono text-[10px] text-muted-foreground/50">{p.type}</span>
+                            </div>
+                            <Input
+                                value={value}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                                    handleChange(p.name, e.target.value)
+                                }
+                                placeholder={placeholder}
+                                className="h-8 text-xs font-mono"
+                            />
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}
+
+// ─── RequestPanel ─────────────────────────────────────────────────────────────
+
+export function RequestPanel() {
+    const { state, apiKeys, setRequestBody, setRequestHeaders, setManualApiToken, sendRequest } =
+        usePlaygroundContext();
+
+    const ep = state.selectedEndpoint;
+
+    // ── Data (hooks must not be conditional) ─────────────────────────────────
+    const isJsonValid = state.requestBody ? isValidJson(state.requestBody) : true;
+
+    const curlCommand = useMemo(() => {
+        if (!state.requestUrl) return '';
+        const apiKey = state.selectedApiKey ? findApiKeyById(apiKeys, state.selectedApiKey) : null;
+        const hdrs = parseRequestHeaders(state.requestHeaders);
+        if (apiKey) hdrs['X-API-Key'] = apiKey.id;
+        let cmd = `curl -X ${state.requestMethod} "${state.requestUrl}"`;
+        Object.entries(hdrs).forEach(([k, v]) => { cmd += ` \\\n  -H "${k}: ${v}"`; });
+        if (state.requestBody && state.requestMethod !== 'GET' && isJsonValid) {
+            cmd += ` \\\n  -d '${state.requestBody}'`;
+        }
+        return cmd;
+    }, [state, apiKeys, isJsonValid]);
+
+    const pathParams = useMemo(
+        () => ep?.parameters?.filter((p) => ep.path.includes(`{${p.name}}`)) ?? [],
+        [ep],
+    );
+    const queryParams = useMemo(
+        () => ep?.parameters?.filter((p) => !ep.path.includes(`{${p.name}}`)) ?? [],
+        [ep],
+    );
+
+    // ── Derived ───────────────────────────────────────────────────────────────
+    const isSendDisabled = state.loading || !state.requestUrl || !isJsonValid;
+    const displayUrl     = state.requestUrl || ep?.path || '';
+    const hasBody        = ep?.method !== 'GET';
+    const bodyType       = ep?.requestBody?.type ?? '';
+    const hasPathParams  = pathParams.length > 0;
+    const hasQueryParams = queryParams.length > 0;
+    const hasCurl        = Boolean(curlCommand);
+    const epPath         = ep ? relativePath(ep.path) : '';
+    const urlChanged     = displayUrl !== epPath;
+
+    // ── Early return ──────────────────────────────────────────────────────────
+    if (!ep) {
+        return <EmptyState icon={Send} text="Select an endpoint to build a request" />;
+    }
+
+    // ── Render ────────────────────────────────────────────────────────────────
+    return (
+        <>
+            {/* Endpoint header */}
+            <div className="shrink-0 border-b px-4 py-3 bg-muted/20 space-y-1.5">
+                <div className="flex items-center gap-2">
+                    <MethodBadge method={ep.method} />
+                    <span className="font-mono text-xs text-foreground/70 truncate min-w-0">{epPath}</span>
+                </div>
+                {urlChanged && (
+                    <div className="font-mono text-[10px] text-muted-foreground/50 break-all leading-snug pl-0.5">
+                        {displayUrl}
+                    </div>
+                )}
+            </div>
+
+            {/* Scrollable fields */}
+            <ScrollArea className="px-4 py-3 space-y-3">
+
+                {hasPathParams  && <ParamFields label="Path Parameters"  params={pathParams} />}
+                {hasQueryParams && <ParamFields label="Query Parameters" params={queryParams} />}
+
+                {/* Body */}
+                {hasBody && (
+                    <div className="space-y-1.5">
+                        <div className="flex items-baseline gap-2">
+                            <SectionLabel>Body</SectionLabel>
+                            {bodyType && (
+                                <span className="text-[10px] text-muted-foreground/40 font-mono">{bodyType}</span>
+                            )}
+                        </div>
+                        <Textarea
+                            placeholder={'{\n  "key": "value"\n}'}
+                            value={state.requestBody}
+                            onChange={(e) => setRequestBody(e.target.value)}
+                            className={cn(
+                                'font-mono text-[11px] min-h-[90px] resize-y',
+                                !isJsonValid && 'border-destructive focus-visible:ring-destructive/30',
+                            )}
+                            rows={4}
+                        />
+                        {!isJsonValid && <p className="text-[10px] text-destructive">Invalid JSON</p>}
+                    </div>
+                )}
+
+                {/* Auth & Headers — collapsed by default */}
+                <CollapsibleSection
+                    label={
+                        <span className="inline-flex items-center gap-1">
+                            <Key className="h-2.5 w-2.5" />
+                            Auth &amp; Headers
+                        </span>
+                    }
+                >
+                    <div className="space-y-3 pt-2">
+                        <div className="space-y-1.5">
+                            <SectionLabel>Bearer Token</SectionLabel>
+                            <Input
+                                type="password"
+                                placeholder="Leave empty to use JWT from localStorage"
+                                value={state.manualApiToken}
+                                onChange={(e) => setManualApiToken(e.target.value)}
+                                className="font-mono text-xs h-8"
+                            />
+                        </div>
+                        <div className="space-y-1.5">
+                            <SectionLabel>Headers</SectionLabel>
+                            <Textarea
+                                value={state.requestHeaders}
+                                onChange={(e) => setRequestHeaders(e.target.value)}
+                                className="font-mono text-[11px] min-h-[60px] resize-y"
+                                rows={3}
+                            />
+                        </div>
+                    </div>
+                </CollapsibleSection>
+
+                {/* cURL — collapsed by default */}
+                {hasCurl && (
+                    <CollapsibleSection
+                        label={
+                            <span className="inline-flex items-center gap-1">
+                                <Terminal className="h-2.5 w-2.5" />
+                                cURL
+                            </span>
+                        }
+                        action={
+                            <CopyButton value={curlCommand} variant="ghost" size="sm" className="h-5 px-2 text-[10px] text-muted-foreground">
+                                Copy
+                            </CopyButton>
+                        }
+                    >
+                        <div className="rounded-md overflow-hidden mt-2">
+                            <PrettyCode data={curlCommand} language="bash" isCompact />
+                        </div>
+                    </CollapsibleSection>
+                )}
+
+                <div className="h-1" />
+            </ScrollArea>
+
+            {/* Send footer */}
+            <div className="shrink-0 border-t px-4 py-3 bg-background/95 backdrop-blur-sm">
+                <Button onClick={sendRequest} disabled={isSendDisabled} size="sm" className="w-full gap-2 h-9">
+                    {state.loading
+                        ? <><Loader2 className="h-3.5 w-3.5 animate-spin" /> Sending…</>
+                        : <><Send className="h-3.5 w-3.5" /> Send Request</>
+                    }
+                </Button>
+            </div>
+        </>
+    );
+}

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

@@ -0,0 +1,112 @@
+'use client';
+
+import { Loader2, Send, Terminal } 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 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' />;
+
+    // ── 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>
+                    )}
+                </div>
+                {hasCopy && (
+                    <CopyButton value={rawText} variant="ghost" size="sm" className="h-6 px-2 text-[10px] text-muted-foreground shrink-0">
+                        Copy
+                    </CopyButton>
+                )}
+            </div>
+
+            {/* Network/request error */}
+            {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'; 

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

@@ -37,7 +37,7 @@ const createInitialState = (): PlaygroundState => ({
   loading: false,
 
   // UI state
-  sidebarOpen: false,
+  sidebarOpen: false, // kept for API compat
 });
 
 const PlaygroundContext = createContext<PlaygroundContextType | undefined>(undefined);

package/src/tools/PrettyCode/PrettyCode.client.tsx

@@ -170,18 +170,23 @@ const PrettyCode = ({ data, language, className, mode, inline = false, customBg,
   const borderClass = isDarkMode ? 'border-zinc-700' : 'border-border';
 
   return (
-    <div ref={containerRef} className={`relative h-full ${bgClass} rounded-lg border ${borderClass} ${className || ''}`}>
-      <FloatingToolbar
-        containerRef={containerRef}
-        scrollIsolation={scrollIsolation}
-        label={
-          <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-muted/80 text-muted-foreground border border-border/50 backdrop-blur-sm">
-            {displayLanguage}
-          </span>
-        }
-      >
-        <CopyAction value={contentJson} title={labels.copyCode} />
-      </FloatingToolbar>
+    <div ref={containerRef} className={`group relative h-full ${bgClass} rounded-lg border ${borderClass} ${className || ''}`}>
+      {/* Toolbar: hidden by default, appears on hover. Absolute overlay so it doesn't shift layout. */}
+      <div className="absolute inset-0 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-150 z-30">
+        <div className="pointer-events-auto">
+          <FloatingToolbar
+            containerRef={containerRef}
+            scrollIsolation={scrollIsolation}
+            label={
+              <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-muted/80 text-muted-foreground border border-border/50 backdrop-blur-sm">
+                {displayLanguage}
+              </span>
+            }
+          >
+            <CopyAction value={contentJson} title={labels.copyCode} />
+          </FloatingToolbar>
+        </div>
+      </div>
 
       <div className="h-full overflow-auto">
         <Highlight theme={prismTheme} code={contentJson} language={normalizedLanguage as Language}>