@indietabletop/appkit 3.6.0-2 → 4.0.0-0

package/lib/AppConfig/AppConfig.tsx

@@ -0,0 +1,48 @@
+import { createContext, type ReactNode, useContext } from "react";
+import type { IndieTabletopClient } from "../client.ts";
+import type { AppHrefs } from "../hrefs.ts";
+
+export type AppConfig = {
+  appName: string;
+  client: IndieTabletopClient;
+  hrefs: AppHrefs;
+  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/AuthCard/AuthCard.stories.ts

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { AuthCard } from "./AuthCard.tsx";
+
+const meta = {
+  title: "Account/Auth Card",
+  component: AuthCard,
+  tags: ["autodocs"],
+  args: {
+    onLogout: fn(),
+  },
+} satisfies Meta<typeof AuthCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The default case where elements are correctly separated with middots.
+ */
+export const Authenticated: Story = {
+  args: {
+    currentUser: {
+      id: "martin",
+      email: "martin@example.com",
+      isVerified: true,
+    },
+  },
+};
+
+/**
+ * The default case in which all steps of the flow succeed.
+ */
+export const Anonymous: Story = {
+  args: {
+    currentUser: null,
+  },
+};

package/lib/AuthCard/AuthCard.tsx

@@ -0,0 +1,64 @@
+import { Button } from "@ariakit/react";
+import { Link } from "wouter";
+import { useAppConfig } from "../AppConfig/AppConfig.tsx";
+import { interactiveText } from "../common.css.ts";
+import { IndieTabletopClubLogo } from "../IndieTabletopClubLogo.tsx";
+import { LetterheadParagraph } from "../Letterhead/index.tsx";
+import { button } from "../Letterhead/style.css.ts";
+import { MiddotSeparated } from "../MiddotSeparated/MiddotSeparated.tsx";
+import type { CurrentUser } from "../types.ts";
+import { card } from "./style.css.ts";
+
+/**
+ * Small, ITC-branded card that shows authentication status.
+ *
+ * Primarily intended to be used within the sidenav.
+ */
+export function AuthCard(props: {
+  onLogout: () => void;
+  currentUser: CurrentUser | null;
+}) {
+  const { currentUser, onLogout } = props;
+  const { hrefs } = useAppConfig();
+  const align = !currentUser ? "center" : "start";
+
+  return (
+    <div className={card.container({ align })}>
+      <IndieTabletopClubLogo className={card.logo({ align })} />
+
+      {currentUser ? (
+        <>
+          <LetterheadParagraph>{currentUser.email}</LetterheadParagraph>
+
+          <MiddotSeparated className={card.loggedInAction}>
+            <Link className={interactiveText} href={hrefs.account()}>
+              Account
+            </Link>
+
+            <Button className={interactiveText} onClick={() => onLogout()}>
+              Log out
+            </Button>
+          </MiddotSeparated>
+        </>
+      ) : (
+        <>
+          <LetterheadParagraph size="small">
+            Enable backup & sync, access your pledge data, and more!
+          </LetterheadParagraph>
+
+          <Link href={hrefs.join()} className={button()}>
+            Join
+          </Link>
+
+          <LetterheadParagraph size="small">
+            {"Already have an account? "}
+            <Link href={hrefs.login()} className={interactiveText}>
+              Log in
+            </Link>
+            {"."}
+          </LetterheadParagraph>
+        </>
+      )}
+    </div>
+  );
+}

package/lib/AuthCard/style.css.ts

@@ -0,0 +1,49 @@
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+
+export const card = {
+  container: recipe({
+    base: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.75rem",
+      backgroundColor: "white",
+      padding: "1.5rem",
+      borderRadius: "0.5rem",
+      color: "black",
+    },
+
+    variants: {
+      align: {
+        center: {
+          textAlign: "center",
+        },
+        start: {
+          textAlign: "start",
+        },
+      },
+    },
+  }),
+
+  logo: recipe({
+    base: {
+      maxInlineSize: "11rem",
+    },
+
+    variants: {
+      align: {
+        center: {
+          marginInline: "auto",
+        },
+        start: {
+          marginInline: "0",
+        },
+      },
+    },
+  }),
+
+  loggedInAction: style({
+    borderBlockStart: "1px solid hsl(0 0% 0% / 0.1)",
+    paddingBlockStart: "0.75rem",
+  }),
+};

package/lib/DialogTrigger/index.tsx

@@ -15,8 +15,8 @@ function DialogGuard(props: { children: ReactNode }) {
 }
 
 /**
- * Wraps AriaKit's DialogProvider, but take a tuple of Dialog a DialogDisclosure
- * elements as children, and makes sense that the Dialog component is not
+ * Wraps AriaKit's DialogProvider, but takes a tuple of Dialog a DialogDisclosure
+ * elements as children, and makes sure that the Dialog component is not
  * rendered when it is hidden.
  *
  * This is important in cases where the dialog contains a form that should only

package/lib/DocumentTitle/DocumentTitle.tsx

@@ -0,0 +1,9 @@
+import { useAppConfig } from "../AppConfig/AppConfig.tsx";
+
+export function DocumentTitle(props: { children: string }) {
+  const { children: title } = props;
+  const { appName } = useAppConfig();
+  const itc = `${appName} · Indie Tabletop Club`;
+
+  return <title>{title ? `${title} | ${itc}` : itc}</title>;
+}

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/LoadingIndicator.tsx

@@ -17,6 +17,7 @@ export function LoadingIndicator(props: { className?: string }) {
       width={width}
       height={height}
       className={props.className}
+      preserveAspectRatio="xMidYMid meet"
     >
       <g stroke="none" fill="inherit">
         {Array.from({ length: 3 }, (_, index) => {

package/lib/MiddotSeparated/MiddotSeparated.stories.ts

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { MiddotSeparated } from "./MiddotSeparated.tsx";
+
+type ComponentType = typeof MiddotSeparated;
+
+type Story = StoryObj<typeof meta>;
+
+const meta = {
+  title: "Components/Middot Separated",
+  component: MiddotSeparated,
+  tags: ["autodocs"],
+} satisfies Meta<ComponentType>;
+
+export default meta;
+
+/**
+ * The default case in which all steps of the flow succeed.
+ */
+export const Default: Story = {
+  args: {
+    children: ["Lorem", "Ipsum", " Dolor"],
+  },
+};
+
+/**
+ * Edge case when it comes to handling children in React.
+ */
+export const SingleElement: Story = {
+  args: {
+    children: "Lorem",
+  },
+};

package/lib/MiddotSeparated/MiddotSeparated.tsx

@@ -0,0 +1,24 @@
+import { type HTMLAttributes, Children } from "react";
+import { withMiddlot } from "./style.css.ts";
+
+type MiddotSeparatedProps = HTMLAttributes<HTMLDivElement>;
+
+/**
+ * A utility component that wraps children into spans and adds middledots
+ * between each item using CSS ::before pseudo elements.
+ */
+export function MiddotSeparated(props: MiddotSeparatedProps) {
+  const { children, ...divProps } = props;
+
+  return (
+    <div {...divProps}>
+      {Children.toArray(children).map((item, index) => {
+        return (
+          <span className={withMiddlot} key={index}>
+            {item}
+          </span>
+        );
+      })}
+    </div>
+  );
+}

package/lib/MiddotSeparated/style.css.ts

@@ -0,0 +1,10 @@
+import { style } from "@vanilla-extract/css";
+
+export const withMiddlot = style({
+  selectors: {
+    "& + &::before": {
+      content: " · ",
+      opacity: 0.6,
+    },
+  },
+});

package/lib/ModernIDB/bindings/factory.tsx

@@ -114,13 +114,18 @@ export function createDatabaseBindings<T extends AnyModernIDB>(db: T) {
     return useContext(DatabaseOpenRequest);
   }
 
-  function DatabaseProvider(props: { children: ReactNode }) {
+  function DatabaseProvider(props: { children: ReactNode; open?: boolean }) {
+    const { children, open = true } = props;
     const { op, setSuccess, setFailure } = useAsyncOp<
       T,
       InaccessibleDatabaseError
     >();
 
     useEffect(() => {
+      if (!open) {
+        return;
+      }
+
       db.open({
         onBlocking() {
           setFailure({ type: "CLOSED_FOR_UPGRADE" });
@@ -142,11 +147,11 @@ export function createDatabaseBindings<T extends AnyModernIDB>(db: T) {
         db.close();
         console.info("Database closed.");
       };
-    }, [setFailure, setSuccess]);
+    }, [setFailure, setSuccess, open]);
 
     return (
       <DatabaseOpenRequest.Provider value={op}>
-        {props.children}
+        {children}
       </DatabaseOpenRequest.Provider>
     );
   }

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",
+  }),
+};