zudoku 0.0.0-fed343e → 0.0.0-feda542

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

@@ -1,86 +1,53 @@
-import { matchPath, useRouteError, type RouteObject } from "react-router-dom";
-import { type DevPortalPlugin } from "../../core/plugins.js";
-import { graphql } from "./graphql/index.js";
-import {
-  Client as UrqlClient,
-  cacheExchange,
-  fetchExchange,
-} from "./util/urql.js";
-
-import { useQuery } from "@tanstack/react-query";
 import { CirclePlayIcon, LogInIcon } from "lucide-react";
-import { createClient } from "zudoku/openapi-worker";
-import type { SidebarItem } from "../../../config/validators/SidebarSchema.js";
+import { type ReactNode } from "react";
+import { matchPath } from "react-router";
 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 { Button } from "../../ui/Button.js";
-import { joinPath } from "../../util/joinPath.js";
-import { OasPluginConfig } from "./interfaces.js";
+import { joinUrl } from "../../util/joinUrl.js";
+import { GraphQLClient } from "./client/GraphQLClient.js";
+import type { GetSidebarOperationsQuery } from "./graphql/graphql.js";
+import { graphql } from "./graphql/index.js";
+import { type OasPluginConfig } from "./interfaces.js";
 import type { PlaygroundContentProps } from "./playground/Playground.js";
 import { PlaygroundDialog } from "./playground/PlaygroundDialog.js";
-import { GetServerQuery } from "./Sidecar.js";
+import { createSidebarCategory } from "./util/createSidebarCategory.js";
+import { getRoutes, getVersions } from "./util/getRoutes.js";
 
-const GetCategoriesQuery = graphql(`
-  query GetCategories($input: JSON!, $type: SchemaType!) {
+const GetSidebarOperationsQuery = graphql(`
+  query GetSidebarOperations($input: JSON!, $type: SchemaType!) {
     schema(input: $input, type: $type) {
       tags {
-        __typename
+        slug
         name
+        extensions
         operations {
-          __typename
+          summary
           slug
-          deprecated
           method
-          summary
           operationId
           path
         }
       }
+      components {
+        schemas {
+          __typename
+        }
+      }
     }
   }
 `);
 
-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} />
-  );
-};
-
-type InternalOasPluginConfig = { inMemory?: boolean };
+export type OperationResult =
+  GetSidebarOperationsQuery["schema"]["tags"][number]["operations"][number];
 
-const MethodColorMap: Record<string, keyof typeof ColorMap> = {
-  get: "green",
-  post: "blue",
-  put: "yellow",
-  delete: "red",
-  patch: "purple",
-  options: "gray",
-  head: "gray",
-};
+export type OpenApiPluginOptions = OasPluginConfig;
 
-export type OpenApiPluginOptions = OasPluginConfig & InternalOasPluginConfig;
+export const UNTAGGED_PATH = "~endpoints";
 
-export const openApiPlugin = (
-  config: OpenApiPluginOptions,
-): DevPortalPlugin => {
-  const basePath = joinPath(config.navigationId ?? "/reference");
-
-  const client = config.server
-    ? new UrqlClient({
-        url: config.server,
-        exchanges: [cacheExchange, fetchExchange],
-      })
-    : createClient({ useMemoryClient: config.inMemory ?? false });
+export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
+  const basePath = joinUrl(config.navigationId ?? "/reference");
+  const client = new GraphQLClient(config);
 
   return {
     getHead: () => {
@@ -105,21 +72,19 @@ export const openApiPlugin = (
         server,
         method,
         url,
+        children,
         ...props
-      }: Partial<PlaygroundContentProps> & { requireAuth: boolean }) => {
+      }: Partial<PlaygroundContentProps> & { children: ReactNode } & 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 (
@@ -137,83 +102,90 @@ 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">
-              Open in Playground <CirclePlayIcon size={16} />
+              {children ?? (
+                <>
+                  Open in Playground <CirclePlayIcon size={16} />
+                </>
+              )}
             </Button>
           </PlaygroundDialog>
         );
       },
     }),
-    getSidebar: async (path: string) => {
+    getSidebar: async (path, context) => {
       if (!matchPath({ path: basePath, end: false }, path)) {
         return [];
       }
 
-      const { data } = await client.query(GetCategoriesQuery, {
-        input: config.input,
-        type: config.type,
-      });
-
-      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()],
-            },
-          })),
-        }));
-
-      categories.unshift({
-        type: "link",
-        label: "Overview",
-        href: "#description",
-      });
-
-      return categories;
+      const match = matchPath(
+        { path: `${basePath}/:version?/:tag`, end: true },
+        path,
+      );
+
+      try {
+        const versionParam = match?.params.version;
+        const version = versionParam ?? getVersions(config).at(0);
+        const { type } = config;
+        const input = type === "file" ? config.input[version!] : config.input;
+
+        const data = await context.queryClient.ensureQueryData({
+          queryKey: ["sidebar-operations-query", input],
+          queryFn: () =>
+            client.fetch(GetSidebarOperationsQuery, { type, input }),
+        });
+
+        const categories = data.schema.tags.flatMap((tag) => {
+          if (!tag.name || tag.operations.length === 0) return [];
+
+          const categoryPath = joinUrl(basePath, versionParam, tag.slug);
+
+          const isCollapsed =
+            tag.extensions?.["x-zudoku-collapsed"] ??
+            !config.options?.expandAllTags;
+          const isCollapsible =
+            tag.extensions?.["x-zudoku-collapsible"] ?? true;
+
+          return createSidebarCategory({
+            label: tag.name,
+            path: categoryPath,
+            operations: tag.operations,
+            collapsed: isCollapsed,
+            collapsible: isCollapsible,
+          });
+        });
+
+        const untaggedOperations = data.schema.tags.find(
+          (tag) => !tag.name,
+        )?.operations;
+
+        if (untaggedOperations) {
+          categories.push(
+            createSidebarCategory({
+              label: "Other endpoints",
+              path: joinUrl(basePath, versionParam, UNTAGGED_PATH),
+              operations: untaggedOperations,
+              collapsed: !config.options?.expandAllTags,
+            }),
+          );
+        }
+
+        if (data.schema.components?.schemas?.length) {
+          categories.push({
+            type: "link" as const,
+            label: "Schemas",
+            href: joinUrl(basePath, versionParam, "~schemas"),
+          });
+        }
+
+        return categories;
+      } catch {
+        return [];
+      }
     },
-    getRoutes: () =>
-      [
-        {
-          async lazy() {
-            const { OpenApiRoute } = await import("./Route.js");
-            return {
-              element: <OpenApiRoute client={client} config={config} />,
-            };
-          },
-          errorElement: <OpenApiErrorPage />,
-          children: [
-            {
-              path: basePath,
-              children: [
-                {
-                  index: true,
-                  async lazy() {
-                    const { OperationList } = await import(
-                      "./OperationList.js"
-                    );
-                    return { element: <OperationList /> };
-                  },
-                },
-              ],
-            },
-          ],
-        },
-      ] satisfies RouteObject[],
+    getRoutes: () => getRoutes({ basePath, config, client }),
   };
 };

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

@@ -1,7 +1,64 @@
-type OasSource = { type: "url"; input: string } | { type: "file"; input: any };
+import { AuthState } from "../../authentication/state.js";
+import { ZudokuContext } from "../../core/ZudokuContext.js";
+import type { SchemaImports } from "../../oas/graphql/index.js";
+import { OperationListItemResult } from "./OperationList.js";
 
-export type OasPluginConfig = {
+type DynamicInput = () => Promise<unknown>;
+
+type OasSource =
+  | { type: "url"; input: string }
+  | { type: "file"; input: { [version: string]: DynamicInput } }
+  | { type: "raw"; input: string };
+
+export type ContextOasSource =
+  | { type: "url"; input: string }
+  | { type: "file"; input: DynamicInput }
+  | { type: "raw"; input: string };
+
+type Example = {
+  name: string;
+  description?: string | null;
+  externalValue?: string | null;
+  value?: any | null;
+  summary?: string | null;
+};
+
+type Content = {
+  mediaType: string;
+  schema?: any | null;
+  encoding?: Array<{
+    name: string;
+  }> | null;
+  examples?: Array<Example> | null;
+};
+
+export type transformExamples = (options: {
+  content: Content[];
+  context: ZudokuContext;
+  auth: AuthState;
+  operation: OperationListItemResult;
+  type: "request" | "response";
+}) => Content[];
+
+type BaseOasConfig = {
   server?: string;
   navigationId?: string;
   skipPreload?: boolean;
-} & OasSource;
+  tagPages?: Array<string>;
+  schemaImports?: SchemaImports;
+  options?: {
+    examplesLanguage?: string;
+    disablePlayground?: boolean;
+    showVersionSelect?: "always" | "if-available" | "hide";
+    expandAllTags?: boolean;
+    transformExamples?: transformExamples;
+  };
+};
+
+export type OasPluginConfig = BaseOasConfig & OasSource;
+
+export type OasPluginContext = BaseOasConfig &
+  ContextOasSource & {
+    version?: string;
+    versions: Record<string, string>;
+  };

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

@@ -0,0 +1,52 @@
+import { Button } from "zudoku/ui/Button.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "zudoku/ui/DropdownMenu.js";
+import type { Content, Example } from "../SidecarExamples.js";
+
+const ExamplesDropdown = ({
+  examples,
+  onSelect,
+}: {
+  examples: Content;
+  onSelect: (example: Example, mediaType: string) => void;
+}) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Use Example</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="max-w-72">
+        {examples.map((mediaTypeObject) => (
+          <div key={mediaTypeObject.mediaType}>
+            <DropdownMenuLabel>{mediaTypeObject.mediaType}</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              {mediaTypeObject.examples?.map((example) => (
+                <DropdownMenuItem
+                  key={example.name}
+                  onSelect={() => onSelect(example, mediaTypeObject.mediaType)}
+                >
+                  <span
+                    className="line-clamp-1"
+                    title={example.summary ?? example.name}
+                  >
+                    {example.summary ?? example.name}
+                  </span>
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuGroup>
+          </div>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export default ExamplesDropdown;

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

@@ -1,68 +1,197 @@
 import { XIcon } from "lucide-react";
-import { Control, useFieldArray, UseFormRegister } from "react-hook-form";
+import { useCallback, useEffect, useRef } from "react";
+import {
+  Control,
+  Controller,
+  useFieldArray,
+  useFormContext,
+} 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 { type PlaygroundForm } from "./Playground.js";
+import ParamsGrid, { ParamsGridItem } from "./ParamsGrid.js";
+import { Header, 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,
+  headers: schemaHeaders,
 }: {
-  register: UseFormRegister<PlaygroundForm>;
   control: Control<PlaygroundForm>;
+  headers: Header[];
 }) => {
-  const { fields, append, remove } = useFieldArray<PlaygroundForm>({
+  const { fields, append, remove } = useFieldArray<PlaygroundForm, "headers">({
     control,
     name: "headers",
   });
+  const { setValue, watch } = useFormContext<PlaygroundForm>();
+  const valueRefs = useRef<Array<HTMLInputElement | null>>([]);
+  const nameRefs = useRef<Array<HTMLInputElement | null>>([]);
+  const watchedHeaders = watch("headers");
+
+  const addNewHeader = useCallback(() => {
+    append({ name: "", value: "", active: false });
+  }, [append]);
+
+  useEffect(() => {
+    if (watchedHeaders.length === 0) {
+      addNewHeader();
+    }
+  }, [watchedHeaders, addNewHeader]);
+
+  const handleHeaderEnter = (index: number) => {
+    valueRefs.current[index]?.focus();
+  };
+
+  const handleValueEnter = (index: number) => {
+    addNewHeader();
+    requestAnimationFrame(() => nameRefs.current[index + 1]?.focus());
+  };
+
+  const missingHeaders = schemaHeaders
+    .filter((h) => !watchedHeaders.some((f) => f.name === h.name))
+    .map(({ name }) => name);
 
   return (
     <div className="flex flex-col gap-2">
-      <table className="w-full [&_td]:border [&_td]:p-1.5 [&_td]:px-2">
-        <tbody>
-          {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"
-                />
-              </td>
-              <td>
+      <Card className="overflow-hidden">
+        <ParamsGrid>
+          {fields.map((field, i) => {
+            const currentHeader = schemaHeaders.find(
+              (h) => h.name === watch(`headers.${i}.name`),
+            );
+            return (
+              <ParamsGridItem key={field.id}>
+                <div className="flex items-center gap-2 ">
+                  <Controller
+                    control={control}
+                    name={`headers.${i}.active`}
+                    render={({ field }) => (
+                      <Checkbox
+                        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={[...missingHeaders, ...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">
-                  <Input
-                    placeholder={"Value"}
-                    className="border-0 shadow-none text-xs font-mono"
-                    {...register(`headers.${i}.value`)}
-                    autoComplete="off"
+                  <Controller
+                    control={control}
+                    name={`headers.${i}.value`}
+                    render={({ field }) => {
+                      const hasEnum =
+                        currentHeader?.enum && currentHeader.enum.length > 0;
+
+                      if (!hasEnum) {
+                        return (
+                          <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"
+                          />
+                        );
+                      }
+
+                      return (
+                        <Autocomplete
+                          shouldFilter={false}
+                          value={field.value}
+                          options={currentHeader.enum ?? []}
+                          onChange={(e) => {
+                            field.onChange(e);
+                            setValue(`headers.${i}.active`, true);
+                          }}
+                          className="font-mono text-xs border-0"
+                        />
+                      );
+                    }}
                   />
                   <Button
                     size="icon"
                     variant="ghost"
-                    className="text-muted-foreground opacity-0 group-hover:opacity-100"
-                    onClick={() => {
-                      remove(i);
-                    }}
+                    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>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
+              </ParamsGridItem>
+            );
+          })}
+        </ParamsGrid>
+      </Card>
       <div className="text-end">
         <Button
           className=""
-          onClick={() => append({ name: "", value: "" })}
+          onClick={addNewHeader}
           type="button"
+          variant="secondary"
         >
           Add header
         </Button>