@indietabletop/appkit 3.2.0-0 → 3.2.0-10

package/lib/LetterheadForm/style.css.ts

@@ -0,0 +1,80 @@
+import { style } from "@vanilla-extract/css";
+import { manofa, minion } from "../common.css.ts";
+import { Color } from "../vars.css.ts";
+
+const border = style({
+  borderRadius: "0.5rem",
+  border: `1px solid ${Color.GRAY}`,
+});
+
+export const field = style({
+  display: "block",
+});
+
+export const fieldLabel = style([
+  manofa,
+  {
+    display: "block",
+    textTransform: "uppercase",
+    fontSize: "0.75rem",
+    fontWeight: 600,
+    marginBottom: "0.5rem",
+  },
+]);
+
+export const fieldInput = style([
+  border,
+  minion,
+  {
+    display: "block",
+    width: "100%",
+    fontSize: "1rem",
+    lineHeight: "1.25rem",
+    padding: "1rem 0 1rem 1rem",
+
+    ":read-only": {
+      backgroundColor: "hsl(0 0% 0% / 0.05)",
+    },
+
+    // Hide MS Edge widgets -- we handle them manually
+    "::-ms-clear": {
+      display: "none",
+    },
+    "::-ms-reveal": {
+      display: "none",
+    },
+  },
+]);
+
+export const fieldIssue = style({
+  color: Color.PURPLE,
+  fontSize: "0.875rem",
+  marginTop: "0.5rem",
+
+  ":empty": {
+    display: "none",
+  },
+});
+
+export const fieldHint = style({
+  color: Color.MID_GRAY,
+  fontSize: "0.875rem",
+  marginTop: "0.5rem",
+
+  selectors: {
+    [`${fieldIssue}:not(:empty) + &`]: {
+      display: "none",
+    },
+  },
+});
+
+export const submitError = style({
+  padding: "1rem",
+  color: Color.PURPLE,
+  backgroundColor: Color.PALE_GRAY,
+  borderRadius: "0.75rem",
+
+  ":empty": {
+    display: "none",
+  },
+});

package/lib/LoadingIndicator.tsx

@@ -0,0 +1,39 @@
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { animationDelay, dot } from "./internal.css.ts";
+
+export function LoadingIndicator(props: { className?: string }) {
+  const diameter = 10;
+  const radius = diameter / 2;
+  const gap = diameter;
+  const cy = diameter;
+  const height = cy * 2;
+  const width = diameter * 3 + gap;
+  const initialDelay = 300;
+  const interBounceDelay = 150;
+
+  return (
+    <svg
+      viewBox={`0 0 ${width} ${height}`}
+      width={width}
+      height={height}
+      className={props.className}
+    >
+      <g stroke="none" fill="inherit">
+        {Array.from({ length: 3 }, (_, index) => {
+          const delay = `${initialDelay + interBounceDelay * index}ms`;
+
+          return (
+            <circle
+              key={index}
+              cx={radius * (index + 1) + gap * index}
+              cy={cy}
+              r={radius}
+              className={dot}
+              style={assignInlineVars({ [animationDelay]: delay })}
+            />
+          );
+        })}
+      </g>
+    </svg>
+  );
+}

package/lib/ServiceWorkerHandler.tsx

@@ -0,0 +1,53 @@
+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/animations.css.ts

@@ -0,0 +1,17 @@
+import { keyframes } from "@vanilla-extract/css";
+
+export const fadeIn = keyframes({
+  from: { opacity: 0 },
+  to: { opacity: 1 },
+});
+
+export const slideUp = keyframes({
+  from: { transform: `translateY(100%)` },
+  to: { transform: `translateY(0)` },
+});
+
+export const bounce = keyframes({
+  "0%": { transform: "translateY(0)" },
+  "20%": { transform: "translateY(-20%)" },
+  "50%": { transform: "translateY(0)" },
+});

package/lib/append-copy-to-text.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, test } from "vitest";
+import {
+  appendCopyToText,
+  maybeAppendCopyToText,
+} from "./append-copy-to-text.ts";
+
+describe("appendCopyToText", () => {
+  test("Appends ' (Copy)' to provided string", () => {
+    const returnValue = appendCopyToText("Zangrad Raiders");
+    expect(returnValue).toBe("Zangrad Raiders (Copy)");
+  });
+
+  test("Adds a copy count number if string already ends in ' (Copy)'", () => {
+    const returnValue = appendCopyToText("Zangrad Raiders (Copy)");
+    expect(returnValue).toBe("Zangrad Raiders (Copy 2)");
+  });
+
+  test("Increments a copy count number if one already exists", () => {
+    const returnValue = appendCopyToText("Zangrad Raiders (Copy 2)");
+    expect(returnValue).toBe("Zangrad Raiders (Copy 3)");
+  });
+});
+
+describe("maybeAppendCopyToText", () => {
+  test("Ignores empty strings", () => {
+    const returnValue = maybeAppendCopyToText("");
+    expect(returnValue).toBe("");
+  });
+});

package/lib/append-copy-to-text.ts

@@ -0,0 +1,35 @@
+/**
+ * Appends " (Copy)" to the end of the input string if it doesn't already end
+ * with " (Copy)", otherwise it appends a number after "Copy", incrementing it
+ * if necessary.
+ */
+export function appendCopyToText(input: string): string {
+  const regex = /^(?<value>.*) \(Copy(?: (?<count>\d+))?\)$/;
+  const match = input.match(regex);
+
+  // If there isn't a match, we directly append to the input.
+  if (!match) {
+    return `${input.trim()} (Copy)`;
+  }
+
+  const { value, count } = match.groups ?? {};
+
+  // If `count` capturing group is not present, it means that the input ends
+  // with the copy suffix, but it doesn't contain count.
+  const nextCount = !count ? 2 : parseInt(count, 10) + 1;
+
+  return `${value.trim()} (Copy ${nextCount})`;
+}
+
+/**
+ * Works like {@link appendCopyToText}, but ignores empty strings.
+ */
+export function maybeAppendCopyToText(input: string) {
+  // If input is falsy (i.e. empty string) then we don't want to append
+  // anything to it.
+  if (!input) {
+    return "";
+  }
+
+  return appendCopyToText(input);
+}

package/lib/async-op.ts

@@ -0,0 +1,246 @@
+type Falsy = null | undefined | false | 0 | 0n | "";
+
+type Truthy<T> = Exclude<T, Falsy>;
+
+interface Operation<SuccessValue, FailureValue> {
+  readonly type: "SUCCESS" | "FAILURE" | "PENDING";
+  readonly isPending: boolean;
+  readonly isSuccess: boolean;
+  readonly isFailure: boolean;
+
+  val: SuccessValue | FailureValue | null;
+
+  valueOrNull(): SuccessValue | null;
+  valueOrThrow(): SuccessValue;
+  hasTruthyValue(): boolean;
+  failureValueOrNull(): FailureValue | null;
+  failureValueOrThrow(): FailureValue;
+
+  flatMap<T extends AsyncOp<unknown, unknown>>(
+    mappingFn: (value: SuccessValue) => T,
+  ): T | Failure<FailureValue> | Pending;
+
+  mapSuccess<MappedSuccess>(
+    mappingFn: (value: SuccessValue) => MappedSuccess,
+  ): Operation<MappedSuccess, FailureValue>;
+
+  mapFailure<MappedFailure>(
+    mappingFn: (value: FailureValue) => MappedFailure,
+  ): Operation<SuccessValue, MappedFailure>;
+
+  unpack<S, F, P>(
+    mapS: (value: SuccessValue) => S,
+    mapF: (failure: FailureValue) => F,
+    mapP: () => P,
+  ): S | F | P;
+}
+
+export class Pending implements Operation<never, never> {
+  readonly type = "PENDING" as const;
+  readonly isPending = true as const;
+  readonly isSuccess = false as const;
+  readonly isFailure = false as const;
+
+  val = null;
+
+  valueOrNull(): null {
+    return null;
+  }
+
+  valueOrThrow(): never {
+    throw new Error(
+      `AsyncOp value was accessed but the op is in Pending state.`,
+    );
+  }
+
+  hasTruthyValue(): false {
+    return false;
+  }
+
+  failureValueOrNull(): null {
+    return null;
+  }
+
+  failureValueOrThrow(): never {
+    throw new Error(
+      `AsyncOp failure value was accessed but the op is in Pending state.`,
+    );
+  }
+
+  flatMap() {
+    return new Pending();
+  }
+
+  mapSuccess() {
+    return new Pending();
+  }
+
+  mapFailure() {
+    return new Pending();
+  }
+
+  unpack<S, F, P>(
+    _mapS: (value: never) => S,
+    _mapF: (failure: never) => F,
+    mapP: () => P,
+  ): S | F | P {
+    return mapP();
+  }
+}
+
+export class Success<SuccessValue> implements Operation<SuccessValue, never> {
+  readonly type = "SUCCESS" as const;
+  readonly isPending = false as const;
+  readonly isSuccess = true as const;
+  readonly isFailure = false as const;
+  readonly value: SuccessValue;
+  readonly val: SuccessValue;
+
+  constructor(value: SuccessValue) {
+    this.value = value;
+    this.val = value;
+  }
+
+  valueOrNull(): SuccessValue {
+    return this.value;
+  }
+
+  valueOrThrow(): SuccessValue {
+    return this.value;
+  }
+
+  hasTruthyValue(): this is Success<Truthy<SuccessValue>> {
+    return !!this.value;
+  }
+
+  failureValueOrNull(): null {
+    return null;
+  }
+
+  failureValueOrThrow(): never {
+    throw new Error(
+      `AsyncOp failure value was accessed but the op is in Success state.`,
+    );
+  }
+
+  flatMap<T extends AsyncOp<unknown, unknown>>(
+    mappingFn: (value: SuccessValue) => T,
+  ) {
+    return mappingFn(this.value);
+  }
+
+  mapSuccess<MappedValue>(mappingFn: (value: SuccessValue) => MappedValue) {
+    return new Success(mappingFn(this.value));
+  }
+
+  mapFailure() {
+    return new Success(this.value);
+  }
+
+  unpack<S, F, P>(
+    mapS: (value: SuccessValue) => S,
+    _mapF: (failure: never) => F,
+    _mapP: () => P,
+  ): S | F | P {
+    return mapS(this.value);
+  }
+}
+
+export class Failure<FailureValue> implements Operation<never, FailureValue> {
+  readonly type = "FAILURE" as const;
+  readonly isPending = false as const;
+  readonly isSuccess = false as const;
+  readonly isFailure = true as const;
+  readonly failure: FailureValue;
+  readonly val: FailureValue;
+
+  constructor(failure: FailureValue) {
+    this.failure = failure;
+    this.val = failure;
+  }
+
+  valueOrNull(): null {
+    return null;
+  }
+
+  valueOrThrow(): never {
+    throw new Error(
+      `AsyncOp value was accessed but the op is in Failure state.`,
+    );
+  }
+
+  hasTruthyValue(): false {
+    return false;
+  }
+
+  failureValueOrNull(): FailureValue {
+    return this.failure;
+  }
+
+  failureValueOrThrow(): FailureValue {
+    return this.failure;
+  }
+
+  flatMap() {
+    return new Failure(this.failure);
+  }
+
+  mapSuccess() {
+    return new Failure(this.failure);
+  }
+
+  mapFailure<MappedFailure>(mappingFn: (value: FailureValue) => MappedFailure) {
+    return new Failure(mappingFn(this.failure));
+  }
+
+  unpack<S, F, P>(
+    _mapS: (value: never) => S,
+    mapF: (failure: FailureValue) => F,
+    _mapP: () => P,
+  ): S | F | P {
+    return mapF(this.failure);
+  }
+}
+
+/**
+ * Folds multiple ops into a single op.
+ *
+ * To return a Success, all ops provided must be a Success. If any Failures are
+ * encountered, will return the first one found.
+ *
+ * If neither of these conditions is true, will return Pending.
+ *
+ * Note that if passed an empty array, will always return a Success (with an
+ * empty array as value). This mimics the semantics of many JS constructs, like
+ * Promise.all or Array.prototype.every.
+ */
+export function fold<Ops extends readonly AsyncOp<unknown, unknown>[] | []>(
+  ops: Ops,
+): AsyncOp<
+  {
+    -readonly [Index in keyof Ops]: Ops[Index] extends AsyncOp<infer S, unknown>
+      ? S
+      : never;
+  },
+  Ops[number] extends AsyncOp<unknown, infer F> ? F : never
+> {
+  // Note that due to the semantics of `every`, if the array provided to `fold`
+  // is empty, the result will be a Success with an empty array.
+  if (ops.every((v) => v.isSuccess)) {
+    return new Success(
+      (ops as Success<unknown>[]).map((op) => op.value),
+    ) as never;
+  }
+
+  const firstFail = ops.find((op) => op.isFailure);
+  if (firstFail) {
+    return firstFail as never;
+  }
+
+  return new Pending() as never;
+}
+
+export type AsyncOp<SuccessValue, FailureValue> =
+  | Pending
+  | Success<SuccessValue>
+  | Failure<FailureValue>;

package/lib/atomic.css.ts

@@ -0,0 +1,11 @@
+import { createSprinkles, defineProperties } from "@vanilla-extract/sprinkles";
+
+const atomic = defineProperties({
+  properties: {
+    textAlign: ["start", "center", "end"],
+  },
+});
+
+export const textVariants = createSprinkles(atomic);
+
+export type TextVariants = Parameters<typeof textVariants>[0];

package/{dist/caught-value.js → lib/caught-value.ts}

@@ -12,12 +12,14 @@
  * if so, returns its message. If a string was caught, it returns that.
  * Otherwise, it returns "Unknown error".
  */
-export function caughtValueToString(value) {
-    if (value instanceof Error) {
-        return value.message;
-    }
-    if (typeof value === "string") {
-        return value;
-    }
-    return "Unknown error.";
+export function caughtValueToString(value: unknown): string {
+  if (value instanceof Error) {
+    return value.message;
+  }
+
+  if (typeof value === "string") {
+    return value;
+  }
+
+  return "Unknown error.";
 }

package/lib/class-names.ts

@@ -0,0 +1,33 @@
+type Falsy = false | null | undefined;
+
+type PropsWithClassName = {
+  className?: ClassName;
+};
+
+type ClassName = string | PropsWithClassName | Falsy;
+
+/**
+ * Combines a list of strings or objects with className property into a single
+ * string. Falsy values are ignored.
+ */
+export function classNames(...classNames: ClassName[]) {
+  return classNames
+    .filter((cn) => !!cn)
+    .map((cn) => (typeof cn === "object" ? cn?.className : cn))
+    .join(" ");
+}
+
+/**
+ * Given a list of strings or objects with the className property, returns an
+ * object with className property and combined className. Falsy values will
+ * be filtered out.
+ *
+ * @example
+ * <h1 {...clx(props, 'heading', 'bold')}>Hello world!</h1>
+ */
+
+export function cx(...cns: ClassName[]) {
+  return {
+    className: classNames(...cns),
+  };
+}