@bug-on/md3-react 2.0.3 → 3.0.0

package/src/ui/code-block.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import { createElement, useCallback, useEffect, useState } from "react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+import { Icon } from "./icon";
+import { ScrollArea } from "./scroll-area";
+
+const COPY_RESET_DELAY = 2000;
+
+export interface CodeBlockProps {
+	/** Raw code string to display and copy. */
+	code: string;
+	/** Language label in the header (presentational only). @default "React" */
+	language?: string;
+	/** Additional CSS classes for the outer wrapper. */
+	className?: string;
+	/**
+	 * Pre-highlighted HTML from Shiki SSR.
+	 * Use `codeToHtml` with `themes: { light, dark }` for dual-theme support.
+	 */
+	html?: string;
+}
+
+// ─── Sub-components ───────────────────────────────────────────────────────────
+
+function CopyButton({
+	copied,
+	onCopy,
+}: {
+	copied: boolean;
+	onCopy: () => void;
+}) {
+	return (
+		<Button
+			type="button"
+			onClick={onCopy}
+			title="Copy code"
+			aria-label={copied ? "Code copied" : "Copy code"}
+			colorStyle="text"
+			className="h-8 px-2 gap-1.5"
+		>
+			{copied ? (
+				<>
+					<Icon
+						name="check"
+						size={14}
+						className="text-m3-primary"
+						aria-hidden="true"
+					/>
+					<span className="text-[10px] font-bold uppercase tracking-wider text-m3-primary">
+						Copied!
+					</span>
+				</>
+			) : (
+				<>
+					<Icon
+						name="content_copy"
+						size={14}
+						className="text-m3-on-surface-variant"
+						aria-hidden="true"
+					/>
+					<span className="text-[10px] font-bold uppercase tracking-wider text-m3-on-surface-variant">
+						Copy
+					</span>
+				</>
+			)}
+		</Button>
+	);
+}
+
+/** Mappings for HTML attributes to React props */
+const ATTR_MAP: Record<string, string> = {
+	class: "className",
+	tabindex: "tabIndex",
+	readonly: "readOnly",
+	maxlength: "maxLength",
+	autocomplete: "autoComplete",
+	autofocus: "autoFocus",
+	contenteditable: "contentEditable",
+	spellcheck: "spellCheck",
+};
+
+function parseStyle(styleStr: string): React.CSSProperties {
+	const styleObj: Record<string, string> = {};
+	for (const s of styleStr.split(";")) {
+		const part = s.trim();
+		if (!part) continue;
+		const colonIndex = part.indexOf(":");
+		if (colonIndex === -1) continue;
+
+		const k = part.slice(0, colonIndex).trim();
+		const v = part.slice(colonIndex + 1).trim();
+
+		if (k.startsWith("--")) {
+			// CSS variables must be passed as-is
+			styleObj[k] = v;
+		} else {
+			// Standard properties should be camelCased for React
+			const key = k.replace(/-./g, (x) => x[1].toUpperCase());
+			styleObj[key] = v;
+		}
+	}
+	return styleObj as React.CSSProperties;
+}
+
+function mapDomToReact(node: Node, key: string | number): React.ReactNode {
+	if (node.nodeType === Node.TEXT_NODE) {
+		return node.textContent;
+	}
+	if (node.nodeType === Node.ELEMENT_NODE) {
+		const el = node as Element;
+		const tagName = el.tagName.toLowerCase();
+		const props: Record<string, unknown> = { key };
+
+		for (const attr of Array.from(el.attributes)) {
+			const propName = ATTR_MAP[attr.name] || attr.name;
+			if (propName === "style") {
+				props.style = parseStyle(attr.value);
+			} else {
+				props[propName] = attr.value;
+			}
+		}
+
+		return createElement(
+			tagName,
+			props,
+			Array.from(el.childNodes).map((child, i) => mapDomToReact(child, i)),
+		);
+	}
+	return null;
+}
+
+function CodeContent({ html, code }: { html?: string; code: string }) {
+	const [parsedContent, setParsedContent] = useState<React.ReactNode>(null);
+
+	useEffect(() => {
+		if (html) {
+			const parser = new DOMParser();
+			const doc = parser.parseFromString(html, "text/html");
+			const content = Array.from(doc.body.childNodes).map((node, i) =>
+				mapDomToReact(node, i),
+			);
+			setParsedContent(content);
+		}
+	}, [html]);
+
+	if (html) {
+		return (
+			<div
+				className={cn(
+					"text-sm font-mono",
+					"[&>pre]:bg-transparent! [&>pre]:p-0! [&>pre]:m-0!",
+				)}
+			>
+				{parsedContent}
+			</div>
+		);
+	}
+
+	return (
+		<pre className="text-sm font-mono text-m3-on-surface whitespace-pre">
+			{code}
+		</pre>
+	);
+}
+
+// ─── CodeBlock ────────────────────────────────────────────────────────────────
+
+export function CodeBlock({
+	code,
+	language = "React",
+	className,
+	html,
+}: CodeBlockProps) {
+	const [copied, setCopied] = useState(false);
+
+	const handleCopy = useCallback(async () => {
+		try {
+			await navigator.clipboard.writeText(code);
+			setCopied(true);
+			setTimeout(() => setCopied(false), COPY_RESET_DELAY);
+		} catch {
+			// Clipboard API unavailable — fail silently
+		}
+	}, [code]);
+
+	return (
+		<div
+			className={cn(
+				"rounded-m3-lg overflow-hidden max-w-full",
+				"bg-m3-surface-container-lowest border border-m3-outline-variant/60",
+				className,
+			)}
+		>
+			<div
+				className={cn(
+					"px-4 py-2 flex justify-between items-center",
+					"bg-m3-surface-container-low border-b border-m3-outline-variant/60",
+				)}
+			>
+				<span className="text-xs font-mono text-m3-on-surface-variant">
+					{language}
+				</span>
+				<CopyButton copied={copied} onCopy={handleCopy} />
+			</div>
+
+			<ScrollArea
+				type="hover"
+				orientation="both"
+				className="max-h-120 flex-col w-full min-w-0"
+			>
+				<div className="p-4 min-w-0 w-full">
+					<CodeContent html={html} code={code} />
+				</div>
+			</ScrollArea>
+		</div>
+	);
+}

package/src/ui/dialog.test.tsx

@@ -0,0 +1,300 @@
+"use client";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import * as React from "react";
+import { describe, expect, it, vi } from "vitest";
+import {
+	Dialog,
+	DialogBody,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogFullScreenContent,
+	DialogIcon,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+	DialogTrigger,
+} from "./dialog";
+
+// Helper components for testing
+const TestIcon = () => (
+	<svg data-testid="test-icon" aria-hidden="true" viewBox="0 0 24 24" />
+);
+
+interface ControlledDialogWrapperProps {
+	defaultOpen?: boolean;
+	onOpenChangeSpy?: (open: boolean) => void;
+}
+
+const ControlledDialogWrapper = ({
+	defaultOpen = false,
+	onOpenChangeSpy,
+}: ControlledDialogWrapperProps) => {
+	const [open, setOpen] = React.useState(defaultOpen);
+	return (
+		<Dialog
+			open={open}
+			onOpenChange={(v) => {
+				setOpen(v);
+				onOpenChangeSpy?.(v);
+			}}
+		>
+			<DialogTrigger data-testid="trigger">Open</DialogTrigger>
+			<DialogPortal open={open}>
+				<DialogOverlay />
+				<DialogContent aria-describedby={undefined}>
+					<DialogTitle>Title</DialogTitle>
+				</DialogContent>
+			</DialogPortal>
+		</Dialog>
+	);
+};
+
+describe("Dialog", () => {
+	it("renders trigger button", () => {
+		render(
+			<Dialog>
+				<DialogTrigger data-testid="trigger">Open</DialogTrigger>
+			</Dialog>,
+		);
+		const trigger = screen.getByTestId("trigger");
+		expect(trigger).toBeInTheDocument();
+		expect(trigger).toHaveTextContent("Open");
+	});
+
+	it("opens dialog on trigger click", async () => {
+		const user = userEvent.setup();
+		render(<ControlledDialogWrapper />);
+
+		expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+
+		await user.click(screen.getByTestId("trigger"));
+
+		expect(screen.getByRole("dialog")).toBeInTheDocument();
+	});
+
+	it("closes dialog on close button click", async () => {
+		const user = userEvent.setup();
+		const handleOpenChange = vi.fn();
+		render(
+			<ControlledDialogWrapper
+				defaultOpen={true}
+				onOpenChangeSpy={handleOpenChange}
+			/>,
+		);
+
+		expect(screen.getByRole("dialog")).toBeInTheDocument();
+
+		const closeBtn = screen.getByLabelText("Close");
+		await user.click(closeBtn);
+
+		expect(handleOpenChange).toHaveBeenCalledWith(false);
+	});
+
+	it("renders accessible title with role=heading", () => {
+		render(
+			<Dialog open={true}>
+				<DialogPortal open={true}>
+					<DialogContent aria-describedby={undefined}>
+						<DialogTitle>Dialog Headline</DialogTitle>
+					</DialogContent>
+				</DialogPortal>
+			</Dialog>,
+		);
+		const title = screen.getByRole("heading", { name: "Dialog Headline" });
+		expect(title).toBeInTheDocument();
+	});
+
+	it("renders accessible description", () => {
+		render(
+			<Dialog open={true}>
+				<DialogPortal open={true}>
+					<DialogContent>
+						<DialogTitle>Title</DialogTitle>
+						<DialogDescription>Accessible description info.</DialogDescription>
+					</DialogContent>
+				</DialogPortal>
+			</Dialog>,
+		);
+		expect(
+			screen.getByText("Accessible description info."),
+		).toBeInTheDocument();
+	});
+
+	it("hides close button when hideCloseButton=true", () => {
+		render(
+			<Dialog open={true}>
+				<DialogPortal open={true}>
+					<DialogContent hideCloseButton aria-describedby={undefined}>
+						<DialogTitle>Title</DialogTitle>
+					</DialogContent>
+				</DialogPortal>
+			</Dialog>,
+		);
+		expect(screen.queryByLabelText("Close")).not.toBeInTheDocument();
+	});
+
+	it("calls onOpenChange when closed via Escape", async () => {
+		const handleOpenChange = vi.fn();
+		render(
+			<ControlledDialogWrapper
+				defaultOpen={true}
+				onOpenChangeSpy={handleOpenChange}
+			/>,
+		);
+
+		fireEvent.keyDown(document, { key: "Escape" });
+		expect(handleOpenChange).toHaveBeenCalledWith(false);
+	});
+
+	it("renders DialogIcon slot", () => {
+		render(
+			<Dialog open={true}>
+				<DialogPortal open={true}>
+					<DialogContent aria-describedby={undefined}>
+						<DialogIcon>
+							<TestIcon />
+						</DialogIcon>
+						<DialogTitle>Title</DialogTitle>
+					</DialogContent>
+				</DialogPortal>
+			</Dialog>,
+		);
+		const icon = screen.getByTestId("test-icon");
+		expect(icon).toBeInTheDocument();
+		const iconWrapper = icon.parentElement;
+		expect(iconWrapper).toHaveAttribute("aria-hidden", "true");
+	});
+
+	it("renders DialogBody with overflow-y-auto", () => {
+		render(
+			<Dialog open={true}>
+				<DialogPortal open={true}>
+					<DialogContent aria-describedby={undefined}>
+						<DialogTitle>Title</DialogTitle>
+						<DialogBody data-testid="body">Content area</DialogBody>
+					</DialogContent>
+				</DialogPortal>
+			</Dialog>,
+		);
+		const body = screen.getByTestId("body");
+		expect(body).toBeInTheDocument();
+		// DialogBody is a flex container; ScrollArea inside handles overflow
+		expect(body.className).toContain("flex");
+	});
+
+	it("renders DialogFooter with end-aligned buttons", () => {
+		render(
+			<Dialog open={true}>
+				<DialogPortal open={true}>
+					<DialogContent aria-describedby={undefined}>
+						<DialogTitle>Title</DialogTitle>
+						<DialogFooter data-testid="footer">
+							<button type="button">Action</button>
+						</DialogFooter>
+					</DialogContent>
+				</DialogPortal>
+			</Dialog>,
+		);
+		const footer = screen.getByTestId("footer");
+		expect(footer).toBeInTheDocument();
+		expect(footer.className).toContain("justify-end");
+	});
+});
+
+describe("DialogFullScreenContent", () => {
+	it("renders full-screen dialog covering viewport", () => {
+		render(
+			<Dialog open={true}>
+				<DialogPortal open={true}>
+					<DialogFullScreenContent aria-describedby={undefined}>
+						<p>Full screen body</p>
+					</DialogFullScreenContent>
+				</DialogPortal>
+			</Dialog>,
+		);
+		const dialog = screen.getByRole("dialog");
+		expect(dialog).toBeInTheDocument();
+		expect(dialog.className).toContain("fixed inset-0 z-50 w-full h-full");
+	});
+
+	it("renders title in top app bar", () => {
+		render(
+			<Dialog open={true}>
+				<DialogPortal open={true}>
+					<DialogFullScreenContent
+						title="My Form Title"
+						aria-describedby={undefined}
+					>
+						<p>Full screen body</p>
+					</DialogFullScreenContent>
+				</DialogPortal>
+			</Dialog>,
+		);
+		expect(screen.getByText("My Form Title")).toBeInTheDocument();
+	});
+
+	it("renders action button in top bar when actionLabel provided", () => {
+		render(
+			<Dialog open={true}>
+				<DialogPortal open={true}>
+					<DialogFullScreenContent
+						title="Title"
+						actionLabel="Save Form"
+						onAction={vi.fn()}
+						aria-describedby={undefined}
+					>
+						<p>Full screen body</p>
+					</DialogFullScreenContent>
+				</DialogPortal>
+			</Dialog>,
+		);
+		const actionBtn = screen.getByRole("button", { name: "Save Form" });
+		expect(actionBtn).toBeInTheDocument();
+	});
+
+	it("calls onAction callback when action button clicked", async () => {
+		const user = userEvent.setup();
+		const handleAction = vi.fn();
+		render(
+			<Dialog open={true}>
+				<DialogPortal open={true}>
+					<DialogFullScreenContent
+						title="Title"
+						actionLabel="Save Data"
+						onAction={handleAction}
+						aria-describedby={undefined}
+					>
+						<p>Full screen body</p>
+					</DialogFullScreenContent>
+				</DialogPortal>
+			</Dialog>,
+		);
+
+		const actionBtn = screen.getByRole("button", { name: "Save Data" });
+		await user.click(actionBtn);
+		expect(handleAction).toHaveBeenCalledTimes(1);
+	});
+
+	it("renders divider when showDivider=true", () => {
+		render(
+			<Dialog open={true}>
+				<DialogPortal open={true}>
+					<DialogFullScreenContent
+						title="Title"
+						showDivider
+						aria-describedby={undefined}
+					>
+						<p>Full screen body</p>
+					</DialogFullScreenContent>
+				</DialogPortal>
+			</Dialog>,
+		);
+
+		const divider = document.querySelector("hr");
+		expect(divider).toBeInTheDocument();
+		expect(divider?.className).toContain("border-m3-outline-variant");
+	});
+});