@indietabletop/appkit 6.1.6 → 7.0.0-0

package/lib/SubscribeCard/SubscribeByPledgeCard.stories.tsx

@@ -1,133 +0,0 @@
-import { http, HttpResponse } from "msw";
-import preview from "../../.storybook/preview.tsx";
-import { LetterheadParagraph } from "../Letterhead/index.tsx";
-import { sleep } from "../sleep.ts";
-import { SubscribeByPledgeCard } from "./SubscribeByPledgeCard.tsx";
-
-const pledge = {
-  id: "1",
-  email: "test@example.com",
-  contactSubscribed: false,
-};
-
-const subscribeByPledgeId = {
-  success() {
-    return http.post(
-      "http://mock.api/v1/newsletters/changelog/subscriptions",
-      async () => {
-        await sleep(2000);
-
-        return HttpResponse.json(
-          { message: "Added to newsletter" },
-          { status: 201 },
-        );
-      },
-    );
-  },
-  noConnection() {
-    return http.post(
-      "http://mock.api/v1/newsletters/changelog/subscriptions",
-      async () => {
-        return HttpResponse.error();
-      },
-    );
-  },
-  error() {
-    return http.post(
-      "http://mock.api/v1/newsletters/changelog/subscriptions",
-      async () => {
-        await sleep(2000);
-
-        return HttpResponse.text("Application error", { status: 500 });
-      },
-    );
-  },
-};
-
-/**
- * Allows users to subscribe to ITC's newsletter using the email provided
- * in their pledge.
- */
-const meta = preview.meta({
-  title: "Newsletter/Subscribe By Pledge Card",
-  component: SubscribeByPledgeCard,
-  tags: ["autodocs"],
-  args: {
-    pledge,
-    content: {
-      SUBSCRIBE: {
-        title: "Space Gits on Indie Tabletop Club",
-        description: (
-          <LetterheadParagraph>
-            Space Gits is getting a fancy <strong>gang builder</strong> and{" "}
-            <strong>smart rules</strong> in late 2025 in collaboration with
-            Indie Tabletop Club. Subscribe to ITC&apos;s{" "}
-            <em>at‑most‑one‑a‑month</em> newsletter and be among the first to
-            gain early access. It&apos;s gonna be rad.
-          </LetterheadParagraph>
-        ),
-      },
-      SUBSCRIBE_SUCCESS: {
-        title: "Subscribed!",
-        description:
-          "Thank you for being awesome. Once Space Gits is available for " +
-          "early access, you will be among the first to know!",
-      },
-      PREVIOUSLY_SUBSCRIBED: {
-        title: "Space Gits on Indie Tabletop Club",
-        description: (
-          <>
-            <LetterheadParagraph>
-              Space Gits is getting a fancy <strong>gang builder</strong> and{" "}
-              <strong>smart rules</strong> in late 2025 in collaboration with
-              Indie Tabletop Club.
-            </LetterheadParagraph>
-
-            <LetterheadParagraph>
-              Early access will be announced via ITC&apos;s newsletter, which
-              &mdash; according to our records &mdash; you are are already
-              subscribed to! Nothing left to do but await the good news in your
-              inbox!
-            </LetterheadParagraph>
-          </>
-        ),
-      },
-    },
-  },
-  parameters: {
-    msw: {
-      handlers: {
-        subscribeByPledgeId: subscribeByPledgeId.success(),
-      },
-    },
-  },
-});
-
-/**
- * The default case, in which the user is not yet subscribed to ITC's newsletter
- * and the submission is successful.
- */
-export const Default = meta.story({});
-
-/**
- * Same like the default case, but the form submission fails. Errors are
- * differentiated using the `getSubmitFailureMessage` helper, so all the basics
- * should be covered, as this page doesn't have special cases.
- */
-export const FailureOnSubmit = meta.story({
-  parameters: {
-    msw: {
-      handlers: {
-        subscribeByPledgeId: subscribeByPledgeId.error(),
-      },
-    },
-  },
-});
-
-/**
- * In this case, the email address associated with this user account is
- * already subscribed to our newsletter.
- */
-export const AlreadySubscribed = meta.story({
-  args: { pledge: { ...pledge, contactSubscribed: true } },
-});

package/lib/SubscribeCard/SubscribeByPledgeCard.tsx

@@ -1,127 +0,0 @@
-import { Form } from "@ariakit/react";
-import {
-  getSubmitFailureMessage,
-  Letterhead,
-  LetterheadHeading,
-  LetterheadParagraph,
-  LetterheadSubmitButton,
-  LetterheadSubmitError,
-  useForm,
-  type RedeemedPledge,
-} from "@indietabletop/appkit";
-import { useState, type ReactNode } from "react";
-import { useClient } from "../AppConfig/AppConfig.tsx";
-import { LetterheadInfoCard } from "./LetterheadInfoCard.tsx";
-import * as css from "./style.css.ts";
-
-type Pledge = Pick<RedeemedPledge, "id" | "email" | "contactSubscribed">;
-
-function SubscribeView(
-  props: ViewContent & {
-    onSuccess: () => void;
-    pledge: Pledge;
-  },
-) {
-  const { pledge, title, description, onSuccess } = props;
-
-  const client = useClient();
-  const { form, submitName } = useForm({
-    defaultValues: {},
-    onSuccess,
-    async onSubmit() {
-      const result = await client.subscribeToNewsletterByPledgeId(
-        "changelog",
-        pledge.id,
-      );
-
-      return result.mapFailure(getSubmitFailureMessage);
-    },
-  });
-
-  return (
-    <Letterhead>
-      <LetterheadHeading className={css.card.heading}>
-        {title}
-      </LetterheadHeading>
-
-      {description}
-
-      <Form store={form} className={css.card.form}>
-        <LetterheadSubmitError name={submitName} />
-
-        <LetterheadSubmitButton>Subscribe</LetterheadSubmitButton>
-
-        <LetterheadParagraph size="small">
-          Using {pledge.email} from your pledge.
-        </LetterheadParagraph>
-      </Form>
-    </Letterhead>
-  );
-}
-
-type SubscribeStep =
-  | "PREVIOUSLY_SUBSCRIBED"
-  | "SUBSCRIBE"
-  | "SUBSCRIBE_SUCCESS";
-
-export type ViewContent = {
-  title: ReactNode;
-  description: ReactNode;
-};
-
-/**
- * Allows users to sign up to the newsletter using the email associated with
- * their pledge ID.
- *
- * Emails are not verified using a one-time code, as the user has just
- * implicitly verified their address by navigating to the page with the unique
- * pledge ID.
- */
-export function SubscribeByPledgeCard(props: {
-  /**
-   * The pledge data that will be used to determine whether the user should
-   * be prompted for signup.
-   */
-  pledge: Pledge;
-
-  /**
-   * Content for each of the subscribe steps. You probably want to customize it
-   * for each step, so it is left to be defined at point of usage.
-   *
-   * If the `description` is a string, it will be wrapped in
-   * `<LetterheadParagraph>`, otherwise it will be left as is.
-   */
-  content: Record<SubscribeStep, ViewContent>;
-}) {
-  const { pledge } = props;
-
-  const [step, setStep] = useState<SubscribeStep>(
-    pledge.contactSubscribed ? "PREVIOUSLY_SUBSCRIBED" : "SUBSCRIBE",
-  );
-
-  const content = props.content[step];
-
-  switch (step) {
-    case "SUBSCRIBE": {
-      return (
-        <SubscribeView
-          {...props}
-          {...content}
-          onSuccess={() => void setStep("SUBSCRIBE_SUCCESS")}
-        />
-      );
-    }
-
-    case "PREVIOUSLY_SUBSCRIBED":
-    case "SUBSCRIBE_SUCCESS": {
-      return <LetterheadInfoCard {...content} />;
-    }
-  }
-}
-
-export {
-  /**
-   * @deprecated Use {@link SubscribeByPledgeCard}
-   */
-  SubscribeByPledgeCard as SubscribeCard,
-};

package/lib/SubscribeCard/style.css.ts

@@ -1,14 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const card = {
-  heading: style({
-    maxInlineSize: "20rem",
-    marginInline: "auto",
-  }),
-  form: style({
-    marginBlockStart: "2.5rem",
-    display: "flex",
-    flexDirection: "column",
-    gap: "1rem",
-  }),
-};

package/lib/account/AccountIssueView.tsx

@@ -1,44 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,292 +0,0 @@
-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(),
-      },
-    },
-  },
-});