@brainfish-ai/devdoc 0.1.21

package/renderer/components/docs/mdx/code-group.tsx

@@ -0,0 +1,421 @@
+'use client'
+
+import React, { useState, Children, isValidElement, ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+import { Copy, Check } from '@phosphor-icons/react'
+
+/**
+ * CodeGroup Component for MDX Documentation
+ * 
+ * Groups multiple code blocks with tabs for language/file selection.
+ * Similar to Mintlify's CodeGroup component.
+ * 
+ * Usage:
+ * <CodeGroup>
+ *   ```js title="helloWorld.js"
+ *   console.log("Hello World");
+ *   ```
+ *   
+ *   ```python title="hello_world.py"
+ *   print("Hello World")
+ *   ```
+ * </CodeGroup>
+ */
+
+interface CodeBlockInfo {
+  title: string
+  language: string
+  content: string
+  element: React.ReactNode
+}
+
+interface CodeGroupProps {
+  children: React.ReactNode
+  className?: string
+  /** Display variant: 'default' (dark with underline), 'tabs' (light tab style), 'pills' (pill buttons) */
+  variant?: 'default' | 'tabs' | 'pills'
+}
+
+// Extract text content from nested React elements
+function extractTextContent(node: ReactNode): string {
+  if (typeof node === 'string') return node
+  if (typeof node === 'number') return String(node)
+  if (Array.isArray(node)) return node.map(extractTextContent).join('')
+  if (isValidElement(node)) {
+    const props = node.props as { children?: ReactNode }
+    if (props.children) {
+      return extractTextContent(props.children)
+    }
+  }
+  return ''
+}
+
+// Extract title from code comment on first line (e.g., "// npm" or "# yarn")
+function extractTitleFromComment(code: string): string | null {
+  const firstLine = code.trim().split('\n')[0]
+  
+  // Match various comment styles
+  const patterns = [
+    /^\/\/\s*(.+)$/,      // // comment
+    /^#\s*(.+)$/,         // # comment
+    /^\/\*\s*(.+?)\s*\*\/$/,  // /* comment */
+    /^<!--\s*(.+?)\s*-->$/,   // <!-- comment -->
+    /^--\s*(.+)$/,        // -- comment (SQL)
+  ]
+  
+  for (const pattern of patterns) {
+    const match = firstLine.match(pattern)
+    if (match && match[1] && match[1].length < 30) {
+      return match[1].trim()
+    }
+  }
+  
+  return null
+}
+
+// Check if element type matches a tag name (handles both string and component types)
+function isElementType(element: React.ReactElement, tagName: string): boolean {
+  const type = element.type
+  if (typeof type === 'string') {
+    return type === tagName
+  }
+  // Check displayName or name for components
+  if (typeof type === 'function') {
+    const funcType = type as { displayName?: string; name?: string }
+    return funcType.displayName === tagName || funcType.name === tagName
+  }
+  return false
+}
+
+// Recursively find all pre elements
+function findPreElements(children: ReactNode, results: CodeBlockInfo[] = []): CodeBlockInfo[] {
+  Children.forEach(children, (child) => {
+    if (!child) return
+    
+    if (isValidElement(child)) {
+      const props = child.props as Record<string, unknown>
+      
+      // Check if it's a pre element (either native or component)
+      if (isElementType(child, 'pre')) {
+        const codeChild = props.children
+        let language = 'text'
+        let content = ''
+        
+        if (isValidElement(codeChild)) {
+          const codeProps = codeChild.props as Record<string, unknown>
+          const className = (codeProps.className as string) || ''
+          const match = className.match(/language-(\w+)/)
+          language = match ? match[1] : 'text'
+          content = extractTextContent(codeProps.children as ReactNode)
+        } else if (typeof codeChild === 'string') {
+          content = codeChild
+        } else {
+          // Try to get content from nested structure
+          content = extractTextContent(codeChild as ReactNode)
+        }
+        
+        // Also check pre element's className for language
+        const preClassName = (props.className as string) || ''
+        const preMatch = preClassName.match(/language-(\w+)/)
+        if (preMatch) {
+          language = preMatch[1]
+        }
+        
+        // Check data-language attribute
+        if (props['data-language']) {
+          language = props['data-language'] as string
+        }
+        
+        // Extract title from various possible locations
+        // Priority: data-title > title prop > comment in code > language name
+        const commentTitle = extractTitleFromComment(content)
+        const title = (props['data-title'] as string) || 
+                     (props.title as string) ||
+                     commentTitle ||
+                     getDisplayName(language)
+        
+        results.push({ title, language, content, element: child })
+      }
+      // Check for figure elements (used by some syntax highlighters like rehype-pretty-code)
+      else if (isElementType(child, 'figure') && props['data-rehype-pretty-code-figure'] !== undefined) {
+        // Find pre inside figure
+        findPreElements(props.children as ReactNode, results)
+      }
+      // Check if it has children and recurse
+      else if (props.children) {
+        findPreElements(props.children as ReactNode, results)
+      }
+    }
+  })
+  
+  return results
+}
+
+// Get display name for language
+function getDisplayName(language: string): string {
+  const displayNames: Record<string, string> = {
+    javascript: 'JavaScript',
+    typescript: 'TypeScript',
+    python: 'Python',
+    java: 'Java',
+    go: 'Go',
+    rust: 'Rust',
+    ruby: 'Ruby',
+    php: 'PHP',
+    csharp: 'C#',
+    cpp: 'C++',
+    c: 'C',
+    swift: 'Swift',
+    kotlin: 'Kotlin',
+    bash: 'Bash',
+    shell: 'Shell',
+    json: 'JSON',
+    yaml: 'YAML',
+    html: 'HTML',
+    css: 'CSS',
+    sql: 'SQL',
+    markdown: 'Markdown',
+    text: 'Text',
+    plaintext: 'Text',
+  }
+  return displayNames[language.toLowerCase()] || language.charAt(0).toUpperCase() + language.slice(1)
+}
+
+export function CodeGroup({ children, className, variant = 'default' }: CodeGroupProps) {
+  const blocks = findPreElements(children)
+  const [activeIndex, setActiveIndex] = useState(0)
+  const [copied, setCopied] = useState(false)
+  
+  // If no code blocks found, just render children as-is
+  if (blocks.length === 0) {
+    return <div className={className}>{children}</div>
+  }
+  
+  const activeBlock = blocks[activeIndex]
+  
+  const handleCopy = async () => {
+    if (activeBlock?.content) {
+      try {
+        await navigator.clipboard.writeText(activeBlock.content.trim())
+        setCopied(true)
+        setTimeout(() => setCopied(false), 2000)
+      } catch (err) {
+        console.error('Failed to copy:', err)
+      }
+    }
+  }
+
+  // Tabs variant - dark theme with border tabs
+  if (variant === 'tabs') {
+    return (
+      <div className={cn(
+        'docs-code-group docs-code-group-tabs my-4 rounded-xl border border-zinc-800 overflow-hidden bg-[#1a1a1a]',
+        className
+      )}>
+        {/* Tab headers */}
+        <div className="docs-code-group-header flex items-center justify-between border-b border-zinc-800 bg-[#262626]">
+          <div className="flex overflow-x-auto">
+            {blocks.map((block, index) => (
+              <button
+                key={index}
+                type="button"
+                onClick={() => setActiveIndex(index)}
+                className={cn(
+                  'docs-code-group-tab px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-colors border-b-2 -mb-px',
+                  'hover:text-white',
+                  'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+                  activeIndex === index
+                    ? 'text-white border-emerald-500'
+                    : 'text-zinc-400 border-transparent hover:border-zinc-600'
+                )}
+              >
+                {block.title}
+              </button>
+            ))}
+          </div>
+          
+          {/* Copy button */}
+          <button
+            type="button"
+            onClick={handleCopy}
+            className={cn(
+              'mr-3 p-1.5 rounded text-zinc-500 hover:text-zinc-300',
+              'hover:bg-zinc-700/50 transition-colors',
+              'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50'
+            )}
+            title="Copy code"
+          >
+            {copied ? (
+              <Check className="h-4 w-4 text-emerald-500" weight="bold" />
+            ) : (
+              <Copy className="h-4 w-4" />
+            )}
+          </button>
+        </div>
+        
+        {/* Code content */}
+        <div className={cn(
+          'docs-code-group-content',
+          '[&>pre]:my-0 [&>pre]:rounded-none [&>pre]:border-0 [&>pre]:bg-[#1a1a1a]',
+          '[&_pre]:my-0 [&_pre]:rounded-none [&_pre]:border-0 [&_pre]:bg-[#1a1a1a]',
+          '[&_code]:bg-transparent [&_pre]:p-4',
+          '[&_pre]:text-sm [&_code]:text-sm'
+        )}>
+          {activeBlock?.element}
+        </div>
+      </div>
+    )
+  }
+
+  // Pills variant - pill-shaped buttons with dark theme
+  if (variant === 'pills') {
+    return (
+      <div className={cn(
+        'docs-code-group docs-code-group-pills my-4 rounded-xl border border-zinc-800 overflow-hidden bg-[#1a1a1a]',
+        className
+      )}>
+        {/* Pill headers */}
+        <div className="docs-code-group-header flex items-center justify-between p-2 bg-[#262626] border-b border-zinc-800">
+          <div className="flex gap-1 overflow-x-auto">
+            {blocks.map((block, index) => (
+              <button
+                key={index}
+                type="button"
+                onClick={() => setActiveIndex(index)}
+                className={cn(
+                  'docs-code-group-tab px-3 py-1.5 text-xs font-medium whitespace-nowrap rounded-full transition-colors',
+                  'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+                  activeIndex === index
+                    ? 'bg-emerald-500 text-white'
+                    : 'text-zinc-400 hover:text-white hover:bg-zinc-700'
+                )}
+              >
+                {block.title}
+              </button>
+            ))}
+          </div>
+          
+          {/* Copy button */}
+          <button
+            type="button"
+            onClick={handleCopy}
+            className={cn(
+              'p-1.5 rounded text-zinc-500 hover:text-zinc-300',
+              'hover:bg-zinc-700/50 transition-colors',
+              'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50'
+            )}
+            title="Copy code"
+          >
+            {copied ? (
+              <Check className="h-4 w-4 text-emerald-500" weight="bold" />
+            ) : (
+              <Copy className="h-4 w-4" />
+            )}
+          </button>
+        </div>
+        
+        {/* Code content */}
+        <div className={cn(
+          'docs-code-group-content',
+          '[&>pre]:my-0 [&>pre]:rounded-none [&>pre]:border-0 [&>pre]:bg-[#1a1a1a]',
+          '[&_pre]:my-0 [&_pre]:rounded-none [&_pre]:border-0 [&_pre]:bg-[#1a1a1a]',
+          '[&_code]:bg-transparent [&_pre]:p-4',
+          '[&_pre]:text-sm [&_code]:text-sm'
+        )}>
+          {activeBlock?.element}
+        </div>
+      </div>
+    )
+  }
+
+  // Default variant - dark theme with underline indicator
+  return (
+    <div className={cn(
+      'docs-code-group docs-code-group-default my-4 rounded-xl border border-zinc-800 overflow-hidden bg-[#1a1a1a]',
+      className
+    )}>
+      {/* Tab headers */}
+      <div className="docs-code-group-header flex items-center justify-between bg-[#262626] px-2">
+        <div className="flex overflow-x-auto">
+          {blocks.map((block, index) => (
+            <button
+              key={index}
+              type="button"
+              onClick={() => setActiveIndex(index)}
+              className={cn(
+                'docs-code-group-tab px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-colors relative',
+                'hover:text-white',
+                'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+                activeIndex === index
+                  ? 'text-white'
+                  : 'text-zinc-400'
+              )}
+            >
+              {block.title}
+              {/* Active indicator line */}
+              {activeIndex === index && (
+                <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-emerald-500 rounded-full" />
+              )}
+            </button>
+          ))}
+        </div>
+        
+        {/* Copy button */}
+        <div className="docs-code-group-actions flex items-center gap-1 pr-2">
+          <button
+            type="button"
+            onClick={handleCopy}
+            className={cn(
+              'p-1.5 rounded text-zinc-500 hover:text-zinc-300',
+              'hover:bg-zinc-700/50 transition-colors',
+              'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50'
+            )}
+            title="Copy code"
+          >
+            {copied ? (
+              <Check className="h-4 w-4 text-emerald-500" weight="bold" />
+            ) : (
+              <Copy className="h-4 w-4" />
+            )}
+          </button>
+        </div>
+      </div>
+      
+      {/* Code content */}
+      <div className={cn(
+        'docs-code-group-content',
+        '[&>pre]:my-0 [&>pre]:rounded-none [&>pre]:border-0 [&>pre]:bg-[#1a1a1a]',
+        '[&_pre]:my-0 [&_pre]:rounded-none [&_pre]:border-0 [&_pre]:bg-[#1a1a1a]',
+        '[&_code]:bg-transparent [&_pre]:p-4',
+        '[&_pre]:text-sm [&_code]:text-sm'
+      )}>
+        {activeBlock?.element}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * CodeBlock component for individual code blocks within CodeGroup
+ * or standalone use with filename headers
+ */
+interface CodeBlockProps {
+  children: React.ReactNode
+  title?: string
+  language?: string
+  className?: string
+}
+
+export function CodeBlockItem({ children, title, language, className }: CodeBlockProps) {
+  return (
+    <pre 
+      className={cn('p-4 overflow-x-auto', className)} 
+      data-title={title}
+      data-language={language}
+    >
+      <code className={language ? `language-${language}` : ''}>
+        {children}
+      </code>
+    </pre>
+  )
+}

package/renderer/components/docs/mdx/file-embeds.tsx

@@ -0,0 +1,105 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { DownloadSimple, FileAudio, FilePdf } from '@phosphor-icons/react'
+
+/**
+ * PDF Component - Embed PDF files with preview
+ */
+interface PDFProps {
+  src: string
+  title?: string
+  height?: number
+  className?: string
+}
+
+export function PDF({ src, title, height = 500, className }: PDFProps) {
+  return (
+    <div className={cn('my-4', className)}>
+      {title && (
+        <div className="flex items-center gap-2 mb-2">
+          <FilePdf className="h-5 w-5 text-red-500" weight="fill" />
+          <span className="text-sm font-medium">{title}</span>
+        </div>
+      )}
+      <div 
+        className="rounded-lg border border-border overflow-hidden bg-muted"
+        style={{ height }}
+      >
+        <iframe
+          src={`${src}#view=FitH`}
+          className="w-full h-full"
+          title={title || 'PDF Document'}
+        />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Audio Component - Embed audio files with player
+ */
+interface AudioProps {
+  src: string
+  title?: string
+  autoplay?: boolean
+  loop?: boolean
+  className?: string
+}
+
+export function Audio({ src, title, autoplay = false, loop = false, className }: AudioProps) {
+  return (
+    <div className={cn('my-4', className)}>
+      {title && (
+        <div className="flex items-center gap-2 mb-2">
+          <FileAudio className="h-5 w-5 text-primary" weight="fill" />
+          <span className="text-sm font-medium">{title}</span>
+        </div>
+      )}
+      <div className="rounded-lg border border-border bg-muted p-4">
+        <audio
+          src={src}
+          controls
+          autoPlay={autoplay}
+          loop={loop}
+          className="w-full"
+        >
+          Your browser does not support the audio element.
+        </audio>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Download Component - Download button for files
+ */
+interface DownloadProps {
+  src: string
+  label?: string
+  icon?: string
+  filename?: string
+  className?: string
+}
+
+export function Download({ src, label, filename, className }: DownloadProps) {
+  const displayLabel = label || 'Download File'
+  const downloadName = filename || src.split('/').pop() || 'download'
+
+  return (
+    <a
+      href={src}
+      download={downloadName}
+      className={cn(
+        'inline-flex items-center gap-2 px-4 py-2 rounded-lg',
+        'bg-primary text-primary-foreground hover:bg-primary/90',
+        'text-sm font-medium transition-colors',
+        'no-underline',
+        className
+      )}
+    >
+      <DownloadSimple className="h-4 w-4" weight="bold" />
+      {displayLabel}
+    </a>
+  )
+}

package/renderer/components/docs/mdx/frame.tsx

@@ -0,0 +1,112 @@
+'use client'
+
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+/**
+ * Frame Component for MDX Documentation
+ * 
+ * Wraps images and content with a styled border and optional caption.
+ * Similar to Mintlify's Frame component.
+ */
+
+interface FrameProps {
+  children: React.ReactNode
+  caption?: string
+  className?: string
+}
+
+export function Frame({ children, caption, className }: FrameProps) {
+  return (
+    <figure className={cn('my-6', className)}>
+      <div className="overflow-hidden rounded-lg border border-border bg-muted/30">
+        <div className="[&>img]:m-0 [&>img]:w-full [&>img]:h-auto">
+          {children}
+        </div>
+      </div>
+      {caption && (
+        <figcaption className="mt-2 text-center text-sm text-muted-foreground">
+          {caption}
+        </figcaption>
+      )}
+    </figure>
+  )
+}
+
+/**
+ * Columns Component for MDX Documentation
+ * 
+ * Creates a multi-column layout for content.
+ */
+
+interface ColumnsProps {
+  children: React.ReactNode
+  cols?: 1 | 2 | 3 | 4
+  className?: string
+}
+
+export function Columns({ children, cols = 2, className }: ColumnsProps) {
+  const gridCols = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-1 md:grid-cols-2',
+    3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+    4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
+  }
+  
+  return (
+    <div className={cn('grid gap-4 my-4', gridCols[cols], className)}>
+      {children}
+    </div>
+  )
+}
+
+/**
+ * Snippet Component for MDX Documentation
+ * 
+ * Placeholder for reusable content snippets.
+ * In a full implementation, this would load content from a snippets directory.
+ */
+
+interface SnippetProps {
+  file: string
+  className?: string
+}
+
+export function Snippet({ file, className }: SnippetProps) {
+  // In production, this would dynamically load the snippet content
+  // For now, we show a placeholder
+  return (
+    <div className={cn('my-4 p-4 rounded-lg border border-dashed border-border bg-muted/30', className)}>
+      <div className="text-sm text-muted-foreground">
+        Snippet: <code className="text-xs bg-muted px-1 py-0.5 rounded">{file}</code>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Latex Component for MDX Documentation
+ * 
+ * Renders LaTeX mathematical expressions.
+ * In a full implementation, this would use KaTeX or MathJax.
+ */
+
+interface LatexProps {
+  children: string
+  className?: string
+}
+
+export function Latex({ children, className }: LatexProps) {
+  // In production, this would render LaTeX using KaTeX
+  // For now, we show the raw expression in a styled container
+  return (
+    <span 
+      className={cn(
+        'inline-block px-2 py-1 font-mono text-sm bg-muted rounded',
+        className
+      )}
+    >
+      {children}
+    </span>
+  )
+}