@indietabletop/appkit 7.0.0-0 → 7.0.0-rc.0

package/lib/Sync/style.css.ts

@@ -0,0 +1,126 @@
+import {
+  createThemeContract,
+  fallbackVar,
+  keyframes,
+  style,
+} from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+
+const bounce = keyframes({
+  "0%": { translate: "0 0" },
+  "25%": { translate: "0 -10%" },
+  "50%": { translate: "0 0" },
+  "100%": { translate: "0 0" },
+});
+
+const rotation = keyframes({
+  from: { transform: `rotate(0deg)` },
+  to: { transform: `rotate(360deg)` },
+});
+
+export const syncTheme = createThemeContract({
+  idle: null,
+  inactive: null,
+  syncing: null,
+  error: null,
+});
+
+const backplate = style({
+  cx: 10,
+  cy: 10,
+  r: 10,
+});
+
+export const icon = {
+  container: recipe({
+    base: {},
+
+    variants: {
+      rotate: {
+        true: {
+          animation: `${rotation} linear 2s both infinite`,
+        },
+      },
+    },
+  }),
+
+  group: style({
+    stroke: "none",
+    fill: "none",
+    fillRule: "evenodd",
+  }),
+
+  shape: style({
+    fill: "white",
+  }),
+
+  idle: style([
+    backplate,
+    {
+      fill: fallbackVar(syncTheme.idle, "green"),
+    },
+  ]),
+
+  inactive: style([
+    backplate,
+    {
+      fill: fallbackVar(syncTheme.inactive, "blue"),
+    },
+  ]),
+
+  error: style([
+    backplate,
+    {
+      fill: fallbackVar(syncTheme.error, "red"),
+    },
+  ]),
+
+  syncing: style([
+    backplate,
+    {
+      fill: fallbackVar(syncTheme.syncing, "purple"),
+    },
+  ]),
+
+  bounce: style({
+    vars: {
+      "--duration": "1.5s",
+    },
+
+    animation: `${bounce} var(--duration) both infinite`,
+    r: 1,
+    fill: "white",
+
+    selectors: {
+      "&:nth-child(2)": {
+        animationDelay: "calc(var(--duration) * -0.1)",
+      },
+      "&:nth-child(3)": {
+        animationDelay: "calc(var(--duration) * -0.2)",
+      },
+    },
+  }),
+};
+
+export const log = {
+  item: style({
+    display: "grid",
+    gridTemplateColumns: "auto minmax(0, 1fr)",
+    alignItems: "center",
+    gap: "1rem",
+    padding: "1rem 0",
+    textAlign: "start",
+    borderBlockStart: "1px solid hsl(0 0% 90%)",
+    inlineSize: "100%",
+  }),
+
+  disclosureContent: style({
+    display: "grid",
+    gap: "1rem",
+    borderInlineStart: "1px solid hsl(0 0% 90%)",
+    paddingInlineStart: "1rem",
+    marginBlockEnd: "1.5rem",
+  }),
+
+  itemTimestamp: style({ opacity: 0.5 }),
+};

package/lib/account/AccountIcon.tsx

@@ -0,0 +1,15 @@
+import { useSyncState } from "../store/index.tsx";
+import { SyncIcon } from "../Sync/SyncIcon.tsx";
+import { accountIcon } from "./style.css.ts";
+
+export function AccountIcon(props: { imgSrc: string }) {
+  const { imgSrc } = props;
+  const syncState = useSyncState();
+
+  return (
+    <div className={accountIcon.container}>
+      <SyncIcon status={syncState} className={accountIcon.syncIcon} />
+      <img src={imgSrc} alt="" className={accountIcon.image} />
+    </div>
+  );
+}

package/lib/account/AccountIssueView.tsx

@@ -0,0 +1,44 @@
+import { Button } from "@ariakit/react";
+import { cx } from "../class-names.ts";
+import { interactiveText } from "../common.css.ts";
+import {
+  Letterhead,
+  LetterheadHeading,
+  LetterheadParagraph,
+} from "../Letterhead/index.tsx";
+import { useAppActions } from "../store/index.tsx";
+
+export function AccountIssueView(props: { reload: () => void }) {
+  const { reload } = props;
+  const { logout } = useAppActions();
+
+  return (
+    <Letterhead>
+      <LetterheadHeading>Account issue</LetterheadHeading>
+
+      <LetterheadParagraph>
+        You appear to be logged into an account that no longer exists, or is not
+        working as expected. Sorry about that!
+      </LetterheadParagraph>
+
+      <LetterheadParagraph>
+        {"You can try "}
+        <Button
+          {...cx(interactiveText)}
+          onClick={async () => {
+            await logout();
+            reload();
+          }}
+        >
+          logging out
+        </Button>
+        {" and in again. "}
+        {"If the issue persists, please get in touch at "}
+        <a {...cx(interactiveText)} href="mailto:support@indietabletop.club">
+          support@indietabletop.club
+        </a>
+        {"."}
+      </LetterheadParagraph>
+    </Letterhead>
+  );
+}

package/lib/account/AlreadyLoggedInView.tsx

@@ -0,0 +1,47 @@
+import { Button } from "@ariakit/react";
+import { Link } from "wouter";
+import { useAppConfig } from "../AppConfig/AppConfig.tsx";
+import { interactiveText } from "../common.css.ts";
+import {
+  Letterhead,
+  LetterheadHeading,
+  LetterheadParagraph,
+} from "../Letterhead/index.tsx";
+import { useAppActions } from "../store/index.tsx";
+import type { CurrentUser } from "../types.ts";
+
+export function AlreadyLoggedInView(props: {
+  currentUser: CurrentUser;
+  reload: () => void;
+}) {
+  const { currentUser, reload } = props;
+  const { hrefs } = useAppConfig();
+  const { logout } = useAppActions();
+
+  return (
+    <Letterhead>
+      <LetterheadHeading>Logged in</LetterheadHeading>
+      <LetterheadParagraph>
+        You are already logged into Indie Tabletop Club as{" "}
+        <em>{currentUser.email}</em>.
+      </LetterheadParagraph>
+
+      <LetterheadParagraph>
+        <Link className={interactiveText} href={hrefs.dashboard()}>
+          Continue
+        </Link>
+        {` as the current user, or `}
+        <Button
+          className={interactiveText}
+          onClick={async () => {
+            await logout();
+            reload();
+          }}
+        >
+          log out
+        </Button>
+        .
+      </LetterheadParagraph>
+    </Letterhead>
+  );
+}

package/lib/account/CurrentUserFetcher.stories.tsx

@@ -0,0 +1,292 @@
+import { http, HttpResponse } from "msw";
+import preview from "../../.storybook/preview.tsx";
+import { sleep } from "../sleep.ts";
+import type { CurrentUser, SessionInfo } from "../types.ts";
+import { CurrentUserFetcher } from "./CurrentUserFetcher.tsx";
+
+function createMocks(options?: { responseSpeed?: number }) {
+  const simulateNetwork = () => sleep(options?.responseSpeed ?? 2000);
+
+  const john: CurrentUser = {
+    id: "john",
+    email: "john@example.com",
+    isVerified: true,
+  };
+
+  const mary: CurrentUser = {
+    id: "mary",
+    email: "mary@example.com",
+    isVerified: true,
+  };
+
+  const vernon: CurrentUser = {
+    id: "vernon",
+    email: "vernon@example.com",
+    isVerified: false,
+  };
+
+  const sessionInfo: SessionInfo = {
+    createdTs: 123,
+    expiresTs: 123,
+  };
+
+  return {
+    data: { john, mary, vernon },
+    handlers: {
+      refreshTokens: {
+        success: () => {
+          return http.post(
+            "http://mock.api/v1/sessions/access-tokens",
+            async () => {
+              await simulateNetwork();
+              return HttpResponse.json({ sessionInfo });
+            },
+          );
+        },
+
+        failed: () => {
+          return http.post(
+            "http://mock.api/v1/sessions/access-tokens",
+            async () => {
+              await simulateNetwork();
+              return HttpResponse.text("Refresh token expired or missing", {
+                status: 401,
+              });
+            },
+          );
+        },
+      },
+
+      getCurrentUser: {
+        success: (currentUser: CurrentUser) => {
+          return http.get("http://mock.api/v1/users/me", async () => {
+            await simulateNetwork();
+            return HttpResponse.json(currentUser);
+          });
+        },
+
+        /**
+         * Cookie is valid, but user doesn't exist any more. This can happen
+         * after user deletion.
+         */
+        notFound: () => {
+          return http.get("http://mock.api/v1/users/me", async () => {
+            await simulateNetwork();
+            return HttpResponse.text("User not found", { status: 404 });
+          });
+        },
+
+        noConnection: () => {
+          return http.get("http://mock.api/v1/users/me", async () => {
+            return HttpResponse.error();
+          });
+        },
+
+        unknownFailure: () => {
+          return http.get("http://mock.api/v1/users/me", async () => {
+            await simulateNetwork();
+            return HttpResponse.text("Internal server error", { status: 500 });
+          });
+        },
+
+        /**
+         * Auth cookies no longer valid to make this request.
+         */
+        notAuthenticated: () => {
+          return http.get("http://mock.api/v1/users/me", async () => {
+            await simulateNetwork();
+            return HttpResponse.text("Not authenticated", { status: 401 });
+          });
+        },
+      },
+
+      createNewSession: {
+        success: (currentUser: CurrentUser) => {
+          return http.post("http://mock.api/v1/sessions", async () => {
+            await simulateNetwork();
+            return HttpResponse.json({ currentUser, sessionInfo });
+          });
+        },
+
+        invalidCredentials: () => {
+          return http.post("http://mock.api/v1/sessions", async () => {
+            await simulateNetwork();
+            return HttpResponse.text("Credentials do not match", {
+              status: 401,
+            });
+          });
+        },
+
+        userNotFound: () => {
+          return http.post("http://mock.api/v1/sessions", async () => {
+            await simulateNetwork();
+            return HttpResponse.text("User not found", { status: 404 });
+          });
+        },
+
+        unknownFailure: () => {
+          return http.post("http://mock.api/v1/sessions", async () => {
+            await simulateNetwork();
+            return HttpResponse.text("Internal server error", { status: 500 });
+          });
+        },
+      },
+
+      requestVerify: {
+        success: () => {
+          return http.post(
+            "http://mock.api/v1/user-verification-tokens",
+            async () => {
+              await simulateNetwork();
+              return HttpResponse.json({ message: "OK", tokenId: "1" });
+            },
+          );
+        },
+      },
+
+      verify: {
+        success: () => {
+          return http.put(
+            "http://mock.api/v1/user-verification-tokens/:id",
+            async () => {
+              await simulateNetwork();
+              return HttpResponse.json({ message: "OK" });
+            },
+          );
+        },
+      },
+    },
+  };
+}
+
+const { data, handlers } = createMocks({ responseSpeed: 700 });
+
+const meta = preview.meta({
+  title: "Account/Current User Fetcher",
+  component: CurrentUserFetcher,
+  tags: ["autodocs"],
+  args: {
+    children: (
+      <div
+        style={{
+          minBlockSize: "20rem",
+          backgroundColor: "white",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: "1rem",
+        }}
+      >
+        App content
+      </div>
+    ),
+  },
+  parameters: {
+    msw: {
+      handlers: {
+        refreshTokens: handlers.refreshTokens.failed(),
+      },
+    },
+  },
+});
+
+/**
+ * The default case, in which a local user is provided (so they have previously
+ * logged in), and the current user request returns the same user as is
+ * the local user (determined by the user id).
+ */
+export const Default = meta.story({
+  parameters: {
+    msw: {
+      handlers: {
+        getCurrentUser: handlers.getCurrentUser.success(data.john),
+      },
+    },
+  },
+});
+
+/**
+ * In this case, no local user is provided and the component simply renders
+ * its children. There should be no network request in this case.
+ */
+export const NoLocalUser = meta.story({});
+
+/**
+ * In this case, the local user is provided and the current user request returns
+ * error 401. The user should supply their credentials again.
+ */
+export const SessionExpired = meta.story({
+  parameters: {
+    msw: {
+      handlers: {
+        getCurrentUser: handlers.getCurrentUser.notAuthenticated(),
+      },
+    },
+  },
+});
+
+/**
+ * In this case, the local user is provided and the current user request returns
+ * a different user (determined by user ID).
+ *
+ * This case can happen when user A logs into app X, then user B logs into
+ * app Y. Returning to app X, user B will be logged into ITC with their account
+ * but local data belong to user A.
+ *
+ * In practice this should be a rare case, but with unpleasant circumstances
+ * if not handled correctly.
+ */
+export const UserMismatch = meta.story({
+  parameters: {
+    msw: {
+      handlers: {
+        getCurrentUser: handlers.getCurrentUser.success(data.mary),
+      },
+    },
+  },
+});
+
+/**
+ */
+export const UserUnverified = meta.story({
+  parameters: {
+    msw: {
+      handlers: {
+        getCurrentUser: handlers.getCurrentUser.success(data.vernon),
+        requestVerify: handlers.requestVerify.success(),
+        verify: handlers.verify.success(),
+        refreshTokens: handlers.refreshTokens.success(),
+      },
+    },
+  },
+});
+
+/**
+ * In this case, the local user is provided and the current user request returns
+ * 404, indicating that the current user no longer exists.
+ *
+ * This can happen if users delete their accounts but
+ */
+export const UserNotFound = meta.story({
+  parameters: {
+    msw: {
+      handlers: {
+        getCurrentUser: handlers.getCurrentUser.notFound(),
+      },
+    },
+  },
+});
+
+/**
+ * The proactive user session check has failed due to an error that doesn't
+ * carry any special meaning.
+ */
+export const UnknownFailure = meta.story({
+  parameters: {
+    msw: {
+      handlers: {
+        getCurrentUser: handlers.getCurrentUser.unknownFailure(),
+      },
+    },
+  },
+});

package/lib/account/CurrentUserFetcher.tsx

@@ -0,0 +1,118 @@
+import { useState, type ReactNode } from "react";
+import { ModalDialog } from "../ModalDialog/index.tsx";
+import { useCurrentUser } from "../store/index.tsx";
+import { AccountIssueView } from "./AccountIssueView.tsx";
+import { LoginView } from "./LoginView.tsx";
+import { useFetchCurrentUser } from "./useFetchCurrentUser.tsx";
+import { UserMismatchView } from "./UserMismatchView.tsx";
+import { VerifyAccountView } from "./VerifyPage.tsx";
+
+type CurrentUserFetcherProps = {
+  children: ReactNode;
+};
+
+/**
+ * Fetches fresh current user data if a local user exists in the app store.
+ *
+ * This component uses the Indie Tabletop Client under the hood, so if new
+ * data is successfully fetched, the onCurrentUser callback will be invoked,
+ * and it is up to the configuration of the client to store the data.
+ *
+ * Importantly, this component also handles the various user account issues
+ * that we could run into: expired session, user mismatch and account deletion.
+ *
+ * All other errors are ignored. This allows users to use the app in offline
+ * mode, and doesn't interrupt their session if some unexpected error happens,
+ * which they cannot do anything about anyways.
+ */
+export function CurrentUserFetcher(props: CurrentUserFetcherProps) {
+  const { children } = props;
+  const localUser = useCurrentUser();
+  const [isOpen, setOpen] = useState(true);
+
+  const { result, reload } = useFetchCurrentUser({
+    // We only want to fetch the current user if they exist in the store, i.e.
+    // they have logged into the app previously.
+    performFetch: !!localUser,
+
+    // If we are performing a fetch, we want to make sure that it is up to date
+    // every time the user focuses the window.
+    revalidateOnFocus: true,
+  });
+
+  if (result.isFailure && result.failure.type === "API_ERROR") {
+    // The user's session has expired. They should be prompted to
+    // re-authenticate, as any syncing attemps will fail.
+    if (result.failure.code === 401) {
+      return (
+        <>
+          <ModalDialog size="large" open>
+            <LoginView
+              currentUser={localUser}
+              onLogin={() => reload()}
+              description={undefined}
+              reload={reload}
+            />
+          </ModalDialog>
+          {children}
+        </>
+      );
+    }
+
+    if (result.failure.code === 404) {
+      // The user account is not found. The user might have been deleted.
+      // The user should be notified and instructed to log out, as many
+      // interactions acrosss the app will be broken.
+      return (
+        <>
+          <ModalDialog size="large" open>
+            <AccountIssueView reload={reload} />
+          </ModalDialog>
+
+          {children}
+        </>
+      );
+    }
+  }
+
+  if (localUser && result.isSuccess) {
+    const serverUser = result.value;
+
+    // The cookie (server) user and the user in local storage are a different
+    // user. The current user needs to decide which account to use.
+    if (serverUser.id !== localUser.id) {
+      return (
+        <>
+          <ModalDialog size="large" open>
+            <UserMismatchView
+              serverUser={result.value}
+              localUser={localUser}
+              reload={reload}
+            />
+          </ModalDialog>
+
+          {children}
+        </>
+      );
+    }
+
+    if (!serverUser.isVerified) {
+      return (
+        <>
+          <ModalDialog size="large" open={isOpen}>
+            <VerifyAccountView
+              currentUser={serverUser}
+              onClose={() => setOpen(false)}
+              reload={reload}
+            />
+          </ModalDialog>
+
+          {children}
+        </>
+      );
+    }
+  }
+
+  // In all other cases we simply render the children
+  return <>{children}</>;
+}

package/lib/account/FailureFallbackView.tsx

@@ -0,0 +1,36 @@
+import { Button } from "@ariakit/react";
+import { cx } from "../class-names.ts";
+import { interactiveText } from "../common.css.ts";
+import {
+  Letterhead,
+  LetterheadHeading,
+  LetterheadParagraph,
+} from "../Letterhead/index.tsx";
+
+export function FailureFallbackView() {
+  return (
+    <Letterhead>
+      <LetterheadHeading>Something went wrong</LetterheadHeading>
+
+      <LetterheadParagraph>
+        {"This is probably an issue on our side. Sorry about that!"}
+      </LetterheadParagraph>
+
+      <LetterheadParagraph>
+        {"You can try "}
+        <Button
+          {...cx(interactiveText)}
+          onClick={() => window.location.reload()}
+        >
+          reloading the app
+        </Button>
+        {". "}
+        {"If the issue persists, please get in touch at "}
+        <a {...cx(interactiveText)} href="mailto:support@indietabletop.club">
+          support@indietabletop.club
+        </a>
+        {"."}
+      </LetterheadParagraph>
+    </Letterhead>
+  );
+}