@brainfish-ai/devdoc 0.1.42 → 0.1.44

package/renderer/components/docs-viewer/playground/auth-editor.tsx

@@ -1,280 +0,0 @@
-'use client'
-
-import { ShieldCheck, Key, Lock, User, Hash, WarningCircle } from '@phosphor-icons/react'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-import { Input } from '@/components/ui/input'
-import type { BrainfishRESTAuth } from '@/lib/api-docs/types'
-import { cn } from '@/lib/utils'
-import { usePlaygroundNavigation } from '@/lib/api-docs/playground/navigation-context'
-
-const AUTH_TYPES = [
-  { value: 'none', label: 'No Auth', icon: ShieldCheck },
-  { value: 'basic', label: 'Basic Auth', icon: User },
-  { value: 'bearer', label: 'Bearer Token', icon: Key },
-  { value: 'api-key', label: 'API Key', icon: Lock },
-] as const
-
-interface AuthEditorProps {
-  auth: BrainfishRESTAuth
-  onChange: (auth: BrainfishRESTAuth) => void
-  /** Show error styling to indicate this section needs attention */
-  showError?: boolean
-}
-
-export function AuthEditor({ auth, onChange, showError = false }: AuthEditorProps) {
-  const { state: navState } = usePlaygroundNavigation()
-  
-  // Check if auth field should be highlighted (from either prop or context)
-  const isHighlighted = showError || (navState.highlightField?.type === 'auth' && navState.showError)
-  const handleTypeChange = (type: string) => {
-    switch (type) {
-      case 'none':
-        onChange({ authType: 'none', authActive: true })
-        break
-      case 'basic':
-        onChange({ authType: 'basic', authActive: true, username: '', password: '' })
-        break
-      case 'bearer':
-        onChange({ authType: 'bearer', authActive: true, token: '' })
-        break
-      case 'api-key':
-        onChange({ authType: 'api-key', authActive: true, addTo: 'HEADERS', key: 'X-API-Key', value: '' })
-        break
-    }
-  }
-
-  const currentType = AUTH_TYPES.find((t) => t.value === auth.authType) || AUTH_TYPES[0]
-  const CurrentIcon = currentType.icon
-
-  return (
-    <div className="flex flex-col h-full">
-      {/* Header with Auth Type Selector */}
-      <div className={cn(
-        "flex items-center border-b bg-muted/30 px-4 py-2",
-        isHighlighted ? "border-red-500 bg-red-500/5" : "border-border"
-      )}>
-        {isHighlighted && (
-          <WarningCircle className="h-4 w-4 text-red-500 animate-pulse mr-2" weight="fill" />
-        )}
-        <span className={cn(
-          "text-xs font-medium mr-3",
-          isHighlighted ? "text-red-500" : "text-muted-foreground"
-        )}>
-          {isHighlighted ? "Auth required" : "Type"}
-        </span>
-        <Select value={auth.authType} onValueChange={handleTypeChange}>
-          <SelectTrigger className="h-8 w-auto min-w-[140px] text-sm border-0 bg-transparent hover:bg-muted/50">
-            <SelectValue>
-              <span className="flex items-center gap-2">
-                <CurrentIcon className="h-3.5 w-3.5" weight="bold" />
-                <span>{currentType.label}</span>
-              </span>
-            </SelectValue>
-          </SelectTrigger>
-          <SelectContent>
-            {AUTH_TYPES.map((type) => (
-              <SelectItem key={type.value} value={type.value}>
-                <div className="flex items-center gap-2">
-                  <type.icon className="h-3.5 w-3.5" weight="bold" />
-                  <span>{type.label}</span>
-                </div>
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-
-      {/* Auth Content */}
-      <div className="flex-1 overflow-auto">
-        {auth.authType === 'none' && (
-          <div className={cn(
-            "flex flex-col items-center justify-center py-12 px-6 text-center",
-            isHighlighted && "bg-red-500/5 border-2 border-red-500/30 rounded-lg m-4 animate-pulse"
-          )}>
-            {isHighlighted ? (
-              <>
-                <WarningCircle className="h-10 w-10 text-red-500 mb-3" weight="fill" />
-                <p className="text-sm font-medium text-red-600 dark:text-red-400 mb-1">
-                  Authentication Required
-                </p>
-                <p className="text-xs text-muted-foreground">
-                  Select an auth type above to configure credentials
-                </p>
-              </>
-            ) : (
-              <>
-                <ShieldCheck className="h-10 w-10 text-muted-foreground/50 mb-3" weight="duotone" />
-                <p className="text-sm text-muted-foreground">
-                  No authentication required
-                </p>
-              </>
-            )}
-          </div>
-        )}
-
-        {auth.authType === 'basic' && (
-          <table className="w-full text-sm">
-            <thead className="bg-muted/20 text-xs text-muted-foreground">
-              <tr>
-                <th className="text-left font-medium px-4 py-2 w-32">Field</th>
-                <th className="text-left font-medium px-4 py-2">Value</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr className="border-b border-border/50">
-                <td className="px-4 py-1">
-                  <div className="flex items-center gap-2 text-sm font-medium">
-                    <User className="h-3.5 w-3.5 text-muted-foreground" />
-                    username
-                  </div>
-                </td>
-                <td className="px-2 py-1">
-                  <Input
-                    type="text"
-                    value={auth.username}
-                    onChange={(e) => onChange({ ...auth, username: e.target.value })}
-                    placeholder="Enter username..."
-                    className="h-9 border-border/50 bg-transparent focus-visible:ring-1 focus-visible:ring-ring"
-                  />
-                </td>
-              </tr>
-              <tr className="border-b border-border/50">
-                <td className="px-4 py-1">
-                  <div className="flex items-center gap-2 text-sm font-medium">
-                    <Lock className="h-3.5 w-3.5 text-muted-foreground" />
-                    password
-                  </div>
-                </td>
-                <td className="px-2 py-1">
-                  <Input
-                    type="password"
-                    value={auth.password}
-                    onChange={(e) => onChange({ ...auth, password: e.target.value })}
-                    placeholder="Enter password..."
-                    className="h-9 border-border/50 bg-transparent focus-visible:ring-1 focus-visible:ring-ring"
-                  />
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        )}
-
-        {auth.authType === 'bearer' && (
-          <table className="w-full text-sm">
-            <thead className="bg-muted/20 text-xs text-muted-foreground">
-              <tr>
-                <th className="text-left font-medium px-4 py-2 w-32">Field</th>
-                <th className="text-left font-medium px-4 py-2">Value</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr className="border-b border-border/50">
-                <td className="px-4 py-1 align-top pt-3">
-                  <div className="flex items-center gap-2 text-sm font-medium">
-                    <Key className="h-3.5 w-3.5 text-muted-foreground" />
-                    token
-                  </div>
-                </td>
-                <td className="px-2 py-1">
-                  <textarea
-                    value={auth.token}
-                    onChange={(e) => onChange({ ...auth, token: e.target.value })}
-                    placeholder="Paste your bearer token..."
-                    className="w-full min-h-[80px] px-3 py-2 rounded-md border border-border/50 bg-transparent font-mono text-sm resize-none focus:outline-none focus:ring-1 focus:ring-ring placeholder:text-muted-foreground/50"
-                  />
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        )}
-
-        {auth.authType === 'api-key' && (
-          <>
-            {/* Location toggle */}
-            <div className="flex items-center gap-3 px-4 py-3 border-b border-border/50 bg-muted/10">
-              <span className="text-xs text-muted-foreground font-medium">Add to</span>
-              <div className="flex p-0.5 bg-muted rounded-sm">
-                <button
-                  type="button"
-                  onClick={() => onChange({ ...auth, addTo: 'HEADERS' })}
-                  className={cn(
-                    "px-3 py-1 rounded text-xs font-medium transition-all",
-                    auth.addTo === 'HEADERS'
-                      ? "bg-background text-foreground shadow-sm"
-                      : "text-muted-foreground hover:text-foreground"
-                  )}
-                >
-                  Header
-                </button>
-                <button
-                  type="button"
-                  onClick={() => onChange({ ...auth, addTo: 'QUERY_PARAMS' })}
-                  className={cn(
-                    "px-3 py-1 rounded text-xs font-medium transition-all",
-                    auth.addTo === 'QUERY_PARAMS'
-                      ? "bg-background text-foreground shadow-sm"
-                      : "text-muted-foreground hover:text-foreground"
-                  )}
-                >
-                  Query
-                </button>
-              </div>
-            </div>
-            
-            {/* Key-value inputs */}
-            <table className="w-full text-sm">
-              <thead className="bg-muted/20 text-xs text-muted-foreground">
-                <tr>
-                  <th className="text-left font-medium px-4 py-2 w-32">Field</th>
-                  <th className="text-left font-medium px-4 py-2">Value</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr className="border-b border-border/50">
-                  <td className="px-4 py-1">
-                    <div className="flex items-center gap-2 text-sm font-medium">
-                      <Hash className="h-3.5 w-3.5 text-muted-foreground" />
-                      key
-                    </div>
-                  </td>
-                  <td className="px-2 py-1">
-                    <Input
-                      type="text"
-                      value={auth.key}
-                      onChange={(e) => onChange({ ...auth, key: e.target.value })}
-                      placeholder="X-API-Key"
-                      className="h-9 border-border/50 bg-transparent focus-visible:ring-1 focus-visible:ring-ring font-mono"
-                    />
-                  </td>
-                </tr>
-                <tr className="border-b border-border/50">
-                  <td className="px-4 py-1">
-                    <div className="flex items-center gap-2 text-sm font-medium">
-                      <Key className="h-3.5 w-3.5 text-muted-foreground" />
-                      value
-                    </div>
-                  </td>
-                  <td className="px-2 py-1">
-                    <Input
-                      type="password"
-                      value={auth.value}
-                      onChange={(e) => onChange({ ...auth, value: e.target.value })}
-                      placeholder="Enter API key..."
-                      className="h-9 border-border/50 bg-transparent focus-visible:ring-1 focus-visible:ring-ring font-mono"
-                    />
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </>
-        )}
-      </div>
-    </div>
-  )
-}

package/renderer/components/docs-viewer/playground/body-editor.tsx

@@ -1,221 +0,0 @@
-'use client'
-
-import { useState, useEffect } from 'react'
-import { FileText, WarningCircle } from '@phosphor-icons/react'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-import type { BrainfishRESTReqBody } from '@/lib/api-docs/types'
-import { KeyValueEditor, KeyValueItem } from './key-value-editor'
-import { CodeEditor, SupportedLanguage } from './code-editor'
-import { cn } from '@/lib/utils'
-
-type ContentType = BrainfishRESTReqBody['contentType']
-
-const CONTENT_TYPES: { label: string; value: string; language?: SupportedLanguage }[] = [
-  { label: 'None', value: 'none' },
-  { label: 'JSON', value: 'application/json', language: 'json' },
-  { label: 'XML', value: 'application/xml', language: 'xml' },
-  { label: 'Plain Text', value: 'text/plain', language: 'plaintext' },
-  { label: 'HTML', value: 'text/html', language: 'html' },
-  { label: 'Form URL Encoded', value: 'application/x-www-form-urlencoded' },
-  { label: 'Multipart Form', value: 'multipart/form-data' },
-  { label: 'Binary', value: 'application/octet-stream' },
-]
-
-interface BodyEditorProps {
-  body: string | null
-  contentType: ContentType
-  onBodyChange: (body: string | null) => void
-  onContentTypeChange: (contentType: ContentType) => void
-  /** Show error styling to indicate this section needs attention */
-  showError?: boolean
-}
-
-export function BodyEditor({
-  body,
-  contentType,
-  onBodyChange,
-  onContentTypeChange,
-  showError = false,
-}: BodyEditorProps) {
-  const [formData, setFormData] = useState<KeyValueItem[]>([])
-
-  // Parse form data from body when content type changes
-  useEffect(() => {
-    if (contentType === 'application/x-www-form-urlencoded' || contentType === 'multipart/form-data') {
-      try {
-        if (body) {
-          const parsed = JSON.parse(body)
-          if (Array.isArray(parsed)) {
-            setFormData(parsed.map((item: { key: string; value: string }, i: number) => ({
-              id: `form_${i}`,
-              key: item.key || '',
-              value: item.value || '',
-              active: true,
-            })))
-          }
-        }
-      } catch {
-        setFormData([])
-      }
-    }
-  }, [contentType, body])
-
-  // Default templates for each content type
-  const DEFAULT_TEMPLATES: Record<string, string> = {
-    'application/json': '{\n  \n}',
-    'application/xml': '<?xml version="1.0" encoding="UTF-8"?>\n<root>\n  \n</root>',
-    'text/html': '<!DOCTYPE html>\n<html>\n<head>\n  <title></title>\n</head>\n<body>\n  \n</body>\n</html>',
-    'text/plain': '',
-  }
-
-  // Check if current body is a default template or invalid (should be replaced when switching types)
-  const isDefaultTemplate = (currentBody: string | null): boolean => {
-    if (!currentBody || currentBody.trim() === '' || currentBody.trim() === 'null') return true
-    return Object.values(DEFAULT_TEMPLATES).some(
-      template => currentBody.trim() === template.trim()
-    )
-  }
-
-  // Normalize body value - convert "null" string to empty
-  const normalizedBody = (body === 'null' || body === null) ? '' : body
-
-  const handleContentTypeChange = (value: string) => {
-    console.log('[BodyEditor] Content type changed to:', value)
-    const newType = value === 'none' ? null : value as ContentType
-    onContentTypeChange(newType)
-    
-    // Set default body content based on type
-    if (newType === null) {
-      onBodyChange(null)
-    } else if (isDefaultTemplate(body)) {
-      // Replace with new template if current body is empty or a default template
-      const template = DEFAULT_TEMPLATES[newType] ?? ''
-      onBodyChange(template)
-    }
-    // If body has custom content, keep it when switching types
-  }
-
-  const handleFormDataChange = (items: KeyValueItem[]) => {
-    setFormData(items)
-    onBodyChange(JSON.stringify(items.map(({ key, value }) => ({ key, value }))))
-  }
-
-  const currentValue = contentType || 'none'
-  const currentTypeInfo = CONTENT_TYPES.find((t) => t.value === currentValue)
-  const editorLanguage = currentTypeInfo?.language || 'plaintext'
-
-  // Content type selector header component
-  const ContentTypeHeader = () => (
-    <div className={cn(
-      "flex items-center border-b bg-muted/30 px-4 py-2",
-      showError ? "border-red-500 bg-red-500/5" : "border-border"
-    )}>
-      {showError && (
-        <WarningCircle className="h-4 w-4 text-red-500 animate-pulse mr-2" weight="fill" />
-      )}
-      <span className={cn(
-        "text-xs font-medium mr-3",
-        showError ? "text-red-500" : "text-muted-foreground"
-      )}>
-        {showError ? "Body needs attention" : "Type"}
-      </span>
-      <Select value={currentValue} onValueChange={handleContentTypeChange}>
-        <SelectTrigger className="h-8 w-auto min-w-[140px] text-sm border-0 bg-transparent hover:bg-muted/50">
-          <SelectValue placeholder="Select type" />
-        </SelectTrigger>
-        <SelectContent>
-          {CONTENT_TYPES.map((type) => (
-            <SelectItem key={type.value} value={type.value}>
-              {type.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-    </div>
-  )
-
-  // Form data editors (URL encoded, multipart)
-  if (contentType === 'application/x-www-form-urlencoded' || contentType === 'multipart/form-data') {
-    return (
-      <div className="flex flex-col h-full">
-        <ContentTypeHeader />
-        <div className="flex-1 overflow-auto">
-          <KeyValueEditor
-            items={formData}
-            onChange={handleFormDataChange}
-            title={contentType === 'multipart/form-data' ? 'Form Data' : 'URL Encoded'}
-            keyLabel="Field"
-            valueLabel="Value"
-            showDescription={false}
-          />
-        </div>
-      </div>
-    )
-  }
-
-  // Binary file (placeholder)
-  if (contentType === 'application/octet-stream') {
-    return (
-      <div className="flex flex-col h-full">
-        <ContentTypeHeader />
-        <div className="flex-1 flex flex-col items-center justify-center p-8 text-center">
-          <FileText className="h-10 w-10 text-muted-foreground/50 mb-3" weight="duotone" />
-          <p className="text-sm text-muted-foreground">Binary file upload not supported</p>
-        </div>
-      </div>
-    )
-  }
-
-  // No body
-  if (contentType === null) {
-    return (
-      <div className="flex flex-col h-full">
-        <ContentTypeHeader />
-        <div className="flex-1 flex flex-col items-center justify-center p-8 text-center">
-          <FileText className="h-10 w-10 text-muted-foreground/50 mb-3" weight="duotone" />
-          <p className="text-sm text-muted-foreground">No request body</p>
-          <p className="text-xs text-muted-foreground/70 mt-1">Select a type to add body</p>
-        </div>
-      </div>
-    )
-  }
-
-  // Monaco editor for JSON, XML, Text, HTML
-  const editorValue = normalizedBody || ''
-  
-  // Placeholder text based on content type
-  const placeholderMap: Record<string, string> = {
-    'application/json': 'Enter JSON body...',
-    'application/xml': 'Enter XML body...',
-    'text/html': 'Enter HTML body...',
-    'text/plain': 'Enter text...',
-  }
-  
-  const placeholder = placeholderMap[contentType || ''] || 'Enter request body...'
-  
-  return (
-    <div className="flex flex-col h-full">
-      <ContentTypeHeader />
-      <div className="flex-1 dark-editor h-full">
-        <CodeEditor
-          key={`editor-${contentType}`}
-          value={editorValue}
-          onChange={onBodyChange}
-          language={editorLanguage}
-          height="100%"
-          theme="dark"
-          showLineNumbers={false}
-          showBorder={false}
-          rounded={false}
-          placeholder={placeholder}
-        />
-      </div>
-    </div>
-  )
-}