zudoku 0.37.1 → 0.39.0

package/src/lib/plugins/openapi/schema/SchemaPropertyItem.tsx

@@ -1,6 +1,7 @@
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { MinusIcon, PlusIcon, RefreshCcwDotIcon } from "lucide-react";
 import { useCallback, useState } from "react";
+import { InlineCode } from "../../../components/InlineCode.js";
 import { Markdown, ProseClasses } from "../../../components/Markdown.js";
 import type { SchemaObject } from "../../../oas/parser/index.js";
 import { Button } from "../../../ui/Button.js";
@@ -10,6 +11,7 @@ import { EnumValues } from "../components/EnumValues.js";
 import { SelectOnClick } from "../components/SelectOnClick.js";
 import { ParamInfos } from "../ParamInfos.js";
 import { LogicalGroup } from "./LogicalGroup/LogicalGroup.js";
+import { SchemaExampleAndDefault } from "./SchemaExampleAndDefault.js";
 import { SchemaView } from "./SchemaView.js";
 import {
   hasLogicalGroupings,
@@ -18,13 +20,7 @@ import {
   LogicalSchemaTypeMap,
 } from "./utils.js";
 
-export const SchemaLogicalGroup = ({
-  schema,
-  level,
-}: {
-  schema: SchemaObject;
-  level: number;
-}) => {
+export const SchemaLogicalGroup = ({ schema }: { schema: SchemaObject }) => {
   const [isOpen, setIsOpen] = useState(true);
   const toggleOpen = useCallback(() => setIsOpen((prev) => !prev), []);
 
@@ -37,31 +33,31 @@ export const SchemaLogicalGroup = ({
         type={type}
         isOpen={isOpen}
         toggleOpen={toggleOpen}
-        level={level}
       />
     );
   }
 };
 
 const RecursiveIndicator = () => (
-  <div className="flex items-center gap-1.5 italic text-xs text-muted-foreground font-mono bg-muted px-2 py-0.5 rounded-md">
+  <InlineCode
+    className="inline-flex items-center gap-1.5 italic text-xs translate-y-0.5"
+    selectOnClick={false}
+  >
     <RefreshCcwDotIcon size={13} />
     <span>circular</span>
-  </div>
+  </InlineCode>
 );
 
 export const SchemaPropertyItem = ({
   name,
   schema,
   group,
-  level,
   defaultOpen = false,
   showCollapseButton = true,
 }: {
   name: string;
   schema: SchemaObject;
   group: "required" | "optional" | "deprecated";
-  level: number;
   defaultOpen?: boolean;
   showCollapseButton?: boolean;
 }) => {
@@ -73,9 +69,12 @@ export const SchemaPropertyItem = ({
         <div className="flex flex-col gap-2.5 justify-between text-sm">
           <div className="space-x-2">
             <code>{name}</code>
-            <ParamInfos schema={schema} />
-            <RecursiveIndicator />
+            <ParamInfos
+              schema={schema}
+              extraItems={[<RecursiveIndicator key="circular-ref" />]}
+            />
           </div>
+          <SchemaExampleAndDefault schema={schema} />
         </div>
       </li>
     );
@@ -94,11 +93,11 @@ export const SchemaPropertyItem = ({
               group !== "optional" && (
                 <span className="text-primary">required</span>
               ),
+              schema.type === "array" &&
+                "items" in schema &&
+                isCircularRef(schema.items) && <RecursiveIndicator />,
             ]}
           />
-          {schema.type === "array" &&
-            "items" in schema &&
-            isCircularRef(schema.items) && <RecursiveIndicator />}
         </div>
         {schema.description && (
           <Markdown
@@ -110,7 +109,7 @@ export const SchemaPropertyItem = ({
           <EnumValues values={schema.items.enum} />
         )}
         {schema.enum && <EnumValues values={schema.enum} />}
-
+        <SchemaExampleAndDefault schema={schema} />
         {(hasLogicalGroupings(schema) || isComplexType(schema)) && (
           <Collapsible.Root
             defaultOpen={defaultOpen}
@@ -128,15 +127,15 @@ export const SchemaPropertyItem = ({
             <Collapsible.Content>
               <div className="mt-2">
                 {hasLogicalGroupings(schema) ? (
-                  <SchemaLogicalGroup schema={schema} level={level + 1} />
+                  <SchemaLogicalGroup schema={schema} />
                 ) : schema.type === "object" ? (
-                  <SchemaView schema={schema} level={level + 1} />
+                  <SchemaView schema={schema} />
                 ) : (
                   schema.type === "array" &&
                   "items" in schema &&
                   typeof schema.items === "object" &&
                   !isCircularRef(schema.items) && (
-                    <SchemaView schema={schema.items} level={level + 1} />
+                    <SchemaView schema={schema.items} />
                   )
                 )}
               </div>

package/src/lib/plugins/openapi/schema/SchemaView.tsx

@@ -5,11 +5,12 @@ import { cn } from "../../../util/cn.js";
 import { groupBy } from "../../../util/groupBy.js";
 import { EnumValues } from "../components/EnumValues.js";
 import { ParamInfos } from "../ParamInfos.js";
+import { SchemaExampleAndDefault } from "./SchemaExampleAndDefault.js";
 import {
   SchemaLogicalGroup,
   SchemaPropertyItem,
 } from "./SchemaPropertyItem.js";
-import { hasLogicalGroupings } from "./utils.js";
+import { hasLogicalGroupings, isBasicType } from "./utils.js";
 
 const renderMarkdown = (content?: string) =>
   content && (
@@ -19,166 +20,93 @@ const renderMarkdown = (content?: string) =>
     />
   );
 
+const renderBasicSchema = (schema: SchemaObject) => (
+  <Card className="p-4 space-y-2">
+    <span className="text-sm text-muted-foreground">
+      <ParamInfos schema={schema} />
+    </span>
+    {schema.enum && <EnumValues values={schema.enum} />}
+    {renderMarkdown(schema.description)}
+    <SchemaExampleAndDefault schema={schema} />
+  </Card>
+);
+
 export const SchemaView = ({
   schema,
-  level = 0,
   defaultOpen = false,
 }: {
   schema?: SchemaObject | null;
-  level?: number;
   defaultOpen?: boolean;
 }) => {
   if (!schema || Object.keys(schema).length === 0) {
     return (
       <Card className="p-4">
         <span className="text-sm text-muted-foreground italic">
-          No response specified
+          No schema specified
         </span>
       </Card>
     );
   }
 
-  const renderSchema = (schema: SchemaObject, level: number) => {
-    if (hasLogicalGroupings(schema)) {
-      return <SchemaLogicalGroup schema={schema} level={level} />;
-    }
-
-    if (Array.isArray(schema.type)) {
-      return (
-        <Card className="p-4 space-y-2">
-          <span className="text-sm text-muted-foreground">
-            <ParamInfos schema={schema} />
-          </span>
-          {schema.enum && <EnumValues values={schema.enum} />}
-          {renderMarkdown(schema.description)}
-        </Card>
-      );
-    }
-
-    if (schema.type === "array" && typeof schema.items === "object") {
-      const itemsSchema = schema.items as SchemaObject;
-
-      if (itemsSchema.enum) {
-        return (
-          <Card className="p-4">
-            <span className="text-sm text-muted-foreground">
-              <ParamInfos schema={schema} />
-            </span>
-            <EnumValues values={itemsSchema.enum} />
-            {renderMarkdown(schema.description)}
-          </Card>
-        );
-      }
-
-      if (
-        typeof itemsSchema.type === "string" &&
-        ["string", "number", "boolean", "integer"].includes(itemsSchema.type)
-      ) {
-        return (
-          <Card className="p-4">
-            <span className="text-sm text-muted-foreground">
-              <ParamInfos schema={schema} />
-            </span>
-            {renderMarkdown(schema.description)}
-          </Card>
-        );
-      } else if (itemsSchema.type === "object") {
-        return (
-          <Card className="flex flex-col gap-2 bg-border/30 p-4">
-            <span className="text-sm text-muted-foreground">object[]</span>
-            {renderSchema(itemsSchema, level + 1)}
-          </Card>
-        );
-      } else {
-        return renderSchema(itemsSchema, level + 1);
-      }
-    }
-
-    if (
-      schema.type === "object" &&
-      (!schema.properties || Object.keys(schema.properties).length === 0)
-    ) {
-      return (
-        <Card className="p-4 flex gap-2 items-baseline">
-          {"name" in schema && <>{schema.name as string}</>}
-          <span className="text-sm text-muted-foreground">
-            <ParamInfos schema={schema} />
-          </span>
-          {renderMarkdown(schema.description)}
-        </Card>
-      );
-    }
-
-    if (schema.properties) {
-      const groupedProperties = groupBy(
-        Object.entries(schema.properties),
-        ([propertyName, property]) => {
-          return property.deprecated
-            ? "deprecated"
-            : schema.required?.includes(propertyName)
-              ? "required"
-              : "optional";
-        },
-      );
+  if (hasLogicalGroupings(schema)) {
+    return <SchemaLogicalGroup schema={schema} />;
+  }
 
-      const groupNames = ["required", "optional", "deprecated"] as const;
+  if (isBasicType(schema.type)) {
+    return renderBasicSchema(schema);
+  }
 
-      return (
-        <Card className="divide-y overflow-hidden">
-          {groupNames.map(
-            (group) =>
-              groupedProperties[group] && (
-                <ul key={group} className="divide-y">
-                  {groupedProperties[group].map(([name, schema]) => (
-                    <SchemaPropertyItem
-                      key={name}
-                      name={name}
-                      schema={schema}
-                      group={group}
-                      level={level}
-                      defaultOpen={defaultOpen}
-                    />
-                  ))}
-                </ul>
-              ),
-          )}
-        </Card>
-      );
-    }
+  if (schema.type === "array" && typeof schema.items === "object") {
+    return renderBasicSchema(schema.items as SchemaObject);
+  }
 
-    if (
-      typeof schema.type === "string" &&
-      ["string", "number", "boolean", "integer", "null"].includes(schema.type)
-    ) {
-      return (
-        <Card className="p-4 space-y-2">
-          <span className="text-sm text-muted-foreground">
-            <ParamInfos schema={schema} />
-          </span>
-          {schema.enum && <EnumValues values={schema.enum} />}
-          {renderMarkdown(schema.description)}
-        </Card>
-      );
-    }
+  if (schema.type === "object") {
+    const groupedProperties = groupBy(
+      Object.entries(schema.properties ?? {}),
+      ([propertyName, property]) => {
+        return property.deprecated
+          ? "deprecated"
+          : schema.required?.includes(propertyName)
+            ? "required"
+            : "optional";
+      },
+    );
+    const groupNames = ["required", "optional", "deprecated"] as const;
 
-    if (schema.additionalProperties) {
-      return (
-        <Card className="my-2">
-          <CardHeader>
-            <CardTitle>Additional Properties:</CardTitle>
-          </CardHeader>
-          <CardContent>
-            {renderSchema(
-              schema.additionalProperties as SchemaObject,
-              level + 1,
-            )}
-          </CardContent>
-        </Card>
-      );
-    }
+    return (
+      <Card className="divide-y overflow-hidden">
+        {groupNames.map(
+          (group) =>
+            groupedProperties[group] && (
+              <ul key={group} className="divide-y">
+                {groupedProperties[group].map(([name, schema]) => (
+                  <SchemaPropertyItem
+                    key={name}
+                    name={name}
+                    schema={schema}
+                    group={group}
+                    defaultOpen={defaultOpen}
+                  />
+                ))}
+              </ul>
+            ),
+        )}
+      </Card>
+    );
+  }
 
-    return null;
-  };
+  if (schema.additionalProperties) {
+    return (
+      <Card className="my-2">
+        <CardHeader>
+          <CardTitle>Additional Properties:</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <SchemaView schema={schema.additionalProperties as SchemaObject} />
+        </CardContent>
+      </Card>
+    );
+  }
 
-  return renderSchema(schema, level);
+  return null;
 };

package/src/lib/plugins/openapi/schema/utils.ts

@@ -1,8 +1,14 @@
 import { CIRCULAR_REF } from "../../../oas/graphql/circular.js";
 import type { SchemaObject } from "../../../oas/parser/index.js";
 
+export const isBasicType = (
+  type: unknown,
+): type is "string" | "number" | "boolean" | "integer" | "null" =>
+  typeof type === "string" &&
+  ["string", "number", "boolean", "integer", "null"].includes(type);
+
 export const isComplexType = (value: SchemaObject) =>
-  value.type === "object" ||
+  (value.type === "object" && Object.keys(value.properties ?? {}).length > 0) ||
   (value.type === "array" &&
     typeof value.items === "object" &&
     (!value.items.type || value.items.type === "object"));

package/src/lib/plugins/openapi/state.ts

@@ -0,0 +1,36 @@
+import { useMemo } from "react";
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+interface SelectedServerState {
+  selectedServer?: string;
+  setSelectedServer: (newServer: string) => void;
+}
+
+export const useSelectedServerStore = create<SelectedServerState>()(
+  persist(
+    (set) => ({
+      selectedServer: undefined,
+      setSelectedServer: (newServer: string) =>
+        set({ selectedServer: newServer }),
+    }),
+    { name: "zudoku-selected-server" },
+  ),
+);
+
+/**
+ * Simple wrapper for `useSelectedServerStore` to fall back to first of the provided servers
+ */
+export const useSelectedServer = (servers: Array<{ url: string }>) => {
+  const { selectedServer, setSelectedServer } = useSelectedServerStore();
+
+  const finalSelectedServer = useMemo(
+    () =>
+      selectedServer && servers.some((s) => s.url === selectedServer)
+        ? selectedServer
+        : (servers.at(0)?.url ?? ""),
+    [selectedServer, servers],
+  );
+
+  return { selectedServer: finalSelectedServer, setSelectedServer };
+};

package/src/lib/plugins/openapi/util/getRoutes.tsx

@@ -1,4 +1,3 @@
-import slugify from "@sindresorhus/slugify";
 import { redirect, type RouteObject } from "react-router";
 import { joinUrl } from "../../../util/joinUrl.js";
 import type { GraphQLClient } from "../client/GraphQLClient.js";
@@ -53,10 +52,7 @@ const createVersionRoutes = (
   versionPath: string,
   tagPages: string[],
 ): RouteObject[] => {
-  const firstTagRoute = joinUrl(
-    versionPath,
-    tagPages[0] ? slugify(tagPages[0]) : UNTAGGED_PATH,
-  );
+  const firstTagRoute = joinUrl(versionPath, tagPages.at(0) ?? UNTAGGED_PATH);
 
   return [
     // Redirect to first tag on the index route
@@ -64,7 +60,7 @@ const createVersionRoutes = (
     // Create routes for each tag
     ...tagPages.map((tag) =>
       createRoute({
-        path: joinUrl(versionPath, slugify(tag)),
+        path: joinUrl(versionPath, tag),
         tag,
       }),
     ),
@@ -73,6 +69,13 @@ const createVersionRoutes = (
       path: joinUrl(versionPath, UNTAGGED_PATH),
       untagged: true,
     }),
+    {
+      path: joinUrl(versionPath, "~schemas"),
+      lazy: async () => {
+        const { SchemaList } = await import("../SchemaList.js");
+        return { element: <SchemaList /> };
+      },
+    },
   ];
 };
 

package/src/lib/plugins/search-pagefind/PagefindSearch.tsx

@@ -1,6 +1,7 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import { useState } from "react";
+import { useRef, useState } from "react";
+import { Button } from "zudoku/ui/Button.js";
 import { Callout } from "zudoku/ui/Callout.js";
 import {
   CommandDialog,
@@ -8,6 +9,8 @@ import {
   CommandInput,
 } from "zudoku/ui/Command.js";
 import { DialogTitle } from "zudoku/ui/Dialog.js";
+import { useAuthState } from "../../authentication/state.js";
+import { useZudoku } from "../../components/context/ZudokuContext.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import { getResults } from "./get-results.js";
 import type { PagefindOptions } from "./index.js";
@@ -55,7 +58,7 @@ const usePagefind = (options: PagefindOptions) => {
     enabled: typeof window !== "undefined",
   });
 
-  if (result.isError) {
+  if (result.isError && result.error.message !== "NOT_BUILT_YET") {
     // eslint-disable-next-line no-console
     console.error(result.error);
   }
@@ -74,13 +77,16 @@ export const PagefindSearch = ({
 }) => {
   const { pagefind, error, isError } = usePagefind(options);
   const [searchTerm, setSearchTerm] = useState("");
+  const auth = useAuthState();
+  const context = useZudoku();
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const { data: searchResults } = useQuery({
     queryKey: ["pagefind-search", searchTerm],
     queryFn: async () => {
       const search = await pagefind?.search(searchTerm);
       if (!search) return [];
-      return getResults(search, options);
+      return getResults({ search, options, auth, context });
     },
     placeholderData: keepPreviousData,
     enabled: !!pagefind && !!searchTerm,
@@ -97,13 +103,29 @@ export const PagefindSearch = ({
         <DialogTitle>Search</DialogTitle>
       </VisuallyHidden>
       <CommandInput
+        ref={inputRef}
         placeholder="Search..."
         value={searchTerm}
         onValueChange={setSearchTerm}
         disabled={isError}
       />
       <CommandEmpty>
-        {searchTerm ? "No results found." : "Start typing to search"}
+        {searchTerm ? (
+          <div className="flex flex-col items-center">
+            No results found.
+            <Button
+              variant="link"
+              onClick={() => {
+                setSearchTerm("");
+                inputRef.current?.focus();
+              }}
+            >
+              Clear search
+            </Button>
+          </div>
+        ) : (
+          "Start typing to search"
+        )}
       </CommandEmpty>
       {isError ? (
         <div className="p-4 text-sm">

package/src/lib/plugins/search-pagefind/ResultList.tsx

@@ -1,5 +1,5 @@
-import { FileTextIcon } from "lucide-react";
-import { useCallback } from "react";
+import { BracketsIcon, FileTextIcon } from "lucide-react";
+import { useCallback, useLayoutEffect, useRef } from "react";
 import { Link, useNavigate } from "react-router";
 import { CommandGroup, CommandItem, CommandList } from "zudoku/ui/Command.js";
 import {
@@ -35,6 +35,7 @@ export const ResultList = ({
   maxSubResults?: number;
 }) => {
   const navigate = useNavigate();
+  const commandListRef = useRef<HTMLDivElement | null>(null);
 
   const cleanResultUrl = useCallback(
     (url: string) => {
@@ -46,59 +47,70 @@ export const ResultList = ({
     [basePath],
   );
 
+  useLayoutEffect(() => {
+    requestIdleCallback(() => {
+      commandListRef.current?.scrollTo({ top: 0 });
+    });
+  }, [searchTerm]);
+
   return (
-    <CommandList className="max-h-[450px]">
+    <CommandList className="max-h-[450px]" ref={commandListRef}>
       {searchTerm && searchResults.length > 0 && (
         <CommandGroup
           className="text-sm text-muted-foreground"
           heading={`${searchResults.length} results for "${searchTerm}"`}
         />
       )}
-      {searchResults.map((result) => (
-        <CommandGroup
-          key={[result.meta.title ?? result.excerpt, result.url].join("-")}
-        >
-          <CommandItem
-            asChild
-            value={`${result.meta.title}-${result.url}`}
-            className={hoverClassname}
-            onSelect={() => {
-              void navigate(cleanResultUrl(result.url));
-              onClose();
-            }}
+      {searchTerm &&
+        searchResults.map((result) => (
+          <CommandGroup
+            key={[result.meta.title ?? result.excerpt, result.url].join("-")}
           >
-            <Link to={cleanResultUrl(result.url)}>
-              <FileTextIcon size={20} className="text-muted-foreground" />
-              {result.meta.title}
-            </Link>
-          </CommandItem>
-          {result.sub_results
-            .sort(sortSubResults)
-            .slice(0, maxSubResults)
-            .map((subResult) => (
-              <CommandItem
-                asChild
-                key={`${result.meta.title}-${subResult.url}`}
-                value={`${result.meta.title}-${subResult.url}`}
-                className={hoverClassname}
-                onSelect={() => {
-                  void navigate(cleanResultUrl(subResult.url));
-                  onClose();
-                }}
-              >
-                <Link to={cleanResultUrl(subResult.url)} onClick={onClose}>
-                  <div className="flex flex-col items-start gap-2 ms-2.5 ps-5 border-l border-muted-foreground/50">
-                    <span className="font-bold">{subResult.title}</span>
-                    <span
-                      className="text-[13px] [&_mark]:bg-primary [&_mark]:text-primary-foreground"
-                      dangerouslySetInnerHTML={{ __html: subResult.excerpt }}
-                    />
-                  </div>
-                </Link>
-              </CommandItem>
-            ))}
-        </CommandGroup>
-      ))}
+            <CommandItem
+              asChild
+              value={`${result.meta.title}-${result.url}`}
+              className={hoverClassname}
+              onSelect={() => {
+                void navigate(cleanResultUrl(result.url));
+                onClose();
+              }}
+            >
+              <Link to={cleanResultUrl(result.url)}>
+                {result.meta.section === "openapi" ? (
+                  <BracketsIcon />
+                ) : (
+                  <FileTextIcon />
+                )}
+                {result.meta.title}
+              </Link>
+            </CommandItem>
+            {result.sub_results
+              .sort(sortSubResults)
+              .slice(0, maxSubResults)
+              .map((subResult) => (
+                <CommandItem
+                  asChild
+                  key={`sub-${result.meta.title}-${subResult.url}`}
+                  value={`sub-${result.meta.title}-${subResult.url}`}
+                  className={hoverClassname}
+                  onSelect={() => {
+                    void navigate(cleanResultUrl(subResult.url));
+                    onClose();
+                  }}
+                >
+                  <Link to={cleanResultUrl(subResult.url)} onClick={onClose}>
+                    <div className="flex flex-col items-start gap-2 ms-2.5 ps-5 border-l border-muted-foreground/50">
+                      <span className="font-bold">{subResult.title}</span>
+                      <span
+                        className="text-[13px] [&_mark]:bg-primary [&_mark]:text-primary-foreground"
+                        dangerouslySetInnerHTML={{ __html: subResult.excerpt }}
+                      />
+                    </div>
+                  </Link>
+                </CommandItem>
+              ))}
+          </CommandGroup>
+        ))}
     </CommandList>
   );
 };