@indietabletop/appkit 3.6.0-2 → 3.6.0-3

package/lib/AppConfig/AppConfig.tsx

@@ -0,0 +1,54 @@
+import { createContext, type ReactNode, useContext } from "react";
+import type { IndieTabletopClient } from "../client.ts";
+
+export type AppConfig = {
+  appName: string;
+  client: IndieTabletopClient;
+  hrefs: {
+    login: () => string;
+    password: () => string;
+    join: () => string;
+    terms: () => string;
+    verify: () => string;
+    dashboard: () => string;
+  };
+  placeholders: {
+    email: string;
+  };
+};
+
+const AppConfigContext = createContext<AppConfig | null>(null);
+
+export function AppConfigProvider(props: {
+  config: AppConfig;
+  children: ReactNode;
+}) {
+  const { config, children } = props;
+  return <AppConfigContext value={config}>{children}</AppConfigContext>;
+}
+
+export function useAppConfig() {
+  const config = useContext(AppConfigContext);
+
+  if (!config) {
+    throw new Error(
+      `Attempting to retrieve app config, but none was found within context. ` +
+        `Make sure that AppConfigProvider is used in the component hierarchy.`,
+    );
+  }
+
+  return config;
+}
+
+export function useClient() {
+  const config = useContext(AppConfigContext);
+
+  if (!config?.client) {
+    throw new Error(
+      `Attempting to retrieve ITC client, but none was found within context. ` +
+        `Make sure that AppConfigProvider is used in the component hierarchy.`,
+    );
+  }
+
+  return config.client;
+}

package/lib/HistoryState.ts

@@ -0,0 +1,21 @@
+/**
+ * History state interface. This value can be extended via the standard
+ * typescript declaration merging mechanism.
+ *
+ * Use it via {@link getHistoryState}.
+ *
+ * @see https://www.typescriptlang.org/docs/handbook/declaration-merging.html
+ */
+export interface HistoryState {
+  emailValue?: string;
+}
+
+/**
+ * Get's window history state with correct typings.
+ *
+ * Note that this is not a reactive value. It will not trigger re-renders if
+ * it is changed.
+ */
+export function getHistoryState() {
+  return window.history.state as HistoryState | null;
+}

package/lib/Letterhead/style.css.ts

@@ -25,6 +25,8 @@ export const letterhead = recipe({
       borderRadius: "1rem",
       marginInline: "auto",
       maxInlineSize: "36rem",
+      transition: "height 200ms",
+      height: "calc-size(auto)",
 
       "@media": {
         [MinWidth.SMALL]: {

package/lib/LetterheadForm/index.tsx

@@ -1,4 +1,6 @@
 import {
+  FormCheckbox,
+  type FormCheckboxProps,
   FormError,
   FormInput,
   type FormInputProps,
@@ -7,6 +9,7 @@ import {
   useStoreState,
 } from "@ariakit/react";
 import { type ReactNode } from "react";
+import { cx } from "../class-names.ts";
 import * as css from "./style.css.ts";
 
 export type LetterheadTextFieldProps = FormInputProps & {
@@ -34,6 +37,23 @@ export function LetterheadTextField(props: LetterheadTextFieldProps) {
   );
 }
 
+export function LetterheadCheckboxField(
+  props: FormCheckboxProps & { label: ReactNode },
+) {
+  const { label, name, ...inputProps } = props;
+
+  return (
+    <div {...cx(css.checkboxField)}>
+      <div>
+        <FormCheckbox name={name} {...inputProps} />{" "}
+        <FormLabel name={name}>{label}</FormLabel>
+      </div>
+
+      <FormError name={name} className={css.fieldIssue} />
+    </div>
+  );
+}
+
 type LetterheadReadonlyTextFieldProps = {
   label: string;
   value: string;
@@ -92,3 +112,36 @@ export function LetterheadSubmitError(props: LetterheadSubmitErrorProps) {
     </div>
   );
 }
+
+export function LetterheadHeader(props: { children: ReactNode }) {
+  return <header className={css.header}>{props.children}</header>;
+}
+
+export function LetterheadFormActions(props: { children: ReactNode }) {
+  return (
+    <div
+      style={{
+        marginBlockStart: "2rem",
+        display: "flex",
+        flexDirection: "column",
+        gap: "1.125rem",
+      }}
+    >
+      {props.children}
+    </div>
+  );
+}
+
+export function InputsStack(props: { children: ReactNode }) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "1.125rem",
+      }}
+    >
+      {props.children}
+    </div>
+  );
+}

package/lib/LetterheadForm/style.css.ts

@@ -48,6 +48,10 @@ export const fieldInput = style([
   },
 ]);
 
+export const checkboxField = style({
+  textAlign: "start",
+});
+
 export const fieldIssue = style({
   color: Color.PURPLE,
   fontSize: "0.875rem",
@@ -83,3 +87,7 @@ export const submitError = style({
     display: "none",
   },
 });
+
+export const header = style({
+  marginBlockEnd: "3rem",
+});

package/lib/QRCode/QRCode.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { http, HttpResponse } from "msw";
+import { Failure, Pending, Success } from "../async-op.ts";
+import { QRCode } from "./QRCode.tsx";
+
+type StoryMeta = Meta<typeof QRCode>;
+
+type Story = StoryObj<typeof meta>;
+
+const meta = {
+  title: "Components/QR Code",
+  component: QRCode,
+  tags: ["autodocs"],
+  args: {
+    url: new Success("example.com"),
+  },
+  parameters: {
+    msw: {
+      handlers: {
+        qr: http.get("http://mock.api/qr", async () => {
+          const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 41" shape-rendering="crispEdges"><path fill="#ffffff" d="M0 0h41v41H0z"/><path stroke="#000000" d="M4 4.5h7m2 0h2m2 0h1m3 0h1m1 0h3m1 0h1m2 0h7M4 5.5h1m5 0h1m2 0h2m1 0h4m2 0h1m1 0h3m1 0h1m1 0h1m5 0h1M4 6.5h1m1 0h3m1 0h1m1 0h1m3 0h2m1 0h1m4 0h2m1 0h1m2 0h1m1 0h3m1 0h1M4 7.5h1m1 0h3m1 0h1m1 0h5m1 0h3m3 0h5m1 0h1m1 0h3m1 0h1M4 8.5h1m1 0h3m1 0h1m1 0h2m3 0h1m1 0h1m2 0h3m2 0h1m2 0h1m1 0h3m1 0h1M4 9.5h1m5 0h1m1 0h1m1 0h1m1 0h5m3 0h1m1 0h1m3 0h1m5 0h1M4 10.5h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7M12 11.5h4m3 0h1m2 0h6M4 12.5h1m1 0h5m3 0h1m2 0h5m4 0h1m1 0h1m1 0h5M4 13.5h2m2 0h1m2 0h1m2 0h3m3 0h6m1 0h1m2 0h2m1 0h2m1 0h1M4 14.5h7m1 0h1m3 0h1m2 0h3m2 0h3m1 0h1m1 0h1m1 0h1m1 0h2M4 15.5h6m1 0h4m1 0h1m1 0h1m1 0h1m1 0h1m2 0h5m2 0h4M4 16.5h1m2 0h4m1 0h2m1 0h2m5 0h2m2 0h1m1 0h1m3 0h2m1 0h1M6 17.5h2m3 0h2m1 0h3m1 0h3m1 0h3m5 0h1m3 0h3M4 18.5h3m3 0h2m3 0h1m2 0h1m3 0h1m1 0h3m2 0h2m4 0h1M4 19.5h3m1 0h1m7 0h1m3 0h1m3 0h2m2 0h3m1 0h1m1 0h1M4 20.5h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m2 0h2m2 0h1m1 0h1m3 0h1m1 0h1m1 0h2m3 0h1M6 21.5h1m2 0h1m1 0h5m4 0h5m2 0h1m2 0h2m1 0h4M4 22.5h8m1 0h3m1 0h3m1 0h1m4 0h1m2 0h4m1 0h2M4 23.5h1m1 0h2m4 0h1m2 0h8m1 0h3m2 0h6M4 24.5h3m2 0h2m1 0h1m2 0h1m1 0h1m1 0h2m5 0h1m2 0h1m1 0h3m1 0h2M4 25.5h5m3 0h3m2 0h3m2 0h3m4 0h2m2 0h1m2 0h1M4 26.5h1m2 0h1m1 0h3m3 0h2m2 0h4m1 0h1m1 0h1m2 0h1m1 0h3m1 0h1M4 27.5h1m3 0h2m1 0h2m1 0h3m1 0h2m2 0h1m1 0h2m1 0h1m1 0h1m1 0h1m1 0h2m1 0h1M4 28.5h1m1 0h2m2 0h3m2 0h7m4 0h7m2 0h1M12 29.5h2m2 0h3m1 0h1m1 0h4m2 0h1m3 0h1m1 0h1m1 0h1M4 30.5h7m2 0h1m1 0h1m3 0h2m1 0h1m3 0h3m1 0h1m1 0h1m1 0h2M4 31.5h1m5 0h1m1 0h1m3 0h2m1 0h2m2 0h6m3 0h5M4 32.5h1m1 0h3m1 0h1m1 0h1m6 0h1m2 0h5m1 0h6M4 33.5h1m1 0h3m1 0h1m1 0h2m5 0h3m1 0h1m4 0h2m2 0h1m1 0h3M4 34.5h1m1 0h3m1 0h1m1 0h1m2 0h1m1 0h1m6 0h2m1 0h5m1 0h2M4 35.5h1m5 0h1m2 0h2m1 0h3m1 0h1m1 0h1m2 0h2m5 0h3M4 36.5h7m1 0h6m3 0h1m4 0h1m1 0h4m1 0h1m1 0h1"/></svg>`;
+          const { buffer } = new TextEncoder().encode(svg);
+
+          return HttpResponse.arrayBuffer(buffer, {
+            headers: { "Content-Type": "image/svg+xml" },
+          });
+        }),
+      },
+    },
+  },
+} satisfies StoryMeta;
+
+export default meta;
+
+export const SuccessCase: Story = {};
+
+export const PendingCase: Story = {
+  args: {
+    url: new Pending(),
+  },
+};
+
+export const FailureCase: Story = {
+  args: {
+    url: new Failure("Failed"),
+  },
+};

package/lib/QRCode/QRCode.tsx

@@ -0,0 +1,49 @@
+import { useAppConfig } from "../AppConfig/AppConfig.tsx";
+import type { AsyncOp } from "../async-op.ts";
+import { cx } from "../class-names.ts";
+import { LoadingIndicator } from "../LoadingIndicator.js";
+import { code } from "./style.css.ts";
+
+export function QRCode(props: { url: AsyncOp<string, unknown> }) {
+  const { url: result } = props;
+  const { client } = useAppConfig();
+
+  return (
+    <div {...cx(code.container)}>
+      {result.unpack(
+        (url) => {
+          const params = new URLSearchParams({ url });
+          const src = `${client.origin}/qr?${params}`;
+          return (
+            <img
+              {...cx(code.image)}
+              src={src}
+              alt=""
+              width={150}
+              height={150}
+            />
+          );
+        },
+        () => {
+          return (
+            <svg
+              width="24px"
+              height="24px"
+              viewBox="0 0 24 24"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <g strokeWidth="2" stroke="#000000" strokeLinecap="square">
+                <line x1="7" y1="7" x2="17" y2="17" />
+                <line x1="17" y1="7" x2="7" y2="17" />
+              </g>
+            </svg>
+          );
+        },
+        () => {
+          return <LoadingIndicator />;
+        },
+      )}
+    </div>
+  );
+}

package/lib/QRCode/style.css.ts

@@ -0,0 +1,19 @@
+import { style } from "@vanilla-extract/css";
+
+export const code = {
+  container: style({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "white",
+    borderRadius: "0.5rem",
+    maxInlineSize: "12rem",
+    aspectRatio: "1",
+  }),
+
+  image: style({
+    inlineSize: "100%",
+    blockSize: "auto",
+    borderRadius: "inherit",
+  }),
+};

package/lib/ShareButton/ShareButton.tsx

@@ -0,0 +1,141 @@
+import { Button, type ButtonProps } from "@ariakit/react";
+import type { ReactNode } from "react";
+import { useRevertingState } from "../use-reverting-state.ts";
+
+type AriakitButtonProps = Omit<
+  ButtonProps,
+  "children" | "onClick" | "disabled" | "value"
+>;
+
+export type CopyToClipboardButtonProps = AriakitButtonProps & {
+  value: string | null;
+  children: ReactNode;
+  revertAfterMs: number;
+};
+
+export function CopyToClipboardButton(props: CopyToClipboardButtonProps) {
+  const { children, value, revertAfterMs, ...buttonProps } = props;
+  const [copiedTimestamp, setCopiedTimestamp] = useRevertingState<
+    number | null
+  >(null, revertAfterMs);
+
+  return (
+    <Button
+      {...buttonProps}
+      disabled={!value}
+      onClick={async () => {
+        if (value) {
+          await navigator.clipboard.writeText(value);
+          setCopiedTimestamp(Date.now());
+        }
+      }}
+    >
+      {copiedTimestamp ? "Copied!" : children}
+    </Button>
+  );
+}
+
+export type WebShareButtonProps = AriakitButtonProps & {
+  children: ReactNode;
+  shareData: ShareData | null;
+  revertAfterMs: number;
+};
+
+export function WebShareButton(props: WebShareButtonProps) {
+  const { shareData, children, revertAfterMs, ...buttonProps } = props;
+
+  const [copiedTimestamp, setCopiedTimestamp] = useRevertingState<
+    number | null
+  >(null, revertAfterMs);
+
+  return (
+    <Button
+      {...buttonProps}
+      disabled={!shareData}
+      onClick={async () => {
+        if (shareData) {
+          try {
+            await navigator.share(shareData);
+            setCopiedTimestamp(Date.now());
+          } catch {
+            console.info("Not shared");
+          }
+        }
+      }}
+    >
+      {copiedTimestamp ? "Shared!" : children}
+    </Button>
+  );
+}
+
+export type ShareButtonProps = AriakitButtonProps & {
+  /**
+   * Button label to use when copy to clipboard is used.
+   */
+  copyLabel: string;
+
+  /**
+   * Button label to use when web share is used.
+   */
+  shareLabel: string;
+
+  /**
+   * Data to be shared by the button.
+   *
+   * If using copy to clipboard, only the URL value will be used.
+   */
+  shareData: ShareData | null;
+
+  /**
+   * How long should the confirmation message be shown within the button?
+   *
+   * @default 1500
+   */
+  revertAfterMs?: number;
+
+  /**
+   * Should web share be used instead of copy to clipboard?
+   *
+   * By default, web share will be used if the browser supports it.
+   *
+   * @default !!navigator.share
+   */
+  webShare?: boolean;
+};
+
+/**
+ * An unstyled button that is pre-configured to either copy provided share data
+ * to clipboard, or to use web share, depending on which feature is detected
+ * in the browser where the button is running.
+ *
+ * Props that are not consumed by the Share Button itself are passed to the
+ * underlying Ariakit Button component.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share
+ */
+export function ShareButton(props: ShareButtonProps) {
+  const {
+    copyLabel,
+    shareLabel,
+    shareData,
+    revertAfterMs = 1500,
+    webShare = !!navigator.share,
+  } = props;
+
+  if (webShare) {
+    return (
+      <WebShareButton shareData={shareData} revertAfterMs={revertAfterMs}>
+        {shareLabel}
+      </WebShareButton>
+    );
+  }
+
+  return (
+    <CopyToClipboardButton
+      revertAfterMs={revertAfterMs}
+      value={shareData?.url ?? null}
+    >
+      {copyLabel}
+    </CopyToClipboardButton>
+  );
+}

package/lib/SubscribeCard/LetterheadInfoCard.tsx

@@ -0,0 +1,23 @@
+import {
+  Letterhead,
+  LetterheadHeading,
+  LetterheadParagraph,
+} from "../Letterhead/index.tsx";
+import * as css from "./style.css.ts";
+import type { ViewContent } from "./SubscribeCard.tsx";
+
+export function LetterheadInfoCard(props: ViewContent) {
+  return (
+    <Letterhead>
+      <LetterheadHeading className={css.card.heading}>
+        {props.title}
+      </LetterheadHeading>
+
+      {typeof props.description === "string" ? (
+        <LetterheadParagraph>{props.description}</LetterheadParagraph>
+      ) : (
+        props.description
+      )}
+    </Letterhead>
+  );
+}

package/lib/SubscribeCard/SubscribeByEmailCard.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { http, HttpResponse } from "msw";
+import { LetterheadParagraph } from "../Letterhead/index.tsx";
+import { sleep } from "../sleep.ts";
+import { SubscribeByEmailCard } from "./SubscribeByEmailCard.tsx";
+
+const pledge = {
+  id: "1",
+  email: "test@example.com",
+  contactSubscribed: false,
+};
+
+const handlers = {
+  subscribe() {
+    return http.post(
+      "http://mock.api/v1/newsletters/changelog/subscriptions",
+      async () => {
+        await sleep(2000);
+
+        return HttpResponse.json(
+          { tokenId: "1", message: "Ok" },
+          { status: 201 },
+        );
+      },
+    );
+  },
+  confirm() {
+    return http.put(
+      "http://mock.api/v1/newsletters/changelog/newsletter-signup-tokens/:tokenId",
+      async () => {
+        await sleep(2000);
+
+        return HttpResponse.json({ message: "Ok" }, { status: 201 });
+      },
+    );
+  },
+};
+
+/**
+ * Allows users to subscribe to ITC's newsletter using the email provided
+ * in their pledge.
+ */
+const meta = {
+  title: "Pages/Subscribe By Email Card",
+  component: SubscribeByEmailCard,
+  tags: ["autodocs"],
+  args: {
+    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!",
+      },
+    },
+  },
+  parameters: {
+    msw: {
+      handlers: {
+        subscribe: handlers.subscribe(),
+        confirm: handlers.confirm(),
+      },
+    },
+  },
+} satisfies Meta<typeof SubscribeByEmailCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};