@surrealdb/ui 1.2.12 → 1.2.14

package/tests/unit/MarkdownViewer/tabs.test.tsx

@@ -1,40 +1,41 @@
 import { MantineProvider, v8CssVariablesResolver } from "@mantine/core";
 import type { MarkdownComponents } from "@src/lib/markdown";
-import viewerClasses from "@src/lib/markdown/style/viewer.module.scss";
 import { MarkdownViewer } from "@src/primitives/MarkdownViewer";
 import { MANTINE_THEME } from "@src/theme/mantine";
 import { Children, isValidElement, type ReactElement, type ReactNode } from "react";
 import { renderToString } from "react-dom/server";
 import { beforeAll, describe, expect, it } from "vitest";
 
+import viewerClasses from "@src/lib/markdown/style/viewer.module.scss";
+
 beforeAll(() => {
-    if (typeof window !== "undefined" && typeof window.matchMedia !== "function") {
-        Object.defineProperty(window, "matchMedia", {
-            writable: true,
-            value: (query: string) => ({
-                matches: false,
-                media: query,
-                onchange: null,
-                addListener: () => {},
-                removeListener: () => {},
-                addEventListener: () => {},
-                removeEventListener: () => {},
-                dispatchEvent: () => false,
-            }),
-        });
-    }
+	if (typeof window !== "undefined" && typeof window.matchMedia !== "function") {
+		Object.defineProperty(window, "matchMedia", {
+			writable: true,
+			value: (query: string) => ({
+				matches: false,
+				media: query,
+				onchange: null,
+				addListener: () => {},
+				removeListener: () => {},
+				addEventListener: () => {},
+				removeEventListener: () => {},
+				dispatchEvent: () => false,
+			}),
+		});
+	}
 });
 
 function shell(node: ReactElement): string {
-    return renderToString(
-        <MantineProvider
-            theme={MANTINE_THEME}
-            cssVariablesResolver={v8CssVariablesResolver}
-            forceColorScheme="dark"
-        >
-            {node}
-        </MantineProvider>,
-    );
+	return renderToString(
+		<MantineProvider
+			theme={MANTINE_THEME}
+			cssVariablesResolver={v8CssVariablesResolver}
+			forceColorScheme="dark"
+		>
+			{node}
+		</MantineProvider>,
+	);
 }
 
 const TABS_MARKDOWN = `<Tabs>
@@ -55,61 +56,61 @@ fn main() {}
 </Tabs>`;
 
 describe("MarkdownViewer / Tabs", () => {
-    it("renders one tab button per TabItem with the correct labels", () => {
-        const html = shell(<MarkdownViewer content={TABS_MARKDOWN} />);
-
-        const tabButtons = html.match(/mantine-Tabs-tab\b/g) ?? [];
-        expect(tabButtons).toHaveLength(2);
-
-        const labels = [...html.matchAll(/mantine-Tabs-tabLabel">([^<]*)</g)].map((m) => m[1]);
-        expect(labels).toEqual(["JavaScript", "Rust"]);
-    });
-
-    it("renders the active tab's content as markdown (code block highlighted)", () => {
-        const html = shell(<MarkdownViewer content={TABS_MARKDOWN} />);
-        // A real fenced code block is rendered (not raw text).
-        expect(html).toContain('data-language="javascript"');
-        // The code is highlighted into spans, so the plain text survives stripping tags.
-        const text = html.replace(/<[^>]+>/g, "");
-        expect(text).toContain("const x = 42");
-    });
-
-    it("wraps tab sub-content in the shared content-flow class for top-level rhythm", () => {
-        const contentFlow = viewerClasses.contentFlow;
-        expect(contentFlow).toBeTruthy();
-
-        const html = shell(<MarkdownViewer content={TABS_MARKDOWN} />);
-
-        // The class is shared: the viewer root composes it, and the tab body
-        // wrapper applies it — so nested content is spaced like top-level content.
-        const occurrences = html.split(contentFlow).length - 1;
-        expect(occurrences).toBeGreaterThanOrEqual(2);
-    });
-
-    it("exposes bare child elements with their props for custom introspecting components", () => {
-        // Mirrors how docs' <ContentTabs> reads each child's label/content via
-        // React.Children — the children must be the bare TabItem elements.
-        function Group({ children }: { children?: ReactNode }): ReactElement {
-            const tabs = Children.toArray(children)
-                .filter(isValidElement)
-                .map((el) => (el.props as { label?: string }).label ?? "MISSING");
-            return <div data-labels={tabs.join("|")} />;
-        }
-        function Item({ children }: { children?: ReactNode }): ReactElement {
-            return <>{children}</>;
-        }
-        const components: MarkdownComponents = {
-            Group: { component: Group, block: true },
-            Item: { component: Item, block: true },
-        };
-        const html = shell(
-            <MarkdownViewer
-                content={
-                    '<Group>\n<Item label="One">\n\na\n\n</Item>\n<Item label="Two">\n\nb\n\n</Item>\n</Group>'
-                }
-                components={components}
-            />,
-        );
-        expect(html).toContain('data-labels="One|Two"');
-    });
+	it("renders one tab button per TabItem with the correct labels", () => {
+		const html = shell(<MarkdownViewer content={TABS_MARKDOWN} />);
+
+		const tabButtons = html.match(/mantine-Tabs-tab\b/g) ?? [];
+		expect(tabButtons).toHaveLength(2);
+
+		const labels = [...html.matchAll(/mantine-Tabs-tabLabel">([^<]*)</g)].map((m) => m[1]);
+		expect(labels).toEqual(["JavaScript", "Rust"]);
+	});
+
+	it("renders the active tab's content as markdown (code block highlighted)", () => {
+		const html = shell(<MarkdownViewer content={TABS_MARKDOWN} />);
+		// A real fenced code block is rendered (not raw text).
+		expect(html).toContain('data-language="javascript"');
+		// The code is highlighted into spans, so the plain text survives stripping tags.
+		const text = html.replace(/<[^>]+>/g, "");
+		expect(text).toContain("const x = 42");
+	});
+
+	it("wraps tab sub-content in the shared content-flow class for top-level rhythm", () => {
+		const contentFlow = viewerClasses.contentFlow;
+		expect(contentFlow).toBeTruthy();
+
+		const html = shell(<MarkdownViewer content={TABS_MARKDOWN} />);
+
+		// The class is shared: the viewer root composes it, and the tab body
+		// wrapper applies it — so nested content is spaced like top-level content.
+		const occurrences = html.split(contentFlow).length - 1;
+		expect(occurrences).toBeGreaterThanOrEqual(2);
+	});
+
+	it("exposes bare child elements with their props for custom introspecting components", () => {
+		// Mirrors how docs' <ContentTabs> reads each child's label/content via
+		// React.Children — the children must be the bare TabItem elements.
+		function Group({ children }: { children?: ReactNode }): ReactElement {
+			const tabs = Children.toArray(children)
+				.filter(isValidElement)
+				.map((el) => (el.props as { label?: string }).label ?? "MISSING");
+			return <div data-labels={tabs.join("|")} />;
+		}
+		function Item({ children }: { children?: ReactNode }): ReactElement {
+			return <>{children}</>;
+		}
+		const components: MarkdownComponents = {
+			Group: { component: Group, block: true },
+			Item: { component: Item, block: true },
+		};
+		const html = shell(
+			<MarkdownViewer
+				content={
+					'<Group>\n<Item label="One">\n\na\n\n</Item>\n<Item label="Two">\n\nb\n\n</Item>\n</Group>'
+				}
+				components={components}
+			/>,
+		);
+		expect(html).toContain('data-labels="One|Two"');
+	});
 });

package/tests/unit/Stacker/drag.test.ts

@@ -0,0 +1,21 @@
+import { shouldDismiss } from "@src/lib/stacker";
+import { describe, expect, it } from "vitest";
+
+describe("shouldDismiss", () => {
+	it("dismisses on a fast flick towards the edge regardless of distance", () => {
+		expect(shouldDismiss(10, 400, 0.6)).toBe(true);
+	});
+
+	it("does not dismiss a slow drag that stays under halfway", () => {
+		expect(shouldDismiss(100, 400, 0.1)).toBe(false);
+	});
+
+	it("dismisses once dragged past halfway", () => {
+		expect(shouldDismiss(210, 400, 0.1)).toBe(true);
+		expect(shouldDismiss(200, 400, 0.1)).toBe(false);
+	});
+
+	it("never dismisses when the extent is unknown and there is no flick", () => {
+		expect(shouldDismiss(0, 0, 0.1)).toBe(false);
+	});
+});

package/tests/unit/Stacker/helpers.test.ts

@@ -0,0 +1,105 @@
+import {
+	coveredEphemeral,
+	drawerDepthStyle,
+	resolveKind,
+	resolveLiveKind,
+	topOpened,
+} from "@src/lib/stacker";
+import type { StackerItem } from "@src/lib/stacker";
+import { describe, expect, it } from "vitest";
+
+describe("resolveKind", () => {
+	it("uses the explicit variant when provided", () => {
+		expect(resolveKind("drawer", false)).toBe("drawer");
+		expect(resolveKind("modal", true)).toBe("modal");
+	});
+
+	it("falls back to the viewport when no variant is set", () => {
+		expect(resolveKind(undefined, true)).toBe("drawer");
+		expect(resolveKind(undefined, false)).toBe("modal");
+	});
+});
+
+describe("resolveLiveKind", () => {
+	const drawerFirst: StackerItem[] = [
+		{ id: "a", opened: true, settings: { variant: "drawer" } },
+		{ id: "b", opened: true, settings: { variant: "modal" } },
+	];
+
+	it("returns null for an empty stack", () => {
+		expect(resolveLiveKind([], false)).toBeNull();
+	});
+
+	it("follows the first item's variant hint on desktop", () => {
+		expect(resolveLiveKind(drawerFirst, false)).toBe("drawer");
+	});
+
+	it("follows the viewport when the first item has no variant", () => {
+		const items: StackerItem[] = [{ id: "a", opened: true, settings: {} }];
+		expect(resolveLiveKind(items, true)).toBe("drawer");
+		expect(resolveLiveKind(items, false)).toBe("modal");
+	});
+
+	it("prefers a stack-level forced kind over the first item and viewport", () => {
+		const items: StackerItem[] = [{ id: "b", opened: true, settings: { variant: "modal" } }];
+		expect(resolveLiveKind(items, false, "drawer")).toBe("drawer");
+		expect(resolveLiveKind(items, true, "modal")).toBe("modal");
+	});
+});
+
+describe("topOpened", () => {
+	const items: StackerItem[] = [
+		{ id: "a", opened: true, settings: {} },
+		{ id: "b", opened: true, settings: {} },
+		{ id: "c", opened: false, settings: {} },
+	];
+
+	it("returns the top-most open item, skipping closing ones", () => {
+		expect(topOpened(items)?.id).toBe("b");
+		expect(topOpened([])).toBeUndefined();
+	});
+});
+
+describe("coveredEphemeral", () => {
+	it("returns open ephemeral items that would be covered by a new top", () => {
+		const items: StackerItem[] = [
+			{ id: "a", opened: true, settings: { ephemeral: true } },
+			{ id: "b", opened: true, settings: {} },
+			{ id: "c", opened: false, settings: { ephemeral: true } },
+		];
+		expect(coveredEphemeral(items, "new").map((i) => i.id)).toEqual(["a"]);
+	});
+
+	it("excludes the new top id even if that item is ephemeral", () => {
+		const items: StackerItem[] = [{ id: "a", opened: true, settings: { ephemeral: true } }];
+		expect(coveredEphemeral(items, "a")).toEqual([]);
+	});
+});
+
+describe("drawerDepthStyle", () => {
+	it("applies no transform at depth 0", () => {
+		expect(drawerDepthStyle("right", 0)).toEqual({
+			transform: "none",
+			transformOrigin: "center",
+		});
+	});
+
+	it("pushes outward from the free edge and scales down per side", () => {
+		expect(drawerDepthStyle("right", 1)).toEqual({
+			transform: "translateX(-12px) scale(0.96)",
+			transformOrigin: "0% 50%",
+		});
+		expect(drawerDepthStyle("left", 1)).toEqual({
+			transform: "translateX(12px) scale(0.96)",
+			transformOrigin: "100% 50%",
+		});
+		expect(drawerDepthStyle("bottom", 2)).toEqual({
+			transform: "translateY(-24px) scale(0.92)",
+			transformOrigin: "50% 0%",
+		});
+		expect(drawerDepthStyle("top", 2)).toEqual({
+			transform: "translateY(24px) scale(0.92)",
+			transformOrigin: "50% 100%",
+		});
+	});
+});

package/tests/unit/Stacker/reducer.test.ts

@@ -0,0 +1,107 @@
+import { STACKER_INITIAL_STATE, type StackerState, stackerReducer } from "@src/lib/stacker";
+import type { StackerItem } from "@src/lib/stacker";
+import { describe, expect, it } from "vitest";
+
+function item(id: string): StackerItem {
+	return { id, opened: true, settings: { title: id } };
+}
+
+function open(state: StackerState, id: string): StackerState {
+	return stackerReducer(state, { type: "OPEN", item: item(id) });
+}
+
+describe("stackerReducer", () => {
+	it("appends overlays in order", () => {
+		let state = open(STACKER_INITIAL_STATE, "a");
+		state = open(state, "b");
+		expect(state.items.map((i) => i.id)).toEqual(["a", "b"]);
+	});
+
+	it("no-ops when reopening an already-open id", () => {
+		const state = open(STACKER_INITIAL_STATE, "a");
+		expect(open(state, "a")).toBe(state);
+	});
+
+	it("revives a closing overlay in place and merges settings", () => {
+		let state = open(STACKER_INITIAL_STATE, "a");
+		state = stackerReducer(state, { type: "CLOSE", id: "a" });
+		expect(state.items[0].opened).toBe(false);
+
+		state = stackerReducer(state, {
+			type: "OPEN",
+			item: { id: "a", opened: true, settings: { title: "revived" } },
+		});
+		expect(state.items).toHaveLength(1);
+		expect(state.items[0].opened).toBe(true);
+		expect(state.items[0].settings.title).toBe("revived");
+	});
+
+	it("flips opened on CLOSE and is idempotent", () => {
+		const state = open(STACKER_INITIAL_STATE, "a");
+		const closed = stackerReducer(state, { type: "CLOSE", id: "a" });
+		expect(closed.items[0].opened).toBe(false);
+		expect(stackerReducer(closed, { type: "CLOSE", id: "a" })).toBe(closed);
+		expect(stackerReducer(state, { type: "CLOSE", id: "missing" })).toBe(state);
+	});
+
+	it("removes an item only on REMOVE", () => {
+		let state = open(STACKER_INITIAL_STATE, "a");
+		state = open(state, "b");
+
+		state = stackerReducer(state, { type: "REMOVE", id: "b" });
+		expect(state.items.map((i) => i.id)).toEqual(["a"]);
+
+		state = stackerReducer(state, { type: "REMOVE", id: "a" });
+		expect(state.items).toHaveLength(0);
+	});
+
+	it("locks a founding forced variant until the stack empties", () => {
+		let state = stackerReducer(STACKER_INITIAL_STATE, {
+			type: "OPEN",
+			item: {
+				id: "ephemeral",
+				opened: true,
+				settings: { variant: "drawer", ephemeral: true },
+			},
+		});
+		expect(state.forcedKind).toBe("drawer");
+
+		state = stackerReducer(state, {
+			type: "OPEN",
+			item: { id: "next", opened: true, settings: { variant: "modal" } },
+		});
+		expect(state.forcedKind).toBe("drawer");
+
+		state = stackerReducer(state, { type: "REMOVE", id: "ephemeral" });
+		expect(state.items.map((i) => i.id)).toEqual(["next"]);
+		expect(state.forcedKind).toBe("drawer");
+
+		state = stackerReducer(state, { type: "REMOVE", id: "next" });
+		expect(state.forcedKind).toBeNull();
+	});
+
+	it("does not lock kind when the founding overlay has no variant", () => {
+		const state = open(STACKER_INITIAL_STATE, "a");
+		expect(state.forcedKind).toBeNull();
+	});
+
+	it("closes every open item with CLOSE_ALL", () => {
+		let state = open(STACKER_INITIAL_STATE, "a");
+		state = open(state, "b");
+		const closed = stackerReducer(state, { type: "CLOSE_ALL" });
+		expect(closed.items.every((i) => !i.opened)).toBe(true);
+		expect(stackerReducer(closed, { type: "CLOSE_ALL" })).toBe(closed);
+	});
+
+	it("merges settings on UPDATE", () => {
+		const state = open(STACKER_INITIAL_STATE, "a");
+		const updated = stackerReducer(state, {
+			type: "UPDATE",
+			id: "a",
+			patch: { title: "renamed", withCloseButton: false },
+		});
+		expect(updated.items[0].settings.title).toBe("renamed");
+		expect(updated.items[0].settings.withCloseButton).toBe(false);
+		expect(stackerReducer(state, { type: "UPDATE", id: "missing", patch: {} })).toBe(state);
+	});
+});