@brainfish-ai/devdoc 0.1.42 → 0.1.44

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

@@ -1,154 +0,0 @@
-'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

@@ -1,241 +0,0 @@
-'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 | React.ReactNode  // Icon name (string) or custom React node
-  iconSize?: 'sm' | 'md' | 'lg' | 'xl'  // Size of icon container: sm=32px, md=40px (default), lg=48px, xl=64px
-  href?: string
-  horizontal?: boolean
-  img?: string  // Full-width header image
-  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
-}
-
-// Icon size configurations
-const ICON_SIZES = {
-  sm: { container: 'h-8 w-8', icon: 'h-4 w-4', img: 'h-5 w-5' },
-  md: { container: 'h-10 w-10', icon: 'h-5 w-5', img: 'h-6 w-6' },
-  lg: { container: 'h-12 w-12', icon: 'h-6 w-6', img: 'h-8 w-8' },
-  xl: { container: 'h-16 w-16', icon: 'h-8 w-8', img: 'h-12 w-12' },
-}
-
-export function Card({
-  title,
-  children,
-  icon,
-  iconSize = 'md',
-  href,
-  horizontal = false,
-  img,
-  cta,
-  arrow,
-  className,
-}: CardProps) {
-  // Check if icon is a string (icon name) or React node
-  const isIconString = typeof icon === 'string'
-  const Icon = isIconString ? getIcon(icon) : null
-  const hasCustomIcon = !isIconString && icon != null
-  const sizeConfig = ICON_SIZES[iconSize]
-  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 (Phosphor icon from string) */}
-      {Icon && (
-        <div
-          className={cn(
-            'docs-card-icon flex shrink-0 items-center justify-center rounded-lg',
-            sizeConfig.container,
-            'bg-primary/10 text-primary',
-            horizontal && 'mt-0.5'
-          )}
-        >
-          <Icon className={sizeConfig.icon} weight="duotone" />
-        </div>
-      )}
-      
-      {/* Custom Icon (React node - image, svg, etc.) */}
-      {hasCustomIcon && (
-        <div
-          className={cn(
-            'docs-card-icon flex shrink-0 items-center justify-center rounded-lg overflow-hidden',
-            sizeConfig.container,
-            horizontal && 'mt-0.5'
-          )}
-        >
-          {icon}
-        </div>
-      )}
-      
-      {/* Content */}
-      <div className={cn('docs-card-content min-w-0', horizontal && 'flex-1', !horizontal && (Icon || hasCustomIcon) && '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

@@ -1,120 +0,0 @@
-'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

@@ -1,186 +0,0 @@
-'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>
-  )
-}