zudoku 0.0.0-ec30b50 → 0.0.0-ee328ec

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

@@ -1,76 +1,53 @@
-import slugify from "@sindresorhus/slugify";
 import { CirclePlayIcon, LogInIcon } from "lucide-react";
-import { matchPath, redirect, RouteObject } from "react-router";
-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 { ColorMap } from "../../components/navigation/SidebarBadge.js";
 import { type ZudokuPlugin } from "../../core/plugins.js";
-import type { SchemaImports } from "../../oas/graphql/index.js";
 import { Button } from "../../ui/Button.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import { GraphQLClient } from "./client/GraphQLClient.js";
+import { createQuery } from "./client/useCreateQuery.js";
+import type { GetSidebarOperationsQuery as GetSidebarOperationsQueryResult } from "./graphql/graphql.js";
 import { graphql } from "./graphql/index.js";
-import { OasPluginConfig } from "./interfaces.js";
+import { type OasPluginConfig } from "./interfaces.js";
 import type { PlaygroundContentProps } from "./playground/Playground.js";
 import { PlaygroundDialog } from "./playground/PlaygroundDialog.js";
+import { createSidebarCategory } from "./util/createSidebarCategory.js";
+import { getRoutes, getVersions } from "./util/getRoutes.js";
 
-const GetCategoriesQuery = graphql(`
-  query GetCategories($input: JSON!, $type: SchemaType!) {
+export const GetSidebarOperationsQuery = graphql(`
+  query GetSidebarOperations($input: JSON!, $type: SchemaType!) {
     schema(input: $input, type: $type) {
-      url
       tags {
-        name
-      }
-    }
-  }
-`);
-
-const GetOperationsQuery = graphql(`
-  query GetOperations($input: JSON!, $type: SchemaType!, $tag: String) {
-    schema(input: $input, type: $type) {
-      operations(tag: $tag) {
         slug
-        deprecated
-        method
-        summary
-        operationId
-        path
-        tags {
-          name
+        name
+        extensions
+        operations {
+          summary
+          slug
+          method
+          operationId
+          path
         }
       }
-      untagged: operations(untagged: true) {
-        slug
-        deprecated
-        method
-        summary
-        operationId
-        path
+      components {
+        schemas {
+          __typename
+        }
       }
     }
   }
 `);
 
-type InternalOasPluginConfig = { schemaImports?: SchemaImports };
-
-const MethodColorMap: Record<string, keyof typeof ColorMap> = {
-  get: "green",
-  post: "blue",
-  put: "yellow",
-  delete: "red",
-  patch: "purple",
-  options: "gray",
-  head: "gray",
-};
+export type OperationResult =
+  GetSidebarOperationsQueryResult["schema"]["tags"][number]["operations"][number];
 
-export type OpenApiPluginOptions = OasPluginConfig & InternalOasPluginConfig;
+export type OpenApiPluginOptions = OasPluginConfig;
 
-const UNTAGGED_PATH = "~endpoints";
+export const UNTAGGED_PATH = "~endpoints";
 
-export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
+export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
   const basePath = joinUrl(config.navigationId ?? "/reference");
-  const versions = config.type === "file" ? Object.keys(config.input) : [];
-
   const client = new GraphQLClient(config);
 
   return {
@@ -96,9 +73,12 @@ export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
         server,
         method,
         url,
+        children,
         ...props
-      }: Partial<PlaygroundContentProps> &
-        Pick<PlaygroundContentProps, "server"> & {
+      }: Partial<PlaygroundContentProps> & { children: ReactNode } & Pick<
+          PlaygroundContentProps,
+          "server"
+        > & {
           requireAuth: boolean;
         }) => {
         const auth = useAuth();
@@ -127,96 +107,78 @@ export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
             {...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 [];
       }
 
-      try {
-        const urlVersion = versions.find((v) =>
-          path.startsWith(joinUrl(basePath, v)),
-        );
-        const version = urlVersion ?? Object.keys(config.input).at(0);
+      const match = matchPath(
+        { path: `${basePath}/:version?/:tag`, end: true },
+        path,
+      );
 
-        const tagData = 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: !config.loadTags ? tag : undefined,
+      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 query = createQuery(client, GetSidebarOperationsQuery, {
+          type,
+          input,
         });
+        const data = await context.queryClient.ensureQueryData(query);
 
-        const categories = tagData.schema.tags.flatMap<SidebarItem>((tag) => {
-          const categoryLink = joinUrl(basePath, urlVersion, slugify(tag.name));
+        const categories = data.schema.tags.flatMap((tag) => {
+          if (!tag.name || tag.operations.length === 0) return [];
 
-          const operations = operationsData.schema.operations
-            .filter(
-              (operation) =>
-                operation.tags?.length !== 0 &&
-                operation.tags?.map((t) => t.name).includes(tag.name),
-            )
-            .map((operation) => ({
-              type: "link" as const,
-              label: operation.summary ?? operation.path,
-              href: `${categoryLink}#${operation.slug}`,
-              badge: {
-                label: operation.method,
-                color: MethodColorMap[operation.method.toLowerCase()]!,
-                invert: true,
-              } as const,
-            }));
+          const categoryPath = joinUrl(basePath, versionParam, tag.slug);
 
-          if (config.loadTags && operations.length === 0) {
-            return [];
-          }
+          const isCollapsed =
+            tag.extensions?.["x-zudoku-collapsed"] ??
+            !config.options?.expandAllTags;
+          const isCollapsible =
+            tag.extensions?.["x-zudoku-collapsible"] ?? true;
 
-          return {
-            type: "category",
+          return createSidebarCategory({
             label: tag.name,
-            link: {
-              type: "doc" as const,
-              id: categoryLink,
-              label: tag.name,
-            },
-            collapsible: config.loadTags,
-            collapsed: !config.loadTags,
-            items: operations,
-          };
+            path: categoryPath,
+            operations: tag.operations,
+            collapsed: isCollapsed,
+            collapsible: isCollapsible,
+          });
         });
 
-        const { untagged } = operationsData.schema;
+        const untaggedOperations = data.schema.tags.find(
+          (tag) => !tag.name,
+        )?.operations;
 
-        if (untagged.length > 0) {
-          const categoryLink = joinUrl(basePath, urlVersion, UNTAGGED_PATH);
+        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: "category",
-            label: "Other endpoints",
-            link: {
-              type: "doc" as const,
-              id: categoryLink,
-              label: "Other endpoints",
-            },
-            collapsible: config.loadTags,
-            collapsed: !config.loadTags,
-            items: untagged.map((operation) => ({
-              type: "link" as const,
-              label: operation.summary ?? operation.path,
-              href: `${categoryLink}#${operation.slug}`,
-            })),
+            type: "link" as const,
+            label: "Schemas",
+            href: joinUrl(basePath, versionParam, "~schemas"),
           });
         }
 
@@ -225,62 +187,6 @@ export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
         return [];
       }
     },
-    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("./OpenApiRoute.js");
-            return {
-              element: (
-                <OpenApiRoute
-                  version={version ?? undefined}
-                  basePath={basePath}
-                  versions={versions}
-                  client={client}
-                  config={config}
-                />
-              ),
-            };
-          },
-          children: [
-            {
-              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} />,
-                  };
-                },
-              };
-            }),
-          ],
-        };
-      });
-    },
+    getRoutes: () => getRoutes({ basePath, config, client }),
   };
 };

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

@@ -1,3 +1,8 @@
+import { type AuthState } from "../../authentication/state.js";
+import { type ZudokuContext } from "../../core/ZudokuContext.js";
+import type { SchemaImports } from "../../oas/graphql/index.js";
+import { type OperationListItemResult } from "./OperationList.js";
+
 type DynamicInput = () => Promise<unknown>;
 
 type OasSource =
@@ -10,26 +15,51 @@ export type ContextOasSource =
   | { type: "file"; input: DynamicInput }
   | { type: "raw"; input: string };
 
-export type OasPluginConfig = {
+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;
   tagPages?: Array<string>;
-  loadTags?: boolean;
-} & OasPluginConfigOptions &
-  OasSource;
-
-export type OasPluginConfigOptions = {
+  schemaImports?: SchemaImports;
   options?: {
-    examplesDefaultLanguage?: string;
+    examplesLanguage?: string;
+    disablePlayground?: boolean;
+    disableSidecar?: boolean;
+    showVersionSelect?: "always" | "if-available" | "hide";
+    expandAllTags?: boolean;
+    transformExamples?: transformExamples;
   };
 };
 
-export type OasPluginContext = {
-  server?: string;
-  navigationId?: string;
-  skipPreload?: boolean;
-  version?: string;
-  versions: Record<string, string>;
-} & ContextOasSource &
-  OasPluginConfigOptions;
+export type OasPluginConfig = BaseOasConfig & OasSource;
+
+export type OasPluginContext = BaseOasConfig &
+  ContextOasSource & {
+    version?: string;
+    versions: Record<string, string>;
+  };

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

@@ -8,46 +8,44 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "zudoku/ui/DropdownMenu.js";
-import { Content, Example } from "../SidecarExamples.js";
+import type { Content, Example } from "../SidecarExamples.js";
 
 const ExamplesDropdown = ({
   examples,
   onSelect,
 }: {
   examples: Content;
-  onSelect: (example: Example) => void;
+  onSelect: (example: Example, mediaType: string) => 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>
+    <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>
   );
 };
 

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

@@ -98,7 +98,6 @@ export const Headers = ({
                     name={`headers.${i}.active`}
                     render={({ field }) => (
                       <Checkbox
-                        variant="outline"
                         id={`headers.${i}.active`}
                         checked={field.value}
                         onCheckedChange={(checked) => {
@@ -114,7 +113,7 @@ export const Headers = ({
                       <Autocomplete
                         {...field}
                         placeholder="Name"
-                        className="border-0 shadow-none bg-transparent text-xs font-mono"
+                        className="border-0 shadow-none focus-visible:ring-0 bg-transparent hover:bg-transparent text-xs font-mono"
                         options={[...missingHeaders, ...headerOptions]}
                         onEnterPress={() => handleHeaderEnter(i)}
                         onChange={(e) => {
@@ -167,7 +166,7 @@ export const Headers = ({
                             field.onChange(e);
                             setValue(`headers.${i}.active`, true);
                           }}
-                          className="font-mono text-xs border-0"
+                          className="border-0 shadow-none focus-visible:ring-0 bg-transparent hover:bg-transparent text-xs font-mono"
                         />
                       );
                     }}

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

@@ -0,0 +1,74 @@
+import { useState } from "react";
+import { Button } from "zudoku/ui/Button.js";
+import { Checkbox } from "zudoku/ui/Checkbox.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogTitle,
+} from "zudoku/ui/Dialog.js";
+import { Label } from "zudoku/ui/Label.js";
+import { type ApiIdentity } from "../../../core/ZudokuContext.js";
+import IdentitySelector from "./IdentitySelector.js";
+
+const IdentityDialog = ({
+  onSubmit,
+  identities,
+  open,
+  onOpenChange,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: ({
+    rememberedIdentity,
+    identity,
+  }: {
+    rememberedIdentity: boolean;
+    identity?: string;
+  }) => void;
+  identities: ApiIdentity[];
+}) => {
+  const [identity, setIdentity] = useState<string | undefined>(undefined);
+  const [rememberedIdentity, setRememberedIdentity] = useState<boolean>(false);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogTitle>Select an auth identity</DialogTitle>
+        <DialogDescription>
+          Please select an identity for this request.
+        </DialogDescription>
+        <div className="max-h-80 overflow-auto">
+          <IdentitySelector
+            identities={identities}
+            setValue={setIdentity}
+            value={identity}
+          />
+        </div>
+        <DialogFooter className="flex flex-col gap-2">
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id="remember"
+              checked={rememberedIdentity}
+              onCheckedChange={(checked) =>
+                setRememberedIdentity(
+                  checked === "indeterminate" ? false : !!checked,
+                )
+              }
+            />
+            <Label htmlFor="remember">Remember my choice</Label>
+          </div>
+
+          <Button
+            onClick={() => onSubmit({ identity: identity, rememberedIdentity })}
+          >
+            Send
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export { IdentityDialog };

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

@@ -0,0 +1,54 @@
+import { Card } from "zudoku/ui/Card.js";
+import { Label } from "zudoku/ui/Label.js";
+import { RadioGroup, RadioGroupItem } from "zudoku/ui/RadioGroup.js";
+import { type ApiIdentity } from "../../../core/ZudokuContext.js";
+import { NO_IDENTITY } from "./Playground.js";
+
+const IdentitySelector = ({
+  identities,
+  setValue,
+  value,
+}: {
+  identities?: ApiIdentity[];
+  setValue: (value: string) => void;
+  value?: string;
+}) => {
+  return (
+    <Card className="w-full overflow-hidden">
+      <RadioGroup
+        onValueChange={(value) => setValue(value)}
+        value={value}
+        defaultValue={NO_IDENTITY}
+        className="gap-0"
+        disabled={identities?.length === 0}
+      >
+        <Label
+          className="h-12 border-b items-center flex p-4 cursor-pointer hover:bg-accent"
+          htmlFor="none"
+        >
+          <RadioGroupItem value={NO_IDENTITY} id="none">
+            None
+          </RadioGroupItem>
+          <Label htmlFor="none" className="ms-2">
+            None
+          </Label>
+        </Label>
+        {identities?.map((identity) => (
+          <Label
+            key={identity.id}
+            className="h-12 border-b items-center flex p-4 cursor-pointer hover:bg-accent"
+          >
+            <RadioGroupItem value={identity.id} id={identity.id}>
+              {identity.label}
+            </RadioGroupItem>
+            <Label htmlFor={identity.id} className="ms-2">
+              {identity.label}
+            </Label>
+          </Label>
+        ))}
+      </RadioGroup>
+    </Card>
+  );
+};
+
+export default IdentitySelector;

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

@@ -1,4 +1,4 @@
-import { Control, Controller, useFieldArray } from "react-hook-form";
+import { type Control, Controller, useFieldArray } from "react-hook-form";
 import { Card } from "zudoku/ui/Card.js";
 import { Input } from "../../../ui/Input.js";
 import { ColorizedParam } from "../ColorizedParam.js";
@@ -7,18 +7,24 @@ import type { PlaygroundForm } from "./Playground.js";
 
 export const PathParams = ({
   control,
+  url,
 }: {
   control: Control<PlaygroundForm>;
+  url: string;
 }) => {
   const { fields } = useFieldArray<PlaygroundForm, "pathParams">({
     control,
     name: "pathParams",
   });
 
+  const sortedFields = [...fields].sort(
+    (a, b) => url.indexOf(`{${a.name}}`) - url.indexOf(`{${b.name}}`),
+  );
+
   return (
     <Card className="rounded-lg">
       <ParamsGrid>
-        {fields.map((field, i) => (
+        {sortedFields.map((field, i) => (
           <ParamsGridItem key={field.id}>
             <Controller
               control={control}