zudoku 0.0.0-ff3bc72 → 0.0.0-zuplo-api-keys.534c6f8

package/src/lib/oas/parser/index.ts

@@ -1,13 +1,18 @@
+import { merge as mergeAllOf } from "allof-merge";
 import { GraphQLError } from "graphql/error/index.js";
 import { OpenAPIV3, type OpenAPIV3_1 } from "openapi-types";
 import { dereference, type JSONSchema } from "./dereference/index.js";
 import { upgradeSchema } from "./upgrade/index.js";
 
-type ReferenceObject = OpenAPIV3_1.ReferenceObject;
-type DeepOmitReference<T> = T extends ReferenceObject
+// Must be an interface (not a type) to allow merging with OpenAPI types with index signatures
+interface WithRef {
+  __$ref?: string;
+}
+
+type DeepOmitReference<T> = T extends OpenAPIV3_1.ReferenceObject
   ? never
   : T extends object
-    ? { [K in keyof T]: DeepOmitReference<T[K]> }
+    ? { [K in keyof T]: DeepOmitReference<T[K]> } & WithRef
     : T;
 
 export type OpenAPIDocument = DeepOmitReference<OpenAPIV3_1.Document>;
@@ -24,25 +29,6 @@ export type ServerObject = DeepOmitReference<OpenAPIV3_1.ServerObject>;
 
 export const HttpMethods = Object.values(OpenAPIV3.HttpMethods);
 
-// class ValidationError extends Error {
-//   constructor(public errors: OutputUnit[]) {
-//     super("Validation error");
-//   }
-// }
-
-// const getValidator = async (openApiVersion: string) => {
-//   if (openApiVersion.startsWith("3.0")) {
-//     const schema = (await import("./schemas/v3.0.json")) as any;
-//     return new Validator(schema, "4");
-//   }
-//   if (openApiVersion.startsWith("3.1")) {
-//     const schema = (await import("./schemas/v3.1.json")) as any;
-//     return new Validator(schema as any, "2020-12");
-//   }
-
-//   throw new Error(`Unsupported OpenAPI version: ${openApiVersion}`);
-// };
-
 const parseSchemaInput = async (
   schemaInput: unknown,
 ): Promise<JSONSchema & { openapi?: string }> => {
@@ -102,6 +88,9 @@ const parseSchemaInput = async (
 
 /**
  * Validates, dereferences and upgrades the OpenAPI schema (to v3.1) if necessary.
+ *
+ * This only happens for URL schemas (or in standalone mode).
+ * File schemas are pre-processed by the SchemaManager
  */
 export const validate = async (schemaInput: unknown) => {
   const schema = await parseSchemaInput(schemaInput);
@@ -110,14 +99,9 @@ export const validate = async (schemaInput: unknown) => {
     throw new GraphQLError("OpenAPI version is not defined");
   }
 
-  // const validator = await getValidator(schema.openapi);
-  // const result = validator.validate(schema);
-  //
-  // if (!result.valid) {
-  //   throw new ValidationError(result.errors);
-  // }
-
   const dereferenced = await dereference(schema);
+  const upgraded = upgradeSchema(dereferenced);
+  const merged = mergeAllOf(upgraded) as OpenAPIDocument;
 
-  return upgradeSchema(dereferenced);
+  return merged;
 };

package/src/lib/oas/parser/upgrade/index.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { type RecordAny, traverse } from "../../../util/traverse.js";
 import type { OpenAPIDocument } from "../index.js";
 /**
  * Upgrade from OpenAPI 3.0.x to 3.1.0
@@ -6,36 +7,14 @@ import type { OpenAPIDocument } from "../index.js";
  * Taken from https://github.com/scalar/openapi-parser/blob/main/packages/openapi-parser/src/utils/upgradeFromThreeToThreeOne.ts
  * https://www.openapis.org/blog/2021/02/16/migrating-from-openapi-3-0-to-3-1-0
  */
-export function traverse(
-  specification: Record<string, any>,
-  transform: (specification: Record<string, any>) => Record<string, any>,
-) {
-  const result: Record<string, any> = {};
-
-  for (const [key, value] of Object.entries(specification)) {
-    if (Array.isArray(value)) {
-      result[key] = value.map((item) =>
-        typeof item === "object" && item !== null
-          ? traverse(item, transform)
-          : item,
-      );
-    } else if (typeof value === "object" && value !== null) {
-      result[key] = traverse(value, transform);
-    } else {
-      result[key] = value;
-    }
-  }
-
-  return transform(result);
-}
 
-export const upgradeSchema = (schema: Record<string, any>): OpenAPIDocument => {
+export const upgradeSchema = (schema: RecordAny): OpenAPIDocument => {
   if (schema.openapi?.startsWith("3.0")) {
-    schema.openapi = "3.1.0";
+    schema.openapi = "3.1.1";
   }
 
   schema = traverse(schema, (sub) => {
-    if (sub.type !== "undefined" && sub.nullable === true) {
+    if (typeof sub.type !== "undefined" && sub.nullable === true) {
       sub.type = ["null", sub.type];
       delete sub.nullable;
     }
@@ -61,28 +40,72 @@ export const upgradeSchema = (schema: Record<string, any>): OpenAPIDocument => {
     return sub;
   });
 
-  schema = traverse(schema, (sub) => {
+  schema = traverse(schema, (sub, path) => {
     if (sub.example !== undefined) {
-      sub.examples = {
-        default: sub.example,
-      };
+      // Arrays in schemas
+      if (isSchemaPath(path ?? [])) {
+        sub.examples = [sub.example];
+      } else {
+        // Objects everywhere else
+        sub.examples = {
+          default: {
+            value: sub.example,
+          },
+        };
+      }
       delete sub.example;
     }
-
     return sub;
   });
 
-  schema = traverse(schema, (sub) => {
-    if (sub.type === "object" && sub.properties !== undefined) {
-      for (const [, value] of Object.entries(sub.properties)) {
-        const v = (value ?? {}) as Record<string, any>;
-        if (v.type === "string" && v.format === "binary") {
-          v.contentEncoding = "application/octet-stream";
-          delete v.format;
+  // Multipart file uploads with a binary file
+  schema = traverse(schema, (schema, path) => {
+    if (schema.type === "object" && schema.properties !== undefined) {
+      // Check if this is a multipart request body schema
+      const parentPath = path?.slice(0, -1);
+      const isMultipart = parentPath?.some((segment, index) => {
+        return (
+          segment === "content" && path?.[index + 1] === "multipart/form-data"
+        );
+      });
+
+      if (isMultipart) {
+        // Types
+        const entries: [string, any][] = Object.entries(schema.properties);
+
+        for (const [, value] of entries) {
+          if (
+            typeof value === "object" &&
+            value.type === "string" &&
+            value.format === "binary"
+          ) {
+            value.contentMediaType = "application/octet-stream";
+            delete value.format;
+          }
         }
       }
     }
-    return sub;
+
+    return schema;
+  });
+
+  // Uploading a binary file in a POST request
+  schema = traverse(schema, (schema, path) => {
+    if (
+      path?.includes("content") &&
+      path.includes("application/octet-stream")
+    ) {
+      return {};
+    }
+
+    if (schema.type === "string" && schema.format === "binary") {
+      return {
+        type: "string",
+        contentMediaType: "application/octet-stream",
+      };
+    }
+
+    return schema;
   });
 
   schema = traverse(schema, (sub) => {
@@ -93,6 +116,7 @@ export const upgradeSchema = (schema: Record<string, any>): OpenAPIDocument => {
     return sub;
   });
 
+  // Uploading an image with base64 encoding
   schema = traverse(schema, (sub) => {
     if (sub.type === "string" && sub.format === "base64") {
       return {
@@ -104,5 +128,46 @@ export const upgradeSchema = (schema: Record<string, any>): OpenAPIDocument => {
     return sub;
   });
 
+  schema = traverse(schema, (schema, path) => {
+    if (schema.type === "string" && schema.format === "byte") {
+      const parentPath = path?.slice(0, -1);
+      const contentMediaType = parentPath?.find(
+        (_, index) => path?.[index - 1] === "content",
+      );
+
+      return {
+        type: "string",
+        contentEncoding: "base64",
+        contentMediaType,
+      };
+    }
+
+    return schema;
+  });
+
   return schema as OpenAPIDocument;
 };
+
+export function isSchemaPath(path: string[]): boolean {
+  const schemaLocations = [
+    ["components", "schemas"],
+    "properties",
+    "items",
+    "allOf",
+    "anyOf",
+    "oneOf",
+    "not",
+    "additionalProperties",
+  ];
+
+  return (
+    schemaLocations.some((location) => {
+      if (Array.isArray(location)) {
+        return location.every((segment, index) => path[index] === segment);
+      }
+      return path.includes(location);
+    }) ||
+    path.includes("schema") ||
+    path.some((segment) => segment.endsWith("Schema"))
+  );
+}

package/src/lib/plugins/api-catalog/Catalog.tsx

@@ -0,0 +1,73 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Helmet } from "@zudoku/react-helmet-async";
+import { useMatch } from "react-router";
+import { Link } from "zudoku/components";
+import { useAuthState } from "../../authentication/state.js";
+import { Heading } from "../../components/Heading.js";
+import { Markdown } from "../../components/Markdown.js";
+import { joinUrl } from "../../util/joinUrl.js";
+import { type ApiCatalogPluginOptions, getKey } from "./index.js";
+
+export const Catalog = ({
+  items,
+  filterCatalogItems = (items) => items,
+  label = "API Library",
+  categoryLabel,
+}: Omit<ApiCatalogPluginOptions, "navigationId"> & {
+  categoryLabel?: string;
+}) => {
+  const auth = useAuthState();
+  const match = useMatch({ path: "/catalog/:category" });
+  const activeCategory = match?.params.category;
+
+  const catalogItems = useSuspenseQuery({
+    queryFn: () => filterCatalogItems(items, { auth }),
+    queryKey: ["catalogItems", auth],
+  });
+
+  // Only index the overview page, ignore the rest
+  const dataSet = activeCategory ? { "data-pagefind-ignore": "all" } : {};
+
+  return (
+    <section className="pt-(--padding-content-top)" {...dataSet}>
+      <Helmet>
+        <title>
+          {categoryLabel ? `${categoryLabel} - ` : ""}
+          {label}
+        </title>
+      </Helmet>
+      <div className="grid gap-4">
+        <Heading level={2}>
+          {label}
+          {categoryLabel && ` - ${categoryLabel}`}
+        </Heading>
+
+        <div className="grid grid-cols-2 gap-4">
+          {catalogItems.data
+            .filter(
+              (api) =>
+                !activeCategory ||
+                api.categories.find((c) =>
+                  c.tags.find((t) => getKey(c.label, t) === activeCategory),
+                ),
+            )
+            .map((api) => (
+              <Link
+                to={joinUrl(api.path)}
+                className="no-underline hover:!text-foreground"
+                key={api.path}
+              >
+                <div className="border h-full rounded-lg p-4 flex flex-col gap-2 cursor-pointer hover:bg-border/20 font-normal">
+                  <span className="font-semibold">{api.label}</span>
+                  <Markdown
+                    className="text-sm whitespace-pre-wrap mb-6 line-clamp-2"
+                    content={api.description}
+                  />
+                </div>
+              </Link>
+            ))}
+        </div>
+      </div>
+    </section>
+  );
+};

package/src/lib/plugins/api-catalog/index.tsx

@@ -0,0 +1,115 @@
+import slugify from "@sindresorhus/slugify";
+import { matchPath } from "react-router";
+import type { SidebarItem } from "../../../config/validators/SidebarSchema.js";
+import type { AuthState } from "../../authentication/state.js";
+import type { ZudokuPlugin } from "../../core/plugins.js";
+import { joinUrl } from "../../util/joinUrl.js";
+import { Catalog } from "./Catalog.js";
+
+export const getKey = (category: string, tag: string) =>
+  slugify(`${category}-${tag}`);
+
+export type ApiCatalogItem = {
+  path: string;
+  label: string;
+  description: string;
+  categories: CatalogCategory[];
+};
+
+export type CatalogCategory = {
+  label: string;
+  tags: string[];
+};
+
+export type ApiCatalogPluginOptions = {
+  navigationId: string;
+  label: string;
+  categories?: CatalogCategory[];
+  items: ApiCatalogItem[];
+  filterCatalogItems?: filterCatalogItems;
+};
+
+export type CatalogContext<ProviderData = unknown> = {
+  auth: AuthState<ProviderData>;
+};
+
+export type filterCatalogItems<ProviderData = unknown> = (
+  items: ApiCatalogItem[],
+  { auth }: CatalogContext<ProviderData>,
+) => ApiCatalogItem[];
+
+export const apiCatalogPlugin = ({
+  navigationId,
+  items,
+  label,
+  categories = [],
+  filterCatalogItems,
+}: {
+  navigationId: string;
+  label: string;
+  categories?: CatalogCategory[];
+  items: ApiCatalogItem[];
+  filterCatalogItems?: filterCatalogItems;
+}): ZudokuPlugin => {
+  const paths = Object.fromEntries(
+    categories.flatMap((category) =>
+      [undefined, ...category.tags].map((tag) => [
+        joinUrl(navigationId, tag ? getKey(category.label, tag) : undefined),
+        tag,
+      ]),
+    ),
+  );
+
+  return {
+    getSidebar: async (currentPath) => {
+      const matches = Object.keys(paths).some((path) =>
+        matchPath(path, currentPath),
+      );
+
+      if (!matches) {
+        return [];
+      }
+
+      const sidebar: SidebarItem[] = categories.map((category) => ({
+        type: "category" as const,
+        label: category.label,
+        collapsible: false,
+        items: category.tags.map((tag) => ({
+          type: "doc" as const,
+          id: joinUrl(navigationId, getKey(category.label, tag)),
+          label: tag,
+          badge: {
+            label: String(
+              items.filter((api) =>
+                api.categories.find((c) => c.tags.includes(tag)),
+              ).length,
+            ),
+            color: "outline" as const,
+          },
+        })),
+      }));
+
+      sidebar.unshift({
+        type: "doc" as const,
+        id: joinUrl(navigationId),
+        label: "Overview",
+        badge: { label: String(items.length), color: "outline" as const },
+      });
+
+      return sidebar;
+    },
+    getRoutes: () =>
+      Object.entries(paths).map(([path, tag]) => ({
+        path,
+        element: (
+          <Catalog
+            label={label}
+            categoryLabel={tag}
+            items={items}
+            filterCatalogItems={filterCatalogItems}
+            categories={categories}
+          />
+        ),
+      })),
+  };
+};

package/src/lib/plugins/api-keys/CreateApiKey.tsx

@@ -1,7 +1,8 @@
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useForm } from "react-hook-form";
-import { Link, useNavigate } from "react-router-dom";
-import { useZudoku } from "../../components/context/ZudokuContext.js";
+import { useNavigate } from "react-router";
+import { ActionButton } from "zudoku/ui/ActionButton.js";
+import { DialogClose, DialogFooter } from "zudoku/ui/Dialog.js";
 import {
   Select,
   SelectContent,
@@ -9,15 +10,23 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "../../components/Select.js";
+} from "zudoku/ui/Select.js";
+import { useZudoku } from "../../components/context/ZudokuContext.js";
 import { Button } from "../../ui/Button.js";
 import { Input } from "../../ui/Input.js";
-import { ApiKeyService } from "./index.js";
+import { type ApiKeyService } from "./index.js";
 
-type CreateApiKey = { description: string; expiresOn?: string };
+type CreateApiKey = { description?: string; expiresOn?: string };
 
-export const CreateApiKey = ({ service }: { service: ApiKeyService }) => {
+export const CreateApiKey = ({
+  service,
+  onOpenChange,
+}: {
+  service: ApiKeyService;
+  onOpenChange: (open: boolean) => void;
+}) => {
   const context = useZudoku();
+  const queryClient = useQueryClient();
   const navigate = useNavigate();
   const form = useForm<CreateApiKey>({
     defaultValues: {
@@ -27,18 +36,21 @@ export const CreateApiKey = ({ service }: { service: ApiKeyService }) => {
   const createKeyMutation = useMutation({
     mutationFn: ({ description, expiresOn }: CreateApiKey) => {
       if (!service.createKey) {
-        throw new Error("deleteKey not implemented");
+        throw new Error("createKey not implemented");
       }
 
       const expiresOnDate =
         expiresOn !== "never" ? addDaysToDate(Number(expiresOn)) : undefined;
 
       return service.createKey(
-        { description: description, expiresOn: expiresOnDate },
+        { description: description || "Secret Key", expiresOn: expiresOnDate },
         context,
       );
     },
-    onSuccess: () => navigate("/settings/api-keys/"),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["api-keys"] });
+      await navigate("/settings/api-keys/");
+    },
   });
 
   if (!service.createKey) {
@@ -46,44 +58,48 @@ export const CreateApiKey = ({ service }: { service: ApiKeyService }) => {
   }
 
   return (
-    <div className="max-w-screen-lg pt-[--padding-content-top] pb-[--padding-content-bottom]">
-      <div className="flex justify-between mb-4 border-b pb-1">
-        <h1 className="font-medium text-2xl">New API Key</h1>
+    <form
+      onSubmit={form.handleSubmit((data) =>
+        createKeyMutation.mutate(
+          { ...data },
+          {
+            onSuccess: () => onOpenChange(false),
+          },
+        ),
+      )}
+    >
+      <div className="flex gap-2 flex-col text-sm font-medium">
+        Name
+        <Input {...form.register("description")} />
+        Expiration
+        <Select
+          onValueChange={(value) => form.setValue("expiresOn", value)}
+          defaultValue={form.getValues("expiresOn")}
+        >
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              {[7, 30, 60, 90].map((option) => (
+                <SelectItem value={String(option)} key={option}>
+                  {option} days
+                </SelectItem>
+              ))}
+              <SelectItem value="never">Never</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <ActionButton isPending={createKeyMutation.isPending}>
+            Generate Key
+          </ActionButton>
+        </DialogFooter>
       </div>
-      <form
-        onSubmit={form.handleSubmit((data) => createKeyMutation.mutate(data))}
-      >
-        <div className="flex gap-2 flex-col">
-          Note
-          <Input {...form.register("description")} />
-          Expiration
-          <Select
-            onValueChange={(value) => form.setValue("expiresOn", value)}
-            defaultValue={form.getValues("expiresOn")}
-          >
-            <SelectTrigger>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectGroup>
-                {[7, 30, 60, 90].map((option) => (
-                  <SelectItem value={String(option)} key={option}>
-                    {option} days
-                  </SelectItem>
-                ))}
-                <SelectItem value="never">Never</SelectItem>
-              </SelectGroup>
-            </SelectContent>
-          </Select>
-          <div className="flex gap-2">
-            <Button>Generate Key</Button>
-            <Button variant="outline" asChild>
-              <Link to="/settings/api-keys/">Cancel</Link>
-            </Button>
-          </div>
-        </div>
-      </form>
-    </div>
+    </form>
   );
 };
 

package/src/lib/plugins/api-keys/ProtectedRoute.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from "react-router-dom";
+import { Outlet } from "react-router";
 import { useAuth } from "../../authentication/hook.js";
 import { DeveloperHint } from "../../components/DeveloperHint.js";
 import { Button } from "../../ui/Button.js";