@lukoweb/apitogo 0.1.1 → 0.1.3

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

@@ -1,91 +1,91 @@
-import { PaperclipIcon, TrashIcon } from "lucide-react";
-import { useRef } from "react";
-import { Button } from "@lukoweb/apitogo/components";
-import { Checkbox } from "@lukoweb/apitogo/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>
-  );
-};
+import { Button } from "@lukoweb/apitogo/components";
+import { Checkbox } from "@lukoweb/apitogo/ui/Checkbox.js";
+import { PaperclipIcon, TrashIcon } from "lucide-react";
+import { useRef } from "react";
+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/result-panel/AudioPlayer.tsx

@@ -1,50 +1,50 @@
-import { DownloadIcon } from "lucide-react";
-import { useEffect, useState } from "react";
-import { Button } from "@lukoweb/apitogo/ui/Button.js";
-import { humanFileSize } from "../../../../util/humanFileSize.js";
-
-export const AudioPlayer = ({
-  blob,
-  fileName,
-  size,
-  onDownload,
-}: {
-  blob: Blob;
-  fileName: string;
-  size: number;
-  onDownload: () => void;
-}) => {
-  const [audioUrl, setAudioUrl] = useState<string | null>(null);
-
-  useEffect(() => {
-    const url = URL.createObjectURL(blob);
-    setAudioUrl(url);
-
-    return () => {
-      URL.revokeObjectURL(url);
-    };
-  }, [blob]);
-
-  if (!audioUrl) {
-    return (
-      <div className="p-4 text-center">
-        <div className="text-sm text-muted-foreground">Loading audio...</div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="p-4 text-center">
-      <div className="flex flex-col items-center gap-4">
-        {/* biome-ignore lint/a11y/useMediaCaption: API response audio cannot have predefined captions */}
-        <audio controls src={audioUrl} className="w-full max-w-md">
-          Your browser does not support the audio element.
-        </audio>
-        <Button onClick={onDownload} className="flex items-center gap-2">
-          <DownloadIcon className="h-4 w-4" />
-          Download {fileName} ({humanFileSize(size)})
-        </Button>
-      </div>
-    </div>
-  );
-};
+import { Button } from "@lukoweb/apitogo/ui/Button.js";
+import { DownloadIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { humanFileSize } from "../../../../util/humanFileSize.js";
+
+export const AudioPlayer = ({
+  blob,
+  fileName,
+  size,
+  onDownload,
+}: {
+  blob: Blob;
+  fileName: string;
+  size: number;
+  onDownload: () => void;
+}) => {
+  const [audioUrl, setAudioUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    const url = URL.createObjectURL(blob);
+    setAudioUrl(url);
+
+    return () => {
+      URL.revokeObjectURL(url);
+    };
+  }, [blob]);
+
+  if (!audioUrl) {
+    return (
+      <div className="p-4 text-center">
+        <div className="text-sm text-muted-foreground">Loading audio...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-4 text-center">
+      <div className="flex flex-col items-center gap-4">
+        {/* biome-ignore lint/a11y/useMediaCaption: API response audio cannot have predefined captions */}
+        <audio controls src={audioUrl} className="w-full max-w-md">
+          Your browser does not support the audio element.
+        </audio>
+        <Button onClick={onDownload} className="flex items-center gap-2">
+          <DownloadIcon className="h-4 w-4" />
+          Download {fileName} ({humanFileSize(size)})
+        </Button>
+      </div>
+    </div>
+  );
+};