zudoku 0.0.0-fdf886de → 0.0.0-fe92c9e1

package/src/lib/plugins/openapi/playground/request-panel/useKeyValueFieldManager.ts

@@ -0,0 +1,349 @@
+import {
+  type ComponentPropsWithoutRef,
+  type KeyboardEvent,
+  startTransition,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
+import type {
+  Control,
+  FieldArrayPath,
+  FieldArrayWithId,
+  FieldValues,
+  PathValue,
+} from "react-hook-form";
+import { useFieldArray, useFormContext } from "react-hook-form";
+
+export type Value =
+  | string
+  | number
+  | readonly string[]
+  | File
+  | boolean
+  | undefined;
+
+export type KeyValueField = {
+  name: string;
+  value: Value;
+  active: boolean;
+};
+
+export type KeyValueFieldManagerOptions<
+  TFormData extends FieldValues,
+  TName extends FieldArrayPath<TFormData>,
+  T extends KeyValueField = PathValue<TFormData, TName>[number],
+> = {
+  control: Control<TFormData>;
+  name: TName;
+  defaultValue: T;
+  isEmpty?: (item: T) => boolean;
+  shouldSetActive?: (item: T) => boolean;
+};
+
+export type CheckboxProps = {
+  checked: boolean;
+  disabled?: boolean;
+  onCheckedChange: (checked: boolean) => void;
+};
+
+export type RemoveButtonProps = { onClick: () => void; disabled?: boolean };
+
+type SetValueFn = (
+  index: number,
+  field: keyof KeyValueField,
+  value: Value,
+  options?: { focus?: "next" | "previous" },
+) => void;
+
+type GetValueFn = (index: number, field: keyof KeyValueField) => Value;
+
+export type UseKeyValueFieldManagerReturn<TFormData extends FieldValues> = {
+  fields: FieldArrayWithId<TFormData>[];
+  getNameInputProps: GetInputPropsFn;
+  getValueInputProps: GetInputPropsFn;
+  getCheckboxProps: (index: number) => CheckboxProps;
+  getRemoveButtonProps: (index: number) => RemoveButtonProps;
+  setValue: SetValueFn;
+  getValue: GetValueFn;
+};
+
+type GetInputPropsFn = (index: number) => ComponentPropsWithoutRef<"input">;
+
+export const useKeyValueFieldManager = <
+  TFormData extends FieldValues,
+  TName extends FieldArrayPath<TFormData>,
+  T extends KeyValueField = PathValue<TFormData, TName>[number],
+>(
+  options: KeyValueFieldManagerOptions<TFormData, TName>,
+): UseKeyValueFieldManagerReturn<TFormData> => {
+  const {
+    control,
+    name,
+    defaultValue,
+    isEmpty: customIsEmpty,
+    shouldSetActive: customShouldSetActive,
+  } = options;
+  const {
+    setValue: internalSetValue,
+    watch,
+    setFocus,
+    register,
+  } = useFormContext();
+  const { fields, append, remove } = useFieldArray({ control, name });
+  const watchedFields = watch(name) as T[];
+  const lastEditedIndexRef = useRef(-1);
+  const prevLengthRef = useRef(-1);
+
+  const setValue = useCallback<SetValueFn>(
+    (index, field, value, options) => {
+      if (field === "value" || field === "name") {
+        lastEditedIndexRef.current = index;
+      }
+
+      // biome-ignore lint/suspicious/noExplicitAny: Can't infer the type of the value here
+      internalSetValue(`${name}.${index}.${field}`, value as any);
+
+      if (options?.focus === "next") {
+        setFocus(
+          field === "name"
+            ? `${name}.${index}.value`
+            : `${name}.${index + 1}.name`,
+        );
+      } else if (options?.focus === "previous") {
+        setFocus(
+          field === "name"
+            ? `${name}.${index - 1}.value`
+            : `${name}.${index}.name`,
+        );
+      }
+    },
+    [name, internalSetValue, setFocus],
+  );
+
+  const isEmpty = useCallback(
+    (item: T) => {
+      if (customIsEmpty) return customIsEmpty(item);
+      return !item.name && !item.value;
+    },
+    [customIsEmpty],
+  );
+
+  const shouldSetActive = useCallback(
+    (item: T) => {
+      if (customShouldSetActive) return customShouldSetActive(item);
+      return Boolean(item.name || item.value);
+    },
+    [customShouldSetActive],
+  );
+
+  // Handle auto append/remove of rows
+  useEffect(() => {
+    if (!watchedFields) return;
+
+    // Prevents double-appending in Strict Mode
+    if (prevLengthRef.current === -1) {
+      prevLengthRef.current = watchedFields.length;
+
+      if (watchedFields.length === 0) {
+        // biome-ignore lint/suspicious/noExplicitAny: Generic field array type
+        append(defaultValue as any, {
+          shouldFocus: false,
+        });
+      }
+      return;
+    }
+
+    prevLengthRef.current = watchedFields.length;
+
+    // If no fields, append one
+    if (watchedFields.length === 0) {
+      // biome-ignore lint/suspicious/noExplicitAny: Generic field array type
+      append(defaultValue as any, {
+        shouldFocus: false,
+      });
+      return;
+    }
+
+    // Auto-remove empty fields (except the last one, keep at least one)
+    if (watchedFields.length > 1) {
+      const emptyIndices: number[] = [];
+
+      // Check all fields except the last one
+      for (let i = 0; i < watchedFields.length - 1; i++) {
+        const field = watchedFields[i];
+        if (field && isEmpty(field) && !shouldSetActive(field)) {
+          emptyIndices.push(i);
+        }
+      }
+
+      // Remove from highest index to lowest to avoid index shifting
+      if (emptyIndices.length > 0) {
+        const lowestRemovedIndex = emptyIndices[0];
+
+        if (lowestRemovedIndex === undefined) return;
+
+        for (let i = emptyIndices.length - 1; i >= 0; i--) {
+          const indexToRemove = emptyIndices[i];
+          if (indexToRemove !== undefined) {
+            remove(indexToRemove);
+          }
+        }
+
+        // If we just edited this field, focus the name field at the same index
+        // (which now contains what was the next row), or previous row if needed
+        if (lastEditedIndexRef.current === lowestRemovedIndex) {
+          const newLength = watchedFields.length - emptyIndices.length;
+
+          if (lowestRemovedIndex < newLength) {
+            // Next row moved into this position, focus its name field
+            setFocus(`${name}.${lowestRemovedIndex}.name`);
+          } else if (lowestRemovedIndex > 0) {
+            // Removed row was at the end, focus previous row's name
+            setFocus(`${name}.${lowestRemovedIndex - 1}.name`);
+          } else {
+            setFocus(`${name}.0.name`);
+          }
+        }
+        lastEditedIndexRef.current = -1;
+      }
+    }
+
+    // If last field has content, append empty one
+    const lastField = watchedFields[watchedFields.length - 1];
+    if (lastField && !isEmpty(lastField)) {
+      // biome-ignore lint/suspicious/noExplicitAny: Generic field array type
+      append(defaultValue as any, {
+        shouldFocus: false,
+      });
+    }
+  }, [
+    watchedFields,
+    append,
+    remove,
+    defaultValue,
+    isEmpty,
+    name,
+    setFocus,
+    shouldSetActive,
+  ]);
+
+  // Auto set active state of row checkbox
+  useEffect(() => {
+    if (!watchedFields) return;
+
+    const updates: Array<() => void> = [];
+
+    for (let i = 0; i < watchedFields.length; i++) {
+      const field = watchedFields[i];
+      if (!field) continue;
+
+      const shouldBeActive = shouldSetActive(field);
+      if (field.active === shouldBeActive) continue;
+
+      updates.push(() => setValue(i, "active", shouldBeActive));
+    }
+
+    if (updates.length === 0) return;
+
+    startTransition(() => updates.forEach((update) => update()));
+  }, [watchedFields, shouldSetActive, setValue]);
+
+  const isFieldEmpty = useCallback(
+    (index: number) => {
+      const field = watchedFields?.[index];
+      return field ? isEmpty(field) : true;
+    },
+    [watchedFields, isEmpty],
+  );
+
+  const createKeyDownHandler = useCallback(
+    (index: number, field: "name" | "value") => {
+      const next =
+        field === "name"
+          ? `${name}.${index}.value`
+          : `${name}.${index + 1}.name`;
+
+      const previous =
+        field === "name"
+          ? `${name}.${index - 1}.value`
+          : `${name}.${index}.name`;
+      const canNavigatePrevious = field === "value" || index > 0;
+
+      return (e: KeyboardEvent<HTMLInputElement>) => {
+        if (!(e.target instanceof HTMLInputElement)) return;
+
+        const isAtStart = e.target.selectionStart === 0;
+        const isAtEnd = e.target.selectionStart === e.target.value.length;
+        const isEmpty = !e.target.value;
+
+        if (e.key === "Enter") {
+          setFocus(next);
+        } else if (e.key === "Backspace" && isEmpty && canNavigatePrevious) {
+          e.preventDefault();
+          setFocus(previous);
+        } else if (e.key === "ArrowLeft" && isAtStart && canNavigatePrevious) {
+          e.preventDefault();
+          setFocus(previous);
+        } else if (e.key === "ArrowRight" && isAtEnd) {
+          e.preventDefault();
+          setFocus(next);
+        }
+      };
+    },
+    [name, setFocus],
+  );
+
+  const getNameInputProps = useCallback<GetInputPropsFn>(
+    (index) => ({
+      ...register(`${name}.${index}.name`),
+      onChange: (e) => setValue(index, "name", e.target.value),
+      onKeyDown: createKeyDownHandler(index, "name"),
+    }),
+    [register, name, setValue, createKeyDownHandler],
+  );
+
+  const getValueInputProps = useCallback<GetInputPropsFn>(
+    (index) => ({
+      ...register(`${name}.${index}.value`),
+      onChange: (e) => setValue(index, "value", e.target.value),
+      onKeyDown: createKeyDownHandler(index, "value"),
+    }),
+    [register, name, setValue, createKeyDownHandler],
+  );
+
+  const getCheckboxProps = useCallback<(index: number) => CheckboxProps>(
+    (index) => ({
+      ...register(`${name}.${index}.active`),
+      checked: watch(`${name}.${index}.active`) ?? false,
+      disabled: isFieldEmpty(index),
+      onCheckedChange: (checked: boolean) => {
+        setValue(index, "active", checked === true);
+      },
+    }),
+    [name, register, isFieldEmpty, watch, setValue],
+  );
+
+  const getValue = useCallback<GetValueFn>(
+    (index, field) => watchedFields?.[index]?.[field],
+    [watchedFields],
+  );
+
+  const getRemoveButtonProps = useCallback(
+    (index: number) => ({
+      onClick: () => remove(index),
+      disabled: index === fields.length - 1,
+    }),
+    [remove, fields.length],
+  );
+
+  return {
+    fields,
+    getNameInputProps,
+    getValueInputProps,
+    getCheckboxProps,
+    getRemoveButtonProps,
+    setValue,
+    getValue,
+  };
+};

package/src/lib/plugins/openapi/playground/result-panel/ResponseStatusBar.tsx

@@ -31,9 +31,11 @@ const RealTimeCounter = () => {
   }, []);
 
   useLayoutEffect(() => {
+    const currentSpanRef = spanRef.current;
+    if (!currentSpanRef) return;
+
     // Create a text node and attach it to the span
     const textNode = document.createTextNode("0");
-    const currentSpanRef = spanRef.current!;
 
     currentSpanRef.appendChild(textNode);
     textRef.current = textNode;
@@ -82,7 +84,7 @@ export const ResponseStatusBar = ({
   };
 
   return (
-    <div className="relative flex h-10 text-xs gap-4 px-4 items-center justify-between font-mono border-b">
+    <div className="relative shrink-0 flex h-10 text-xs gap-4 px-4 items-center justify-between font-mono border-b">
       <div className="flex items-center gap-2">
         <ResponseCodeCircle status={status} /> {status ?? "Sending Request..."}
         {status ? ` ${statusCodeMap[status]}` : ""}
@@ -102,7 +104,7 @@ export const ResponseStatusBar = ({
         </div>
       </div>
       <div
-        className="h-full bg-neutral-500/10 absolute left-0 -bottom-0 z-10 transition-all duration-200 ease-in-out"
+        className="h-full bg-neutral-500/10 absolute left-0 bottom-0 z-10 transition-all duration-200 ease-in-out"
         style={{
           opacity: isFinished ? 0 : 1,
           width: isFinished ? 0 : `${progress * 100}%`,

package/src/lib/plugins/openapi/playground/result-panel/ResponseTab.tsx

@@ -3,7 +3,11 @@ import {
   CornerDownLeftIcon,
   CornerDownRightIcon,
   DownloadIcon,
+  EyeIcon,
+  EyeOffIcon,
+  MinusCircleIcon,
   PlusCircleIcon,
+  SquareCodeIcon,
 } from "lucide-react";
 import { useState } from "react";
 import { Button } from "zudoku/ui/Button.js";
@@ -12,6 +16,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "zudoku/ui/Collapsible.js";
+import { SecretText } from "zudoku/ui/Secret.js";
 import {
   Select,
   SelectContent,
@@ -19,6 +24,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "zudoku/ui/Select.js";
+import { SyntaxHighlight } from "zudoku/ui/SyntaxHighlight.js";
+import { cn } from "../../../../util/cn.js";
 import createVariantComponent from "../../../../util/createVariantComponent.js";
 import { humanFileSize } from "../../../../util/humanFileSize.js";
 import {
@@ -26,7 +33,6 @@ import {
   CollapsibleHeaderTrigger,
 } from "../CollapsibleHeader.js";
 import { convertToTypes } from "./convertToTypes.js";
-import { Highlight } from "./Highlight.js";
 
 const mimeTypeToLanguage = (mimeType: string) => {
   const mimeTypeMapping = {
@@ -88,7 +94,38 @@ const Row = createVariantComponent(
   "grid-cols-subgrid grid border-b col-span-full px-4 py-1.5 font-mono text-xs",
 );
 
-const RowContent = createVariantComponent("div", "py-1 break-all");
+const RowContent = createVariantComponent("div", "py-1 break-words");
+const RowValue = ({ value, header }: { value: string; header: string }) => {
+  const secretHeaders = ["authorization", "key", "secret", "token"];
+  const isSecret = secretHeaders.includes(header.toLowerCase());
+  const [revealed, setRevealed] = useState(!isSecret);
+  return (
+    <RowContent
+      className={cn(
+        "max-h-28 overflow-auto",
+        isSecret && "cursor-pointer flex group",
+      )}
+      onClick={() => {
+        if (isSecret) {
+          setRevealed((prev) => !prev);
+        }
+      }}
+    >
+      {!isSecret ? (
+        value
+      ) : (
+        <>
+          <SecretText secret={value} previewChars={0} revealed={revealed} />
+          {revealed ? (
+            <EyeOffIcon size={14} className={cn("hidden group-hover:block")} />
+          ) : (
+            <EyeIcon size={14} className={cn("hidden group-hover:block")} />
+          )}
+        </>
+      )}
+    </RowContent>
+  );
+};
 
 export const ResponseTab = ({
   body = "",
@@ -146,47 +183,66 @@ export const ResponseTab = ({
     <>
       <Collapsible defaultOpen>
         <CollapsibleHeaderTrigger>
-          <CornerDownRightIcon size={16} />
-          <CollapsibleHeader className="col-span-2">
-            Header Request
-          </CollapsibleHeader>
+          <CornerDownRightIcon size={14} />
+          <CollapsibleHeader>Request Headers</CollapsibleHeader>
         </CollapsibleHeaderTrigger>
         <CollapsibleContent>
-          <div className="grid grid-cols-2 gap-x-6 text-sm">
+          <div className="grid grid-cols-[2fr_3fr] gap-x-6 text-sm">
             {request.headers
               .slice(0, MAX_HEADERS_TO_SHOW)
               .map(([key, value]) => (
                 <Row key={key}>
                   <RowContent>{key}</RowContent>
-                  <RowContent>{value}</RowContent>
+                  <RowValue value={value} header={key} />
                 </Row>
               ))}
+            {request.headers.length > MAX_HEADERS_TO_SHOW && (
+              <Collapsible className="col-span-full grid-cols-subgrid grid group">
+                <CollapsibleTrigger className="data-[state=open]:hidden justify-center col-span-2 text-xs text-muted-foreground hover:text-primary border-b h-8 flex items-center gap-2">
+                  Show {request.headers.length - MAX_HEADERS_TO_SHOW} more
+                  headers
+                  <PlusCircleIcon size={12} className="text-muted-foreground" />
+                </CollapsibleTrigger>
+                <CollapsibleContent className="col-span-full grid grid-cols-subgrid">
+                  {request.headers
+                    .slice(MAX_HEADERS_TO_SHOW)
+                    .map(([key, value]) => (
+                      <Row key={key}>
+                        <RowContent>{key}</RowContent>
+                        <RowValue value={value} header={key} />
+                      </Row>
+                    ))}
+                  <CollapsibleTrigger className="justify-center col-span-2 text-xs text-muted-foreground hover:text-primary border-b h-8 flex items-center gap-2">
+                    Hide {request.headers.length - MAX_HEADERS_TO_SHOW} headers
+                    <MinusCircleIcon
+                      size={12}
+                      className="text-muted-foreground"
+                    />
+                  </CollapsibleTrigger>
+                </CollapsibleContent>
+              </Collapsible>
+            )}
           </div>
         </CollapsibleContent>
       </Collapsible>
 
       <Collapsible defaultOpen>
         <CollapsibleHeaderTrigger>
-          <CornerDownLeftIcon size={16} />
-          <CollapsibleHeader className="col-span-2">
-            Header Response
-          </CollapsibleHeader>
+          <CornerDownLeftIcon size={14} />
+          <CollapsibleHeader>Response Headers</CollapsibleHeader>
         </CollapsibleHeaderTrigger>
         <CollapsibleContent>
-          <div className="grid grid-cols-2 gap-x-6 text-sm">
+          <div className="grid grid-cols-[2fr_3fr] gap-x-6 text-sm">
             {sortedHeaders.slice(0, MAX_HEADERS_TO_SHOW).map(([key, value]) => (
               <Row key={key}>
                 <RowContent>{key}</RowContent>
-                <RowContent>{value}</RowContent>
+                <RowValue value={value} header={key} />
               </Row>
             ))}
             {sortedHeaders.length > MAX_HEADERS_TO_SHOW && (
               <Collapsible className="col-span-full grid-cols-subgrid grid group">
                 <CollapsibleTrigger className="data-[state=open]:hidden justify-center col-span-2 text-xs text-muted-foreground hover:text-primary border-b h-8 flex items-center gap-2">
-                  <span>
-                    Show {sortedHeaders.length - MAX_HEADERS_TO_SHOW} more
-                    headers
-                  </span>
+                  Show {sortedHeaders.length - MAX_HEADERS_TO_SHOW} more headers
                   <PlusCircleIcon size={12} className="text-muted-foreground" />
                 </CollapsibleTrigger>
                 <CollapsibleContent className="col-span-full grid grid-cols-subgrid">
@@ -195,9 +251,16 @@ export const ResponseTab = ({
                     .map(([key, value]) => (
                       <Row key={key}>
                         <RowContent>{key}</RowContent>
-                        <RowContent>{value}</RowContent>
+                        <RowValue value={value} header={key} />
                       </Row>
                     ))}
+                  <CollapsibleTrigger className="justify-center col-span-2 text-xs text-muted-foreground hover:text-primary border-b h-8 flex items-center gap-2">
+                    Hide {sortedHeaders.length - MAX_HEADERS_TO_SHOW} headers
+                    <MinusCircleIcon
+                      size={12}
+                      className="text-muted-foreground"
+                    />
+                  </CollapsibleTrigger>
                 </CollapsibleContent>
               </Collapsible>
             )}
@@ -205,26 +268,30 @@ export const ResponseTab = ({
         </CollapsibleContent>
       </Collapsible>
 
-      <div className="flex gap-2 justify-between items-center border-b h-10">
+      <div className="flex gap-2 justify-between items-center border-b px-2 flex-0">
+        <CollapsibleHeader className="flex items-center gap-2">
+          <SquareCodeIcon size={14} />
+          Response body
+        </CollapsibleHeader>
         {jsonContent && !isBinary && (
-          <div className="px-2">
-            <Select
-              value={view}
-              onValueChange={(value) => setView(value as "formatted" | "raw")}
-            >
-              <SelectTrigger className="min-w-32 border-none h-8">
-                <SelectValue placeholder="View" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="formatted">Formatted</SelectItem>
-                <SelectItem value="raw">Raw</SelectItem>
-                <SelectItem value="types">Types</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
+          <Select
+            value={view}
+            onValueChange={(value) =>
+              setView(value as "formatted" | "raw" | "types")
+            }
+          >
+            <SelectTrigger className="max-w-32 border-0 bg-transparent">
+              <SelectValue placeholder="View" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="formatted">Formatted</SelectItem>
+              <SelectItem value="raw">Raw</SelectItem>
+              <SelectItem value="types">Types</SelectItem>
+            </SelectContent>
+          </Select>
         )}
       </div>
-      <div>
+      <div className="flex-1">
         {isBinary ? (
           <div className="p-4 text-center">
             <div className="flex flex-col items-center gap-4">
@@ -244,26 +311,27 @@ export const ResponseTab = ({
             </div>
           </div>
         ) : (
-          <div className="overflow-auto max-w-full p-4 text-xs max-h-[calc(83.333vh-180px)]">
-            <Highlight
-              language={
-                view === "types"
-                  ? "typescript"
-                  : view === "raw"
-                    ? jsonContent
-                      ? "plain"
-                      : detectedLanguage
-                    : "json"
-              }
-              code={
-                (view === "raw"
-                  ? body
-                  : view === "types"
-                    ? types.data?.lines.join("\n")
-                    : beautifiedBody) ?? ""
-              }
-            />
-          </div>
+          <SyntaxHighlight
+            className="text-xs flex-1"
+            embedded
+            fullHeight
+            language={
+              view === "types"
+                ? "typescript"
+                : view === "raw"
+                  ? jsonContent
+                    ? "plain"
+                    : detectedLanguage
+                  : "json"
+            }
+            code={
+              (view === "raw"
+                ? body
+                : view === "types"
+                  ? types.data?.lines.join("\n")
+                  : beautifiedBody) ?? ""
+            }
+          />
         )}
       </div>
     </>

package/src/lib/plugins/openapi/playground/result-panel/ResultPanel.tsx

@@ -1,10 +1,10 @@
-import { type UseMutationResult } from "@tanstack/react-query";
+import type { UseMutationResult } from "@tanstack/react-query";
 import { SendIcon, UnplugIcon } from "lucide-react";
 import { Spinner } from "zudoku/components";
 import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert.js";
 import { Button } from "../../../../ui/Button.js";
 import { cn } from "../../../../util/cn.js";
-import { type PlaygroundResult } from "../Playground.js";
+import type { PlaygroundResult } from "../Playground.js";
 import ResponseStatusBar from "./ResponseStatusBar.js";
 import { ResponseTab } from "./ResponseTab.js";
 
@@ -16,7 +16,7 @@ export const ResultPanel = ({
   isFinished,
   progress,
 }: {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // biome-ignore lint/suspicious/noExplicitAny: Allow any type
   queryMutation: UseMutationResult<PlaygroundResult, Error, any>;
   showLongRunningWarning?: boolean;
   onCancel?: () => void;
@@ -25,7 +25,7 @@ export const ResultPanel = ({
   tip?: React.ReactNode;
 }) => {
   return (
-    <div className="overflow-y-auto h-[80vh] bg-muted/50">
+    <div className="flex flex-col overflow-y-auto h-[80vh] bg-muted/50">
       {(queryMutation.isPending || queryMutation.data) && (
         <ResponseStatusBar
           status={queryMutation.data?.status}

package/src/lib/plugins/openapi/playground/result-panel/convertToTypes.ts

@@ -17,7 +17,7 @@ function inferType(value: JsonValue): string {
   return typeof value;
 }
 
-export function generateInterface(obj: JsonObject, indentation = ""): string {
+export function generateInterface(obj: JsonObject, _indentation = ""): string {
   const lines: string[] = ["{"];
 
   for (const [key, value] of Object.entries(obj)) {