@brainfish-ai/devdoc 0.1.42 → 0.1.43

package/renderer/components/docs-viewer/shared/markdown-renderer.js

@@ -0,0 +1,423 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useEffect, useState, useRef } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { CodeViewer } from '../playground/code-editor';
+import { useNavigation } from '@/lib/api-docs/navigation-context';
+// Error Boundary for Mermaid Preview
+class MermaidErrorBoundary extends React.Component {
+    static getDerivedStateFromError(error) {
+        return {
+            hasError: true,
+            error: error.message
+        };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error('[MermaidErrorBoundary] Error:', error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError) {
+            return /*#__PURE__*/ _jsxs("div", {
+                className: "my-4 p-4 border border-red-500/30 bg-red-500/10 rounded-lg",
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "text-red-400 text-sm font-medium mb-2",
+                        children: "Mermaid Diagram Error"
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "text-red-300 text-xs mb-2",
+                        children: this.state.error
+                    }),
+                    /*#__PURE__*/ _jsx("pre", {
+                        className: "text-xs text-muted-foreground overflow-x-auto p-2 bg-muted rounded",
+                        children: this.props.code
+                    })
+                ]
+            });
+        }
+        return this.props.children;
+    }
+    constructor(props){
+        super(props);
+        this.state = {
+            hasError: false,
+            error: null
+        };
+    }
+}
+// Mermaid preview component
+function MermaidPreviewInner({ code }) {
+    const [svg, setSvg] = useState('');
+    const [error, setError] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const renderIdRef = useRef(0);
+    useEffect(()=>{
+        if (!code.trim()) {
+            setLoading(false);
+            setSvg('');
+            setError(null);
+            return;
+        }
+        const currentRenderId = ++renderIdRef.current;
+        setLoading(true);
+        setError(null);
+        const renderDiagram = async ()=>{
+            try {
+                const mermaid = (await import('mermaid')).default;
+                mermaid.initialize({
+                    startOnLoad: false,
+                    theme: 'dark',
+                    themeVariables: {
+                        background: '#1e1e1e',
+                        primaryColor: '#3b82f6',
+                        primaryTextColor: '#ffffff',
+                        primaryBorderColor: '#60a5fa',
+                        secondaryColor: '#3b82f6',
+                        secondaryTextColor: '#ffffff',
+                        secondaryBorderColor: '#60a5fa',
+                        tertiaryColor: '#3b82f6',
+                        tertiaryTextColor: '#ffffff',
+                        tertiaryBorderColor: '#60a5fa',
+                        mainBkg: '#3b82f6',
+                        nodeBkg: '#3b82f6',
+                        nodeBorder: '#60a5fa',
+                        nodeTextColor: '#ffffff',
+                        clusterBkg: '#27272a',
+                        clusterBorder: '#52525b',
+                        titleColor: '#ffffff',
+                        lineColor: '#94a3b8',
+                        fontFamily: 'system-ui, sans-serif',
+                        fontSize: '14px'
+                    },
+                    flowchart: {
+                        htmlLabels: true,
+                        useMaxWidth: true
+                    }
+                });
+                const { svg: renderedSvg } = await mermaid.render(`mermaid-md-${currentRenderId}-${Date.now()}`, code);
+                if (currentRenderId === renderIdRef.current) {
+                    setSvg(renderedSvg);
+                    setError(null);
+                }
+            } catch (err) {
+                if (currentRenderId === renderIdRef.current) {
+                    let errorMessage = 'Failed to render diagram';
+                    if (err instanceof Error) {
+                        errorMessage = err.message;
+                        if (errorMessage.includes('Parse error')) {
+                            const match = errorMessage.match(/Parse error on line (\d+)/);
+                            if (match) {
+                                errorMessage = `Syntax error on line ${match[1]}`;
+                            }
+                        }
+                    } else if (typeof err === 'string') {
+                        errorMessage = err;
+                    }
+                    console.error('[MermaidPreview] Render error:', errorMessage);
+                    setError(errorMessage);
+                }
+            } finally{
+                if (currentRenderId === renderIdRef.current) {
+                    setLoading(false);
+                }
+            }
+        };
+        const debounceTimer = setTimeout(renderDiagram, 300);
+        return ()=>clearTimeout(debounceTimer);
+    }, [
+        code
+    ]);
+    if (loading) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: "my-4 p-4 bg-muted/30 rounded-lg flex items-center justify-center min-h-[100px]",
+            children: /*#__PURE__*/ _jsx("div", {
+                className: "text-muted-foreground text-sm",
+                children: "Rendering diagram..."
+            })
+        });
+    }
+    if (error) {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "my-4 p-4 border border-yellow-500/30 bg-yellow-500/10 rounded-lg",
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: "text-yellow-400 text-sm font-medium mb-2",
+                    children: "Diagram Syntax Error"
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: "text-yellow-300 text-xs mb-2",
+                    children: error
+                }),
+                /*#__PURE__*/ _jsx("pre", {
+                    className: "text-xs text-muted-foreground overflow-x-auto p-2 bg-muted rounded",
+                    children: code
+                })
+            ]
+        });
+    }
+    if (!svg) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx("div", {
+        className: "my-4 p-4 bg-zinc-900 rounded-lg overflow-x-auto mermaid",
+        dangerouslySetInnerHTML: {
+            __html: svg
+        }
+    });
+}
+// Mermaid preview with error boundary wrapper
+function MermaidPreview({ code }) {
+    return /*#__PURE__*/ _jsx(MermaidErrorBoundary, {
+        code: code,
+        children: /*#__PURE__*/ _jsx(MermaidPreviewInner, {
+            code: code
+        })
+    });
+}
+// Map common language identifiers to Monaco supported languages
+function getMonacoLanguage(lang) {
+    if (!lang) return 'plaintext';
+    const langMap = {
+        'js': 'javascript',
+        'javascript': 'javascript',
+        'ts': 'typescript',
+        'typescript': 'typescript',
+        'json': 'json',
+        'xml': 'xml',
+        'html': 'html',
+        'htm': 'html',
+        'bash': 'shell',
+        'shell': 'shell',
+        'sh': 'shell',
+        'zsh': 'shell',
+        'curl': 'shell',
+        'text': 'plaintext',
+        'plaintext': 'plaintext'
+    };
+    return langMap[lang.toLowerCase()] || 'plaintext';
+}
+/**
+ * Generate a URL-friendly slug from heading text
+ */ function generateSlug(text) {
+    return text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
+}
+/**
+ * Extract text content from React children
+ */ function getTextContent(children) {
+    if (typeof children === 'string') return children;
+    if (typeof children === 'number') return String(children);
+    if (Array.isArray(children)) return children.map(getTextContent).join('');
+    if (children && typeof children === 'object' && 'props' in children) {
+        const element = children;
+        return getTextContent(element.props.children);
+    }
+    return '';
+}
+/**
+ * Custom link component that handles internal endpoint links
+ */ function MarkdownLink({ href, children }) {
+    const { navigateToEndpoint } = useNavigation();
+    // Check if this is an internal endpoint link
+    // Formats: #operation/operationId, #/paths/~1endpoint/method
+    const isEndpointLink = href?.startsWith('#operation/') || href?.startsWith('#/paths/');
+    if (isEndpointLink) {
+        let operationId = '';
+        if (href?.startsWith('#operation/')) {
+            // Format: #operation/post_carts
+            operationId = href.replace('#operation/', '');
+        } else if (href?.startsWith('#/paths/')) {
+            // Format: #/paths/~1carts/post → extract operation (simplified)
+            const parts = href.replace('#/paths/', '').split('/');
+            const method = parts[parts.length - 1];
+            const path = parts.slice(0, -1).join('/').replace(/~1/g, '/');
+            operationId = `${method}_${path.replace(/\//g, '_').replace(/^_/, '')}`;
+        }
+        return /*#__PURE__*/ _jsx("button", {
+            onClick: ()=>navigateToEndpoint(operationId),
+            className: "text-primary hover:underline font-medium cursor-pointer bg-transparent border-none p-0 inline",
+            children: children
+        });
+    }
+    // External link - open in new tab
+    return /*#__PURE__*/ _jsx("a", {
+        href: href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "text-primary hover:underline font-medium",
+        children: children
+    });
+}
+const markdownComponents = {
+    h1: ({ children })=>{
+        const text = getTextContent(children);
+        const id = generateSlug(text);
+        return /*#__PURE__*/ _jsx("h1", {
+            id: id,
+            className: "text-2xl font-bold mt-8 mb-4 pb-2 border-b border-border scroll-mt-20",
+            children: children
+        });
+    },
+    h2: ({ children })=>{
+        const text = getTextContent(children);
+        const id = generateSlug(text);
+        return /*#__PURE__*/ _jsx("h2", {
+            id: id,
+            className: "text-xl font-semibold mt-6 mb-3 scroll-mt-20",
+            children: children
+        });
+    },
+    h3: ({ children })=>{
+        const text = getTextContent(children);
+        const id = generateSlug(text);
+        return /*#__PURE__*/ _jsx("h3", {
+            id: id,
+            className: "text-lg font-semibold mt-5 mb-2 scroll-mt-20",
+            children: children
+        });
+    },
+    h4: ({ children })=>{
+        const text = getTextContent(children);
+        const id = generateSlug(text);
+        return /*#__PURE__*/ _jsx("h4", {
+            id: id,
+            className: "text-base font-semibold mt-4 mb-2 scroll-mt-20",
+            children: children
+        });
+    },
+    h5: ({ children })=>{
+        const text = getTextContent(children);
+        const id = generateSlug(text);
+        return /*#__PURE__*/ _jsx("h5", {
+            id: id,
+            className: "text-sm font-semibold mt-3 mb-1 scroll-mt-20",
+            children: children
+        });
+    },
+    h6: ({ children })=>{
+        const text = getTextContent(children);
+        const id = generateSlug(text);
+        return /*#__PURE__*/ _jsx("h6", {
+            id: id,
+            className: "text-sm font-medium mt-2 mb-1 text-muted-foreground scroll-mt-20",
+            children: children
+        });
+    },
+    p: ({ children })=>/*#__PURE__*/ _jsx("p", {
+            className: "mb-4 leading-7 text-foreground/90",
+            children: children
+        }),
+    ul: ({ children })=>/*#__PURE__*/ _jsx("ul", {
+            className: "list-disc pl-6 mb-4 space-y-2",
+            children: children
+        }),
+    ol: ({ children })=>/*#__PURE__*/ _jsx("ol", {
+            className: "list-decimal pl-6 mb-4 space-y-2",
+            children: children
+        }),
+    li: ({ children })=>/*#__PURE__*/ _jsx("li", {
+            className: "leading-7",
+            children: children
+        }),
+    code: ({ className, children, ...props })=>{
+        const match = /language-(\w+)/.exec(className || '');
+        const isCodeBlock = !!match;
+        const detectedLanguage = match?.[1]?.toLowerCase();
+        const codeContent = String(children).replace(/\n$/, '');
+        // Inline code
+        if (!isCodeBlock) {
+            return /*#__PURE__*/ _jsx("code", {
+                className: "px-1.5 py-0.5 bg-muted rounded text-sm font-mono text-foreground",
+                ...props,
+                children: children
+            });
+        }
+        // Mermaid code blocks - render as diagrams
+        if (detectedLanguage === 'mermaid') {
+            return /*#__PURE__*/ _jsx(MermaidPreview, {
+                code: codeContent
+            });
+        }
+        // Code block - use Monaco with dark theme and no line numbers
+        const language = getMonacoLanguage(detectedLanguage);
+        return /*#__PURE__*/ _jsx("div", {
+            className: "my-4 dark-editor",
+            children: /*#__PURE__*/ _jsx(CodeViewer, {
+                value: codeContent,
+                language: language,
+                height: "auto",
+                minHeight: Math.min(Math.max(codeContent.split('\n').length * 20 + 24, 60), 400),
+                theme: "dark",
+                showLineNumbers: false
+            })
+        });
+    },
+    pre: ({ children })=>{
+        // Pre is handled by code block, just pass through
+        return /*#__PURE__*/ _jsx(_Fragment, {
+            children: children
+        });
+    },
+    blockquote: ({ children })=>/*#__PURE__*/ _jsx("blockquote", {
+            className: "border-l-4 border-primary/50 pl-4 py-1 my-4 bg-muted/30 rounded-r",
+            children: /*#__PURE__*/ _jsx("div", {
+                className: "text-muted-foreground italic",
+                children: children
+            })
+        }),
+    a: ({ href, children })=>/*#__PURE__*/ _jsx(MarkdownLink, {
+            href: href,
+            children: children
+        }),
+    strong: ({ children })=>/*#__PURE__*/ _jsx("strong", {
+            className: "font-bold text-foreground",
+            children: children
+        }),
+    em: ({ children })=>/*#__PURE__*/ _jsx("em", {
+            className: "italic",
+            children: children
+        }),
+    hr: ()=>/*#__PURE__*/ _jsx("hr", {
+            className: "my-8 border-border"
+        }),
+    table: ({ children })=>/*#__PURE__*/ _jsx("div", {
+            className: "my-4 overflow-x-auto",
+            children: /*#__PURE__*/ _jsx("table", {
+                className: "min-w-full border border-border rounded-sm overflow-hidden",
+                children: children
+            })
+        }),
+    thead: ({ children })=>/*#__PURE__*/ _jsx("thead", {
+            className: "bg-muted",
+            children: children
+        }),
+    tbody: ({ children })=>/*#__PURE__*/ _jsx("tbody", {
+            className: "divide-y divide-border",
+            children: children
+        }),
+    tr: ({ children })=>/*#__PURE__*/ _jsx("tr", {
+            className: "hover:bg-muted/50",
+            children: children
+        }),
+    th: ({ children })=>/*#__PURE__*/ _jsx("th", {
+            className: "px-4 py-2 text-left text-sm font-semibold",
+            children: children
+        }),
+    td: ({ children })=>/*#__PURE__*/ _jsx("td", {
+            className: "px-4 py-2 text-sm",
+            children: children
+        })
+};
+export function MarkdownRenderer({ content, className = '' }) {
+    if (!content) return null;
+    return /*#__PURE__*/ _jsx("div", {
+        className: `max-w-none ${className}`,
+        children: /*#__PURE__*/ _jsx(ReactMarkdown, {
+            components: markdownComponents,
+            remarkPlugins: [
+                remarkGfm
+            ],
+            children: content
+        })
+    });
+}

package/renderer/components/docs-viewer/shared/method-badge.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '@/lib/utils';
+const methodColors = {
+    GET: 'bg-emerald-500/90 text-white',
+    POST: 'bg-blue-500/90 text-white',
+    PUT: 'bg-amber-500/90 text-white',
+    DELETE: 'bg-red-500/90 text-white',
+    PATCH: 'bg-violet-500/90 text-white',
+    HEAD: 'bg-slate-500/90 text-white',
+    OPTIONS: 'bg-slate-500/90 text-white'
+};
+const sizeClasses = {
+    sm: 'px-1.5 py-0.5 text-[10px]',
+    md: 'px-2 py-0.5 text-xs',
+    lg: 'px-2.5 py-1 text-sm'
+};
+export function MethodBadge({ method, size = 'md', className = '' }) {
+    return /*#__PURE__*/ _jsx("span", {
+        className: cn('font-semibold rounded uppercase tracking-wide', methodColors[method], sizeClasses[size], className),
+        children: method
+    });
+}