@indietabletop/appkit 6.1.6 → 7.0.0-0

package/lib/ModernIDB/VersionChangeManager.ts

@@ -1,57 +0,0 @@
-import { VersionChangeObjectStore } from "./ObjectStore.ts";
-import { VersionChangeTransaction } from "./Transaction.ts";
-import type { KeyPath, ModernIDBSchema } from "./types.ts";
-
-export class VersionChangeManager<
-  Schema extends ModernIDBSchema,
-  IndexNames extends {
-    [K in keyof Schema]?: string;
-  } = never,
-> {
-  readonly idbDatabase: IDBDatabase;
-  readonly event: IDBVersionChangeEvent;
-  readonly transaction: VersionChangeTransaction<Schema, IndexNames>;
-
-  constructor(props: {
-    idbDatabase: IDBDatabase;
-    event: IDBVersionChangeEvent;
-    idbTransaction: IDBTransaction;
-  }) {
-    this.idbDatabase = props.idbDatabase;
-    this.event = props.event;
-    this.transaction = new VersionChangeTransaction({
-      transaction: props.idbTransaction,
-    });
-  }
-
-  /**
-   * Creates a new object store with the given name and options and returns a new IDBObjectStore.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/IDBDatabase/createObjectStore)
-   */
-  createObjectStore<StoreName extends string & keyof Schema>(
-    name: StoreName,
-    options?: {
-      autoIncrement?: boolean;
-      keyPath?:
-        | KeyPath<Schema[StoreName]>
-        | KeyPath<Schema[StoreName]>[]
-        | null;
-    },
-  ) {
-    const objectStore = this.idbDatabase.createObjectStore(name, options);
-    return new VersionChangeObjectStore<
-      Schema[StoreName],
-      IndexNames[StoreName] extends string ? IndexNames[StoreName] : never
-    >(objectStore);
-  }
-
-  /**
-   * Deletes the object store with the given name.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/IDBDatabase/deleteObjectStore)
-   */
-  deleteObjectStore(name: string): void {
-    this.idbDatabase.deleteObjectStore(name);
-  }
-}

package/lib/ModernIDB/bindings/factory.tsx

@@ -1,165 +0,0 @@
-import {
-  createContext,
-  useContext,
-  useEffect,
-  useState,
-  type ReactNode,
-} from "react";
-import { Failure, isAsyncOp, Pending, Success } from "../../async-op.ts";
-import { caughtValueToString } from "../../caught-value.ts";
-import { useAsyncOp } from "../../use-async-op.ts";
-import type { AnyModernIDB } from "../types.ts";
-import type {
-  DatabaseOpenRequestOp,
-  FlattenSuccessOps,
-  InaccessibleDatabaseError,
-  QueryOp,
-} from "./types.ts";
-import { toKnownError } from "./utils.tsx";
-
-export function createDatabaseBindings<T extends AnyModernIDB>(db: T) {
-  const DatabaseContext = createContext(db);
-
-  const DatabaseOpenRequest = createContext<DatabaseOpenRequestOp<T>>(
-    new Pending(),
-  );
-
-  const cache = new Map<string, unknown>();
-
-  /**
-   * Performs an IndexedDB query and watches for changes.
-   *
-   * Note that queries will only be executed once IndexedDB is open.
-   *
-   * If query output is an AsyncOp, it will be flattened. In other words, you
-   * will only get one 'layer' of async ops.
-   *
-   * Provide a cache key if you want to make sure that data is synchronously
-   * available during mounts/unmounts.
-   */
-  function useQuery<Output>(
-    /**
-     * `query` must have stable identity.
-     *
-     * Make sure you use `useCallback` or a module-scoped function.
-     */
-    query: (db: T) => Promise<Output>,
-
-    cacheKey?: string,
-  ): FlattenSuccessOps<QueryOp<Output>> {
-    const openRequest = useDatabaseOpenRequest();
-    const [queryOp, setOp] = useState<QueryOp<Output>>(new Pending());
-
-    useEffect(() => {
-      async function runQuery(): Promise<void> {
-        if (openRequest.isSuccess) {
-          try {
-            const data = await query(openRequest.value);
-            const success = new Success(data);
-            setOp(success);
-
-            if (cacheKey) {
-              cache.set(cacheKey, success);
-            }
-          } catch (error) {
-            const failure = new Failure({
-              type: "QUERY_ERROR" as const,
-              error: caughtValueToString(error),
-            });
-
-            setOp(failure);
-            if (cacheKey) {
-              cache.set(cacheKey, failure);
-            }
-          }
-        }
-      }
-
-      db.addEventListener("readwrite", runQuery);
-      window.addEventListener("focus", runQuery);
-      void runQuery();
-
-      return () => {
-        db.removeEventListener("readwrite", runQuery);
-        window.removeEventListener("focus", runQuery);
-      };
-    }, [cacheKey, openRequest, query]);
-
-    return openRequest.flatMap(() => {
-      const flattenOutput = (output: Output) => {
-        if (isAsyncOp(output)) {
-          return output as FlattenSuccessOps<QueryOp<Output>>;
-        }
-
-        return new Success(output) as FlattenSuccessOps<QueryOp<Output>>;
-      };
-
-      if (cacheKey) {
-        const lastResult = cache.get(cacheKey) as QueryOp<Output> | undefined;
-
-        if (lastResult && queryOp.isPending) {
-          return lastResult.flatMap(flattenOutput);
-        }
-      }
-
-      return queryOp.flatMap(flattenOutput);
-    });
-  }
-
-  function useDatabase() {
-    return useContext(DatabaseContext);
-  }
-
-  function useDatabaseOpenRequest() {
-    return useContext(DatabaseOpenRequest);
-  }
-
-  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" });
-          db.close();
-          console.info("Database closed due to version upgrade.");
-        },
-      }).then(
-        () => {
-          setSuccess(db);
-          console.info("Database open.");
-        },
-        (error: unknown) => {
-          setFailure(toKnownError(error));
-          console.warn(`Request to open database failed.`);
-        },
-      );
-
-      return () => {
-        db.close();
-        console.info("Database closed.");
-      };
-    }, [setFailure, setSuccess, open]);
-
-    return (
-      <DatabaseOpenRequest.Provider value={op}>
-        {children}
-      </DatabaseOpenRequest.Provider>
-    );
-  }
-
-  return {
-    useQuery,
-    useDatabase,
-    useDatabaseOpenRequest,
-    DatabaseProvider,
-  };
-}

package/lib/ModernIDB/bindings/index.ts

@@ -1,2 +0,0 @@
-export * from "./factory.tsx";
-export * from "./types.ts";

package/lib/ModernIDB/bindings/utils.tsx

@@ -1,32 +0,0 @@
-import type { InaccessibleDatabaseError } from "./types.ts";
-
-export function toKnownError(error: unknown): InaccessibleDatabaseError {
-  if (error instanceof Error) {
-    switch (error.name) {
-      case "OpenRequestBlockedError": {
-        return {
-          type: "UPGRADE_BLOCKED",
-        };
-      }
-
-      case "VersionError": {
-        return {
-          type: "DB_VERSION_HIGHER_THAN_REQUESTED",
-          message: error.message,
-        };
-      }
-
-      default: {
-        return {
-          type: "UNKNOWN_ERROR",
-          message: error.message,
-        };
-      }
-    }
-  }
-
-  return {
-    type: "UNKNOWN_ERROR",
-    message: "A non-error object was thrown.",
-  };
-}

package/lib/ModernIDB/index.ts

@@ -1,10 +0,0 @@
-export * from "./bindings/index.ts";
-export * from "./Cursor.ts";
-export * from "./ModernIDB.ts";
-export * from "./ModernIDBError.ts";
-export * from "./ObjectStore.ts";
-export * from "./ObjectStoreIndex.ts";
-export * from "./Transaction.ts";
-export * from "./types.ts";
-export * from "./utils.ts";
-export * from "./VersionChangeManager.ts";

package/lib/ModernIDB/types.ts

@@ -1,120 +0,0 @@
-import { ModernIDB } from "./ModernIDB.ts";
-import { VersionChangeManager } from "./VersionChangeManager.ts";
-
-/**
- * IDB supports "readonly", "readwrite", and "versionchange" transaction modes,
- * but "versionchange" can only be initiated automatically during DB upgrade.
- */
-export type TransactionMode = "readonly" | "readwrite";
-
-export type ModernIDBState = "open" | "opening" | "closed";
-
-export type ModernIDBSchema = {
-  [key: string]: unknown;
-};
-
-export type ModernIDBIndexes<Schema extends ModernIDBSchema> = {
-  [K in keyof Schema]?: string;
-};
-
-export type VersionChangeHandlerProps<
-  Schema extends ModernIDBSchema,
-  IndexNames extends ModernIDBIndexes<Schema>,
-> = {
-  event: IDBVersionChangeEvent;
-  manager: VersionChangeManager<Schema, IndexNames>;
-  db: ModernIDB<Schema, IndexNames>;
-};
-
-export type VersionChangeHandler<
-  Schema extends ModernIDBSchema,
-  IndexNames extends ModernIDBIndexes<Schema>,
-> = (props: VersionChangeHandlerProps<Schema, IndexNames>) => void;
-
-export type BlockingHandlerProps<
-  Schema extends ModernIDBSchema,
-  IndexNames extends ModernIDBIndexes<Schema>,
-> = {
-  event: IDBVersionChangeEvent;
-  db: ModernIDB<Schema, IndexNames>;
-};
-
-export type BlockingHandler<
-  Schema extends ModernIDBSchema,
-  IndexNames extends ModernIDBIndexes<Schema>,
-> = (props: BlockingHandlerProps<Schema, IndexNames>) => void;
-
-export type OpenRequestHandlers<
-  Schema extends ModernIDBSchema,
-  IndexNames extends ModernIDBIndexes<Schema>,
-> = {
-  /**
-   * Called when the database is initialized from scratch.
-   *
-   * Should be used to set up all required stores and indexes.
-   *
-   * If error is thrown in this handler, the version change transaction will
-   * be aborted.
-   *
-   * @example
-   *
-   * ```ts
-   * onInit({ manager }) {
-   *   const store = manager.createObjectStore("items", { keyPath: "id" });
-   *   store.createIndex("createdTs", "createdTs");
-   *
-   *   console.info("DB initialized.");
-   * },
-   * ```
-   */
-  onInit?: VersionChangeHandler<Schema, IndexNames>;
-
-  /**
-   * Called when there is an existing IDB database present, but is is of a lower
-   * version than the latest.
-   *
-   * If error is thrown inside this handler, the version change transaction
-   * will be aborted.
-   *
-   * @example
-   * ```ts
-   * onUpgrade({ manager, event }) {
-   *  switch (event.oldVersion) {
-   *    case 1: {
-   *      // We need a `settings` store in v2, but it did't exist in v1
-   *      const store = manager.createObjectStore("settings", { keyPath: "id" });
-   *      store.createIndex("createdTs", "createdTs");
-   *    }
-   *
-   *    default: {
-   *      console.info(`Migration from DB v${event.oldVersion} complete.`);
-   *    }
-   *   }
-   * }
-   * ```
-   */
-  onUpgrade?: VersionChangeHandler<Schema, IndexNames>;
-
-  /**
-   * If a new connection opens which requests a higher version number than
-   * is the current version number, a `versionchange` event will be dispatched
-   * on the IDBDatabase instance. This handler can specify desired behaviour.
-   * For example, you might want to close currently connected connections
-   * to allow the version change to proceed.
-   */
-  onBlocking?: BlockingHandler<Schema, IndexNames>;
-};
-
-type ValidKeyValue = string | number | Date;
-
-export type KeyPath<T> = T extends { [key: string]: unknown }
-  ? {
-      [K in keyof T]: K extends string
-        ? T[K] extends ValidKeyValue
-          ? `${K}`
-          : `${K}.${KeyPath<T[K]>}`
-        : never;
-    }[keyof T]
-  : never;
-
-export type AnyModernIDB = ModernIDB<any, any>;

package/lib/ModernIDB/utils.ts

@@ -1,51 +0,0 @@
-export function transactionToPromise(
-  transaction: IDBTransaction,
-): Promise<Event> {
-  return new Promise<Event>((resolve, reject) => {
-    transaction.addEventListener("complete", resolve, { once: true });
-    transaction.addEventListener("error", reject, { once: true });
-    transaction.addEventListener("abort", reject, { once: true });
-  });
-}
-
-export function requestToPromise<T>(request: IDBRequest<T>) {
-  return new Promise<T>((resolve, reject) => {
-    const success = () => resolve(request.result);
-    const error = () => reject(request.error);
-    request.addEventListener("success", success, { once: true });
-    request.addEventListener("error", error, { once: true });
-  });
-}
-
-export function openRequestToPromise(request: IDBOpenDBRequest) {
-  return new Promise<IDBDatabase>((resolve, reject) => {
-    const success = () => resolve(request.result);
-    const error = () => reject(request.error);
-    const blocked = () =>
-      reject(
-        new Error(
-          "Operation blocked. An existing database connection is preventing this action.",
-        ),
-      );
-
-    request.addEventListener("success", success, { once: true });
-    request.addEventListener("error", error, { once: true });
-    request.addEventListener("blocked", blocked, { once: true });
-  });
-}
-
-export async function* requestToAsyncGenerator(
-  request: IDBRequest<IDBCursorWithValue | null>,
-) {
-  let cursor = await requestToPromise(request);
-
-  while (cursor) {
-    yield cursor;
-
-    if (request.readyState !== "pending") {
-      cursor.continue();
-    }
-
-    cursor = await requestToPromise(request);
-  }
-}

package/lib/QRCode/QRCode.stories.tsx

@@ -1,41 +0,0 @@
-import { http, HttpResponse } from "msw";
-import preview from "../../.storybook/preview.tsx";
-import { Failure, Pending, Success } from "../async-op.ts";
-import { QRCode } from "./QRCode.tsx";
-
-const meta = preview.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" },
-          });
-        }),
-      },
-    },
-  },
-});
-
-export const SuccessCase = meta.story({});
-
-export const PendingCase = meta.story({
-  args: {
-    url: new Pending(),
-  },
-});
-
-export const FailureCase = meta.story({
-  args: {
-    url: new Failure("Failed"),
-  },
-});

package/lib/QRCode/QRCode.tsx

@@ -1,54 +0,0 @@
-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";
-
-type QRCodeProps = {
-  url: AsyncOp<string, unknown>;
-  className?: string;
-};
-
-export function QRCode(props: QRCodeProps) {
-  const { url: result } = props;
-  const { client } = useAppConfig();
-
-  return (
-    <div {...cx(props, 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

@@ -1,23 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const code = {
-  container: style({
-    "@layer": {
-      appkit: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: "white",
-        borderRadius: "0.5rem",
-        maxInlineSize: "12rem",
-        aspectRatio: "1",
-      },
-    },
-  }),
-
-  image: style({
-    inlineSize: "100%",
-    blockSize: "auto",
-    borderRadius: "inherit",
-  }),
-};

package/lib/ReleaseInfo/index.tsx

@@ -1,29 +0,0 @@
-export function ReleaseInfo(props: {
-  branch?: string;
-  shortcode?: string;
-  backgroundColor?: string;
-}) {
-  if (!props.branch || !props.shortcode) {
-    return <>Release [local]</>;
-  }
-
-  return (
-    <>
-      {`Release `}
-      <code
-        style={{
-          fontSize: "0.875em",
-          backgroundColor: props.backgroundColor,
-          paddingInline: "0.25rem",
-          paddingBlock: "0.125rem",
-          borderRadius: "0.25rem",
-          fontFamily: "monospace",
-        }}
-      >
-        {props.shortcode}
-      </code>
-
-      {props.branch === "main" ? "" : ` (${props.branch})`}
-    </>
-  );
-}