@lukoweb/apitogo 0.1.0 → 0.1.2

package/src/lib/plugins/openapi/ApiHeader.tsx

@@ -1,96 +1,96 @@
-import type { ReactNode } from "react";
-import { Link, useNavigate } from "react-router";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@lukoweb/apitogo/ui/Select.js";
-import { CategoryHeading } from "../../components/CategoryHeading.js";
-import { Heading } from "../../components/Heading.js";
-import { useOasConfig } from "./context.js";
-import { DownloadSchemaButton } from "./DownloadSchemaButton.js";
-import { buildVersionSwitchUrl } from "./util/getRoutes.js";
-
-type ApiHeaderProps = {
-  title?: ReactNode;
-  heading: ReactNode;
-  headingId: string;
-  children?: ReactNode;
-  tag?: string;
-};
-
-export const ApiHeader = ({
-  title,
-  heading,
-  headingId,
-  children,
-  tag,
-}: ApiHeaderProps) => {
-  const { input, type, versions, version, options } = useOasConfig();
-  const navigate = useNavigate();
-
-  const hasMultipleVersions = Object.keys(versions).length > 1;
-  const showVersions =
-    options?.showVersionSelect === "always" ||
-    (hasMultipleVersions && options?.showVersionSelect !== "hide");
-
-  const currentVersion = version != null ? versions[version] : undefined;
-  const downloadUrl =
-    typeof input === "string"
-      ? type === "url"
-        ? input
-        : currentVersion?.downloadUrl
-      : undefined;
-
-  const handleVersionChange = (newVersion: string) => {
-    const target = versions[newVersion];
-    if (!target) return;
-
-    navigate(buildVersionSwitchUrl(target, tag));
-  };
-
-  return (
-    <div className="w-full">
-      <div className="flex flex-col gap-4 sm:flex-row justify-around items-start">
-        <div className="flex flex-col flex-1 gap-3">
-          {title && (
-            <CategoryHeading>
-              <Link to="..">{title}</Link>
-            </CategoryHeading>
-          )}
-          <Heading level={1} id={headingId} registerNavigationAnchor>
-            {heading}
-          </Heading>
-          {children}
-        </div>
-        <div className="flex flex-col gap-4 sm:items-end self-start">
-          <div className="flex gap-2 items-center">
-            {showVersions && (
-              <Select
-                onValueChange={handleVersionChange}
-                value={version}
-                disabled={!hasMultipleVersions}
-              >
-                <SelectTrigger className="w-[180px]" size="sm">
-                  <SelectValue placeholder="Select version" />
-                </SelectTrigger>
-                <SelectContent>
-                  {Object.entries(versions).map(([v, { label }]) => (
-                    <SelectItem key={v} value={v}>
-                      {label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            )}
-            {options?.schemaDownload?.enabled && downloadUrl && (
-              <DownloadSchemaButton downloadUrl={downloadUrl} />
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@lukoweb/apitogo/ui/Select.js";
+import type { ReactNode } from "react";
+import { Link, useNavigate } from "react-router";
+import { CategoryHeading } from "../../components/CategoryHeading.js";
+import { Heading } from "../../components/Heading.js";
+import { useOasConfig } from "./context.js";
+import { DownloadSchemaButton } from "./DownloadSchemaButton.js";
+import { buildVersionSwitchUrl } from "./util/getRoutes.js";
+
+type ApiHeaderProps = {
+  title?: ReactNode;
+  heading: ReactNode;
+  headingId: string;
+  children?: ReactNode;
+  tag?: string;
+};
+
+export const ApiHeader = ({
+  title,
+  heading,
+  headingId,
+  children,
+  tag,
+}: ApiHeaderProps) => {
+  const { input, type, versions, version, options } = useOasConfig();
+  const navigate = useNavigate();
+
+  const hasMultipleVersions = Object.keys(versions).length > 1;
+  const showVersions =
+    options?.showVersionSelect === "always" ||
+    (hasMultipleVersions && options?.showVersionSelect !== "hide");
+
+  const currentVersion = version != null ? versions[version] : undefined;
+  const downloadUrl =
+    typeof input === "string"
+      ? type === "url"
+        ? input
+        : currentVersion?.downloadUrl
+      : undefined;
+
+  const handleVersionChange = (newVersion: string) => {
+    const target = versions[newVersion];
+    if (!target) return;
+
+    navigate(buildVersionSwitchUrl(target, tag));
+  };
+
+  return (
+    <div className="w-full">
+      <div className="flex flex-col gap-4 sm:flex-row justify-around items-start">
+        <div className="flex flex-col flex-1 gap-3">
+          {title && (
+            <CategoryHeading>
+              <Link to="..">{title}</Link>
+            </CategoryHeading>
+          )}
+          <Heading level={1} id={headingId} registerNavigationAnchor>
+            {heading}
+          </Heading>
+          {children}
+        </div>
+        <div className="flex flex-col gap-4 sm:items-end self-start">
+          <div className="flex gap-2 items-center">
+            {showVersions && (
+              <Select
+                onValueChange={handleVersionChange}
+                value={version}
+                disabled={!hasMultipleVersions}
+              >
+                <SelectTrigger className="w-[180px]" size="sm">
+                  <SelectValue placeholder="Select version" />
+                </SelectTrigger>
+                <SelectContent>
+                  {Object.entries(versions).map(([v, { label }]) => (
+                    <SelectItem key={v} value={v}>
+                      {label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+            {options?.schemaDownload?.enabled && downloadUrl && (
+              <DownloadSchemaButton downloadUrl={downloadUrl} />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/lib/plugins/openapi/CollapsibleCode.tsx

@@ -1,88 +1,88 @@
-import { FoldVerticalIcon, UnfoldVerticalIcon } from "lucide-react";
-import { type CSSProperties, type ReactNode, useRef, useState } from "react";
-import { Button } from "@lukoweb/apitogo/ui/Button.js";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@lukoweb/apitogo/ui/Collapsible.js";
-import { cn } from "../../util/cn.js";
-import useIsomorphicLayoutEffect from "../../util/useIsomorphicLayoutEffect.js";
-
-export const OverflowOverlay = () => (
-  <div className="absolute inset-0 bg-linear-to-b from-transparent to-zinc-50/60 dark:to-zinc-950/90 z-10 transition-all group-hover:to-transparent" />
-);
-
-export const CollapsibleCode = ({
-  children,
-  maxHeight = 250,
-}: {
-  children: ReactNode;
-  maxHeight?: number;
-}) => {
-  const contentRef = useRef<HTMLDivElement | null>(null);
-  const [isOverflowing, setIsOverflowing] = useState(false);
-  const [open, setOpen] = useState(false);
-
-  useIsomorphicLayoutEffect(() => {
-    const el = contentRef.current;
-    if (!el) return;
-
-    setIsOverflowing(el.scrollHeight > maxHeight);
-
-    const observer = new ResizeObserver(() => {
-      setIsOverflowing(el.scrollHeight > maxHeight);
-    });
-    observer.observe(el);
-
-    return () => observer.disconnect();
-  }, [maxHeight]);
-
-  return (
-    <Collapsible
-      className="group"
-      open={open}
-      onOpenChange={setOpen}
-      style={{ "--max-height": `${maxHeight}px` } as CSSProperties}
-    >
-      <CollapsibleContent
-        forceMount
-        className={cn(
-          "relative overflow-hidden group",
-          !open && isOverflowing && "max-h-(--max-height)",
-        )}
-      >
-        {!open && isOverflowing && <OverflowOverlay />}
-        <div ref={contentRef}>{children}</div>
-        {!open && isOverflowing && (
-          <CollapsibleTrigger
-            className="absolute inset-0 grid place-items-center z-10 cursor-pointer peer"
-            asChild
-          >
-            <div>
-              <Button variant="outline" className="hidden group-hover:flex">
-                <UnfoldVerticalIcon size={14} className="me-1.5" />
-                Click to expand
-              </Button>
-            </div>
-          </CollapsibleTrigger>
-        )}
-      </CollapsibleContent>
-      {isOverflowing && (
-        <div
-          className={cn(
-            "flex justify-center w-full py-2 bg-muted/50",
-            !open && "hidden",
-          )}
-        >
-          <CollapsibleTrigger asChild>
-            <Button variant="outline" size="sm">
-              Collapse
-              <FoldVerticalIcon size={14} className="ms-1.5" />
-            </Button>
-          </CollapsibleTrigger>
-        </div>
-      )}
-    </Collapsible>
-  );
-};
+import { Button } from "@lukoweb/apitogo/ui/Button.js";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@lukoweb/apitogo/ui/Collapsible.js";
+import { FoldVerticalIcon, UnfoldVerticalIcon } from "lucide-react";
+import { type CSSProperties, type ReactNode, useRef, useState } from "react";
+import { cn } from "../../util/cn.js";
+import useIsomorphicLayoutEffect from "../../util/useIsomorphicLayoutEffect.js";
+
+export const OverflowOverlay = () => (
+  <div className="absolute inset-0 bg-linear-to-b from-transparent to-zinc-50/60 dark:to-zinc-950/90 z-10 transition-all group-hover:to-transparent" />
+);
+
+export const CollapsibleCode = ({
+  children,
+  maxHeight = 250,
+}: {
+  children: ReactNode;
+  maxHeight?: number;
+}) => {
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const [open, setOpen] = useState(false);
+
+  useIsomorphicLayoutEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+
+    setIsOverflowing(el.scrollHeight > maxHeight);
+
+    const observer = new ResizeObserver(() => {
+      setIsOverflowing(el.scrollHeight > maxHeight);
+    });
+    observer.observe(el);
+
+    return () => observer.disconnect();
+  }, [maxHeight]);
+
+  return (
+    <Collapsible
+      className="group"
+      open={open}
+      onOpenChange={setOpen}
+      style={{ "--max-height": `${maxHeight}px` } as CSSProperties}
+    >
+      <CollapsibleContent
+        forceMount
+        className={cn(
+          "relative overflow-hidden group",
+          !open && isOverflowing && "max-h-(--max-height)",
+        )}
+      >
+        {!open && isOverflowing && <OverflowOverlay />}
+        <div ref={contentRef}>{children}</div>
+        {!open && isOverflowing && (
+          <CollapsibleTrigger
+            className="absolute inset-0 grid place-items-center z-10 cursor-pointer peer"
+            asChild
+          >
+            <div>
+              <Button variant="outline" className="hidden group-hover:flex">
+                <UnfoldVerticalIcon size={14} className="me-1.5" />
+                Click to expand
+              </Button>
+            </div>
+          </CollapsibleTrigger>
+        )}
+      </CollapsibleContent>
+      {isOverflowing && (
+        <div
+          className={cn(
+            "flex justify-center w-full py-2 bg-muted/50",
+            !open && "hidden",
+          )}
+        >
+          <CollapsibleTrigger asChild>
+            <Button variant="outline" size="sm">
+              Collapse
+              <FoldVerticalIcon size={14} className="ms-1.5" />
+            </Button>
+          </CollapsibleTrigger>
+        </div>
+      )}
+    </Collapsible>
+  );
+};

package/src/lib/plugins/openapi/DownloadSchemaButton.tsx

@@ -1,94 +1,94 @@
-import {
-  ChevronDownIcon,
-  CopyIcon,
-  DownloadIcon,
-  ExternalLinkIcon,
-} from "lucide-react";
-import type { MouseEventHandler } from "react";
-import { Button } from "@lukoweb/apitogo/components";
-import { ButtonGroup } from "@lukoweb/apitogo/ui/ButtonGroup.js";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@lukoweb/apitogo/ui/DropdownMenu.js";
-import { AiAssistantMenuItems } from "../../components/AiAssistantMenuItems.js";
-import { useZudoku } from "../../components/context/ZudokuContext.js";
-import { useCopyToClipboard } from "../../util/useCopyToClipboard.js";
-
-export const DownloadSchemaButton = ({
-  downloadUrl,
-}: {
-  downloadUrl: string;
-}) => {
-  const [, copyToClipboard] = useCopyToClipboard();
-  const { options } = useZudoku();
-
-  const handleDownload: MouseEventHandler<HTMLAnchorElement> = async (e) => {
-    const isExternal = downloadUrl.includes("://");
-
-    if (!isExternal) return;
-
-    e.preventDefault();
-    try {
-      const response = await fetch(downloadUrl);
-      if (!response.ok)
-        throw new Error(`Failed to fetch: ${response.statusText}`);
-
-      const blob = await response.blob();
-      const url = window.URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = downloadUrl.split("/").pop() || "schema.json";
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      window.URL.revokeObjectURL(url);
-    } catch (error) {
-      // biome-ignore lint/suspicious/noConsole: Logging error
-      console.error("Failed to download schema:", error);
-    }
-  };
-
-  return (
-    <ButtonGroup>
-      <Button variant="outline" asChild>
-        <a href={downloadUrl} download onClick={handleDownload}>
-          <DownloadIcon />
-          Download schema
-        </a>
-      </Button>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="outline" className="px-1.5">
-            <ChevronDownIcon size={14} />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <DropdownMenuItem asChild>
-            <a href={downloadUrl} target="_blank" rel="noopener noreferrer">
-              <ExternalLinkIcon size={14} />
-              Open in new tab
-            </a>
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            onClick={async () => {
-              const response = await fetch(downloadUrl);
-              const schema = await response.text();
-              copyToClipboard(schema);
-            }}
-          >
-            <CopyIcon size={14} />
-            Copy to clipboard
-          </DropdownMenuItem>
-          <AiAssistantMenuItems
-            aiAssistants={options.aiAssistants}
-            getPageUrl={() => new URL(downloadUrl, window.location.href).href}
-            type="openapi"
-          />
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </ButtonGroup>
-  );
-};
+import { Button } from "@lukoweb/apitogo/components";
+import { ButtonGroup } from "@lukoweb/apitogo/ui/ButtonGroup.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@lukoweb/apitogo/ui/DropdownMenu.js";
+import {
+  ChevronDownIcon,
+  CopyIcon,
+  DownloadIcon,
+  ExternalLinkIcon,
+} from "lucide-react";
+import type { MouseEventHandler } from "react";
+import { AiAssistantMenuItems } from "../../components/AiAssistantMenuItems.js";
+import { useZudoku } from "../../components/context/ZudokuContext.js";
+import { useCopyToClipboard } from "../../util/useCopyToClipboard.js";
+
+export const DownloadSchemaButton = ({
+  downloadUrl,
+}: {
+  downloadUrl: string;
+}) => {
+  const [, copyToClipboard] = useCopyToClipboard();
+  const { options } = useZudoku();
+
+  const handleDownload: MouseEventHandler<HTMLAnchorElement> = async (e) => {
+    const isExternal = downloadUrl.includes("://");
+
+    if (!isExternal) return;
+
+    e.preventDefault();
+    try {
+      const response = await fetch(downloadUrl);
+      if (!response.ok)
+        throw new Error(`Failed to fetch: ${response.statusText}`);
+
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = downloadUrl.split("/").pop() || "schema.json";
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      window.URL.revokeObjectURL(url);
+    } catch (error) {
+      // biome-ignore lint/suspicious/noConsole: Logging error
+      console.error("Failed to download schema:", error);
+    }
+  };
+
+  return (
+    <ButtonGroup>
+      <Button variant="outline" asChild>
+        <a href={downloadUrl} download onClick={handleDownload}>
+          <DownloadIcon />
+          Download schema
+        </a>
+      </Button>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" className="px-1.5">
+            <ChevronDownIcon size={14} />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem asChild>
+            <a href={downloadUrl} target="_blank" rel="noopener noreferrer">
+              <ExternalLinkIcon size={14} />
+              Open in new tab
+            </a>
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={async () => {
+              const response = await fetch(downloadUrl);
+              const schema = await response.text();
+              copyToClipboard(schema);
+            }}
+          >
+            <CopyIcon size={14} />
+            Copy to clipboard
+          </DropdownMenuItem>
+          <AiAssistantMenuItems
+            aiAssistants={options.aiAssistants}
+            getPageUrl={() => new URL(downloadUrl, window.location.href).href}
+            type="openapi"
+          />
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </ButtonGroup>
+  );
+};

package/src/lib/plugins/openapi/GeneratedExampleSidecarBox.tsx

@@ -1,52 +1,52 @@
-import { InfoIcon } from "lucide-react";
-import { SyntaxHighlight } from "@lukoweb/apitogo/ui/SyntaxHighlight.js";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@lukoweb/apitogo/ui/Tooltip.js";
-import { NonHighlightedCode } from "./components/NonHighlightedCode.js";
-import * as SidecarBox from "./SidecarBox.js";
-
-export const GeneratedExampleSidecarBox = ({
-  code,
-  isOnScreen,
-  shouldLazyHighlight,
-}: {
-  code: string;
-  isOnScreen: boolean;
-  shouldLazyHighlight?: boolean;
-}) => {
-  return (
-    <SidecarBox.Root>
-      <SidecarBox.Head className="text-xs flex justify-between items-center">
-        <div className="flex items-center gap-1.5">
-          <span className="font-medium">Example Request Body</span>
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <InfoIcon size={13} />
-              </TooltipTrigger>
-              <TooltipContent>
-                This example is auto-generated from the schema.
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        </div>
-      </SidecarBox.Head>
-      <SidecarBox.Body className="p-0">
-        {shouldLazyHighlight && !isOnScreen ? (
-          <NonHighlightedCode code={code} />
-        ) : (
-          <SyntaxHighlight
-            embedded
-            language="json"
-            code={code}
-            className="[--scrollbar-color:gray] rounded-none text-xs max-h-[200px]"
-          />
-        )}
-      </SidecarBox.Body>
-    </SidecarBox.Root>
-  );
-};
+import { SyntaxHighlight } from "@lukoweb/apitogo/ui/SyntaxHighlight.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@lukoweb/apitogo/ui/Tooltip.js";
+import { InfoIcon } from "lucide-react";
+import { NonHighlightedCode } from "./components/NonHighlightedCode.js";
+import * as SidecarBox from "./SidecarBox.js";
+
+export const GeneratedExampleSidecarBox = ({
+  code,
+  isOnScreen,
+  shouldLazyHighlight,
+}: {
+  code: string;
+  isOnScreen: boolean;
+  shouldLazyHighlight?: boolean;
+}) => {
+  return (
+    <SidecarBox.Root>
+      <SidecarBox.Head className="text-xs flex justify-between items-center">
+        <div className="flex items-center gap-1.5">
+          <span className="font-medium">Example Request Body</span>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <InfoIcon size={13} />
+              </TooltipTrigger>
+              <TooltipContent>
+                This example is auto-generated from the schema.
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </SidecarBox.Head>
+      <SidecarBox.Body className="p-0">
+        {shouldLazyHighlight && !isOnScreen ? (
+          <NonHighlightedCode code={code} />
+        ) : (
+          <SyntaxHighlight
+            embedded
+            language="json"
+            code={code}
+            className="[--scrollbar-color:gray] rounded-none text-xs max-h-[200px]"
+          />
+        )}
+      </SidecarBox.Body>
+    </SidecarBox.Root>
+  );
+};