zudoku 0.0.0-fdf886de → 0.0.0-fe92c9e1

package/src/lib/plugins/openapi/playground/request-panel/MultipartField.tsx

@@ -0,0 +1,91 @@
+import { PaperclipIcon, TrashIcon } from "lucide-react";
+import { useRef } from "react";
+import { Button } from "zudoku/components";
+import { Checkbox } from "zudoku/ui/Checkbox.js";
+import { humanFileSize } from "../../../../util/humanFileSize.js";
+import {
+  ParamsGridInput,
+  ParamsGridItem,
+  ParamsGridRemoveButton,
+} from "../ParamsGrid.js";
+import type { PlaygroundForm } from "../Playground.js";
+import type { useKeyValueFieldManager } from "./useKeyValueFieldManager.js";
+
+type MultipartFieldProps = {
+  index: number;
+  manager: ReturnType<
+    typeof useKeyValueFieldManager<PlaygroundForm, "multipartFormFields">
+  >;
+};
+
+export const MultipartField = ({ index, manager }: MultipartFieldProps) => {
+  const fieldFileInputRef = useRef<HTMLInputElement>(null);
+  const fieldValue = manager.getValue(index, "value");
+
+  return (
+    <ParamsGridItem>
+      <Checkbox
+        {...manager.getCheckboxProps(index)}
+        disabled={!manager.getValue(index, "name")}
+      />
+      <ParamsGridInput
+        {...manager.getNameInputProps(index)}
+        placeholder="Key"
+      />
+      <div className="flex items-center gap-1 flex-1">
+        {fieldValue instanceof File ? (
+          <div className="flex items-center gap-1 flex-1 min-w-0">
+            <div className="flex items-center gap-1 border-b cursor-default">
+              <PaperclipIcon size={12} className="text-muted-foreground" />
+              <span
+                className="text-xs truncate"
+                title={`${fieldValue.name} (${humanFileSize(fieldValue.size)})`}
+              >
+                {fieldValue.name}
+              </span>
+            </div>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-xs"
+              className="opacity-50 hover:opacity-100 hover:brightness-95 transition-opacity"
+              onClick={() => manager.setValue(index, "value", "")}
+            >
+              <TrashIcon size={13} />
+            </Button>
+          </div>
+        ) : (
+          <>
+            <ParamsGridInput
+              {...manager.getValueInputProps(index)}
+              placeholder="Value"
+            />
+            <input
+              ref={fieldFileInputRef}
+              type="file"
+              className="hidden"
+              onChange={(e) => {
+                const file = e.target.files?.[0];
+                if (!file) return;
+
+                manager.setValue(index, "value", file);
+                manager.setValue(index, "active", true);
+              }}
+            />
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-xs"
+              onClick={() => fieldFileInputRef.current?.click()}
+              title="Attach file"
+              className="opacity-0 focus-visible:opacity-100 group-hover:opacity-100 group-hover:brightness-95 transition-opacity"
+            >
+              <PaperclipIcon size={14} />
+            </Button>
+          </>
+        )}
+        <ParamsGridRemoveButton {...manager.getRemoveButtonProps(index)} />
+      </div>
+    </ParamsGridItem>
+  );
+};

package/src/lib/plugins/openapi/playground/request-panel/UrlPath.tsx

@@ -1,7 +1,7 @@
 import { useFormContext } from "react-hook-form";
 import { PathRenderer } from "../../../../components/PathRenderer.js";
 import { ColorizedParam } from "../../ColorizedParam.js";
-import { type PlaygroundForm } from "../Playground.js";
+import type { PlaygroundForm } from "../Playground.js";
 
 export const UrlPath = ({ url }: { url: string }) => {
   const { watch, setFocus } = useFormContext<PlaygroundForm>();

package/src/lib/plugins/openapi/playground/request-panel/UrlQueryParams.tsx

@@ -1,6 +1,6 @@
 import { Fragment } from "react";
 import { useFormContext } from "react-hook-form";
-import { type PlaygroundForm } from "../Playground.js";
+import type { PlaygroundForm } from "../Playground.js";
 
 export const UrlQueryParams = () => {
   const { watch } = useFormContext<PlaygroundForm>();
@@ -9,7 +9,7 @@ export const UrlQueryParams = () => {
   const urlQueryParams = queryParams
     .filter((p) => p.active && p.name)
     .map((p, i, arr) => (
-      <Fragment key={p.name}>
+      <Fragment key={`${i}-${p.name}`}>
         {p.name}={encodeURIComponent(p.value).replaceAll("%20", "+")}
         {i < arr.length - 1 && "&"}
         <wbr />