@lukoweb/apitogo 0.1.0 → 0.1.2

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

@@ -1,124 +1,128 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useForm } from "react-hook-form";
-import { useNavigate } from "react-router";
-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 { 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 type { ReactNode } from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@lukoweb/apitogo/ui/Dialog.js";
-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/SettingsApiKeys.tsx

@@ -1,72 +1,72 @@
-import { useState } from "react";
-import { ErrorBoundary } from "react-error-boundary";
-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 { 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>
-  );
-};
+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>
+  );
+};