@djangocfg/ui-tools 2.1.404 → 2.1.408

package/src/tools/JsonTree/components/JsonToolbar.tsx

@@ -1,95 +0,0 @@
-'use client';
-
-import { ChevronDown, ChevronUp, Download } from 'lucide-react';
-import React, { memo } from 'react';
-
-import { Button, CopyButton } from '@djangocfg/ui-core/components';
-
-interface JsonToolbarProps {
-  /** Viewport right coordinate (distance from right edge) for fixed positioning */
-  right: number;
-  /** Bottom edge of the container in viewport coords */
-  bottom: number;
-  /** Top edge — used only to detect if block is fully off-screen */
-  top: number;
-  isExpanded: boolean;
-  onToggleExpand: () => void;
-  jsonString: string;
-  onDownload: () => void;
-  showExpandControls: boolean;
-  showActionButtons: boolean;
-}
-
-const BUTTON_CLASS = 'h-6 w-6 rounded-sm bg-muted/80 hover:bg-muted border border-border/50 backdrop-blur-sm';
-const TOOLBAR_H = 24 + 8 + 8;
-const OFFSET = 8;
-
-/**
- * JsonToolbar — floating toolbar for JsonTree.
- *
- * Memoised: re-renders only when any prop changes. Position props
- * (`top`, `right`, `bottom`) are primitives, so default shallow
- * comparison is sufficient.
- */
-const JsonToolbar = memo(({
-  top,
-  right,
-  bottom,
-  isExpanded,
-  onToggleExpand,
-  jsonString,
-  onDownload,
-  showExpandControls,
-  showActionButtons,
-}: JsonToolbarProps) => {
-  const viewportHeight = window.visualViewport?.height ?? document.documentElement.clientHeight;
-
-  // Hide when block is fully above or below viewport
-  if (bottom <= 0 || top >= viewportHeight) return null;
-  // Hide when block is too small to fit toolbar
-  if (bottom - top < TOOLBAR_H) return null;
-
-  // Anchor to bottom-right of block, clamped so toolbar stays in viewport
-  const toolbarBottom = Math.min(bottom - OFFSET, viewportHeight - OFFSET);
-
-  return (
-    <div
-      className="flex items-center gap-1"
-      style={{ position: 'fixed', bottom: viewportHeight - toolbarBottom, right: right + OFFSET, zIndex: 30 }}
-    >
-      {showExpandControls && (
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={onToggleExpand}
-          className={BUTTON_CLASS}
-          title={isExpanded ? 'Collapse All' : 'Expand All'}
-        >
-          {isExpanded ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
-        </Button>
-      )}
-
-      {showActionButtons && (
-        <>
-          <CopyButton
-            value={jsonString}
-            variant="ghost"
-            size="icon"
-            className={BUTTON_CLASS}
-            iconClassName="h-3 w-3"
-            title="Copy JSON"
-          />
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={onDownload}
-            className={BUTTON_CLASS}
-            title="Download JSON"
-          >
-            <Download className="h-3 w-3" />
-          </Button>
-        </>
-      )}
-    </div>
-  );
-});

package/src/tools/JsonTree/hooks/useElementCorner.ts

@@ -1,84 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-
-interface Corner {
-  top: number;
-  right: number;
-  bottom: number;
-}
-
-/**
- * Tracks the top-right corner of a referenced element in viewport coordinates.
- * Returns { top, right } in px — ready for `position: fixed` toolbar placement.
- *
- * Uses `visualViewport` for accurate viewport width — correctly handles:
- * - DevTools panel open (docked left/right/bottom)
- * - Browser zoom
- * - Mobile virtual keyboard / pinch-zoom
- * - Scrollbars
- *
- * Falls back to `document.documentElement.clientWidth` (excludes scrollbars,
- * matches `position: fixed` coordinate space) when visualViewport is unavailable.
- *
- * Updates on:
- * - Any ancestor scroll (capture phase)
- * - visualViewport resize/scroll
- * - ResizeObserver on the element itself
- */
-export function useElementCorner(ref: React.RefObject<HTMLElement | null>) {
-  const [corner, setCorner] = useState<Corner | null>(null);
-  const updateRef = useRef<() => void>(() => {});
-
-  updateRef.current = () => {
-    if (!ref.current) return;
-    const rect = ref.current.getBoundingClientRect();
-
-    // `position: fixed` is relative to the layout viewport (document.documentElement.clientWidth),
-    // NOT window.innerWidth (which includes scrollbar gutter).
-    // visualViewport.width is the visible area — same as layout viewport when no zoom/keyboard.
-    const viewportWidth =
-      window.visualViewport?.width ?? document.documentElement.clientWidth;
-
-    setCorner({
-      top: rect.top,
-      right: viewportWidth - rect.right,
-      bottom: rect.bottom,
-    });
-  };
-
-  useEffect(() => {
-    const handler = () => updateRef.current();
-
-    handler();
-
-    // Element size changes
-    const ro = new ResizeObserver(handler);
-    if (ref.current) ro.observe(ref.current);
-
-    // Any ancestor scroll (capture catches all, including overflow:auto containers)
-    window.addEventListener('scroll', handler, { capture: true, passive: true });
-
-    // visualViewport handles: DevTools resize, browser zoom, mobile keyboard
-    const vv = window.visualViewport;
-    if (vv) {
-      vv.addEventListener('resize', handler);
-      vv.addEventListener('scroll', handler);
-    } else {
-      window.addEventListener('resize', handler, { passive: true });
-    }
-
-    return () => {
-      ro.disconnect();
-      window.removeEventListener('scroll', handler, { capture: true });
-      if (vv) {
-        vv.removeEventListener('resize', handler);
-        vv.removeEventListener('scroll', handler);
-      } else {
-        window.removeEventListener('resize', handler);
-      }
-    };
-  }, [ref]);
-
-  return corner;
-}

package/src/tools/JsonTree/hooks/useNavbarHeight.ts

@@ -1,83 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-
-/**
- * Detects the height of any element covering the top of the viewport.
- *
- * Strategy: uses elementFromPoint() along the top of the viewport to find
- * whatever is actually rendered there — fixed, sticky, or in-flow elements.
- * Walks up the DOM from the hit element to find the topmost covering block.
- *
- * Performance:
- * - Samples a few x-points across the viewport top (not the whole width)
- * - Throttled with requestAnimationFrame
- * - Only re-runs on resize (navbars rarely change height on scroll)
- */
-
-const SAMPLE_POINTS = 5; // how many x positions to probe across viewport
-
-function measureNavbarHeight(): number {
-  const vv = window.visualViewport;
-  const viewportWidth = vv?.width ?? document.documentElement.clientWidth;
-
-  let maxBottom = 0;
-
-  for (let i = 0; i < SAMPLE_POINTS; i++) {
-    const x = (viewportWidth / (SAMPLE_POINTS + 1)) * (i + 1);
-
-    // Probe just below the very top — y=1 to avoid hitting browser chrome
-    const el = document.elementFromPoint(x, 1);
-    if (!el || el === document.documentElement || el === document.body) continue;
-
-    const rect = el.getBoundingClientRect();
-    // Only count elements that are anchored at the very top (top ≤ 2px)
-    if (rect.top <= 2 && rect.bottom > maxBottom) {
-      maxBottom = rect.bottom;
-    }
-  }
-
-  return maxBottom;
-}
-
-export function useNavbarHeight(): number {
-  const [height, setHeight] = useState(0);
-  const rafRef = useRef<number | null>(null);
-
-  const scheduleUpdate = () => {
-    if (rafRef.current !== null) return;
-    rafRef.current = requestAnimationFrame(() => {
-      rafRef.current = null;
-      setHeight(measureNavbarHeight());
-    });
-  };
-
-  useEffect(() => {
-    // Initial measure after first paint
-    scheduleUpdate();
-
-    // Navbars can change height on resize (mobile keyboard, orientation)
-    const vv = window.visualViewport;
-    if (vv) {
-      vv.addEventListener('resize', scheduleUpdate);
-    } else {
-      window.addEventListener('resize', scheduleUpdate, { passive: true });
-    }
-
-    // Watch for navbar being added/removed from DOM
-    const mo = new MutationObserver(scheduleUpdate);
-    mo.observe(document.body, { childList: true, subtree: false });
-
-    return () => {
-      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
-      if (vv) {
-        vv.removeEventListener('resize', scheduleUpdate);
-      } else {
-        window.removeEventListener('resize', scheduleUpdate);
-      }
-      mo.disconnect();
-    };
-  }, []);
-
-  return height;
-}

package/src/tools/OpenapiViewer/components/DocsLayout/schemaFields.ts

@@ -1,121 +0,0 @@
-/**
- * Flatten a JSON Schema node into a flat list of (name, type, required,
- * description) rows, ready to feed into the existing parameter table.
- *
- * Rules:
- *   - ``type: object``  → one row per property.
- *   - ``type: array``   → recurse into items; prefix each row with ``[].``
- *                         so the caller sees "[].username string" etc.
- *   - Nested objects    → dot-joined path: ``category.name``. We expand
- *                         one level; deeper graphs get a single summary
- *                         row ("category.* (object)") to keep the table
- *                         readable.
- *
- * This is a presentation helper — not a full form generator. It powers
- * the read-only fields table shown in the docs longread.
- */
-
-type JsonSchemaNode = Record<string, unknown> & {
-    type?: string;
-    properties?: Record<string, JsonSchemaNode>;
-    required?: string[];
-    items?: JsonSchemaNode;
-    enum?: unknown[];
-    description?: string;
-    format?: string;
-};
-
-export interface SchemaField {
-    name: string;
-    type: string;
-    required: boolean;
-    description?: string;
-}
-
-const MAX_DEPTH = 2;
-
-function describeType(node: JsonSchemaNode): string {
-    if (!node.type && node.properties) return 'object';
-    const base = node.type || 'any';
-    if (base === 'array') {
-        const itemType = node.items ? describeType(node.items) : 'any';
-        return `array<${itemType}>`;
-    }
-    if (Array.isArray(node.enum) && node.enum.length > 0) {
-        return `${base} enum`;
-    }
-    if (node.format) return `${base} (${node.format})`;
-    return base;
-}
-
-export function schemaToFields(
-    schema: JsonSchemaNode | undefined,
-    prefix = '',
-    depth = 0,
-): SchemaField[] {
-    if (!schema || depth > MAX_DEPTH) return [];
-
-    // Unwrap arrays: show the inner item's fields, prefixed with ``[]``.
-    if (schema.type === 'array') {
-        if (!schema.items) {
-            return [{ name: prefix || '[]', type: 'array', required: false }];
-        }
-        const inner = schemaToFields(schema.items, prefix ? `${prefix}[]` : '[]', depth);
-        if (inner.length === 0) {
-            return [
-                {
-                    name: prefix || '[]',
-                    type: describeType(schema),
-                    required: false,
-                    description: schema.description,
-                },
-            ];
-        }
-        return inner;
-    }
-
-    // Primitives and unknown — single row.
-    if (schema.type !== 'object' && !schema.properties) {
-        return [
-            {
-                name: prefix || '(body)',
-                type: describeType(schema),
-                required: false,
-                description: schema.description,
-            },
-        ];
-    }
-
-    // Objects — one row per property, recurse for nested objects/arrays.
-    const required = new Set(schema.required ?? []);
-    const rows: SchemaField[] = [];
-    const props = schema.properties ?? {};
-    for (const [key, node] of Object.entries(props)) {
-        const fullName = prefix ? `${prefix}.${key}` : key;
-        const isRequired = required.has(key);
-
-        const isNestedExpandable =
-            (node.type === 'object' && node.properties) ||
-            (node.type === 'array' && node.items);
-
-        if (isNestedExpandable && depth < MAX_DEPTH) {
-            // Leaf summary row for the parent itself (so the user sees
-            // its description) + recurse for inner fields.
-            rows.push({
-                name: fullName,
-                type: describeType(node),
-                required: isRequired,
-                description: node.description,
-            });
-            rows.push(...schemaToFields(node, fullName, depth + 1));
-        } else {
-            rows.push({
-                name: fullName,
-                type: describeType(node),
-                required: isRequired,
-                description: node.description,
-            });
-        }
-    }
-    return rows;
-}