@lukoweb/apitogo 0.2.22 → 0.2.24

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

@@ -1,119 +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}
-              />
-            ),
-          };
-        },
-      })),
-  };
-};
+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

@@ -1,128 +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();
-};
+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

@@ -1,49 +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>
-  );
-};
+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

@@ -1,33 +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>
-  );
-};
+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>
+  );
+};