@surrealdb/ui 1.2.16 → 1.2.18

package/tests/unit/MarkdownViewer/read-time.test.ts

@@ -1,21 +0,0 @@
-import {
-	estimateMarkdownReadTimeMinutes,
-	formatMarkdownReadTime,
-	markdownToPlainText,
-} from "@src/lib/markdown/read-time";
-import { describe, expect, it } from "vitest";
-
-describe("markdown read time", () => {
-	it("strips markdown syntax for word counting", () => {
-		expect(markdownToPlainText("# Title\n\n[link](https://example.com)")).toBe("Title link");
-	});
-
-	it("estimates at least one minute", () => {
-		expect(estimateMarkdownReadTimeMinutes("")).toBe(1);
-	});
-
-	it("formats a read-time label", () => {
-		const words = Array.from({ length: 400 }, () => "word").join(" ");
-		expect(formatMarkdownReadTime(words)).toBe("2 min read");
-	});
-});

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

@@ -1,95 +0,0 @@
-import { MantineProvider, v8CssVariablesResolver } from "@mantine/core";
-import { MarkdownViewer } from "@src/primitives/MarkdownViewer";
-import { MANTINE_THEME } from "@src/theme/mantine";
-import type { ReactElement } from "react";
-import { renderToString } from "react-dom/server";
-import { beforeAll, describe, expect, it } from "vitest";
-
-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,
-			}),
-		});
-	}
-});
-
-function shell(node: ReactElement): string {
-	return renderToString(
-		<MantineProvider
-			theme={MANTINE_THEME}
-			cssVariablesResolver={v8CssVariablesResolver}
-			forceColorScheme="dark"
-		>
-			{node}
-		</MantineProvider>,
-	);
-}
-
-describe("MarkdownViewer / MarkdownViewerRenderers", () => {
-	it("uses heading renderer override", () => {
-		const html = shell(
-			<MarkdownViewer
-				content="## Section title"
-				renderers={{
-					heading: () => <span data-custom-heading>HEADING_MARKER</span>,
-				}}
-			/>,
-		);
-		expect(html).toContain("HEADING_MARKER");
-		expect(html).not.toContain("Section title");
-	});
-
-	it("uses link renderer override", () => {
-		const html = shell(
-			<MarkdownViewer
-				content="[Example](https://example.com)"
-				renderers={{
-					link: () => <span data-custom-link>LINK_MARKER</span>,
-				}}
-			/>,
-		);
-		expect(html).toContain("LINK_MARKER");
-		expect(html).not.toContain("Example");
-		expect(html).not.toContain("https://example.com");
-	});
-
-	it("uses table renderer override without the scroll wrapper", () => {
-		const html = shell(
-			<MarkdownViewer
-				content={`| A | B |
-| - | - |
-| 1 | 2 |`}
-				renderers={{
-					table: () => <span data-custom-table>TABLE_MARKER</span>,
-				}}
-			/>,
-		);
-		expect(html).toContain("TABLE_MARKER");
-		expect(html).not.toContain("<table");
-		expect(html).not.toContain("mantine-TableScrollContainer-scrollContainer");
-	});
-
-	it("uses image renderer override", () => {
-		const html = shell(
-			<MarkdownViewer
-				content='![Alt text](https://example.com/image.png "Title")'
-				renderers={{
-					image: () => <span data-custom-image>IMAGE_MARKER</span>,
-				}}
-			/>,
-		);
-		expect(html).toContain("IMAGE_MARKER");
-		expect(html).not.toContain("Alt text");
-		expect(html).not.toContain("https://example.com/image.png");
-	});
-});

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

@@ -1,69 +0,0 @@
-import { MantineProvider, v8CssVariablesResolver } from "@mantine/core";
-import { MarkdownViewer } from "@src/primitives/MarkdownViewer";
-import { MANTINE_THEME } from "@src/theme/mantine";
-import type { ReactElement } from "react";
-import { renderToString } from "react-dom/server";
-import { beforeAll, describe, expect, it } from "vitest";
-
-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,
-			}),
-		});
-	}
-});
-
-function shell(node: ReactElement): string {
-	return renderToString(
-		<MantineProvider
-			theme={MANTINE_THEME}
-			cssVariablesResolver={v8CssVariablesResolver}
-			forceColorScheme="dark"
-		>
-			{node}
-		</MantineProvider>,
-	);
-}
-
-describe("MarkdownViewer / runnable code", () => {
-	it("renders RunnableCodeBlock when fenced info includes runnable", () => {
-		const html = shell(
-			<MarkdownViewer content={'```surql runnable="SELECT 1"\nRETURN 1;\n```'} />,
-		);
-		expect(html).toContain("Run Query");
-	});
-
-	it("renders RunnableCodeBlock for a loose runnable flag with no value", () => {
-		const html = shell(<MarkdownViewer content={"```surql runnable\nRETURN 1;\n```"} />);
-		expect(html).toContain("Run Query");
-	});
-
-	it("does not render RunnableCodeBlock for plain fenced code", () => {
-		const html = shell(<MarkdownViewer content={"```surql\nRETURN 1;\n```"} />);
-		expect(html).not.toContain("Run Query");
-	});
-
-	it("preserves runnable attribute casing through the render pipeline", () => {
-		const html = shell(
-			<MarkdownViewer
-				content={'```surql runnable="SELECT 1"\nRETURN 1;\n```'}
-				codeRenderers={{}}
-				renderers={{
-					code: ({ runnable }) => <span data-runnable={runnable}>{runnable}</span>,
-				}}
-			/>,
-		);
-		expect(html).toContain("SELECT 1");
-		expect(html).not.toContain("select 1");
-	});
-});

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

@@ -1,94 +0,0 @@
-import { MantineProvider, v8CssVariablesResolver } from "@mantine/core";
-import { MarkdownViewer } from "@src/primitives/MarkdownViewer";
-import { MANTINE_THEME } from "@src/theme/mantine";
-import type { ReactElement } from "react";
-import { renderToString } from "react-dom/server";
-import { beforeAll, describe, expect, it } from "vitest";
-
-import { md, mdViewer } from "../../_setup/markdown-classes";
-
-// Mantine's `useComputedColorScheme` reaches for `window.matchMedia` even
-// during a `renderToString` pass; stub it so the SSR test can exercise the
-// full viewer pipeline (including `MarkdownCodeLines`).
-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,
-			}),
-		});
-	}
-});
-
-function shell(node: ReactElement): string {
-	return renderToString(
-		<MantineProvider
-			theme={MANTINE_THEME}
-			cssVariablesResolver={v8CssVariablesResolver}
-			forceColorScheme="dark"
-		>
-			{node}
-		</MantineProvider>,
-	);
-}
-
-describe("MarkdownViewer / SSR", () => {
-	it("renders to a static HTML string with semantic markdown structure", () => {
-		const html = shell(
-			<MarkdownViewer
-				content={`# Title
-
-Body with **bold**, *italic* and [a link](https://surrealdb.com).
-
-- One
-- Two
-
-1. Alpha
-2. Beta
-
-\`\`\`ts
-return true;
-\`\`\`
-`}
-			/>,
-		);
-
-		// Wrapper.
-		expect(html).toContain(mdViewer.viewerRoot);
-
-		// Semantic heading.
-		expect(html).toContain(md.h1);
-		expect(html).toMatch(/id="title"/);
-		expect(html).toContain("Title");
-
-		// Paragraph and inline marks (paragraph uses bare <p> without module class).
-		expect(html).toMatch(/<p[^>]*>Body with/);
-		expect(html).toContain(md.strong);
-		expect(html).toContain("bold</strong>");
-		expect(html).toContain(md.emphasis);
-		expect(html).toContain(md.link);
-
-		// Semantic lists.
-		expect(html).toContain(md.list);
-		expect(html).toContain("<li");
-
-		// Semantic code block.
-		expect(html).toContain(md.codeBlock);
-		expect(html).toContain("<code");
-		expect(html).toContain("</code></pre>");
-
-		// Raw markdown markers must not leak through.
-		expect(html).not.toContain("**bold**");
-		expect(html).not.toContain("*italic*");
-		expect(html).not.toContain("## ");
-		expect(html).not.toMatch(/<p[^>]*>#/);
-	});
-});

package/tests/unit/MarkdownViewer/syntax-highlighting.test.tsx

@@ -1,74 +0,0 @@
-import { MantineProvider, v8CssVariablesResolver } from "@mantine/core";
-import { MarkdownViewer } from "@src/primitives/MarkdownViewer";
-import { MANTINE_THEME } from "@src/theme/mantine";
-import type { ReactElement } from "react";
-import { renderToString } from "react-dom/server";
-import { beforeAll, describe, expect, it } from "vitest";
-
-import { md } from "../../_setup/markdown-classes";
-
-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,
-			}),
-		});
-	}
-});
-
-function shell(node: ReactElement): string {
-	return renderToString(
-		<MantineProvider
-			theme={MANTINE_THEME}
-			cssVariablesResolver={v8CssVariablesResolver}
-			forceColorScheme="dark"
-		>
-			{node}
-		</MantineProvider>,
-	);
-}
-
-describe("MarkdownViewer / syntax highlighting", () => {
-	it("highlights bash and sh fenced blocks", () => {
-		const html = shell(
-			<MarkdownViewer
-				content={`\`\`\`bash
-cd project
-\`\`\`
-
-\`\`\`sh
-export FOO=bar
-\`\`\`
-`}
-			/>,
-		);
-
-		expect(html).toContain(md.codeBlock);
-		expect(html).toMatch(/style="color:#ffd000"/);
-	});
-
-	it("highlights json fenced blocks", () => {
-		const html = shell(
-			<MarkdownViewer
-				content={`\`\`\`json
-{
-  "name": "example"
-}
-\`\`\`
-`}
-			/>,
-		);
-
-		expect(html).toContain(md.codeBlock);
-		expect(html).toMatch(/style="color:#00ff6e"/);
-	});
-});

package/tests/unit/MarkdownViewer/tabs-fenced-code.test.tsx

@@ -1,196 +0,0 @@
-import { MantineProvider, v8CssVariablesResolver } from "@mantine/core";
-import { MarkdownViewer } from "@src/primitives/MarkdownViewer";
-import { MANTINE_THEME } from "@src/theme/mantine";
-import type { ReactElement } from "react";
-import { renderToString } from "react-dom/server";
-import { beforeAll, describe, expect, it } from "vitest";
-
-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,
-			}),
-		});
-	}
-});
-
-function shell(node: ReactElement): string {
-	return renderToString(
-		<MantineProvider
-			theme={MANTINE_THEME}
-			cssVariablesResolver={v8CssVariablesResolver}
-			forceColorScheme="dark"
-		>
-			{node}
-		</MantineProvider>,
-	);
-}
-
-function labels(html: string): string[] {
-	return [...html.matchAll(/mantine-Tabs-tabLabel">([^<]*)</g)].map((m) => m[1] ?? "");
-}
-
-// Tab items whose fenced code sits directly under the tag (no blank-line
-// separators) and contains an interior blank line.
-const FLUSH = `<Tabs groupId="package-manager">
-<TabItem value="esm" label="ESM" default>
-\`\`\`ts
-import { Surreal } from 'surrealdb';
-
-// Create a new Surreal instance
-const db = new Surreal();
-\`\`\`
-</TabItem>
-<TabItem value="cjs" label="CommonJS">
-\`\`\`ts
-const { Surreal } = require('surrealdb');
-
-// Create a new Surreal instance
-const db = new Surreal();
-\`\`\`
-</TabItem>
-</Tabs>`;
-
-// Same content, but the tab items are indented under <Tabs> with tabs.
-const INDENTED = `<Tabs groupId="package-manager">
-\t<TabItem value="esm" label="ESM" default>
-\t\`\`\`ts
-\timport { Surreal } from 'surrealdb';
-
-\t// Create a new Surreal instance
-\tconst db = new Surreal();
-\t\`\`\`
-\t</TabItem>
-\t<TabItem value="cjs" label="CommonJS">
-\t\`\`\`ts
-\tconst { Surreal } = require('surrealdb');
-
-\t// Create a new Surreal instance
-\tconst db = new Surreal();
-\t\`\`\`
-\t</TabItem>
-</Tabs>`;
-
-describe("MarkdownViewer / Tabs with fenced code", () => {
-	for (const [name, content] of [
-		["flush", FLUSH],
-		["indented", INDENTED],
-	] as const) {
-		it(`${name}: renders both tabs, both labels, and highlighted code`, () => {
-			const html = shell(<MarkdownViewer content={content} />);
-			const text = html.replace(/<[^>]+>/g, "");
-
-			// Both tab buttons are present, in order.
-			expect(labels(html)).toEqual(["ESM", "CommonJS"]);
-			// The fenced code is rendered as a real (highlighted) code block
-			// whose tokens survive in the markup.
-			expect(html).toContain('data-language="ts"');
-			expect(html).toContain("Surreal");
-			expect(html).toContain("surrealdb");
-			// Tags and fences are not leaked as visible plain text.
-			expect(text).not.toContain("</TabItem>");
-			expect(text).not.toContain("<TabItem");
-			expect(text).not.toContain("```");
-		});
-	}
-});
-
-// A tab item whose content mixes prose paragraphs, blank lines, and a fenced
-// code block — all indented under the tags. `bl` builds the blank separator
-// lines, optionally carrying the structural tab (some editors keep it).
-function mixedItem(bl: "" | "\t"): string {
-	return [
-		"<Tabs>",
-		'\t<TabItem value="esm" label="ESM">',
-		bl,
-		"\tTest",
-		bl,
-		"\t```ts",
-		"\timport { Surreal } from 'surrealdb';",
-		bl,
-		"\t// Create a new Surreal instance",
-		"\tconst db = new Surreal();",
-		"\t```",
-		bl,
-		"\ttest2",
-		bl,
-		"\t</TabItem>",
-		"</Tabs>",
-	].join("\n");
-}
-
-// Mirrors docs' in-memory.mdx: an indented tab item whose runaway fence used to
-// swallow the following flush <Tabs> block whole.
-const TWO_TAB_BLOCKS = [
-	"<Tabs>",
-	'\t<TabItem value="esm" label="ESM">',
-	"",
-	"\tTest",
-	"",
-	"\t```ts",
-	"\timport { Surreal } from 'surrealdb';",
-	"\t```",
-	"",
-	"\t</TabItem>",
-	"</Tabs>",
-	"",
-	"<Tabs>",
-	"",
-	'<TabItem label="SurrealDB 3.x">',
-	"",
-	"```bash",
-	"surreal start mem",
-	"```",
-	"",
-	"</TabItem>",
-	"</Tabs>",
-].join("\n");
-
-describe("MarkdownViewer / two adjacent Tabs blocks", () => {
-	it("renders both blocks independently without one swallowing the next", () => {
-		const html = shell(<MarkdownViewer content={TWO_TAB_BLOCKS} />);
-		const text = html.replace(/<[^>]+>/g, " ").replace(/\s+/g, " ");
-
-		// Both tab blocks produced their own labelled tab.
-		expect(labels(html)).toEqual(["ESM", "SurrealDB 3.x"]);
-		// Content from both blocks is present…
-		expect(html).toContain("surrealdb");
-		expect(text).toContain("surreal start mem");
-		// …and nothing leaked as raw tags or fences.
-		expect(text).not.toContain("TabItem");
-		expect(text).not.toContain("Tabs");
-		expect(text).not.toContain("```");
-	});
-});
-
-describe("MarkdownViewer / Tabs with mixed indented content", () => {
-	for (const blank of ["", "\t"] as const) {
-		const label = blank === "" ? "empty blank lines" : "tab-filled blank lines";
-		it(`renders prose + code + prose inside an indented tab item (${label})`, () => {
-			const html = shell(<MarkdownViewer content={mixedItem(blank)} />);
-			const text = html.replace(/<[^>]+>/g, " ").replace(/\s+/g, " ");
-
-			expect(labels(html)).toEqual(["ESM"]);
-			// Prose before and after the code block renders as prose.
-			expect(text).toContain("Test");
-			expect(text).toContain("test2");
-			// The code renders as a highlighted code block, not leaked prose.
-			expect(html).toContain('data-language="ts"');
-			expect(html).toContain("surrealdb");
-			// Nothing is swallowed: tags and fences never surface as text.
-			expect(text).not.toContain("TabItem");
-			expect(text).not.toContain("```");
-			// The code content must not appear as an indented (tab-prefixed) blob.
-			expect(text).not.toContain("\timport");
-		});
-	}
-});

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

@@ -1,116 +0,0 @@
-import { MantineProvider, v8CssVariablesResolver } from "@mantine/core";
-import type { MarkdownComponents } from "@src/lib/markdown";
-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,
-			}),
-		});
-	}
-});
-
-function shell(node: ReactElement): string {
-	return renderToString(
-		<MantineProvider
-			theme={MANTINE_THEME}
-			cssVariablesResolver={v8CssVariablesResolver}
-			forceColorScheme="dark"
-		>
-			{node}
-		</MantineProvider>,
-	);
-}
-
-const TABS_MARKDOWN = `<Tabs>
-<TabItem label="JavaScript">
-
-\`\`\`javascript
-const x = 42;
-\`\`\`
-
-</TabItem>
-<TabItem label="Rust">
-
-\`\`\`rust
-fn main() {}
-\`\`\`
-
-</TabItem>
-</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"');
-	});
-});

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

@@ -1,21 +0,0 @@
-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);
-	});
-});