npm - @djangocfg/ui-tools - Versions diffs - 2.1.289 → 2.1.290 - Mend

@djangocfg/ui-tools 2.1.289 → 2.1.290

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (97) hide show

package/src/tools/OpenapiViewer/components/shared/ResponsePanel/PreviewView.tsx ADDED Viewed

@@ -0,0 +1,115 @@
+'use client';
+import { Info, ShieldCheck } from 'lucide-react';
+import { useMemo } from 'react';
+interface PreviewViewProps {
+    html: string;
+}
+/** Heuristic: does ``html`` look like a JS-only single-page app shell?
+ *
+ *  SPAs (Vite, CRA, Next-app dev index) ship a near-empty ``<body>``
+ *  with a mount div + a ``<script type="module">`` that hydrates the
+ *  page at runtime. Previewing those in a ``sandbox=""`` iframe is
+ *  pointless because scripts can't run — the reader sees a blank
+ *  page and assumes preview is broken.
+ *
+ *  We detect this by extracting body content, stripping scripts, and
+ *  checking what's left. If it's basically just a mount div, we show
+ *  an explanatory empty-state instead of an empty iframe. */
+function looksLikeSpaShell(html: string): boolean {
+    const bodyMatch = html.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
+    const bodyContent = (bodyMatch?.[1] ?? html)
+        // Strip all script tags with their contents — runtime-only code
+        // doesn't count as visible markup for this check.
+        .replace(/<script[\s\S]*?<\/script>/gi, '')
+        // Strip comments.
+        .replace(/<!--[\s\S]*?-->/g, '')
+        .trim();
+    if (bodyContent.length === 0) return true;
+    // A single empty container (``<div id="root"></div>`` and friends)
+    // is the classic SPA mount point. Anything else — including static
+    // server-rendered pages with real content — won't match.
+    const singleEmptyContainer = /^<(div|main|section)[^>]*>\s*<\/\1>$/i;
+    if (singleEmptyContainer.test(bodyContent)) return true;
+    return false;
+}
+/** Render an HTML response inside a sandboxed iframe so the reader can
+ *  see what the server's error page or template actually looks like.
+ *
+ *  Security model — ``sandbox`` is intentionally **empty**:
+ *    - no ``allow-scripts`` → JavaScript in the response cannot run
+ *    - no ``allow-same-origin`` → the page can't read parent cookies
+ *    - no ``allow-forms`` / ``allow-popups`` → can't phish the user
+ *
+ *  We feed the HTML via ``srcDoc`` (not ``src``) so we never issue a
+ *  network request to render it — the string is already local. */
+export function PreviewView({ html }: PreviewViewProps) {
+    const isSpaShell = useMemo(() => looksLikeSpaShell(html), [html]);
+    if (!html) {
+        return (
+            <div className="py-10 text-center text-xs text-muted-foreground">
+                Empty response body
+            </div>
+        );
+    }
+    if (isSpaShell) {
+        return (
+            <div className="flex flex-col items-center justify-center py-16 px-6 text-center gap-3 min-h-[400px]">
+                <div className="inline-flex items-center justify-center h-10 w-10 rounded-full bg-muted">
+                    <Info className="h-5 w-5 text-muted-foreground" />
+                </div>
+                <div className="max-w-sm space-y-1.5">
+                    <p className="text-sm font-medium text-foreground">
+                        Looks like a single-page app shell
+                    </p>
+                    <p className="text-xs text-muted-foreground leading-relaxed">
+                        This page renders its content with JavaScript at runtime.
+                        Scripts are disabled in the sandbox, so Preview would show
+                        a blank page. Switch to <strong>Pretty</strong> or{' '}
+                        <strong>Raw</strong> to inspect the HTML source.
+                    </p>
+                </div>
+            </div>
+        );
+    }
+    return (
+        <div className="flex flex-col h-full min-h-[400px]">
+            <div className="shrink-0 flex items-center gap-1.5 px-3 py-1.5 bg-muted/30 border-b text-[10px] text-muted-foreground/70">
+                <ShieldCheck className="h-3 w-3" />
+                Sandboxed preview — scripts, forms and popups are disabled
+            </div>
+            {/*
+              * Checker-pattern background so "black on black" responses
+              * still show a clear iframe bounding box, and so readers
+              * can tell the iframe has loaded even if the page itself
+              * is empty / fully transparent.
+              */}
+            <div
+                className="flex-1 min-h-[360px] p-2"
+                style={{
+                    backgroundColor: '#fff',
+                    backgroundImage:
+                        'linear-gradient(45deg, #f3f4f6 25%, transparent 25%), linear-gradient(-45deg, #f3f4f6 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f3f4f6 75%), linear-gradient(-45deg, transparent 75%, #f3f4f6 75%)',
+                    backgroundSize: '16px 16px',
+                    backgroundPosition: '0 0, 0 8px, 8px -8px, -8px 0px',
+                }}
+            >
+                <iframe
+                    title="Response preview"
+                    srcDoc={html}
+                    sandbox=""
+                    className="w-full h-full min-h-[360px] bg-white border-0 rounded shadow-sm"
+                />
+            </div>
+        </div>
+    );
+}

package/src/tools/OpenapiViewer/components/shared/ResponsePanel/RawView.tsx ADDED Viewed

@@ -0,0 +1,24 @@
+'use client';
+interface RawViewProps {
+    rawText: string;
+}
+/** Verbatim response body. No parsing, no highlighting — readers
+ *  occasionally need to inspect trailing whitespace, escape
+ *  sequences, or a payload that accidentally claims one content type
+ *  and ships another, and the Pretty view hides some of that. */
+export function RawView({ rawText }: RawViewProps) {
+    if (!rawText) {
+        return (
+            <div className="py-10 text-center text-xs text-muted-foreground">
+                Empty response body
+            </div>
+        );
+    }
+    return (
+        <pre className="p-4 text-[11px] font-mono text-foreground/70 whitespace-pre-wrap break-all leading-relaxed">
+            {rawText}
+        </pre>
+    );
+}

package/src/tools/OpenapiViewer/components/shared/ResponsePanel/StatusBar.tsx ADDED Viewed

@@ -0,0 +1,63 @@
+'use client';
+import { CopyButton } from '@djangocfg/ui-core/components';
+import type { ApiResponse } from '../../../types';
+import { StatusBadge } from '../ui';
+interface StatusBarProps {
+    response: ApiResponse;
+    rawText: string;
+    /** Content-Type label shown inline next to size/duration. ``null``
+     *  when the server didn't send one — we hide the slot instead of
+     *  showing an empty dash. */
+    contentType: string | null;
+}
+/** Top strip of the response panel: status badge, statusText, size,
+ *  duration, content-type, copy button. Compact — one line, tabular
+ *  numerals so 1.4 KB and 107ms don't shift as values update. */
+export function StatusBar({ response, rawText, contentType }: StatusBarProps) {
+    const sizeKb = rawText ? `${(rawText.length / 1024).toFixed(1)} KB` : '';
+    const duration = response.duration != null ? `${response.duration}ms` : '';
+    const hasStatus = response.status != null;
+    const hasCopy = Boolean(rawText);
+    return (
+        <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>
+                )}
+                {contentType && (
+                    <span className="text-[10px] text-muted-foreground/50 font-mono truncate">
+                        {contentType}
+                    </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>
+    );
+}

package/src/tools/OpenapiViewer/components/shared/ResponsePanel/ViewTabs.tsx ADDED Viewed

@@ -0,0 +1,45 @@
+'use client';
+import { cn } from '@djangocfg/ui-core/lib';
+import type { ViewMode } from './types';
+interface ViewTabsProps {
+    active: ViewMode;
+    onChange: (mode: ViewMode) => void;
+    /** When false the Preview tab is hidden — only HTML responses get
+     *  a useful preview, everything else renders the same as Pretty. */
+    showPreview: boolean;
+}
+const LABELS: Record<ViewMode, string> = {
+    pretty: 'Pretty',
+    raw: 'Raw',
+    preview: 'Preview',
+};
+/** Tab strip for switching between Pretty / Raw / Preview. Matches the
+ *  visual weight of the ``LanguageTabs`` in CodeSamples so the page
+ *  reads as one coherent toolbar system. */
+export function ViewTabs({ active, onChange, showPreview }: ViewTabsProps) {
+    const tabs: ViewMode[] = showPreview ? ['pretty', 'raw', 'preview'] : ['pretty', 'raw'];
+    return (
+        <div className="shrink-0 border-b px-3 py-1.5 flex items-center gap-1">
+            {tabs.map((t) => (
+                <button
+                    key={t}
+                    type="button"
+                    onClick={() => onChange(t)}
+                    className={cn(
+                        'h-6 px-2.5 rounded text-[11px] font-medium transition-colors',
+                        active === t
+                            ? 'bg-muted text-foreground'
+                            : 'text-muted-foreground/70 hover:text-foreground hover:bg-muted/50',
+                    )}
+                >
+                    {LABELS[t]}
+                </button>
+            ))}
+        </div>
+    );
+}

package/src/tools/OpenapiViewer/components/shared/ResponsePanel/detectContent.ts ADDED Viewed

@@ -0,0 +1,97 @@
+import type { ContentKind, DetectedContent } from './types';
+/** Strip Content-Type parameters (``; charset=utf-8`` etc.) and lower-case. */
+function normaliseContentType(raw: string | null): string | null {
+    if (!raw) return null;
+    const semi = raw.indexOf(';');
+    return (semi === -1 ? raw : raw.slice(0, semi)).trim().toLowerCase();
+}
+/** Pull Content-Type out of the headers bag. We accept both plain
+ *  objects (``{ "content-type": "..." }``) and ``Headers``-like shapes
+ *  with a ``.get`` method. The context type is ``any`` so we can't be
+ *  stricter without plumbing a proper type through the response code
+ *  path. */
+function readContentType(headers: unknown): string | null {
+    if (!headers) return null;
+    // Headers instance — use ``.get`` (case-insensitive).
+    if (typeof (headers as Headers).get === 'function') {
+        return (headers as Headers).get('content-type');
+    }
+    // Plain object — look up with case-insensitive key match so both
+    // ``Content-Type`` and ``content-type`` work.
+    if (typeof headers === 'object') {
+        for (const [k, v] of Object.entries(headers as Record<string, unknown>)) {
+            if (k.toLowerCase() === 'content-type') {
+                return typeof v === 'string' ? v : null;
+            }
+        }
+    }
+    return null;
+}
+/** Map a normalised MIME type to our short ``ContentKind``. Unknown
+ *  types fall back to ``text`` so PrettyCode still shows something
+ *  sensible (plain text is a valid Prism language). */
+function kindFromContentType(mime: string | null): ContentKind {
+    if (!mime) return 'text';
+    if (mime === 'application/json' || mime.endsWith('+json')) return 'json';
+    if (mime === 'text/html' || mime === 'application/xhtml+xml') return 'html';
+    if (
+        mime === 'application/xml' ||
+        mime === 'text/xml' ||
+        mime.endsWith('+xml')
+    ) return 'xml';
+    if (mime === 'text/css') return 'css';
+    if (
+        mime === 'application/javascript' ||
+        mime === 'text/javascript' ||
+        mime === 'application/x-javascript'
+    ) return 'javascript';
+    return 'text';
+}
+/** Heuristic fallback when ``Content-Type`` is missing or opaque.
+ *  Returns ``null`` when nothing firm can be inferred; the caller
+ *  then defaults to ``text``. */
+function kindFromBody(body: string): ContentKind | null {
+    const trimmed = body.trimStart();
+    if (!trimmed) return null;
+    if (trimmed.startsWith('<!DOCTYPE') || /^<html[\s>]/i.test(trimmed)) return 'html';
+    if (trimmed.startsWith('<?xml')) return 'xml';
+    if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
+        // Cheap validity check — full parse happens in ResponsePanel.
+        try { JSON.parse(trimmed); return 'json'; } catch { /* fall through */ }
+    }
+    return null;
+}
+const PRISM_BY_KIND: Record<ContentKind, DetectedContent['prism']> = {
+    json: 'json',
+    // ``markup`` is Prism's HTML/XML grammar — there isn't a separate
+    // ``html`` language. XML piggy-backs on the same tokeniser.
+    html: 'markup',
+    xml: 'markup',
+    css: 'css',
+    javascript: 'javascript',
+    text: 'markup',
+};
+/** Detect content kind from headers, falling back to body sniffing
+ *  when the header is missing. Pure function — safe to call inside
+ *  ``useMemo`` deps on the raw body and headers. */
+export function detectContent(headers: unknown, rawBody: string): DetectedContent {
+    const contentType = normaliseContentType(readContentType(headers));
+    const headerKind = kindFromContentType(contentType);
+    // If headers say it's text/plain but the body looks like HTML or
+    // JSON, trust the body — a lot of framework 500 pages claim
+    // text/html but some setups default to text/plain for errors.
+    const kind = headerKind === 'text' ? (kindFromBody(rawBody) ?? 'text') : headerKind;
+    return {
+        kind,
+        prism: PRISM_BY_KIND[kind],
+        contentType,
+    };
+}

package/src/tools/OpenapiViewer/components/shared/ResponsePanel/index.tsx ADDED Viewed

@@ -0,0 +1,93 @@
+'use client';
+import { Loader2, Send, Terminal, WifiOff } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { usePlaygroundContext } from '../../../context/PlaygroundContext';
+import { EmptyState, ScrollArea } from '../ui';
+import { PreviewView } from './PreviewView';
+import { PrettyView } from './PrettyView';
+import { RawView } from './RawView';
+import { StatusBar } from './StatusBar';
+import type { ViewMode } from './types';
+import { useResponseView } from './useResponseView';
+import { ViewTabs } from './ViewTabs';
+/** Response panel used by both the sticky ``SlideInPlayground`` and the
+ *  modal ``TryItSheet``. Responsibilities:
+ *    - Empty / loading / network-error gates
+ *    - Three view modes (Pretty / Raw / Preview) with a tab bar
+ *    - Auto-pick the best default view per response type (JSON → Pretty,
+ *      HTML → Preview, everything else → Pretty as the widest-purpose)
+ *
+ *  View mode is local component state rather than context state — it
+ *  should reset when the selected endpoint changes and not leak between
+ *  endpoints. */
+export function ResponsePanel() {
+    const { state } = usePlaygroundContext();
+    const { response, loading, selectedEndpoint } = state;
+    const { treeData, rawText, detected } = useResponseView(response?.data, response?.headers);
+    const showPreview = detected.kind === 'html';
+    // Default view heuristic: show HTML pages preview-first so the
+    // reader sees the actual rendered server page immediately.
+    // Everything else lands on Pretty.
+    const [mode, setMode] = useState<ViewMode>(showPreview ? 'preview' : 'pretty');
+    // Reset the mode when the endpoint or response changes so a
+    // previously-selected tab from a different shape doesn't stick
+    // around (e.g. stuck on Preview when switching from HTML→JSON).
+    useEffect(() => {
+        setMode(showPreview ? 'preview' : 'pretty');
+    }, [selectedEndpoint, response, showPreview]);
+    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' />;
+    const hasError = Boolean(response.error);
+    const hasStatus = response.status != null;
+    // 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"
+            />
+        );
+    }
+    return (
+        <>
+            <StatusBar response={response} rawText={rawText} contentType={detected.contentType} />
+            {/* 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>
+            )}
+            <ViewTabs active={mode} onChange={setMode} showPreview={showPreview} />
+            <ScrollArea>
+                {mode === 'pretty' && (
+                    <PrettyView treeData={treeData} rawText={rawText} detected={detected} />
+                )}
+                {mode === 'raw' && <RawView rawText={rawText} />}
+                {mode === 'preview' && <PreviewView html={rawText} />}
+            </ScrollArea>
+        </>
+    );
+}

package/src/tools/OpenapiViewer/components/shared/ResponsePanel/types.ts ADDED Viewed

@@ -0,0 +1,26 @@
+import type { Language } from '../../../../PrettyCode';
+/** Panels the user can switch between in the response view.
+ *
+ *   - ``pretty``:  structured rendering — JsonTree for JSON, syntax-
+ *                  highlighted code for HTML/XML/CSS/text.
+ *   - ``raw``:     plain ``<pre>`` dump of whatever the server returned.
+ *   - ``preview``: sandboxed iframe for HTML responses (when you want
+ *                  to *see* an error page the server produced rather
+ *                  than read its source). Tab is hidden for non-HTML. */
+export type ViewMode = 'pretty' | 'raw' | 'preview';
+/** Content categories derived from the server's ``Content-Type`` header.
+ *  We project the rich MIME type space onto a short enum so the renderer
+ *  and tab-list only have to switch on a handful of values. */
+export type ContentKind = 'json' | 'html' | 'xml' | 'css' | 'javascript' | 'text';
+export interface DetectedContent {
+    kind: ContentKind;
+    /** Prism ``Language`` id matching ``kind`` — fed into PrettyCode. */
+    prism: Language;
+    /** Full Content-Type header value, stripped of parameters (e.g.
+     *  ``application/json`` without ``; charset=utf-8``). ``null`` when
+     *  the server didn't send one. */
+    contentType: string | null;
+}

package/src/tools/OpenapiViewer/components/shared/ResponsePanel/useResponseView.ts ADDED Viewed

@@ -0,0 +1,62 @@
+import { useMemo } from 'react';
+import { detectContent } from './detectContent';
+import type { DetectedContent } from './types';
+interface UseResponseViewResult {
+    /** Parsed JSON value when the body is JSON, otherwise ``null``.
+     *  JsonTree needs a live object to render properly, so we parse
+     *  once up-front and cache. */
+    treeData: unknown;
+    /** Stringified body, always present when the server returned
+     *  anything. Used by Raw and Pretty-for-text tabs. */
+    rawText: string;
+    /** Content-type + prism language inference. */
+    detected: DetectedContent;
+}
+/** Shape the raw response payload into the pieces each view tab
+ *  needs. Exposed as a hook so the component stays thin and the
+ *  normalisation is easy to test in isolation. */
+export function useResponseView(
+    data: unknown,
+    headers: unknown,
+): UseResponseViewResult {
+    return useMemo(() => {
+        if (data == null) {
+            return {
+                treeData: null,
+                rawText: '',
+                detected: detectContent(headers, ''),
+            };
+        }
+        // String body — might be JSON-in-a-string or a plain text dump.
+        if (typeof data === 'string') {
+            try {
+                return {
+                    treeData: JSON.parse(data),
+                    rawText: data,
+                    detected: detectContent(headers, data),
+                };
+            } catch {
+                return {
+                    treeData: null,
+                    rawText: data,
+                    detected: detectContent(headers, data),
+                };
+            }
+        }
+        // Object body — axios already parsed it. Stringify for Raw/
+        // Preview tabs and treat it as JSON regardless of headers.
+        const stringified = (() => {
+            try { return JSON.stringify(data, null, 2); } catch { return String(data); }
+        })();
+        return {
+            treeData: data,
+            rawText: stringified,
+            detected: detectContent(headers, stringified),
+        };
+    }, [data, headers]);
+}