@brainfish-ai/devdoc 0.1.42 → 0.1.44

package/renderer/components/docs-viewer/sidebar/endpoint-options.tsx

@@ -1,316 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { CaretDown, CaretRight } from '@phosphor-icons/react'
-import { Badge } from '@/components/ui/badge'
-import type { BrainfishRESTRequest } from '@/lib/api-docs/types'
-import { MethodBadge } from '../shared/method-badge'
-import { MarkdownRenderer } from '../shared/markdown-renderer'
-import { CodeViewer } from '../playground/code-editor'
-import { ResponseSchema } from '../shared/schema-viewer'
-import { CodeSnippetCompact } from '../playground/code-snippet'
-
-interface EndpointOptionsSidebarProps {
-  request: BrainfishRESTRequest
-}
-
-interface CollapsibleSectionProps {
-  title: string
-  children: React.ReactNode
-  defaultOpen?: boolean
-}
-
-function CollapsibleSection({ title, children, defaultOpen = true }: CollapsibleSectionProps) {
-  const [isOpen, setIsOpen] = useState(defaultOpen)
-
-  return (
-    <div className="border-b border-border">
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="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="px-4 pb-4">{children}</div>}
-    </div>
-  )
-}
-
-export function EndpointOptionsSidebar({ request }: EndpointOptionsSidebarProps) {
-  return (
-    <div className="w-96 h-full border-l bg-muted/30 flex flex-col overflow-hidden">
-      {/* Header */}
-      <div className="p-4 border-b border-border bg-background">
-        <div className="flex items-center gap-2 mb-2">
-          <MethodBadge method={request.method} />
-          <h2 className="font-semibold text-lg truncate">{request.name}</h2>
-        </div>
-        <code className="text-xs text-muted-foreground font-mono break-all">
-          {request.endpoint}
-        </code>
-      </div>
-
-      {/* Scrollable Content */}
-      <div className="flex-1 overflow-y-auto bg-background">
-        {/* Code Snippet - First Section */}
-        <CodeSnippetCompact request={request} />
-
-        {/* Description */}
-        {request.description && (
-          <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-hidden">
-              <table className="w-full text-sm">
-                <thead className="bg-muted/50">
-                  <tr>
-                    <th className="px-3 py-2 text-left text-xs font-semibold">Name</th>
-                    <th className="px-3 py-2 text-left text-xs font-semibold">Description</th>
-                    <th className="px-3 py-2 text-left text-xs font-semibold">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">{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">
-                        {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-hidden">
-              <table className="w-full text-sm">
-                <thead className="bg-muted/50">
-                  <tr>
-                    <th className="px-3 py-2 text-left text-xs font-semibold">Name</th>
-                    <th className="px-3 py-2 text-left text-xs font-semibold">Description</th>
-                    <th className="px-3 py-2 text-left text-xs font-semibold">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">{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">
-                        {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>
-    </div>
-  )
-}

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

@@ -1,282 +0,0 @@
-'use client'
-
-import { useMemo, useEffect, useState } from 'react'
-import { createPortal } from 'react-dom'
-import { X, Spinner } from '@phosphor-icons/react'
-import { Button } from '@/components/ui/button'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-import type { BrainfishCollection, BrainfishRESTRequest, BrainfishDocPage } from '@/lib/api-docs/types'
-import { CollectionTree } from './collection-tree'
-import { SidebarSection } from './sidebar-section'
-import { SidebarItem, SlidingIndicatorProvider } from './sidebar-item'
-import { SidebarGroup } from './sidebar-group'
-import { useMobile } from '@/lib/api-docs/mobile-context'
-import { cn } from '@/lib/utils'
-
-interface ApiVersion {
-  version: string
-  spec: string
-  default: boolean
-}
-
-interface ApiDocsSidebarProps {
-  collection: BrainfishCollection
-  selectedRequest: BrainfishRESTRequest | null
-  selectedDocSection: string | null
-  selectedDocPage?: string | null
-  activeTab?: string
-  onSelectRequest: (request: BrainfishRESTRequest) => void
-  onSelectDocumentation?: (headingId: string) => void
-  onSelectDocPage?: (slug: string) => void
-  apiVersions?: ApiVersion[]
-  selectedApiVersion?: string | null
-  onApiVersionChange?: (version: string) => void
-  isVersionLoading?: boolean
-}
-
-export function DocsSidebar({
-  collection,
-  selectedRequest,
-  selectedDocSection,
-  selectedDocPage,
-  activeTab,
-  onSelectRequest,
-  onSelectDocumentation,
-  onSelectDocPage,
-  apiVersions,
-  selectedApiVersion,
-  onApiVersionChange,
-  isVersionLoading,
-}: ApiDocsSidebarProps) {
-  const { isMobile, isLeftSidebarOpen, closeLeftSidebar } = useMobile()
-  const [mounted, setMounted] = useState(false)
-  
-  // Ensure we're mounted before using portal (for SSR)
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-  
-  // Handle request selection with mobile close
-  const handleSelectRequest = (request: BrainfishRESTRequest) => {
-    onSelectRequest(request)
-    if (isMobile) {
-      closeLeftSidebar()
-    }
-  }
-  
-  // Handle doc click with mobile close
-  const handleDocClickWithClose = (headingId: string) => {
-    if (onSelectDocumentation) {
-      onSelectDocumentation(headingId)
-    }
-    if (isMobile) {
-      closeLeftSidebar()
-    }
-  }
-  
-  // Handle doc page click with mobile close
-  const handleDocPageClick = (slug: string) => {
-    if (onSelectDocPage) {
-      onSelectDocPage(slug)
-    }
-    if (isMobile) {
-      closeLeftSidebar()
-    }
-  }
-  
-  // Get doc groups from collection
-  const docGroups = collection.docGroups || []
-  
-  // Check if any child in a group is selected
-  const isChildSelected = (page: BrainfishDocPage): boolean => {
-    if (!page.children) return false
-    return page.children.some(child => selectedDocPage === child.slug)
-  }
-  
-  // Get the selected child slug for a group (for triggering auto-expand)
-  const getSelectedChildSlug = (page: BrainfishDocPage): string | null => {
-    if (!page.children) return null
-    const selected = page.children.find(child => selectedDocPage === child.slug)
-    return selected?.slug || null
-  }
-  
-  // Render a doc page item (may be a collapsible group with children)
-  const renderDocPage = (page: BrainfishDocPage) => {
-    // Handle collapsible group with children
-    if (page.isGroup && page.children && page.children.length > 0) {
-      return (
-        <SidebarGroup
-          key={page.id}
-          title={page.title}
-          defaultOpen={isChildSelected(page)}
-          selectedChildSlug={getSelectedChildSlug(page)}
-        >
-          {page.children.map(child => {
-            const isSelected = selectedDocPage === child.slug
-            return (
-              <SidebarItem
-                key={child.id}
-                itemId={`doc-${child.slug}`}
-                selected={isSelected}
-                indent={1}
-                icon={child.icon}
-                onClick={() => handleDocPageClick(child.slug)}
-              >
-                {child.title}
-              </SidebarItem>
-            )
-          })}
-        </SidebarGroup>
-      )
-    }
-    
-    // Regular page item
-    const isSelected = selectedDocPage === page.slug
-    
-    return (
-      <SidebarItem
-        key={page.id}
-        itemId={`doc-${page.slug}`}
-        selected={isSelected}
-        icon={page.icon}
-        onClick={() => handleDocPageClick(page.slug)}
-      >
-        {page.title}
-      </SidebarItem>
-    )
-  }
-
-  // Sidebar content component (shared between mobile and desktop)
-  const sidebarContent = (
-    <>
-      {/* Mobile close button */}
-      {isMobile && (
-        <div className="px-4 h-[41px] flex items-center justify-end border-b border-sidebar-border shrink-0">
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={closeLeftSidebar}
-            className="h-7 w-7 lg:hidden"
-          >
-            <X className="h-4 w-4" weight="bold" />
-          </Button>
-        </div>
-      )}
-
-      {/* API Version Selector - Only show when multiple versions exist and on API Reference tab */}
-      {activeTab === 'api-reference' && apiVersions && apiVersions.length > 1 && (
-        <div className="docs-sidebar-version-selector px-4 py-3 border-b border-sidebar-border shrink-0">
-          <div className="flex items-center justify-between mb-1.5">
-            <label className="docs-sidebar-version-label text-xs font-medium text-muted-foreground">
-              API Version
-            </label>
-            {isVersionLoading && (
-              <Spinner className="h-3 w-3 animate-spin text-muted-foreground" />
-            )}
-          </div>
-          <Select
-            value={selectedApiVersion || apiVersions.find(v => v.default)?.version || apiVersions[0]?.version}
-            onValueChange={(value) => onApiVersionChange?.(value)}
-            disabled={isVersionLoading}
-          >
-            <SelectTrigger className={cn("docs-sidebar-version-trigger w-full h-9 text-sm", isVersionLoading && "opacity-50")}>
-              <SelectValue placeholder="Select version" />
-            </SelectTrigger>
-            <SelectContent>
-              {apiVersions.map((v) => (
-                <SelectItem key={v.version} value={v.version}>
-                  {v.version}
-                  {v.default && <span className="ml-2 text-xs text-muted-foreground">(latest)</span>}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      )}
-
-      {/* Scrollable content with sliding indicator */}
-      <SlidingIndicatorProvider className="docs-sidebar-content flex-1 overflow-y-auto overflow-x-hidden custom-scroll">
-        {/* Documentation Pages Section (from docs.json groups) */}
-        {docGroups.length > 0 && (
-          <>
-            {docGroups.map((group, index) => (
-              <SidebarSection 
-                key={group.id} 
-                title={group.title}
-                icon={group.icon}
-                className={index > 0 ? '' : ''}
-              >
-                {group.pages.map(renderDocPage)}
-              </SidebarSection>
-            ))}
-          </>
-        )}
-
-        {/* Endpoints Section */}
-        {(collection.folders.length > 0 || collection.requests.length > 0) && (
-          <SidebarSection 
-            title="Endpoints" 
-            className={docGroups.length > 0 ? 'border-t border-sidebar-border' : ''}
-          >
-            <CollectionTree
-              collection={collection}
-              selectedRequest={selectedRequest}
-              onSelectRequest={handleSelectRequest}
-            />
-          </SidebarSection>
-        )}
-      </SlidingIndicatorProvider>
-    </>
-  )
-
-  // Mobile sidebar rendered via portal to escape stacking context
-  const mobileSidebar = mounted && isMobile ? createPortal(
-    <>
-      {/* Mobile overlay backdrop */}
-      {isLeftSidebarOpen && (
-        <div 
-          className="docs-sidebar-overlay fixed inset-0 bg-black/50 z-[55] lg:hidden"
-          onClick={closeLeftSidebar}
-        />
-      )}
-      
-      <aside 
-        className={cn(
-          "docs-sidebar flex flex-col border-r border-sidebar-border overflow-hidden bg-muted dark:bg-background",
-          "fixed inset-y-0 left-0 z-[60] w-[280px] h-full",
-          "transform transition-transform duration-300 ease-in-out",
-          !isLeftSidebarOpen && "-translate-x-full",
-          isLeftSidebarOpen && "translate-x-0"
-        )}
-      >
-        {sidebarContent}
-      </aside>
-    </>,
-    document.body
-  ) : null
-
-  // Desktop sidebar rendered in place
-  const desktopSidebar = !isMobile ? (
-    <aside 
-      className={cn(
-        "docs-sidebar flex flex-col border-r border-sidebar-border overflow-hidden bg-muted dark:bg-background",
-        "relative w-72 h-full"
-      )}
-    >
-      {sidebarContent}
-    </aside>
-  ) : null
-
-  return (
-    <>
-      {mobileSidebar}
-      {desktopSidebar}
-    </>
-  )
-}