@indietabletop/appkit 3.2.0-1 → 3.2.0-10

package/dist/client.js

@@ -1,201 +0,0 @@
-import { Failure, Success } from "@indietabletop/appkit/async-op";
-import { mask, object, string, Struct } from "superstruct";
-import { currentUser, sessionInfo } from "./structs.js";
-export class IndieTabletopClient {
-    constructor(props) {
-        Object.defineProperty(this, "origin", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "onCurrentUser", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "onSessionInfo", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "onSessionExpired", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "refreshTokenPromise", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        this.origin = props.apiOrigin;
-        this.onCurrentUser = props.onCurrentUser;
-        this.onSessionInfo = props.onSessionInfo;
-        this.onSessionExpired = props.onSessionExpired;
-    }
-    async fetch(path, struct, init) {
-        // If json was provided, we stringify it. Otherwise we use body.
-        const body = init?.json ? JSON.stringify(init.json) : init?.body;
-        // If json was provided, we make sure that content type is correctly set.
-        const headers = init?.json
-            ? { ...init?.headers, "Content-Type": "application/json" }
-            : init?.headers;
-        try {
-            const res = await fetch(`${this.origin}${path}`, {
-                // Defaults
-                credentials: "include",
-                // Overrides
-                ...init,
-                body,
-                headers,
-            });
-            if (!res.ok) {
-                console.error(res);
-                return new Failure({ type: "API_ERROR", code: res.status });
-            }
-            try {
-                const data = mask(await res.json(), struct);
-                return new Success(data);
-            }
-            catch (error) {
-                console.error(error);
-                return new Failure({ type: "VALIDATION_ERROR" });
-            }
-        }
-        catch (error) {
-            console.error(error);
-            if (error instanceof Error) {
-                return new Failure({ type: "NETWORK_ERROR" });
-            }
-            return new Failure({ type: "UNKNOWN_ERROR" });
-        }
-    }
-    /**
-     * Fetches data and retries 401 failures after attempting to refresh tokens.
-     */
-    async fetchWithAuth(path, struct, init) {
-        const op = await this.fetch(path, struct, init);
-        if (op.isSuccess) {
-            return op;
-        }
-        if (op.failure.type === "API_ERROR" && op.failure.code === 401) {
-            console.info("API request failed with error 401. Refreshing tokens.");
-            const refreshOp = await this.refreshTokens();
-            if (refreshOp.isSuccess) {
-                console.info("Tokens refreshed. Retrying request.");
-                return await this.fetch(path, struct, init);
-            }
-            else {
-                console.info("Could not refresh tokens.");
-            }
-        }
-        return op;
-    }
-    async login(payload) {
-        const result = await this.fetch("/v1/sessions", object({
-            currentUser: currentUser(),
-            sessionInfo: sessionInfo(),
-        }), {
-            method: "POST",
-            json: { email: payload.email, plaintextPassword: payload.password },
-        });
-        if (result.isSuccess) {
-            this.onCurrentUser?.(result.value.currentUser);
-            this.onSessionInfo?.(result.value.sessionInfo);
-        }
-        return result;
-    }
-    async logout() {
-        return await this.fetch("/v1/sessions", object({ message: string() }), {
-            method: "DELETE",
-        });
-    }
-    async join(payload) {
-        const res = await this.fetch("/v1/users", object({
-            currentUser: currentUser(),
-            sessionInfo: sessionInfo(),
-            tokenId: string(),
-        }), {
-            method: "POST",
-            json: {
-                email: payload.email,
-                plaintextPassword: payload.password,
-                acceptedTos: payload.acceptedTos,
-                subscribedToNewsletter: payload.subscribedToNewsletter,
-            },
-        });
-        if (res.isSuccess) {
-            this.onCurrentUser?.(res.value.currentUser);
-            this.onSessionInfo?.(res.value.sessionInfo);
-        }
-        return res;
-    }
-    /**
-     * Triggers token refresh process.
-     *
-     * Note that we do not want to perform multiple concurrent token refresh
-     * actions, as that will result in unnecessary 401s. For this reason, a
-     * reference to t
-     */
-    async refreshTokens() {
-        // If there is an ongoing token refresh in progress return that. This should
-        // only deal the response payload, none of the side-effects and cleanup,
-        // which will be handled by the initial invocation.
-        const ongoingRequest = this.refreshTokenPromise;
-        if (ongoingRequest) {
-            console.info("Token refresh ongoing. Reusing existing promise.");
-            return await ongoingRequest;
-        }
-        // Cache the promise on an instance property to share a reference from
-        // other potential invocations.
-        this.refreshTokenPromise = this.fetch("/v1/sessions/access-tokens", object({ sessionInfo: sessionInfo() }), { method: "POST" });
-        const result = await this.refreshTokenPromise;
-        if (result.isSuccess) {
-            this.onSessionInfo?.(result.value.sessionInfo);
-        }
-        if (result.isFailure &&
-            result.failure.type === "API_ERROR" &&
-            result.failure.code === 401) {
-            this.onSessionExpired?.();
-        }
-        // Make sure to reset the shared reference so that subsequent invocations
-        // once again initiate token refresh.
-        delete this.refreshTokenPromise;
-        return result;
-    }
-    async requestPasswordReset(payload) {
-        return await this.fetch(`/v1/password-reset-tokens`, object({ message: string(), tokenId: string() }), { method: "POST", json: payload });
-    }
-    async checkPasswordResetCode(payload) {
-        const queryParams = new URLSearchParams({ plaintextCode: payload.code });
-        return await this.fetch(`/v1/password-reset-tokens/${payload.tokenId}?${queryParams}`, object({ message: string() }), { method: "GET" });
-    }
-    async setNewPassword(payload) {
-        const queryParams = new URLSearchParams({ plaintextCode: payload.code });
-        return await this.fetch(`/v1/password-reset-tokens/${payload.tokenId}?${queryParams}`, object({ message: string() }), { method: "PUT", json: { plaintextPassword: payload.password } });
-    }
-    async requestUserVerification() {
-        return await this.fetch(`/v1/user-verification-tokens`, object({ message: string(), tokenId: string() }), { method: "POST" });
-    }
-    async verifyUser(payload) {
-        const queryParams = new URLSearchParams({ plaintextCode: payload.code });
-        const req = await this.fetch(`/v1/user-verification-tokens/${payload.tokenId}?${queryParams}`, object({ message: string() }), { method: "PUT" });
-        if (req.isSuccess) {
-            await this.refreshTokens();
-            await this.getCurrentUser();
-        }
-        return req;
-    }
-    async getCurrentUser() {
-        const result = await this.fetchWithAuth(`/v1/users/me`, currentUser());
-        if (result.isSuccess) {
-            this.onCurrentUser?.(result.value);
-        }
-        return result;
-    }
-}

package/dist/common.css.d.ts

@@ -1,5 +0,0 @@
-export declare const itcSymbol: string;
-export declare const manofa: string;
-export declare const minion: string;
-export declare const itcCard: string;
-export declare const interactiveText: string;

package/dist/common.css.js

@@ -1,38 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { Hover, MinWidth } from "./media.js";
-export const itcSymbol = style({
-    inlineSize: "2.5rem",
-    blockSize: "2.5rem",
-    margin: "0rem auto 0.75rem",
-    "@media": {
-        [MinWidth.MEDIUM]: {
-            marginBlock: "-1rem 1.5rem",
-        },
-    },
-});
-export const manofa = style({
-    fontFamily: `"manofa", sans-serif`,
-});
-export const minion = style({
-    fontFamily: `"minion-pro", serif`,
-});
-export const itcCard = style([
-    minion,
-    {
-        backgroundColor: "white",
-    },
-]);
-export const interactiveText = style({
-    display: "inline",
-    textDecoration: "underline",
-    textDecorationColor: "hsl(from currentcolor h s l / 0.3)",
-    textUnderlineOffset: "0.15em",
-    "@media": {
-        [Hover.HOVER]: {
-            transition: "text-decoration-color 200ms",
-            ":hover": {
-                textDecorationColor: "hsl(from currentcolor h s l / 1)",
-            },
-        },
-    },
-});

package/dist/globals.css.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/globals.css.js

@@ -1,35 +0,0 @@
-import { globalStyle } from "@vanilla-extract/css";
-globalStyle(":root", {
-    fontSynthesis: "none",
-    textRendering: "optimizeLegibility",
-    WebkitFontSmoothing: "antialiased",
-    MozOsxFontSmoothing: "grayscale",
-});
-globalStyle("*", {
-    boxSizing: "border-box",
-});
-globalStyle("img, picture, svg", {
-    display: "block",
-});
-globalStyle("a", {
-    display: "block",
-    color: "inherit",
-    textDecoration: "none",
-});
-globalStyle("input, textarea", {
-    fontFamily: "inherit",
-});
-globalStyle("button", {
-    display: "block",
-    fontSize: "inherit",
-    fontFamily: "inherit",
-    backgroundColor: "transparent",
-    border: "none",
-    color: "inherit",
-    cursor: "pointer",
-    padding: 0,
-});
-globalStyle("body, h1, h2, h3, h4, h5, h6, p, ul, li, ol", {
-    margin: 0,
-    padding: 0,
-});

package/dist/index.js

@@ -1,25 +0,0 @@
-// Components
-export * from "./ExternalLink.js";
-export * from "./FormSubmitButton.js";
-export * from "./FullscreenDismissBlocker.js";
-export * from "./IndieTabletopClubSymbol.js";
-export * from "./LetterheadFooter.js";
-export * from "./LoadingIndicator.js";
-export * from "./ServiceWorkerHandler.js";
-// Hooks
-export * from "./use-async-op.js";
-export * from "./use-document-background-color.js";
-export * from "./use-form.js";
-export * from "./use-is-installed.js";
-export * from "./use-media-query.js";
-export * from "./use-reverting-state.js";
-export * from "./use-scroll-restoration.js";
-// Utils
-export * from "./append-copy-to-text.js";
-export * from "./async-op.js";
-export * from "./caught-value.js";
-export * from "./class-names.js";
-export * from "./client.js";
-export * from "./media.js";
-export * from "./structs.js";
-export * from "./types.js";

package/dist/internal.css.d.ts

@@ -1,4 +0,0 @@
-export declare const animationDelay: `var(--${string})` | `var(--${string}, ${string})`;
-export declare const dot: string;
-export declare const padding: `var(--${string})` | `var(--${string}, ${string})`;
-export declare const letterhead: string;

package/dist/internal.css.js

@@ -1,21 +0,0 @@
-import { createVar, style } from "@vanilla-extract/css";
-import { bounce } from "./animations.css.js";
-import { minion } from "./common.css.js";
-export const animationDelay = createVar();
-export const dot = style({
-    fill: "currentcolor",
-    opacity: 0.8,
-    animation: `${bounce} 2s ${animationDelay} infinite`,
-});
-export const padding = createVar();
-export const letterhead = style([
-    minion,
-    {
-        vars: { [padding]: "clamp(1rem, 8vw, 4rem)" },
-        backgroundColor: "white",
-        padding: `max(1rem, calc(${padding} - .5rem)) ${padding} ${padding}`,
-        borderRadius: "1rem",
-        marginInline: "auto",
-        maxInlineSize: "36rem",
-    },
-]);

package/dist/media.d.ts

@@ -1,39 +0,0 @@
-/**
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
- */
-export declare enum PrefersColorScheme {
-    LIGHT = "(prefers-color-scheme: light)",
-    DARK = "(prefers-color-scheme: dark)"
-}
-/**
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
- */
-export declare enum PrefersReducedMotion {
-    NO_PREFERENCE = "(prefers-reduced-motion: no-preference)",
-    REDUCE = "(prefers-reduced-motion: reduce)"
-}
-export declare enum Hover {
-    NONE = "(hover: none)",
-    HOVER = "(hover: hover) and (pointer: fine)"
-}
-export declare enum MediaType {
-    PRINT = "print",
-    SCREEN = "screen"
-}
-export declare enum MinHeight {
-    TALL = "(min-height: 40em)"
-}
-export declare enum MinWidth {
-    SMALL = "(min-width: 28em)",
-    MEDIUM = "(min-width: 50em)",
-    WIDE = "(min-width: 66em)",
-    X_WIDE = "(min-width: 80em)",
-    XX_WIDE = "(min-width: 140em)"
-}
-export declare enum DisplayMode {
-    STANDALONE = "(display-mode: standalone)"
-}
-export declare enum Pointer {
-    COARSE = "(pointer: coarse)",
-    FINE = "(pointer: fine)"
-}

package/dist/media.js

@@ -1,49 +0,0 @@
-/**
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
- */
-export var PrefersColorScheme;
-(function (PrefersColorScheme) {
-    PrefersColorScheme["LIGHT"] = "(prefers-color-scheme: light)";
-    PrefersColorScheme["DARK"] = "(prefers-color-scheme: dark)";
-})(PrefersColorScheme || (PrefersColorScheme = {}));
-/**
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
- */
-export var PrefersReducedMotion;
-(function (PrefersReducedMotion) {
-    PrefersReducedMotion["NO_PREFERENCE"] = "(prefers-reduced-motion: no-preference)";
-    PrefersReducedMotion["REDUCE"] = "(prefers-reduced-motion: reduce)";
-})(PrefersReducedMotion || (PrefersReducedMotion = {}));
-export var Hover;
-(function (Hover) {
-    Hover["NONE"] = "(hover: none)";
-    // Some Samsung phones incorrectly report that they have "hover" even though they
-    // do not. Adding the pointer query correctly filters these phones out.
-    Hover["HOVER"] = "(hover: hover) and (pointer: fine)";
-})(Hover || (Hover = {}));
-export var MediaType;
-(function (MediaType) {
-    MediaType["PRINT"] = "print";
-    MediaType["SCREEN"] = "screen";
-})(MediaType || (MediaType = {}));
-export var MinHeight;
-(function (MinHeight) {
-    MinHeight["TALL"] = "(min-height: 40em)";
-})(MinHeight || (MinHeight = {}));
-export var MinWidth;
-(function (MinWidth) {
-    MinWidth["SMALL"] = "(min-width: 28em)";
-    MinWidth["MEDIUM"] = "(min-width: 50em)";
-    MinWidth["WIDE"] = "(min-width: 66em)";
-    MinWidth["X_WIDE"] = "(min-width: 80em)";
-    MinWidth["XX_WIDE"] = "(min-width: 140em)";
-})(MinWidth || (MinWidth = {}));
-export var DisplayMode;
-(function (DisplayMode) {
-    DisplayMode["STANDALONE"] = "(display-mode: standalone)";
-})(DisplayMode || (DisplayMode = {}));
-export var Pointer;
-(function (Pointer) {
-    Pointer["COARSE"] = "(pointer: coarse)";
-    Pointer["FINE"] = "(pointer: fine)";
-})(Pointer || (Pointer = {}));

package/dist/structs.d.ts

@@ -1,20 +0,0 @@
-export declare function currentUser(): import("superstruct").Struct<{
-    id: string;
-    email: string;
-    isVerified: boolean;
-    prefersScrollbarVisibility?: "ALWAYS" | undefined;
-}, {
-    id: import("superstruct").Struct<string, null>;
-    email: import("superstruct").Struct<string, null>;
-    isVerified: import("superstruct").Struct<boolean, null>;
-    prefersScrollbarVisibility: import("superstruct").Struct<"ALWAYS" | undefined, {
-        ALWAYS: "ALWAYS";
-    }>;
-}>;
-export declare function sessionInfo(): import("superstruct").Struct<{
-    expiresTs: number;
-    createdTs: number;
-}, {
-    expiresTs: import("superstruct").Struct<number, null>;
-    createdTs: import("superstruct").Struct<number, null>;
-}>;

package/dist/structs.js

@@ -1,15 +0,0 @@
-import { boolean, enums, number, object, optional, string } from "superstruct";
-export function currentUser() {
-    return object({
-        id: string(),
-        email: string(),
-        isVerified: boolean(),
-        prefersScrollbarVisibility: optional(enums(["ALWAYS"])),
-    });
-}
-export function sessionInfo() {
-    return object({
-        expiresTs: number(),
-        createdTs: number(),
-    });
-}

package/dist/types.js

@@ -1 +0,0 @@
-import { currentUser, sessionInfo } from "./structs.js";

package/dist/use-async-op.d.ts

@@ -1,6 +0,0 @@
-import { type AsyncOp } from "./async-op.js";
-export declare function useAsyncOp<T, E>(): {
-    op: AsyncOp<T, E>;
-    setSuccess: (value: T) => void;
-    setFailure: (failure: E) => void;
-};

package/dist/use-async-op.js

@@ -1,12 +0,0 @@
-import { useCallback, useState } from "react";
-import { Failure, Pending, Success } from "./async-op.js";
-export function useAsyncOp() {
-    const [op, setOp] = useState(new Pending());
-    const setSuccess = useCallback((value) => {
-        setOp(new Success(value));
-    }, []);
-    const setFailure = useCallback((failure) => {
-        setOp(new Failure(failure));
-    }, []);
-    return { op, setSuccess, setFailure };
-}

package/dist/use-document-background-color.d.ts

@@ -1,4 +0,0 @@
-/**
- * Sets document background color, reverting it to previous color on unmount.
- */
-export declare function useDocumentBackgroundColor(bodyColor: string): void;

package/dist/use-document-background-color.js

@@ -1,14 +0,0 @@
-import { useEffect } from "react";
-/**
- * Sets document background color, reverting it to previous color on unmount.
- */
-export function useDocumentBackgroundColor(bodyColor) {
-    useEffect(() => {
-        const style = window.document.documentElement.style;
-        const originalColor = style.backgroundColor;
-        style.backgroundColor = bodyColor;
-        return () => {
-            style.backgroundColor = originalColor;
-        };
-    });
-}

package/dist/use-form.d.ts

@@ -1,29 +0,0 @@
-import { type FormStoreState } from "@ariakit/react";
-import { Failure, Success } from "@indietabletop/appkit/async-op";
-type Validator<T> = (value: T) => string | null;
-type MaybePromise<T> = T | Promise<T>;
-export declare function useForm<T extends object, R>(props: {
-    defaultValues: T;
-    validate?: {
-        [K in keyof T]?: Validator<T[K]>;
-    };
-    /**
-     * Handles form submission login.
-     *
-     * This function should return a Success or Failure. Failures should always contain a string
-     * which will be used as the form error message.
-     */
-    onSubmit: (state: FormStoreState<T>) => MaybePromise<Success<R> | Failure<string>>;
-    /**
-     * If submission was successful (i.e. onSubmit returned a Success), will be run to perform any
-     * side-effect necessary.
-     *
-     * Typically this is used for navigation on mutating some local state.
-     */
-    onSuccess?: (value: R, state: FormStoreState<T>) => MaybePromise<void>;
-}): {
-    form: import("@ariakit/react").FormStore<T>;
-    submitName: string;
-    op: Success<R> | Failure<string> | null;
-};
-export {};

package/dist/use-form.js

@@ -1,33 +0,0 @@
-import { useFormStore } from "@ariakit/react";
-import { Failure, Success } from "@indietabletop/appkit/async-op";
-import { useState } from "react";
-export function useForm(props) {
-    const submitName = "submit";
-    const [op, setOp] = useState(null);
-    const form = useFormStore({
-        defaultValues: props.defaultValues,
-    });
-    form.useSubmit(async (state) => {
-        const submitOp = await props.onSubmit(state);
-        if (submitOp.isFailure) {
-            form.setError(submitName, submitOp.failure);
-        }
-        if (submitOp.isSuccess) {
-            await props.onSuccess?.(submitOp.value, state);
-        }
-        setOp(submitOp);
-    });
-    form.useValidate((state) => {
-        if (props.validate) {
-            const entries = Object.entries(props.validate);
-            for (const [key, validate] of entries) {
-                const value = state.values[key];
-                const message = validate(value);
-                if (message) {
-                    form.setError(key, message);
-                }
-            }
-        }
-    });
-    return { form, submitName, op };
-}

package/dist/use-is-installed.d.ts

@@ -1,8 +0,0 @@
-/**
- * Checks whether the app is installed.
- *
- * Note that this doesn't check whether the app is installed on the device at
- * all, only whether the currently running process is within an installed window
- * or running within a browser.
- */
-export declare function useIsInstalled(): boolean;

package/dist/use-media-query.d.ts

@@ -1 +0,0 @@
-export declare function useMediaQuery(query: string): boolean;

package/dist/use-media-query.js

@@ -1,15 +0,0 @@
-import { useState, useEffect } from "react";
-export function useMediaQuery(query) {
-    const [isMatch, setMatch] = useState(window.matchMedia(query).matches);
-    useEffect(() => {
-        const mql = window.matchMedia(query);
-        const handleChange = ({ matches }) => {
-            setMatch(matches);
-        };
-        mql.addEventListener("change", handleChange);
-        return () => {
-            mql.removeEventListener("change", handleChange);
-        };
-    }, [query]);
-    return isMatch;
-}

package/dist/use-reverting-state.d.ts

@@ -1,5 +0,0 @@
-/**
- * Sets a state that will automatically revert to null after specified number
- * of milliseconds.
- */
-export declare function useRevertingState<T>(initialState: T, revertAfterMs: number): readonly [T | null, import("react").Dispatch<import("react").SetStateAction<T | null>>];

package/dist/use-reverting-state.js

@@ -1,26 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-/**
- * Sets a state that will automatically revert to null after specified number
- * of milliseconds.
- */
-export function useRevertingState(initialState, revertAfterMs) {
-    const [state, setState] = useState(initialState);
-    const timeoutRef = useRef(null);
-    useEffect(() => {
-        const timeoutId = timeoutRef.current;
-        if (timeoutId) {
-            clearInterval(timeoutId);
-        }
-        if (state) {
-            timeoutRef.current = setTimeout(() => {
-                setState(null);
-            }, revertAfterMs);
-        }
-        return () => {
-            if (timeoutId) {
-                clearTimeout(timeoutId);
-            }
-        };
-    }, [revertAfterMs, state]);
-    return [state, setState];
-}

package/dist/use-scroll-restoration.d.ts

@@ -1,25 +0,0 @@
-/**
- * Handles scroll restoration on window.
- *
- * This hook behaves a little differently than the default browser scroll
- * restoration. This is due to limitations of Wouter (our router of choice)
- * as well the need to make the app feel more app-like.
- *
- * Every scroll position is remembered however the user has got to it (we
- * don't differentiate between new entries in browser history and back
- * navigation), but they are only restored if the user last visited the
- * location less than 60 minutes ago.
- */
-export declare function useScrollRestoration(
-/**
- * The current path, provided by your router of choice.
- */
-pathname: string, options?: {
-    /**
-     * A list of paths where scroll restoration should never be performed.
-     *
-     * This list should have stable identity for optimal performance. Make
-     * sure to use `useMemo` or define the list in module scope.
-     */
-    neverRestore?: string[];
-}): void;