@indietabletop/appkit 6.1.6 → 7.0.0-0

package/lib/SafariCheck/style.css.ts

@@ -1,106 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { fadeIn } from "../animations.css.ts";
-
-export const container = style({
-  display: "flex",
-  alignItems: "center",
-  justifyItems: "center",
-  flexDirection: "column",
-  blockSize: "100%",
-});
-
-export const safariPrompt = style({
-  backgroundColor: "white",
-  borderRadius: "1rem",
-  maxWidth: "38rem",
-  padding: "clamp(1rem, 5vw, 3rem)",
-  margin: "auto",
-});
-
-export const safariLogo = style({
-  maxWidth: "4rem",
-  marginInline: "auto",
-  marginBlockEnd: "1rem",
-  aspectRatio: "1",
-});
-
-export const safariPromptHeader = style({
-  marginBlockEnd: "clamp(1.5rem, 4cqw, 2rem)",
-});
-
-export const safariPromptActions = style({
-  display: "grid",
-  gap: "0.5rem",
-  gridTemplateColumns: "repeat(auto-fill, minmax(12rem, 1fr))",
-  marginBlock: "1.5rem",
-});
-
-export const safariDismissArea = style({
-  textAlign: "center",
-  marginBlock: "2rem 3rem",
-});
-
-export const compatCheckLoaderContainer = style({
-  maxInlineSize: "16rem",
-  margin: "auto",
-});
-
-export const indicator = style({
-  marginInline: "auto",
-});
-
-export const compatCheckLoaderText = style({
-  fontStyle: "italic",
-  color: `hsl(0 0% 0% / 0.5)`,
-  animation: `${fadeIn} 300ms 150ms both`,
-  marginBlockStart: "0.5rem",
-  textAlign: "center",
-});
-
-export const emptyStateHeading = style({
-  textAlign: "center",
-  marginBlockEnd: "0.5rem",
-});
-
-export const appIcon = style({
-  aspectRatio: "1",
-  borderRadius: "20%",
-  boxShadow: "0 0.125rem 0.25rem hsl(0 0% 0% / 0.2)",
-  width: "3rem",
-  height: "auto",
-  marginInline: "auto",
-  marginBlockEnd: "1rem",
-});
-
-export const dialog = style({
-  padding: "2rem",
-  textAlign: "center",
-});
-
-export const heading = style({
-  fontSize: "1.25rem",
-});
-
-export const intro = style({
-  marginBlockStart: "0.5rem",
-});
-
-export const steps = style({
-  marginBlock: "2rem",
-  borderBlockStart: "1px solid hsl(0 0% 0% / 0.1)",
-  textAlign: "left",
-});
-
-export const step = style({
-  borderBlockEnd: "1px solid hsl(0 0% 0% / 0.1)",
-  listStyle: "decimal",
-  listStylePosition: "inside",
-  paddingBlock: "0.75rem",
-});
-
-export const icon = style({
-  display: "inline-block",
-  position: "relative",
-  inlineSize: "1.25rem",
-  top: "0.125em",
-});

package/lib/ServiceWorkerHandler.tsx

@@ -1,53 +0,0 @@
-import { type ReactNode, useEffect } from "react";
-
-/**
- * This component handles the installation of a service worker.
- *
- * Currently it doesn't do much, but, eventually, it should provide context
- * to nested components communicating the status of the service worker installation.
- */
-export function ServiceWorkerHandler(props: {
-  children: ReactNode;
-  path: string;
-}) {
-  useEffect(() => {
-    async function registerWorker() {
-      // Although modern browsers all support service workers, native app's
-      // web views (eg. the Facebook app's embedded browsers) do not.
-      if ("serviceWorker" in navigator) {
-        try {
-          const registration = await navigator.serviceWorker.register(
-            props.path,
-          );
-          console.info("Service worker registration obtained.");
-
-          registration.addEventListener("updatefound", () => {
-            const worker = registration.installing;
-            console.info("Installing new service worker.");
-
-            worker?.addEventListener("statechange", ({ target }) => {
-              if (target instanceof ServiceWorker) {
-                console.info(
-                  `Service worker state changed: '${target.state}'.`,
-                );
-              }
-            });
-          });
-        } catch (error) {
-          // In rare cases, service worker installation can fail, e.g. due to network
-          // connectivity. There is no need to report the error as there is nothing
-          // that can be done to prevent this from occassionally happening.
-          console.error(error);
-        }
-      }
-    }
-
-    void registerWorker();
-
-    // Note that it is not necessary to 'cleanup' the registration in
-    // the useEffect hook. Calling register() multiple times is a no-op.
-    // See https://web.dev/articles/service-workers-registration#subsequent_visits
-  }, [props.path]);
-
-  return <>{props.children}</>;
-}

package/lib/ShareButton/ShareButton.stories.tsx

@@ -1,58 +0,0 @@
-import preview from "../../.storybook/preview.tsx";
-import { ShareButton } from "./ShareButton.tsx";
-import { test } from "./test.css.ts";
-
-const meta = preview.meta({
-  title: "Components/Share Button",
-  component: ShareButton,
-  tags: ["autodocs"],
-  args: {
-    shareLabel: "Share data",
-    copyLabel: "Copy to clipboard",
-    shareData: { url: "https://example.com", title: "Example URL" },
-  },
-});
-
-/**
- * The default case.
- */
-export const Default = meta.story({
-  args: {},
-});
-
-/**
- * Enforce use of copy to clipboard.
- */
-export const WebShareDisabled = meta.story({
-  args: {
-    webShare: false,
-  },
-});
-
-/**
- * Allows overriding revert after milliseconds timer.
- */
-export const RevertAfterOverride = meta.story({
-  args: {
-    revertAfterMs: 5000,
-  },
-});
-
-/**
- * Manually supplying disabled overrides internal button state.
- */
-export const Disabled = meta.story({
-  args: {
-    disabled: true,
-  },
-});
-
-/**
- * Passes along arbitrary props to the underlying button component.
- */
-export const PassesProps = meta.story({
-  args: {
-    className: test,
-    style: { fontFamily: "cursive", padding: "1rem 2rem" },
-  },
-});

package/lib/ShareButton/ShareButton.tsx

@@ -1,153 +0,0 @@
-import { Button, type ButtonProps } from "@ariakit/react";
-import { useState, type ReactNode } from "react";
-import { useRevertingState } from "../use-reverting-state.ts";
-
-type AriakitButtonProps = Omit<ButtonProps, "children" | "onClick" | "value">;
-
-export type CopyToClipboardButtonProps = AriakitButtonProps & {
-  value: string | null;
-  children: ReactNode;
-  revertAfterMs: number;
-};
-
-export function CopyToClipboardButton(props: CopyToClipboardButtonProps) {
-  const { children, value, revertAfterMs, disabled, ...buttonProps } = props;
-  const [copiedTimestamp, setCopiedTimestamp] = useRevertingState<
-    number | null
-  >(null, revertAfterMs);
-
-  return (
-    <Button
-      {...buttonProps}
-      disabled={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, disabled, ...buttonProps } =
-    props;
-
-  // Tracking sharing state to prevent duplicate invocations of
-  // the share dialog.
-  const [sharing, setSharing] = useState(false);
-
-  const [copiedTimestamp, setCopiedTimestamp] = useRevertingState<
-    number | null
-  >(null, revertAfterMs);
-
-  return (
-    <Button
-      {...buttonProps}
-      disabled={disabled || !shareData || sharing}
-      onClick={async () => {
-        if (shareData) {
-          try {
-            setSharing(true);
-
-            await navigator.share(shareData);
-            setCopiedTimestamp(Date.now());
-          } catch {
-            console.info("Not shared");
-          } finally {
-            setSharing(false);
-          }
-        }
-      }}
-    >
-      {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,
-    ...buttonProps
-  } = props;
-
-  if (webShare) {
-    return (
-      <WebShareButton
-        {...buttonProps}
-        shareData={shareData}
-        revertAfterMs={revertAfterMs}
-      >
-        {shareLabel}
-      </WebShareButton>
-    );
-  }
-
-  return (
-    <CopyToClipboardButton
-      {...buttonProps}
-      revertAfterMs={revertAfterMs}
-      value={shareData?.url ?? null}
-    >
-      {copyLabel}
-    </CopyToClipboardButton>
-  );
-}

package/lib/ShareButton/test.css.ts

@@ -1,3 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const test = style({ backgroundColor: "rebeccapurple", color: "wheat" });

package/lib/SubscribeCard/LetterheadInfoCard.tsx

@@ -1,23 +0,0 @@
-import {
-  Letterhead,
-  LetterheadHeading,
-  LetterheadParagraph,
-} from "../Letterhead/index.tsx";
-import * as css from "./style.css.ts";
-import type { ViewContent } from "./SubscribeByPledgeCard.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

@@ -1,69 +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 { SubscribeByEmailCard } from "./SubscribeByEmailCard.tsx";
-
-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 });
-      },
-    );
-  },
-};
-
-const meta = preview.meta({
-  title: "Newsletter/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(),
-      },
-    },
-  },
-});
-
-export const Default = meta.story({});

package/lib/SubscribeCard/SubscribeByEmailCard.tsx

@@ -1,183 +0,0 @@
-import { Form } from "@ariakit/react";
-import {
-  getSubmitFailureMessage,
-  Letterhead,
-  LetterheadFormActions,
-  LetterheadHeader,
-  LetterheadHeading,
-  LetterheadParagraph,
-  LetterheadSubmitButton,
-  LetterheadSubmitError,
-  LetterheadTextField,
-  useForm,
-  validEmail,
-} from "@indietabletop/appkit";
-import {
-  useState,
-  type Dispatch,
-  type ReactNode,
-  type SetStateAction,
-} from "react";
-import { useAppConfig, useClient } from "../AppConfig/AppConfig.tsx";
-import { LetterheadInfoCard } from "./LetterheadInfoCard.tsx";
-import * as css from "./style.css.ts";
-
-type SetStep = Dispatch<SetStateAction<SubscribeStep>>;
-
-function SubscribeView(
-  props: ViewContent & {
-    setStep: SetStep;
-  },
-) {
-  const { placeholders } = useAppConfig();
-  const { title, description, setStep } = props;
-
-  const client = useClient();
-  const { form, submitName } = useForm({
-    defaultValues: {
-      email: "",
-    },
-    validate: {
-      email: validEmail,
-    },
-    async onSubmit({ values }) {
-      const result = await client.subscribeToNewsletterByEmail(
-        "changelog",
-        values.email,
-      );
-
-      return result.mapFailure(getSubmitFailureMessage);
-    },
-    async onSuccess({ tokenId }, { values }) {
-      setStep({ type: "SUBMIT_CODE", email: values.email, tokenId });
-    },
-  });
-
-  return (
-    <Form store={form} resetOnSubmit={false}>
-      <Letterhead>
-        <LetterheadHeader>
-          <LetterheadHeading className={css.card.heading}>
-            {title}
-          </LetterheadHeading>
-
-          {description}
-        </LetterheadHeader>
-
-        <LetterheadTextField
-          name={form.names.email}
-          label="Your email"
-          placeholder={placeholders.email}
-          autoComplete="email"
-          required
-        />
-
-        <LetterheadFormActions>
-          <LetterheadSubmitError name={submitName} />
-          <LetterheadSubmitButton>Subscribe</LetterheadSubmitButton>
-        </LetterheadFormActions>
-      </Letterhead>
-    </Form>
-  );
-}
-
-function SubmitCodeStep(props: {
-  tokenId: string;
-  setStep: SetStep;
-  email: string;
-}) {
-  const { tokenId, email, setStep } = props;
-  const client = useClient();
-
-  const { form, submitName } = useForm({
-    defaultValues: {
-      code: "",
-    },
-    async onSubmit({ values }) {
-      const op = await client.confirmNewsletterSignup(
-        "changelog",
-        tokenId,
-        values.code,
-      );
-
-      return op.mapFailure((failure) => {
-        return getSubmitFailureMessage(failure, {
-          404: "🚫 This code is incorrect or expired. Please try again.",
-        });
-      });
-    },
-    onSuccess() {
-      setStep({ type: "SUBSCRIBE_SUCCESS" });
-    },
-  });
-
-  return (
-    <Form store={form} resetOnSubmit={false}>
-      <Letterhead>
-        <LetterheadHeader>
-          <LetterheadHeading>Confirm subscription</LetterheadHeading>
-          <LetterheadParagraph>
-            We've sent a one-time code to <em>{email}</em>. Please, enter the
-            code in the field below to confirm your newsletter subscription.
-          </LetterheadParagraph>
-        </LetterheadHeader>
-
-        <LetterheadTextField
-          name={form.names.code}
-          label="Code"
-          placeholder="E.g. 123123"
-          autoComplete="one-time-code"
-          required
-        />
-
-        <LetterheadFormActions>
-          <LetterheadSubmitError name={submitName} />
-          <LetterheadSubmitButton>Confirm</LetterheadSubmitButton>
-        </LetterheadFormActions>
-      </Letterhead>
-    </Form>
-  );
-}
-
-type SubscribeStep =
-  | { type: "SUBSCRIBE" }
-  | { type: "SUBMIT_CODE"; email: string; tokenId: string }
-  | { type: "SUBSCRIBE_SUCCESS" };
-
-type ViewContent = {
-  title: ReactNode;
-  description: ReactNode;
-};
-
-/**
- * Allows users to sign up to the newsletter using an arbitrary email.
- *
- * Signups are verified using an one-time code, which is sent to the supplied
- * email address.
- */
-export function SubscribeByEmailCard(props: {
-  content: Record<Exclude<SubscribeStep["type"], "SUBMIT_CODE">, ViewContent>;
-}) {
-  const { content } = props;
-  const [step, setStep] = useState<SubscribeStep>({ type: "SUBSCRIBE" });
-
-  switch (step.type) {
-    case "SUBSCRIBE": {
-      return <SubscribeView {...content[step.type]} setStep={setStep} />;
-    }
-
-    case "SUBMIT_CODE": {
-      return (
-        <SubmitCodeStep
-          email={step.email}
-          tokenId={step.tokenId}
-          setStep={setStep}
-        />
-      );
-    }
-
-    case "SUBSCRIBE_SUCCESS": {
-      return <LetterheadInfoCard {...content[step.type]} />;
-    }
-  }
-}