@djangocfg/ui-nextjs 2.1.89 → 2.1.91

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

@@ -1,226 +0,0 @@
-/**
- * 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

@@ -1,29 +0,0 @@
-/**
- * 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

@@ -1,41 +0,0 @@
-/**
- * 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 dynamic from 'next/dynamic';
-import React from 'react';
-
-// Dynamic import with loading state
-const MermaidClient = dynamic(() => import('./Mermaid.client'), {
-  ssr: false,
-  loading: () => (
-    <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; // Compact mode for smaller font sizes
-}
-
-const Mermaid: React.FC<MermaidProps> = (props) => {
-  return <MermaidClient {...props} />;
-};
-
-export default Mermaid;

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

@@ -1,33 +0,0 @@
-/**
- * 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

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