@indietabletop/appkit 3.2.0-8 → 3.2.0

package/lib/DialogTrigger/index.tsx

@@ -0,0 +1,36 @@
+import {
+  DialogProvider,
+  useDialogContext,
+  useStoreState,
+} from "@ariakit/react";
+import type { ReactElement, ReactNode } from "react";
+
+function DialogGuard(props: { children: ReactNode }) {
+  const dialog = useDialogContext();
+  const isMounted = useStoreState(dialog, (store) => store?.mounted);
+  if (!isMounted) {
+    return null;
+  }
+  return props.children;
+}
+
+/**
+ * Wraps AriaKit's DialogProvider, but take a tuple of Dialog a DialogDisclosure
+ * elements as children, and makes sense that the Dialog component is not
+ * rendered when it is hidden.
+ *
+ * This is important in cases where the dialog contains a form that should only
+ * be initialized and re-initialized when the dialog opens, not when it is first
+ * rendered.
+ */
+export function DialogTrigger(props: {
+  children: [ReactElement, ReactElement];
+}) {
+  const [dialog, button] = props.children;
+  return (
+    <DialogProvider>
+      <DialogGuard>{dialog}</DialogGuard>
+      {button}
+    </DialogProvider>
+  );
+}

package/lib/Letterhead/style.css.ts

@@ -2,7 +2,7 @@ import { createTheme, style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 import { textVariants } from "../atomic.css.ts";
 import { manofa, minion } from "../common.css.ts";
-import { Hover } from "../media.ts";
+import { Hover, MinWidth } from "../media.ts";
 
 const align = {
   start: textVariants({ textAlign: "start" }),
@@ -11,7 +11,7 @@ const align = {
 };
 
 export const [letterheadTheme, { padding, footerMargin }] = createTheme({
-  padding: "clamp(1rem, 8vw, 4rem)",
+  padding: "1.25rem",
   footerMargin: "3rem",
 });
 
@@ -25,6 +25,14 @@ export const letterhead = recipe({
       borderRadius: "1rem",
       marginInline: "auto",
       maxInlineSize: "36rem",
+
+      "@media": {
+        [MinWidth.SMALL]: {
+          vars: {
+            [padding]: `clamp(1.5rem, 8%, 4rem)`,
+          },
+        },
+      },
     },
   ],
 

package/lib/LetterheadForm/style.css.ts

@@ -19,6 +19,7 @@ export const fieldLabel = style([
     fontSize: "0.75rem",
     fontWeight: 600,
     marginBottom: "0.5rem",
+    textAlign: "start",
   },
 ]);
 
@@ -31,6 +32,7 @@ export const fieldInput = style([
     fontSize: "1rem",
     lineHeight: "1.25rem",
     padding: "1rem 0 1rem 1rem",
+    textAlign: "start",
 
     ":read-only": {
       backgroundColor: "hsl(0 0% 0% / 0.05)",
@@ -50,6 +52,7 @@ export const fieldIssue = style({
   color: Color.PURPLE,
   fontSize: "0.875rem",
   marginTop: "0.5rem",
+  textAlign: "start",
 
   ":empty": {
     display: "none",
@@ -60,6 +63,7 @@ export const fieldHint = style({
   color: Color.MID_GRAY,
   fontSize: "0.875rem",
   marginTop: "0.5rem",
+  textAlign: "start",
 
   selectors: {
     [`${fieldIssue}:not(:empty) + &`]: {
@@ -73,6 +77,7 @@ export const submitError = style({
   color: Color.PURPLE,
   backgroundColor: Color.PALE_GRAY,
   borderRadius: "0.75rem",
+  textAlign: "start",
 
   ":empty": {
     display: "none",

package/lib/ModalDialog/index.tsx

@@ -0,0 +1,28 @@
+import { Dialog, type DialogProps } from "@ariakit/react";
+import type { RecipeVariants } from "@vanilla-extract/recipes";
+import type { ReactNode } from "react";
+import { cx } from "../class-names.ts";
+import * as css from "./style.css.ts";
+
+type Size = NonNullable<NonNullable<RecipeVariants<typeof css.dialog>>["size"]>;
+
+export type ModalDialogProps = Omit<DialogProps, "modal" | "backdrop"> & {
+  children: ReactNode;
+  size: Size;
+  backdropClassName?: string;
+};
+
+export function ModalDialog(props: ModalDialogProps) {
+  const { size, backdropClassName, className, ...dialogProps } = props;
+
+  return (
+    <Dialog
+      {...dialogProps}
+      {...cx(className, css.dialog({ size }))}
+      backdrop={<div {...cx(css.backdrop, backdropClassName)} />}
+      modal
+    >
+      {props.children}
+    </Dialog>
+  );
+}

package/lib/ModalDialog/style.css.ts

@@ -0,0 +1,87 @@
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { MinWidth } from "../media.ts";
+
+const scaleTransition = {
+  transition: "transform 200ms, opacity 200ms",
+  transform: "scale(1.1)",
+
+  selectors: {
+    "&[data-enter]": {
+      opacity: 1,
+      transform: "scale(1)",
+    },
+
+    "&[data-leave]": {
+      opacity: 0,
+      transform: "scale(0.9)",
+    },
+  },
+};
+
+const translateTransition = {
+  transition: "transform 200ms, opacity 200ms",
+  transform: "translateY(5rem)",
+
+  selectors: {
+    "&[data-enter]": {
+      opacity: 1,
+      transform: "translateY(0)",
+    },
+
+    "&[data-leave]": {
+      opacity: 0,
+      transform: "translateY(5rem)",
+    },
+  },
+};
+
+export const dialog = recipe({
+  base: {
+    position: "fixed",
+    inset: 0,
+    zIndex: 100,
+    margin: "auto",
+    overflow: "auto",
+    opacity: 0,
+    backgroundColor: "white",
+  },
+
+  variants: {
+    size: {
+      large: {
+        ...translateTransition,
+        inlineSize: "100%",
+        blockSize: "100%",
+
+        "@media": {
+          [MinWidth.MEDIUM]: {
+            ...scaleTransition,
+            blockSize: "fit-content",
+            maxInlineSize: "40rem",
+            maxBlockSize: "90%",
+            borderRadius: "1rem",
+          },
+        },
+      },
+
+      small: {
+        ...scaleTransition,
+        inlineSize: "min(24rem, 90svw)",
+        blockSize: "fit-content",
+        borderRadius: "1rem",
+      },
+    },
+  },
+});
+
+export const backdrop = style({
+  backgroundColor: "black",
+  opacity: 0,
+  transition: "opacity 200ms",
+  selectors: {
+    "&[data-enter]": {
+      opacity: 0.4,
+    },
+  },
+});

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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,169 @@
+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/failureMessages.ts

@@ -0,0 +1,108 @@
+import type { FailurePayload } from "./types.ts";
+
+type OnOverride<T> = (fallback: T, override?: Partial<T>) => T;
+
+function createFailureMessageGetter<T>(
+  defaults: Record<number | "fallback" | "connection", T>,
+  options: { onOverride: OnOverride<T> },
+) {
+  return function getMessage(
+    failure: FailurePayload,
+    overrides: Record<number, Partial<T>> = {},
+  ) {
+    switch (failure.type) {
+      case "API_ERROR": {
+        return options.onOverride(
+          defaults[failure.code] ?? defaults.fallback,
+          overrides[failure.code],
+        );
+      }
+
+      case "NETWORK_ERROR": {
+        return defaults.connection;
+      }
+
+      default: {
+        return defaults.fallback;
+      }
+    }
+  };
+}
+
+export type FetchFailureAction =
+  | {
+      type: "LINK";
+      href: string;
+      label: string;
+    }
+  | {
+      type: "RELOAD" | "REFETCH";
+      label: string;
+    };
+
+export type FetchFailureMessages = {
+  title: string;
+  description: string;
+  action: FetchFailureAction;
+};
+
+export const getFetchFailureMessages =
+  createFailureMessageGetter<FetchFailureMessages>(
+    {
+      401: {
+        title: "Not logged in",
+        description: "You must be logged in to view this page.",
+        action: { type: "LINK", href: "~/login", label: "Go to login" },
+      },
+      403: {
+        title: "Not authorized",
+        description: "You might be logged into the wrong account.",
+        action: { type: "LINK", href: "~/login", label: "Go to login" },
+      },
+      404: {
+        title: `Not found`,
+        description: `The link you have followed might be broken.`,
+        action: { type: "LINK", href: "~/", label: "Go back" },
+      },
+      500: {
+        title: `Ooops, something went wrong`,
+        description: `This is probably an issue with our servers. You can try refreshing.`,
+        action: { type: "RELOAD", label: "Reload app" },
+      },
+      connection: {
+        title: `No connection`,
+        description: `Check your interent connection and try again.`,
+        action: { type: "REFETCH", label: "Retry request" },
+      },
+      fallback: {
+        title: `Ooops, something went wrong`,
+        description: `This is probably an issue on our side. You can try refreshing.`,
+        action: { type: "RELOAD", label: "Reload app" },
+      },
+    },
+    {
+      onOverride(fallback, override) {
+        return { ...fallback, ...override };
+      },
+    },
+  );
+
+export const getSubmitFailureMessage = createFailureMessageGetter(
+  {
+    500: `Could not submit form due to an unexpected server error. Please refresh the page and try again.`,
+    connection: `Could not submit form due to network error. Make sure you are connected to the internet and try again.`,
+    fallback: `Could not submit form due to an unexpected error. Please refresh the page and try again.`,
+  },
+  {
+    onOverride(fallback, override) {
+      return override ?? fallback;
+    },
+  },
+);
+
+/**
+ * @deprecated Use {@link getSubmitFailureMessage} instead.
+ */
+export function toKnownFailureMessage(failure: FailurePayload) {
+  return getSubmitFailureMessage(failure);
+}

package/lib/globals.css.ts

@@ -8,6 +8,7 @@ globalStyle(":root", {
   textRendering: "optimizeLegibility",
   WebkitFontSmoothing: "antialiased",
   MozOsxFontSmoothing: "grayscale",
+  WebkitTapHighlightColor: "transparent",
 });
 
 globalStyle("*", {

package/lib/index.ts

@@ -1,4 +1,5 @@
 // Components
+export * from "./DialogTrigger/index.tsx";
 export * from "./ExternalLink.tsx";
 export * from "./FormSubmitButton.tsx";
 export * from "./FullscreenDismissBlocker.tsx";
@@ -6,6 +7,7 @@ export * from "./IndieTabletopClubSymbol.tsx";
 export * from "./Letterhead/index.tsx";
 export * from "./LetterheadForm/index.tsx";
 export * from "./LoadingIndicator.tsx";
+export * from "./ModalDialog/index.tsx";
 export * from "./ServiceWorkerHandler.tsx";
 
 // Hooks
@@ -23,7 +25,9 @@ export * from "./async-op.ts";
 export * from "./caught-value.ts";
 export * from "./class-names.ts";
 export * from "./client.ts";
-export * from "./knownFailure.ts";
+export * from "./failureMessages.ts";
 export * from "./media.ts";
+export * from "./random.ts";
 export * from "./structs.ts";
 export * from "./types.ts";
+export * from "./validations.ts";

package/lib/random.ts

@@ -0,0 +1,7 @@
+export function random(max: number) {
+  return Math.floor(Math.random() * max);
+}
+
+export function randomItem<T>(array: T[]) {
+  return array[random(array.length)];
+}

package/lib/validations.ts

@@ -0,0 +1,25 @@
+export const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
+
+export const validEmail = (value: string) => {
+  if (value && !EMAIL_REGEX.test(value)) {
+    return "This doesn't look like a valid email.";
+  }
+
+  return null;
+};
+
+export const validPassword = (value: string) => {
+  if (value) {
+    if (value.length < 8) {
+      return "A password has to be at least 8 characters long.";
+    }
+
+    if (value.length > 256) {
+      return "A password cannot be longer than 256 characters.";
+    }
+
+    return null;
+  }
+
+  return null;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indietabletop/appkit",
-  "version": "3.2.0-8",
+  "version": "3.2.0",
   "description": "A collection of modules used in apps built by Indie Tabletop Club",
   "private": false,
   "type": "module",
@@ -27,7 +27,7 @@
   "devDependencies": {
     "@storybook/addon-docs": "^9.0.4",
     "@storybook/react-vite": "^9.0.4",
-    "@types/react": "^19.0.8",
+    "@types/react": "^19.1.8",
     "np": "^10.1.0",
     "storybook": "^9.0.4",
     "typescript": "^5.8.2",

package/lib/knownFailure.ts

@@ -1,9 +0,0 @@
-import type { FailurePayload } from "./types.ts";
-
-export function toKnownFailureMessage(failure: FailurePayload) {
-  if (failure.type === "NETWORK_ERROR") {
-    return "Could not submit form due to network error. Make sure you are connected to the internet and try again.";
-  }
-
-  return "Could not submit form due to an unexpected error. Please refresh the page and try again.";
-}