@indietabletop/appkit 4.0.0-0 → 4.0.0-1

package/lib/AppConfig/AppConfig.tsx

@@ -4,6 +4,7 @@ import type { AppHrefs } from "../hrefs.ts";
 
 export type AppConfig = {
   appName: string;
+  isDev: boolean;
   client: IndieTabletopClient;
   hrefs: AppHrefs;
   placeholders: {

package/lib/DocumentTitle/DocumentTitle.tsx

@@ -1,9 +1,10 @@
 import { useAppConfig } from "../AppConfig/AppConfig.tsx";
 
 export function DocumentTitle(props: { children: string }) {
-  const { children: title } = props;
-  const { appName } = useAppConfig();
+  const { children: children } = props;
+  const { appName, isDev } = useAppConfig();
   const itc = `${appName} · Indie Tabletop Club`;
+  const title = children ? `${children} | ${itc}` : itc;
 
-  return <title>{title ? `${title} | ${itc}` : itc}</title>;
+  return <title>{isDev ? `[DEV] ${title}` : title}</title>;
 }

package/lib/account/CurrentUserFetcher.tsx

@@ -119,6 +119,8 @@ export function CurrentUserFetcher(props: CurrentUserFetcherProps) {
             <VerifyAccountView
               currentUser={serverUser}
               onClose={() => setOpen(false)}
+              onLogout={onLogout}
+              reload={reload}
             />
           </ModalDialog>
 

package/lib/account/VerifyPage.tsx

@@ -2,6 +2,7 @@ import { Button, Form } from "@ariakit/react";
 import { useState, type Dispatch, type SetStateAction } from "react";
 import { Link } from "wouter";
 import { useAppConfig, useClient } from "../AppConfig/AppConfig.tsx";
+import { interactiveText } from "../common.css.ts";
 import { getSubmitFailureMessage } from "../failureMessages.ts";
 import {
   Letterhead,
@@ -18,13 +19,20 @@ import {
 } from "../LetterheadForm/index.tsx";
 import type { CurrentUser } from "../types.ts";
 import { useForm } from "../use-form.ts";
-import type { EventHandler } from "./types.ts";
+import type { EventHandler, EventHandlerWithReload } from "./types.ts";
 
-type SetStep = Dispatch<SetStateAction<Steps>>;
+type SetStep = Dispatch<SetStateAction<VerifyStep>>;
+
+function InitialStep(props: {
+  setStep: SetStep;
+  currentUser: CurrentUser;
+  onLogout: EventHandlerWithReload;
+  reload: () => void;
+}) {
+  const { setStep, onLogout, currentUser, reload } = props;
+  const { email } = currentUser;
 
-function InitialStep(props: { setStep: SetStep; currentUser: CurrentUser }) {
   const client = useClient();
-  const { email } = props.currentUser;
   const { form, submitName } = useForm({
     defaultValues: {},
     async onSubmit() {
@@ -32,7 +40,7 @@ function InitialStep(props: { setStep: SetStep; currentUser: CurrentUser }) {
       return op.mapFailure(getSubmitFailureMessage);
     },
     onSuccess(value) {
-      props.setStep({ type: "SUBMIT_CODE", tokenId: value.tokenId });
+      setStep({ type: "SUBMIT_CODE", tokenId: value.tokenId });
     },
   });
 
@@ -50,6 +58,16 @@ function InitialStep(props: { setStep: SetStep; currentUser: CurrentUser }) {
         <LetterheadFormActions>
           <LetterheadSubmitError name={submitName} />
           <LetterheadSubmitButton>Send code</LetterheadSubmitButton>
+          <LetterheadParagraph>
+            Cannot complete verification?{" "}
+            <Button
+              className={interactiveText}
+              onClick={() => void onLogout({ reload })}
+            >
+              Log out
+            </Button>
+            .
+          </LetterheadParagraph>
         </LetterheadFormActions>
       </Letterhead>
     </Form>
@@ -138,13 +156,15 @@ function SuccessStep(props: { onClose?: EventHandler }) {
   );
 }
 
-type Steps =
+type VerifyStep =
   | { type: "INITIAL" }
   | { type: "SUBMIT_CODE"; tokenId: string }
   | { type: "SUCCESS" };
 
 export function VerifyAccountView(props: {
   currentUser: CurrentUser;
+  onLogout: EventHandlerWithReload;
+  reload: () => void;
 
   /**
    * If provided, will cause the success step to render a close dialog button
@@ -154,18 +174,15 @@ export function VerifyAccountView(props: {
    */
   onClose?: EventHandler;
 }) {
-  const { currentUser } = props;
-  const [step, setStep] = useState<Steps>({ type: "INITIAL" });
+  const [step, setStep] = useState<VerifyStep>({ type: "INITIAL" });
 
   switch (step.type) {
     case "INITIAL": {
-      return <InitialStep setStep={setStep} currentUser={currentUser} />;
+      return <InitialStep {...props} setStep={setStep} />;
     }
 
     case "SUBMIT_CODE": {
-      return (
-        <SubmitCodeStep {...step} setStep={setStep} currentUser={currentUser} />
-      );
+      return <SubmitCodeStep {...props} {...step} setStep={setStep} />;
     }
 
     case "SUCCESS": {
@@ -173,45 +190,3 @@ export function VerifyAccountView(props: {
     }
   }
 }
-
-// TODO: Decide if to remove this?
-function AlreadyVerifiedView() {
-  const { hrefs } = useAppConfig();
-
-  return (
-    <Letterhead>
-      <LetterheadHeader>
-        <LetterheadHeading>Already Verified</LetterheadHeading>
-        <LetterheadParagraph>
-          Your user account has already been verified. You're all good!
-        </LetterheadParagraph>
-      </LetterheadHeader>
-
-      <Link href={hrefs.dashboard()} className={button()}>
-        Back to dashboard
-      </Link>
-    </Letterhead>
-  );
-}
-
-// TODO: Decide if to remove this?
-export function VerifyCard(props: { currentUser: CurrentUser | null }) {
-  const { currentUser } = props;
-
-  if (!currentUser) {
-    return (
-      <Letterhead>
-        <LetterheadHeading>Cannot verify</LetterheadHeading>
-        <LetterheadParagraph>
-          You must be logged in to verify your account.
-        </LetterheadParagraph>
-      </Letterhead>
-    );
-  }
-
-  if (currentUser.isVerified) {
-    return <AlreadyVerifiedView />;
-  }
-
-  return <VerifyAccountView currentUser={currentUser} />;
-}

package/lib/account/useCurrentUserResult.tsx

@@ -23,7 +23,22 @@ export function useCurrentUserResult(options?: {
   // with caching or any of that business.
   useEffect(() => {
     if (performFetch) {
-      client.getCurrentUser().then((result) => setResult(result));
+      const fetchUserAndStoreResult = async () => {
+        setResult(new Pending());
+
+        const result = await client.getCurrentUser();
+        setResult(result);
+      };
+
+      // Invoke the fetch action
+      fetchUserAndStoreResult();
+
+      // Set up listeners for data revalidation
+      window.addEventListener("focus", fetchUserAndStoreResult);
+
+      return () => {
+        window.removeEventListener("focus", fetchUserAndStoreResult);
+      };
     }
   }, [client, latestAttemptTs, performFetch]);
 

package/lib/copyrightRange.ts

@@ -1,6 +1,10 @@
 export function copyrightRange(yearSince: number) {
   const currentYear = new Date().getFullYear();
-  return currentYear === yearSince
-    ? `© ${yearSince}`
-    : `© ${yearSince}–${currentYear}`;
+
+  // Handle edge-case in which yearSince is greater than currentYear.
+  const clampedYearSince = Math.min(yearSince, currentYear);
+
+  return currentYear === clampedYearSince
+    ? `© ${clampedYearSince}`
+    : `© ${clampedYearSince}–${currentYear}`;
 }

package/lib/types.ts

@@ -7,6 +7,23 @@ type Brand<B> = { __brand: B };
 
 export type Branded<T, B> = T & Brand<B>;
 
+/**
+ * Make properties in union K required in T.
+ *
+ * @example
+ * ```ts
+ * interface User {
+ *   id: string;
+ *   name?: string;
+ *   email?: string;
+ * }
+ *
+ * type UserWithRequiredName = RequiredPick<User, 'name'>;
+ * // Result: { id: string; name: string; email?: string; }
+ * ```
+ */
+export type RequiredPick<T, K extends keyof T> = T & Required<Pick<T, K>>;
+
 /**
  * A branded string.
  *

package/lib/utm.ts

@@ -84,6 +84,9 @@ export function utm(params: UtmParams) {
  */
 export function createUtm(defaults: UtmParams) {
   return function (params?: Partial<UtmParams>) {
-    return utm({ ...defaults, ...params });
+    return utm({
+      ...defaults,
+      ...(params && omitUndefinedKeys(params)),
+    });
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indietabletop/appkit",
-  "version": "4.0.0-0",
+  "version": "4.0.0-1",
   "description": "A collection of modules used in apps built by Indie Tabletop Club",
   "private": false,
   "type": "module",
@@ -25,17 +25,17 @@
     "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^9.1.6",
-    "@storybook/addon-links": "^9.1.7",
-    "@storybook/react-vite": "^9.1.6",
+    "@storybook/addon-docs": "^9.1.10",
+    "@storybook/addon-links": "^9.1.10",
+    "@storybook/react-vite": "^9.1.10",
     "@types/react": "^19.1.8",
     "msw": "^2.11.2",
     "msw-storybook-addon": "^2.0.5",
     "np": "^10.1.0",
-    "storybook": "^9.1.6",
+    "storybook": "^9.1.10",
     "typescript": "^5.8.2",
     "vite": "^6.3.5",
-    "vitest": "^3.0.5"
+    "vitest": "^3.2.4"
   },
   "dependencies": {
     "@ariakit/react": "^0.4.17",

package/lib/append-copy-to-text.test.ts

@@ -1,29 +0,0 @@
-import { describe, expect, test } from "vitest";
-import {
-  appendCopyToText,
-  maybeAppendCopyToText,
-} from "./append-copy-to-text.ts";
-
-describe("appendCopyToText", () => {
-  test("Appends ' (Copy)' to provided string", () => {
-    const returnValue = appendCopyToText("Zangrad Raiders");
-    expect(returnValue).toBe("Zangrad Raiders (Copy)");
-  });
-
-  test("Adds a copy count number if string already ends in ' (Copy)'", () => {
-    const returnValue = appendCopyToText("Zangrad Raiders (Copy)");
-    expect(returnValue).toBe("Zangrad Raiders (Copy 2)");
-  });
-
-  test("Increments a copy count number if one already exists", () => {
-    const returnValue = appendCopyToText("Zangrad Raiders (Copy 2)");
-    expect(returnValue).toBe("Zangrad Raiders (Copy 3)");
-  });
-});
-
-describe("maybeAppendCopyToText", () => {
-  test("Ignores empty strings", () => {
-    const returnValue = maybeAppendCopyToText("");
-    expect(returnValue).toBe("");
-  });
-});

package/lib/failureMessages.test.ts

@@ -1,169 +0,0 @@
-import { describe, expect, test } from "vitest";
-import {
-  getFetchFailureMessages,
-  getSubmitFailureMessage,
-} from "./failureMessages.ts";
-
-describe("getFetchFailureMessages", () => {
-  test("Returns correct message for API_ERROR with code 404", () => {
-    const result = getFetchFailureMessages({ type: "API_ERROR", code: 404 });
-
-    expect(result).toMatchInlineSnapshot(`
-      {
-        "action": {
-          "href": "~/",
-          "label": "Go back",
-          "type": "LINK",
-        },
-        "description": "The link you have followed might be broken.",
-        "title": "Not found",
-      }
-    `);
-  });
-
-  test("Returns correct message for API_ERROR with code 500", () => {
-    const result = getFetchFailureMessages({ type: "API_ERROR", code: 500 });
-
-    expect(result).toMatchInlineSnapshot(`
-      {
-        "action": {
-          "label": "Reload app",
-          "type": "RELOAD",
-        },
-        "description": "This is probably an issue with our servers. You can try refreshing.",
-        "title": "Ooops, something went wrong",
-      }
-    `);
-  });
-
-  test("Returns correct message for API_ERROR with partial override", () => {
-    const result = getFetchFailureMessages(
-      { type: "API_ERROR", code: 404 },
-      { 404: { title: `Army not found` } },
-    );
-
-    expect(result).toMatchInlineSnapshot(`
-      {
-        "action": {
-          "href": "~/",
-          "label": "Go back",
-          "type": "LINK",
-        },
-        "description": "The link you have followed might be broken.",
-        "title": "Army not found",
-      }
-    `);
-  });
-
-  test("Returns correct message for API_ERROR with override", () => {
-    const result = getFetchFailureMessages(
-      { type: "API_ERROR", code: 404 },
-      {
-        404: {
-          title: `Army not found`,
-          description: `It might have been deleted.`,
-        },
-      },
-    );
-
-    expect(result).toMatchInlineSnapshot(`
-      {
-        "action": {
-          "href": "~/",
-          "label": "Go back",
-          "type": "LINK",
-        },
-        "description": "It might have been deleted.",
-        "title": "Army not found",
-      }
-    `);
-  });
-
-  test("Returns correct message for NETWORK_ERROR", () => {
-    const result = getFetchFailureMessages({ type: "NETWORK_ERROR" });
-
-    expect(result).toMatchInlineSnapshot(`
-      {
-        "action": {
-          "label": "Retry request",
-          "type": "REFETCH",
-        },
-        "description": "Check your interent connection and try again.",
-        "title": "No connection",
-      }
-    `);
-  });
-
-  test("Returns correct message for UNKNOWN_ERROR", () => {
-    const result = getFetchFailureMessages({ type: "UNKNOWN_ERROR" });
-
-    expect(result).toMatchInlineSnapshot(`
-      {
-        "action": {
-          "label": "Reload app",
-          "type": "RELOAD",
-        },
-        "description": "This is probably an issue on our side. You can try refreshing.",
-        "title": "Ooops, something went wrong",
-      }
-    `);
-  });
-
-  test("Returns correct message for an unrecognised error type", () => {
-    const result = getFetchFailureMessages({ type: "FOO" as any });
-
-    expect(result).toMatchInlineSnapshot(`
-      {
-        "action": {
-          "label": "Reload app",
-          "type": "RELOAD",
-        },
-        "description": "This is probably an issue on our side. You can try refreshing.",
-        "title": "Ooops, something went wrong",
-      }
-    `);
-  });
-});
-
-describe("getSubmitFailureMessage", () => {
-  test("Returns correct message for API_ERROR with code 500", () => {
-    const message = getSubmitFailureMessage({ type: "API_ERROR", code: 500 });
-    expect(message).toMatchInlineSnapshot(
-      `"Could not submit form due to an unexpected server error. Please refresh the page and try again."`,
-    );
-  });
-
-  test("Returns correct message for API_ERROR with override", () => {
-    const message = getSubmitFailureMessage(
-      { type: "API_ERROR", code: 401 },
-      { 401: `Username and password do not match. Please try again.` },
-    );
-    expect(message).toMatchInlineSnapshot(
-      `"Username and password do not match. Please try again."`,
-    );
-  });
-
-  test("Returns correct message for NETWORK_ERROR", () => {
-    const result = getSubmitFailureMessage({ type: "NETWORK_ERROR" });
-
-    expect(result).toMatchInlineSnapshot(
-      `"Could not submit form due to network error. Make sure you are connected to the internet and try again."`,
-    );
-  });
-
-  test("Returns correct message for UNKNOWN_ERROR", () => {
-    const result = getSubmitFailureMessage({ type: "UNKNOWN_ERROR" });
-
-    expect(result).toMatchInlineSnapshot(
-      `"Could not submit form due to an unexpected error. Please refresh the page and try again."`,
-    );
-  });
-
-  test("Returns correct message for an unrecognised error type", () => {
-    const result = getSubmitFailureMessage({ type: "FOO" as any });
-
-    expect(result).toMatchInlineSnapshot(
-      `"Could not submit form due to an unexpected error. Please refresh the page and try again."`,
-    );
-  });
-});

package/lib/mailto.test.ts

@@ -1,66 +0,0 @@
-import { describe, expect, test } from "vitest";
-import { mailto as emailTemplateToMailto } from "./mailto.ts";
-
-describe("emailTempalteToMailto", () => {
-  test("correctly serializes data", () => {
-    expect(
-      emailTemplateToMailto(null, {
-        body: `Hello world!\n\nI am URL escaped.`,
-        subject: `This is a subject?`,
-        cc: null,
-      }),
-    ).toMatchInlineSnapshot(
-      `"mailto:?body=Hello%20world!%0A%0AI%20am%20URL%20escaped.&subject=This%20is%20a%20subject%3F"`,
-    );
-  });
-
-  test("includes recipient when provided", () => {
-    expect(
-      emailTemplateToMailto("hi@example.com", {
-        body: `Hello world!\n\nI am URL escaped.`,
-        subject: `This is a subject?`,
-        cc: null,
-      }),
-    ).toMatchInlineSnapshot(
-      `"mailto:hi@example.com?body=Hello%20world!%0A%0AI%20am%20URL%20escaped.&subject=This%20is%20a%20subject%3F"`,
-    );
-  });
-
-  test("includes cc when provided", () => {
-    expect(
-      emailTemplateToMailto("hi@example.com", {
-        body: `Hello world!\n\nI am URL escaped.`,
-        subject: `This is a subject?`,
-        cc: "cc@example.com",
-      }),
-    ).toMatchInlineSnapshot(
-      `"mailto:hi@example.com?body=Hello%20world!%0A%0AI%20am%20URL%20escaped.&subject=This%20is%20a%20subject%3F&cc=cc%40example.com"`,
-    );
-  });
-
-  test("includes bcc when provided", () => {
-    expect(
-      emailTemplateToMailto("hi@example.com", {
-        body: `Hello world!\n\nI am URL escaped.`,
-        subject: `This is a subject?`,
-        cc: "cc@example.com",
-        bcc: "bcc@example.com",
-      }),
-    ).toMatchInlineSnapshot(
-      `"mailto:hi@example.com?body=Hello%20world!%0A%0AI%20am%20URL%20escaped.&subject=This%20is%20a%20subject%3F&cc=cc%40example.com&bcc=bcc%40example.com"`,
-    );
-  });
-
-  test("cc and bcc allow array values", () => {
-    expect(
-      emailTemplateToMailto("hi@example.com", {
-        body: `Hello world!\n\nI am URL escaped.`,
-        subject: `This is a subject?`,
-        cc: ["cc@example.com", "cc2@example.com"],
-        bcc: ["bcc@example.com", "bcc2@example.com"],
-      }),
-    ).toMatchInlineSnapshot(
-      `"mailto:hi@example.com?body=Hello%20world!%0A%0AI%20am%20URL%20escaped.&subject=This%20is%20a%20subject%3F&cc=cc%40example.com%2Ccc2%40example.com&bcc=bcc%40example.com%2Cbcc2%40example.com"`,
-    );
-  });
-});

package/lib/unique.test.ts

@@ -1,22 +0,0 @@
-import { describe, expect, test } from "vitest";
-import { uniqueBy } from "./unique.ts";
-
-describe("unique", () => {
-  test("Returns unique items based on getKey", () => {
-    const result = uniqueBy(
-      [{ id: "zxcvbn" }, { id: "qwerty" }, { id: "zxcvbn" }],
-      (item) => item.id,
-    );
-
-    expect(result).toMatchInlineSnapshot(`
-      [
-        {
-          "id": "zxcvbn",
-        },
-        {
-          "id": "qwerty",
-        },
-      ]
-    `);
-  });
-});