@brainfish-ai/devdoc 0.1.42 → 0.1.44

package/renderer/components/docs-viewer/playground/key-value-editor.tsx

@@ -1,261 +0,0 @@
-'use client'
-
-import { useCallback, useMemo } from 'react'
-import { CheckCircle, Circle, Trash, Plus, WarningCircle } from '@phosphor-icons/react'
-import { Input } from '@/components/ui/input'
-import { Button } from '@/components/ui/button'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
-import { cn } from '@/lib/utils'
-
-export interface KeyValueItem {
-  id: string
-  key: string
-  value: string
-  active: boolean
-  description?: string
-}
-
-interface KeyValueEditorProps {
-  items: KeyValueItem[]
-  onChange: (items: KeyValueItem[]) => void
-  title?: string
-  keyLabel?: string
-  valueLabel?: string
-  showDescription?: boolean
-  readOnly?: boolean
-  /** Show error styling to indicate this section needs attention */
-  showError?: boolean
-}
-
-let idCounter = 0
-const generateId = () => `kv_${Date.now()}_${idCounter++}`
-
-export function KeyValueEditor({
-  items,
-  onChange,
-  title = 'Parameters',
-  keyLabel = 'Name',
-  valueLabel = 'Value',
-  showDescription = false,
-  readOnly = false,
-  showError = false,
-}: KeyValueEditorProps) {
-  // Ensure there's always an empty row at the end for new entries
-  const workingItems = useMemo(() => {
-    if (items.length === 0 || items[items.length - 1].key !== '') {
-      return [...items, { id: generateId(), key: '', value: '', active: true, description: '' }]
-    }
-    return items
-  }, [items])
-
-  const updateItem = useCallback((index: number, updates: Partial<KeyValueItem>) => {
-    const newItems = workingItems.map((item, i) => 
-      i === index ? { ...item, ...updates } : item
-    )
-    const filtered = newItems.filter((item, i) => 
-      i === newItems.length - 1 || item.key !== '' || item.value !== ''
-    )
-    onChange(filtered.filter(item => item.key !== '' || item.value !== ''))
-  }, [workingItems, onChange])
-
-  const deleteItem = useCallback((index: number) => {
-    const newItems = workingItems.filter((_, i) => i !== index)
-    onChange(newItems.filter(item => item.key !== ''))
-  }, [workingItems, onChange])
-
-  const addItem = useCallback(() => {
-    onChange([...items, { id: generateId(), key: '', value: '', active: true, description: '' }])
-  }, [items, onChange])
-
-  const clearAll = useCallback(() => {
-    onChange([])
-  }, [onChange])
-
-  const toggleActive = useCallback((index: number) => {
-    const item = workingItems[index]
-    if (item) {
-      updateItem(index, { active: !item.active })
-    }
-  }, [workingItems, updateItem])
-
-  const activeCount = useMemo(() => {
-    return items.filter(item => item.active && item.key).length
-  }, [items])
-
-  const hasItems = items.some(item => item.key !== '')
-
-  return (
-    <TooltipProvider>
-      <div className="flex flex-1 flex-col h-full">
-        {/* Header */}
-        <div className={cn(
-          "sticky top-0 z-10 flex items-center justify-between border-b bg-muted/30 px-4 py-2",
-          showError ? "border-red-500 bg-red-500/5" : "border-border"
-        )}>
-          <div className="flex items-center gap-2">
-            {showError && (
-              <WarningCircle className="h-4 w-4 text-red-500 animate-pulse" weight="fill" />
-            )}
-            <label className={cn(
-              "truncate font-semibold text-sm",
-              showError ? "text-red-500" : "text-foreground"
-            )}>
-              {title}
-            </label>
-            {activeCount > 0 && (
-              <span className="text-xs text-muted-foreground bg-muted px-2 py-0.5 rounded-full">
-                {activeCount}
-              </span>
-            )}
-          </div>
-          <div className="flex items-center gap-1">
-            {hasItems && (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-7 w-7 text-muted-foreground hover:text-destructive"
-                    onClick={clearAll}
-                    disabled={readOnly}
-                  >
-                    <Trash className="h-3.5 w-3.5" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>Clear all</TooltipContent>
-              </Tooltip>
-            )}
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-7 w-7 text-muted-foreground hover:text-foreground"
-                  onClick={addItem}
-                  disabled={readOnly}
-                >
-                  <Plus className="h-3.5 w-3.5" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Add new</TooltipContent>
-            </Tooltip>
-          </div>
-        </div>
-
-        {/* Items */}
-        <div className="flex-1 overflow-auto">
-          {workingItems.length > 0 && (
-            <table className="w-full text-sm">
-              <thead className="text-xs text-muted-foreground sticky top-0 z-10">
-                <tr className="bg-background border-b border-border/40 shadow-sm">
-                  <th className="text-left font-medium px-3 py-2.5 w-[45%] bg-background">{keyLabel}</th>
-                  <th className="text-left font-medium px-3 py-2.5 w-[45%] bg-background">{valueLabel}</th>
-                  {showDescription && (
-                    <th className="text-left font-medium px-3 py-2.5 bg-background">Description</th>
-                  )}
-                  <th className="w-16 bg-background"></th>
-                </tr>
-              </thead>
-              <tbody>
-                {workingItems.map((item, index) => {
-                  const isLastEmpty = index === workingItems.length - 1 && !item.key
-                  return (
-                    <tr 
-                      key={item.id} 
-                      className={`border-b border-border/50 hover:bg-muted/20 group ${!item.active ? 'opacity-50' : ''}`}
-                    >
-                      <td className="px-2 py-1.5">
-                        <Input
-                          type="text"
-                          value={item.key}
-                          onChange={(e) => updateItem(index, { key: e.target.value })}
-                          placeholder={isLastEmpty ? `Add ${keyLabel.toLowerCase()}...` : ''}
-                          className="h-9 bg-background border border-border/60 focus-visible:ring-1 focus-visible:ring-primary/30 focus-visible:border-primary/50 placeholder:text-muted-foreground/50"
-                          disabled={readOnly}
-                        />
-                      </td>
-                      <td className="px-2 py-1.5">
-                        <Input
-                          type="text"
-                          value={item.value}
-                          onChange={(e) => updateItem(index, { value: e.target.value })}
-                          placeholder={isLastEmpty ? `Add ${valueLabel.toLowerCase()}...` : ''}
-                          className="h-9 bg-background border border-border/60 focus-visible:ring-1 focus-visible:ring-primary/30 focus-visible:border-primary/50 placeholder:text-muted-foreground/50"
-                          disabled={readOnly}
-                        />
-                      </td>
-                      {showDescription && (
-                        <td className="px-2 py-1.5">
-                          <Input
-                            type="text"
-                            value={item.description || ''}
-                            onChange={(e) => updateItem(index, { description: e.target.value })}
-                            placeholder=""
-                            className="h-9 bg-background border border-border/60 focus-visible:ring-1 focus-visible:ring-primary/30 focus-visible:border-primary/50 text-muted-foreground"
-                            disabled={readOnly}
-                          />
-                        </td>
-                      )}
-                      <td className="px-2 py-1.5">
-                        <div className="flex items-center justify-end gap-0.5">
-                          {!isLastEmpty && (
-                            <>
-                              <Tooltip>
-                                <TooltipTrigger asChild>
-                                  <Button
-                                    variant="ghost"
-                                    size="icon"
-                                    className="h-7 w-7"
-                                    onClick={() => toggleActive(index)}
-                                    disabled={readOnly}
-                                  >
-                                    {item.active ? (
-                                      <CheckCircle className="h-4 w-4 text-green-500" weight="fill" />
-                                    ) : (
-                                      <Circle className="h-4 w-4 text-muted-foreground" />
-                                    )}
-                                  </Button>
-                                </TooltipTrigger>
-                                <TooltipContent>{item.active ? 'Disable' : 'Enable'}</TooltipContent>
-                              </Tooltip>
-                              <Tooltip>
-                                <TooltipTrigger asChild>
-                                  <Button
-                                    variant="ghost"
-                                    size="icon"
-                                    className="h-7 w-7 text-muted-foreground hover:text-destructive"
-                                    onClick={() => deleteItem(index)}
-                                    disabled={readOnly}
-                                  >
-                                    <Trash className="h-3.5 w-3.5" />
-                                  </Button>
-                                </TooltipTrigger>
-                                <TooltipContent>Remove</TooltipContent>
-                              </Tooltip>
-                            </>
-                          )}
-                        </div>
-                      </td>
-                    </tr>
-                  )
-                })}
-              </tbody>
-            </table>
-          )}
-
-          {/* Empty state */}
-          {!hasItems && workingItems.length <= 1 && (
-            <div className="flex flex-col items-center justify-center py-8 text-center">
-              <p className="text-xs text-muted-foreground">
-                No {title.toLowerCase()} added yet
-              </p>
-              <p className="text-xs text-muted-foreground mt-1">
-                Click <Plus className="h-3 w-3 inline" /> to add one
-              </p>
-            </div>
-          )}
-        </div>
-      </div>
-    </TooltipProvider>
-  )
-}

package/renderer/components/docs-viewer/playground/method-selector.tsx

@@ -1,60 +0,0 @@
-'use client'
-
-import { CaretDown, Check } from '@phosphor-icons/react'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import { Button } from '@/components/ui/button'
-import type { HTTPMethod } from '@/lib/api-docs/types'
-
-const METHODS: HTTPMethod[] = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS']
-
-const METHOD_COLORS: Record<HTTPMethod, string> = {
-  GET: 'text-green-500',
-  POST: 'text-blue-500',
-  PUT: 'text-orange-500',
-  PATCH: 'text-purple-500',
-  DELETE: 'text-red-500',
-  HEAD: 'text-gray-500',
-  OPTIONS: 'text-gray-500',
-}
-
-interface MethodSelectorProps {
-  value: HTTPMethod
-  onChange: (method: HTTPMethod) => void
-  disabled?: boolean
-}
-
-export function MethodSelector({ value, onChange, disabled = false }: MethodSelectorProps) {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="ghost"
-          className={`flex items-center gap-1 px-4 py-2 h-auto bg-muted/50 hover:bg-muted rounded-l-md rounded-r-none border-r border-border font-semibold text-sm ${
-            METHOD_COLORS[value]
-          }`}
-          disabled={disabled}
-        >
-          <span className="w-16 text-left">{value}</span>
-          <CaretDown className="h-4 w-4" weight="bold" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" className="min-w-[120px]">
-        {METHODS.map((method) => (
-          <DropdownMenuItem
-            key={method}
-            onClick={() => onChange(method)}
-            className={`font-semibold ${METHOD_COLORS[method]}`}
-          >
-            <span className="flex-1">{method}</span>
-            {value === method && <Check className="h-4 w-4 ml-2" weight="bold" />}
-          </DropdownMenuItem>
-        ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}

package/renderer/components/docs-viewer/playground/request-builder.tsx

@@ -1,179 +0,0 @@
-'use client'
-
-import type { BrainfishRESTRequest } from '@/lib/api-docs/types'
-
-interface RequestBuilderProps {
-  request: BrainfishRESTRequest
-  params: Array<{ key: string; value: string; active: boolean }>
-  headers: Array<{ key: string; value: string; active: boolean }>
-  body: string | null
-  variables: Array<{ key: string; value: string; active: boolean }>
-  onParamsChange: (params: Array<{ key: string; value: string; active: boolean }>) => void
-  onHeadersChange: (headers: Array<{ key: string; value: string; active: boolean }>) => void
-  onBodyChange: (body: string | null) => void
-  onVariablesChange: (variables: Array<{ key: string; value: string; active: boolean }>) => void
-}
-
-export function RequestBuilder({
-  request,
-  params,
-  headers,
-  body,
-  variables,
-  onParamsChange,
-  onHeadersChange,
-  onBodyChange,
-  onVariablesChange,
-}: RequestBuilderProps) {
-  return (
-    <div className="p-6 space-y-6">
-      {/* URL */}
-      <div>
-        <label className="block text-sm font-medium mb-2">Endpoint</label>
-        <input
-          type="text"
-          value={request.endpoint}
-          disabled
-          className="w-full px-3 py-2 border rounded bg-muted text-sm font-mono"
-        />
-      </div>
-
-      {/* Path Variables */}
-      {variables.length > 0 && (
-        <div>
-          <h3 className="text-sm font-semibold mb-2">Path Variables</h3>
-          <div className="space-y-2">
-            {variables.map((variable, index) => (
-              <div key={index} className="flex gap-2">
-                <input
-                  type="text"
-                  value={variable.key}
-                  disabled
-                  className="flex-1 px-3 py-2 border rounded bg-muted text-sm font-mono"
-                />
-                <input
-                  type="text"
-                  value={variable.value}
-                  onChange={(e) => {
-                    const newVars = [...variables]
-                    newVars[index].value = e.target.value
-                    onVariablesChange(newVars)
-                  }}
-                  placeholder="value"
-                  className="flex-1 px-3 py-2 border rounded text-sm"
-                />
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Query Parameters */}
-      {params.length > 0 && (
-        <div>
-          <h3 className="text-sm font-semibold mb-2">Query Parameters</h3>
-          <div className="space-y-2">
-            {params.map((param, index) => (
-              <div key={index} className="flex gap-2 items-center">
-                <input
-                  type="checkbox"
-                  checked={param.active}
-                  onChange={(e) => {
-                    const newParams = [...params]
-                    newParams[index].active = e.target.checked
-                    onParamsChange(newParams)
-                  }}
-                  className="w-4 h-4"
-                />
-                <input
-                  type="text"
-                  value={param.key}
-                  disabled
-                  className="flex-1 px-3 py-2 border rounded bg-muted text-sm font-mono"
-                />
-                <input
-                  type="text"
-                  value={param.value}
-                  onChange={(e) => {
-                    const newParams = [...params]
-                    newParams[index].value = e.target.value
-                    onParamsChange(newParams)
-                  }}
-                  placeholder="value"
-                  className="flex-1 px-3 py-2 border rounded text-sm"
-                />
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Headers */}
-      {headers.length > 0 && (
-        <div>
-          <h3 className="text-sm font-semibold mb-2">Headers</h3>
-          <div className="space-y-2">
-            {headers.map((header, index) => (
-              <div key={index} className="flex gap-2 items-center">
-                <input
-                  type="checkbox"
-                  checked={header.active}
-                  onChange={(e) => {
-                    const newHeaders = [...headers]
-                    newHeaders[index].active = e.target.checked
-                    onHeadersChange(newHeaders)
-                  }}
-                  className="w-4 h-4"
-                />
-                <input
-                  type="text"
-                  value={header.key}
-                  disabled
-                  className="flex-1 px-3 py-2 border rounded bg-muted text-sm font-mono"
-                />
-                <input
-                  type="text"
-                  value={header.value}
-                  onChange={(e) => {
-                    const newHeaders = [...headers]
-                    newHeaders[index].value = e.target.value
-                    onHeadersChange(newHeaders)
-                  }}
-                  placeholder="value"
-                  className="flex-1 px-3 py-2 border rounded text-sm"
-                />
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Body */}
-      {request.body.body !== null && request.body.contentType && (
-        <div>
-          <h3 className="text-sm font-semibold mb-2">Request Body</h3>
-          <div className="mb-2">
-            <span className="text-xs text-muted-foreground">
-              Content-Type: {request.body.contentType}
-            </span>
-          </div>
-          {request.body.contentType === 'application/x-www-form-urlencoded' ? (
-            <textarea
-              value={body || ''}
-              onChange={(e) => onBodyChange(e.target.value)}
-              className="w-full h-64 px-3 py-2 border rounded font-mono text-sm"
-              placeholder="key1: value1&#10;key2: value2"
-            />
-          ) : (
-            <textarea
-              value={body || ''}
-              onChange={(e) => onBodyChange(e.target.value)}
-              className="w-full h-64 px-3 py-2 border rounded font-mono text-sm"
-              placeholder="Enter request body..."
-            />
-          )}
-        </div>
-      )}
-    </div>
-  )
-}