@indietabletop/appkit 3.2.0-9 → 3.3.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/client.ts

@@ -285,4 +285,35 @@ export class IndieTabletopClient {
 
     return result;
   }
+
+  /**
+   * Uploads a file given S3 presigned config.
+   */
+  async uploadFile(
+    file: File,
+    presigned: { url: string; key: string; fields: Record<string, string> },
+  ): Promise<Success<string> | Failure<FailurePayload>> {
+    const formData = new FormData();
+
+    for (const [key, value] of Object.entries(presigned.fields)) {
+      formData.append(key, value);
+    }
+
+    formData.append("file", file);
+
+    try {
+      const upload = await fetch(presigned.url, {
+        method: "POST",
+        body: formData,
+      });
+
+      if (!upload.ok) {
+        return new Failure({ type: "API_ERROR", code: upload.status });
+      }
+
+      return new Success(`/${presigned.key}`);
+    } catch {
+      return new Failure({ type: "NETWORK_ERROR" });
+    }
+  }
 }

package/lib/failureMessages.test.ts

@@ -10,6 +10,11 @@ describe("getFetchFailureMessages", () => {
 
     expect(result).toMatchInlineSnapshot(`
       {
+        "action": {
+          "href": "~/",
+          "label": "Go back",
+          "type": "LINK",
+        },
         "description": "The link you have followed might be broken.",
         "title": "Not found",
       }
@@ -21,6 +26,10 @@ describe("getFetchFailureMessages", () => {
 
     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",
       }
@@ -35,6 +44,11 @@ describe("getFetchFailureMessages", () => {
 
     expect(result).toMatchInlineSnapshot(`
       {
+        "action": {
+          "href": "~/",
+          "label": "Go back",
+          "type": "LINK",
+        },
         "description": "The link you have followed might be broken.",
         "title": "Army not found",
       }
@@ -54,6 +68,11 @@ describe("getFetchFailureMessages", () => {
 
     expect(result).toMatchInlineSnapshot(`
       {
+        "action": {
+          "href": "~/",
+          "label": "Go back",
+          "type": "LINK",
+        },
         "description": "It might have been deleted.",
         "title": "Army not found",
       }
@@ -65,6 +84,10 @@ describe("getFetchFailureMessages", () => {
 
     expect(result).toMatchInlineSnapshot(`
       {
+        "action": {
+          "label": "Retry request",
+          "type": "REFETCH",
+        },
         "description": "Check your interent connection and try again.",
         "title": "No connection",
       }
@@ -76,6 +99,10 @@ describe("getFetchFailureMessages", () => {
 
     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",
       }
@@ -87,6 +114,10 @@ describe("getFetchFailureMessages", () => {
 
     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",
       }

package/lib/failureMessages.ts

@@ -29,31 +29,63 @@ function createFailureMessageGetter<T>(
   };
 }
 
-export const getFetchFailureMessages = createFailureMessageGetter(
-  {
-    404: {
-      title: `Not found`,
-      description: `The link you have followed might be broken.`,
-    },
-    500: {
-      title: `Ooops, something went wrong`,
-      description: `This is probably an issue with our servers. You can try refreshing.`,
-    },
-    connection: {
-      title: `No connection`,
-      description: `Check your interent connection and try again.`,
-    },
-    fallback: {
-      title: `Ooops, something went wrong`,
-      description: `This is probably an issue on our side. You can try refreshing.`,
+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 };
+    {
+      onOverride(fallback, override) {
+        return { ...fallback, ...override };
+      },
     },
-  },
-);
+  );
 
 export const getSubmitFailureMessage = createFailureMessageGetter(
   {

package/lib/globals.css.ts

@@ -8,6 +8,7 @@ globalStyle(":root", {
   textRendering: "optimizeLegibility",
   WebkitFontSmoothing: "antialiased",
   MozOsxFontSmoothing: "grayscale",
+  WebkitTapHighlightColor: "transparent",
 });
 
 globalStyle("*", {
@@ -43,3 +44,14 @@ globalStyle("body, h1, h2, h3, h4, h5, h6, p, ul, li, ol", {
   margin: 0,
   padding: 0,
 });
+
+// Fathom SPA support depends on this image being added to the DOM, but they
+// are sloppy about taking out of the document flow, meaning that on pages
+// that are 100vh, there is a scrollbar flicker as the img element is added
+// to the DOM and then removed. This fixes said issue.
+globalStyle(`img[src^="https://cdn.usefathom.com/"]`, {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  opacity: 0.01,
+});

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
@@ -25,5 +27,7 @@ export * from "./class-names.ts";
 export * from "./client.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-9",
+  "version": "3.3.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",