@brainfish-ai/devdoc 0.1.21

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

@@ -0,0 +1,154 @@
+'use client'
+
+import React from 'react'
+import { cn } from '@/lib/utils'
+import {
+  Info as InfoIcon,
+  Warning as WarningIcon,
+  Lightbulb,
+  Note as NoteIcon,
+  CheckCircle,
+  XCircle,
+} from '@phosphor-icons/react'
+
+/**
+ * Callout Components for MDX Documentation
+ * 
+ * Mintlify-compatible callout components for highlighting important information.
+ * Supports: Note, Warning, Info, Tip, Check, Error
+ */
+
+interface CalloutProps {
+  children: React.ReactNode
+  title?: string
+  className?: string
+}
+
+type CalloutVariant = 'note' | 'warning' | 'info' | 'tip' | 'check' | 'error'
+
+const calloutConfig: Record<
+  CalloutVariant,
+  {
+    icon: React.ComponentType<{ className?: string; weight?: 'fill' | 'regular' }>
+    defaultTitle: string
+    containerClass: string
+    iconClass: string
+    titleClass: string
+  }
+> = {
+  note: {
+    icon: NoteIcon,
+    defaultTitle: 'Note',
+    containerClass: 'border-blue-500/30 bg-blue-500/10 dark:border-blue-400/30 dark:bg-blue-400/10',
+    iconClass: 'text-blue-600 dark:text-blue-400',
+    titleClass: 'text-blue-700 dark:text-blue-300',
+  },
+  warning: {
+    icon: WarningIcon,
+    defaultTitle: 'Warning',
+    containerClass: 'border-amber-500/30 bg-amber-500/10 dark:border-amber-400/30 dark:bg-amber-400/10',
+    iconClass: 'text-amber-600 dark:text-amber-400',
+    titleClass: 'text-amber-700 dark:text-amber-300',
+  },
+  info: {
+    icon: InfoIcon,
+    defaultTitle: 'Info',
+    containerClass: 'border-sky-500/30 bg-sky-500/10 dark:border-sky-400/30 dark:bg-sky-400/10',
+    iconClass: 'text-sky-600 dark:text-sky-400',
+    titleClass: 'text-sky-700 dark:text-sky-300',
+  },
+  tip: {
+    icon: Lightbulb,
+    defaultTitle: 'Tip',
+    containerClass: 'border-emerald-500/30 bg-emerald-500/10 dark:border-emerald-400/30 dark:bg-emerald-400/10',
+    iconClass: 'text-emerald-600 dark:text-emerald-400',
+    titleClass: 'text-emerald-700 dark:text-emerald-300',
+  },
+  check: {
+    icon: CheckCircle,
+    defaultTitle: 'Success',
+    containerClass: 'border-green-500/30 bg-green-500/10 dark:border-green-400/30 dark:bg-green-400/10',
+    iconClass: 'text-green-600 dark:text-green-400',
+    titleClass: 'text-green-700 dark:text-green-300',
+  },
+  error: {
+    icon: XCircle,
+    defaultTitle: 'Error',
+    containerClass: 'border-red-500/30 bg-red-500/10 dark:border-red-400/30 dark:bg-red-400/10',
+    iconClass: 'text-red-600 dark:text-red-400',
+    titleClass: 'text-red-700 dark:text-red-300',
+  },
+}
+
+function BaseCallout({
+  variant,
+  children,
+  title,
+  className,
+}: CalloutProps & { variant: CalloutVariant }) {
+  const config = calloutConfig[variant]
+  const Icon = config.icon
+  const displayTitle = title ?? config.defaultTitle
+
+  return (
+    <div
+      className={cn(
+        `docs-callout docs-callout-${variant} my-4 rounded-lg border p-4`,
+        config.containerClass,
+        className
+      )}
+    >
+      <div className="flex items-start gap-3">
+        <Icon
+          className={cn('docs-callout-icon mt-0.5 h-5 w-5 shrink-0', config.iconClass)}
+          weight="fill"
+        />
+        <div className="docs-callout-content flex-1 min-w-0">
+          {displayTitle && (
+            <div className={cn('docs-callout-title font-semibold text-sm mb-1', config.titleClass)}>
+              {displayTitle}
+            </div>
+          )}
+          <div className="docs-callout-body text-sm text-foreground/90 [&>p]:mb-2 [&>p:last-child]:mb-0 [&>ul]:mt-2 [&>ol]:mt-2">
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Individual callout components for MDX usage
+export function Note({ children, title, className }: CalloutProps) {
+  return <BaseCallout variant="note" title={title} className={className}>{children}</BaseCallout>
+}
+
+export function Warning({ children, title, className }: CalloutProps) {
+  return <BaseCallout variant="warning" title={title} className={className}>{children}</BaseCallout>
+}
+
+export function Info({ children, title, className }: CalloutProps) {
+  return <BaseCallout variant="info" title={title} className={className}>{children}</BaseCallout>
+}
+
+export function Tip({ children, title, className }: CalloutProps) {
+  return <BaseCallout variant="tip" title={title} className={className}>{children}</BaseCallout>
+}
+
+export function Check({ children, title, className }: CalloutProps) {
+  return <BaseCallout variant="check" title={title} className={className}>{children}</BaseCallout>
+}
+
+export function Error({ children, title, className }: CalloutProps) {
+  return <BaseCallout variant="error" title={title} className={className}>{children}</BaseCallout>
+}
+
+// Generic Callout component with type prop
+export function Callout({ 
+  type = 'note', 
+  children, 
+  title, 
+  className 
+}: CalloutProps & { type?: CalloutVariant }) {
+  return <BaseCallout variant={type} title={title} className={className}>{children}</BaseCallout>
+}

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

@@ -0,0 +1,213 @@
+'use client'
+
+import React from 'react'
+import Link from 'next/link'
+import { cn } from '@/lib/utils'
+import { ArrowRight, ArrowSquareOut } from '@phosphor-icons/react'
+import * as PhosphorIcons from '@phosphor-icons/react'
+import { useDocsNavigation } from '@/lib/docs-navigation-context'
+
+/**
+ * Card Components for MDX Documentation
+ * 
+ * Mintlify-compatible card components for navigation and content organization.
+ * Supports both ApiDocs hash-based navigation and standalone /docs route navigation.
+ */
+
+interface CardProps {
+  title: string
+  children?: React.ReactNode
+  icon?: string
+  href?: string
+  horizontal?: boolean
+  img?: string
+  cta?: string
+  arrow?: boolean
+  className?: string
+}
+
+// Dynamic icon resolver for Phosphor icons
+function getIcon(iconName: string): React.ComponentType<{ className?: string; weight?: string }> | null {
+  if (!iconName) return null
+  
+  // Convert kebab-case or snake_case to PascalCase
+  const pascalCase = iconName
+    .split(/[-_]/)
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join('')
+  
+  // Try to get the icon from Phosphor
+  const Icon = (PhosphorIcons as Record<string, unknown>)[pascalCase] as React.ComponentType<{ className?: string; weight?: string }> | undefined
+  return Icon || null
+}
+
+export function Card({
+  title,
+  children,
+  icon,
+  href,
+  horizontal = false,
+  img,
+  cta,
+  arrow,
+  className,
+}: CardProps) {
+  const Icon = icon ? getIcon(icon) : null
+  const isExternal = href?.startsWith('http') || href?.startsWith('//')
+  const docsNav = useDocsNavigation()
+  
+  // Check if this is a tab switch link (/api-reference, /changelog)
+  const isTabSwitchLink = (href === '/api-reference' || href === '/changelog') && docsNav?.isApiDocsView
+  
+  // Check if this is an internal docs link (starts with / but not external or tab switch)
+  const isInternalDocsLink = href?.startsWith('/') && !isExternal && !isTabSwitchLink && docsNav?.isApiDocsView
+  
+  // Extract slug from href - removes /docs/ prefix if present, or just the leading /
+  const getSlugFromHref = (path: string): string => {
+    let slug = path
+    if (slug.startsWith('/docs/')) {
+      slug = slug.slice(6) // Remove '/docs/'
+    } else if (slug.startsWith('/')) {
+      slug = slug.slice(1) // Remove leading '/'
+    }
+    return slug
+  }
+  
+  // Get tab ID from href
+  const getTabIdFromHref = (path: string): string => {
+    if (path === '/api-reference') return 'api-reference'
+    if (path === '/changelog') return 'changelog'
+    return 'docs'
+  }
+  
+  // Handle click for internal navigation
+  const handleClick = (e: React.MouseEvent) => {
+    if (!href || !docsNav) return
+    
+    if (isTabSwitchLink) {
+      e.preventDefault()
+      const tabId = getTabIdFromHref(href)
+      docsNav.switchToTab(tabId)
+    } else if (isInternalDocsLink) {
+      e.preventDefault()
+      const slug = getSlugFromHref(href)
+      docsNav.navigateToPage(slug)
+    }
+  }
+  const showArrow = arrow ?? isExternal
+  
+  const cardContent = (
+    <div
+      className={cn(
+        'docs-card group relative rounded-lg border border-border bg-card p-4 transition-all h-full',
+        href && 'hover:border-primary/50 hover:shadow-md cursor-pointer',
+        horizontal ? 'docs-card-horizontal flex items-start gap-4' : 'flex flex-col justify-start',
+        className
+      )}
+    >
+      {/* Image */}
+      {img && !horizontal && (
+        <div className="mb-4 -mx-4 -mt-4 overflow-hidden rounded-t-lg">
+          <img
+            src={img}
+            alt={title}
+            className="w-full h-auto object-cover"
+          />
+        </div>
+      )}
+      
+      {/* Icon */}
+      {Icon && (
+        <div
+          className={cn(
+            'docs-card-icon flex h-10 w-10 shrink-0 items-center justify-center rounded-lg',
+            'bg-primary/10 text-primary',
+            horizontal && 'mt-0.5'
+          )}
+        >
+          <Icon className="h-5 w-5" weight="duotone" />
+        </div>
+      )}
+      
+      {/* Content */}
+      <div className={cn('docs-card-content min-w-0', horizontal && 'flex-1', !horizontal && Icon && 'mt-3')}>
+        <div className="flex items-center gap-2">
+          <h3 className="docs-card-title font-semibold text-foreground group-hover:text-primary transition-colors">
+            {title}
+          </h3>
+          {showArrow && (
+            isExternal ? (
+              <ArrowSquareOut className="h-4 w-4 text-muted-foreground" />
+            ) : (
+              <ArrowRight className="h-4 w-4 text-muted-foreground opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all" />
+            )
+          )}
+        </div>
+        
+        {children && (
+          <div className="docs-card-description mt-1 text-sm text-muted-foreground">
+            {children}
+          </div>
+        )}
+        
+        {cta && (
+          <div className="docs-card-cta mt-3 text-sm font-medium text-primary">
+            {cta}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+  
+  if (href) {
+    if (isExternal) {
+      return (
+        <a href={href} target="_blank" rel="noopener noreferrer" className="docs-card-link block h-full">
+          {cardContent}
+        </a>
+      )
+    }
+    
+    // For internal docs links or tab switch links in ApiDocs view, use click handler
+    if (isInternalDocsLink || isTabSwitchLink) {
+      return (
+        <a href={href} onClick={handleClick} className="docs-card-link block h-full cursor-pointer">
+          {cardContent}
+        </a>
+      )
+    }
+    
+    // Standard Next.js Link for all other internal links
+    return (
+      <Link href={href} className="docs-card-link block h-full">
+        {cardContent}
+      </Link>
+    )
+  }
+  
+  return cardContent
+}
+
+interface CardGroupProps {
+  children: React.ReactNode
+  cols?: 1 | 2 | 3 | 4
+  className?: string
+}
+
+export function CardGroup({ children, cols = 2, className }: CardGroupProps) {
+  const gridCols = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-1 sm:grid-cols-2',
+    3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+    4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+  }
+  
+  return (
+    <div className={cn('docs-card-group grid gap-4 my-4', gridCols[cols], className)}>
+      {children}
+    </div>
+  )
+}
+
+// Alias for Mintlify compatibility
+export { CardGroup as Columns }

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

@@ -0,0 +1,120 @@
+'use client'
+
+import { ReactNode } from 'react'
+import { Warning } from '@phosphor-icons/react'
+import { cn } from '@/lib/utils'
+
+interface ChangelogEntryProps {
+  version: string
+  date: string
+  children: ReactNode
+}
+
+export function ChangelogEntry({ version, date, children }: ChangelogEntryProps) {
+  return (
+    <div 
+      data-version={version}
+      className="flex gap-6 lg:gap-10 py-8 border-b border-border last:border-b-0"
+    >
+      {/* Left column - Version and date */}
+      <div className="w-24 lg:w-32 shrink-0">
+        <span className="inline-block px-2.5 py-1 text-sm font-medium rounded-md bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400 border border-amber-200 dark:border-amber-800">
+          {version}
+        </span>
+        <p className="mt-2 text-sm text-muted-foreground">{date}</p>
+      </div>
+      
+      {/* Right column - Content */}
+      <div className="flex-1 min-w-0">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+interface ChangelogTitleProps {
+  children: ReactNode
+  className?: string
+}
+
+export function ChangelogTitle({ children, className }: ChangelogTitleProps) {
+  return (
+    <h2 className={cn("text-xl font-semibold text-foreground mb-3", className)}>
+      {children}
+    </h2>
+  )
+}
+
+interface ChangelogDescriptionProps {
+  children: ReactNode
+}
+
+export function ChangelogDescription({ children }: ChangelogDescriptionProps) {
+  return (
+    <p className="text-muted-foreground mb-4">
+      {children}
+    </p>
+  )
+}
+
+interface ChangelogImageProps {
+  src: string
+  alt?: string
+}
+
+export function ChangelogImage({ src, alt = "Screenshot" }: ChangelogImageProps) {
+  return (
+    <div className="my-6 rounded-lg border border-border overflow-hidden shadow-sm">
+      <img src={src} alt={alt} className="w-full" />
+    </div>
+  )
+}
+
+interface BreakingChangeProps {
+  children: ReactNode
+}
+
+export function BreakingChange({ children }: BreakingChangeProps) {
+  return (
+    <div className="my-6 flex gap-3 p-4 rounded-lg bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800">
+      <Warning className="h-5 w-5 text-amber-600 dark:text-amber-500 shrink-0 mt-0.5" weight="fill" />
+      <div className="text-amber-800 dark:text-amber-200 text-sm">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+interface MoreUpdatesProps {
+  children: ReactNode
+}
+
+export function MoreUpdates({ children }: MoreUpdatesProps) {
+  return (
+    <div className="mt-6">
+      <h3 className="text-lg font-semibold text-foreground mb-3">More Updates</h3>
+      <ul className="space-y-2 text-muted-foreground">
+        {children}
+      </ul>
+    </div>
+  )
+}
+
+interface UpdateItemProps {
+  children: ReactNode
+  type?: 'default' | 'behavior'
+}
+
+export function UpdateItem({ children, type = 'default' }: UpdateItemProps) {
+  return (
+    <li className="flex items-start gap-2">
+      <span className="mt-2 h-1.5 w-1.5 rounded-full bg-foreground shrink-0" />
+      <span>
+        {type === 'behavior' && (
+          <strong className="font-semibold text-foreground">Behavior Change </strong>
+        )}
+        {children}
+      </span>
+    </li>
+  )
+}

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

@@ -0,0 +1,186 @@
+'use client'
+
+import React, { useState, isValidElement, ReactNode, createContext, useContext } from 'react'
+import { cn } from '@/lib/utils'
+import { Copy, Check } from '@phosphor-icons/react'
+
+/**
+ * Pre and Code components for code block styling
+ */
+
+// Context to detect if we're inside a CodeGroup
+export const CodeGroupContext = createContext(false)
+
+// 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 ''
+}
+
+// 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)
+}
+
+/**
+ * Pre - Code block wrapper component
+ * Styled to match CodeGroup default variant
+ */
+interface PreProps extends React.HTMLAttributes<HTMLPreElement> {
+  children?: ReactNode
+  'data-language'?: string
+}
+
+export function Pre({ children, className, 'data-language': dataLanguage, ...props }: PreProps) {
+  const isInCodeGroup = useContext(CodeGroupContext)
+  const [copied, setCopied] = useState(false)
+  
+  // If inside CodeGroup, render plain pre (CodeGroup handles styling)
+  if (isInCodeGroup) {
+    return (
+      <pre className={cn('overflow-x-auto', className)} {...props}>
+        {children}
+      </pre>
+    )
+  }
+  
+  // Extract language from children's className or data attribute
+  let language = dataLanguage || 'text'
+  let content = ''
+  
+  if (isValidElement(children)) {
+    const childProps = children.props as { className?: string; children?: ReactNode }
+    const childClassName = childProps.className || ''
+    const match = childClassName.match(/language-(\w+)/)
+    if (match) {
+      language = match[1]
+    }
+    content = extractTextContent(childProps.children)
+  }
+  
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(content.trim())
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch (err) {
+      console.error('Failed to copy:', err)
+    }
+  }
+  
+  const displayName = getDisplayName(language)
+  
+  // Standalone code block - styled like CodeGroup
+  return (
+    <div className="docs-code-block my-4 rounded-xl border border-zinc-800 overflow-hidden bg-[#1a1a1a]">
+      {/* Header */}
+      <div className="docs-code-header flex items-center justify-between bg-[#262626] px-2">
+        <div className="flex overflow-x-auto">
+          <div className="docs-code-tab px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white relative">
+            {displayName}
+            <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-emerald-500 rounded-full" />
+          </div>
+        </div>
+        
+        {/* Copy button */}
+        <div className="docs-code-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="docs-code-content overflow-x-auto">
+        <pre
+          className={cn(
+            'p-4 m-0 bg-transparent text-sm',
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </pre>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Code - Inline code styling
+ */
+interface CodeProps extends React.HTMLAttributes<HTMLElement> {
+  children?: ReactNode
+}
+
+export function Code({ children, className, ...props }: CodeProps) {
+  const isCodeBlock = className?.includes('language-')
+  
+  if (isCodeBlock) {
+    return (
+      <code className={cn(className, 'bg-transparent')} {...props}>
+        {children}
+      </code>
+    )
+  }
+  
+  // Inline code
+  return (
+    <code
+      className={cn(
+        'docs-inline-code px-1.5 py-0.5 rounded text-sm font-mono',
+        'bg-zinc-800 text-zinc-200',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </code>
+  )
+}