zudoku 0.64.2 → 0.65.0

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

@@ -4,9 +4,10 @@ import { useState } from "react";
 import { Markdown } from "../../components/Markdown.js";
 import type { SchemaObject } from "../../oas/graphql/index.js";
 import { Button } from "../../ui/Button.js";
+import { Item, ItemActions, ItemContent, ItemTitle } from "../../ui/Item.js";
+import { cn } from "../../util/cn.js";
 import { ColorizedParam } from "./ColorizedParam.js";
 import { EnumValues } from "./components/EnumValues.js";
-import { SelectOnClick } from "./components/SelectOnClick.js";
 import type { ParameterItem } from "./graphql/graphql.js";
 import type { ParameterGroup } from "./OperationListItem.js";
 import { ParamInfos } from "./ParamInfos.js";
@@ -35,75 +36,125 @@ export const ParameterListItem = ({
   const paramSchema = getParameterSchema(parameter);
   const [isOpen, setIsOpen] = useState(false);
 
+  const isCollapsible =
+    paramSchema.type === "object" ||
+    (isArrayType(paramSchema) &&
+      "items" in paramSchema &&
+      paramSchema.items?.type === "object");
+
+  const shouldRenderDescription = Boolean(
+    parameter.description ||
+      paramSchema.description ||
+      (paramSchema.type === "array" && paramSchema.items?.enum) ||
+      paramSchema.enum ||
+      paramSchema.example !== undefined ||
+      paramSchema.default !== undefined,
+  );
+
   return (
-    <li className="p-4 bg-border/20 text-sm flex flex-col gap-1.5">
-      <div className="flex items-center gap-2">
-        <SelectOnClick asChild>
-          <code>
-            {group === "path" ? (
-              <ColorizedParam
-                name={parameter.name}
-                backgroundOpacity="15%"
-                className="px-2"
-                slug={`${id}-${parameter.name}`}
+    <Item>
+      <ItemContent className="gap-y-2">
+        <div>
+          <ItemTitle className="inline me-2">
+            {isCollapsible ? (
+              <button
+                onClick={() => setIsOpen(!isOpen)}
+                type="button"
+                className="hover:underline"
+              >
+                <code>
+                  {group === "path" ? (
+                    <ColorizedParam
+                      name={parameter.name}
+                      backgroundOpacity="15%"
+                      className="px-2"
+                      slug={`${id}-${parameter.name}`}
+                    />
+                  ) : (
+                    parameter.name
+                  )}
+                </code>
+              </button>
+            ) : (
+              <code>
+                {group === "path" ? (
+                  <ColorizedParam
+                    name={parameter.name}
+                    backgroundOpacity="15%"
+                    className="px-2"
+                    slug={`${id}-${parameter.name}`}
+                  />
+                ) : (
+                  parameter.name
+                )}
+              </code>
+            )}
+          </ItemTitle>
+          <ParamInfos
+            className="inline"
+            schema={paramSchema}
+            extraItems={[
+              parameter.required && (
+                <span className="text-primary">required</span>
+              ),
+              parameter.style && `style: ${parameter.style}`,
+              parameter.explode && `explode: ${parameter.explode}`,
+            ]}
+          />
+        </div>
+        {shouldRenderDescription && (
+          <div className="flex flex-col gap-1.5">
+            {parameter.description && (
+              <Markdown content={parameter.description} className="prose-sm" />
+            )}
+            {paramSchema.description && (
+              <Markdown
+                content={paramSchema.description}
+                className="prose-sm"
               />
+            )}
+            {paramSchema.type === "array" && paramSchema.items?.enum ? (
+              <EnumValues values={paramSchema.items.enum} />
             ) : (
-              parameter.name
+              paramSchema.enum && <EnumValues values={paramSchema.enum} />
             )}
-          </code>
-        </SelectOnClick>
-        <ParamInfos
-          schema={paramSchema}
-          extraItems={[
-            parameter.required && (
-              <span className="text-primary">required</span>
-            ),
-            parameter.style && `style: ${parameter.style}`,
-            parameter.explode && `explode: ${parameter.explode}`,
-          ]}
-        />
-      </div>
-      {parameter.description && (
-        <Markdown
-          content={parameter.description}
-          className="text-sm prose prose-p:my-1 prose-code:whitespace-pre-line"
-        />
-      )}
-      {paramSchema.description && (
-        <Markdown
-          content={paramSchema.description}
-          className="text-sm prose-p:my-1 prose-code:whitespace-pre-line"
-        />
-      )}
-      {paramSchema.type === "array" && paramSchema.items.enum ? (
-        <EnumValues values={paramSchema.items.enum} />
-      ) : (
-        paramSchema.enum && <EnumValues values={paramSchema.enum} />
+            <SchemaExampleAndDefault schema={paramSchema} />
+          </div>
+        )}
+      </ItemContent>
+
+      {isCollapsible && (
+        <ItemActions className="self-start">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="rounded-full"
+            onClick={() => setIsOpen(!isOpen)}
+            aria-label="Toggle parameter"
+          >
+            {isOpen ? <MinusIcon size={16} /> : <PlusIcon size={16} />}
+          </Button>
+        </ItemActions>
       )}
-      <SchemaExampleAndDefault schema={paramSchema} />
-      {(paramSchema.type === "object" || isArrayType(paramSchema)) && (
+
+      {isCollapsible && (
         <Collapsible.Root
           defaultOpen={false}
-          onOpenChange={setIsOpen}
           open={isOpen}
+          onOpenChange={setIsOpen}
+          className={cn("w-full", !isOpen && "contents")}
         >
-          <Collapsible.Trigger asChild>
-            <Button variant="expand" size="sm">
-              {isOpen ? <MinusIcon size={12} /> : <PlusIcon size={12} />}
-              {isOpen ? "Hide properties" : "Show properties"}
-            </Button>
-          </Collapsible.Trigger>
-          <Collapsible.Content>
-            <div className="mt-2">
+          <Collapsible.Content asChild>
+            <ItemContent>
               <SchemaView
                 schema={
                   "items" in paramSchema ? paramSchema.items : paramSchema
                 }
               />
-            </div>
+            </ItemContent>
           </Collapsible.Content>
         </Collapsible.Root>
       )}
-    </li>
+    </Item>
   );
 };

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

@@ -1,3 +1,10 @@
+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 { SidecarExamples } from "./SidecarExamples.js";
@@ -23,18 +30,34 @@ export const RequestBodySidecarBox = ({
   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
-        selectedContentIndex={selectedContentIndex}
-        selectedExampleIndex={selectedExampleIndex}
-        content={content}
-        onExampleChange={onExampleChange}
-        isOnScreen={isOnScreen}
-        shouldLazyHighlight={shouldLazyHighlight}
-      />
-    </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,6 +1,12 @@
-import * as Tabs from "@radix-ui/react-tabs";
+import { ChevronsDownUpIcon, ChevronsUpDownIcon } from "lucide-react";
 import { useEffect, useState } from "react";
-import { cn } from "../../util/cn.js";
+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";
@@ -8,67 +14,84 @@ import { SidecarExamples } from "./SidecarExamples.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);
-  }, [selectedResponse]);
+  }, [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">
-            {responses.map((response) => (
-              <Tabs.Trigger
-                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",
-                )}
+    <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"
               >
-                {response.statusCode}
-              </Tabs.Trigger>
-            ))}
-          </Tabs.List>
+                <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>
+          <div className="group-data-[state=closed]/collapsible:hidden">
+            <NativeSelect
+              className="text-xs h-fit py-1 -my-1 bg-background"
+              value={internalSelectedResponse}
+              onChange={(e) => setInternalSelectedResponse(e.target.value)}
+            >
+              {responses.map((response) => (
+                <NativeSelectOption
+                  key={response.statusCode}
+                  value={response.statusCode}
+                >
+                  {response.statusCode}
+                </NativeSelectOption>
+              ))}
+            </NativeSelect>
+          </div>
         </SidecarBox.Head>
-        {responses.map((response) => (
-          <Tabs.Content key={response.statusCode} value={response.statusCode}>
-            <SidecarExamples
-              selectedContentIndex={selectedContentIndex}
-              selectedExampleIndex={selectedExampleIndex}
-              onExampleChange={(selected) => {
-                setSelectedContentIndex(selected.contentTypeIndex);
-                setSelectedExampleIndex(selected.exampleIndex);
-              }}
-              content={response.content ?? []}
-              isOnScreen={isOnScreen}
-              shouldLazyHighlight={shouldLazyHighlight}
-            />
-          </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/Sidecar.tsx

@@ -1,6 +1,8 @@
 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";
@@ -16,7 +18,6 @@ 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 { createHttpSnippet, getConverted } from "./util/createHttpSnippet.js";
 import { generateSchemaExample } from "./util/generateSchemaExample.js";
 import { methodForColor } from "./util/methodToColor.js";
@@ -49,13 +50,11 @@ const EXAMPLE_LANGUAGES = [
 export const Sidecar = ({
   operation,
   selectedResponse,
-  onSelectResponse,
   globalSelectedServer,
   shouldLazyHighlight,
 }: {
   operation: OperationsFragmentFragment;
   selectedResponse?: string;
-  onSelectResponse: (response: string) => void;
   globalSelectedServer?: string;
   shouldLazyHighlight?: boolean;
 }) => {
@@ -68,6 +67,16 @@ export const Sidecar = ({
   const [searchParams, setSearchParams] = useSearchParams();
   const [, startTransition] = useTransition();
 
+  const supportedLanguages = options?.supportedLanguages ?? EXAMPLE_LANGUAGES;
+
+  const preferredLang =
+    searchParams.get("lang") ?? options?.examplesLanguage ?? "shell";
+
+  const selectedLang =
+    supportedLanguages.find((lang) => lang.value === preferredLang)?.value ??
+    supportedLanguages.at(0)?.value ??
+    "shell";
+
   const requestBodyContent = operation.requestBody?.content;
   const transformedRequestBodyContent =
     requestBodyContent && options?.transformExamples
@@ -95,9 +104,6 @@ export const Sidecar = ({
     selectedRequestExample.exampleIndex,
   );
 
-  const selectedLang =
-    searchParams.get("lang") ?? options?.examplesLanguage ?? "shell";
-
   const currentExampleCode = currentExample
     ? (currentExample?.value ?? currentExample)
     : selectedContent?.schema
@@ -111,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}`}
         >
@@ -126,6 +133,17 @@ export const Sidecar = ({
     globalSelectedServer || operation.servers.at(0)?.url || "";
 
   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,
@@ -138,7 +156,15 @@ export const Sidecar = ({
     });
 
     return getConverted(snippet, selectedLang);
-  }, [operation, selectedServer, selectedLang, currentExampleCode]);
+  }, [
+    currentExampleCode,
+    operation,
+    selectedServer,
+    selectedLang,
+    options,
+    auth,
+    context,
+  ]);
 
   const [ref, isOnScreen] = useOnScreen({ rootMargin: "200px 0px 200px 0px" });
 
@@ -150,30 +176,64 @@ 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 wrap-break-word 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={operation.servers.map((server) => server.url)}
-              operation={operation}
-              examples={requestBodyContent ?? undefined}
-            />
-          )}
+            <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(() => {
+                    setSearchParams((prev) => {
+                      prev.set("lang", e.target.value);
+                      return prev;
+                    });
+                  });
+                }}
+              >
+                {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 className="p-0">
+        <SidecarBox.Body>
           {shouldLazyHighlight && !isOnScreen ? (
             <NonHighlightedCode code={httpSnippetCode ?? ""} />
           ) : (
@@ -186,22 +246,6 @@ export const Sidecar = ({
             />
           )}
         </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]"
-            value={selectedLang}
-            onChange={(e) => {
-              startTransition(() => {
-                setSearchParams((prev) => {
-                  prev.set("lang", e.target.value);
-                  return prev;
-                });
-              });
-            }}
-            options={EXAMPLE_LANGUAGES}
-          />
-        </SidecarBox.Footer>
       </SidecarBox.Root>
 
       {transformedRequestBodyContent && currentExample ? (
@@ -223,12 +267,11 @@ export const Sidecar = ({
         />
       ) : null}
 
-      {operation.responses.length > 0 && (
+      {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>
 );