@brainfish-ai/devdoc 0.1.42 → 0.1.44

package/renderer/components/docs-viewer/content/index.tsx

@@ -1,29 +0,0 @@
-'use client'
-
-import type { BrainfishRESTRequest } from '@/lib/api-docs/types'
-import { RequestDetails } from './request-details'
-
-interface ApiDocsContentProps {
-  request: BrainfishRESTRequest | null
-}
-
-export function ApiDocsContent({ request }: ApiDocsContentProps) {
-  if (!request) {
-    return (
-      <div className="flex-1 flex items-center justify-center bg-background">
-        <div className="text-center">
-          <p className="text-muted-foreground text-lg mb-2">Select an endpoint</p>
-          <p className="text-sm text-muted-foreground">
-            Choose an endpoint from the sidebar to view its documentation
-          </p>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex-1 overflow-y-auto bg-background">
-      <RequestDetails request={request} />
-    </div>
-  )
-}

package/renderer/components/docs-viewer/content/not-found-page.tsx

@@ -1,330 +0,0 @@
-'use client'
-
-import { useEffect, useState, useCallback, useRef } from 'react'
-import { FileX, House, ArrowLeft, MagnifyingGlass, Spinner } from '@phosphor-icons/react'
-import { Button } from '@/components/ui/button'
-import { useDocsNavigation } from '@/lib/docs-navigation-context'
-import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
-import { useCodeCopy } from '@/hooks/use-code-copy'
-
-// Import MDX components for custom 404 pages
-import {
-  Note,
-  Warning,
-  Info,
-  Tip,
-  Check,
-  Error as ErrorCallout,
-  Callout,
-  Card,
-  CardGroup,
-  Accordion,
-  AccordionGroup,
-  Steps,
-  Step,
-  Tabs,
-  Tab,
-  CodeGroup,
-  Frame,
-  Columns,
-  Snippet,
-  Latex,
-  ParamField,
-  ResponseField,
-  Expandable,
-  Iframe,
-  Video,
-  Loom,
-  Image,
-  Screenshot,
-  Logo,
-  Icon,
-  Highlight,
-  Marker,
-  Underline,
-  Badge,
-  Mermaid,
-  PDF,
-  Audio,
-  Download,
-  Hero,
-  Pre,
-  Tagline,
-  Headline,
-  Description,
-  CommandBox,
-  Section,
-  Center,
-  FeatureGrid,
-  FeatureItem,
-  ButtonLink,
-  Spacer,
-  Divider,
-} from '../../docs/mdx/index'
-
-// MDX components mapping for custom 404 pages
-const mdxComponents = {
-  Note,
-  Warning,
-  Info,
-  Tip,
-  Check,
-  Error: ErrorCallout,
-  Callout,
-  Card,
-  CardGroup,
-  Accordion,
-  AccordionGroup,
-  Steps,
-  Step,
-  Tabs,
-  Tab,
-  CodeGroup,
-  Frame,
-  Columns,
-  Snippet,
-  Latex,
-  ParamField,
-  ResponseField,
-  Expandable,
-  Iframe,
-  Video,
-  Loom,
-  Image,
-  Screenshot,
-  Logo,
-  Icon,
-  Highlight,
-  Marker,
-  Underline,
-  Badge,
-  Mermaid,
-  PDF,
-  Audio,
-  Download,
-  Hero,
-  Pre,
-  Tagline,
-  Headline,
-  Description,
-  CommandBox,
-  Section,
-  Center,
-  FeatureGrid,
-  FeatureItem,
-  ButtonLink,
-  Spacer,
-  Divider,
-}
-
-interface NotFoundPageProps {
-  slug?: string
-  onGoBack?: () => void
-  onSearch?: () => void
-}
-
-interface Custom404Data {
-  frontmatter: {
-    title?: string
-    description?: string
-    mode?: 'default' | 'wide' | 'custom'
-    hideHeader?: boolean
-    background?: string
-  }
-  mdxSource: MDXRemoteSerializeResult
-}
-
-export function NotFoundPage({ slug, onGoBack, onSearch }: NotFoundPageProps) {
-  const docsNav = useDocsNavigation()
-  const [customPage, setCustomPage] = useState<Custom404Data | null>(null)
-  const [loading, setLoading] = useState(true)
-  const contentRef = useRef<HTMLDivElement>(null)
-  
-  // Add copy buttons to code blocks after content loads
-  useCodeCopy(contentRef, [customPage])
-  
-  // Try to load custom 404.mdx page
-  useEffect(() => {
-    async function loadCustom404() {
-      try {
-        const response = await fetch('/api/docs?slug=404&is404=true')
-        if (response.ok) {
-          const data = await response.json()
-          setCustomPage(data)
-        }
-      } catch {
-        // No custom 404 page, use default
-      } finally {
-        setLoading(false)
-      }
-    }
-    loadCustom404()
-  }, [])
-  
-  const handleGoHome = useCallback(() => {
-    // Navigate to the first page of the current tab or just switch to first tab
-    if (docsNav?.switchToTab) {
-      window.location.hash = ''
-      window.location.reload()
-    } else {
-      window.location.hash = ''
-    }
-  }, [docsNav])
-  
-  const handleGoBack = useCallback(() => {
-    if (onGoBack) {
-      onGoBack()
-    } else {
-      window.history.back()
-    }
-  }, [onGoBack])
-  
-  // Show loading state briefly while checking for custom 404
-  if (loading) {
-    return (
-      <div className="docs-page docs-page-not-found w-full min-h-[200px]">
-        <div className="flex items-center justify-center py-12">
-          <Spinner className="h-6 w-6 animate-spin text-muted-foreground" />
-        </div>
-      </div>
-    )
-  }
-  
-  // Render custom 404 page if available
-  if (customPage) {
-    const { mode = 'default', hideHeader, background } = customPage.frontmatter
-    const isCustomMode = mode === 'custom'
-    const showHeader = !hideHeader && !isCustomMode
-    
-    // Custom mode: Full-width layout
-    if (isCustomMode) {
-      return (
-        <div 
-          ref={contentRef}
-          className="docs-page docs-page-not-found docs-content w-full min-h-full"
-          style={{ background: background || 'var(--background)' }}
-        >
-          <div className="docs-custom-content [&>*]:w-full">
-            <MDXRemote {...customPage.mdxSource} components={mdxComponents} />
-          </div>
-        </div>
-      )
-    }
-    
-    // Default mode with optional header
-    const containerClass = mode === 'wide' ? 'max-w-6xl' : 'max-w-4xl'
-    
-    return (
-      <div ref={contentRef} className={`docs-page docs-page-not-found docs-content ${containerClass} mx-auto px-4 py-6 sm:px-8 sm:py-8`}>
-        {showHeader && customPage.frontmatter.title && (
-          <div className="docs-page-header mb-6">
-            <h1 className="docs-content-title text-2xl sm:text-3xl font-bold mb-2 text-foreground">
-              {customPage.frontmatter.title}
-            </h1>
-            {customPage.frontmatter.description && (
-              <p className="docs-content-description text-lg text-muted-foreground">
-                {customPage.frontmatter.description}
-              </p>
-            )}
-          </div>
-        )}
-        <div className="docs-prose prose prose-sm max-w-none prose-headings:text-foreground prose-p:text-muted-foreground prose-strong:text-foreground">
-          <MDXRemote {...customPage.mdxSource} components={mdxComponents} />
-        </div>
-        
-        {/* Always show navigation actions for custom 404 */}
-        <div className="mt-8 pt-6 border-t border-border">
-          <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
-            <Button variant="outline" size="sm" onClick={handleGoBack} className="gap-2 min-w-[120px]">
-              <ArrowLeft className="w-4 h-4" />
-              Go back
-            </Button>
-            <Button variant="default" size="sm" onClick={handleGoHome} className="gap-2 min-w-[120px]">
-              <House className="w-4 h-4" />
-              Go home
-            </Button>
-            {onSearch && (
-              <Button variant="outline" size="sm" onClick={onSearch} className="gap-2 min-w-[120px]">
-                <MagnifyingGlass className="w-4 h-4" />
-                Search
-              </Button>
-            )}
-          </div>
-        </div>
-      </div>
-    )
-  }
-  
-  // Default 404 page
-  return (
-    <div className="docs-page docs-page-not-found w-full min-h-[calc(100vh-200px)] flex items-center justify-center">
-      <div className="text-center px-4 py-12 max-w-md mx-auto">
-        {/* Icon */}
-        <div className="mb-6">
-          <div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-muted/50 text-muted-foreground">
-            <FileX className="w-10 h-10" weight="light" />
-          </div>
-        </div>
-        
-        {/* Title */}
-        <h1 className="text-2xl font-semibold text-foreground mb-2">
-          Page not found
-        </h1>
-        
-        {/* Description */}
-        <p className="text-muted-foreground mb-2">
-          The page you&apos;re looking for doesn&apos;t exist or has been moved.
-        </p>
-        
-        {/* Show the slug that wasn't found */}
-        {slug && (
-          <p className="text-sm text-muted-foreground/70 mb-6 font-mono bg-muted/30 px-3 py-1.5 rounded-md inline-block">
-            /{slug}
-          </p>
-        )}
-        
-        {!slug && <div className="mb-6" />}
-        
-        {/* Actions */}
-        <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleGoBack}
-            className="gap-2 min-w-[120px]"
-          >
-            <ArrowLeft className="w-4 h-4" />
-            Go back
-          </Button>
-          
-          <Button
-            variant="default"
-            size="sm"
-            onClick={handleGoHome}
-            className="gap-2 min-w-[120px]"
-          >
-            <House className="w-4 h-4" />
-            Go home
-          </Button>
-          
-          {onSearch && (
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={onSearch}
-              className="gap-2 min-w-[120px]"
-            >
-              <MagnifyingGlass className="w-4 h-4" />
-              Search
-            </Button>
-          )}
-        </div>
-        
-        {/* Help text */}
-        <p className="text-xs text-muted-foreground/60 mt-8">
-          If you believe this is an error, please check the URL or contact the documentation maintainer.
-        </p>
-      </div>
-    </div>
-  )
-}

package/renderer/components/docs-viewer/content/request-details.tsx

@@ -1,330 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { CaretDown, CaretRight, Play } from '@phosphor-icons/react'
-import { MethodBadge } from '../shared/method-badge'
-import { MarkdownRenderer } from '../shared/markdown-renderer'
-import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
-import { CodeViewer } from '../playground/code-editor'
-import { ResponseSchema } from '../shared/schema-viewer'
-import { CodeSnippetCompact } from '../playground/code-snippet'
-import { useModeContext } from '@/lib/api-docs/code-editor'
-import type { BrainfishRESTRequest } from '@/lib/api-docs/types'
-
-interface RequestDetailsProps {
-  request: BrainfishRESTRequest
-}
-
-// Collapsible section component
-function CollapsibleSection({ 
-  title, 
-  children, 
-  defaultOpen = true 
-}: { 
-  title: string
-  children: React.ReactNode
-  defaultOpen?: boolean 
-}) {
-  const [isOpen, setIsOpen] = useState(defaultOpen)
-
-  return (
-    <div className="docs-api-section border-b border-border">
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="docs-api-section-header w-full flex items-center justify-between p-4 hover:bg-muted/50 transition-colors"
-      >
-        <span className="font-semibold text-sm">{title}</span>
-        {isOpen ? (
-          <CaretDown className="h-4 w-4 text-muted-foreground" weight="bold" />
-        ) : (
-          <CaretRight className="h-4 w-4 text-muted-foreground" weight="bold" />
-        )}
-      </button>
-      {isOpen && <div className="docs-api-section-content px-4 pb-4">{children}</div>}
-    </div>
-  )
-}
-
-export function RequestDetails({ request }: RequestDetailsProps) {
-  const { switchToApiClient } = useModeContext()
-  
-  return (
-    <div className="docs-api-endpoint h-full overflow-y-auto bg-background">
-      {/* Endpoint Header */}
-      <div className="docs-api-endpoint-header p-4 border-b border-border">
-        <div className="flex items-center justify-between gap-2 mb-2">
-          <div className="flex items-center gap-2 min-w-0">
-            <MethodBadge method={request.method} />
-            <h2 className="docs-api-endpoint-name font-semibold text-lg truncate">{request.name}</h2>
-          </div>
-          <Button 
-            size="sm" 
-            onClick={() => switchToApiClient()}
-            className="docs-button docs-button-try-it shrink-0"
-          >
-            <Play className="h-3.5 w-3.5 mr-1.5" weight="fill" />
-            Try it out
-          </Button>
-        </div>
-        <code className="docs-api-path text-xs text-muted-foreground font-mono break-all">
-          {request.endpoint}
-        </code>
-      </div>
-
-      {/* Code Snippet */}
-      <CodeSnippetCompact request={request} />
-
-      {/* Description - only show if there's actual content */}
-      {request.description?.trim() && (
-        <CollapsibleSection title="Description" defaultOpen={true}>
-          <div className="text-sm text-muted-foreground">
-            <MarkdownRenderer content={request.description} />
-          </div>
-        </CollapsibleSection>
-      )}
-
-      {/* Parameters */}
-      {request.params.length > 0 && (
-        <CollapsibleSection title="Parameters" defaultOpen={false}>
-          <div className="border rounded-sm overflow-x-auto">
-            <table className="w-full text-sm min-w-[400px]">
-              <thead className="bg-muted/50">
-                <tr>
-                  <th className="px-3 py-2 text-left text-xs font-semibold whitespace-nowrap">Name</th>
-                  <th className="px-3 py-2 text-left text-xs font-semibold whitespace-nowrap">Description</th>
-                  <th className="px-3 py-2 text-left text-xs font-semibold whitespace-nowrap">Required</th>
-                </tr>
-              </thead>
-              <tbody>
-                {request.params.map((param) => (
-                  <tr key={param.key} className="border-t">
-                    <td className="px-3 py-2 font-mono text-xs whitespace-nowrap">{param.key}</td>
-                    <td className="px-3 py-2 text-xs text-muted-foreground">
-                      {param.description || '-'}
-                    </td>
-                    <td className="px-3 py-2 text-xs whitespace-nowrap">
-                      {param.active ? (
-                        <Badge variant="default" className="text-xs">Required</Badge>
-                      ) : (
-                        <span className="text-muted-foreground">Optional</span>
-                      )}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </CollapsibleSection>
-      )}
-
-      {/* Headers */}
-      {request.headers.length > 0 && (
-        <CollapsibleSection title="Headers" defaultOpen={false}>
-          <div className="border rounded-sm overflow-x-auto">
-            <table className="w-full text-sm min-w-[400px]">
-              <thead className="bg-muted/50">
-                <tr>
-                  <th className="px-3 py-2 text-left text-xs font-semibold whitespace-nowrap">Name</th>
-                  <th className="px-3 py-2 text-left text-xs font-semibold whitespace-nowrap">Description</th>
-                  <th className="px-3 py-2 text-left text-xs font-semibold whitespace-nowrap">Required</th>
-                </tr>
-              </thead>
-              <tbody>
-                {request.headers.map((header) => (
-                  <tr key={header.key} className="border-t">
-                    <td className="px-3 py-2 font-mono text-xs whitespace-nowrap">{header.key}</td>
-                    <td className="px-3 py-2 text-xs text-muted-foreground">
-                      {header.description || '-'}
-                    </td>
-                    <td className="px-3 py-2 text-xs whitespace-nowrap">
-                      {header.active ? (
-                        <Badge variant="default" className="text-xs">Required</Badge>
-                      ) : (
-                        <span className="text-muted-foreground">Optional</span>
-                      )}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </CollapsibleSection>
-      )}
-
-      {/* Authentication */}
-      {request.auth.authType !== 'none' && (
-        <CollapsibleSection title="Authentication" defaultOpen={false}>
-          <div className="border rounded-sm overflow-hidden">
-            {request.auth.authType === 'basic' && (
-              <>
-                <div className="px-3 py-2 border-b bg-muted/30">
-                  <div className="flex items-center gap-2">
-                    <span className="font-semibold text-sm">Basic Auth</span>
-                    <span className="text-xs text-orange-500 font-medium">required</span>
-                  </div>
-                </div>
-                <div className="p-3 space-y-2">
-                  <div className="flex items-center justify-between py-2 border-b border-border/50">
-                    <span className="text-sm font-medium">username</span>
-                    <span className="text-xs text-muted-foreground">string</span>
-                  </div>
-                  <div className="flex items-center justify-between py-2">
-                    <span className="text-sm font-medium">password</span>
-                    <span className="text-xs text-muted-foreground">string</span>
-                  </div>
-                </div>
-              </>
-            )}
-
-            {request.auth.authType === 'bearer' && (
-              <>
-                <div className="px-3 py-2 border-b bg-muted/30">
-                  <div className="flex items-center gap-2">
-                    <span className="font-semibold text-sm">Bearer Token</span>
-                    <span className="text-xs text-orange-500 font-medium">required</span>
-                  </div>
-                </div>
-                <div className="p-3">
-                  <div className="flex items-center justify-between py-2">
-                    <span className="text-sm font-medium">Authorization</span>
-                    <span className="text-xs text-muted-foreground font-mono">Bearer &lt;token&gt;</span>
-                  </div>
-                  <p className="text-xs text-muted-foreground mt-1">
-                    Pass the token in the Authorization header
-                  </p>
-                </div>
-              </>
-            )}
-
-            {request.auth.authType === 'api-key' && (
-              <>
-                <div className="px-3 py-2 border-b bg-muted/30">
-                  <div className="flex items-center gap-2">
-                    <span className="font-semibold text-sm">API Key</span>
-                    <span className="text-xs text-orange-500 font-medium">required</span>
-                  </div>
-                </div>
-                <div className="p-3 space-y-3">
-                  <div className="border-b border-border/50 pb-3">
-                    <div className="flex items-start gap-2 flex-wrap">
-                      <span className="font-semibold text-sm">{request.auth.key}</span>
-                      <span className="text-xs text-muted-foreground">string</span>
-                      <span className="text-xs text-orange-500 font-medium">required</span>
-                    </div>
-                    <p className="text-xs text-muted-foreground mt-1">
-                      Your API key for authentication
-                    </p>
-                  </div>
-                  <div className="flex items-center gap-2 text-xs">
-                    <span className="text-muted-foreground">Location:</span>
-                    <code className="bg-muted px-2 py-0.5 rounded font-mono">
-                      {request.auth.addTo === 'HEADERS' ? 'Header' : 'Query'}
-                    </code>
-                  </div>
-                </div>
-              </>
-            )}
-
-            {request.auth.authType === 'oauth-2' && (
-              <>
-                <div className="px-3 py-2 border-b bg-muted/30">
-                  <div className="flex items-center gap-2">
-                    <span className="font-semibold text-sm">OAuth 2.0</span>
-                    <span className="text-xs text-orange-500 font-medium">required</span>
-                  </div>
-                </div>
-                <div className="p-3 space-y-3">
-                  <div className="border-b border-border/50 pb-3">
-                    <div className="flex items-start gap-2 flex-wrap">
-                      <span className="font-semibold text-sm">Grant Type</span>
-                      <span className="text-xs text-muted-foreground">
-                        {request.auth.grantTypeInfo.grantType.replace('_', ' ')}
-                      </span>
-                    </div>
-                  </div>
-                  {request.auth.grantTypeInfo.authEndpoint && (
-                    <div className="border-b border-border/50 pb-3">
-                      <div className="flex items-start gap-2 flex-wrap">
-                        <span className="font-semibold text-sm">authEndpoint</span>
-                        <span className="text-xs text-muted-foreground">string</span>
-                      </div>
-                      <code className="text-xs text-muted-foreground mt-1 block break-all">
-                        {request.auth.grantTypeInfo.authEndpoint}
-                      </code>
-                    </div>
-                  )}
-                  {request.auth.grantTypeInfo.tokenEndpoint && (
-                    <div className="pb-1">
-                      <div className="flex items-start gap-2 flex-wrap">
-                        <span className="font-semibold text-sm">tokenEndpoint</span>
-                        <span className="text-xs text-muted-foreground">string</span>
-                      </div>
-                      <code className="text-xs text-muted-foreground mt-1 block break-all">
-                        {request.auth.grantTypeInfo.tokenEndpoint}
-                      </code>
-                    </div>
-                  )}
-                </div>
-              </>
-            )}
-          </div>
-        </CollapsibleSection>
-      )}
-
-      {/* Body */}
-      {request.body.body !== null && (
-        <CollapsibleSection title="Request Body" defaultOpen={false}>
-          <div className="border rounded-sm overflow-hidden">
-            <div className="bg-muted/50 px-3 py-2 border-b">
-              <span className="text-xs font-medium">Content-Type: </span>
-              <code className="text-xs">{request.body.contentType}</code>
-            </div>
-            {Array.isArray(request.body.body) ? (
-              <div className="p-3 space-y-1">
-                {request.body.body.map((item, index) => (
-                  <div key={index} className="flex items-center gap-2 text-xs">
-                    <code className="bg-background px-2 py-1 rounded">{item.key}</code>
-                    <span className="text-muted-foreground">
-                      {item.isFile ? '(file)' : '(text)'}
-                    </span>
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <div className="dark-editor">
-                <CodeViewer
-                  value={typeof request.body.body === 'string' ? request.body.body : JSON.stringify(request.body.body)}
-                  language={request.body.contentType?.includes('json') ? 'json' : request.body.contentType?.includes('xml') ? 'xml' : 'plaintext'}
-                  theme="dark"
-                  height="auto"
-                  minHeight={80}
-                  maxHeight={250}
-                  showBorder={false}
-                  rounded={false}
-                />
-              </div>
-            )}
-          </div>
-        </CollapsibleSection>
-      )}
-
-      {/* Responses */}
-      {Object.keys(request.responses).length > 0 && (
-        <CollapsibleSection title="Responses" defaultOpen={true}>
-          <div>
-            {Object.entries(request.responses).map(([name, response]) => (
-              <ResponseSchema
-                key={name}
-                code={response.code}
-                status={response.status}
-                description={name !== response.status ? name : undefined}
-                schema={response.body}
-              />
-            ))}
-          </div>
-        </CollapsibleSection>
-      )}
-    </div>
-  )
-}