zudoku 0.0.0-f3858d6 → 0.0.0-f3f6db5

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

@@ -1,58 +1,51 @@
-import { matchPath, useRouteError, type RouteObject } from "react-router-dom";
-import { Client as UrqlClient, cacheExchange, fetchExchange } from "urql";
-import { type DevPortalPlugin } from "../../core/plugins.js";
-import { graphql } from "./graphql/index.js";
-
-import { useQuery } from "@tanstack/react-query";
+import slugify from "@sindresorhus/slugify";
 import { CirclePlayIcon, LogInIcon } from "lucide-react";
-import { createClient } from "zudoku/openapi-worker";
+import { matchPath, redirect, RouteObject } from "react-router";
 import type { SidebarItem } from "../../../config/validators/SidebarSchema.js";
 import { useAuth } from "../../authentication/hook.js";
-import { ErrorPage } from "../../components/ErrorPage.js";
 import { ColorMap } from "../../components/navigation/SidebarBadge.js";
-import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
+import { type ZudokuPlugin } from "../../core/plugins.js";
+import type { SchemaImports } from "../../oas/graphql/index.js";
 import { Button } from "../../ui/Button.js";
-import { joinPath } from "../../util/joinPath.js";
+import { joinUrl } from "../../util/joinUrl.js";
+import { GraphQLClient } from "./client/GraphQLClient.js";
+import { graphql } from "./graphql/index.js";
 import { OasPluginConfig } from "./interfaces.js";
 import type { PlaygroundContentProps } from "./playground/Playground.js";
 import { PlaygroundDialog } from "./playground/PlaygroundDialog.js";
-import { GetServerQuery } from "./Sidecar.js";
 
 const GetCategoriesQuery = graphql(`
   query GetCategories($input: JSON!, $type: SchemaType!) {
     schema(input: $input, type: $type) {
+      url
       tags {
-        __typename
         name
-        operations {
-          __typename
-          slug
-          deprecated
-          method
-          summary
-          operationId
-          path
-        }
       }
     }
   }
 `);
 
-const OpenApiErrorPage = () => {
-  const error = useRouteError();
-  const message =
-    error instanceof Error ? (
-      <SyntaxHighlight code={error.message} />
-    ) : (
-      "An unknown error occurred"
-    );
-
-  return (
-    <ErrorPage category="Error" title="An error occurred" message={message} />
-  );
-};
+const GetOperationsQuery = graphql(`
+  query GetOperations(
+    $input: JSON!
+    $type: SchemaType!
+    $tag: String
+    $untagged: Boolean
+  ) {
+    schema(input: $input, type: $type) {
+      operations(tag: $tag, untagged: $untagged) {
+        slug
+        deprecated
+        method
+        summary
+        operationId
+        path
+      }
+    }
+  }
+`);
 
-type InternalOasPluginConfig = { inMemory?: boolean };
+type InternalOasPluginConfig = { schemaImports?: SchemaImports };
 
 const MethodColorMap: Record<string, keyof typeof ColorMap> = {
   get: "green",
@@ -66,17 +59,13 @@ const MethodColorMap: Record<string, keyof typeof ColorMap> = {
 
 export type OpenApiPluginOptions = OasPluginConfig & InternalOasPluginConfig;
 
-export const openApiPlugin = (
-  config: OpenApiPluginOptions,
-): DevPortalPlugin => {
-  const basePath = joinPath(config.navigationId ?? "/reference");
+const UNTAGGED_PATH = "~endpoints";
 
-  const client = config.server
-    ? new UrqlClient({
-        url: config.server,
-        exchanges: [cacheExchange, fetchExchange],
-      })
-    : createClient({ useMemoryClient: config.inMemory ?? false });
+export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
+  const basePath = joinUrl(config.navigationId ?? "/reference");
+  const versions = config.type === "file" ? Object.keys(config.input) : [];
+
+  const client = new GraphQLClient(config);
 
   return {
     getHead: () => {
@@ -102,20 +91,15 @@ export const openApiPlugin = (
         method,
         url,
         ...props
-      }: Partial<PlaygroundContentProps> & { requireAuth: boolean }) => {
+      }: Partial<PlaygroundContentProps> &
+        Pick<PlaygroundContentProps, "server"> & {
+          requireAuth: boolean;
+        }) => {
         const auth = useAuth();
-        const serverQuery = useQuery({
-          queryFn: async () => {
-            const result = await client.query(GetServerQuery, {
-              type: config.type,
-              input: config.input,
-            });
-
-            return result.data;
-          },
-          enabled: !server,
-          queryKey: ["playground-server"],
-        });
+
+        if (!server) {
+          throw new Error("Server is required");
+        }
 
         if (requireAuth && !auth.isAuthenticated) {
           return (
@@ -133,9 +117,7 @@ export const openApiPlugin = (
           <PlaygroundDialog
             url={url ?? "/"}
             method={method ?? "get"}
-            server={
-              server ?? serverQuery.data?.schema.url ?? "https://example.com"
-            }
+            server={server}
             {...props}
           >
             <Button className="gap-2 items-center" variant="outline">
@@ -150,66 +132,122 @@ export const openApiPlugin = (
         return [];
       }
 
-      const { data } = await client.query(GetCategoriesQuery, {
-        input: config.input,
-        type: config.type,
-      });
+      try {
+        const urlVersion = versions.find((v) =>
+          path.startsWith(joinUrl(basePath, v)),
+        );
+        const version = urlVersion ?? Object.keys(config.input).at(0);
 
-      if (!data) return [];
-
-      const categories = data.schema.tags
-        .filter((tag) => tag.operations.length > 0)
-        .map<SidebarItem>((tag) => ({
-          type: "category",
-          label: tag.name || "Other endpoints",
-          collapsible: true,
-          collapsed: false,
-          items: tag.operations.map((operation) => ({
-            type: "link",
-            label: operation.summary ?? operation.path,
-            href: `#${operation.slug}`,
-            badge: {
-              label: operation.method,
-              color: MethodColorMap[operation.method.toLowerCase()]!,
-            },
-          })),
+        const data = await client.fetch(GetCategoriesQuery, {
+          type: config.type,
+          input: config.type === "file" ? config.input[version!] : config.input,
+        });
+
+        const tag = config.tagPages?.find(
+          (tag) => path.split("/").at(-1) === slugify(tag),
+        );
+
+        const operationsData = await client.fetch(GetOperationsQuery, {
+          type: config.type,
+          input: config.type === "file" ? config.input[version!] : config.input,
+          tag,
+          untagged: tag === undefined,
+        });
+
+        const items = operationsData.schema.operations.map((operation) => ({
+          type: "link" as const,
+          label: operation.summary ?? operation.path,
+          href: `#${operation.slug}`,
+          badge: {
+            label: operation.method,
+            color: MethodColorMap[operation.method.toLowerCase()]!,
+            invert: true,
+          } as const,
         }));
 
-      categories.unshift({
-        type: "link",
-        label: "Overview",
-        href: "#description",
-      });
+        const categories = data.schema.tags
+          // .filter((tag) => tag.operations.length > 0)
+          .map<SidebarItem>((tag) => {
+            const categoryLink = joinUrl(
+              basePath,
+              urlVersion,
+              tag.name ? slugify(tag.name) : UNTAGGED_PATH,
+            );
+            return {
+              type: "category",
+              label: tag.name || "Other endpoints",
+              link: {
+                type: "doc" as const,
+                id: categoryLink,
+                label: tag.name!,
+              },
+              collapsible: false,
+              collapsed: true,
+              items: path === categoryLink ? items : [],
+            };
+          });
 
-      return categories;
+        return categories;
+      } catch {
+        return [];
+      }
     },
-    getRoutes: () =>
-      [
-        {
+    getRoutes: () => {
+      const versionsInPath = [null, ...versions];
+
+      const tagPages = (config.tagPages ?? []).map((tag) => ({
+        tag,
+        path: slugify(tag),
+      }));
+
+      return versionsInPath.map((version) => {
+        const versionPath = joinUrl(basePath, version ? `/${version}` : "");
+
+        return {
+          path: versionPath,
           async lazy() {
-            const { OpenApiRoute } = await import("./Route.js");
+            const { OpenApiRoute } = await import("./OpenApiRoute.js");
             return {
-              element: <OpenApiRoute client={client} config={config} />,
+              element: (
+                <OpenApiRoute
+                  version={version ?? undefined}
+                  basePath={basePath}
+                  versions={versions}
+                  client={client}
+                  config={config}
+                />
+              ),
             };
           },
-          errorElement: <OpenApiErrorPage />,
           children: [
             {
-              path: basePath,
-              children: [
-                {
-                  index: true,
-                  async lazy() {
-                    const { OperationList } = await import(
-                      "./OperationList.js"
-                    );
-                    return { element: <OperationList /> };
-                  },
-                },
-              ],
+              index: true,
+              loader: () =>
+                redirect(
+                  joinUrl(versionPath, tagPages.at(0)?.path ?? UNTAGGED_PATH),
+                ),
             },
+            {
+              path: joinUrl(versionPath, UNTAGGED_PATH),
+              async lazy() {
+                const { OperationList } = await import("./OperationList.js");
+                return { element: <OperationList untagged={true} /> };
+              },
+            },
+            ...tagPages.map<RouteObject>((tag) => {
+              return {
+                path: joinUrl(versionPath, tag.path),
+                async lazy() {
+                  const { OperationList } = await import("./OperationList.js");
+                  return {
+                    element: <OperationList tag={tag.tag} />,
+                  };
+                },
+              };
+            }),
           ],
-        },
-      ] satisfies RouteObject[],
+        };
+      });
+    },
   };
 };

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

@@ -1,10 +1,40 @@
 type OasSource =
   | { type: "url"; input: string }
-  | { type: "file"; input: any }
+  | {
+      type: "file";
+      input: {
+        [version: string]: () => Promise<unknown>;
+      };
+    }
+  | { type: "raw"; input: string };
+
+export type ContextOasSource =
+  | { type: "url"; input: string }
+  | {
+      type: "file";
+      input: () => Promise<unknown>;
+    }
   | { type: "raw"; input: string };
 
 export type OasPluginConfig = {
   server?: string;
   navigationId?: string;
   skipPreload?: boolean;
-} & OasSource;
+  tagPages?: Array<string>;
+} & OasPluginConfigOptions &
+  OasSource;
+
+export type OasPluginConfigOptions = {
+  options?: {
+    examplesDefaultLanguage?: string;
+  };
+};
+
+export type OasPluginContext = {
+  server?: string;
+  navigationId?: string;
+  skipPreload?: boolean;
+  version?: string;
+  versions: Record<string, string>;
+} & ContextOasSource &
+  OasPluginConfigOptions;

package/src/lib/plugins/openapi/playground/ExamplesDropdown.tsx

@@ -0,0 +1,54 @@
+import { Button } from "zudoku/ui/Button.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "zudoku/ui/DropdownMenu.js";
+import { Content, Example } from "../SidecarExamples.js";
+
+const ExamplesDropdown = ({
+  examples,
+  onSelect,
+}: {
+  examples: Content;
+  onSelect: (example: Example) => void;
+}) => {
+  return (
+    <div className="flex flex-col gap-2 mt-2 items-end">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline">Use Example</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-56">
+          {examples.map((example) => {
+            return (
+              <div key={example.mediaType}>
+                <DropdownMenuLabel>{example.mediaType}</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                  {example.examples?.map((example) => {
+                    return (
+                      <DropdownMenuItem
+                        key={example.name}
+                        onSelect={() => onSelect(example)}
+                        className="line-clamp-1"
+                      >
+                        {example.summary ?? example.name}
+                      </DropdownMenuItem>
+                    );
+                  })}
+                </DropdownMenuGroup>
+              </div>
+            );
+          })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+};
+
+export default ExamplesDropdown;

package/src/lib/plugins/openapi/playground/Headers.tsx

@@ -1,9 +1,49 @@
 import { XIcon } from "lucide-react";
-import { Control, useFieldArray, UseFormRegister } from "react-hook-form";
+import { useRef } from "react";
+import {
+  Control,
+  Controller,
+  useFieldArray,
+  useFormContext,
+  UseFormRegister,
+} from "react-hook-form";
+import { Card } from "zudoku/ui/Card.js";
+import { Checkbox } from "zudoku/ui/Checkbox.js";
+import { Autocomplete } from "../../../components/Autocomplete.js";
 import { Button } from "../../../ui/Button.js";
 import { Input } from "../../../ui/Input.js";
+import ParamsGrid from "./ParamsGrid.js";
 import { type PlaygroundForm } from "./Playground.js";
 
+const headerOptions = Object.freeze([
+  "Accept",
+  "Accept-Encoding",
+  "Accept-Language",
+  "Authorization",
+  "Cache-Control",
+  "Connection",
+  "Content-Disposition",
+  "Content-Encoding",
+  "Content-Language",
+  "Content-Length",
+  "Content-Range",
+  "Content-Security-Policy",
+  "Content-Type",
+  "Cookie",
+  "Date",
+  "ETag",
+  "Expires",
+  "Host",
+  "If-Modified-Since",
+  "Location",
+  "Origin",
+  "Pragma",
+  "Referer",
+  "Set-Cookie",
+  "User-Agent",
+  "X-Requested-With",
+]);
+
 export const Headers = ({
   control,
   register,
@@ -15,54 +55,112 @@ export const Headers = ({
     control,
     name: "headers",
   });
+  const { setValue } = useFormContext<PlaygroundForm>();
+  const valueRefs = useRef<Array<HTMLInputElement | null>>([]);
+  const nameRefs = useRef<Array<HTMLInputElement | null>>([]);
+
+  const addNewHeader = () => {
+    append({
+      name: "",
+      value: "",
+      active: false,
+    } as PlaygroundForm["headers"][number]);
+  };
+
+  const handleHeaderEnter = (index: number) => {
+    valueRefs.current[index]?.focus();
+  };
+
+  const handleValueEnter = (index: number) => {
+    addNewHeader();
+    requestAnimationFrame(() => nameRefs.current[index + 1]?.focus());
+  };
 
   return (
     <div className="flex flex-col gap-2">
-      <table className="w-full [&_td]:border [&_td]:p-1.5 [&_td]:px-2">
-        <tbody>
+      <Card className="overflow-hidden">
+        <ParamsGrid>
           {fields.map((header, i) => (
-            <tr
-              key={header.id}
-              className="group has-[:focus]:bg-muted/50 hover:bg-muted/50"
-            >
-              <td className="flex gap-2 items-center">
-                <Input
-                  {...register(`headers.${i}.name`)}
-                  placeholder="Name"
-                  className="border-0 shadow-none text-xs font-mono"
-                  autoComplete="off"
+            <div key={i} className="group grid col-span-full grid-cols-subgrid">
+              <div className="flex items-center gap-2 ">
+                <Controller
+                  control={control}
+                  name={`headers.${i}.active`}
+                  render={({ field }) => (
+                    <Checkbox
+                      variant="outline"
+                      id={`headers.${i}.active`}
+                      checked={field.value}
+                      onCheckedChange={(checked) => {
+                        field.onChange(checked);
+                      }}
+                    />
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name={`headers.${i}.name`}
+                  render={({ field }) => (
+                    <Autocomplete
+                      {...field}
+                      placeholder="Name"
+                      className="border-0 shadow-none bg-transparent text-xs font-mono"
+                      options={headerOptions}
+                      onEnterPress={() => handleHeaderEnter(i)}
+                      onChange={(e) => {
+                        field.onChange(e);
+                        setValue(`headers.${i}.active`, true);
+                      }}
+                      ref={(el) => {
+                        nameRefs.current[i] = el;
+                      }}
+                    />
+                  )}
+                />
+              </div>
+              <div className="flex items-center gap-2">
+                <Controller
+                  control={control}
+                  name={`headers.${i}.value`}
+                  render={({ field }) => (
+                    <Input
+                      placeholder="Value"
+                      className="w-full border-0 shadow-none text-xs font-mono focus-visible:ring-0"
+                      {...field}
+                      ref={(el) => {
+                        valueRefs.current[i] = el;
+                      }}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" && e.currentTarget.value.trim()) {
+                          handleValueEnter(i);
+                        }
+                      }}
+                      autoComplete="off"
+                    />
+                  )}
                 />
-              </td>
-              <td>
-                <div className="flex items-center gap-2">
-                  <Input
-                    placeholder={"Value"}
-                    className="border-0 shadow-none text-xs font-mono"
-                    {...register(`headers.${i}.value`)}
-                    autoComplete="off"
-                  />
-                  <Button
-                    size="icon"
-                    variant="ghost"
-                    className="text-muted-foreground opacity-0 group-hover:opacity-100"
-                    onClick={() => {
-                      remove(i);
-                    }}
-                    type="button"
-                  >
-                    <XIcon size={16} />
-                  </Button>
-                </div>
-              </td>
-            </tr>
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="text-muted-foreground opacity-0 group-hover:opacity-100 rounded-full w-8 h-7"
+                  onClick={() => {
+                    remove(i);
+                  }}
+                  type="button"
+                >
+                  <XIcon size={16} />
+                </Button>
+              </div>
+            </div>
           ))}
-        </tbody>
-      </table>
+        </ParamsGrid>
+      </Card>
       <div className="text-end">
         <Button
           className=""
-          onClick={() => append({ name: "", value: "" })}
+          onClick={addNewHeader}
           type="button"
+          variant="secondary"
         >
           Add header
         </Button>

package/src/lib/plugins/openapi/playground/ParamsGrid.tsx

@@ -0,0 +1,8 @@
+import createVariantComponent from "../../../util/createVariantComponent.js";
+
+const ParamsGrid = createVariantComponent(
+  "div",
+  "hover:bg-accent/40 grid grid-cols-[2fr_3fr] gap-2 items-center px-3",
+);
+
+export default ParamsGrid;