@lukoweb/apitogo 0.1.1 → 0.1.2

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

@@ -1,102 +1,106 @@
-import type { UseMutationResult } from "@tanstack/react-query";
-import { SendIcon, UnplugIcon } from "lucide-react";
-import { Spinner } from "@lukoweb/apitogo/components";
-import { Alert, AlertDescription, AlertTitle } from "@lukoweb/apitogo/ui/Alert.js";
-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;
+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/schema/SchemaPropertyItem.tsx

@@ -1,184 +1,189 @@
-import * as Collapsible from "@radix-ui/react-collapsible";
-import { MinusIcon, PlusIcon, RefreshCcwDotIcon } from "lucide-react";
-import { useState } from "react";
-import { Item, ItemActions, ItemContent, ItemTitle } from "@lukoweb/apitogo/ui/Item.js";
-import { InlineCode } from "../../../components/InlineCode.js";
-import { Markdown } from "../../../components/Markdown.js";
-import type { SchemaObject } from "../../../oas/parser/index.js";
-import { Button } from "../../../ui/Button.js";
-import { cn } from "../../../util/cn.js";
-import { ConstValue } from "../components/ConstValue.js";
-import { EnumValues } from "../components/EnumValues.js";
-import { ParamInfos } from "../ParamInfos.js";
-import { SchemaExampleAndDefault } from "./SchemaExampleAndDefault.js";
-import { SchemaView } from "./SchemaView.js";
-import {
-  extractCircularRefInfo,
-  isArrayCircularRef,
-  isArrayType,
-  isCircularRef,
-  isComplexType,
-} from "./utils.js";
-
-const RecursiveIndicator = ({ circularProp }: { circularProp?: string }) => (
-  <InlineCode className="inline-flex items-center gap-1.5 text-xs translate-y-0.5">
-    <RefreshCcwDotIcon size={13} />
-    <span>{circularProp ? `${circularProp} (circular)` : "circular"}</span>
-  </InlineCode>
-);
-
-export const SchemaPropertyItem = ({
-  name,
-  schema,
-  group,
-  defaultOpen = false,
-  showCollapseButton = true,
-}: {
-  name: string;
-  schema: SchemaObject;
-  group: "required" | "optional" | "deprecated";
-  defaultOpen?: boolean;
-  showCollapseButton?: boolean;
-}) => {
-  const [isOpen, setIsOpen] = useState(defaultOpen);
-
-  const isDeprecated = group === "deprecated";
-
-  if (isCircularRef(schema)) {
-    return (
-      <Item
-        className={cn(
-          isDeprecated && "opacity-50 hover:opacity-100 transition",
-        )}
-      >
-        <ItemContent className="gap-y-2">
-          <div>
-            <ItemTitle className="inline me-2">
-              <code className={cn(isDeprecated && "line-through")}>{name}</code>
-            </ItemTitle>
-            {"\u200B"}
-            <ParamInfos
-              className="inline"
-              schema={schema}
-              extraItems={[
-                group === "required" && (
-                  <span className="text-primary">required</span>
-                ),
-                <RecursiveIndicator key="circular-ref" />,
-              ]}
-            />
-          </div>
-          <SchemaExampleAndDefault schema={schema} />
-        </ItemContent>
-      </Item>
-    );
-  }
-
-  const isCollapsible = Boolean(
-    (schema.allOf ||
-      schema.anyOf ||
-      schema.oneOf ||
-      isComplexType(schema) ||
-      (isArrayType(schema) &&
-        "items" in schema &&
-        isComplexType(schema.items)) ||
-      schema.additionalProperties) &&
-    !isArrayCircularRef(schema),
-  );
-
-  const shouldRenderDescription = Boolean(
-    schema.description ||
-    ("items" in schema && schema.items?.enum) ||
-    schema.const ||
-    schema.enum ||
-    schema.example !== undefined ||
-    schema.default !== undefined,
-  );
-
-  return (
-    <Item
-      className={cn(isDeprecated && "opacity-50 hover:opacity-100 transition")}
-    >
-      <ItemContent className="gap-y-2">
-        <div>
-          <ItemTitle className="inline me-2">
-            {isCollapsible ? (
-              <button
-                onClick={() => setIsOpen(!isOpen)}
-                type="button"
-                className="hover:underline"
-              >
-                <code className={cn(isDeprecated && "line-through")}>
-                  {name}
-                </code>
-              </button>
-            ) : (
-              <code className={cn(isDeprecated && "line-through")}>{name}</code>
-            )}
-          </ItemTitle>
-          {"\u200B"}
-          <ParamInfos
-            className="inline"
-            schema={schema}
-            extraItems={[
-              group === "required" && (
-                <span className="text-primary">required</span>
-              ),
-              isArrayCircularRef(schema) && (
-                <RecursiveIndicator
-                  circularProp={extractCircularRefInfo(schema.items)}
-                />
-              ),
-            ]}
-          />
-        </div>
-        {shouldRenderDescription && (
-          <div className="flex flex-col gap-1.5">
-            {schema.description && (
-              <Markdown className="prose-sm" content={schema.description} />
-            )}
-            {"items" in schema && schema.items?.enum && (
-              <EnumValues values={schema.items.enum} />
-            )}
-            {schema.const && <ConstValue schema={schema} hideDescription />}
-            {schema.enum && <EnumValues values={schema.enum} />}
-            <SchemaExampleAndDefault schema={schema} />
-          </div>
-        )}
-      </ItemContent>
-
-      {isCollapsible && showCollapseButton && (
-        <ItemActions className="self-start">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="rounded-full"
-            onClick={() => setIsOpen(!isOpen)}
-            aria-label="Toggle properties"
-          >
-            {isOpen ? <MinusIcon size={16} /> : <PlusIcon size={16} />}
-          </Button>
-        </ItemActions>
-      )}
-
-      {isCollapsible && (
-        <Collapsible.Root
-          defaultOpen={defaultOpen}
-          open={isOpen}
-          onOpenChange={setIsOpen}
-          className={cn("w-full", !isOpen && "contents")}
-        >
-          <Collapsible.Content asChild>
-            <ItemContent>
-              {schema.anyOf || schema.oneOf || schema.type === "object" ? (
-                <SchemaView schema={schema} />
-              ) : isArrayType(schema) && "items" in schema ? (
-                <SchemaView schema={schema.items} />
-              ) : null}
-            </ItemContent>
-          </Collapsible.Content>
-        </Collapsible.Root>
-      )}
-    </Item>
-  );
-};
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemTitle,
+} from "@lukoweb/apitogo/ui/Item.js";
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { MinusIcon, PlusIcon, RefreshCcwDotIcon } from "lucide-react";
+import { useState } from "react";
+import { InlineCode } from "../../../components/InlineCode.js";
+import { Markdown } from "../../../components/Markdown.js";
+import type { SchemaObject } from "../../../oas/parser/index.js";
+import { Button } from "../../../ui/Button.js";
+import { cn } from "../../../util/cn.js";
+import { ConstValue } from "../components/ConstValue.js";
+import { EnumValues } from "../components/EnumValues.js";
+import { ParamInfos } from "../ParamInfos.js";
+import { SchemaExampleAndDefault } from "./SchemaExampleAndDefault.js";
+import { SchemaView } from "./SchemaView.js";
+import {
+  extractCircularRefInfo,
+  isArrayCircularRef,
+  isArrayType,
+  isCircularRef,
+  isComplexType,
+} from "./utils.js";
+
+const RecursiveIndicator = ({ circularProp }: { circularProp?: string }) => (
+  <InlineCode className="inline-flex items-center gap-1.5 text-xs translate-y-0.5">
+    <RefreshCcwDotIcon size={13} />
+    <span>{circularProp ? `${circularProp} (circular)` : "circular"}</span>
+  </InlineCode>
+);
+
+export const SchemaPropertyItem = ({
+  name,
+  schema,
+  group,
+  defaultOpen = false,
+  showCollapseButton = true,
+}: {
+  name: string;
+  schema: SchemaObject;
+  group: "required" | "optional" | "deprecated";
+  defaultOpen?: boolean;
+  showCollapseButton?: boolean;
+}) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  const isDeprecated = group === "deprecated";
+
+  if (isCircularRef(schema)) {
+    return (
+      <Item
+        className={cn(
+          isDeprecated && "opacity-50 hover:opacity-100 transition",
+        )}
+      >
+        <ItemContent className="gap-y-2">
+          <div>
+            <ItemTitle className="inline me-2">
+              <code className={cn(isDeprecated && "line-through")}>{name}</code>
+            </ItemTitle>
+            {"\u200B"}
+            <ParamInfos
+              className="inline"
+              schema={schema}
+              extraItems={[
+                group === "required" && (
+                  <span className="text-primary">required</span>
+                ),
+                <RecursiveIndicator key="circular-ref" />,
+              ]}
+            />
+          </div>
+          <SchemaExampleAndDefault schema={schema} />
+        </ItemContent>
+      </Item>
+    );
+  }
+
+  const isCollapsible = Boolean(
+    (schema.allOf ||
+      schema.anyOf ||
+      schema.oneOf ||
+      isComplexType(schema) ||
+      (isArrayType(schema) &&
+        "items" in schema &&
+        isComplexType(schema.items)) ||
+      schema.additionalProperties) &&
+    !isArrayCircularRef(schema),
+  );
+
+  const shouldRenderDescription = Boolean(
+    schema.description ||
+    ("items" in schema && schema.items?.enum) ||
+    schema.const ||
+    schema.enum ||
+    schema.example !== undefined ||
+    schema.default !== undefined,
+  );
+
+  return (
+    <Item
+      className={cn(isDeprecated && "opacity-50 hover:opacity-100 transition")}
+    >
+      <ItemContent className="gap-y-2">
+        <div>
+          <ItemTitle className="inline me-2">
+            {isCollapsible ? (
+              <button
+                onClick={() => setIsOpen(!isOpen)}
+                type="button"
+                className="hover:underline"
+              >
+                <code className={cn(isDeprecated && "line-through")}>
+                  {name}
+                </code>
+              </button>
+            ) : (
+              <code className={cn(isDeprecated && "line-through")}>{name}</code>
+            )}
+          </ItemTitle>
+          {"\u200B"}
+          <ParamInfos
+            className="inline"
+            schema={schema}
+            extraItems={[
+              group === "required" && (
+                <span className="text-primary">required</span>
+              ),
+              isArrayCircularRef(schema) && (
+                <RecursiveIndicator
+                  circularProp={extractCircularRefInfo(schema.items)}
+                />
+              ),
+            ]}
+          />
+        </div>
+        {shouldRenderDescription && (
+          <div className="flex flex-col gap-1.5">
+            {schema.description && (
+              <Markdown className="prose-sm" content={schema.description} />
+            )}
+            {"items" in schema && schema.items?.enum && (
+              <EnumValues values={schema.items.enum} />
+            )}
+            {schema.const && <ConstValue schema={schema} hideDescription />}
+            {schema.enum && <EnumValues values={schema.enum} />}
+            <SchemaExampleAndDefault schema={schema} />
+          </div>
+        )}
+      </ItemContent>
+
+      {isCollapsible && showCollapseButton && (
+        <ItemActions className="self-start">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="rounded-full"
+            onClick={() => setIsOpen(!isOpen)}
+            aria-label="Toggle properties"
+          >
+            {isOpen ? <MinusIcon size={16} /> : <PlusIcon size={16} />}
+          </Button>
+        </ItemActions>
+      )}
+
+      {isCollapsible && (
+        <Collapsible.Root
+          defaultOpen={defaultOpen}
+          open={isOpen}
+          onOpenChange={setIsOpen}
+          className={cn("w-full", !isOpen && "contents")}
+        >
+          <Collapsible.Content asChild>
+            <ItemContent>
+              {schema.anyOf || schema.oneOf || schema.type === "object" ? (
+                <SchemaView schema={schema} />
+              ) : isArrayType(schema) && "items" in schema ? (
+                <SchemaView schema={schema.items} />
+              ) : null}
+            </ItemContent>
+          </Collapsible.Content>
+        </Collapsible.Root>
+      )}
+    </Item>
+  );
+};