@surrealdb/ui 1.2.15 → 1.2.17

package/tests/e2e/MarkdownViewer/parity.test.tsx

@@ -1,191 +0,0 @@
-import { Grid, MantineProvider, Paper, v8CssVariablesResolver } from "@mantine/core";
-import { MarkdownEditor } from "@src/primitives/MarkdownEditor";
-import { MarkdownViewer } from "@src/primitives/MarkdownViewer";
-import { MANTINE_THEME } from "@src/theme/mantine";
-import { type FC, useState } from "react";
-import { describe, expect, it } from "vitest";
-
-import { getEditorView, mountStory, nextFrame } from "../../_setup/e2e-helpers";
-import { md, mdViewer } from "../../_setup/markdown-classes";
-
-const PARITY_FIXTURE = `# Title
-
-Paragraph *italic* and **bold** and \`code\`.
-
-## Section
-
-Visit [link](https://surrealdb.com).
-
-- One
-- Two
-
-- [ ] todo one
-- [x] todo two **with bold**
-
-\`\`\`ts
-return true;
-\`\`\`
-
-<details>
-<summary>Expand</summary>
-
-Inside details.
-
-</details>
-`;
-
-const ParityLayout: FC = () => {
-	const [doc] = useState(PARITY_FIXTURE);
-	return (
-		<MantineProvider
-			theme={MANTINE_THEME}
-			cssVariablesResolver={v8CssVariablesResolver}
-			forceColorScheme="dark"
-		>
-			<Grid gap="md">
-				<Grid.Col span={{ base: 12, md: 6 }}>
-					<Paper
-						p="md"
-						radius="md"
-						withBorder
-					>
-						<MarkdownEditor
-							mode="preview"
-							document={doc}
-							autoFocus={false}
-							mih={200}
-						/>
-					</Paper>
-				</Grid.Col>
-				<Grid.Col span={{ base: 12, md: 6 }}>
-					<Paper
-						p="md"
-						radius="md"
-						withBorder
-					>
-						<MarkdownViewer content={doc} />
-					</Paper>
-				</Grid.Col>
-			</Grid>
-		</MantineProvider>
-	);
-};
-
-function visibleText(el: Element): string {
-	const clone = el.cloneNode(true) as Element;
-
-	for (const n of clone.querySelectorAll(`.${md.markHidden}, .cm-line-folded`)) {
-		n.remove();
-	}
-
-	return clone.textContent?.replace(/\s+/g, "") ?? "";
-}
-
-const PARITY_CLASSES = [md.h1, md.h2, md.strong, md.emphasis, md.codeInline, md.link] as const;
-
-describe("MarkdownViewer / editor parity", () => {
-	it("renders checklist text alongside checkboxes in the viewer", async () => {
-		mountStory(<ParityLayout />);
-		await getEditorView();
-		await nextFrame();
-
-		const vrEl = document.querySelector(`.${mdViewer.viewerRoot}`);
-		expect(vrEl).not.toBeNull();
-		if (vrEl === null) return;
-
-		const taskItems = vrEl.querySelectorAll(`li.${md.taskItem}`);
-		expect(taskItems.length).toBe(2);
-
-		const text = (i: number) =>
-			(taskItems[i]?.querySelector(`.${md.taskText}`)?.textContent ?? "").trim();
-		expect(text(0)).toContain("todo one");
-		expect(text(1)).toContain("todo two");
-		expect(taskItems[1]?.querySelector(`.${md.strong}`)?.textContent).toBe("with bold");
-	});
-
-	it("uses the same link colour as the editor", async () => {
-		mountStory(<ParityLayout />);
-		const view = await getEditorView();
-		view.contentDOM.blur();
-		await nextFrame();
-
-		const cmLink = document.querySelector(`.cm-content .${md.link}`);
-		const vwLink = document.querySelector(`.${mdViewer.viewerRoot} .${md.link}`);
-		expect(cmLink).not.toBeNull();
-		expect(vwLink).not.toBeNull();
-		if (cmLink === null || vwLink === null) return;
-
-		expect(getComputedStyle(vwLink).color).toBe(getComputedStyle(cmLink).color);
-	});
-
-	it("matches visible text between preview editor (blurred) and MarkdownViewer", async () => {
-		mountStory(<ParityLayout />);
-		const view = await getEditorView();
-		view.contentDOM.blur();
-		await nextFrame();
-		await nextFrame();
-
-		const cmEl = document.querySelector(".cm-content");
-		const vrEl = document.querySelector(`.${mdViewer.viewerRoot}`);
-		expect(cmEl).not.toBeNull();
-		expect(vrEl).not.toBeNull();
-		if (cmEl === null || vrEl === null) {
-			return;
-		}
-
-		expect(visibleText(vrEl)).toBe(visibleText(cmEl));
-	});
-
-	it("matches counts for shared structural classes", async () => {
-		mountStory(<ParityLayout />);
-		const view = await getEditorView();
-		view.contentDOM.blur();
-		await nextFrame();
-
-		const cmEl = document.querySelector(".cm-content");
-		const vrEl = document.querySelector(`.${mdViewer.viewerRoot}`);
-		expect(cmEl).not.toBeNull();
-		expect(vrEl).not.toBeNull();
-		if (cmEl === null || vrEl === null) {
-			return;
-		}
-
-		for (const cls of PARITY_CLASSES) {
-			expect(vrEl.querySelectorAll(`.${cls}`).length).toBe(
-				cmEl.querySelectorAll(`.${cls}`).length,
-			);
-		}
-	});
-
-	it("matches computed font size on first heading", async () => {
-		mountStory(<ParityLayout />);
-		const view = await getEditorView();
-		view.contentDOM.blur();
-		await nextFrame();
-
-		const cmH1 = document.querySelector(`.cm-content .${md.h1}`);
-		const vwH1 = document.querySelector(`.${mdViewer.viewerRoot} .${md.h1}`);
-		expect(cmH1).not.toBeNull();
-		expect(vwH1).not.toBeNull();
-		if (cmH1 === null || vwH1 === null) {
-			return;
-		}
-
-		const a = getComputedStyle(cmH1);
-		const b = getComputedStyle(vwH1);
-		expect(a.fontSize).toBe(b.fontSize);
-		expect(a.fontWeight).toBe(b.fontWeight);
-	});
-
-	it("renders HTML details in both editor preview and viewer", async () => {
-		mountStory(<ParityLayout />);
-		const view = await getEditorView();
-		view.contentDOM.blur();
-		await nextFrame();
-
-		const vrEl = document.querySelector(`.${mdViewer.viewerRoot}`);
-		expect(vrEl?.textContent).toContain("Expand");
-		expect(vrEl?.textContent).toContain("Inside details");
-		expect(document.querySelector(".cm-content")?.textContent).toContain("Inside details");
-	});
-});

package/tests/e2e/MarkdownViewer/render.test.tsx

@@ -1,36 +0,0 @@
-import { MantineProvider, v8CssVariablesResolver } from "@mantine/core";
-import { MarkdownViewer } from "@src/primitives/MarkdownViewer";
-import { MANTINE_THEME } from "@src/theme/mantine";
-import { describe, expect, it } from "vitest";
-
-import { mountStory, nextFrame } from "../../_setup/e2e-helpers";
-import { md, mdViewer } from "../../_setup/markdown-classes";
-
-const FIXTURE = `# Hello
-
-Paragraph **bold**.
-`;
-
-describe("MarkdownViewer / render", () => {
-	it("exercises shared preview class names without mounting CodeMirror", async () => {
-		mountStory(
-			<MantineProvider
-				theme={MANTINE_THEME}
-				cssVariablesResolver={v8CssVariablesResolver}
-				forceColorScheme="dark"
-			>
-				<MarkdownViewer content={FIXTURE} />
-			</MantineProvider>,
-		);
-		await nextFrame();
-		await nextFrame();
-
-		const root = document.querySelector(`.${mdViewer.viewerRoot}`);
-		expect(root).not.toBeNull();
-		expect(document.querySelector(".cm-editor")).toBeNull();
-
-		expect(root?.querySelector(`.${md.heading}`)).not.toBeNull();
-		expect(root?.querySelector(`.${md.h1}`)).not.toBeNull();
-		expect(root?.querySelector(`.${md.strong}`)).not.toBeNull();
-	});
-});

package/tests/e2e/Stacker/stacker.test.tsx

@@ -1,304 +0,0 @@
-import * as StackerStories from "@src/stories/playground/Stacker.stories";
-import { composeStories } from "@storybook/react-vite";
-import { describe, expect, it } from "vitest";
-
-import { mountStory, nextFrame, sleep, userEvent } from "../../_setup/e2e-helpers";
-
-const Stories = composeStories(StackerStories);
-
-// ── DOM query helpers ─────────────────────────────────────────────────────────
-function dialogs(): HTMLElement[] {
-	return [...document.querySelectorAll<HTMLElement>('[role="dialog"]')];
-}
-function scrims(): HTMLElement[] {
-	return [...document.querySelectorAll<HTMLElement>("[data-stacker-scrim]")];
-}
-function sheets(): HTMLElement[] {
-	return [...document.querySelectorAll<HTMLElement>("[data-stacker-sheet]")];
-}
-function modals(): HTMLElement[] {
-	return [...document.querySelectorAll<HTMLElement>('[data-stacker="modal"]')];
-}
-function cards(): HTMLElement[] {
-	return [...document.querySelectorAll<HTMLElement>("[data-stacker-card]")];
-}
-/** Leaf element whose exact text matches — matches the ModalBase/plain titles. */
-function hasText(text: string): boolean {
-	return [...document.querySelectorAll<HTMLElement>("*")].some(
-		(el) => el.children.length === 0 && el.textContent?.trim() === text,
-	);
-}
-
-async function until(predicate: () => boolean, timeoutMs = 3000): Promise<void> {
-	const start = Date.now();
-	while (Date.now() - start < timeoutMs) {
-		if (predicate()) return;
-		await nextFrame();
-	}
-	throw new Error("condition not met within timeout");
-}
-
-function findButton(name: string, scope: ParentNode = document): HTMLButtonElement | undefined {
-	return [...scope.querySelectorAll<HTMLButtonElement>("button")].find(
-		(b) => b.textContent?.trim() === name || b.getAttribute("aria-label") === name,
-	);
-}
-async function clickButton(name: string, scope: ParentNode = document): Promise<void> {
-	await until(() => findButton(name, scope) !== undefined);
-	const button = findButton(name, scope);
-	if (!button) throw new Error(`button not found: ${name}`);
-	await userEvent.click(button);
-}
-
-function scaleOf(el: Element): number {
-	const t = getComputedStyle(el).transform;
-	if (!t || t === "none") return 1;
-	const m = t.match(/matrix\(([^)]+)\)/);
-	return m ? Number.parseFloat(m[1].split(",")[0]) : 1;
-}
-async function pageScale(): Promise<number> {
-	await until(() => document.querySelector("[data-stacker-page]") !== null);
-	return scaleOf(document.querySelector("[data-stacker-page]") as Element);
-}
-
-describe("Stacker", () => {
-	it("E1 mounts nothing until an overlay is opened", async () => {
-		mountStory(<Stories.Default />);
-		await sleep(60);
-		expect(dialogs()).toHaveLength(0);
-		expect(scrims()).toHaveLength(0);
-	});
-
-	it("E2 renders a modal (forced) and never scales the page", async () => {
-		mountStory(<Stories.ForcedModal />);
-		await clickButton("Open forced modal");
-		await until(() => modals().length === 1);
-		await sleep(300);
-		expect(sheets()).toHaveLength(0);
-		expect(await pageScale()).toBeCloseTo(1, 2);
-	});
-
-	it("E3 renders a drawer and scales the page when mobileQuery matches", async () => {
-		mountStory(<Stories.MobileEmulated />);
-		await clickButton("Open overlay");
-		await until(() => sheets().length === 1);
-		expect(modals()).toHaveLength(0);
-		await sleep(500);
-		expect(await pageScale()).toBeLessThan(0.99);
-	});
-
-	it("E4 respects a forced drawer variant on desktop", async () => {
-		mountStory(<Stories.ForcedDrawer />);
-		await clickButton("Open forced drawer");
-		await until(() => sheets().length === 1);
-		expect(modals()).toHaveLength(0);
-	});
-
-	it("E5 coerces later overlays to the stack's kind", async () => {
-		mountStory(<Stories.CoercedStack />);
-		await clickButton("Open drawer, then a modal");
-		await until(() => sheets().length === 1);
-		await clickButton('Open a "modal" on top');
-		await until(() => sheets().length === 2);
-		expect(modals()).toHaveLength(0); // the "modal" was coerced to a drawer
-	});
-
-	it("E6 stacks modals with one scrim, hiding the covered card", async () => {
-		mountStory(<Stories.ForcedModal />);
-		await clickButton("Open forced modal");
-		await until(() => cards().length === 1);
-		await sleep(300);
-
-		await clickButton("Push another");
-		await until(() => cards().length === 2);
-		await sleep(400);
-
-		expect(scrims()).toHaveLength(1);
-		expect(dialogs()).toHaveLength(2);
-
-		const [lower, top] = cards();
-		// The covered card is hidden entirely (no layout box) while another is on top…
-		const lowerRect = lower.getBoundingClientRect();
-		expect(lowerRect.width).toBe(0);
-		expect(lowerRect.height).toBe(0);
-		// …while the top card stays visible.
-		expect(top.getBoundingClientRect().height).toBeGreaterThan(0);
-	});
-
-	it("E7 reveals the previous content on pop with the scrim intact", async () => {
-		mountStory(<Stories.ForcedModal />);
-		await clickButton("Open forced modal");
-		await until(() => hasText("Forced modal"));
-		await clickButton("Push another");
-		await until(() => hasText("Overlay 2"));
-		await sleep(400);
-
-		await clickButton("Close this", cards()[1]);
-		await until(() => cards().length === 1 && hasText("Forced modal"));
-		await sleep(300);
-		expect(scrims()).toHaveLength(1);
-		expect(dialogs()).toHaveLength(1);
-	});
-
-	it("E8 peeks lower drawers out and fades their content", async () => {
-		mountStory(<Stories.StackedDrawers />);
-		await clickButton("Open stacked drawers");
-		await until(() => sheets().length === 1);
-		await clickButton("Push another");
-		await until(() => sheets().length === 2);
-		await sleep(400);
-
-		const [lower, top] = sheets();
-		expect(lower.getBoundingClientRect().left).toBeLessThan(top.getBoundingClientRect().left);
-		expect(Number(getComputedStyle(lower).opacity)).toBe(1); // sheet surface stays visible
-		const lowerBody = lower.querySelector('[class*="body"]') as HTMLElement;
-		await until(() => Number(getComputedStyle(lowerBody).opacity) < 0.1);
-	});
-
-	it("E9 does not compound the page scale and restores it after close", async () => {
-		mountStory(<Stories.StackedDrawers />);
-		await clickButton("Open stacked drawers");
-		await until(() => sheets().length === 1);
-		await sleep(500);
-		const oneDrawer = await pageScale();
-		expect(oneDrawer).toBeLessThan(0.99);
-
-		await clickButton("Push another");
-		await until(() => sheets().length === 2);
-		await sleep(500);
-		expect(await pageScale()).toBeCloseTo(oneDrawer, 2);
-
-		await clickButton("Close this", sheets()[1]);
-		await until(() => sheets().length === 1);
-		await clickButton("Close this", sheets()[0]);
-		await until(() => sheets().length === 0);
-		await sleep(500);
-		expect(await pageScale()).toBeCloseTo(1, 2);
-	});
-
-	it("E10 pops only the top overlay on Escape", async () => {
-		mountStory(<Stories.ForcedModal />);
-		await clickButton("Open forced modal");
-		await until(() => hasText("Forced modal"));
-		await clickButton("Push another");
-		await until(() => hasText("Overlay 2"));
-		await sleep(400);
-
-		await userEvent.keyboard("{Escape}");
-		await until(() => hasText("Forced modal") && !hasText("Overlay 2"));
-		expect(dialogs()).toHaveLength(1);
-	});
-
-	it("E10b blocks dismissal when closeOnEscape/closeOnClickOutside are false", async () => {
-		mountStory(<Stories.DismissControl />);
-		await clickButton("No dismiss affordances");
-		await until(() => hasText("Locked"));
-		await sleep(300);
-
-		await userEvent.keyboard("{Escape}");
-		await sleep(250);
-		expect(hasText("Locked")).toBe(true); // still open
-
-		scrims()[0]?.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
-		await sleep(250);
-		expect(hasText("Locked")).toBe(true);
-
-		await clickButton("Close from inside");
-		await until(() => !hasText("Locked"));
-	});
-
-	it("E11 keeps the close button pinned top-right with a long header", async () => {
-		mountStory(<Stories.LongHeader />);
-		await clickButton("Open long header");
-		await until(() => dialogs().length === 1);
-		await sleep(300);
-
-		const dialog = dialogs()[0];
-		const close = dialog.querySelector('[aria-label="Close"]') as HTMLElement;
-		const header = dialog.querySelector('[class*="header"]') as HTMLElement;
-		const closeRect = close.getBoundingClientRect();
-		const headerRect = header.getBoundingClientRect();
-		// Pinned to the top of a tall wrapping header (not vertically centered)…
-		expect(closeRect.top - headerRect.top).toBeLessThan(40);
-		// …and to its right edge (within the header padding).
-		expect(headerRect.right - closeRect.right).toBeLessThan(60);
-		expect(headerRect.right - closeRect.right).toBeGreaterThanOrEqual(0);
-	});
-
-	it("E12 drags a draggable drawer to dismiss, and springs back a small drag", async () => {
-		mountStory(<Stories.DraggableDrawer />);
-		await clickButton("Open draggable drawer");
-		await until(() => sheets().length === 1);
-		await sleep(400);
-
-		const grip = document.querySelector('[class*="grip"]') as HTMLElement;
-
-		// Small drag (30px down) → springs back, stays open.
-		await dragSheet(grip, 0, 30);
-		await sleep(400);
-		expect(sheets()).toHaveLength(1);
-
-		// Large drag past halfway → dismisses.
-		const height = sheets()[0].getBoundingClientRect().height;
-		await dragSheet(grip, 0, Math.round(height * 0.7));
-		await until(() => sheets().length === 0);
-	});
-
-	it("E13 fires onClose once per close and empties the stack with closeAll", async () => {
-		mountStory(<Stories.Lifecycle />);
-		const count = () =>
-			Number(
-				(document.querySelector('[data-testid="close-count"]')?.textContent ?? "").replace(
-					/\D/g,
-					"",
-				),
-			);
-
-		await clickButton("Open");
-		await until(() => hasText("Tracked overlay"));
-		await clickButton("Close this");
-		await until(() => count() === 1);
-		await sleep(300);
-
-		await clickButton("Open");
-		await until(() => hasText("Tracked overlay"));
-		await clickButton("Push another");
-		await until(() => hasText("Overlay 2"));
-		// "Close all" lives on the page (covered by the scrim), so fire it natively.
-		findButton("Close all")?.click();
-		await until(() => dialogs().length === 0 && scrims().length === 0);
-	});
-});
-
-/** Dispatch a pointer drag on `el`: down on the element, moves + up on document. */
-async function dragSheet(el: HTMLElement, dx: number, dy: number): Promise<void> {
-	const rect = el.getBoundingClientRect();
-	const startX = rect.left + rect.width / 2;
-	const startY = rect.top + rect.height / 2;
-
-	const opts = (x: number, y: number): PointerEventInit => ({
-		pointerId: 1,
-		bubbles: true,
-		cancelable: true,
-		clientX: x,
-		clientY: y,
-		button: 0,
-		buttons: 1,
-	});
-
-	el.dispatchEvent(new PointerEvent("pointerdown", opts(startX, startY)));
-	const steps = 6;
-	for (let i = 1; i <= steps; i++) {
-		document.dispatchEvent(
-			new PointerEvent(
-				"pointermove",
-				opts(startX + (dx * i) / steps, startY + (dy * i) / steps),
-			),
-		);
-		await nextFrame();
-	}
-	document.dispatchEvent(
-		new PointerEvent("pointerup", { ...opts(startX + dx, startY + dy), buttons: 0 }),
-	);
-	await nextFrame();
-}

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

@@ -1,42 +0,0 @@
-import { EditorState } from "@codemirror/state";
-import { EditorView } from "@codemirror/view";
-import { setEditorText } from "@src/lib/editor/helpers";
-import { afterEach, describe, expect, it } from "vitest";
-
-describe("setEditorText", () => {
-	let container: HTMLDivElement;
-	let view: EditorView;
-
-	afterEach(() => {
-		view?.destroy();
-		container?.remove();
-	});
-
-	function createView(doc: string, anchor: number): EditorView {
-		container = document.createElement("div");
-		document.body.appendChild(container);
-
-		return new EditorView({
-			parent: container,
-			state: EditorState.create({ doc, selection: { anchor, head: anchor } }),
-		});
-	}
-
-	it("clamps the selection when replacing with shorter text", () => {
-		view = createView("abcd", 4);
-
-		expect(() => setEditorText(view, "ab")).not.toThrow();
-
-		expect(view.state.doc.toString()).toBe("ab");
-		expect(view.state.selection.main.head).toBe(2);
-	});
-
-	it("preserves a valid selection when replacing with longer text", () => {
-		view = createView("ab", 2);
-
-		setEditorText(view, "abcd");
-
-		expect(view.state.doc.toString()).toBe("abcd");
-		expect(view.state.selection.main.head).toBe(2);
-	});
-});

package/tests/unit/MarkdownConformance/error-isolation.test.tsx

@@ -1,44 +0,0 @@
-import type { MarkdownComponents } from "@src/lib/markdown";
-import { afterEach, describe, expect, it, vi } from "vitest";
-
-import { renderMarkdownClient, visibleText } from "./render-helpers";
-
-function Boom(): never {
-	throw new Error("boom");
-}
-
-const components: MarkdownComponents = { Boom };
-
-afterEach(() => {
-	vi.restoreAllMocks();
-});
-
-// Error boundaries recover on the client (React does not recover them during SSR
-// `renderToString`), so these render into jsdom via `renderMarkdownClient`.
-describe("Conformance / error isolation", () => {
-	it("renders a fallback for a throwing component instead of crashing", () => {
-		vi.spyOn(console, "error").mockImplementation(() => {});
-		const html = renderMarkdownClient("<Boom />", { components });
-		expect(visibleText(html)).toContain("Failed to render component");
-	});
-
-	it("still renders the rest of the document around a throwing component", () => {
-		vi.spyOn(console, "error").mockImplementation(() => {});
-		const html = renderMarkdownClient("Before\n\n<Boom />\n\nAfter", { components });
-		const text = visibleText(html);
-		expect(text).toContain("Before");
-		expect(text).toContain("After");
-	});
-
-	it("renders a fallback for a throwing code renderer", () => {
-		vi.spyOn(console, "error").mockImplementation(() => {});
-		const html = renderMarkdownClient("```boom\ncode\n```", {
-			codeRenderers: {
-				boom: () => {
-					throw new Error("renderer boom");
-				},
-			},
-		});
-		expect(visibleText(html)).toContain("Failed to render code block");
-	});
-});

package/tests/unit/MarkdownConformance/indentation.test.tsx

@@ -1,30 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import { renderMarkdown, visibleText } from "./render-helpers";
-
-// This library disables CommonMark indented code blocks (see SPEC.md): leading
-// indentation nests JSX children, never forms a code block.
-describe("Conformance / indented code blocks are disabled", () => {
-	it("does not turn a 4-space indented line into a code block", () => {
-		const html = renderMarkdown("    not code");
-		expect(html).not.toContain("<pre");
-		expect(visibleText(html)).toContain("not code");
-	});
-
-	it("does not turn a tab-indented line into a code block", () => {
-		const html = renderMarkdown("\tnot code");
-		expect(html).not.toContain("<pre");
-		expect(visibleText(html)).toContain("not code");
-	});
-
-	it("does not turn a deeply indented (8-space) line into a code block", () => {
-		const html = renderMarkdown("        still not code");
-		expect(html).not.toContain("<pre");
-		expect(visibleText(html)).toContain("still not code");
-	});
-
-	it("still renders an explicit fenced code block", () => {
-		const html = renderMarkdown("```\nreal code\n```");
-		expect(visibleText(html)).toContain("real code");
-	});
-});