zudoku 0.0.0-feat-bundled-types.9aa135e → 0.0.0-feat-openapi-docs-redesign.dab3fc6a

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

@@ -1,21 +1,63 @@
+import { ChevronsDownUpIcon, ChevronsUpDownIcon } from "lucide-react";
+import { Button } from "zudoku/components";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "zudoku/ui/Collapsible.js";
+import type { MediaTypeObject } from "./graphql/graphql.js";
 import * as SidecarBox from "./SidecarBox.js";
-import { type Content, SidecarExamples } from "./SidecarExamples.js";
+import { SidecarExamples } from "./SidecarExamples.js";
 
 export const RequestBodySidecarBox = ({
   content,
   onExampleChange,
+  isOnScreen,
+  shouldLazyHighlight,
+  selectedContentIndex,
+  selectedExampleIndex,
 }: {
-  content: Content;
-  onExampleChange?: (example: unknown) => void;
+  content: MediaTypeObject[];
+  onExampleChange?: (selected: {
+    contentTypeIndex: number;
+    exampleIndex: number;
+  }) => void;
+  isOnScreen: boolean;
+  shouldLazyHighlight?: boolean;
+  selectedContentIndex: number;
+  selectedExampleIndex: number;
 }) => {
   if (content.length === 0) return null;
 
   return (
-    <SidecarBox.Root>
-      <SidecarBox.Head className="text-xs flex justify-between items-center">
-        <span className="font-mono">Request Body Example</span>
-      </SidecarBox.Head>
-      <SidecarExamples content={content} onExampleChange={onExampleChange} />
-    </SidecarBox.Root>
+    <Collapsible className="group/collapsible" defaultOpen>
+      <SidecarBox.Root>
+        <SidecarBox.Head className="text-xs flex justify-between items-center">
+          <span className="flex items-center gap-1 font-medium">
+            <CollapsibleTrigger asChild>
+              <Button
+                variant="ghost"
+                className="size-fit px-1 py-1 -my-1"
+                aria-label="Toggle request body examples"
+              >
+                <ChevronsDownUpIcon className="size-[1em] group-data-[state=closed]/collapsible:hidden" />
+                <ChevronsUpDownIcon className="size-[1em] group-data-[state=open]/collapsible:hidden" />
+              </Button>
+            </CollapsibleTrigger>
+            Example Request Body
+          </span>
+        </SidecarBox.Head>
+        <CollapsibleContent>
+          <SidecarExamples
+            selectedContentIndex={selectedContentIndex}
+            selectedExampleIndex={selectedExampleIndex}
+            content={content}
+            onExampleChange={onExampleChange}
+            isOnScreen={isOnScreen}
+            shouldLazyHighlight={shouldLazyHighlight}
+          />
+        </CollapsibleContent>
+      </SidecarBox.Root>
+    </Collapsible>
   );
 };

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

@@ -1,49 +1,95 @@
-import * as Tabs from "@radix-ui/react-tabs";
-import { cn } from "../../util/cn.js";
+import { ChevronsDownUpIcon, ChevronsUpDownIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button } from "zudoku/components";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "zudoku/ui/Collapsible.js";
+import { NativeSelect, NativeSelectOption } from "zudoku/ui/NativeSelect.js";
+import type { ResponseItem } from "./graphql/graphql.js";
 import * as SidecarBox from "./SidecarBox.js";
 import { SidecarExamples } from "./SidecarExamples.js";
-import type { ResponseItem } from "./graphql/graphql.js";
 
 export const ResponsesSidecarBox = ({
   responses,
   selectedResponse,
-  onSelectResponse,
+  isOnScreen,
+  shouldLazyHighlight,
 }: {
   responses: ResponseItem[];
   selectedResponse?: string;
-  onSelectResponse: (response: string) => void;
+  isOnScreen: boolean;
+  shouldLazyHighlight?: boolean;
 }) => {
+  const [internalSelectedResponse, setInternalSelectedResponse] = useState(
+    selectedResponse ?? responses[0]?.statusCode,
+  );
+  const [selectedContentIndex, setSelectedContentIndex] = useState(0);
+  const [selectedExampleIndex, setSelectedExampleIndex] = useState(0);
+
+  useEffect(() => {
+    if (!selectedResponse) return;
+
+    setInternalSelectedResponse(selectedResponse);
+  }, [selectedResponse]);
+
+  useEffect(() => {
+    if (!internalSelectedResponse) return;
+
+    setSelectedContentIndex(0);
+    setSelectedExampleIndex(0);
+  }, [internalSelectedResponse]);
+
   return (
-    <SidecarBox.Root>
-      <Tabs.Root
-        defaultValue={responses[0]?.statusCode}
-        value={selectedResponse}
-        onValueChange={(value) => onSelectResponse(value)}
-      >
-        <SidecarBox.Head className="text-xs flex flex-col gap-2 pb-0">
-          <span className="font-mono">Example Responses</span>
-          <Tabs.List className="flex gap-2">
+    <Collapsible className="group/collapsible" defaultOpen>
+      <SidecarBox.Root>
+        <SidecarBox.Head className="text-xs flex justify-between items-center">
+          <div className="flex items-center gap-1 font-medium shrink-0">
+            <CollapsibleTrigger asChild>
+              <Button
+                variant="ghost"
+                className="size-fit px-1 py-1 -my-1"
+                aria-label="Toggle response examples"
+              >
+                <ChevronsDownUpIcon className="size-[1em] group-data-[state=closed]/collapsible:hidden" />
+                <ChevronsUpDownIcon className="size-[1em] group-data-[state=open]/collapsible:hidden" />
+              </Button>
+            </CollapsibleTrigger>
+            Example Responses
+          </div>
+          <NativeSelect
+            className="text-xs h-fit py-1 -my-1 bg-background"
+            value={internalSelectedResponse}
+            onChange={(e) => setInternalSelectedResponse(e.target.value)}
+          >
             {responses.map((response) => (
-              <Tabs.Trigger
+              <NativeSelectOption
                 key={response.statusCode}
                 value={response.statusCode}
-                className={cn(
-                  "text-xs font-mono px-1.5 py-1 pb-px translate-y-px border-b-2 border-transparent rounded-t cursor-pointer",
-                  "data-[state=active]:text-primary data-[state=active]:dark:text-inherit data-[state=active]:border-primary",
-                  "hover:border-accent-foreground/25",
-                )}
               >
                 {response.statusCode}
-              </Tabs.Trigger>
+              </NativeSelectOption>
             ))}
-          </Tabs.List>
+          </NativeSelect>
         </SidecarBox.Head>
-        {responses.map((response) => (
-          <Tabs.Content key={response.statusCode} value={response.statusCode}>
-            <SidecarExamples content={response.content ?? []} />
-          </Tabs.Content>
-        ))}
-      </Tabs.Root>
-    </SidecarBox.Root>
+        <CollapsibleContent>
+          <SidecarExamples
+            selectedContentIndex={selectedContentIndex}
+            selectedExampleIndex={selectedExampleIndex}
+            onExampleChange={(selected) => {
+              setSelectedContentIndex(selected.contentTypeIndex);
+              setSelectedExampleIndex(selected.exampleIndex);
+            }}
+            content={
+              responses.find((r) => r.statusCode === internalSelectedResponse)
+                ?.content ?? []
+            }
+            isOnScreen={isOnScreen}
+            shouldLazyHighlight={shouldLazyHighlight}
+          />
+        </CollapsibleContent>
+      </SidecarBox.Root>
+    </Collapsible>
   );
 };

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

@@ -14,9 +14,8 @@ import {
 } from "zudoku/ui/Collapsible.js";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
 import { Heading } from "../../components/Heading.js";
-import { Markdown, ProseClasses } from "../../components/Markdown.js";
+import { Markdown } from "../../components/Markdown.js";
 import { Toc } from "../../components/navigation/Toc.js";
-import { cn } from "../../util/cn.js";
 import { useCreateQuery } from "./client/useCreateQuery.js";
 import { useOasConfig } from "./context.js";
 import { graphql } from "./graphql/gql.js";
@@ -83,7 +82,7 @@ export function SchemaList() {
               <Heading
                 level={1}
                 id="schemas"
-                registerSidebarAnchor
+                registerNavigationAnchor
                 className="mb-0"
               >
                 Schemas
@@ -110,14 +109,9 @@ export function SchemaList() {
           </div>
           {data.schema.description && (
             <CollapsibleContent className="CollapsibleContent">
-              <div
-                className={cn(
-                  ProseClasses,
-                  "pt-4 max-w-full prose-img:max-w-prose",
-                )}
-              >
+              <div className="mt-4 max-w-full border rounded-sm bg-muted/25">
                 <Markdown
-                  className="border rounded-sm bg-muted/25 border-border px-2.5 md:px-4"
+                  className="max-w-full prose-img:max-w-prose border-border p-3 lg:p-5"
                   content={data.schema.description}
                 />
               </div>
@@ -129,7 +123,7 @@ export function SchemaList() {
           {schemas.map((schema) => (
             <Collapsible key={schema.name} className="group" defaultOpen>
               <Heading
-                registerSidebarAnchor
+                registerNavigationAnchor
                 level={2}
                 className="flex items-center gap-1 justify-between w-fit"
                 id={slugify(schema.name)}

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

@@ -1,25 +1,23 @@
-import { useSuspenseQuery } from "@tanstack/react-query";
 import { useMemo, useState, useTransition } from "react";
 import { useSearchParams } from "react-router";
 import { useZudoku } from "zudoku/hooks";
+import { Badge } from "zudoku/ui/Badge.js";
+import { NativeSelect, NativeSelectOption } from "zudoku/ui/NativeSelect.js";
+import { SyntaxHighlight } from "zudoku/ui/SyntaxHighlight.js";
 import { useAuthState } from "../../authentication/state.js";
 import { PathRenderer } from "../../components/PathRenderer.js";
-import type { SchemaObject } from "../../oas/parser/index.js";
-import { SyntaxHighlight } from "../../ui/SyntaxHighlight.js";
 import { cn } from "../../util/cn.js";
 import { useOnScreen } from "../../util/useOnScreen.js";
-import { useCreateQuery } from "./client/useCreateQuery.js";
-import { CollapsibleCode } from "./CollapsibleCode.js";
 import { ColorizedParam } from "./ColorizedParam.js";
+import { NonHighlightedCode } from "./components/NonHighlightedCode.js";
 import { useOasConfig } from "./context.js";
+import { GeneratedExampleSidecarBox } from "./GeneratedExampleSidecarBox.js";
+import type { OperationsFragmentFragment } from "./graphql/graphql.js";
 import { graphql } from "./graphql/index.js";
-import type { OperationListItemResult } from "./OperationList.js";
 import { PlaygroundDialogWrapper } from "./PlaygroundDialogWrapper.js";
 import { RequestBodySidecarBox } from "./RequestBodySidecarBox.js";
 import { ResponsesSidecarBox } from "./ResponsesSidecarBox.js";
 import * as SidecarBox from "./SidecarBox.js";
-import { SimpleSelect } from "./SimpleSelect.js";
-import { useSelectedServer } from "./state.js";
 import { createHttpSnippet, getConverted } from "./util/createHttpSnippet.js";
 import { generateSchemaExample } from "./util/generateSchemaExample.js";
 import { methodForColor } from "./util/methodToColor.js";
@@ -52,29 +50,34 @@ const EXAMPLE_LANGUAGES = [
 export const Sidecar = ({
   operation,
   selectedResponse,
-  onSelectResponse,
+  globalSelectedServer,
+  shouldLazyHighlight,
 }: {
-  operation: OperationListItemResult;
+  operation: OperationsFragmentFragment;
   selectedResponse?: string;
-  onSelectResponse: (response: string) => void;
+  globalSelectedServer?: string;
+  shouldLazyHighlight?: boolean;
 }) => {
-  const { input, type, options } = useOasConfig();
+  const { options } = useOasConfig();
   const auth = useAuthState();
-  const query = useCreateQuery(GetServerQuery, { input, type });
-  const result = useSuspenseQuery(query);
   const context = useZudoku();
 
   const methodTextColor = methodForColor(operation.method);
 
   const [searchParams, setSearchParams] = useSearchParams();
   const [, startTransition] = useTransition();
-  const [selectedExample, setSelectedExample] = useState<unknown>();
 
-  const selectedLang =
+  const supportedLanguages = options?.supportedLanguages ?? EXAMPLE_LANGUAGES;
+
+  const preferredLang =
     searchParams.get("lang") ?? options?.examplesLanguage ?? "shell";
 
-  const requestBodyContent = operation.requestBody?.content;
+  const selectedLang =
+    supportedLanguages.find((lang) => lang.value === preferredLang)?.value ??
+    supportedLanguages.at(0)?.value ??
+    "shell";
 
+  const requestBodyContent = operation.requestBody?.content;
   const transformedRequestBodyContent =
     requestBodyContent && options?.transformExamples
       ? options.transformExamples({
@@ -86,6 +89,27 @@ export const Sidecar = ({
         })
       : requestBodyContent;
 
+  const [selectedRequestExample, setSelectedRequestExample] = useState<{
+    contentTypeIndex: number;
+    exampleIndex: number;
+  }>({
+    contentTypeIndex: 0,
+    exampleIndex: 0,
+  });
+
+  const selectedContent = transformedRequestBodyContent?.at(
+    selectedRequestExample.contentTypeIndex,
+  );
+  const currentExample = selectedContent?.examples?.at(
+    selectedRequestExample.exampleIndex,
+  );
+
+  const currentExampleCode = currentExample
+    ? (currentExample?.value ?? currentExample)
+    : selectedContent?.schema
+      ? generateSchemaExample(selectedContent?.schema)
+      : undefined;
+
   const path = (
     <PathRenderer
       path={operation.path}
@@ -93,6 +117,7 @@ export const Sidecar = ({
         <ColorizedParam
           name={name}
           backgroundOpacity="0"
+          className="py-px px-0.5"
           // same as in `ParameterListItem`
           slug={`${operation.slug}-${name}`}
         >
@@ -102,36 +127,45 @@ export const Sidecar = ({
     />
   );
 
-  const { selectedServer } = useSelectedServer(result.data.schema.servers);
+  // Manual server selection takes precedence over the server hierarchy.
+  // If no manual selection, fall back to operation's first server (already respects operation > path > global hierarchy)
+  const selectedServer =
+    globalSelectedServer || operation.servers.at(0)?.url || "";
 
-  const code = useMemo(() => {
-    const exampleBody =
-      selectedExample ??
-      (transformedRequestBodyContent?.[0]?.schema
-        ? generateSchemaExample(
-            transformedRequestBodyContent[0].schema as SchemaObject,
-          )
-        : undefined);
+  const httpSnippetCode = useMemo<string | undefined>(() => {
+    const converted = options?.generateCodeSnippet?.({
+      selectedLang,
+      selectedServer,
+      context,
+      operation,
+      example: currentExampleCode,
+      auth,
+    });
+
+    if (converted) return converted;
 
     const snippet = createHttpSnippet({
       operation,
       selectedServer,
-      exampleBody: exampleBody
+      exampleBody: currentExampleCode
         ? {
             mimeType: "application/json",
-            text: JSON.stringify(exampleBody, null, 2),
+            text: JSON.stringify(currentExampleCode, null, 2),
           }
         : { mimeType: "application/json" },
     });
 
     return getConverted(snippet, selectedLang);
   }, [
-    selectedExample,
-    transformedRequestBodyContent,
+    currentExampleCode,
     operation,
     selectedServer,
     selectedLang,
+    options,
+    auth,
+    context,
   ]);
+
   const [ref, isOnScreen] = useOnScreen({ rootMargin: "200px 0px 200px 0px" });
 
   const showPlayground =
@@ -142,45 +176,34 @@ export const Sidecar = ({
         operation.extensions["x-zudoku-playground-enabled"] === undefined &&
         !options?.disablePlayground));
 
+  const hasResponseExamples = operation.responses.some((response) =>
+    response.content?.some((content) => (content.examples?.length ?? 0) > 0),
+  );
+
   return (
     <aside
       ref={ref}
-      className="flex flex-col overflow-hidden sticky top-(--scroll-padding) gap-4"
+      className="flex flex-col sticky top-(--scroll-padding) gap-4"
       data-pagefind-ignore="all"
     >
       <SidecarBox.Root>
-        <SidecarBox.Head className="flex justify-between items-center flex-nowrap py-2.5 gap-2 text-xs">
-          <span className="font-mono break-words leading-6">
-            <span className={cn("font-semibold", methodTextColor)}>
-              {operation.method.toUpperCase()}
+        <SidecarBox.Head className="py-1.5">
+          <div className="flex items-center flex-wrap gap-2 justify-between w-full">
+            <span className="font-mono wrap-break-word leading-6 space-x-1">
+              <Badge
+                variant="outline"
+                className={cn(
+                  methodTextColor,
+                  "px-1.5 rounded-md border-none bg-current/7 dark:bg-current/15",
+                )}
+              >
+                {operation.method.toUpperCase()}
+              </Badge>
+              {path}
             </span>
-            &nbsp;
-            {path}
-          </span>
-          {showPlayground && (
-            <PlaygroundDialogWrapper
-              servers={result.data.schema.servers.map((server) => server.url)}
-              operation={operation}
-              examples={requestBodyContent ?? undefined}
-            />
-          )}
-        </SidecarBox.Head>
-        {isOnScreen && (
-          <>
-            <SidecarBox.Body className="p-0">
-              <CollapsibleCode>
-                <SyntaxHighlight
-                  language={selectedLang}
-                  noBackground
-                  className="[--scrollbar-color:gray] rounded-none text-xs max-h-[500px] p-2"
-                  code={code!}
-                />
-              </CollapsibleCode>
-            </SidecarBox.Body>
-            <SidecarBox.Footer className="flex items-center text-xs gap-2 justify-end py-2.5">
-              <span>Show example in</span>
-              <SimpleSelect
-                className="self-start max-w-[150px]"
+            <div className="flex items-center gap-1">
+              <NativeSelect
+                className="py-0.5 h-fit max-w-32 truncate bg-background"
                 value={selectedLang}
                 onChange={(e) => {
                   startTransition(() => {
@@ -190,22 +213,65 @@ export const Sidecar = ({
                     });
                   });
                 }}
-                options={EXAMPLE_LANGUAGES}
-              />
-            </SidecarBox.Footer>
-          </>
-        )}
+              >
+                {supportedLanguages.map((language) => (
+                  <NativeSelectOption
+                    key={language.value}
+                    value={language.value}
+                  >
+                    {language.label}
+                  </NativeSelectOption>
+                ))}
+              </NativeSelect>
+              {showPlayground && (
+                <PlaygroundDialogWrapper
+                  servers={operation.servers.map((server) => server.url)}
+                  operation={operation}
+                  examples={requestBodyContent ?? undefined}
+                />
+              )}
+            </div>
+          </div>
+        </SidecarBox.Head>
+        <SidecarBox.Body>
+          {shouldLazyHighlight && !isOnScreen ? (
+            <NonHighlightedCode code={httpSnippetCode ?? ""} />
+          ) : (
+            <SyntaxHighlight
+              embedded
+              language={selectedLang}
+              className="[--scrollbar-color:gray] rounded-none text-xs max-h-[200px]"
+              // biome-ignore lint/style/noNonNullAssertion: code is guaranteed to be defined
+              code={httpSnippetCode!}
+            />
+          )}
+        </SidecarBox.Body>
       </SidecarBox.Root>
-      {isOnScreen && transformedRequestBodyContent && (
+
+      {transformedRequestBodyContent && currentExample ? (
         <RequestBodySidecarBox
           content={transformedRequestBodyContent}
-          onExampleChange={setSelectedExample}
+          onExampleChange={(selected) => {
+            setSelectedRequestExample(selected);
+          }}
+          selectedContentIndex={selectedRequestExample.contentTypeIndex}
+          selectedExampleIndex={selectedRequestExample.exampleIndex}
+          isOnScreen={isOnScreen}
+          shouldLazyHighlight={shouldLazyHighlight}
         />
-      )}
-      {isOnScreen && operation.responses.length > 0 && (
+      ) : transformedRequestBodyContent && currentExampleCode ? (
+        <GeneratedExampleSidecarBox
+          isOnScreen={isOnScreen}
+          shouldLazyHighlight={shouldLazyHighlight}
+          code={JSON.stringify(currentExampleCode, null, 2)}
+        />
+      ) : null}
+
+      {hasResponseExamples && (
         <ResponsesSidecarBox
+          isOnScreen={isOnScreen}
+          shouldLazyHighlight={shouldLazyHighlight}
           selectedResponse={selectedResponse}
-          onSelectResponse={onSelectResponse}
           responses={operation.responses.map((response) => ({
             ...response,
             content:

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

@@ -7,7 +7,12 @@ type BaseComponentProps<T = unknown> = PropsWithChildren<
 
 export const Root = ({ children, className }: BaseComponentProps) => (
   <div
-    className={cn("rounded-xl overflow-hidden border border-border", className)}
+    data-slot="sidecar-box-root"
+    className={cn(
+      "relative text-xs flex min-w-0 flex-col rounded-xl border bg-muted/50 bg-clip-padding",
+      "before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_2px_1px_--theme(--color-black/4%)] after:pointer-events-none after:absolute after:-inset-[5px] after:-z-1 after:rounded-[calc(var(--radius-xl)+4px)] after:border after:border-border/50 after:bg-clip-padding **:data-[slot=particle-wrapper]:w-full **:data-[slot=particle-wrapper]:max-w-64 lg:col-span-1 dark:after:bg-background/72",
+      className,
+    )}
   >
     {children}
   </div>
@@ -15,8 +20,9 @@ export const Root = ({ children, className }: BaseComponentProps) => (
 
 export const Head = ({ children, className }: BaseComponentProps) => (
   <div
+    data-slot="sidecar-box-head"
     className={cn(
-      "border-b bg-muted dark:bg-transparent text-card-foreground p-3 py-2.5",
+      "flex items-center gap-3 rounded-b-xl p-2.5 data-[slot=head]:rounded-b-none",
       className,
     )}
   >
@@ -25,11 +31,27 @@ export const Head = ({ children, className }: BaseComponentProps) => (
 );
 
 export const Body = ({ children, className }: BaseComponentProps) => (
-  <div className={cn("bg-card overflow-auto p-2", className)}>{children}</div>
+  <div
+    data-slot="sidecar-box-body"
+    className={cn(
+      "overflow-auto -m-px flex min-w-0 flex-1 flex-col overflow-x-auto rounded-t-xl border bg-background",
+      "rounded-b last:rounded-b-xl",
+      "before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] dark:before:shadow-[0_-1px_--theme(--color-white/8%)]",
+      className,
+    )}
+  >
+    {children}
+  </div>
 );
 
 export const Footer = ({ children, className }: BaseComponentProps) => (
-  <div className={cn("border-t bg-muted dark:bg-transparent p-3", className)}>
+  <div
+    data-slot="sidecar-box-footer"
+    className={cn(
+      "p-2 rounded-b-xl data-[slot=sidecar-box-footer]:rounded-b-none",
+      className,
+    )}
+  >
     {children}
   </div>
 );