zudoku 0.0.0-fix-downgrade-openapi-parser.aac00796 → 0.0.0-fix-firebase-export.2e421fda

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

@@ -1,16 +1,23 @@
 import { InfoIcon } from "lucide-react";
+import { Fragment } from "react";
+import {
+  Frame,
+  FrameDescription,
+  FrameFooter,
+  FrameHeader,
+  FramePanel,
+} from "zudoku/ui/Frame.js";
+import { ItemGroup, ItemSeparator } from "zudoku/ui/Item.js";
 import { Markdown } from "../../../components/Markdown.js";
 import type { SchemaObject } from "../../../oas/parser/index.js";
-import { Card } from "../../../ui/Card.js";
 import { groupBy } from "../../../util/groupBy.js";
 import { ConstValue } from "../components/ConstValue.js";
 import { EnumValues } from "../components/EnumValues.js";
 import { ParamInfos } from "../ParamInfos.js";
-import { AllOfGroupView } from "./AllOfGroup/AllOfGroupView.js";
 import { SchemaExampleAndDefault } from "./SchemaExampleAndDefault.js";
 import { SchemaPropertyItem } from "./SchemaPropertyItem.js";
 import { UnionView } from "./UnionView.js";
-import { isBasicType } from "./utils.js";
+import { isArrayType, isBasicType } from "./utils.js";
 
 const renderMarkdown = (content?: string) =>
   content && (
@@ -23,19 +30,30 @@ const renderMarkdown = (content?: string) =>
 const renderBasicSchema = (
   schema: SchemaObject,
   cardHeader?: React.ReactNode,
-) => (
-  <Card className="overflow-hidden">
-    {cardHeader}
-    <div className="p-4 space-y-2">
+  embedded?: boolean,
+) => {
+  const content = (
+    <>
       <span className="text-sm text-muted-foreground">
         <ParamInfos schema={schema} />
       </span>
       {schema.enum && <EnumValues values={schema.enum} />}
       {renderMarkdown(schema.description)}
       <SchemaExampleAndDefault schema={schema} />
-    </div>
-  </Card>
-);
+    </>
+  );
+
+  if (embedded) {
+    return <div className="space-y-2 p-4">{content}</div>;
+  }
+
+  return (
+    <Frame>
+      {cardHeader}
+      <FramePanel className="space-y-2">{content}</FramePanel>
+    </Frame>
+  );
+};
 
 export const SchemaView = ({
   schema,
@@ -50,12 +68,14 @@ export const SchemaView = ({
 }) => {
   if (!schema || Object.keys(schema).length === 0) {
     return (
-      <Card className="overflow-hidden">
+      <Frame>
         {cardHeader}
-        <div className="text-sm text-muted-foreground italic p-4">
-          No data returned
-        </div>
-      </Card>
+        <FramePanel>
+          <div className="text-sm text-muted-foreground italic">
+            No data returned
+          </div>
+        </FramePanel>
+      </Frame>
     );
   }
 
@@ -67,18 +87,24 @@ export const SchemaView = ({
     return <UnionView schema={schema} cardHeader={cardHeader} />;
   }
 
-  if (Array.isArray(schema.allOf)) {
-    return <AllOfGroupView schema={schema} cardHeader={cardHeader} />;
-  }
-
   if (isBasicType(schema.type)) {
-    return renderBasicSchema(schema, cardHeader);
+    return renderBasicSchema(schema, cardHeader, embedded);
   }
 
-  if (schema.type === "array" && typeof schema.items === "object") {
-    return <SchemaView schema={schema.items} cardHeader={cardHeader} />;
+  if (isArrayType(schema) && typeof schema.items === "object") {
+    const wrappedSchema: SchemaObject = {
+      type: "object",
+      properties: { "": schema },
+    };
+
+    return (
+      <SchemaView schema={wrappedSchema} cardHeader={cardHeader} defaultOpen />
+    );
   }
 
+  const additionalObjectProperties = typeof schema.additionalProperties ===
+    "object" && <SchemaView schema={schema.additionalProperties} embedded />;
+
   if (schema.type === "object") {
     const groupedProperties = groupBy(
       Object.entries(schema.properties ?? {}),
@@ -90,50 +116,62 @@ export const SchemaView = ({
             : "optional";
       },
     );
+
     const groupNames = ["required", "optional", "deprecated"] as const;
+    const groups = groupNames.flatMap((group) => {
+      const properties = groupedProperties[group];
+      return properties ? { group, properties } : [];
+    });
+
+    const itemsList = groups.map(({ group, properties }, index) => (
+      <Fragment key={group}>
+        {index > 0 && <ItemSeparator />}
+        <ItemGroup className="overflow-clip">
+          {properties.map(([name, schema], index) => (
+            <Fragment key={name}>
+              {index > 0 && <ItemSeparator />}
+              <SchemaPropertyItem
+                name={name}
+                schema={schema}
+                group={group}
+                defaultOpen={defaultOpen}
+              />
+            </Fragment>
+          ))}
+        </ItemGroup>
+      </Fragment>
+    ));
 
-    const additionalProperties =
-      typeof schema.additionalProperties === "object" ? (
-        <SchemaView schema={schema.additionalProperties} embedded />
-      ) : schema.additionalProperties === true ? (
-        <div className="text-sm p-4 bg-border/20 hover:bg-border/30 flex items-center gap-1">
-          <span>Additional properties are allowed</span>
-          <a
-            className="p-0.5 -m-0.5"
-            href="https://swagger.io/docs/specification/v3_0/data-models/dictionaries/"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            <InfoIcon size={14} />
-          </a>
-        </div>
-      ) : null;
-
-    const Component = embedded ? "div" : Card;
+    if (embedded) {
+      return itemsList;
+    }
 
     return (
-      <Component className="divide-y overflow-hidden">
+      <Frame>
         {cardHeader}
-        {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>
-            ),
+        {schema.description && (
+          <FrameHeader>
+            <FrameDescription>{schema.description}</FrameDescription>
+          </FrameHeader>
         )}
-        {additionalProperties}
-      </Component>
+        <FramePanel className="p-0!">
+          {itemsList}
+          {additionalObjectProperties}
+        </FramePanel>
+        {schema.additionalProperties === true && (
+          <FrameFooter>
+            <a
+              className="text-sm flex items-center gap-1 hover:underline"
+              href="https://swagger.io/docs/specification/v3_0/data-models/dictionaries/"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Additional properties are allowed
+              <InfoIcon size={14} />
+            </a>
+          </FrameFooter>
+        )}
+      </Frame>
     );
   }
-
-  return null;
 };

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

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import type { SchemaObject } from "../../../oas/parser/index.js";
 import { Badge } from "../../../ui/Badge.js";
-import { Card } from "../../../ui/Card.js";
+import { Frame, FramePanel } from "../../../ui/Frame.js";
 import { cn } from "../../../util/cn.js";
 import { SchemaView } from "./SchemaView.js";
 import {
@@ -67,17 +67,6 @@ const DecisionTable = ({
   );
 };
 
-const VariantPanel = ({ variant }: { variant: SchemaObject }) => {
-  return (
-    <div className="space-y-2">
-      {variant.description && (
-        <p className="text-sm text-muted-foreground">{variant.description}</p>
-      )}
-      <SchemaView schema={variant} />
-    </div>
-  );
-};
-
 export const UnionView = ({
   schema,
   cardHeader,
@@ -119,9 +108,9 @@ export const UnionView = ({
     currentVariantIndex >= 0 ? variants[currentVariantIndex] : null;
 
   return (
-    <Card className="overflow-hidden text-sm">
+    <Frame>
       {cardHeader}
-      <div className="flex flex-col gap-4 p-4">
+      <FramePanel className="text-sm flex flex-col gap-4">
         <div className="flex items-center gap-2">
           <Badge variant="outline">{mode}</Badge>
           <div className="flex-1 p-2">
@@ -136,8 +125,8 @@ export const UnionView = ({
           onSelectVariant={setSelectedVariant}
         />
         <strong>Properties for {selectedVariant}:</strong>
-        {currentVariant && <VariantPanel variant={currentVariant} />}
-      </div>
-    </Card>
+        {currentVariant && <SchemaView schema={currentVariant} />}
+      </FramePanel>
+    </Frame>
   );
 };

package/src/lib/plugins/openapi/schema/union-helpers.ts

@@ -36,7 +36,6 @@ export const unionVariants = (schema: SchemaObject): SchemaObject[] => {
       const shouldInherit =
         !variant.properties &&
         !variant.type &&
-        !variant.allOf &&
         !variant.oneOf &&
         !variant.anyOf;
 

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

@@ -1,5 +1,8 @@
 import { CIRCULAR_REF } from "../../../oas/graphql/circular.js";
-import type { SchemaObject } from "../../../oas/parser/index.js";
+import type {
+  ArraySchemaObject,
+  SchemaObject,
+} from "../../../oas/parser/index.js";
 
 export const isBasicType = (
   type: unknown,
@@ -8,7 +11,7 @@ export const isBasicType = (
     ["string", "number", "boolean", "integer", "null"].includes(type)) ||
   (Array.isArray(type) && type.every(isBasicType));
 
-export const isArrayType = (value: SchemaObject) =>
+export const isArrayType = (value: SchemaObject): value is ArraySchemaObject =>
   value.type === "array" ||
   // schema.type might be an array of types, so we need to check if "array" is one of them
   (Array.isArray(value.type) && value.type.includes("array"));

package/src/lib/plugins/openapi/util/generateSchemaExample.ts

@@ -85,23 +85,23 @@ export const generateSchemaExample = (
     return schema.enum[0];
   }
 
-  if (schema.oneOf) {
-    const randomIndex = Math.floor(Math.random() * schema.oneOf.length);
-    return generateSchemaExample(schema.oneOf[randomIndex] as SchemaObject);
+  if (schema.oneOf && schema.oneOf.length > 0) {
+    return generateSchemaExample(schema.oneOf[0]);
   }
 
-  if (schema.anyOf) {
+  if (schema.anyOf && schema.anyOf.length > 0) {
     // Should likely be expanded to return a partial set of values, but it would require
     // detection if being used within an array or a string type.
-    const randomIndex = Math.floor(Math.random() * schema.anyOf.length);
-    return generateSchemaExample(schema.anyOf[randomIndex] as SchemaObject);
+    return generateSchemaExample(schema.anyOf[0]);
   }
 
-  if (schema.allOf) {
-    // https://swagger.io/docs/specification/v3_0/data-models/oneof-anyof-allof-not/#allof
-    return schema.allOf.reduce((acc, allOfSchema) => {
-      return { ...acc, ...generateSchemaExample(allOfSchema as SchemaObject) };
-    }, {});
+  // Check for property-level examples
+  if (
+    schema.examples &&
+    Array.isArray(schema.examples) &&
+    schema.examples.length > 0
+  ) {
+    return schema.examples[0];
   }
 
   switch (schema.type) {

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

@@ -148,8 +148,18 @@ const createVersionRoutes = (
   ];
 };
 
-export const getVersions = (config: OasPluginConfig) =>
-  config.type === "file" ? Object.keys(config.input) : [];
+export const getVersionMetadata = (config: OasPluginConfig) => {
+  if (config.type === "raw" || !Array.isArray(config.input)) {
+    return { versions: [], labels: {} };
+  }
+
+  return {
+    versions: config.input.map((v) => v.path),
+    labels: Object.fromEntries(
+      config.input.map((v) => [v.path, v.label ?? v.path]),
+    ),
+  };
+};
 
 export const getRoutes = ({
   basePath,
@@ -161,10 +171,33 @@ export const getRoutes = ({
   basePath: string;
 }): RouteObject[] => {
   const tagPages = config.tagPages;
+  const { versions } = getVersionMetadata(config);
 
   // If the config does not provide tag pages the catch-all
   // route handles all operations on a single page
   if (!tagPages) {
+    // If there are versions, create versioned routes even without tag pages
+    if (versions.length > 0) {
+      const versionsInPath =
+        versions.length > 1 ? [undefined, ...versions] : [undefined];
+
+      return versionsInPath.map((version) => {
+        const versionPath = joinUrl(basePath, version);
+        return createOasProvider({
+          basePath,
+          version,
+          routePath: versionPath,
+          routes: [
+            createNonTagPagesRoute({ path: `${versionPath}/:tag?` }),
+            ...createAdditionalRoutes(versionPath),
+          ],
+          client,
+          config,
+        });
+      });
+    }
+
+    // No versions, single route
     return [
       createOasProvider({
         basePath,
@@ -179,7 +212,6 @@ export const getRoutes = ({
     ];
   }
 
-  const versions = getVersions(config);
   // The latest version always is added as index path
   const versionsInPath =
     versions.length > 1 ? [undefined, ...versions] : [undefined];

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

@@ -0,0 +1,163 @@
+import { DialogTrigger } from "@radix-ui/react-dialog";
+import {
+  type PropsWithChildren,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+import { Button } from "zudoku/ui/Button.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "zudoku/ui/Dialog.js";
+
+type IndexingState =
+  | { status: "idle" }
+  | { status: "indexing"; total: number; current: number; path: string }
+  | { status: "complete"; indexed: number }
+  | { status: "error"; message: string };
+
+const ProgressBar = ({
+  total,
+  current,
+  barLength = 25,
+  emptyChar = "░",
+  filledChar = "█",
+}: {
+  total: number;
+  current: number;
+  barLength?: number;
+  emptyChar?: string;
+  filledChar?: string;
+}) => {
+  const percent = Math.round((current / total) * 100);
+  const filled = Math.round((percent / 100) * barLength);
+  const empty = barLength - filled;
+
+  return (
+    <>
+      {filledChar.repeat(filled)}
+      {emptyChar.repeat(empty)} {percent}% ({current}/{total})
+    </>
+  );
+};
+
+const IndexingDialog = ({ children }: PropsWithChildren) => {
+  const [indexingState, setIndexingState] = useState<IndexingState>({
+    status: "idle",
+  });
+
+  const startIndexing = useCallback(() => {
+    setIndexingState({ status: "indexing", total: 0, current: 0, path: "" });
+
+    const eventSource = new EventSource("/__z/pagefind-reindex");
+
+    eventSource.onmessage = (event) => {
+      const data = JSON.parse(event.data);
+
+      if (data.type === "progress") {
+        setIndexingState({
+          status: "indexing",
+          total: data.total,
+          current: data.current,
+          path: data.path,
+        });
+      } else if (data.type === "complete") {
+        eventSource.close();
+        if (data.success) {
+          setIndexingState({ status: "complete", indexed: data.indexed });
+        } else {
+          setIndexingState({
+            status: "error",
+            message: data.error ?? "Indexing failed",
+          });
+        }
+      }
+    };
+
+    eventSource.onerror = () => {
+      eventSource.close();
+      setIndexingState({
+        status: "error",
+        message: "Connection lost during indexing",
+      });
+    };
+
+    return () => eventSource.close();
+  }, []);
+
+  useEffect(() => {
+    if (indexingState.status !== "idle") return;
+    return startIndexing();
+  }, [indexingState.status, startIndexing]);
+
+  const handleDone = () => {
+    if (indexingState.status !== "complete") return;
+    window.location.reload();
+  };
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent
+        className="max-w-sm! top-1/3"
+        showCloseButton={false}
+        onInteractOutside={(e) => e.preventDefault()}
+      >
+        <DialogHeader>
+          <DialogTitle>
+            {indexingState.status === "indexing" && "Building Search Index"}
+            {indexingState.status === "complete" && "Indexing Complete"}
+            {indexingState.status === "error" && "Indexing Failed"}
+            {indexingState.status === "idle" && "Build Search Index"}
+          </DialogTitle>
+          <DialogDescription>
+            {indexingState.status === "indexing" && (
+              <>
+                {indexingState.total > 0 && (
+                  <div className="font-mono text-sm mb-2">
+                    <ProgressBar {...indexingState} />
+                  </div>
+                )}
+                {indexingState.path && (
+                  <span className="block text-xs truncate">
+                    {indexingState.path}
+                  </span>
+                )}
+              </>
+            )}
+            {indexingState.status === "complete" && (
+              <>Successfully indexed {indexingState.indexed} pages.</>
+            )}
+            {indexingState.status === "error" && (
+              <span className="text-destructive">{indexingState.message}</span>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <div className="flex justify-end gap-2">
+            {indexingState.status === "complete" && (
+              <Button size="sm" onClick={handleDone}>
+                Close and reload
+              </Button>
+            )}
+            {indexingState.status === "error" && (
+              <>
+                <Button variant="outline" onClick={handleDone}>
+                  Cancel
+                </Button>
+                <Button onClick={startIndexing}>Retry</Button>
+              </>
+            )}
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default IndexingDialog;

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

@@ -1,14 +1,15 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import { useRef, useState } from "react";
+import { ListPlusIcon } from "lucide-react";
+import { lazy, useEffect, useRef, useState } from "react";
 import { Button } from "zudoku/ui/Button.js";
-import { Callout } from "zudoku/ui/Callout.js";
 import {
   CommandDialog,
   CommandEmpty,
   CommandInput,
 } from "zudoku/ui/Command.js";
 import { DialogTitle } from "zudoku/ui/Dialog.js";
+import { Kbd, KbdGroup } from "zudoku/ui/Kbd.js";
 import { useAuthState } from "../../authentication/state.js";
 import { useZudoku } from "../../components/context/ZudokuContext.js";
 import { SEARCH_PROTECTED_SECTION } from "../../core/RouteGuard.js";
@@ -18,6 +19,8 @@ import type { PagefindOptions } from "./index.js";
 import { ResultList } from "./ResultList.js";
 import type { Pagefind } from "./types.js";
 
+const IndexingDialog = lazy(() => import("./IndexingDialog.js"));
+
 const DEFAULT_RANKING = {
   // Slightly lower than default because API docs tend to have repetitive terms (parameter names, HTTP methods, etc.)
   termFrequency: 0.8,
@@ -81,6 +84,7 @@ export const PagefindSearch = ({
 }) => {
   const { pagefind, error, isError } = usePagefind(options);
   const [searchTerm, setSearchTerm] = useState("");
+  const [selectedValue, setSelectedValue] = useState<string>("");
   const auth = useAuthState();
   const context = useZudoku();
   const inputRef = useRef<HTMLInputElement>(null);
@@ -100,9 +104,24 @@ export const PagefindSearch = ({
     enabled: !!pagefind && !!searchTerm,
   });
 
+  useEffect(() => {
+    if (!searchResults?.length) return;
+
+    const firstResult = searchResults.at(0);
+    if (!firstResult) return;
+
+    const firstValue = `${firstResult.meta.title}-${firstResult.url}`;
+    setSelectedValue(firstValue);
+  }, [searchResults]);
+
   return (
     <CommandDialog
-      command={{ shouldFilter: false }}
+      command={{
+        shouldFilter: false,
+        loop: true,
+        value: selectedValue,
+        onValueChange: setSelectedValue,
+      }}
       content={{ className: "max-w-[750px]" }}
       open={isOpen}
       onOpenChange={onClose}
@@ -135,28 +154,48 @@ export const PagefindSearch = ({
           "Start typing to search"
         )}
       </CommandEmpty>
-      {isError ? (
+      {isError && error.message !== "NOT_BUILT_YET" ? (
         <div className="p-4 text-sm">
-          {error.message === "NOT_BUILT_YET" ? (
-            <Callout type="info">
-              Search is currently not available in development mode by default.
-              <br />
-              To still use search in development, run <code>zudoku build</code>{" "}
-              and copy the <code>dist/pagefind</code> directory to your{" "}
-              <code>public</code> directory.
-            </Callout>
-          ) : (
-            "An error occurred while loading search."
-          )}
+          An error occurred while loading search.
         </div>
       ) : (
-        <ResultList
-          basePath={context.options.basePath}
-          searchResults={searchResults ?? []}
-          searchTerm={searchTerm}
-          onClose={onClose}
-          maxSubResults={options.maxSubResults}
-        />
+        <>
+          <ResultList
+            basePath={context.options.basePath}
+            searchResults={searchResults ?? []}
+            searchTerm={searchTerm}
+            onClose={onClose}
+            maxSubResults={options.maxSubResults}
+          />
+          <div className="flex justify-between p-2 items-center">
+            <div className="flex items-center text-xs text-muted-foreground">
+              <KbdGroup className="ms-0 me-1">
+                <Kbd>↑</Kbd>
+                <Kbd>↓</Kbd>
+              </KbdGroup>
+              Navigate
+              <KbdGroup className="ms-4 me-1">
+                <Kbd>↵</Kbd>
+              </KbdGroup>
+              Select
+              <KbdGroup className="ms-4 me-1">
+                <Kbd>Esc</Kbd>
+              </KbdGroup>
+              Close dialog
+            </div>
+            {import.meta.env.DEV && (
+              <IndexingDialog>
+                <Button
+                  variant="outline"
+                  className="h-7 text-xs text-muted-foreground"
+                >
+                  <ListPlusIcon />
+                  Build Search Index
+                </Button>
+              </IndexingDialog>
+            )}
+          </div>
+        </>
       )}
     </CommandDialog>
   );