@mehdad67/apitogo 0.1.24

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

@@ -0,0 +1,355 @@
+import { Button } from "@lukoweb/apitogo/ui/Button.js";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@lukoweb/apitogo/ui/Collapsible.js";
+import { SecretText } from "@lukoweb/apitogo/ui/Secret.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@lukoweb/apitogo/ui/Select.js";
+import { SyntaxHighlight } from "@lukoweb/apitogo/ui/SyntaxHighlight.js";
+import { useQuery } from "@tanstack/react-query";
+import {
+  CornerDownLeftIcon,
+  CornerDownRightIcon,
+  DownloadIcon,
+  EyeIcon,
+  EyeOffIcon,
+  MinusCircleIcon,
+  PlusCircleIcon,
+  SquareCodeIcon,
+} from "lucide-react";
+import { useState } from "react";
+import { cn } from "../../../../util/cn.js";
+import createVariantComponent from "../../../../util/createVariantComponent.js";
+import { humanFileSize } from "../../../../util/humanFileSize.js";
+import {
+  CollapsibleHeader,
+  CollapsibleHeaderTrigger,
+} from "../CollapsibleHeader.js";
+import { isAudioContentType } from "../fileUtils.js";
+import { AudioPlayer } from "./AudioPlayer.js";
+import { convertToTypes } from "./convertToTypes.js";
+
+const mimeTypeToLanguage = (mimeType: string) => {
+  const mimeTypeMapping = {
+    "application/json": "json",
+    "text/json": "json",
+    "text/html": "html",
+    "text/css": "css",
+    "text/javascript": "javascript",
+    "application/xml": "xml",
+    "application/xhtml+xml": "xhtml",
+  };
+
+  return Object.entries(mimeTypeMapping).find(([mime]) =>
+    mimeType.includes(mime),
+  )?.[1];
+};
+
+const getContentType = (headers: Array<[string, string]>) => {
+  return (
+    headers.find(([key]) => key.toLowerCase() === "content-type")?.[1] || ""
+  );
+};
+
+const detectLanguage = (headers: Array<[string, string]>) => {
+  const contentType = getContentType(headers);
+  return mimeTypeToLanguage(contentType);
+};
+
+const tryParseJson = (body: string) => {
+  try {
+    return JSON.stringify(JSON.parse(body), null, 2);
+  } catch {
+    return null;
+  }
+};
+
+const sortHeadersByRelevance = (
+  headers: Array<[string, string]>,
+): Array<[string, string]> => {
+  const priorityOrder = [
+    "Content-Type",
+    "Content-Length",
+    "Authorization",
+    "X-RateLimit-Remaining",
+    "X-RateLimit-Limit",
+    "Cache-Control",
+    "ETag",
+  ].map((key) => key.toLowerCase());
+
+  return [...headers].sort(([keyA], [keyB]) => {
+    const indexA = priorityOrder.indexOf(keyA.toLowerCase());
+    const indexB = priorityOrder.indexOf(keyB.toLowerCase());
+    if (indexA === indexB) return 0;
+    if (indexA === -1) return 1;
+    if (indexB === -1) return -1;
+    return indexA - indexB;
+  });
+};
+
+const MAX_HEADERS_TO_SHOW = 3;
+
+const Row = createVariantComponent(
+  "div",
+  "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-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 = "",
+  headers,
+  request,
+  size,
+  isBinary = false,
+  fileName,
+  blob,
+}: {
+  body?: string;
+  headers: Array<[string, string]>;
+  request: {
+    method: string;
+    url: string;
+    headers: Array<[string, string]>;
+    body?: string;
+  };
+  size: number;
+  isBinary?: boolean;
+  fileName?: string;
+  blob?: Blob;
+}) => {
+  const detectedLanguage = detectLanguage(headers);
+  const jsonContent = tryParseJson(body);
+  const beautifiedBody = jsonContent || body;
+  const [view, setView] = useState<"formatted" | "raw" | "types">(
+    jsonContent ? "formatted" : "raw",
+  );
+
+  const types = useQuery({
+    queryKey: ["types", beautifiedBody],
+    queryFn: async () => {
+      return convertToTypes(JSON.parse(beautifiedBody));
+    },
+    enabled: view === "types" && !isBinary,
+  });
+
+  const handleDownload = () => {
+    if (blob && fileName) {
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = fileName;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    }
+  };
+
+  const sortedHeaders = sortHeadersByRelevance([...headers]);
+
+  return (
+    <>
+      <Collapsible defaultOpen>
+        <CollapsibleHeaderTrigger>
+          <CornerDownRightIcon size={14} />
+          <CollapsibleHeader>Request Headers</CollapsibleHeader>
+        </CollapsibleHeaderTrigger>
+        <CollapsibleContent>
+          <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>
+                  <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={14} />
+          <CollapsibleHeader>Response Headers</CollapsibleHeader>
+        </CollapsibleHeaderTrigger>
+        <CollapsibleContent>
+          <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>
+                <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">
+                  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">
+                  {sortedHeaders
+                    .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 {sortedHeaders.length - MAX_HEADERS_TO_SHOW} headers
+                    <MinusCircleIcon
+                      size={12}
+                      className="text-muted-foreground"
+                    />
+                  </CollapsibleTrigger>
+                </CollapsibleContent>
+              </Collapsible>
+            )}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      <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 && (
+          <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 className="flex-1">
+        {isBinary ? (
+          blob && isAudioContentType(getContentType(headers)) ? (
+            <AudioPlayer
+              blob={blob}
+              fileName={fileName ?? "audio"}
+              size={size}
+              onDownload={handleDownload}
+            />
+          ) : (
+            <div className="p-4 text-center">
+              <div className="flex flex-col items-center gap-4">
+                <div className="text-lg font-semibold">Binary Content</div>
+                <div className="text-sm text-muted-foreground">
+                  This response contains binary data that cannot be displayed as
+                  text.
+                </div>
+                <Button
+                  onClick={handleDownload}
+                  className="flex items-center gap-2"
+                  disabled={!blob}
+                >
+                  <DownloadIcon className="h-4 w-4" />
+                  Download {fileName || "file"} ({humanFileSize(size)})
+                </Button>
+              </div>
+            </div>
+          )
+        ) : (
+          <SyntaxHighlight
+            className="text-xs flex-1"
+            embedded
+            fullHeight
+            language={
+              view === "types"
+                ? "typescript"
+                : view === "raw"
+                  ? jsonContent
+                    ? "text"
+                    : 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

@@ -0,0 +1,106 @@
+import { Spinner } from "@lukoweb/apitogo/components";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@lukoweb/apitogo/ui/Alert.js";
+import type { UseMutationResult } from "@tanstack/react-query";
+import { SendIcon, UnplugIcon } from "lucide-react";
+import { Button } from "../../../../ui/Button.js";
+import { cn } from "../../../../util/cn.js";
+import type { PlaygroundResult } from "../Playground.js";
+import ResponseStatusBar from "./ResponseStatusBar.js";
+import { ResponseTab } from "./ResponseTab.js";
+
+export const ResultPanel = ({
+  queryMutation,
+  showLongRunningWarning,
+  onCancel,
+  tip,
+  isFinished,
+  progress,
+}: {
+  // biome-ignore lint/suspicious/noExplicitAny: Allow any type
+  queryMutation: UseMutationResult<PlaygroundResult, Error, any>;
+  showLongRunningWarning?: boolean;
+  onCancel?: () => void;
+  isFinished: boolean;
+  progress: number;
+  tip?: React.ReactNode;
+}) => {
+  return (
+    <div className="flex flex-col overflow-y-auto h-[80vh] bg-muted/50">
+      {(queryMutation.isPending || queryMutation.data) && (
+        <ResponseStatusBar
+          status={queryMutation.data?.status}
+          time={queryMutation.data?.time}
+          size={queryMutation.data?.size}
+          isFinished={isFinished}
+          progress={progress}
+        />
+      )}
+      {queryMutation.error ? (
+        <div className="max-w-2/3 mx-auto mt-20">
+          <Alert>
+            <UnplugIcon size={24} strokeWidth={1.5} className="me-5" />
+            <AlertTitle>Request failed</AlertTitle>
+            <AlertDescription>
+              {queryMutation.error.message ||
+                String(queryMutation.error) ||
+                "Unexpected error"}
+            </AlertDescription>
+          </Alert>
+        </div>
+      ) : queryMutation.data ? (
+        <ResponseTab
+          request={queryMutation.data.request}
+          size={queryMutation.data.size}
+          headers={queryMutation.data.headers}
+          body={queryMutation.data.body}
+          isBinary={queryMutation.data.isBinary}
+          fileName={queryMutation.data.fileName}
+          blob={queryMutation.data.blob}
+        />
+      ) : queryMutation.isPending ? (
+        <div className="grid place-items-center h-full">
+          <div className="flex flex-col gap-2 items-center mt-20">
+            <Spinner />
+            <div
+              className={cn(
+                "opacity-0 pointer-events-none transition-opacity h-20 text-sm text-muted-foreground duration-300 flex flex-col gap-2 items-center",
+                showLongRunningWarning && "opacity-100 pointer-events-auto",
+              )}
+            >
+              Looks like the request is taking longer than expected.
+              <Button
+                type="button"
+                onClick={onCancel}
+                size="sm"
+                className="w-fit"
+                variant="outline"
+              >
+                Cancel
+              </Button>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="h-full grid place-items-center">
+          <div className="flex flex-col gap-4 items-center">
+            <SendIcon
+              size={64}
+              className="text-muted-foreground"
+              strokeWidth={1.2}
+            />
+            <span className="text-[16px] font-semibold text-muted-foreground">
+              Send your first request
+            </span>
+            {tip}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ResultPanel;

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

@@ -0,0 +1,36 @@
+type JsonValue = string | number | boolean | null | JsonObject | JsonArray;
+type JsonObject = { [key: string]: JsonValue };
+type JsonArray = JsonValue[];
+
+function inferType(value: JsonValue): string {
+  if (value === null) return "null";
+  if (Array.isArray(value)) {
+    if (value.length === 0) return "any[]";
+    const firstValue = value[0];
+    if (firstValue === undefined) return "any[]";
+    const elementType = inferType(firstValue);
+    return `${elementType}[]`;
+  }
+  if (typeof value === "object") {
+    return generateInterface(value);
+  }
+  return typeof value;
+}
+
+export function generateInterface(obj: JsonObject, _indentation = ""): string {
+  const lines: string[] = ["{"];
+
+  for (const [key, value] of Object.entries(obj)) {
+    const propertyType = inferType(value);
+    lines.push(`  ${key}: ${propertyType};`);
+  }
+
+  lines.push("}");
+  return lines.join("\n");
+}
+
+export function convertToTypes(json: JsonValue): { lines: string[] } {
+  const typeDefinition = inferType(json);
+  const lines = [`type GeneratedType = ${typeDefinition};`];
+  return { lines };
+}

package/src/lib/plugins/openapi/playground/serializeQueryParams.ts

@@ -0,0 +1,125 @@
+import type { PlaygroundForm } from "./Playground.js";
+
+export const parseArrayParamValue = (value: string): string[] => {
+  if (!value) return [];
+  try {
+    const parsed: unknown = JSON.parse(value);
+    return Array.isArray(parsed) ? parsed.map(String) : [value];
+  } catch {
+    return [value];
+  }
+};
+
+// RFC 3986 reserved characters that should be kept unencoded when allowReserved
+// is true. # and & are excluded since they have structural meaning in query strings.
+// gen-delims (minus # and &): : / ? @ [ ]
+// sub-delims: ! $ ' ( ) * + , ; =
+const RFC3986_RESERVED_PERCENT_ENCODED =
+  /%21|%27|%28|%29|%2A|%2B|%2C|%2F|%3A|%3B|%3D|%3F|%24|%40|%5B|%5D/gi;
+
+const encode = (value: string, allowReserved?: boolean): string => {
+  if (allowReserved) {
+    return encodeURIComponent(value).replace(
+      RFC3986_RESERVED_PERCENT_ENCODED,
+      decodeURIComponent,
+    );
+  }
+  return encodeURIComponent(value);
+};
+
+export const serializeQueryParam = (
+  name: string,
+  value: string,
+  style = "form",
+  explode?: boolean,
+  allowReserved?: boolean,
+  type?: string,
+): [string, string][] => {
+  const isArray = type === "array";
+
+  // Default explode to true for form style per OAS spec
+  const shouldExplode = explode ?? style === "form";
+
+  if (!isArray) {
+    return [[encode(name, allowReserved), encode(value, allowReserved)]];
+  }
+
+  const values = parseArrayParamValue(value);
+  if (values.length === 0) return [];
+
+  switch (style) {
+    case "form":
+      if (shouldExplode) {
+        // key=1&key=2
+        return values.map((v) => [
+          encode(name, allowReserved),
+          encode(v, allowReserved),
+        ]);
+      }
+      // key=1,2
+      return [
+        [
+          encode(name, allowReserved),
+          values.map((v) => encode(v, allowReserved)).join(","),
+        ],
+      ];
+
+    case "spaceDelimited":
+      if (shouldExplode) {
+        return values.map((v) => [
+          encode(name, allowReserved),
+          encode(v, allowReserved),
+        ]);
+      }
+      return [
+        [
+          encode(name, allowReserved),
+          values.map((v) => encode(v, allowReserved)).join("%20"),
+        ],
+      ];
+
+    case "pipeDelimited":
+      if (shouldExplode) {
+        return values.map((v) => [
+          encode(name, allowReserved),
+          encode(v, allowReserved),
+        ]);
+      }
+      return [
+        [
+          encode(name, allowReserved),
+          values.map((v) => encode(v, allowReserved)).join("|"),
+        ],
+      ];
+
+    case "deepObject":
+      // key[0]=1&key[1]=2
+      return values.map((v, i) => [
+        encode(`${name}[${i}]`, allowReserved),
+        encode(v, allowReserved),
+      ]);
+
+    default:
+      return [[encode(name, allowReserved), encode(value, allowReserved)]];
+  }
+};
+
+export const serializeQueryString = (
+  params: PlaygroundForm["queryParams"],
+): string => {
+  const pairs = params
+    .filter((p) => p.active && p.name)
+    .flatMap((p) =>
+      serializeQueryParam(
+        p.name,
+        p.value,
+        p.style,
+        p.explode,
+        p.allowReserved,
+        p.type,
+      ),
+    );
+
+  if (pairs.length === 0) return "";
+  return pairs.map(([k, v]) => `${k}=${v}`).join("&");
+};

package/src/lib/plugins/openapi/playground/useRememberSkipLoginDialog.tsx

@@ -0,0 +1,23 @@
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+import { syncZustandState } from "../../../util/syncZustandState.js";
+
+type RememberSkipLoginState = {
+  skipLogin: boolean;
+  setSkipLogin: (skipLogin: boolean) => void;
+};
+
+export const useRememberSkipLoginDialog = create<RememberSkipLoginState>()(
+  persist(
+    (set) => ({
+      skipLogin: false,
+      setSkipLogin: (skipLogin: boolean) => set({ skipLogin }),
+    }),
+    {
+      name: "remember-skip-login",
+      storage: createJSONStorage(() => sessionStorage),
+    },
+  ),
+);
+
+syncZustandState(useRememberSkipLoginDialog);

package/src/lib/plugins/openapi/processors/removeExtensions.ts

@@ -0,0 +1,29 @@
+import type { ProcessorArg } from "../../../../config/validators/BuildSchema.js";
+import type { OpenAPIDocument } from "../../../oas/parser/index.js";
+import { type RecordAny, traverse } from "./traverse.js";
+
+interface RemoveExtensionsOptions {
+  keys?: string[];
+  shouldRemove?: (key: string) => boolean;
+}
+
+// Remove all `x-` prefixed key/value pairs, or filter by names if provided
+export const removeExtensions =
+  ({ keys, shouldRemove }: RemoveExtensionsOptions = {}) =>
+  ({ schema }: ProcessorArg) =>
+    traverse(schema, (spec) => {
+      const result: RecordAny = {};
+
+      for (const [key, value] of Object.entries(spec)) {
+        const isExtension = key.startsWith("x-");
+        const shouldBeRemoved =
+          isExtension &&
+          (keys === undefined || keys.includes(key)) &&
+          (!shouldRemove || shouldRemove(key));
+
+        if (shouldBeRemoved) continue;
+
+        result[key] = value;
+      }
+      return result;
+    }) as OpenAPIDocument;