@brainfish-ai/devdoc 0.1.41 → 0.1.43

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

@@ -0,0 +1,317 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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';
+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 }) {
+    // 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, updates)=>{
+        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)=>{
+        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)=>{
+        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 /*#__PURE__*/ _jsx(TooltipProvider, {
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-1 flex-col h-full",
+            children: [
+                /*#__PURE__*/ _jsxs("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"),
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex items-center gap-2",
+                            children: [
+                                showError && /*#__PURE__*/ _jsx(WarningCircle, {
+                                    className: "h-4 w-4 text-red-500 animate-pulse",
+                                    weight: "fill"
+                                }),
+                                /*#__PURE__*/ _jsx("label", {
+                                    className: cn("truncate font-semibold text-sm", showError ? "text-red-500" : "text-foreground"),
+                                    children: title
+                                }),
+                                activeCount > 0 && /*#__PURE__*/ _jsx("span", {
+                                    className: "text-xs text-muted-foreground bg-muted px-2 py-0.5 rounded-full",
+                                    children: activeCount
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex items-center gap-1",
+                            children: [
+                                hasItems && /*#__PURE__*/ _jsxs(Tooltip, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(TooltipTrigger, {
+                                            asChild: true,
+                                            children: /*#__PURE__*/ _jsx(Button, {
+                                                variant: "ghost",
+                                                size: "icon",
+                                                className: "h-7 w-7 text-muted-foreground hover:text-destructive",
+                                                onClick: clearAll,
+                                                disabled: readOnly,
+                                                children: /*#__PURE__*/ _jsx(Trash, {
+                                                    className: "h-3.5 w-3.5"
+                                                })
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(TooltipContent, {
+                                            children: "Clear all"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs(Tooltip, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(TooltipTrigger, {
+                                            asChild: true,
+                                            children: /*#__PURE__*/ _jsx(Button, {
+                                                variant: "ghost",
+                                                size: "icon",
+                                                className: "h-7 w-7 text-muted-foreground hover:text-foreground",
+                                                onClick: addItem,
+                                                disabled: readOnly,
+                                                children: /*#__PURE__*/ _jsx(Plus, {
+                                                    className: "h-3.5 w-3.5"
+                                                })
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(TooltipContent, {
+                                            children: "Add new"
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex-1 overflow-auto",
+                    children: [
+                        workingItems.length > 0 && /*#__PURE__*/ _jsxs("table", {
+                            className: "w-full text-sm",
+                            children: [
+                                /*#__PURE__*/ _jsx("thead", {
+                                    className: "text-xs text-muted-foreground sticky top-0 z-10",
+                                    children: /*#__PURE__*/ _jsxs("tr", {
+                                        className: "bg-background border-b border-border/40 shadow-sm",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("th", {
+                                                className: "text-left font-medium px-3 py-2.5 w-[45%] bg-background",
+                                                children: keyLabel
+                                            }),
+                                            /*#__PURE__*/ _jsx("th", {
+                                                className: "text-left font-medium px-3 py-2.5 w-[45%] bg-background",
+                                                children: valueLabel
+                                            }),
+                                            showDescription && /*#__PURE__*/ _jsx("th", {
+                                                className: "text-left font-medium px-3 py-2.5 bg-background",
+                                                children: "Description"
+                                            }),
+                                            /*#__PURE__*/ _jsx("th", {
+                                                className: "w-16 bg-background"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx("tbody", {
+                                    children: workingItems.map((item, index)=>{
+                                        const isLastEmpty = index === workingItems.length - 1 && !item.key;
+                                        return /*#__PURE__*/ _jsxs("tr", {
+                                            className: `border-b border-border/50 hover:bg-muted/20 group ${!item.active ? 'opacity-50' : ''}`,
+                                            children: [
+                                                /*#__PURE__*/ _jsx("td", {
+                                                    className: "px-2 py-1.5",
+                                                    children: /*#__PURE__*/ _jsx(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
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ _jsx("td", {
+                                                    className: "px-2 py-1.5",
+                                                    children: /*#__PURE__*/ _jsx(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
+                                                    })
+                                                }),
+                                                showDescription && /*#__PURE__*/ _jsx("td", {
+                                                    className: "px-2 py-1.5",
+                                                    children: /*#__PURE__*/ _jsx(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
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ _jsx("td", {
+                                                    className: "px-2 py-1.5",
+                                                    children: /*#__PURE__*/ _jsx("div", {
+                                                        className: "flex items-center justify-end gap-0.5",
+                                                        children: !isLastEmpty && /*#__PURE__*/ _jsxs(_Fragment, {
+                                                            children: [
+                                                                /*#__PURE__*/ _jsxs(Tooltip, {
+                                                                    children: [
+                                                                        /*#__PURE__*/ _jsx(TooltipTrigger, {
+                                                                            asChild: true,
+                                                                            children: /*#__PURE__*/ _jsx(Button, {
+                                                                                variant: "ghost",
+                                                                                size: "icon",
+                                                                                className: "h-7 w-7",
+                                                                                onClick: ()=>toggleActive(index),
+                                                                                disabled: readOnly,
+                                                                                children: item.active ? /*#__PURE__*/ _jsx(CheckCircle, {
+                                                                                    className: "h-4 w-4 text-green-500",
+                                                                                    weight: "fill"
+                                                                                }) : /*#__PURE__*/ _jsx(Circle, {
+                                                                                    className: "h-4 w-4 text-muted-foreground"
+                                                                                })
+                                                                            })
+                                                                        }),
+                                                                        /*#__PURE__*/ _jsx(TooltipContent, {
+                                                                            children: item.active ? 'Disable' : 'Enable'
+                                                                        })
+                                                                    ]
+                                                                }),
+                                                                /*#__PURE__*/ _jsxs(Tooltip, {
+                                                                    children: [
+                                                                        /*#__PURE__*/ _jsx(TooltipTrigger, {
+                                                                            asChild: true,
+                                                                            children: /*#__PURE__*/ _jsx(Button, {
+                                                                                variant: "ghost",
+                                                                                size: "icon",
+                                                                                className: "h-7 w-7 text-muted-foreground hover:text-destructive",
+                                                                                onClick: ()=>deleteItem(index),
+                                                                                disabled: readOnly,
+                                                                                children: /*#__PURE__*/ _jsx(Trash, {
+                                                                                    className: "h-3.5 w-3.5"
+                                                                                })
+                                                                            })
+                                                                        }),
+                                                                        /*#__PURE__*/ _jsx(TooltipContent, {
+                                                                            children: "Remove"
+                                                                        })
+                                                                    ]
+                                                                })
+                                                            ]
+                                                        })
+                                                    })
+                                                })
+                                            ]
+                                        }, item.id);
+                                    })
+                                })
+                            ]
+                        }),
+                        !hasItems && workingItems.length <= 1 && /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col items-center justify-center py-8 text-center",
+                            children: [
+                                /*#__PURE__*/ _jsxs("p", {
+                                    className: "text-xs text-muted-foreground",
+                                    children: [
+                                        "No ",
+                                        title.toLowerCase(),
+                                        " added yet"
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("p", {
+                                    className: "text-xs text-muted-foreground mt-1",
+                                    children: [
+                                        "Click ",
+                                        /*#__PURE__*/ _jsx(Plus, {
+                                            className: "h-3 w-3 inline"
+                                        }),
+                                        " to add one"
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}

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

@@ -0,0 +1,65 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CaretDown, Check } from '@phosphor-icons/react';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+const METHODS = [
+    'GET',
+    'POST',
+    'PUT',
+    'PATCH',
+    'DELETE',
+    'HEAD',
+    'OPTIONS'
+];
+const METHOD_COLORS = {
+    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'
+};
+export function MethodSelector({ value, onChange, disabled = false }) {
+    return /*#__PURE__*/ _jsxs(DropdownMenu, {
+        children: [
+            /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ _jsxs(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,
+                    children: [
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "w-16 text-left",
+                            children: value
+                        }),
+                        /*#__PURE__*/ _jsx(CaretDown, {
+                            className: "h-4 w-4",
+                            weight: "bold"
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx(DropdownMenuContent, {
+                align: "start",
+                className: "min-w-[120px]",
+                children: METHODS.map((method)=>/*#__PURE__*/ _jsxs(DropdownMenuItem, {
+                        onClick: ()=>onChange(method),
+                        className: `font-semibold ${METHOD_COLORS[method]}`,
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "flex-1",
+                                children: method
+                            }),
+                            value === method && /*#__PURE__*/ _jsx(Check, {
+                                className: "h-4 w-4 ml-2",
+                                weight: "bold"
+                            })
+                        ]
+                    }, method))
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,181 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function RequestBuilder({ request, params, headers, body, variables, onParamsChange, onHeadersChange, onBodyChange, onVariablesChange }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "p-6 space-y-6",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                children: [
+                    /*#__PURE__*/ _jsx("label", {
+                        className: "block text-sm font-medium mb-2",
+                        children: "Endpoint"
+                    }),
+                    /*#__PURE__*/ _jsx("input", {
+                        type: "text",
+                        value: request.endpoint,
+                        disabled: true,
+                        className: "w-full px-3 py-2 border rounded bg-muted text-sm font-mono"
+                    })
+                ]
+            }),
+            variables.length > 0 && /*#__PURE__*/ _jsxs("div", {
+                children: [
+                    /*#__PURE__*/ _jsx("h3", {
+                        className: "text-sm font-semibold mb-2",
+                        children: "Path Variables"
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "space-y-2",
+                        children: variables.map((variable, index)=>/*#__PURE__*/ _jsxs("div", {
+                                className: "flex gap-2",
+                                children: [
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "text",
+                                        value: variable.key,
+                                        disabled: true,
+                                        className: "flex-1 px-3 py-2 border rounded bg-muted text-sm font-mono"
+                                    }),
+                                    /*#__PURE__*/ _jsx("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"
+                                    })
+                                ]
+                            }, index))
+                    })
+                ]
+            }),
+            params.length > 0 && /*#__PURE__*/ _jsxs("div", {
+                children: [
+                    /*#__PURE__*/ _jsx("h3", {
+                        className: "text-sm font-semibold mb-2",
+                        children: "Query Parameters"
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "space-y-2",
+                        children: params.map((param, index)=>/*#__PURE__*/ _jsxs("div", {
+                                className: "flex gap-2 items-center",
+                                children: [
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "checkbox",
+                                        checked: param.active,
+                                        onChange: (e)=>{
+                                            const newParams = [
+                                                ...params
+                                            ];
+                                            newParams[index].active = e.target.checked;
+                                            onParamsChange(newParams);
+                                        },
+                                        className: "w-4 h-4"
+                                    }),
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "text",
+                                        value: param.key,
+                                        disabled: true,
+                                        className: "flex-1 px-3 py-2 border rounded bg-muted text-sm font-mono"
+                                    }),
+                                    /*#__PURE__*/ _jsx("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"
+                                    })
+                                ]
+                            }, index))
+                    })
+                ]
+            }),
+            headers.length > 0 && /*#__PURE__*/ _jsxs("div", {
+                children: [
+                    /*#__PURE__*/ _jsx("h3", {
+                        className: "text-sm font-semibold mb-2",
+                        children: "Headers"
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "space-y-2",
+                        children: headers.map((header, index)=>/*#__PURE__*/ _jsxs("div", {
+                                className: "flex gap-2 items-center",
+                                children: [
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "checkbox",
+                                        checked: header.active,
+                                        onChange: (e)=>{
+                                            const newHeaders = [
+                                                ...headers
+                                            ];
+                                            newHeaders[index].active = e.target.checked;
+                                            onHeadersChange(newHeaders);
+                                        },
+                                        className: "w-4 h-4"
+                                    }),
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "text",
+                                        value: header.key,
+                                        disabled: true,
+                                        className: "flex-1 px-3 py-2 border rounded bg-muted text-sm font-mono"
+                                    }),
+                                    /*#__PURE__*/ _jsx("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"
+                                    })
+                                ]
+                            }, index))
+                    })
+                ]
+            }),
+            request.body.body !== null && request.body.contentType && /*#__PURE__*/ _jsxs("div", {
+                children: [
+                    /*#__PURE__*/ _jsx("h3", {
+                        className: "text-sm font-semibold mb-2",
+                        children: "Request Body"
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "mb-2",
+                        children: /*#__PURE__*/ _jsxs("span", {
+                            className: "text-xs text-muted-foreground",
+                            children: [
+                                "Content-Type: ",
+                                request.body.contentType
+                            ]
+                        })
+                    }),
+                    request.body.contentType === 'application/x-www-form-urlencoded' ? /*#__PURE__*/ _jsx("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 key2: value2"
+                    }) : /*#__PURE__*/ _jsx("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..."
+                    })
+                ]
+            })
+        ]
+    });
+}