@djangocfg/ui-tools 2.1.91

package/src/tools/Mermaid/hooks/useMermaidRenderer.ts

@@ -0,0 +1,226 @@
+/**
+ * Hook for rendering Mermaid diagrams with debounce and validation
+ */
+
+import mermaid from 'mermaid';
+import { useEffect, useRef, useState } from 'react';
+
+import { useMermaidCleanup } from './useMermaidCleanup';
+import { useMermaidValidation } from './useMermaidValidation';
+
+interface UseMermaidRendererProps {
+    chart: string;
+    theme: string;
+    isCompact?: boolean;
+}
+
+interface MermaidRenderResult {
+    mermaidRef: React.RefObject<HTMLDivElement>;
+    svgContent: string;
+    isVertical: boolean;
+    isRendering: boolean;
+}
+
+// Utility function to apply text colors to Mermaid SVG
+const applyMermaidTextColors = (container: HTMLElement, textColor: string) => {
+    const svgElement = container.querySelector('svg');
+    if (svgElement) {
+        // SVG text elements use 'fill'
+        svgElement.querySelectorAll('text').forEach((el) => {
+            (el as SVGElement).style.fill = textColor;
+        });
+
+        // HTML elements inside foreignObject use 'color'
+        svgElement.querySelectorAll('.nodeLabel, .edgeLabel').forEach((el) => {
+            (el as HTMLElement).style.color = textColor;
+        });
+    }
+};
+
+// Detect if diagram is vertical (tall and narrow)
+const isVerticalDiagram = (svgElement: SVGSVGElement): boolean => {
+    const viewBox = svgElement.getAttribute('viewBox');
+    if (viewBox) {
+        const [, , width, height] = viewBox.split(' ').map(Number);
+        return height > width * 1.5;
+    }
+    const bbox = svgElement.getBBox?.();
+    if (bbox) {
+        return bbox.height > bbox.width * 1.5;
+    }
+    return false;
+};
+
+export function useMermaidRenderer({ chart, theme, isCompact = false }: UseMermaidRendererProps): MermaidRenderResult {
+    const mermaidRef = useRef<HTMLDivElement>(null);
+    const renderTimerRef = useRef<NodeJS.Timeout | null>(null);
+    const [svgContent, setSvgContent] = useState<string>('');
+    const [isVertical, setIsVertical] = useState(false);
+    const [isRendering, setIsRendering] = useState(false);
+
+    const { isMermaidCodeComplete } = useMermaidValidation();
+    const { cleanupMermaidErrors } = useMermaidCleanup();
+
+    useEffect(() => {
+        // Get CSS variables for semantic colors
+        const getCSSVariable = (variable: string) => {
+            if (typeof document === 'undefined') return '';
+            const value = getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+            return value ? `hsl(${value})` : '';
+        };
+
+        const diagramFontSize = isCompact ? '12px' : '14px';
+
+        const themeVariables = theme === 'dark' ? {
+            primaryColor: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',
+            primaryTextColor: getCSSVariable('--foreground') || 'hsl(210 40% 98%)',
+            primaryBorderColor: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',
+            secondaryColor: getCSSVariable('--muted') || 'hsl(217.2 32.6% 17.5%)',
+            secondaryTextColor: getCSSVariable('--foreground') || 'hsl(210 40% 98%)',
+            secondaryBorderColor: getCSSVariable('--border') || 'hsl(217.2 32.6% 27.5%)',
+            tertiaryColor: getCSSVariable('--accent') || 'hsl(217.2 32.6% 20%)',
+            tertiaryTextColor: getCSSVariable('--foreground') || 'hsl(210 40% 98%)',
+            tertiaryBorderColor: getCSSVariable('--border') || 'hsl(217.2 32.6% 27.5%)',
+            mainBkg: getCSSVariable('--card') || 'hsl(222.2 84% 8%)',
+            textColor: getCSSVariable('--foreground') || 'hsl(210 40% 98%)',
+            nodeBorder: getCSSVariable('--border') || 'hsl(217.2 32.6% 27.5%)',
+            nodeTextColor: getCSSVariable('--foreground') || 'hsl(210 40% 98%)',
+            secondBkg: getCSSVariable('--muted') || 'hsl(217.2 32.6% 17.5%)',
+            lineColor: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',
+            edgeLabelBackground: getCSSVariable('--card') || 'hsl(222.2 84% 8%)',
+            clusterBkg: getCSSVariable('--muted') || 'hsl(217.2 32.6% 12%)',
+            clusterBorder: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',
+            background: getCSSVariable('--background') || 'hsl(222.2 84% 4.9%)',
+            labelBackground: getCSSVariable('--card') || 'hsl(222.2 84% 8%)',
+            labelTextColor: getCSSVariable('--foreground') || 'hsl(210 40% 98%)',
+            errorBkgColor: getCSSVariable('--destructive') || 'hsl(0 62.8% 30.6%)',
+            errorTextColor: 'hsl(210 40% 98%)',
+            fontSize: diagramFontSize,
+            fontFamily: 'Inter, system-ui, sans-serif',
+        } : {
+            primaryColor: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',
+            primaryTextColor: getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)',
+            primaryBorderColor: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',
+            secondaryColor: getCSSVariable('--secondary') || 'hsl(210 40% 96.1%)',
+            secondaryTextColor: getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)',
+            secondaryBorderColor: getCSSVariable('--border') || 'hsl(214.3 31.8% 91.4%)',
+            tertiaryColor: getCSSVariable('--muted') || 'hsl(210 40% 96.1%)',
+            tertiaryTextColor: getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)',
+            tertiaryBorderColor: getCSSVariable('--border') || 'hsl(214.3 31.8% 91.4%)',
+            mainBkg: getCSSVariable('--card') || 'hsl(0 0% 100%)',
+            textColor: getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)',
+            nodeBorder: getCSSVariable('--border') || 'hsl(214.3 31.8% 91.4%)',
+            nodeTextColor: getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)',
+            secondBkg: getCSSVariable('--muted') || 'hsl(210 40% 96.1%)',
+            lineColor: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',
+            edgeLabelBackground: getCSSVariable('--card') || 'hsl(0 0% 100%)',
+            clusterBkg: getCSSVariable('--accent') || 'hsl(210 40% 98%)',
+            clusterBorder: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',
+            background: getCSSVariable('--background') || 'hsl(0 0% 100%)',
+            labelBackground: getCSSVariable('--card') || 'hsl(0 0% 100%)',
+            labelTextColor: getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)',
+            errorBkgColor: getCSSVariable('--destructive') || 'hsl(0 84.2% 60.2%)',
+            errorTextColor: 'hsl(210 40% 98%)',
+            fontSize: diagramFontSize,
+            fontFamily: 'Inter, system-ui, sans-serif',
+        };
+
+        mermaid.initialize({
+            startOnLoad: false,
+            theme: 'base',
+            securityLevel: 'loose',
+            suppressErrorRendering: true, // Prevent mermaid from appending errors to body
+            fontFamily: 'Inter, system-ui, sans-serif',
+            flowchart: {
+                useMaxWidth: true,
+                htmlLabels: true,
+                curve: 'basis',
+            },
+            themeVariables,
+        });
+
+        const renderChart = async () => {
+            if (!mermaidRef.current || !chart) return;
+
+            // Validate code completeness
+            if (!isMermaidCodeComplete(chart)) {
+                setIsRendering(true);
+                return;
+            }
+
+            try {
+                setIsRendering(true);
+
+                // Clear container
+                if (mermaidRef.current) {
+                    mermaidRef.current.innerHTML = '';
+                }
+
+                const id = `mermaid-${Math.random().toString(36).substring(2, 9)}`;
+                const { svg } = await mermaid.render(id, chart);
+
+                if (mermaidRef.current) {
+                    const textColor = theme === 'dark'
+                        ? getCSSVariable('--foreground') || 'hsl(0 0% 90%)'
+                        : getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)';
+
+                    const processedSvg = svg.replace(
+                        /<svg /,
+                        `<svg style="--mermaid-text-color: ${textColor};" `
+                    );
+
+                    mermaidRef.current.innerHTML = processedSvg;
+                    setSvgContent(processedSvg);
+
+                    applyMermaidTextColors(mermaidRef.current, textColor);
+
+                    const svgElement = mermaidRef.current.querySelector('svg');
+                    if (svgElement) {
+                        svgElement.style.maxWidth = '100%';
+                        svgElement.style.height = 'auto';
+                        svgElement.style.display = 'block';
+                        setIsVertical(isVerticalDiagram(svgElement));
+                    }
+                }
+
+                setIsRendering(false);
+            } catch (error) {
+                console.error('Mermaid rendering error:', error);
+                setIsRendering(false);
+                cleanupMermaidErrors();
+
+                if (mermaidRef.current) {
+                    mermaidRef.current.innerHTML = `
+                        <div class="p-4 text-destructive bg-destructive/10 border border-destructive/20 rounded-sm">
+                            <p class="font-semibold">Mermaid Diagram Error</p>
+                            <p class="text-sm">${error instanceof Error ? error.message : 'Unknown error'}</p>
+                        </div>
+                    `;
+                }
+            }
+        };
+
+        // Clear previous timer
+        if (renderTimerRef.current) {
+            clearTimeout(renderTimerRef.current);
+        }
+
+        // Debounce: wait 500ms after last update
+        renderTimerRef.current = setTimeout(() => {
+            renderChart();
+        }, 500);
+
+        return () => {
+            if (renderTimerRef.current) {
+                clearTimeout(renderTimerRef.current);
+            }
+        };
+    }, [chart, theme, isCompact, isMermaidCodeComplete, cleanupMermaidErrors]);
+
+    return {
+        mermaidRef,
+        svgContent,
+        isVertical,
+        isRendering,
+    };
+}

package/src/tools/Mermaid/hooks/useMermaidValidation.ts

@@ -0,0 +1,29 @@
+/**
+ * Hook for validating Mermaid code completeness
+ */
+
+export function useMermaidValidation() {
+    const isMermaidCodeComplete = (code: string): boolean => {
+        if (!code || code.trim().length === 0) return false;
+
+        const trimmed = code.trim();
+
+        // Check if code has basic structure
+        const lines = trimmed.split('\n');
+        if (lines.length < 2) return false; // Need at least diagram type + one element
+
+        // Check for common incomplete patterns
+        const lastLine = lines[lines.length - 1].trim();
+
+        // Incomplete if last line ends with arrow without destination
+        if (lastLine.match(/-->?\s*$/)) return false;
+        if (lastLine.match(/-->\|[^|]*\|\s*$/)) return false;
+
+        // Incomplete if last line ends with opening bracket/parenthesis
+        if (lastLine.match(/[\[({]\s*$/)) return false;
+
+        return true;
+    };
+
+    return { isMermaidCodeComplete };
+}

package/src/tools/Mermaid/index.tsx

@@ -0,0 +1,44 @@
+/**
+ * Mermaid Component - Dynamic Import Wrapper
+ *
+ * Lazy loads the heavy Mermaid library (~800KB) only when needed.
+ * This significantly reduces the initial bundle size.
+ */
+
+'use client';
+
+import React, { lazy, Suspense } from 'react';
+
+// Lazy load the client component
+const MermaidClient = lazy(() => import('./Mermaid.client'));
+
+// Loading fallback component
+const LoadingFallback = () => (
+  <div className="relative bg-card rounded-sm border border-border overflow-hidden">
+    <div className="p-4 border-b border-border bg-muted/50">
+      <h6 className="text-sm font-semibold text-foreground">Diagram</h6>
+      <p className="text-xs text-muted-foreground mt-1">Loading...</p>
+    </div>
+    <div className="p-4">
+      <div className="flex justify-center items-center min-h-[200px]">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+      </div>
+    </div>
+  </div>
+);
+
+interface MermaidProps {
+  chart: string;
+  className?: string;
+  isCompact?: boolean;
+}
+
+const Mermaid: React.FC<MermaidProps> = (props) => {
+  return (
+    <Suspense fallback={<LoadingFallback />}>
+      <MermaidClient {...props} />
+    </Suspense>
+  );
+};
+
+export default Mermaid;

package/src/tools/Mermaid/utils/mermaid-helpers.ts

@@ -0,0 +1,33 @@
+/**
+ * Helper utilities for Mermaid diagram rendering
+ */
+
+// Utility function to apply text colors to Mermaid SVG
+export const applyMermaidTextColors = (container: HTMLElement, textColor: string) => {
+    const svgElement = container.querySelector('svg');
+    if (svgElement) {
+        // SVG text elements use 'fill'
+        svgElement.querySelectorAll('text').forEach((el) => {
+            (el as SVGElement).style.fill = textColor;
+        });
+
+        // HTML elements inside foreignObject use 'color'
+        svgElement.querySelectorAll('.nodeLabel, .edgeLabel').forEach((el) => {
+            (el as HTMLElement).style.color = textColor;
+        });
+    }
+};
+
+// Detect if diagram is vertical (tall and narrow)
+export const isVerticalDiagram = (svgElement: SVGSVGElement): boolean => {
+    const viewBox = svgElement.getAttribute('viewBox');
+    if (viewBox) {
+        const [, , width, height] = viewBox.split(' ').map(Number);
+        return height > width * 1.5;
+    }
+    const bbox = svgElement.getBBox?.();
+    if (bbox) {
+        return bbox.height > bbox.width * 1.5;
+    }
+    return false;
+};

package/src/tools/OpenapiViewer/components/EndpointInfo.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import { AlertCircle, ChevronDown, Code, Database, FileText } from 'lucide-react';
+import React, { useMemo } from 'react';
+
+import {
+    Badge, Card, CardContent, CardHeader, CardTitle, Collapsible, CollapsibleContent,
+    CollapsibleTrigger, CopyButton
+} from '@djangocfg/ui-core/components';
+
+import { usePlaygroundContext } from '../context/PlaygroundContext';
+import { getMethodColor, getStatusColor } from '../utils';
+
+export const EndpointInfo: React.FC = () => {
+  const { state } = usePlaygroundContext();
+  const { selectedEndpoint } = state;
+
+  // Memoize endpoint JSON for copy
+  const endpointJson = useMemo(() => {
+    if (!selectedEndpoint) return '';
+    return JSON.stringify({
+      name: selectedEndpoint.name,
+      method: selectedEndpoint.method,
+      path: selectedEndpoint.path,
+      description: selectedEndpoint.description,
+      parameters: selectedEndpoint.parameters,
+      requestBody: selectedEndpoint.requestBody,
+      responses: selectedEndpoint.responses
+    }, null, 2);
+  }, [selectedEndpoint]);
+
+  if (!selectedEndpoint) {
+    return null;
+  }
+
+  const getMethodBadges = (methods: string) => {
+    return methods.split(', ').map((method) => (
+      <Badge key={method} variant={getMethodColor(method) === 'success' ? 'default' : 'secondary'} className="text-xs">
+        {method}
+      </Badge>
+    ));
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold text-foreground">Selected Endpoint</h2>
+        <CopyButton value={endpointJson} variant="outline" size="sm">
+          Copy
+        </CopyButton>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center justify-between text-sm text-foreground">
+            <div className="flex items-center space-x-2">
+              <Code className="h-4 w-4" />
+              <span className="font-medium">{selectedEndpoint.name}</span>
+            </div>
+            <div className="flex space-x-1">{getMethodBadges(selectedEndpoint.method)}</div>
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div>
+            <p className="text-xs font-mono text-muted-foreground break-all">
+              {selectedEndpoint.path}
+            </p>
+            <p className="text-xs text-muted-foreground mt-1">
+              {selectedEndpoint.description}
+            </p>
+          </div>
+
+          {/* Parameters */}
+          {selectedEndpoint.parameters && selectedEndpoint.parameters.length > 0 && (
+            <Collapsible>
+              <CollapsibleTrigger className="flex items-center space-x-2 text-sm font-medium text-foreground">
+                <Database className="h-4 w-4" />
+                <span>Parameters ({selectedEndpoint.parameters.length})</span>
+                <ChevronDown className="h-4 w-4" />
+              </CollapsibleTrigger>
+              <CollapsibleContent className="mt-2 space-y-2">
+                {selectedEndpoint.parameters.map((param, index) => (
+                  <div key={index} className="flex items-center space-x-2 text-xs">
+                    <Badge variant={param.required ? 'destructive' : 'secondary'} className="text-xs">
+                      {param.required ? 'Required' : 'Optional'}
+                    </Badge>
+                    <span className="font-mono text-muted-foreground">
+                      {param.name}: {param.type}
+                    </span>
+                    {param.description && (
+                      <span className="text-muted-foreground">- {param.description}</span>
+                    )}
+                  </div>
+                ))}
+              </CollapsibleContent>
+            </Collapsible>
+          )}
+
+          {/* Request Body */}
+          {selectedEndpoint.requestBody && (
+            <Collapsible>
+              <CollapsibleTrigger className="flex items-center space-x-2 text-sm font-medium text-foreground">
+                <FileText className="h-4 w-4" />
+                <span>Request Body</span>
+                <ChevronDown className="h-4 w-4" />
+              </CollapsibleTrigger>
+              <CollapsibleContent className="mt-2">
+                <div className="text-xs text-muted-foreground">
+                  <p>Type: {selectedEndpoint.requestBody.type}</p>
+                  {selectedEndpoint.requestBody.description && (
+                    <p className="mt-1">{selectedEndpoint.requestBody.description}</p>
+                  )}
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+          )}
+
+          {/* Responses */}
+          {selectedEndpoint.responses && selectedEndpoint.responses.length > 0 && (
+            <Collapsible>
+              <CollapsibleTrigger className="flex items-center space-x-2 text-sm font-medium text-foreground">
+                <AlertCircle className="h-4 w-4" />
+                <span>Responses ({selectedEndpoint.responses.length})</span>
+                <ChevronDown className="h-4 w-4" />
+              </CollapsibleTrigger>
+              <CollapsibleContent className="mt-2 space-y-2">
+                {selectedEndpoint.responses.map((response, index) => {
+                  const statusColor = getStatusColor(parseInt(response.code));
+                  const badgeVariant = statusColor === 'success' ? 'default' :
+                                      statusColor === 'error' ? 'destructive' : 'secondary';
+                  return (
+                    <div key={index} className="flex items-center space-x-2 text-xs">
+                      <Badge variant={badgeVariant} className="text-xs">
+                        {response.code}
+                      </Badge>
+                      <span className="text-muted-foreground">
+                        {response.description}
+                      </span>
+                    </div>
+                  );
+                })}
+              </CollapsibleContent>
+            </Collapsible>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+};