@indietabletop/appkit 3.6.0-1 → 3.6.0-3

package/lib/account/VerifyPage.tsx

@@ -0,0 +1,217 @@
+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 { getSubmitFailureMessage } from "../failureMessages.ts";
+import {
+  Letterhead,
+  LetterheadHeading,
+  LetterheadParagraph,
+  LetterheadSubmitButton,
+} from "../Letterhead/index.tsx";
+import { button } from "../Letterhead/style.css.ts";
+import {
+  LetterheadFormActions,
+  LetterheadHeader,
+  LetterheadSubmitError,
+  LetterheadTextField,
+} from "../LetterheadForm/index.tsx";
+import type { CurrentUser } from "../types.ts";
+import { useForm } from "../use-form.ts";
+import type { EventHandler } from "./types.ts";
+
+type SetStep = Dispatch<SetStateAction<Steps>>;
+
+function InitialStep(props: { setStep: SetStep; currentUser: CurrentUser }) {
+  const client = useClient();
+  const { email } = props.currentUser;
+  const { form, submitName } = useForm({
+    defaultValues: {},
+    async onSubmit() {
+      const op = await client.requestUserVerification();
+      return op.mapFailure(getSubmitFailureMessage);
+    },
+    onSuccess(value) {
+      props.setStep({ type: "SUBMIT_CODE", tokenId: value.tokenId });
+    },
+  });
+
+  return (
+    <Form store={form}>
+      <Letterhead>
+        <LetterheadHeader>
+          <LetterheadHeading>Verify account</LetterheadHeading>
+          <LetterheadParagraph>
+            Your account is currently not verified. We will send a one-time code
+            to your email ({email}) to complete the verification.
+          </LetterheadParagraph>
+        </LetterheadHeader>
+
+        <LetterheadFormActions>
+          <LetterheadSubmitError name={submitName} />
+          <LetterheadSubmitButton>Send code</LetterheadSubmitButton>
+        </LetterheadFormActions>
+      </Letterhead>
+    </Form>
+  );
+}
+
+function SubmitCodeStep(props: {
+  tokenId: string;
+  setStep: SetStep;
+  currentUser: CurrentUser;
+}) {
+  const client = useClient();
+  const { email } = props.currentUser;
+  const { form, submitName } = useForm({
+    defaultValues: {
+      code: "",
+    },
+    async onSubmit({ values }) {
+      const op = await client.verifyUser({
+        ...values,
+        tokenId: props.tokenId,
+      });
+
+      return op.mapFailure((failure) => {
+        return getSubmitFailureMessage(failure, {
+          404: "🚫 This code is incorrect or expired. Please try again.",
+        });
+      });
+    },
+    onSuccess() {
+      props.setStep({ type: "SUCCESS" });
+    },
+  });
+
+  return (
+    <Form store={form}>
+      <Letterhead>
+        <LetterheadHeader>
+          <LetterheadHeading>Verify Account</LetterheadHeading>
+          <LetterheadParagraph>
+            We've sent a one-time code to {email}. Please, enter the code in the
+            field below to complete verification.
+          </LetterheadParagraph>
+        </LetterheadHeader>
+
+        <LetterheadTextField
+          name={form.names.code}
+          label="Code"
+          placeholder="E.g. 123123"
+          autoComplete="one-time-code"
+          required
+        />
+
+        <LetterheadFormActions>
+          <LetterheadSubmitError name={submitName} />
+          <LetterheadSubmitButton>Verify</LetterheadSubmitButton>
+        </LetterheadFormActions>
+      </Letterhead>
+    </Form>
+  );
+}
+
+function SuccessStep(props: { onClose?: EventHandler }) {
+  const { onClose } = props;
+  const { hrefs } = useAppConfig();
+
+  return (
+    <Letterhead>
+      <LetterheadHeader>
+        <LetterheadHeading>Success!</LetterheadHeading>
+        <LetterheadParagraph>
+          Your Indie Tabletop Club account has been verified. Yay!
+        </LetterheadParagraph>
+      </LetterheadHeader>
+
+      {onClose ? (
+        <Button onClick={() => onClose()} className={button()}>
+          Done
+        </Button>
+      ) : (
+        <Link href={hrefs.dashboard()} className={button()}>
+          Go to dashboard
+        </Link>
+      )}
+    </Letterhead>
+  );
+}
+
+type Steps =
+  | { type: "INITIAL" }
+  | { type: "SUBMIT_CODE"; tokenId: string }
+  | { type: "SUCCESS" };
+
+export function VerifyAccountView(props: {
+  currentUser: CurrentUser;
+
+  /**
+   * If provided, will cause the success step to render a close dialog button
+   * instead of "Go to Dashboard" button.
+   *
+   * This is useful if this view is used within a modal dialog context.
+   */
+  onClose?: EventHandler;
+}) {
+  const { currentUser } = props;
+  const [step, setStep] = useState<Steps>({ type: "INITIAL" });
+
+  switch (step.type) {
+    case "INITIAL": {
+      return <InitialStep setStep={setStep} currentUser={currentUser} />;
+    }
+
+    case "SUBMIT_CODE": {
+      return (
+        <SubmitCodeStep {...step} setStep={setStep} currentUser={currentUser} />
+      );
+    }
+
+    case "SUCCESS": {
+      return <SuccessStep {...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/style.css.ts

@@ -0,0 +1,57 @@
+import { style } from "@vanilla-extract/css";
+import { Hover, MinWidth } from "../media.ts";
+
+export const page = style({
+  backgroundColor: "white",
+
+  "@media": {
+    [MinWidth.SMALL]: {
+      backgroundColor: "transparent",
+      padding: "clamp(1rem, 5vw, 5rem)",
+    },
+  },
+});
+
+export const accountPicker = {
+  container: style({
+    backgroundColor: "#fafafa",
+    borderRadius: "0.5rem",
+  }),
+
+  button: style({
+    padding: "1rem 1.5rem",
+    textAlign: "start",
+    inlineSize: "100%",
+    borderRadius: "inherit",
+
+    "@media": {
+      [Hover.HOVER]: {
+        transition: "200ms background-color",
+
+        ":hover": {
+          backgroundColor: "hsl(from #fafafa h s calc(l - 3))",
+        },
+      },
+    },
+  }),
+
+  buttonLabel: style({
+    fontWeight: 600,
+    fontSize: "1.125rem",
+  }),
+
+  divider: style({
+    marginInline: "1.5rem",
+    backgroundColor: "#e2e2e2",
+    blockSize: "1px",
+  }),
+};
+
+export const loadingView = {
+  container: style({
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    height: "12rem",
+  }),
+};

package/lib/account/types.ts

@@ -0,0 +1,9 @@
+export type EventHandler = () => Promise<void> | void;
+
+export type EventHandlerWithReload = (options: {
+  reload: () => void;
+}) => Promise<void> | void;
+
+export type DefaultFormValues = {
+  email?: string;
+};

package/lib/account/useCurrentUserResult.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+import { useClient } from "../AppConfig/AppConfig.tsx";
+import { type Failure, Pending, type Success } from "../async-op.ts";
+import type { CurrentUser, FailurePayload } from "../types.ts";
+
+export function useCurrentUserResult(options?: {
+  /**
+   * Optionally disable immediate fetch action.
+   *
+   * @default true
+   */
+  performFetch?: boolean;
+}) {
+  const { performFetch = true } = options ?? {};
+  const client = useClient();
+  const [latestAttemptTs, setLatestAttemptTs] = useState(Date.now());
+
+  const [result, setResult] = useState<
+    Success<CurrentUser> | Failure<FailurePayload> | Pending
+  >(new Pending());
+
+  // We are intentionally not using SWR in this case, as we don't want to deal
+  // with caching or any of that business.
+  useEffect(() => {
+    if (performFetch) {
+      client.getCurrentUser().then((result) => setResult(result));
+    }
+  }, [client, latestAttemptTs, performFetch]);
+
+  return {
+    result,
+    latestAttemptTs,
+    reload: () => {
+      setResult(new Pending());
+      setLatestAttemptTs(Date.now());
+    },
+  };
+}

package/lib/class-names.ts

@@ -23,7 +23,7 @@ export function classNames(...classNames: ClassName[]) {
  * be filtered out.
  *
  * @example
- * <h1 {...clx(props, 'heading', 'bold')}>Hello world!</h1>
+ * <h1 {...cx(props, 'heading', 'bold')}>Hello world!</h1>
  */
 
 export function cx(...cns: ClassName[]) {

package/lib/client.ts

@@ -3,6 +3,15 @@ import { Failure, Success } from "./async-op.js";
 import { currentUser, redeemedPledge, sessionInfo } from "./structs.js";
 import type { CurrentUser, FailurePayload, SessionInfo } from "./types.js";
 
+const logLevelToInt = {
+  off: 0,
+  error: 1,
+  warn: 2,
+  info: 3,
+};
+
+type LogLevel = keyof typeof logLevelToInt;
+
 export class IndieTabletopClient {
   origin: string;
   private onCurrentUser?: (currentUser: CurrentUser) => void;
@@ -11,6 +20,7 @@ export class IndieTabletopClient {
   private refreshTokenPromise?: Promise<
     Success<{ sessionInfo: SessionInfo }> | Failure<FailurePayload>
   >;
+  private maxLogLevel: number;
 
   constructor(props: {
     apiOrigin: string;
@@ -31,11 +41,28 @@ export class IndieTabletopClient {
      * Runs when token refresh is attempted, but fails due to 401 error.
      */
     onSessionExpired?: () => void;
+
+    /**
+     * Controls how much to log to the console.
+     *
+     * This is useful e.g. in Storybook, where errors are reported by MSW, and
+     * we don't want to pollute the console with duplicate data.
+     *
+     * @default 'info'
+     */
+    logLevel?: LogLevel;
   }) {
     this.origin = props.apiOrigin;
     this.onCurrentUser = props.onCurrentUser;
     this.onSessionInfo = props.onSessionInfo;
     this.onSessionExpired = props.onSessionExpired;
+    this.maxLogLevel = props.logLevel ? logLevelToInt[props.logLevel] : 1;
+  }
+
+  private log(level: Exclude<LogLevel, "off">, ...messages: unknown[]) {
+    if (logLevelToInt[level] <= this.maxLogLevel) {
+      console[level](...messages);
+    }
   }
 
   protected async fetch<T, S>(
@@ -63,7 +90,6 @@ export class IndieTabletopClient {
       });
 
       if (!res.ok) {
-        console.error(res);
         return new Failure({ type: "API_ERROR", code: res.status });
       }
 
@@ -71,12 +97,12 @@ export class IndieTabletopClient {
         const data = mask(await res.json(), struct);
         return new Success(data);
       } catch (error) {
-        console.error(error);
+        this.log("error", error);
 
         return new Failure({ type: "VALIDATION_ERROR" });
       }
     } catch (error) {
-      console.error(error);
+      this.log("error", error);
 
       if (error instanceof Error) {
         return new Failure({ type: "NETWORK_ERROR" });
@@ -101,15 +127,15 @@ export class IndieTabletopClient {
     }
 
     if (op.failure.type === "API_ERROR" && op.failure.code === 401) {
-      console.info("API request failed with error 401. Refreshing tokens.");
+      this.log("info", "API request failed with error 401. Refreshing tokens.");
 
       const refreshOp = await this.refreshTokens();
 
       if (refreshOp.isSuccess) {
-        console.info("Tokens refreshed. Retrying request.");
+        this.log("info", "Tokens refreshed. Retrying request.");
         return await this.fetch(path, struct, init);
       } else {
-        console.info("Could not refresh tokens.");
+        this.log("info", "Could not refresh tokens.");
       }
     }
 
@@ -189,7 +215,7 @@ export class IndieTabletopClient {
     const ongoingRequest = this.refreshTokenPromise;
 
     if (ongoingRequest) {
-      console.info("Token refresh ongoing. Reusing existing promise.");
+      this.log("info", "Token refresh ongoing. Reusing existing promise.");
       return await ongoingRequest;
     }
 
@@ -354,4 +380,25 @@ export class IndieTabletopClient {
       { method: "POST", json: { pledgeId, type: "PLEDGE" } },
     );
   }
+
+  async subscribeToNewsletterByEmail(newsletterCode: string, email: string) {
+    return await this.fetch(
+      `/v1/newsletters/${newsletterCode}/subscriptions`,
+      object({ message: string(), tokenId: string() }),
+      { method: "POST", json: { type: "EMAIL", email } },
+    );
+  }
+
+  async confirmNewsletterSignup(
+    newsletterCode: string,
+    tokenId: string,
+    plaintextCode: string,
+  ) {
+    const queryParams = new URLSearchParams({ plaintextCode });
+    return await this.fetch(
+      `/v1/newsletters/${newsletterCode}/newsletter-signup-tokens/${tokenId}?${queryParams}`,
+      object({ message: string() }),
+      { method: "PUT" },
+    );
+  }
 }

package/lib/globals.css.ts

@@ -3,7 +3,12 @@ import { globalStyle } from "@vanilla-extract/css";
 // Apply global vars
 import "./vars.css.ts";
 
+const futureCss = {
+  interpolateSize: "allow-keywords",
+};
+
 globalStyle(":root", {
+  ...futureCss,
   fontSynthesis: "none",
   textRendering: "optimizeLegibility",
   WebkitFontSmoothing: "antialiased",

package/lib/index.ts

@@ -1,16 +1,24 @@
 // Components
-export * from "./ClientContext/ClientContext.tsx";
+export * from "./account/CurrentUserFetcher.tsx";
+export * from "./account/JoinPage.tsx";
+export * from "./account/LoginPage.tsx";
+export * from "./account/PasswordResetPage.tsx";
+export * from "./AppConfig/AppConfig.tsx";
 export * from "./DialogTrigger/index.tsx";
 export * from "./ExternalLink.tsx";
 export * from "./FormSubmitButton.tsx";
 export * from "./FullscreenDismissBlocker.tsx";
+export * from "./IndieTabletopClubLogo.tsx";
 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 "./QRCode/QRCode.tsx";
 export * from "./ReleaseInfo/index.tsx";
 export * from "./ServiceWorkerHandler.tsx";
+export * from "./ShareButton/ShareButton.tsx";
+export * from "./SubscribeCard/SubscribeByEmailCard.tsx";
 export * from "./SubscribeCard/SubscribeCard.tsx";
 
 // Hooks
@@ -22,6 +30,7 @@ export * from "./use-is-installed.ts";
 export * from "./use-media-query.ts";
 export * from "./use-reverting-state.ts";
 export * from "./use-scroll-restoration.ts";
+export * from "./useEnsureValue.ts";
 export * from "./useIsVisible.ts";
 
 // Utils
@@ -33,6 +42,7 @@ export * from "./client.ts";
 export * from "./copyrightRange.ts";
 export * from "./failureMessages.ts";
 export * from "./groupBy.ts";
+export * from "./HistoryState.ts";
 export * from "./ids.ts";
 export * from "./media.ts";
 export * from "./random.ts";

package/lib/useEnsureValue.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+import { Failure, Pending, Success, type AsyncOp } from "./async-op.ts";
+import { caughtValueToString } from "./caught-value.ts";
+
+/**
+ * Checks if the provided value is non-nullish, otherwise calls provided
+ * getValue function to obtain the value (presumably from some remote location).
+ */
+export function useEnsureValue<T>(
+  value: T | null | undefined,
+  getValue: () => Promise<Success<T> | Failure<string>>,
+) {
+  const [result, setShareLink] = useState<AsyncOp<T, string>>(
+    value != null ? new Success(value) : new Pending(),
+  );
+
+  useEffect(() => {
+    if (value == null) {
+      getValue().then(
+        (success) => {
+          setShareLink(success);
+        },
+        (error: unknown) => {
+          setShareLink(new Failure(caughtValueToString(error)));
+        },
+      );
+    }
+  }, [value, getValue]);
+
+  return result;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indietabletop/appkit",
-  "version": "3.6.0-1",
+  "version": "3.6.0-3",
   "description": "A collection of modules used in apps built by Indie Tabletop Club",
   "private": false,
   "type": "module",
@@ -9,7 +9,7 @@
     "build": "tsc",
     "dev": "tsc --watch",
     "test": "vitest",
-    "storybook": "storybook dev -p 6000"
+    "storybook": "storybook dev"
   },
   "exports": {
     ".": "./lib/index.ts",
@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "@storybook/addon-docs": "^9.1.6",
+    "@storybook/addon-links": "^9.1.7",
     "@storybook/react-vite": "^9.1.6",
     "@types/react": "^19.1.8",
     "msw": "^2.11.2",

package/lib/ClientContext/ClientContext.tsx

@@ -1,25 +0,0 @@
-import { createContext, type ReactNode, useContext } from "react";
-import type { IndieTabletopClient } from "../client.ts";
-
-const ClientContext = createContext<IndieTabletopClient | null>(null);
-
-export function ClientProvider(props: {
-  client: IndieTabletopClient;
-  children: ReactNode;
-}) {
-  const { client, children } = props;
-  return <ClientContext value={client}>{children}</ClientContext>;
-}
-
-export function useClient() {
-  const client = useContext(ClientContext);
-
-  if (!client) {
-    throw new Error(
-      `Attempting to retrieve ITC client, but none was found within context. ` +
-        `Make sure that ClientProvider is used in the component hierarchy.`,
-    );
-  }
-
-  return client;
-}