@indietabletop/appkit 3.2.0-1 → 3.2.0-3

package/lib/client.ts

@@ -0,0 +1,288 @@
+import { type Infer, mask, object, string, Struct } from "superstruct";
+import { Failure, Success } from "./async-op.js";
+import { currentUser, sessionInfo } from "./structs.js";
+import type { CurrentUser, FailurePayload, SessionInfo } from "./types.js";
+
+export class IndieTabletopClient {
+  origin: string;
+  private onCurrentUser?: (currentUser: CurrentUser) => void;
+  private onSessionInfo?: (sessionInfo: SessionInfo) => void;
+  private onSessionExpired?: () => void;
+  private refreshTokenPromise?: Promise<
+    Success<{ sessionInfo: SessionInfo }> | Failure<FailurePayload>
+  >;
+
+  constructor(props: {
+    apiOrigin: string;
+
+    /**
+     * Runs every time the current user is fetched from the API. Typically, this
+     * happens during login, signup, and when the current user is fetched.
+     */
+    onCurrentUser?: (currentUser: CurrentUser) => void;
+
+    /**
+     * Runs ever time new session info is fetched from the API. Typically, this
+     * happends during login, signup, and when tokens are refreshed.
+     */
+    onSessionInfo?: (sessionInfo: SessionInfo) => void;
+
+    /**
+     * Runs when token refresh is attempted, but fails due to 401 error.
+     */
+    onSessionExpired?: () => void;
+  }) {
+    this.origin = props.apiOrigin;
+    this.onCurrentUser = props.onCurrentUser;
+    this.onSessionInfo = props.onSessionInfo;
+    this.onSessionExpired = props.onSessionExpired;
+  }
+
+  protected async fetch<T, S>(
+    path: string,
+    struct: Struct<T, S>,
+    init?: RequestInit & { json?: object },
+  ): Promise<Success<Infer<Struct<T, S>>> | Failure<FailurePayload>> {
+    // If json was provided, we stringify it. Otherwise we use body.
+    const body = init?.json ? JSON.stringify(init.json) : init?.body;
+
+    // If json was provided, we make sure that content type is correctly set.
+    const headers = init?.json
+      ? { ...init?.headers, "Content-Type": "application/json" }
+      : init?.headers;
+
+    try {
+      const res = await fetch(`${this.origin}${path}`, {
+        // Defaults
+        credentials: "include",
+
+        // Overrides
+        ...init,
+        body,
+        headers,
+      });
+
+      if (!res.ok) {
+        console.error(res);
+        return new Failure({ type: "API_ERROR", code: res.status });
+      }
+
+      try {
+        const data = mask(await res.json(), struct);
+        return new Success(data);
+      } catch (error) {
+        console.error(error);
+
+        return new Failure({ type: "VALIDATION_ERROR" });
+      }
+    } catch (error) {
+      console.error(error);
+
+      if (error instanceof Error) {
+        return new Failure({ type: "NETWORK_ERROR" });
+      }
+
+      return new Failure({ type: "UNKNOWN_ERROR" });
+    }
+  }
+
+  /**
+   * Fetches data and retries 401 failures after attempting to refresh tokens.
+   */
+  protected async fetchWithAuth<T, S>(
+    path: string,
+    struct: Struct<T, S>,
+    init?: RequestInit & { json?: object },
+  ): Promise<Success<Infer<Struct<T, S>>> | Failure<FailurePayload>> {
+    const op = await this.fetch(path, struct, init);
+
+    if (op.isSuccess) {
+      return op;
+    }
+
+    if (op.failure.type === "API_ERROR" && op.failure.code === 401) {
+      console.info("API request failed with error 401. Refreshing tokens.");
+
+      const refreshOp = await this.refreshTokens();
+
+      if (refreshOp.isSuccess) {
+        console.info("Tokens refreshed. Retrying request.");
+        return await this.fetch(path, struct, init);
+      } else {
+        console.info("Could not refresh tokens.");
+      }
+    }
+
+    return op;
+  }
+
+  async login(payload: { email: string; password: string }) {
+    const result = await this.fetch(
+      "/v1/sessions",
+      object({
+        currentUser: currentUser(),
+        sessionInfo: sessionInfo(),
+      }),
+      {
+        method: "POST",
+        json: { email: payload.email, plaintextPassword: payload.password },
+      },
+    );
+
+    if (result.isSuccess) {
+      this.onCurrentUser?.(result.value.currentUser);
+      this.onSessionInfo?.(result.value.sessionInfo);
+    }
+
+    return result;
+  }
+
+  async logout() {
+    return await this.fetch("/v1/sessions", object({ message: string() }), {
+      method: "DELETE",
+    });
+  }
+
+  async join(payload: {
+    email: string;
+    password: string;
+    acceptedTos: boolean;
+    subscribedToNewsletter: boolean;
+  }) {
+    const res = await this.fetch(
+      "/v1/users",
+      object({
+        currentUser: currentUser(),
+        sessionInfo: sessionInfo(),
+        tokenId: string(),
+      }),
+      {
+        method: "POST",
+        json: {
+          email: payload.email,
+          plaintextPassword: payload.password,
+          acceptedTos: payload.acceptedTos,
+          subscribedToNewsletter: payload.subscribedToNewsletter,
+        },
+      },
+    );
+
+    if (res.isSuccess) {
+      this.onCurrentUser?.(res.value.currentUser);
+      this.onSessionInfo?.(res.value.sessionInfo);
+    }
+
+    return res;
+  }
+
+  /**
+   * Triggers token refresh process.
+   *
+   * Note that we do not want to perform multiple concurrent token refresh
+   * actions, as that will result in unnecessary 401s. For this reason, a
+   * reference to t
+   */
+  async refreshTokens() {
+    // If there is an ongoing token refresh in progress return that. This should
+    // only deal the response payload, none of the side-effects and cleanup,
+    // which will be handled by the initial invocation.
+    const ongoingRequest = this.refreshTokenPromise;
+
+    if (ongoingRequest) {
+      console.info("Token refresh ongoing. Reusing existing promise.");
+      return await ongoingRequest;
+    }
+
+    // Cache the promise on an instance property to share a reference from
+    // other potential invocations.
+    this.refreshTokenPromise = this.fetch(
+      "/v1/sessions/access-tokens",
+      object({ sessionInfo: sessionInfo() }),
+      { method: "POST" },
+    );
+
+    const result = await this.refreshTokenPromise;
+
+    if (result.isSuccess) {
+      this.onSessionInfo?.(result.value.sessionInfo);
+    }
+
+    if (
+      result.isFailure &&
+      result.failure.type === "API_ERROR" &&
+      result.failure.code === 401
+    ) {
+      this.onSessionExpired?.();
+    }
+
+    // Make sure to reset the shared reference so that subsequent invocations
+    // once again initiate token refresh.
+    delete this.refreshTokenPromise;
+
+    return result;
+  }
+
+  async requestPasswordReset(payload: { email: string }) {
+    return await this.fetch(
+      `/v1/password-reset-tokens`,
+      object({ message: string(), tokenId: string() }),
+      { method: "POST", json: payload },
+    );
+  }
+
+  async checkPasswordResetCode(payload: { tokenId: string; code: string }) {
+    const queryParams = new URLSearchParams({ plaintextCode: payload.code });
+    return await this.fetch(
+      `/v1/password-reset-tokens/${payload.tokenId}?${queryParams}`,
+      object({ message: string() }),
+      { method: "GET" },
+    );
+  }
+
+  async setNewPassword(payload: {
+    tokenId: string;
+    code: string;
+    password: string;
+  }) {
+    const queryParams = new URLSearchParams({ plaintextCode: payload.code });
+    return await this.fetch(
+      `/v1/password-reset-tokens/${payload.tokenId}?${queryParams}`,
+      object({ message: string() }),
+      { method: "PUT", json: { plaintextPassword: payload.password } },
+    );
+  }
+
+  async requestUserVerification() {
+    return await this.fetch(
+      `/v1/user-verification-tokens`,
+      object({ message: string(), tokenId: string() }),
+      { method: "POST" },
+    );
+  }
+
+  async verifyUser(payload: { tokenId: string; code: string }) {
+    const queryParams = new URLSearchParams({ plaintextCode: payload.code });
+    const req = await this.fetch(
+      `/v1/user-verification-tokens/${payload.tokenId}?${queryParams}`,
+      object({ message: string() }),
+      { method: "PUT" },
+    );
+
+    if (req.isSuccess) {
+      await this.refreshTokens();
+      await this.getCurrentUser();
+    }
+
+    return req;
+  }
+
+  async getCurrentUser() {
+    const result = await this.fetchWithAuth(`/v1/users/me`, currentUser());
+
+    if (result.isSuccess) {
+      this.onCurrentUser?.(result.value);
+    }
+
+    return result;
+  }
+}

package/lib/common.css.ts

@@ -0,0 +1,46 @@
+import { style } from "@vanilla-extract/css";
+import { Hover, MinWidth } from "./media.ts";
+
+export const itcSymbol = style({
+  inlineSize: "2.5rem",
+  blockSize: "2.5rem",
+  margin: "0rem auto 0.75rem",
+
+  "@media": {
+    [MinWidth.MEDIUM]: {
+      marginBlock: "-1rem 1.5rem",
+    },
+  },
+});
+
+export const manofa = style({
+  fontFamily: `"manofa", sans-serif`,
+});
+
+export const minion = style({
+  fontFamily: `"minion-pro", serif`,
+});
+
+export const itcCard = style([
+  minion,
+  {
+    backgroundColor: "white",
+  },
+]);
+
+export const interactiveText = style({
+  display: "inline",
+  textDecoration: "underline",
+  textDecorationColor: "hsl(from currentcolor h s l / 0.3)",
+  textUnderlineOffset: "0.15em",
+
+  "@media": {
+    [Hover.HOVER]: {
+      transition: "text-decoration-color 200ms",
+
+      ":hover": {
+        textDecorationColor: "hsl(from currentcolor h s l / 1)",
+      },
+    },
+  },
+});

package/lib/globals.css.ts

@@ -0,0 +1,42 @@
+import { globalStyle } from "@vanilla-extract/css";
+
+globalStyle(":root", {
+  fontSynthesis: "none",
+  textRendering: "optimizeLegibility",
+  WebkitFontSmoothing: "antialiased",
+  MozOsxFontSmoothing: "grayscale",
+});
+
+globalStyle("*", {
+  boxSizing: "border-box",
+});
+
+globalStyle("img, picture, svg", {
+  display: "block",
+});
+
+globalStyle("a", {
+  display: "block",
+  color: "inherit",
+  textDecoration: "none",
+});
+
+globalStyle("input, textarea", {
+  fontFamily: "inherit",
+});
+
+globalStyle("button", {
+  display: "block",
+  fontSize: "inherit",
+  fontFamily: "inherit",
+  backgroundColor: "transparent",
+  border: "none",
+  color: "inherit",
+  cursor: "pointer",
+  padding: 0,
+});
+
+globalStyle("body, h1, h2, h3, h4, h5, h6, p, ul, li, ol", {
+  margin: 0,
+  padding: 0,
+});

package/{dist/index.d.ts → lib/index.ts}

@@ -1,10 +1,14 @@
+// Components
 export * from "./ExternalLink.tsx";
 export * from "./FormSubmitButton.tsx";
 export * from "./FullscreenDismissBlocker.tsx";
 export * from "./IndieTabletopClubSymbol.tsx";
+export * from "./Letterhead.tsx";
 export * from "./LetterheadFooter.tsx";
 export * from "./LoadingIndicator.tsx";
 export * from "./ServiceWorkerHandler.tsx";
+
+// Hooks
 export * from "./use-async-op.ts";
 export * from "./use-document-background-color.ts";
 export * from "./use-form.ts";
@@ -12,6 +16,8 @@ export * from "./use-is-installed.ts";
 export * from "./use-media-query.ts";
 export * from "./use-reverting-state.ts";
 export * from "./use-scroll-restoration.ts";
+
+// Utils
 export * from "./append-copy-to-text.ts";
 export * from "./async-op.ts";
 export * from "./caught-value.ts";

package/lib/internal.css.ts

@@ -0,0 +1,26 @@
+import { createVar, style } from "@vanilla-extract/css";
+import { bounce } from "./animations.css.ts";
+import { minion } from "./common.css.ts";
+
+export const animationDelay = createVar();
+
+export const dot = style({
+  fill: "currentcolor",
+  opacity: 0.8,
+  animation: `${bounce} 2s ${animationDelay} infinite`,
+});
+
+export const padding = createVar();
+
+export const letterhead = style([
+  minion,
+  {
+    vars: { [padding]: "clamp(1rem, 8vw, 4rem)" },
+
+    backgroundColor: "white",
+    padding: `max(1rem, calc(${padding} - .5rem)) ${padding} ${padding}`,
+    borderRadius: "1rem",
+    marginInline: "auto",
+    maxInlineSize: "36rem",
+  },
+]);

package/lib/media.ts

@@ -0,0 +1,50 @@
+/**
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
+ */
+
+export enum PrefersColorScheme {
+  LIGHT = "(prefers-color-scheme: light)",
+  DARK = "(prefers-color-scheme: dark)",
+}
+/**
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
+ */
+
+export enum PrefersReducedMotion {
+  NO_PREFERENCE = "(prefers-reduced-motion: no-preference)",
+  REDUCE = "(prefers-reduced-motion: reduce)",
+}
+
+export enum Hover {
+  NONE = "(hover: none)",
+
+  // Some Samsung phones incorrectly report that they have "hover" even though they
+  // do not. Adding the pointer query correctly filters these phones out.
+  HOVER = "(hover: hover) and (pointer: fine)",
+}
+
+export enum MediaType {
+  PRINT = "print",
+  SCREEN = "screen",
+}
+
+export enum MinHeight {
+  TALL = "(min-height: 40em)",
+}
+
+export enum MinWidth {
+  SMALL = "(min-width: 28em)",
+  MEDIUM = "(min-width: 50em)",
+  WIDE = "(min-width: 66em)",
+  X_WIDE = "(min-width: 80em)",
+  XX_WIDE = "(min-width: 140em)",
+}
+
+export enum DisplayMode {
+  STANDALONE = "(display-mode: standalone)",
+}
+
+export enum Pointer {
+  COARSE = "(pointer: coarse)",
+  FINE = "(pointer: fine)",
+}

package/lib/structs.ts

@@ -0,0 +1,17 @@
+import { boolean, enums, number, object, optional, string } from "superstruct";
+
+export function currentUser() {
+  return object({
+    id: string(),
+    email: string(),
+    isVerified: boolean(),
+    prefersScrollbarVisibility: optional(enums(["ALWAYS"])),
+  });
+}
+
+export function sessionInfo() {
+  return object({
+    expiresTs: number(),
+    createdTs: number(),
+  });
+}

package/{dist/types.d.ts → lib/types.ts}

@@ -1,10 +1,15 @@
 import type { Infer } from "superstruct";
 import { currentUser, sessionInfo } from "./structs.js";
+
 export type CurrentUser = Infer<ReturnType<typeof currentUser>>;
+
 export type SessionInfo = Infer<ReturnType<typeof sessionInfo>>;
-export type FailurePayload = {
-    type: "API_ERROR";
-    code: number;
-} | {
-    type: "NETWORK_ERROR" | "UNKNOWN_ERROR" | "VALIDATION_ERROR";
-};
+
+export type FailurePayload =
+  | {
+      type: "API_ERROR";
+      code: number;
+    }
+  | {
+      type: "NETWORK_ERROR" | "UNKNOWN_ERROR" | "VALIDATION_ERROR";
+    };

package/lib/use-async-op.ts

@@ -0,0 +1,16 @@
+import { useCallback, useState } from "react";
+import { type AsyncOp, Failure, Pending, Success } from "./async-op.js";
+
+export function useAsyncOp<T, E>() {
+  const [op, setOp] = useState<AsyncOp<T, E>>(new Pending());
+
+  const setSuccess = useCallback((value: T) => {
+    setOp(new Success(value));
+  }, []);
+
+  const setFailure = useCallback((failure: E) => {
+    setOp(new Failure(failure));
+  }, []);
+
+  return { op, setSuccess, setFailure };
+}

package/lib/use-document-background-color.ts

@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+
+/**
+ * Sets document background color, reverting it to previous color on unmount.
+ */
+export function useDocumentBackgroundColor(bodyColor: string) {
+  useEffect(() => {
+    const style = window.document.documentElement.style;
+    const originalColor = style.backgroundColor;
+    style.backgroundColor = bodyColor;
+
+    return () => {
+      style.backgroundColor = originalColor;
+    };
+  });
+}

package/lib/use-form.ts

@@ -0,0 +1,73 @@
+import { type FormStoreState, useFormStore } from "@ariakit/react";
+import { useState } from "react";
+import { Failure, Success } from "./async-op.ts";
+
+type Validator<T> = (value: T) => string | null;
+
+type MaybePromise<T> = T | Promise<T>;
+
+export function useForm<T extends object, R>(props: {
+  defaultValues: T;
+  validate?: { [K in keyof T]?: Validator<T[K]> };
+
+  /**
+   * Handles form submission login.
+   *
+   * This function should return a Success or Failure. Failures should always contain a string
+   * which will be used as the form error message.
+   */
+  onSubmit: (
+    state: FormStoreState<T>,
+  ) => MaybePromise<Success<R> | Failure<string>>;
+
+  /**
+   * If submission was successful (i.e. onSubmit returned a Success), will be run to perform any
+   * side-effect necessary.
+   *
+   * Typically this is used for navigation on mutating some local state.
+   */
+  onSuccess?: (value: R, state: FormStoreState<T>) => MaybePromise<void>;
+}) {
+  const submitName = "submit";
+
+  const [op, setOp] = useState<Awaited<
+    ReturnType<typeof props.onSubmit>
+  > | null>(null);
+
+  const form = useFormStore({
+    defaultValues: props.defaultValues,
+  });
+
+  form.useSubmit(async (state) => {
+    const submitOp = await props.onSubmit(state);
+
+    if (submitOp.isFailure) {
+      form.setError(submitName, submitOp.failure);
+    }
+
+    if (submitOp.isSuccess) {
+      await props.onSuccess?.(submitOp.value, state);
+    }
+
+    setOp(submitOp);
+  });
+
+  form.useValidate((state) => {
+    if (props.validate) {
+      const entries = Object.entries(props.validate) as Array<
+        [keyof T & string, Validator<T[keyof T]>]
+      >;
+
+      for (const [key, validate] of entries) {
+        const value = state.values[key];
+        const message = validate(value);
+
+        if (message) {
+          form.setError(key, message);
+        }
+      }
+    }
+  });
+
+  return { form, submitName, op };
+}

package/{dist/use-is-installed.js → lib/use-is-installed.ts}

@@ -1,4 +1,5 @@
 import { useMemo } from "react";
+
 /**
  * Checks whether the app is installed.
  *
@@ -7,7 +8,10 @@ import { useMemo } from "react";
  * or running within a browser.
  */
 export function useIsInstalled() {
-    // The only way to get into the Standalone display mode is to install
-    // the app, so this is a good way to check installation status.
-    return useMemo(() => window.matchMedia("(display-mode: standalone)").matches, []);
+  // The only way to get into the Standalone display mode is to install
+  // the app, so this is a good way to check installation status.
+  return useMemo(
+    () => window.matchMedia("(display-mode: standalone)").matches,
+    [],
+  );
 }

package/lib/use-media-query.ts

@@ -0,0 +1,21 @@
+import { useState, useEffect } from "react";
+
+export function useMediaQuery(query: string) {
+  const [isMatch, setMatch] = useState(window.matchMedia(query).matches);
+
+  useEffect(() => {
+    const mql = window.matchMedia(query);
+
+    const handleChange = ({ matches }: MediaQueryListEvent): void => {
+      setMatch(matches);
+    };
+
+    mql.addEventListener("change", handleChange);
+
+    return () => {
+      mql.removeEventListener("change", handleChange);
+    };
+  }, [query]);
+
+  return isMatch;
+}