zudoku 0.0.0-feda542 → 0.0.0-ff27e7ea

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

@@ -1,16 +1,21 @@
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { MinusIcon, PlusIcon } from "lucide-react";
+import { useState } from "react";
 import { Markdown } from "../../components/Markdown.js";
-import { type SchemaObject } from "../../oas/graphql/index.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 type { OperationListItemResult } from "./OperationList.js";
+import { EnumValues } from "./components/EnumValues.js";
+import type { ParameterItem } from "./graphql/graphql.js";
 import type { ParameterGroup } from "./OperationListItem.js";
 import { ParamInfos } from "./ParamInfos.js";
-import { EnumValues } from "./components/EnumValues.js";
-import { SelectOnClick } from "./components/SelectOnClick.js";
 import { SchemaExampleAndDefault } from "./schema/SchemaExampleAndDefault.js";
+import { SchemaView } from "./schema/SchemaView.js";
+import { isArrayType } from "./schema/utils.js";
 
-const getParameterSchema = (
-  parameter: ParameterListItemResult,
-): SchemaObject => {
+const getParameterSchema = (parameter: ParameterItem): SchemaObject => {
   if (parameter.schema != null && typeof parameter.schema === "object") {
     return parameter.schema;
   }
@@ -19,61 +24,137 @@ const getParameterSchema = (
   };
 };
 
-export type ParameterListItemResult = NonNullable<
-  OperationListItemResult["parameters"]
->[number];
-
 export const ParameterListItem = ({
   parameter,
   group,
   id,
 }: {
-  parameter: ParameterListItemResult;
+  parameter: ParameterItem;
   group: ParameterGroup;
   id: string;
 }) => {
   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-p:my-1 prose-code:whitespace-pre-line"
-        />
+            <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>
       )}
-      {paramSchema.type === "array" && paramSchema.items.enum ? (
-        <EnumValues values={paramSchema.items.enum} />
-      ) : (
-        paramSchema.enum && <EnumValues values={paramSchema.enum} />
+
+      {isCollapsible && (
+        <Collapsible.Root
+          defaultOpen={false}
+          open={isOpen}
+          onOpenChange={setIsOpen}
+          className={cn("w-full", !isOpen && "contents")}
+        >
+          <Collapsible.Content asChild>
+            <ItemContent>
+              <SchemaView
+                schema={
+                  "items" in paramSchema ? paramSchema.items : paramSchema
+                }
+              />
+            </ItemContent>
+          </Collapsible.Content>
+        </Collapsible.Root>
       )}
-      <SchemaExampleAndDefault schema={paramSchema} />
-    </li>
+    </Item>
   );
 };

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

@@ -1,7 +1,8 @@
-import { useAuth } from "zudoku/components";
-import type { OperationListItemResult } from "./OperationList.js";
+import type {
+  MediaTypeObject,
+  OperationsFragmentFragment,
+} from "./graphql/graphql.js";
 import { PlaygroundDialog } from "./playground/PlaygroundDialog.js";
-import { Content } from "./SidecarExamples.js";
 
 export const PlaygroundDialogWrapper = ({
   server,
@@ -11,12 +12,9 @@ export const PlaygroundDialogWrapper = ({
 }: {
   server?: string;
   servers?: string[];
-  operation: OperationListItemResult;
-  examples?: Content;
+  operation: OperationsFragmentFragment;
+  examples?: MediaTypeObject[];
 }) => {
-  const { isAuthEnabled, login, signup, isPending, isAuthenticated } =
-    useAuth();
-
   const headers = operation.parameters
     ?.filter((p) => p.in === "header")
     .sort((a, b) => (a.required && !b.required ? -1 : 1))
@@ -26,9 +24,10 @@ export const PlaygroundDialogWrapper = ({
         p.schema?.default ?? p.examples?.find((x) => x.value)?.value ?? "",
       defaultActive: p.required ?? false,
       isRequired: p.required ?? false,
-      enum: p.schema?.type == "array" ? p.schema?.items?.enum : p.schema?.enum,
+      enum: p.schema?.type === "array" ? p.schema?.items?.enum : p.schema?.enum,
       type: p.schema?.type ?? "string",
     }));
+
   const queryParams = operation.parameters
     ?.filter((p) => p.in === "query")
     .sort((a, b) => (a.required && !b.required ? -1 : 1))
@@ -36,12 +35,17 @@ export const PlaygroundDialogWrapper = ({
       name: p.name,
       defaultActive: p.required ?? false,
       isRequired: p.required ?? false,
-      enum: p.schema?.type == "array" ? p.schema?.items?.enum : p.schema?.enum,
+      enum: p.schema?.type === "array" ? p.schema?.items?.enum : p.schema?.enum,
       type: p.schema?.type ?? "string",
+      defaultValue: p.schema?.default,
     }));
+
   const pathParams = operation.parameters
     ?.filter((p) => p.in === "path")
-    .map((p) => ({ name: p.name }));
+    .map((p) => ({
+      name: p.name,
+      defaultValue: p.schema?.default,
+    }));
 
   return (
     <PlaygroundDialog
@@ -53,9 +57,6 @@ export const PlaygroundDialogWrapper = ({
       queryParams={queryParams}
       pathParams={pathParams}
       examples={examples}
-      requiresLogin={isAuthEnabled && !isAuthenticated && !isPending}
-      onLogin={() => login()}
-      onSignUp={() => signup()}
     />
   );
 };

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,60 +1,95 @@
-import * as Tabs from "@radix-ui/react-tabs";
-import { cn } from "../../util/cn.js";
-import type { OperationListItemResult } from "./OperationList.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";
 
-type Responses = OperationListItemResult["responses"];
-
-const ResponseContent = ({ response }: { response: Responses[number] }) => {
-  return (
-    <Tabs.Content value={response.statusCode}>
-      <SidecarExamples
-        content={response.content ?? []}
-        description={response.description ?? undefined}
-      />
-    </Tabs.Content>
-  );
-};
-
 export const ResponsesSidecarBox = ({
   responses,
   selectedResponse,
-  onSelectResponse,
+  isOnScreen,
+  shouldLazyHighlight,
 }: {
-  responses: Responses;
+  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) => (
-          <ResponseContent key={response.statusCode} response={response} />
-        ))}
-      </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

@@ -1,5 +1,6 @@
 import slugify from "@sindresorhus/slugify";
 import { useSuspenseQuery } from "@tanstack/react-query";
+import { Helmet } from "@zudoku/react-helmet-async";
 import {
   ChevronRightIcon,
   ChevronsDownUpIcon,
@@ -13,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";
@@ -47,23 +47,34 @@ export function SchemaList() {
   const { data } = useSuspenseQuery(schemasQuery);
 
   const schemas = data.schema.components?.schemas ?? [];
-
-  if (!schemas.length) {
-    return <div>No schemas found</div>;
-  }
-
   const hasMultipleVersions = Object.entries(versions).length > 1;
   const showVersions =
     options?.showVersionSelect === "always" ||
     (hasMultipleVersions && options?.showVersionSelect !== "hide");
 
+  if (!schemas.length) {
+    return (
+      <div>
+        <Helmet>
+          <title>Schemas {showVersions ? version : ""}</title>
+          <meta name="description" content="List of schemas used by the API." />
+        </Helmet>
+        No schemas found
+      </div>
+    );
+  }
+
   return (
     <div
-      className="grid grid-cols-[--sidecar-grid-cols] gap-8 justify-between"
+      className="grid grid-cols-(--sidecar-grid-cols) gap-8 justify-between"
       data-pagefind-filter="section:openapi"
       data-pagefind-meta="section:openapi"
     >
-      <div className="pt-[--padding-content-top] pb-[--padding-content-bottom]">
+      <Helmet>
+        <title>Schemas {showVersions ? version : ""}</title>
+        <meta name="description" content="List of schemas used by the API." />
+      </Helmet>
+      <div className="pt-(--padding-content-top) pb-(--padding-content-bottom)">
         <Collapsible className="w-full">
           <div className="flex flex-col gap-y-4 sm:flex-row justify-around items-start sm:items-end">
             <div className="flex-1">
@@ -71,12 +82,12 @@ export function SchemaList() {
               <Heading
                 level={1}
                 id="schemas"
-                registerSidebarAnchor
+                registerNavigationAnchor
                 className="mb-0"
               >
                 Schemas
                 {showVersions && (
-                  <span className="text-xl text-muted-foreground ml-1.5">
+                  <span className="text-xl text-muted-foreground ms-1.5">
                     ({version})
                   </span>
                 )}
@@ -98,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 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>
@@ -117,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)}