@indietabletop/appkit 3.5.0 → 3.6.0-0

package/lib/ClientContext/ClientContext.tsx

@@ -0,0 +1,25 @@
+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;
+}

package/lib/InfoPage/index.tsx

@@ -0,0 +1,46 @@
+import { Heading, HeadingLevel } from "@ariakit/react";
+import { LoadingIndicator } from "@indietabletop/appkit";
+import type { ReactNode } from "react";
+import * as css from "./style.css.ts";
+
+export function InfoPage(props: {
+  heading: string;
+  description: ReactNode;
+  action?: ReactNode;
+}) {
+  return (
+    <HeadingLevel>
+      <div className={css.page}>
+        <Heading className={css.heading}>{props.heading}</Heading>
+        <p className={css.description}>{props.description}</p>
+        {props.action && (
+          <div
+            style={{
+              marginBlockStart: "1rem",
+              marginInline: "auto",
+              inlineSize: "fit-content",
+            }}
+          >
+            {props.action}
+          </div>
+        )}
+      </div>
+    </HeadingLevel>
+  );
+}
+
+export function LoadingPage() {
+  return (
+    <div className={css.loadingPage}>
+      <LoadingIndicator />
+    </div>
+  );
+}
+
+export function LoadingView() {
+  return (
+    <div className={css.loadingView}>
+      <LoadingIndicator />
+    </div>
+  );
+}

package/lib/InfoPage/pages.tsx

@@ -0,0 +1,36 @@
+import { interactiveText } from "@indietabletop/appkit/common.css.ts";
+import { Link } from "wouter";
+import { InfoPage } from "./index.tsx";
+
+export function NotFoundPage() {
+  return (
+    <InfoPage
+      heading="Nothing here..."
+      description={
+        <>
+          The link you have followed might be broken.{" "}
+          <Link href="/" className={interactiveText}>
+            Back to dashboard
+          </Link>
+          .
+        </>
+      }
+    />
+  );
+}
+
+export function ClientSideErrorPage() {
+  const description = (
+    <>
+      Sorry, this wasn't supposed to happen. If the error persists, please{" "}
+      <a className={interactiveText} href={`mailto:support@indietabletop.club`}>
+        get in touch
+      </a>
+      .
+    </>
+  );
+
+  return (
+    <InfoPage heading="An wild Error appears!" description={description} />
+  );
+}

package/lib/InfoPage/style.css.ts

@@ -0,0 +1,36 @@
+import { manofa } from "@indietabletop/appkit/common.css.ts";
+import { style } from "@vanilla-extract/css";
+
+export const page = style({
+  minBlockSize: "100svh",
+  paddingBlockStart: "30svh",
+  paddingInline: "clamp(1rem, 5vw, 3rem)",
+  textAlign: "center",
+});
+
+export const heading = style([
+  manofa,
+  {
+    fontSize: "1.5rem",
+    lineHeight: 1.2,
+  },
+]);
+
+export const description = style({
+  marginBlockStart: "0.5rem",
+  fontSize: "1rem",
+});
+
+export const loadingPage = style([
+  page,
+  { display: "flex", justifyContent: "center" },
+]);
+
+export const loadingView = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  paddingInline: "clamp(1rem, 5vw, 3rem)",
+  textAlign: "center",
+  minBlockSize: "30svh",
+});

package/lib/Letterhead/index.tsx

@@ -1,6 +1,6 @@
 import { Heading, type HeadingProps } from "@ariakit/react";
 import type { RecipeVariants } from "@vanilla-extract/recipes";
-import type { ComponentProps, ReactNode } from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import { cx } from "../class-names.ts";
 import { interactiveText } from "../common.css.ts";
 import { ExternalLink } from "../ExternalLink.tsx";
@@ -22,14 +22,14 @@ export function LetterheadHeading(props: LetterheadHeadingProps) {
 }
 
 type LetterheadParagraphProps = RecipeVariants<typeof css.paragraph> &
-  ComponentProps<"p">;
+  ComponentPropsWithoutRef<"p">;
 
 export function LetterheadParagraph(props: LetterheadParagraphProps) {
   const { size, align, ...rest } = props;
   return <p {...rest} {...cx(props, css.paragraph({ size, align }))} />;
 }
 
-type LetterheadFooterProps = ComponentProps<"div">;
+type LetterheadFooterProps = ComponentPropsWithoutRef<"div">;
 
 export function LetterheadFooter(props: LetterheadFooterProps) {
   return (

package/lib/LetterheadForm/index.tsx

@@ -9,7 +9,7 @@ import {
 import { type ReactNode } from "react";
 import * as css from "./style.css.ts";
 
-type LetterheadTextFieldProps = FormInputProps & {
+export type LetterheadTextFieldProps = FormInputProps & {
   label: string;
   hint?: ReactNode;
 };

package/lib/LoginPage/LoginPage.stories.tsx

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { http, HttpResponse } from "msw";
+import { fn } from "storybook/test";
+import { IndieTabletopClient } from "../client.ts";
+import { sleep } from "../sleep.ts";
+import { LoginPage } from "./LoginPage.tsx";
+
+const userA = {
+  id: "a",
+  email: "a@example.com",
+  isVerified: true,
+};
+
+const userB = {
+  id: "b",
+  email: "b@example.com",
+  isVerified: true,
+};
+
+const meta = {
+  title: "Pages/Login Page",
+  component: LoginPage,
+  tags: ["autodocs"],
+  args: {
+    client: new IndieTabletopClient({ apiOrigin: "" }),
+    onSuccess: fn(),
+    onLogout: fn(),
+    localUser: null,
+  },
+  parameters: {
+    msw: {
+      handlers: {
+        getCurrentUser: http.get("/v1/users/me", async () => {
+          await sleep(2000);
+
+          return HttpResponse.json(userA);
+        }),
+
+        createNewSession: http.post("/v1/sessions", async () => {
+          await sleep(2000);
+
+          return HttpResponse.json({
+            currentUser: userA,
+            sessionInfo: {
+              createdTs: 123,
+              expiresTs: 123,
+            },
+          });
+        }),
+      },
+    },
+  },
+} satisfies Meta<typeof LoginPage>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// There is no local user and server response reports user not authenticated.
+// This is the majority case.
+export const Default: Story = {
+  parameters: {
+    msw: {
+      handlers: {
+        getCurrentUser: http.get("/v1/users/me", async () => {
+          await sleep(2000);
+
+          return HttpResponse.text("Not authenticated", { status: 401 });
+        }),
+      },
+    },
+  },
+};
+
+// User is logged in via a server cookie. They can proceed to app.
+export const AlreadyLoggedIn: Story = {
+  args: {
+    localUser: userA,
+  },
+};
+
+// App has local data that doesn't match server-data. User has to choose
+// how to proceed.
+
+// TODO Style UserMismatch and add handler.
+export const UserMismatch: Story = {
+  args: {
+    localUser: userB,
+  },
+};
+
+// TODO: Implement Not Found story (user was probably deleted)
+export const UserNotFound: Story = {
+  args: {
+    localUser: null,
+  },
+};
+
+// TODO: Implement no connection story
+export const NoConnection: Story = {};
+
+// TODO: Implement fallback failure (all other cases)
+export const FallbackFailure: Story = {
+  args: {
+    localUser: userB,
+  },
+};

package/lib/LoginPage/LoginPage.tsx

@@ -0,0 +1,204 @@
+import { Form } from "@ariakit/react";
+import { Button } from "@ariakit/react/button";
+
+import { useCallback, useEffect, useState } from "react";
+import { Link, useLocation } from "wouter";
+import { Pending, type Failure, type Success } from "../async-op.js";
+import { IndieTabletopClient } from "../client.ts";
+import { interactiveText } from "../common.css.ts";
+import { getSubmitFailureMessage } from "../failureMessages.ts";
+import { LoadingPage } from "../InfoPage/index.tsx";
+import {
+  Letterhead,
+  LetterheadHeading,
+  LetterheadParagraph,
+  LetterheadSubmitButton,
+} from "../Letterhead/index.tsx";
+import {
+  LetterheadSubmitError,
+  LetterheadTextField,
+} from "../LetterheadForm/index.tsx";
+import { Title } from "../Title/index.tsx";
+import type { CurrentUser, FailurePayload } from "../types.ts";
+import { useForm } from "../use-form.ts";
+import { validEmail } from "../validations.ts";
+import * as css from "./style.css.ts";
+
+type EventHandler = () => Promise<void> | void;
+
+function LoginForm(props: {
+  client: IndieTabletopClient;
+  onSuccess: EventHandler;
+}) {
+  const { client, onSuccess } = props;
+
+  const [_, navigate] = useLocation();
+  const { form, submitName } = useForm({
+    defaultValues: { email: "", password: "" },
+    validate: { email: validEmail },
+    async onSubmit({ values }) {
+      const result = await client.login(values);
+
+      return result.mapFailure((failure) => {
+        return getSubmitFailureMessage(failure, {
+          401: "Username and password do not match. Please try again.",
+          404: "Could not find a user with this email.",
+        });
+      });
+    },
+
+    async onSuccess() {
+      await onSuccess();
+      navigate("~/");
+    },
+  });
+
+  return (
+    <Form store={form} resetOnSubmit={false}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "1.125rem",
+        }}
+      >
+        <LetterheadTextField
+          name={form.names.email}
+          placeholder="james.workshop@example.com"
+          label="Email"
+          type="email"
+          required
+        />
+        <LetterheadTextField
+          name={form.names.password}
+          label="Password"
+          placeholder="Your password"
+          type="password"
+          required
+        />
+      </div>
+      <div
+        style={{
+          marginBlockStart: "2rem",
+          display: "flex",
+          flexDirection: "column",
+          gap: "1.125rem",
+        }}
+      >
+        <LetterheadSubmitError name={submitName} />
+        <LetterheadSubmitButton>Log in</LetterheadSubmitButton>
+      </div>
+    </Form>
+  );
+}
+
+function useCurrentUserResult(client: IndieTabletopClient) {
+  const getCurrentUser = useCallback(() => client.getCurrentUser(), [client]);
+  const [result, setResult] = useState<
+    Success<CurrentUser> | Failure<FailurePayload> | Pending
+  >(new Pending());
+
+  useEffect(() => {
+    getCurrentUser().then((result) => setResult(result));
+  }, [getCurrentUser]);
+
+  return result;
+}
+
+export function LoginPage(props: {
+  client: IndieTabletopClient;
+  localUser: CurrentUser | null;
+  onSuccess: EventHandler;
+  onLogout: EventHandler;
+}) {
+  const { client, localUser, onLogout } = props;
+  const currentUserResult = useCurrentUserResult(client);
+
+  return (
+    <div className={css.page}>
+      <Title>Login</Title>
+
+      {currentUserResult.unpack(
+        (serverUser) => {
+          if (localUser && localUser.id !== serverUser.id) {
+            return (
+              <Letterhead>
+                <header className={css.header}>
+                  <LetterheadHeading>User mismatch</LetterheadHeading>
+
+                  <LetterheadParagraph>
+                    You are logged into Indie Tabletop Club as{" "}
+                    {serverUser.email}, but the account currently logged in on
+                    this device is {localUser.email}.
+                  </LetterheadParagraph>
+
+                  <LetterheadParagraph>
+                    Please pick which user account to continue with to prevent
+                    syncing issues.
+                  </LetterheadParagraph>
+
+                  <div>
+                    <Button type="button">
+                      <div>Continue as {serverUser.email}</div>
+                      <div>Local data will be deleted.</div>
+                    </Button>
+
+                    <Button type="button">
+                      <div>Continue as {localUser.email}</div>
+                      <div>You will be asked for your credentials again.</div>
+                    </Button>
+                  </div>
+                </header>
+              </Letterhead>
+            );
+          }
+
+          return (
+            <Letterhead>
+              <header className={css.header}>
+                <LetterheadHeading>Logged in</LetterheadHeading>
+                <LetterheadParagraph>
+                  You are already logged into Indie Tabletop Club as{" "}
+                  {serverUser.email}.
+                </LetterheadParagraph>
+
+                <LetterheadParagraph>
+                  <Link className={interactiveText} href="~/">
+                    Continue
+                  </Link>
+                  {` as current user, or `}
+                  <Button className={interactiveText} onClick={onLogout}>
+                    log out
+                  </Button>
+                  .
+                </LetterheadParagraph>
+              </header>
+            </Letterhead>
+          );
+        },
+        (failure) => {
+          if (failure.type === "API_ERROR" && failure.code === 401) {
+            return (
+              <Letterhead>
+                <header className={css.header}>
+                  <LetterheadHeading>Log in</LetterheadHeading>
+                  <LetterheadParagraph>
+                    Log into your Indie Tabletop Club account to access creator
+                    features.
+                  </LetterheadParagraph>
+                </header>
+
+                <LoginForm {...props} />
+              </Letterhead>
+            );
+          }
+
+          return null;
+        },
+        () => (
+          <LoadingPage />
+        ),
+      )}
+    </div>
+  );
+}

package/lib/LoginPage/style.css.ts

@@ -0,0 +1,17 @@
+import { MinWidth } from "@indietabletop/appkit";
+import { style } from "@vanilla-extract/css";
+
+export const page = style({
+  backgroundColor: "white",
+
+  "@media": {
+    [MinWidth.SMALL]: {
+      backgroundColor: "transparent",
+      padding: "clamp(1rem, 5vw, 5rem)",
+    },
+  },
+});
+
+export const header = style({
+  marginBlockEnd: "3rem",
+});

package/lib/ModernIDB/Cursor.ts

@@ -0,0 +1,91 @@
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+
+import { requestToPromise } from "./utils.ts";
+
+export class Cursor<C extends IDBCursor = IDBCursor> {
+  idbCursor: C;
+
+  constructor(idbCursor: C) {
+    this.idbCursor = idbCursor;
+  }
+
+  get key() {
+    return this.idbCursor.key;
+  }
+
+  get primaryKey() {
+    return this.idbCursor.primaryKey;
+  }
+
+  get direction() {
+    return this.idbCursor.direction;
+  }
+
+  /**
+   * Advances the cursor through the next count records in range.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/IDBCursor/advance
+   */
+  advance(count: number): void {
+    this.idbCursor.advance(count);
+  }
+  /**
+   * Advances the cursor to the next record in range.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/IDBCursor/continue)
+   */
+  continue(key?: IDBValidKey): void {
+    this.idbCursor.continue(key);
+  }
+}
+
+export class CursorWithValue<Item> extends Cursor<IDBCursorWithValue> {
+  get value(): Item {
+    return this.idbCursor.value;
+  }
+
+  /**
+   * Delete the record pointed at by the cursor.
+   *
+   * If successful, request's result will be undefined.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/IDBCursor/delete)
+   */
+  delete(): Promise<undefined> {
+    return requestToPromise(this.idbCursor.delete());
+  }
+  /**
+   * Updated the record pointed at by the cursor with a new value.
+   *
+   * Throws a "DataError" DOMException if the effective object store uses in-line keys and the key would have changed.
+   *
+   * If successful, request's result will be the record's key.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/IDBCursor/update)
+   */
+  update(value: Item): Promise<IDBValidKey> {
+    return requestToPromise(this.idbCursor.update(value));
+  }
+}
+
+export class IndexCursor extends Cursor {
+  /**
+   * Advances the cursor to the next record in range matching or after key and primaryKey. Throws an "InvalidAccessError" DOMException if the source is not an index.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/IDBCursor/continuePrimaryKey)
+   */
+  continuePrimaryKey(key: IDBValidKey, primaryKey: IDBValidKey): void {
+    this.idbCursor.continuePrimaryKey(key, primaryKey);
+  }
+}
+
+export class IndexCursorWithValue<Item> extends CursorWithValue<Item> {
+  /**
+   * Advances the cursor to the next record in range matching or after key and primaryKey. Throws an "InvalidAccessError" DOMException if the source is not an index.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/IDBCursor/continuePrimaryKey)
+   */
+  continuePrimaryKey(key: IDBValidKey, primaryKey: IDBValidKey): void {
+    this.idbCursor.continuePrimaryKey(key, primaryKey);
+  }
+}