@indietabletop/appkit 6.1.6 → 7.0.0-0

package/lib/store/types.ts

@@ -1,45 +0,0 @@
-import type { Failure, Success } from "../async-op.ts";
-import type { CurrentUser, FailurePayload, SessionInfo } from "../types.ts";
-
-export type EmitterActor<Outgoing> = {
-  sendBack: (event: Outgoing) => void;
-};
-
-export type PullResult =
-  | Success<{ pulled: SyncedItem[] }>
-  | Failure<FailurePayload>;
-
-export type PushResult =
-  | Success<{ pushed: SyncedItem[]; pulled: SyncedItem[] }>
-  | Failure<FailurePayload>;
-
-export type SyncedItem = {
-  id: string;
-  name: string;
-  updatedTs: number;
-  deleted: boolean;
-};
-
-export type SyncAttempt = {
-  startedTs: number;
-  pull: PullResult | null;
-  push: PushResult | null;
-};
-
-export type MachineContext = {
-  currentSync: SyncAttempt | null;
-  lastSuccessfulSyncTs: number | null;
-  currentUser: CurrentUser | null;
-  sessionInfo: SessionInfo | null;
-  pushOnceIdle: boolean;
-  syncLog: SyncAttempt[];
-};
-
-export type MachineEvent =
-  | { type: "push" }
-  | { type: "pull" }
-  | { type: "currentUser"; currentUser: CurrentUser }
-  | { type: "serverUser"; serverUser: CurrentUser }
-  | { type: "sessionInfo"; sessionInfo: SessionInfo }
-  | { type: "sessionExpired" }
-  | { type: "reset" };

package/lib/store/utils.ts

@@ -1,54 +0,0 @@
-import type { UserGameData } from "@indietabletop/types";
-import { Failure } from "../async-op.js";
-import type { FailurePayload } from "../types.ts";
-import type { SyncedItem } from "./types.ts";
-
-/**
- * Flattens the UserGameData structure to a flat SyncedItem[].
- */
-export function toSyncedItems(data: UserGameData) {
-  return Object.values(data).flatMap((groups) => {
-    return Object.values(groups).flatMap((items) => {
-      return items.map((item): SyncedItem => {
-        if (!("deleted" in item)) {
-          return {
-            id: item.id,
-            name: item.id,
-            deleted: false,
-            updatedTs: item.updatedTs,
-          };
-        }
-
-        return {
-          id: item.id,
-          name: item.name,
-          deleted: item.deleted,
-          updatedTs: item.updatedTs,
-        };
-      });
-    });
-  });
-}
-
-export function assertNonNullish<T>(
-  value: T,
-  message: string,
-): asserts value is NonNullable<T> {
-  if (value == null) {
-    throw new Error(message);
-  }
-}
-
-function isFailurePayload(
-  error: unknown,
-): error is { cause: Failure<FailurePayload> } {
-  return error instanceof Error && error.cause instanceof Failure;
-}
-
-export function caughtToResult(error: unknown): Failure<FailurePayload> {
-  if (isFailurePayload(error)) {
-    return error.cause;
-  }
-
-  return new Failure<FailurePayload>({ type: "UNKNOWN_ERROR" });
-}

package/lib/storybook/decorators.tsx

@@ -1,10 +0,0 @@
-import { FormProvider, type FormProviderProps } from "@ariakit/react";
-import { type Decorator } from "@storybook/react-vite";
-
-export function form(props?: FormProviderProps): Decorator {
-  return (Story) => (
-    <FormProvider {...props}>
-      <Story />
-    </FormProvider>
-  );
-}

package/lib/structs.ts

@@ -1,3 +0,0 @@
-// Structs are exported from here for backwards compat. Generally, types
-// should be used directly from the types package.
-export { currentUser, redeemedPledge, sessionInfo } from "@indietabletop/types";

package/lib/unique.ts

@@ -1,24 +0,0 @@
-type UniqueKey = string | number;
-
-/**
- * Returns an array of unique items, determining uniqueness via the getKey
- * function.
- *
- * Note that the first unique item is returned, all others are omitted
- * (assuming that they are unique, so it shouldn't matter).
- */
-export function uniqueBy<T>(items: T[], getKey: (item: T) => UniqueKey): T[] {
-  const seen = new Set<UniqueKey>();
-  const returnItems: T[] = [];
-
-  for (const item of items) {
-    const uniqueKey = getKey(item);
-
-    if (!seen.has(uniqueKey)) {
-      returnItems.push(item);
-      seen.add(uniqueKey);
-    }
-  }
-
-  return returnItems;
-}

package/lib/use-async-op.ts

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

package/lib/use-document-background-color.ts

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

package/lib/use-form.ts

@@ -1,78 +0,0 @@
-import { type FormStoreState, useFormStore } from "@ariakit/react";
-import { useState } from "react";
-import { Failure, Success } from "./async-op.ts";
-import { caughtValueToString } from "./caught-value.ts";
-
-type Validator<T> = (value: T) => string | null;
-
-type MaybePromise<T> = T | Promise<T>;
-
-export 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>;
-}) {
-  const submitName = "submit";
-
-  const [op, setOp] = useState<Awaited<
-    ReturnType<typeof props.onSubmit>
-  > | null>(null);
-
-  const form = useFormStore({
-    defaultValues: props.defaultValues,
-  });
-
-  form.useSubmit(async (state) => {
-    try {
-      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);
-    } catch (error) {
-      form.setError(submitName, caughtValueToString(error));
-    }
-  });
-
-  form.useValidate((state) => {
-    if (props.validate) {
-      const entries = Object.entries(props.validate) as Array<
-        [keyof T & string, Validator<T[keyof T]>]
-      >;
-
-      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/lib/use-is-installed.ts

@@ -1,17 +0,0 @@
-import { useMemo } from "react";
-
-/**
- * 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 function useIsInstalled() {
-  // The only way to get into the Standalone display mode is to install
-  // the app, so this is a good way to check installation status.
-  return useMemo(
-    () => window.matchMedia("(display-mode: standalone)").matches,
-    [],
-  );
-}

package/lib/use-media-query.ts

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

package/lib/use-reverting-state.ts

@@ -1,32 +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<T>(initialState: T, revertAfterMs: number) {
-  const [state, setState] = useState<T | null>(initialState);
-  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(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] as const;
-}

package/lib/use-scroll-restoration.ts

@@ -1,99 +0,0 @@
-import { useEffect, useLayoutEffect, useMemo } from "react";
-
-type TimestampedCoordniates = [ts: number, x: number, y: number];
-
-const scrollPositions = new Map<string, TimestampedCoordniates>();
-
-/**
- * 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 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[];
-  }
-) {
-  // Standardise pathname, making sure that paths ending with and without
-  // a slash are treated equally
-  const normalizedPathname = pathname.replace(/\/$/, "") || "/";
-
-  const neverRestore = useMemo(
-    () => new Set(options?.neverRestore),
-    [options?.neverRestore]
-  );
-
-  // Record scroll position for given pathname on pushState/replaceState.
-  useEffect(() => {
-    const handleEvent = () => {
-      const x = window.scrollX;
-      const y = window.scrollY;
-      scrollPositions.set(normalizedPathname, [Date.now(), x, y]);
-      console.info(
-        `Set scroll position for '${normalizedPathname}' (x: ${x}, y: ${y}).`
-      );
-    };
-
-    // These events are provided by Wouter. They are not native browser events!
-    window.addEventListener("pushState", handleEvent);
-    window.addEventListener("replaceState", handleEvent);
-
-    return () => {
-      window.removeEventListener("pushState", handleEvent);
-      window.removeEventListener("replaceState", handleEvent);
-    };
-  }, [normalizedPathname]);
-
-  // Restore scroll position if last visit was less than 60 minutes ago.
-  useLayoutEffect(() => {
-    const maxDiff = 60_000 * 60; // 60 minutes
-    const coordinates = scrollPositions.get(normalizedPathname);
-
-    if (coordinates) {
-      if (!neverRestore.has(normalizedPathname)) {
-        const now = Date.now();
-        const [ts, x, y] = coordinates;
-
-        if (now - ts < maxDiff) {
-          window.scrollTo(x, y);
-          console.info(
-            `Restoring scroll position for '${normalizedPathname}' (x: ${x}, y: ${y}).`
-          );
-        } else {
-          window.scrollTo(0, 0);
-          console.info(
-            `Not restoring scroll position for '${normalizedPathname}'. Last visit >60 min ago.`
-          );
-        }
-      } else {
-        window.scrollTo(0, 0);
-        console.info(
-          `Not restoring scroll position for '${normalizedPathname}'. Page is set never to restore.`
-        );
-      }
-    } else {
-      window.scrollTo(0, 0);
-      console.info(
-        `Not restoring scroll position for '${normalizedPathname}'. Page not visited yet.`
-      );
-    }
-  }, [normalizedPathname]);
-}

package/lib/useEnsureValue.ts

@@ -1,31 +0,0 @@
-import { useEffect, useState } from "react";
-import { Failure, Pending, Success, type AsyncOp } from "./async-op.ts";
-import { caughtValueToString } from "./caught-value.ts";
-
-/**
- * Checks if the provided value is non-nullish, otherwise calls provided
- * getValue function to obtain the value (presumably from some remote location).
- */
-export function useEnsureValue<T>(
-  value: T | null | undefined,
-  getValue: () => Promise<Success<T> | Failure<string>>,
-) {
-  const [result, setShareLink] = useState<AsyncOp<T, string>>(
-    value != null ? new Success(value) : new Pending(),
-  );
-
-  useEffect(() => {
-    if (value == null) {
-      getValue().then(
-        (success) => {
-          setShareLink(success);
-        },
-        (error: unknown) => {
-          setShareLink(new Failure(caughtValueToString(error)));
-        },
-      );
-    }
-  }, [value, getValue]);
-
-  return result;
-}

package/lib/useInvokeClient.ts

@@ -1,54 +0,0 @@
-import { useCallback } from "react";
-import type { SWRConfiguration, SWRResponse } from "swr";
-import useSWR from "swr";
-import type { Pending } from "./async-op.ts";
-import type { IndieTabletopClient } from "./client.ts";
-import { swrResponseToResult } from "./result/swr.ts";
-
-/**
- * Creates a `useInvokeClient` hook that makes it ergonomic to invoke
- * client methods.
- *
- * Note that only methods starting with `get` are picked up. This hook is
- * intended for making easy fetches, not for form submissions.
- */
-export function createUseInvokeClient<C extends IndieTabletopClient>(c: C) {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  type Fn = (...args: any) => any;
-
-  return function useInvokeClient<K extends keyof C & `get${string}`>(
-    /**
-     * ITC Client's method name.
-     */
-    method: K,
-
-    /**
-     * Method's arguments.
-     *
-     * **IMPORTANT**: Must be an array or primitive values as it is directly
-     * used as a `useCallback` dependecy array.
-     */
-    args: C[K] extends Fn ? Parameters<C[K]> : never,
-
-    options?: {
-      performFetch?: boolean;
-      swr?: SWRConfiguration;
-    },
-  ): C[K] extends Fn
-    ? [Awaited<ReturnType<C[K]>> | Pending, SWRResponse<unknown, unknown>]
-    : never {
-    const { performFetch = true } = options ?? {};
-
-    const callback = useCallback(() => {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-      return (c[method] as Fn)(...args);
-
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [method, ...args]);
-
-    const cacheKey = [method, ...args].join(":");
-    const swr = useSWR(performFetch ? cacheKey : null, callback, options?.swr);
-
-    return [swrResponseToResult(swr), swr] as never;
-  };
-}

package/lib/useIsVisible.ts

@@ -1,27 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-
-export function useIsVisible<T extends HTMLElement>(
-  initialState = false,
-  options?: IntersectionObserverInit,
-) {
-  const ref = useRef<T | null>(null);
-  const [isVisible, setVisible] = useState(initialState);
-
-  useEffect(() => {
-    if (ref.current) {
-      const observer = new IntersectionObserver(([entry]) => {
-        if (entry) {
-          setVisible(entry.isIntersecting);
-        }
-      }, options);
-
-      observer.observe(ref.current);
-
-      return () => {
-        observer.disconnect();
-      };
-    }
-  });
-
-  return { ref, isVisible };
-}

package/lib/utm.ts

@@ -1,92 +0,0 @@
-/**
- * Given an object with keys that might contain undefined values, returns a new
- * object only with keys that are not undefined.
- */
-function omitUndefinedKeys<T>(record: Record<string, T | undefined>) {
-  return Object.fromEntries(
-    Object.entries(record).filter(([_, v]) => v !== undefined),
-  ) as Record<string, T>;
-}
-
-/**
- * Full UTM configuration object.
- */
-export type UtmParams = {
-  /**
-   * The website/platform the visitor is coming from.
-   */
-  source: string;
-
-  /**
-   * The type of marketing channel (e.g. cpc, email, affiliate, social,
-   * or similar).
-   */
-  medium: string;
-
-  /**
-   * The name of the campaign or product description. In our case, this is
-   * usually the name of the app.
-   */
-  campaign: string;
-
-  /**
-   * Optionally, provide an identifier for the place from which the link was
-   * clicked. E.g. footer, join, etc.
-   */
-  content?: string;
-
-  /**
-   * Optionally, identify paid keywords. We usually do not use this.
-   */
-  term?: string;
-};
-
-/**
- * UTM Params configuration that is appropriate to set at the link level,
- * if app-level defaults have been set.
- */
-export type LinkUtmParams = Pick<UtmParams, "content" | "term">;
-
-/**
- * Returns URL Search params with provided UTM configuration.
- *
- * Most of the time, you probably want to set up some defaults using
- * {@link createUtm}. This function is intended for special cases.
- */
-export function utm(params: UtmParams) {
-  return new URLSearchParams(
-    omitUndefinedKeys({
-      utm_source: params.source,
-      utm_medium: params.medium,
-      utm_campaign: params.campaign,
-      utm_content: params.content,
-      utm_term: params.term,
-    }),
-  );
-}
-
-/**
- * A factory for the {@link utm} function. Use it to set sensible defaults for
- * further use of the returned function.
- *
- * @example
- * ```ts
- * const utm = createUtm({
- *   source: "indietabletopclub",
- *   medium: "referral",
- *   campaign: "spacegitsapp",
- * });
- *
- * utm() // => URLSearchParams that inlude the above config
- *
- * utm({ campaign: "foo", content: "bar" }) // Sets optional fiels and overrides
- * ```
- */
-export function createUtm(defaults: UtmParams) {
-  return function (params?: Partial<UtmParams>) {
-    return utm({
-      ...defaults,
-      ...(params && omitUndefinedKeys(params)),
-    });
-  };
-}

package/lib/validations.ts

@@ -1,25 +0,0 @@
-export const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
-
-export const validEmail = (value: string) => {
-  if (value && !EMAIL_REGEX.test(value)) {
-    return "This doesn't look like a valid email.";
-  }
-
-  return null;
-};
-
-export const validPassword = (value: string) => {
-  if (value) {
-    if (value.length < 8) {
-      return "A password has to be at least 8 characters long.";
-    }
-
-    if (value.length > 256) {
-      return "A password cannot be longer than 256 characters.";
-    }
-
-    return null;
-  }
-
-  return null;
-};

package/lib/vars.css.ts

@@ -1,13 +0,0 @@
-import { createGlobalTheme } from "@vanilla-extract/css";
-
-export const Color = createGlobalTheme(":root", {
-  GRAY: "#ececec",
-  MID_GRAY: "hsl(0 0% 50%)",
-  LIGHT_GRAY: "#e7e8e8",
-  PALE_GRAY: "#f6f7f7",
-  PURPLE: "#d6446e",
-});
-
-export const ZIndex = createGlobalTheme(":root", {
-  DIALOG: "100",
-});