@mehdad67/apitogo 0.1.24

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

@@ -0,0 +1,174 @@
+import { type RecordAny, traverse } from "../../../util/traverse.js";
+import type { OpenAPIDocument } from "../index.js";
+/**
+ * Upgrade from OpenAPI 3.0.x to 3.1.0
+ *
+ * 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 const upgradeSchema = (schema: RecordAny): OpenAPIDocument => {
+  if (schema.openapi?.startsWith("3.0")) {
+    schema.openapi = "3.1.1";
+  }
+
+  schema = traverse(schema, (sub) => {
+    if (typeof sub.type !== "undefined" && sub.nullable === true) {
+      sub.type = ["null", sub.type];
+      delete sub.nullable;
+    }
+
+    return sub;
+  });
+
+  schema = traverse(schema, (sub) => {
+    if (sub.exclusiveMinimum === true) {
+      sub.exclusiveMinimum = sub.minimum;
+      delete sub.minimum;
+    } else if (sub.exclusiveMinimum === false) {
+      delete sub.exclusiveMinimum;
+    }
+
+    if (sub.exclusiveMaximum === true) {
+      sub.exclusiveMaximum = sub.maximum;
+      delete sub.maximum;
+    } else if (sub.exclusiveMaximum === false) {
+      delete sub.exclusiveMaximum;
+    }
+
+    return sub;
+  });
+
+  schema = traverse(schema, (sub, path) => {
+    if (sub.example !== undefined) {
+      // 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;
+  });
+
+  // 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
+        // biome-ignore lint/suspicious/noExplicitAny: Allow any type
+        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 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) => {
+    if (sub.type === "string" && sub.format === "binary") {
+      // biome-ignore lint/suspicious/noExplicitAny: Allow any type
+      return undefined as any;
+    }
+
+    return sub;
+  });
+
+  // Uploading an image with base64 encoding
+  schema = traverse(schema, (sub) => {
+    if (sub.type === "string" && sub.format === "base64") {
+      return {
+        type: "string",
+        contentEncoding: "base64",
+      };
+    }
+
+    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,80 @@
+import { Link } from "@lukoweb/apitogo/components";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Helmet } from "@zudoku/react-helmet-async";
+import { useMatch } from "react-router";
+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, "path"> & {
+  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}
+                    components={{
+                      // Because we're wrapping the description in a Link already,
+                      // we need to strip out other links to not get a hydration error, like:
+                      // > In HTML, <a> cannot be a descendant of <a>.
+                      // > This will cause a hydration error.
+                      a: (props) => <span {...props} />,
+                    }}
+                  />
+                </div>
+              </Link>
+            ))}
+        </div>
+      </div>
+    </section>
+  );
+};

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

@@ -0,0 +1,119 @@
+import { matchPath } from "react-router";
+import type { NavigationItem } from "../../../config/validators/NavigationSchema.js";
+import type { AuthState } from "../../authentication/state.js";
+import type { ApitogoPlugin } from "../../core/plugins.js";
+import { joinUrl } from "../../util/joinUrl.js";
+import { slugify } from "../../util/slugify.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 = {
+  path: string;
+  label: string;
+  categories?: CatalogCategory[];
+  items: ApiCatalogItem[];
+  filterCatalogItems?: FilterCatalogItemsFn;
+};
+
+export type CatalogContext = {
+  auth: AuthState;
+};
+
+export type FilterCatalogItemsFn = (
+  items: ApiCatalogItem[],
+  { auth }: CatalogContext,
+) => ApiCatalogItem[];
+
+export const apiCatalogPlugin = ({
+  path,
+  items,
+  label,
+  categories = [],
+  filterCatalogItems,
+}: {
+  path: string;
+  label: string;
+  categories?: CatalogCategory[];
+  items: ApiCatalogItem[];
+  filterCatalogItems?: FilterCatalogItemsFn;
+}): ApitogoPlugin => {
+  const paths = Object.fromEntries(
+    categories.flatMap((category) =>
+      [undefined, ...category.tags].map((tag) => [
+        joinUrl(path, tag ? getKey(category.label, tag) : undefined),
+        tag,
+      ]),
+    ),
+  );
+
+  return {
+    getNavigation: async (currentPath) => {
+      const matches = Object.keys(paths).some((path) =>
+        matchPath(path, currentPath),
+      );
+
+      if (!matches) {
+        return [];
+      }
+
+      const navigation: NavigationItem[] = categories.map((category) => ({
+        type: "category",
+        label: category.label,
+        collapsible: false,
+        items: category.tags.map((tag) => ({
+          type: "link",
+          to: joinUrl(path, getKey(category.label, tag)),
+          label: tag,
+          badge: {
+            label: String(
+              items.filter((api) =>
+                api.categories.find((c) => c.tags.includes(tag)),
+              ).length,
+            ),
+            color: "outline",
+          },
+        })),
+      }));
+
+      navigation.unshift({
+        type: "link",
+        to: joinUrl(path),
+        label: "Overview",
+        badge: { label: String(items.length), color: "outline" },
+      });
+
+      return navigation;
+    },
+    getRoutes: () =>
+      Object.entries(paths).map(([path, tag]) => ({
+        path,
+        async lazy() {
+          const { Catalog } = await import("./Catalog.js");
+          return {
+            element: (
+              <Catalog
+                label={label}
+                categoryLabel={tag}
+                items={items}
+                filterCatalogItems={filterCatalogItems}
+                categories={categories}
+              />
+            ),
+          };
+        },
+      })),
+  };
+};

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

@@ -0,0 +1,128 @@
+import { ActionButton } from "@lukoweb/apitogo/ui/ActionButton.js";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@lukoweb/apitogo/ui/Alert.js";
+import { DialogClose, DialogFooter } from "@lukoweb/apitogo/ui/Dialog.js";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@lukoweb/apitogo/ui/Select.js";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useForm } from "react-hook-form";
+import { useNavigate } from "react-router";
+import { useZudoku } from "../../components/context/ZudokuContext.js";
+import { useAuth } from "../../hooks/index.js";
+import { Button } from "../../ui/Button.js";
+import { Input } from "../../ui/Input.js";
+import type { ApiKeyService } from "./index.js";
+
+type CreateApiKey = { description?: string; expiresOn?: string };
+
+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: {
+      expiresOn: "30",
+    },
+  });
+  const auth = useAuth();
+
+  const createKeyMutation = useMutation({
+    mutationFn: ({ description, expiresOn }: CreateApiKey) => {
+      if (!service.createKey) {
+        throw new Error("createKey not implemented");
+      }
+
+      const expiresOnDate =
+        expiresOn !== "never" ? addDaysToDate(Number(expiresOn)) : undefined;
+
+      return service.createKey({
+        apiKey: {
+          description: description || "Secret Key",
+          expiresOn: expiresOnDate,
+        },
+        context,
+        auth,
+      });
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["api-keys"] });
+      await navigate("/settings/api-keys/");
+    },
+  });
+
+  if (!service.createKey) {
+    return null;
+  }
+
+  return (
+    <form
+      onSubmit={form.handleSubmit((data) =>
+        createKeyMutation.mutate(
+          { ...data },
+          {
+            onSuccess: () => onOpenChange(false),
+          },
+        ),
+      )}
+    >
+      {createKeyMutation.error && (
+        <Alert variant="destructive" className="mb-4">
+          <AlertTitle>Error</AlertTitle>
+          <AlertDescription>{createKeyMutation.error.message}</AlertDescription>
+        </Alert>
+      )}
+      <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 type="submit" isPending={createKeyMutation.isPending}>
+            Generate Key
+          </ActionButton>
+        </DialogFooter>
+      </div>
+    </form>
+  );
+};
+
+const addDaysToDate = (days: number): string => {
+  const date = new Date();
+  date.setDate(date.getDate() + days);
+  return date.toISOString();
+};

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

@@ -0,0 +1,49 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@lukoweb/apitogo/ui/Dialog.js";
+import type { ReactNode } from "react";
+import { Button } from "../../ui/Button.js";
+import { CreateApiKey } from "./CreateApiKey.js";
+import type { ApiKeyService } from "./index.js";
+
+interface CreateApiKeyDialogProps {
+  service: ApiKeyService;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  trigger?: ReactNode;
+  buttonVariant?:
+    | "default"
+    | "destructive"
+    | "outline"
+    | "secondary"
+    | "ghost"
+    | "link";
+}
+
+export const CreateApiKeyDialog = ({
+  service,
+  isOpen,
+  onOpenChange,
+  trigger,
+  buttonVariant = "outline",
+}: CreateApiKeyDialogProps) => {
+  const defaultTrigger = (
+    <Button variant={buttonVariant}>Create API Key</Button>
+  );
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogTrigger asChild>{trigger ?? defaultTrigger}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create API Key</DialogTitle>
+        </DialogHeader>
+        <CreateApiKey service={service} onOpenChange={onOpenChange} />
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,33 @@
+import { Outlet } from "react-router";
+import { useAuth } from "../../authentication/hook.js";
+import { DeveloperHint } from "../../components/DeveloperHint.js";
+import { Button } from "../../ui/Button.js";
+
+export const ProtectedRoute = () => {
+  const auth = useAuth();
+
+  // TODO: should we suspend here somehow?
+  if (auth.isAuthEnabled && auth.isPending) {
+    return null;
+  }
+
+  if (!auth.isAuthEnabled) {
+    return (
+      <div className="flex flex-col justify-center gap-2 items-center h-1/2">
+        <DeveloperHint className="max-w-[600px]">
+          Authentication needs to be enabled for API keys to work. Enable it in
+          your Zudoku configuration under <code>authentication</code>.
+        </DeveloperHint>
+      </div>
+    );
+  }
+
+  return auth.isAuthenticated ? (
+    <Outlet />
+  ) : (
+    <div className="flex flex-col justify-center gap-2 items-center h-1/2">
+      Please login first to view this page
+      <Button onClick={() => auth.login()}>Login</Button>
+    </div>
+  );
+};

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

@@ -0,0 +1,72 @@
+import { Button } from "@lukoweb/apitogo/components";
+import { useAuth } from "@lukoweb/apitogo/hooks";
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemTitle,
+} from "@lukoweb/apitogo/ui/Item.js";
+import { useState } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { useVerifiedEmail } from "../../authentication/hook.js";
+import { Slot } from "../../components/Slot.js";
+import { ErrorMessage } from "../../errors/ErrorMessage.js";
+import { CreateApiKeyDialog } from "./CreateApiKeyDialog.js";
+import type { ApiKeyService } from "./index.js";
+import { ApiKeyList } from "./settings/ApiKeyList.js";
+
+export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
+  const [isCreateApiKeyOpen, setIsCreateApiKeyOpen] = useState(false);
+  const auth = useAuth();
+  const { supportsEmailVerification, requestEmailVerification, refresh } =
+    useVerifiedEmail();
+
+  return (
+    <div className="max-w-3xl h-full pt-(--padding-content-top) pb-(--padding-content-bottom)">
+      <Slot.Target name="api-keys-list-page" />
+
+      <div className="flex justify-between pb-3">
+        <h1 className="font-medium text-2xl">API Keys</h1>
+
+        {service.createKey && (
+          <CreateApiKeyDialog
+            service={service}
+            isOpen={isCreateApiKeyOpen}
+            onOpenChange={setIsCreateApiKeyOpen}
+          />
+        )}
+      </div>
+      <p>Create, manage, and monitor your API keys</p>
+
+      <Slot.Target name="api-keys-list-page-before-keys" />
+      {auth.profile?.emailVerified === false ? (
+        <Item variant="outline" className="mt-4">
+          <ItemContent>
+            <ItemTitle>Verified email required</ItemTitle>
+            <ItemDescription>
+              You need to verify your email to access API keys.
+            </ItemDescription>
+          </ItemContent>
+          <ItemActions>
+            <Button onClick={refresh}>Refresh</Button>
+          </ItemActions>
+
+          {supportsEmailVerification && (
+            <ItemActions>
+              <Button onClick={() => requestEmailVerification()}>
+                Request verification
+              </Button>
+            </ItemActions>
+          )}
+        </Item>
+      ) : (
+        <ErrorBoundary
+          fallbackRender={({ error }) => <ErrorMessage error={error} />}
+        >
+          <ApiKeyList service={service} />
+        </ErrorBoundary>
+      )}
+    </div>
+  );
+};