@indietabletop/appkit 7.0.0-0 → 7.0.0-rc.1

package/lib/ListView/style.css.ts

@@ -0,0 +1,90 @@
+import { createThemeContract, fallbackVar, style } from "@vanilla-extract/css";
+import { appkit } from "../layers.css.ts";
+
+export const listViewTheme = createThemeContract({
+  headingFont: null,
+  headingSize: null,
+  summaryFont: null,
+  summarySize: null,
+  blockSpace: null,
+  inlineSpace: null,
+});
+
+export const item = {
+  container: style({
+    "@layer": {
+      [appkit]: {
+        display: "flex",
+        gap: fallbackVar(listViewTheme.inlineSpace, "1rem"),
+      },
+    },
+  }),
+
+  content: style({
+    "@layer": {
+      [appkit]: {
+        flexGrow: 1,
+      },
+    },
+  }),
+
+  heading: style({
+    "@layer": {
+      [appkit]: {
+        fontFamily: listViewTheme.headingFont,
+        fontSize: fallbackVar(listViewTheme.headingSize, "1.25rem"),
+        lineHeight: "1lh",
+      },
+    },
+  }),
+
+  summary: style({
+    "@layer": {
+      [appkit]: {
+        fontFamily: listViewTheme.summaryFont,
+        fontSize: fallbackVar(listViewTheme.summarySize, "1rem"),
+        marginBlockStart: "0.5em",
+        lineHeight: 1.25,
+
+        ":empty": {
+          display: "none",
+        },
+      },
+    },
+  }),
+};
+
+const listContainerHook = style({});
+
+export const list = {
+  container: style([
+    listContainerHook,
+    {
+      "@layer": {
+        [appkit]: {
+          display: "flex",
+          flexDirection: "column",
+          gap: fallbackVar(listViewTheme.blockSpace, "1.5rem"),
+
+          ":empty": {
+            display: "none",
+          },
+        },
+      },
+    },
+  ]),
+
+  empty: style({
+    "@layer": {
+      [appkit]: {
+        display: "none",
+
+        selectors: {
+          [`${listContainerHook}:empty + &`]: {
+            display: "initial",
+          },
+        },
+      },
+    },
+  }),
+};

package/lib/LoadingIndicator.tsx

@@ -0,0 +1,40 @@
+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}
+      preserveAspectRatio="xMidYMid meet"
+    >
+      <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/MiddotSeparated/MiddotSeparated.stories.ts

@@ -0,0 +1,26 @@
+import preview from "../../.storybook/preview.tsx";
+import { MiddotSeparated } from "./MiddotSeparated.tsx";
+
+const meta = preview.meta({
+  title: "Components/Middot Separated",
+  component: MiddotSeparated,
+  tags: ["autodocs"],
+});
+
+/**
+ * The default case in which all steps of the flow succeed.
+ */
+export const Default = meta.story({
+  args: {
+    children: ["Lorem", "Ipsum", " Dolor"],
+  },
+});
+
+/**
+ * Edge case when it comes to handling children in React.
+ */
+export const SingleElement = meta.story({
+  args: {
+    children: "Lorem",
+  },
+});

package/lib/MiddotSeparated/MiddotSeparated.tsx

@@ -0,0 +1,26 @@
+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)
+        .filter((item) => item !== "")
+        .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/ModalDialog/index.tsx

@@ -0,0 +1,28 @@
+import { Dialog, type DialogProps } from "@ariakit/react";
+import type { RecipeVariants } from "@vanilla-extract/recipes";
+import type { ReactNode } from "react";
+import { cx } from "../class-names.ts";
+import * as css from "./style.css.ts";
+
+type Size = NonNullable<NonNullable<RecipeVariants<typeof css.dialog>>["size"]>;
+
+export type ModalDialogProps = Omit<DialogProps, "modal" | "backdrop"> & {
+  children: ReactNode;
+  size: Size;
+  backdropClassName?: string;
+};
+
+export function ModalDialog(props: ModalDialogProps) {
+  const { size, backdropClassName, className, ...dialogProps } = props;
+
+  return (
+    <Dialog
+      {...dialogProps}
+      {...cx(className, css.dialog({ size }))}
+      backdrop={<div {...cx(css.backdrop, backdropClassName)} />}
+      modal
+    >
+      {props.children}
+    </Dialog>
+  );
+}

package/lib/ModalDialog/style.css.ts

@@ -0,0 +1,88 @@
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { MinWidth } from "../media.ts";
+import { ZIndex } from "../vars.css.ts";
+
+const scaleTransition = {
+  transition: "transform 200ms, opacity 200ms",
+  transform: "scale(1.1)",
+
+  selectors: {
+    "&[data-enter]": {
+      opacity: 1,
+      transform: "scale(1)",
+    },
+
+    "&[data-leave]": {
+      opacity: 0,
+      transform: "scale(0.9)",
+    },
+  },
+};
+
+const translateTransition = {
+  transition: "transform 200ms, opacity 200ms",
+  transform: "translateY(5rem)",
+
+  selectors: {
+    "&[data-enter]": {
+      opacity: 1,
+      transform: "translateY(0)",
+    },
+
+    "&[data-leave]": {
+      opacity: 0,
+      transform: "translateY(5rem)",
+    },
+  },
+};
+
+export const dialog = recipe({
+  base: {
+    position: "fixed",
+    inset: 0,
+    zIndex: ZIndex.DIALOG,
+    margin: "auto",
+    overflow: "auto",
+    opacity: 0,
+    backgroundColor: "white",
+  },
+
+  variants: {
+    size: {
+      large: {
+        ...translateTransition,
+        inlineSize: "100%",
+        blockSize: "100%",
+
+        "@media": {
+          [MinWidth.MEDIUM]: {
+            ...scaleTransition,
+            blockSize: "fit-content",
+            maxInlineSize: "40rem",
+            maxBlockSize: "90%",
+            borderRadius: "1rem",
+          },
+        },
+      },
+
+      small: {
+        ...scaleTransition,
+        inlineSize: "min(24rem, 90svw)",
+        blockSize: "fit-content",
+        borderRadius: "1rem",
+      },
+    },
+  },
+});
+
+export const backdrop = style({
+  backgroundColor: "black",
+  opacity: 0,
+  transition: "opacity 200ms",
+  selectors: {
+    "&[data-enter]": {
+      opacity: 0.4,
+    },
+  },
+});

package/lib/ModernIDB/Cursor.ts

@@ -0,0 +1,91 @@
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+
+import { requestToPromise } from "./utils.ts";
+
+export class Cursor<C extends IDBCursor = IDBCursor> {
+  idbCursor: C;
+
+  constructor(idbCursor: C) {
+    this.idbCursor = idbCursor;
+  }
+
+  get key() {
+    return this.idbCursor.key;
+  }
+
+  get primaryKey() {
+    return this.idbCursor.primaryKey;
+  }
+
+  get direction() {
+    return this.idbCursor.direction;
+  }
+
+  /**
+   * Advances the cursor through the next count records in range.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/IDBCursor/advance
+   */
+  advance(count: number): void {
+    this.idbCursor.advance(count);
+  }
+  /**
+   * Advances the cursor to the next record in range.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/IDBCursor/continue)
+   */
+  continue(key?: IDBValidKey): void {
+    this.idbCursor.continue(key);
+  }
+}
+
+export class CursorWithValue<Item> extends Cursor<IDBCursorWithValue> {
+  get value(): Item {
+    return this.idbCursor.value;
+  }
+
+  /**
+   * Delete the record pointed at by the cursor.
+   *
+   * If successful, request's result will be undefined.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/IDBCursor/delete)
+   */
+  delete(): Promise<undefined> {
+    return requestToPromise(this.idbCursor.delete());
+  }
+  /**
+   * Updated the record pointed at by the cursor with a new value.
+   *
+   * Throws a "DataError" DOMException if the effective object store uses in-line keys and the key would have changed.
+   *
+   * If successful, request's result will be the record's key.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/IDBCursor/update)
+   */
+  update(value: Item): Promise<IDBValidKey> {
+    return requestToPromise(this.idbCursor.update(value));
+  }
+}
+
+export class IndexCursor extends Cursor {
+  /**
+   * Advances the cursor to the next record in range matching or after key and primaryKey. Throws an "InvalidAccessError" DOMException if the source is not an index.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/IDBCursor/continuePrimaryKey)
+   */
+  continuePrimaryKey(key: IDBValidKey, primaryKey: IDBValidKey): void {
+    this.idbCursor.continuePrimaryKey(key, primaryKey);
+  }
+}
+
+export class IndexCursorWithValue<Item> extends CursorWithValue<Item> {
+  /**
+   * Advances the cursor to the next record in range matching or after key and primaryKey. Throws an "InvalidAccessError" DOMException if the source is not an index.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/IDBCursor/continuePrimaryKey)
+   */
+  continuePrimaryKey(key: IDBValidKey, primaryKey: IDBValidKey): void {
+    this.idbCursor.continuePrimaryKey(key, primaryKey);
+  }
+}