@mehdad67/apitogo 0.1.24

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

@@ -0,0 +1,88 @@
+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/ColorizedParam.tsx

@@ -0,0 +1,115 @@
+import { useTheme } from "next-themes";
+import { type CSSProperties, type ReactNode, useEffect, useRef } from "react";
+import { cn } from "../../util/cn.js";
+import { pastellize } from "../../util/pastellize.js";
+
+export const DATA_ATTR = "data-linked-param";
+
+export const usePastellizedColor = (name: string) => {
+  const { resolvedTheme } = useTheme();
+
+  return {
+    text: pastellize(
+      name,
+      resolvedTheme === "light" ? { saturation: 95, lightness: 38 } : {},
+    ),
+    background: pastellize(
+      name,
+      resolvedTheme === "light" ? { saturation: 85, lightness: 40 } : {},
+    ),
+  };
+};
+
+export const useParamColor = (name: string) => {
+  const normalized = name.replace(/[{}]/g, "");
+  return usePastellizedColor(normalized);
+};
+
+export const ColorizedParam = ({
+  name,
+  className,
+  slug,
+  title,
+  children,
+  onClick,
+}: {
+  name: string;
+  className?: string;
+  backgroundOpacity?: string;
+  borderOpacity?: string;
+  slug?: string;
+  children?: ReactNode;
+  title?: string;
+  onClick?: () => void;
+}) => {
+  const ref = useRef<HTMLSpanElement>(null);
+  const normalizedSlug = slug?.replace(/[{}]/g, "");
+  const normalized = name.replace(/[{}]/g, "");
+  const { text, background } = usePastellizedColor(normalized);
+
+  const textColor = `hsl(${text} / 100%)`;
+  const backgroundColor = `hsl(${background} / 10%)`;
+  const borderColor = `hsl(${background} / 50%)`;
+
+  useEffect(() => {
+    if (!normalizedSlug) return;
+    if (!ref.current) return;
+
+    const onMouseEnter = () => {
+      document
+        .querySelectorAll(`[${DATA_ATTR}="${normalizedSlug}"]`)
+        .forEach((el) => {
+          if (el instanceof HTMLElement) {
+            el.dataset.active = "true";
+          }
+        });
+    };
+    const onMouseLeave = () => {
+      document
+        .querySelectorAll(`[${DATA_ATTR}="${normalizedSlug}"]`)
+        .forEach((el) => {
+          if (el instanceof HTMLElement) {
+            el.dataset.active = "false";
+          }
+        });
+    };
+
+    const el = ref.current;
+
+    el.addEventListener("mouseenter", onMouseEnter);
+    el.addEventListener("mouseleave", onMouseLeave);
+
+    return () => {
+      el.removeEventListener("mouseenter", onMouseEnter);
+      el.removeEventListener("mouseleave", onMouseLeave);
+    };
+  }, [normalizedSlug]);
+
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: Just passing props through
+    // biome-ignore lint/a11y/useKeyWithClickEvents: Just passing props through
+    <span
+      {...{ [DATA_ATTR]: normalizedSlug }}
+      className={cn(
+        // This may not contain (inline-)flex or (inline-)block otherwise it breaks the browser's full text search
+        "relative transition-all duration-100 rounded-lg",
+        "border border-(--border-color) p-0.5 text-(--param-color) bg-(--background-color)",
+        "data-[active=true]:border-(--param-color) data-[active=true]:shadow-sm data-[active=true]:bottom-px",
+        className,
+      )}
+      title={title}
+      suppressHydrationWarning
+      ref={ref}
+      onClick={onClick}
+      style={
+        {
+          "--param-color": textColor,
+          "--border-color": borderColor,
+          "--background-color": backgroundColor,
+        } as CSSProperties
+      }
+    >
+      {children ?? name}
+    </span>
+  );
+};

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

@@ -0,0 +1,94 @@
+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/Endpoint.tsx

@@ -0,0 +1,85 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { useState, useTransition } from "react";
+import { InlineCode } from "../../components/InlineCode.js";
+import { Button } from "../../ui/Button.js";
+import { useCreateQuery } from "./client/useCreateQuery.js";
+import { useOasConfig } from "./context.js";
+import { graphql } from "./graphql/index.js";
+import { SimpleSelect } from "./SimpleSelect.js";
+import { useSelectedServer } from "./state.js";
+
+const ServersQuery = graphql(/* GraphQL */ `
+  query ServersQuery($input: JSON!, $type: SchemaType!) {
+    schema(input: $input, type: $type) {
+      url
+      servers {
+        url
+      }
+    }
+  }
+`);
+
+const CopyButton = ({ url }: { url: string }) => {
+  const [isCopied, setIsCopied] = useState(false);
+
+  return (
+    <Button
+      onClick={() => {
+        void navigator.clipboard.writeText(url).then(() => {
+          setIsCopied(true);
+          setTimeout(() => setIsCopied(false), 2000);
+        });
+      }}
+      variant="ghost"
+      size="icon-xs"
+    >
+      {isCopied ? (
+        <CheckIcon className="text-green-600" size={14} />
+      ) : (
+        <CopyIcon size={14} strokeWidth={1.3} />
+      )}
+    </Button>
+  );
+};
+
+export const Endpoint = () => {
+  const { input, type } = useOasConfig();
+  const query = useCreateQuery(ServersQuery, { input, type });
+  const result = useSuspenseQuery(query);
+  const [, startTransition] = useTransition();
+  const { selectedServer, setSelectedServer } = useSelectedServer(
+    result.data.schema.servers,
+  );
+
+  const { servers } = result.data.schema;
+  const firstServer = servers.at(0);
+
+  if (!firstServer) return null;
+
+  return (
+    <div className="flex items-center gap-1.5 flex-nowrap">
+      <span className="font-medium text-sm">Endpoint</span>
+      {servers.length > 1 ? (
+        <SimpleSelect
+          className="font-mono text-xs border-input bg-transparent dark:bg-input/30 dark:hover:bg-input/50 py-1.5 max-w-[450px] truncate"
+          onChange={(e) =>
+            startTransition(() => setSelectedServer(e.target.value))
+          }
+          value={selectedServer}
+          showChevrons={servers.length > 1}
+          options={servers.map((server) => ({
+            value: server.url,
+            label: server.url,
+          }))}
+        />
+      ) : (
+        <InlineCode className="text-xs px-2 py-1.5">
+          {firstServer.url}
+        </InlineCode>
+      )}
+
+      <CopyButton url={servers.length > 1 ? selectedServer : firstServer.url} />
+    </div>
+  );
+};

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

@@ -0,0 +1,52 @@
+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>
+  );
+};