zudoku 0.64.1 → 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";
@@ -5,18 +12,52 @@ import { SidecarExamples } from "./SidecarExamples.js";
 export const RequestBodySidecarBox = ({
   content,
   onExampleChange,
+  isOnScreen,
+  shouldLazyHighlight,
+  selectedContentIndex,
+  selectedExampleIndex,
 }: {
   content: MediaTypeObject[];
-  onExampleChange?: (example: unknown) => void;
+  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,5 +1,12 @@
-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";
@@ -7,43 +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);
+  }, [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 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>
   );
 };