@brainfish-ai/devdoc 0.1.21

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

@@ -0,0 +1,431 @@
+'use client'
+
+import React, { useEffect, useState, useRef } from 'react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import type { Components } from 'react-markdown'
+import { CodeViewer, SupportedLanguage } from '../playground/code-editor'
+import { useNavigation } from '@/lib/api-docs/navigation-context'
+
+// Error Boundary for Mermaid Preview
+class MermaidErrorBoundary extends React.Component<
+  { children: React.ReactNode; code: string },
+  { hasError: boolean; error: string | null }
+> {
+  constructor(props: { children: React.ReactNode; code: string }) {
+    super(props)
+    this.state = { hasError: false, error: null }
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error: error.message }
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('[MermaidErrorBoundary] Error:', error, errorInfo)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="my-4 p-4 border border-red-500/30 bg-red-500/10 rounded-lg">
+          <div className="text-red-400 text-sm font-medium mb-2">Mermaid Diagram Error</div>
+          <div className="text-red-300 text-xs mb-2">{this.state.error}</div>
+          <pre className="text-xs text-muted-foreground overflow-x-auto p-2 bg-muted rounded">
+            {this.props.code}
+          </pre>
+        </div>
+      )
+    }
+    return this.props.children
+  }
+}
+
+// Mermaid preview component
+function MermaidPreviewInner({ code }: { code: string }) {
+  const [svg, setSvg] = useState<string>('')
+  const [error, setError] = useState<string | null>(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: unknown) {
+        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 (
+      <div className="my-4 p-4 bg-muted/30 rounded-lg flex items-center justify-center min-h-[100px]">
+        <div className="text-muted-foreground text-sm">Rendering diagram...</div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="my-4 p-4 border border-yellow-500/30 bg-yellow-500/10 rounded-lg">
+        <div className="text-yellow-400 text-sm font-medium mb-2">Diagram Syntax Error</div>
+        <div className="text-yellow-300 text-xs mb-2">{error}</div>
+        <pre className="text-xs text-muted-foreground overflow-x-auto p-2 bg-muted rounded">
+          {code}
+        </pre>
+      </div>
+    )
+  }
+
+  if (!svg) {
+    return null
+  }
+
+  return (
+    <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 }: { code: string }) {
+  return (
+    <MermaidErrorBoundary code={code}>
+      <MermaidPreviewInner code={code} />
+    </MermaidErrorBoundary>
+  )
+}
+
+interface MarkdownRendererProps {
+  content: string
+  className?: string
+}
+
+
+
+// Map common language identifiers to Monaco supported languages
+function getMonacoLanguage(lang: string | undefined): SupportedLanguage {
+  if (!lang) return 'plaintext'
+  
+  const langMap: Record<string, SupportedLanguage> = {
+    '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: string): string {
+  return text
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+}
+
+/**
+ * Extract text content from React children
+ */
+function getTextContent(children: React.ReactNode): string {
+  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 as React.ReactElement<{ children?: React.ReactNode }>
+    return getTextContent(element.props.children)
+  }
+  return ''
+}
+
+/**
+ * Custom link component that handles internal endpoint links
+ */
+function MarkdownLink({ href, children }: { href?: string; children: React.ReactNode }) {
+  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 (
+      <button
+        onClick={() => navigateToEndpoint(operationId)}
+        className="text-primary hover:underline font-medium cursor-pointer bg-transparent border-none p-0 inline"
+      >
+        {children}
+      </button>
+    )
+  }
+  
+  // External link - open in new tab
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="text-primary hover:underline font-medium"
+    >
+      {children}
+    </a>
+  )
+}
+
+const markdownComponents: Partial<Components> = {
+  h1: ({ children }) => {
+    const text = getTextContent(children)
+    const id = generateSlug(text)
+    return (
+      <h1 id={id} className="text-2xl font-bold mt-8 mb-4 pb-2 border-b border-border scroll-mt-20">{children}</h1>
+    )
+  },
+  h2: ({ children }) => {
+    const text = getTextContent(children)
+    const id = generateSlug(text)
+    return (
+      <h2 id={id} className="text-xl font-semibold mt-6 mb-3 scroll-mt-20">{children}</h2>
+    )
+  },
+  h3: ({ children }) => {
+    const text = getTextContent(children)
+    const id = generateSlug(text)
+    return (
+      <h3 id={id} className="text-lg font-semibold mt-5 mb-2 scroll-mt-20">{children}</h3>
+    )
+  },
+  h4: ({ children }) => {
+    const text = getTextContent(children)
+    const id = generateSlug(text)
+    return (
+      <h4 id={id} className="text-base font-semibold mt-4 mb-2 scroll-mt-20">{children}</h4>
+    )
+  },
+  h5: ({ children }) => {
+    const text = getTextContent(children)
+    const id = generateSlug(text)
+    return (
+      <h5 id={id} className="text-sm font-semibold mt-3 mb-1 scroll-mt-20">{children}</h5>
+    )
+  },
+  h6: ({ children }) => {
+    const text = getTextContent(children)
+    const id = generateSlug(text)
+    return (
+      <h6 id={id} className="text-sm font-medium mt-2 mb-1 text-muted-foreground scroll-mt-20">{children}</h6>
+    )
+  },
+  p: ({ children }) => (
+    <p className="mb-4 leading-7 text-foreground/90">{children}</p>
+  ),
+  ul: ({ children }) => (
+    <ul className="list-disc pl-6 mb-4 space-y-2">{children}</ul>
+  ),
+  ol: ({ children }) => (
+    <ol className="list-decimal pl-6 mb-4 space-y-2">{children}</ol>
+  ),
+  li: ({ children }) => (
+    <li className="leading-7">{children}</li>
+  ),
+  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 (
+        <code
+          className="px-1.5 py-0.5 bg-muted rounded text-sm font-mono text-foreground"
+          {...props}
+        >
+          {children}
+        </code>
+      )
+    }
+    
+    // Mermaid code blocks - render as diagrams
+    if (detectedLanguage === 'mermaid') {
+      return <MermaidPreview code={codeContent} />
+    }
+    
+    // Code block - use Monaco with dark theme and no line numbers
+    const language = getMonacoLanguage(detectedLanguage)
+    
+    return (
+      <div className="my-4 dark-editor">
+        <CodeViewer
+          value={codeContent}
+          language={language}
+          height="auto"
+          minHeight={Math.min(Math.max(codeContent.split('\n').length * 20 + 24, 60), 400)}
+          theme="dark"
+          showLineNumbers={false}
+        />
+      </div>
+    )
+  },
+  pre: ({ children }) => {
+    // Pre is handled by code block, just pass through
+    return <>{children}</>
+  },
+  blockquote: ({ children }) => (
+    <blockquote className="border-l-4 border-primary/50 pl-4 py-1 my-4 bg-muted/30 rounded-r">
+      <div className="text-muted-foreground italic">{children}</div>
+    </blockquote>
+  ),
+  a: ({ href, children }) => (
+    <MarkdownLink href={href}>{children}</MarkdownLink>
+  ),
+  strong: ({ children }) => (
+    <strong className="font-bold text-foreground">{children}</strong>
+  ),
+  em: ({ children }) => (
+    <em className="italic">{children}</em>
+  ),
+  hr: () => (
+    <hr className="my-8 border-border" />
+  ),
+  table: ({ children }) => (
+    <div className="my-4 overflow-x-auto">
+      <table className="min-w-full border border-border rounded-sm overflow-hidden">
+        {children}
+      </table>
+    </div>
+  ),
+  thead: ({ children }) => (
+    <thead className="bg-muted">{children}</thead>
+  ),
+  tbody: ({ children }) => (
+    <tbody className="divide-y divide-border">{children}</tbody>
+  ),
+  tr: ({ children }) => (
+    <tr className="hover:bg-muted/50">{children}</tr>
+  ),
+  th: ({ children }) => (
+    <th className="px-4 py-2 text-left text-sm font-semibold">{children}</th>
+  ),
+  td: ({ children }) => (
+    <td className="px-4 py-2 text-sm">{children}</td>
+  ),
+}
+
+export function MarkdownRenderer({ content, className = '' }: MarkdownRendererProps) {
+  if (!content) return null
+
+  return (
+    <div className={`max-w-none ${className}`}>
+      <ReactMarkdown 
+        components={markdownComponents}
+        remarkPlugins={[remarkGfm]}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  )
+}

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

@@ -0,0 +1,41 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import type { HTTPMethod } from '@/lib/api-docs/types'
+
+interface MethodBadgeProps {
+  method: HTTPMethod
+  size?: 'sm' | 'md' | 'lg'
+  className?: string
+}
+
+const methodColors: Record<HTTPMethod, string> = {
+  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 = '' }: MethodBadgeProps) {
+  return (
+    <span
+      className={cn(
+        'font-semibold rounded uppercase tracking-wide',
+        methodColors[method],
+        sizeClasses[size],
+        className
+      )}
+    >
+      {method}
+    </span>
+  )
+}