@djangocfg/ui-nextjs 1.4.45

package/src/tools/Mermaid/Mermaid.client.tsx

@@ -0,0 +1,341 @@
+'use client';
+
+import mermaid from 'mermaid';
+import React, { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useTheme } from '../../hooks/useTheme';
+
+interface MermaidProps {
+    chart: string;
+    className?: string;
+}
+
+// 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);
+        // Consider vertical if height is more than 1.5x the width
+        return height > width * 1.5;
+    }
+    // Fallback to computed dimensions
+    const bbox = svgElement.getBBox?.();
+    if (bbox) {
+        return bbox.height > bbox.width * 1.5;
+    }
+    return false;
+};
+
+const Mermaid: React.FC<MermaidProps> = ({ chart, className = '' }) => {
+    const mermaidRef = useRef<HTMLDivElement>(null);
+    const fullscreenRef = useRef<HTMLDivElement>(null);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [svgContent, setSvgContent] = useState<string>('');
+    const [isVertical, setIsVertical] = useState(false);
+    const theme = useTheme();
+
+    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})` : '';
+        };
+
+        // Note: In Mermaid v11+, mermaidAPI.reset() no longer exists
+        // Re-initialization happens automatically via mermaid.initialize()
+
+        const themeVariables = theme === 'dark' ? {
+                // Dark theme - vibrant and clear
+                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%)',
+
+                // Main elements - darker with good contrast
+                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%)',
+
+                // Alternative backgrounds
+                secondBkg: getCSSVariable('--muted') || 'hsl(217.2 32.6% 17.5%)',
+
+                // Lines and edges - lighter for visibility
+                lineColor: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',
+                edgeLabelBackground: getCSSVariable('--card') || 'hsl(222.2 84% 8%)',
+
+                // Clusters
+                clusterBkg: getCSSVariable('--muted') || 'hsl(217.2 32.6% 12%)',
+                clusterBorder: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',
+
+                // Background
+                background: getCSSVariable('--background') || 'hsl(222.2 84% 4.9%)',
+
+                // Labels
+                labelBackground: getCSSVariable('--card') || 'hsl(222.2 84% 8%)',
+                labelTextColor: getCSSVariable('--foreground') || 'hsl(210 40% 98%)',
+
+                // Special states
+                errorBkgColor: getCSSVariable('--destructive') || 'hsl(0 62.8% 30.6%)',
+                errorTextColor: 'hsl(210 40% 98%)',
+
+                fontSize: '14px',
+                fontFamily: 'Inter, system-ui, sans-serif',
+            } : {
+                // Light theme - clean and professional
+                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%)',
+
+                // Main elements - white with good contrast
+                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%)',
+
+                // Alternative backgrounds
+                secondBkg: getCSSVariable('--muted') || 'hsl(210 40% 96.1%)',
+
+                // Lines and edges - vibrant primary color
+                lineColor: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',
+                edgeLabelBackground: getCSSVariable('--card') || 'hsl(0 0% 100%)',
+
+                // Clusters - subtle background
+                clusterBkg: getCSSVariable('--accent') || 'hsl(210 40% 98%)',
+                clusterBorder: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',
+
+                // Background
+                background: getCSSVariable('--background') || 'hsl(0 0% 100%)',
+
+                // Labels
+                labelBackground: getCSSVariable('--card') || 'hsl(0 0% 100%)',
+                labelTextColor: getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)',
+
+                // Special states
+                errorBkgColor: getCSSVariable('--destructive') || 'hsl(0 84.2% 60.2%)',
+                errorTextColor: 'hsl(210 40% 98%)',
+
+                fontSize: '14px',
+                fontFamily: 'Inter, system-ui, sans-serif',
+            };
+
+        // Initialize mermaid with dynamic theme configuration
+        mermaid.initialize({
+            startOnLoad: false,
+            theme: 'base', // Use 'base' theme for better custom variable support
+            securityLevel: 'loose',
+            fontFamily: 'Inter, system-ui, sans-serif',
+            flowchart: {
+                useMaxWidth: true,
+                htmlLabels: true,
+                curve: 'basis',
+            },
+            themeVariables,
+        });
+
+        // Render the chart
+        // Mermaid v11+ requires unique IDs - use random suffix to avoid conflicts
+        const renderChart = async () => {
+            if (!mermaidRef.current || !chart) return;
+
+            try {
+                const id = `mermaid-${Math.random().toString(36).substring(2, 9)}`;
+                const { svg } = await mermaid.render(id, chart);
+
+                if (mermaidRef.current) {
+                    // Post-process SVG to force correct text colors
+                    const textColor = theme === 'dark'
+                        ? getCSSVariable('--foreground') || 'hsl(0 0% 90%)'
+                        : getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)';
+
+                    // Add inline style to override any conflicting styles
+                    const processedSvg = svg.replace(
+                        /<svg /,
+                        `<svg style="--mermaid-text-color: ${textColor};" `
+                    );
+
+                    mermaidRef.current.innerHTML = processedSvg;
+                    setSvgContent(processedSvg);
+
+                    // Apply text colors and responsive styles using utility function
+                    applyMermaidTextColors(mermaidRef.current, textColor);
+
+                    // Make inline SVG responsive and detect orientation
+                    const svgElement = mermaidRef.current.querySelector('svg');
+                    if (svgElement) {
+                        svgElement.style.maxWidth = '100%';
+                        svgElement.style.height = 'auto';
+                        svgElement.style.display = 'block';
+
+                        // Detect if diagram is vertical
+                        setIsVertical(isVerticalDiagram(svgElement));
+                    }
+                }
+            } catch (error) {
+                console.error('Mermaid rendering error:', error);
+                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>
+                    `;
+                }
+            }
+        };
+
+        renderChart();
+    }, [chart, theme]);
+
+    const handleClick = () => {
+        if (svgContent) {
+            setIsFullscreen(true);
+        }
+    };
+
+    const handleClose = () => {
+        setIsFullscreen(false);
+    };
+
+    const handleBackdropClick = (e: React.MouseEvent) => {
+        if (e.target === e.currentTarget) {
+            handleClose();
+        }
+    };
+
+    // Handle ESC key
+    useEffect(() => {
+        const handleEscKey = (event: KeyboardEvent) => {
+            if (event.key === 'Escape' && isFullscreen) {
+                handleClose();
+            }
+        };
+
+        if (isFullscreen) {
+            document.addEventListener('keydown', handleEscKey);
+            document.body.style.overflow = 'hidden'; // Prevent background scroll
+        }
+
+        return () => {
+            document.removeEventListener('keydown', handleEscKey);
+            document.body.style.overflow = 'unset';
+        };
+    }, [isFullscreen]);
+
+    // Apply text colors to fullscreen modal after render
+    useEffect(() => {
+        if (isFullscreen && fullscreenRef.current) {
+            const getCSSVariable = (variable: string) => {
+                if (typeof document === 'undefined') return '';
+                const value = getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+                return value ? `hsl(${value})` : '';
+            };
+
+            const textColor = theme === 'dark'
+                ? getCSSVariable('--foreground') || 'hsl(0 0% 90%)'
+                : getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)';
+
+            applyMermaidTextColors(fullscreenRef.current, textColor);
+
+            // Make SVG responsive
+            const svgElement = fullscreenRef.current.querySelector('svg');
+            if (svgElement) {
+                svgElement.style.display = 'block';
+                svgElement.style.height = 'auto';
+                svgElement.style.maxWidth = '100%';
+            }
+        }
+    }, [isFullscreen, theme]);
+
+    return (
+        <>
+            <div
+                className={`relative bg-card rounded-sm border border-border overflow-hidden cursor-pointer hover:shadow-sm transition-shadow ${className}`}
+                onClick={handleClick}
+            >
+                <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">Click to view fullscreen</p>
+                </div>
+                <div className="p-4">
+                    <div
+                        ref={mermaidRef}
+                        className="flex justify-center items-center min-h-[200px]"
+                    />
+                </div>
+            </div>
+
+            {/* Fullscreen Modal - rendered in portal */}
+            {isFullscreen && typeof document !== 'undefined' && createPortal(
+                <div
+                    className="fixed inset-0 z-9999 flex items-center justify-center p-4"
+                    style={{ backgroundColor: 'rgb(0 0 0 / 0.75)' }}
+                    onClick={handleBackdropClick}
+                >
+                    <div className={`relative bg-card rounded-sm shadow-xl max-h-[95vh] flex flex-col border border-border ${
+                        isVertical
+                            ? 'w-auto max-w-[500px]'
+                            : 'max-w-[95vw] w-full h-full'
+                    }`}>
+                        {/* Header */}
+                        <div className="flex items-center justify-between py-4 px-6 border-b border-border">
+                            <h3 className="text-sm font-medium text-foreground py-0 my-0">Diagram</h3>
+                            <button
+                                onClick={handleClose}
+                                className="text-muted-foreground hover:text-foreground transition-colors"
+                            >
+                                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                                </svg>
+                            </button>
+                        </div>
+
+                        {/* Content with scroll */}
+                        <div className="flex-1 overflow-auto p-6">
+                            <div
+                                ref={fullscreenRef}
+                                className="min-h-full flex items-start justify-center"
+                                dangerouslySetInnerHTML={{ __html: svgContent }}
+                            />
+                        </div>
+                    </div>
+                </div>,
+                document.body
+            )}
+        </>
+    );
+};
+
+export default Mermaid; 

package/src/tools/Mermaid/index.tsx

@@ -0,0 +1,40 @@
+/**
+ * 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;
+}
+
+const Mermaid: React.FC<MermaidProps> = (props) => {
+  return <MermaidClient {...props} />;
+};
+
+export default Mermaid;

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

@@ -0,0 +1,144 @@
+'use client';
+
+import React from 'react';
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, Collapsible, CollapsibleContent, CollapsibleTrigger } from '@djangocfg/ui-core/components';
+import { ChevronDown, Code, Database, FileText, AlertCircle, Copy } from 'lucide-react';
+import { usePlaygroundContext } from '../context/PlaygroundContext';
+import { getMethodColor, getStatusColor } from '../utils';
+
+export const EndpointInfo: React.FC = () => {
+  const { state, copyToClipboard } = usePlaygroundContext();
+  const { selectedEndpoint } = state;
+
+  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>
+    ));
+  };
+
+  const handleCopyEndpoint = () => {
+    const endpointDetails = {
+      name: selectedEndpoint.name,
+      method: selectedEndpoint.method,
+      path: selectedEndpoint.path,
+      description: selectedEndpoint.description,
+      parameters: selectedEndpoint.parameters,
+      requestBody: selectedEndpoint.requestBody,
+      responses: selectedEndpoint.responses
+    };
+    
+    copyToClipboard(JSON.stringify(endpointDetails, null, 2));
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold text-foreground">Selected Endpoint</h2>
+        <Button variant="outline" size="sm" onClick={handleCopyEndpoint}>
+          <Copy className="h-4 w-4" />
+          Copy
+        </Button>
+      </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) => (
+                  <div key={index} className="flex items-center space-x-2 text-xs">
+                    <Badge 
+                      variant={getStatusColor(parseInt(response.code)) === 'success' ? 'default' : 
+                              getStatusColor(parseInt(response.code)) === 'error' ? 'destructive' : 'secondary'} 
+                      className="text-xs"
+                    >
+                      {response.code}
+                    </Badge>
+                    <span className="text-muted-foreground">
+                      {response.description}
+                    </span>
+                  </div>
+                ))}
+              </CollapsibleContent>
+            </Collapsible>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+};