@techstream/quark-create-app 1.8.0 → 1.10.0

package/templates/ui/src/button.test.js

@@ -6,18 +6,47 @@ test("Button - component exports correctly", () => {
 	assert(typeof Button === "function", "Button should be a function");
 });
 
-test("Button - component accepts props", () => {
-	// Test that component can be called with props
-	const result = Button({ variant: "primary", className: "custom" });
+test("Button - renders with default props", () => {
+	const result = Button({});
 	assert.ok(result, "Component should return an element");
 });
 
 test("Button - supports primary variant", () => {
 	const result = Button({ variant: "primary" });
-	assert.ok(result, "Primary variant should be supported");
+	assert.ok(result);
 });
 
 test("Button - supports secondary variant", () => {
 	const result = Button({ variant: "secondary" });
-	assert.ok(result, "Secondary variant should be supported");
+	assert.ok(result);
+});
+
+test("Button - supports danger variant", () => {
+	const result = Button({ variant: "danger" });
+	assert.ok(result);
+});
+
+test("Button - supports ghost variant", () => {
+	const result = Button({ variant: "ghost" });
+	assert.ok(result);
+});
+
+test("Button - supports sm size", () => {
+	const result = Button({ size: "sm" });
+	assert.ok(result);
+});
+
+test("Button - supports md size", () => {
+	const result = Button({ size: "md" });
+	assert.ok(result);
+});
+
+test("Button - supports lg size", () => {
+	const result = Button({ size: "lg" });
+	assert.ok(result);
+});
+
+test("Button - accepts className override", () => {
+	const result = Button({ className: "custom-class" });
+	assert.ok(result);
 });

package/templates/ui/src/card.js

@@ -0,0 +1,58 @@
+import React from "react";
+
+const THEMES = {
+	light: {
+		card: "rounded border border-gray-200 bg-white/95 shadow-sm transition-shadow duration-200 hover:shadow-md",
+		header: "flex flex-col space-y-1.5 p-6",
+		title: "text-lg font-semibold leading-none tracking-tight text-gray-900",
+		content: "p-6 pt-0",
+		footer: "flex items-center p-6 pt-0",
+	},
+	dark: {
+		card: "rounded border border-[#1e2535] bg-[#0d1117] transition-all duration-200 hover:border-[#377dff]/30",
+		header: "flex flex-col space-y-1.5 p-6",
+		title: "text-lg font-semibold leading-none tracking-tight text-[#e0e0e0]",
+		content: "p-6 pt-0",
+		footer: "flex items-center p-6 pt-0",
+	},
+};
+
+export function Card({ theme = "light", className = "", ...props }) {
+	const t = THEMES[theme] ?? THEMES.light;
+	return React.createElement("div", {
+		className: `${t.card} ${className}`.trim(),
+		...props,
+	});
+}
+
+export function CardHeader({ theme = "light", className = "", ...props }) {
+	const t = THEMES[theme] ?? THEMES.light;
+	return React.createElement("div", {
+		className: `${t.header} ${className}`.trim(),
+		...props,
+	});
+}
+
+export function CardTitle({ theme = "light", className = "", ...props }) {
+	const t = THEMES[theme] ?? THEMES.light;
+	return React.createElement("h3", {
+		className: `${t.title} ${className}`.trim(),
+		...props,
+	});
+}
+
+export function CardContent({ theme = "light", className = "", ...props }) {
+	const t = THEMES[theme] ?? THEMES.light;
+	return React.createElement("div", {
+		className: `${t.content} ${className}`.trim(),
+		...props,
+	});
+}
+
+export function CardFooter({ theme = "light", className = "", ...props }) {
+	const t = THEMES[theme] ?? THEMES.light;
+	return React.createElement("div", {
+		className: `${t.footer} ${className}`.trim(),
+		...props,
+	});
+}

package/templates/ui/src/card.test.js

@@ -0,0 +1,59 @@
+import assert from "node:assert";
+import { test } from "node:test";
+import {
+	Card,
+	CardContent,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "./card.js";
+
+test("Card - exports correctly", () => {
+	assert(typeof Card === "function");
+});
+
+test("CardHeader - exports correctly", () => {
+	assert(typeof CardHeader === "function");
+});
+
+test("CardTitle - exports correctly", () => {
+	assert(typeof CardTitle === "function");
+});
+
+test("CardContent - exports correctly", () => {
+	assert(typeof CardContent === "function");
+});
+
+test("CardFooter - exports correctly", () => {
+	assert(typeof CardFooter === "function");
+});
+
+test("Card - renders with default props", () => {
+	const result = Card({});
+	assert.ok(result);
+});
+
+test("CardHeader - renders with default props", () => {
+	const result = CardHeader({});
+	assert.ok(result);
+});
+
+test("CardTitle - renders with default props", () => {
+	const result = CardTitle({});
+	assert.ok(result);
+});
+
+test("CardContent - renders with default props", () => {
+	const result = CardContent({});
+	assert.ok(result);
+});
+
+test("CardFooter - renders with default props", () => {
+	const result = CardFooter({});
+	assert.ok(result);
+});
+
+test("Card - accepts className override", () => {
+	const result = Card({ className: "custom" });
+	assert.ok(result);
+});

package/templates/ui/src/checkbox.js

@@ -0,0 +1,35 @@
+import React from "react";
+
+const THEMES = {
+	light: {
+		input:
+			"h-4 w-4 rounded border-gray-300 text-blue-600 shadow-sm transition-colors cursor-pointer focus-visible:ring-2 focus-visible:ring-blue-500/40 disabled:cursor-not-allowed disabled:opacity-60",
+		label: "text-sm text-gray-700 select-none",
+	},
+	dark: {
+		input:
+			"h-4 w-4 rounded border-[#1e2535] bg-[#090d14] accent-[#377dff] cursor-pointer focus-visible:ring-2 focus-visible:ring-[#377dff]/40 disabled:cursor-not-allowed disabled:opacity-40",
+		label: "text-sm text-[#6b7a99] font-mono select-none",
+	},
+};
+
+export function Checkbox({
+	id,
+	label,
+	theme = "light",
+	className = "",
+	...props
+}) {
+	const t = THEMES[theme] ?? THEMES.light;
+	return React.createElement(
+		"div",
+		{ className: "flex items-center gap-2" },
+		React.createElement("input", {
+			id,
+			type: "checkbox",
+			className: `${t.input} ${className}`.trim(),
+			...props,
+		}),
+		React.createElement("label", { htmlFor: id, className: t.label }, label),
+	);
+}

package/templates/ui/src/checkbox.test.js

@@ -0,0 +1,35 @@
+import assert from "node:assert";
+import { test } from "node:test";
+import { Checkbox } from "./checkbox.js";
+
+test("Checkbox - exports correctly", () => {
+	assert(typeof Checkbox === "function");
+});
+
+test("Checkbox - renders with default props", () => {
+	const result = Checkbox({ id: "check1", label: "Accept terms" });
+	assert.ok(result);
+});
+
+test("Checkbox - accepts className override", () => {
+	const result = Checkbox({
+		id: "check2",
+		label: "Option",
+		className: "custom",
+	});
+	assert.ok(result);
+});
+
+test("Checkbox - accepts checked prop", () => {
+	const result = Checkbox({
+		id: "check3",
+		label: "Checked",
+		defaultChecked: true,
+	});
+	assert.ok(result);
+});
+
+test("Checkbox - accepts disabled prop", () => {
+	const result = Checkbox({ id: "check4", label: "Disabled", disabled: true });
+	assert.ok(result);
+});

package/templates/ui/src/dialog.js

@@ -0,0 +1,139 @@
+"use client";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+
+/**
+ * Dialog — centered modal built on the native <dialog> element.
+ *
+ * Props:
+ *   open      (bool)    — controlled open state
+ *   onClose   (fn)      — called when the dialog should close
+ *   title     (string)  — header text
+ *   children            — dialog body content
+ *   theme     (string)  — 'light' (default) | 'dark'
+ *   className (string)  — merged onto the <dialog> element
+ *
+ * Architecture:
+ *   • ALL close paths (header ×, backdrop click, Escape, external button)
+ *     flow through the `open` prop → useEffect, which owns the single
+ *     animation + el.close() call. handleClose() just calls onClose().
+ *   • isClosingRef (ref, not state) prevents the effect from double-firing.
+ */
+
+const THEMES = {
+	light: {
+		dialog:
+			"backdrop:bg-black/50 rounded border border-gray-200 bg-white p-0 shadow-2xl w-full max-w-lg",
+		header:
+			"flex items-center justify-between border-b border-gray-200 px-5 py-4",
+		title: "text-base font-semibold text-gray-900",
+		close:
+			"flex h-8 w-8 cursor-pointer items-center justify-center rounded-sm text-lg text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-700 active:bg-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-300",
+		body: "px-5 py-4 text-gray-700",
+	},
+	dark: {
+		dialog:
+			"backdrop:bg-black/70 rounded border border-[#1e2535] bg-[#0d1117] p-0 shadow-2xl w-full max-w-lg",
+		header:
+			"flex items-center justify-between border-b border-[#1e2535] px-5 py-4",
+		title: "text-base font-semibold text-[#e0e0e0]",
+		close:
+			"flex h-8 w-8 cursor-pointer items-center justify-center rounded-sm text-lg text-[#4a4a6a] transition-colors hover:bg-[#1e2535] hover:text-[#e0e0e0] active:bg-[#1e2535] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#377dff]/40",
+		body: "px-5 py-4 text-[#6b7a99]",
+	},
+};
+
+export function Dialog({
+	open,
+	onClose,
+	title,
+	children,
+	theme = "light",
+	className = "",
+}) {
+	const ref = useRef(null);
+	const [isClosing, setIsClosing] = useState(false);
+	const isClosingRef = useRef(false);
+	const t = THEMES[theme] ?? THEMES.light;
+
+	// Single source of truth for open/close — drives both animation and native element
+	useEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+
+		if (open) {
+			if (!el.open && typeof el.showModal === "function") el.showModal();
+			isClosingRef.current = false;
+			setIsClosing(false);
+		} else {
+			// Play exit animation then close native element — regardless of who triggered close
+			if (isClosingRef.current) return; // already animating out, don't double-trigger
+			isClosingRef.current = true;
+			setIsClosing(true);
+			const t = setTimeout(() => {
+				if (el.open && typeof el.close === "function") el.close();
+				setIsClosing(false);
+				isClosingRef.current = false;
+			}, 180);
+			return () => clearTimeout(t);
+		}
+	}, [open]);
+
+	// All close-trigger sources just call onClose() — parent sets open=false,
+	// which re-runs the effect above and plays the animation.
+	const handleClose = useCallback(() => {
+		if (!isClosingRef.current) onClose?.();
+	}, [onClose]);
+
+	// Backdrop click (target is the <dialog> element itself)
+	const handleDialogClick = useCallback(
+		(e) => {
+			if (e.target === ref.current) handleClose();
+		},
+		[handleClose],
+	);
+
+	// Intercept Escape so we can animate before the native dialog closes
+	const handleCancel = useCallback(
+		(e) => {
+			e.preventDefault();
+			handleClose();
+		},
+		[handleClose],
+	);
+
+	const animStyle =
+		open || isClosing
+			? isClosing
+				? { animation: "quark-dialog-out 0.18s ease-in forwards" }
+				: { animation: "quark-dialog-in 0.2s ease-out forwards" }
+			: {};
+
+	return React.createElement(
+		"dialog",
+		{
+			ref,
+			onClick: handleDialogClick,
+			onCancel: handleCancel,
+			style: animStyle,
+			className: `${t.dialog} ${className}`.trim(),
+		},
+		// Header
+		React.createElement(
+			"div",
+			{ className: t.header },
+			React.createElement("h2", { className: t.title }, title),
+			React.createElement(
+				"button",
+				{
+					type: "button",
+					"aria-label": "Close dialog",
+					onClick: handleClose,
+					className: t.close,
+				},
+				"\u00d7",
+			),
+		),
+		// Body
+		React.createElement("div", { className: t.body }, children),
+	);
+}

package/templates/ui/src/dialog.test.js

@@ -0,0 +1,15 @@
+import assert from "node:assert";
+import { test } from "node:test";
+import { Dialog } from "./dialog.js";
+
+// Dialog uses React hooks (useRef, useEffect) and requires a React renderer to
+// render correctly. Full render tests belong in an integration test suite with
+// jsdom + react-dom. Here we verify the export contract only.
+
+test("Dialog - exports correctly", () => {
+	assert(typeof Dialog === "function");
+});
+
+test("Dialog - has expected function name", () => {
+	assert.strictEqual(Dialog.name, "Dialog");
+});

package/templates/ui/src/index.js

@@ -1 +1,17 @@
+// Server components
+export * from "./badge.js";
 export * from "./button.js";
+export * from "./card.js";
+export * from "./checkbox.js";
+// Client components ("use client")
+export * from "./dialog.js";
+export * from "./input.js";
+export * from "./label.js";
+export * from "./select.js";
+export * from "./skeleton.js";
+export * from "./table.js";
+export * from "./textarea.js";
+export * from "./theme.js";
+// Theme context
+export * from "./theme-constants.js";
+export * from "./toast.js";

package/templates/ui/src/input.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+const THEMES = {
+	light:
+		"block h-10 w-full rounded-sm border border-gray-300 bg-white px-3 text-sm text-gray-900 placeholder-gray-400 shadow-sm transition-all duration-200 hover:border-gray-400 focus-visible:border-blue-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/30 disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed",
+	dark: "block h-10 w-full rounded-sm border border-[#1e2535] bg-[#090d14] px-3 text-sm text-[#e0e0e0] placeholder-[#2d3a52] font-mono transition-all duration-200 hover:border-[#377dff]/30 focus-visible:border-[#377dff]/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#377dff]/15 disabled:opacity-30 disabled:cursor-not-allowed",
+};
+
+export function Input({ theme = "light", className = "", ...props }) {
+	const base = THEMES[theme] ?? THEMES.light;
+	return React.createElement("input", {
+		className: `${base} ${className}`.trim(),
+		...props,
+	});
+}

package/templates/ui/src/input.test.js

@@ -0,0 +1,27 @@
+import assert from "node:assert";
+import { test } from "node:test";
+import { Input } from "./input.js";
+
+test("Input - exports correctly", () => {
+	assert(typeof Input === "function");
+});
+
+test("Input - renders with default props", () => {
+	const result = Input({});
+	assert.ok(result);
+});
+
+test("Input - accepts className override", () => {
+	const result = Input({ className: "w-32", placeholder: "test" });
+	assert.ok(result);
+});
+
+test("Input - accepts type prop", () => {
+	const result = Input({ type: "email" });
+	assert.ok(result);
+});
+
+test("Input - accepts disabled prop", () => {
+	const result = Input({ disabled: true });
+	assert.ok(result);
+});

package/templates/ui/src/label.js

@@ -0,0 +1,14 @@
+import React from "react";
+
+const THEMES = {
+	light: "block text-sm font-medium text-gray-700 tracking-tight",
+	dark: "block text-sm font-medium text-[#4a4a6a] tracking-tight font-mono",
+};
+
+export function Label({ theme = "light", className = "", ...props }) {
+	const base = THEMES[theme] ?? THEMES.light;
+	return React.createElement("label", {
+		className: `${base} ${className}`.trim(),
+		...props,
+	});
+}

package/templates/ui/src/label.test.js

@@ -0,0 +1,22 @@
+import assert from "node:assert";
+import { test } from "node:test";
+import { Label } from "./label.js";
+
+test("Label - exports correctly", () => {
+	assert(typeof Label === "function");
+});
+
+test("Label - renders with default props", () => {
+	const result = Label({});
+	assert.ok(result);
+});
+
+test("Label - accepts className override", () => {
+	const result = Label({ className: "custom" });
+	assert.ok(result);
+});
+
+test("Label - accepts htmlFor prop", () => {
+	const result = Label({ htmlFor: "my-input", children: "My label" });
+	assert.ok(result);
+});

package/templates/ui/src/select.js

@@ -0,0 +1,42 @@
+import React from "react";
+
+const THEMES = {
+	light: {
+		select:
+			"block h-10 w-full appearance-none rounded-sm border border-gray-300 bg-white px-3 pr-9 text-sm text-gray-900 shadow-sm transition-all duration-200 cursor-pointer hover:border-gray-400 focus-visible:border-blue-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/30 disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed",
+		chevron:
+			"absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none",
+	},
+	dark: {
+		select:
+			"block h-10 w-full appearance-none rounded-sm border border-[#1e2535] bg-[#090d14] px-3 pr-9 text-sm text-[#e0e0e0] font-mono transition-all duration-200 cursor-pointer hover:border-[#377dff]/30 focus-visible:border-[#377dff]/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#377dff]/15 disabled:opacity-30 disabled:cursor-not-allowed",
+		chevron:
+			"absolute right-3 top-1/2 -translate-y-1/2 text-[#4a4a6a] pointer-events-none",
+	},
+};
+
+export function Select({
+	theme = "light",
+	className = "",
+	children,
+	...props
+}) {
+	const t = THEMES[theme] ?? THEMES.light;
+	return React.createElement(
+		"div",
+		{ className: "relative" },
+		React.createElement(
+			"select",
+			{ className: `${t.select} ${className}`.trim(), ...props },
+			children,
+		),
+		React.createElement(
+			"span",
+			{
+				"aria-hidden": "true",
+				className: t.chevron,
+			},
+			"\u25be",
+		),
+	);
+}

package/templates/ui/src/select.test.js

@@ -0,0 +1,27 @@
+import assert from "node:assert";
+import { test } from "node:test";
+import { Select } from "./select.js";
+
+test("Select - exports correctly", () => {
+	assert(typeof Select === "function");
+});
+
+test("Select - renders with default props", () => {
+	const result = Select({});
+	assert.ok(result);
+});
+
+test("Select - accepts className override", () => {
+	const result = Select({ className: "w-48" });
+	assert.ok(result);
+});
+
+test("Select - accepts children", () => {
+	const result = Select({ children: null });
+	assert.ok(result);
+});
+
+test("Select - accepts disabled prop", () => {
+	const result = Select({ disabled: true });
+	assert.ok(result);
+});

package/templates/ui/src/skeleton.js

@@ -0,0 +1,14 @@
+import React from "react";
+
+const THEMES = {
+	light: "animate-pulse rounded-lg bg-gray-200/80",
+	dark: "animate-pulse rounded-lg bg-[#1e2535]/70",
+};
+
+export function Skeleton({ theme = "light", className = "", ...props }) {
+	const base = THEMES[theme] ?? THEMES.light;
+	return React.createElement("div", {
+		className: `${base} ${className}`.trim(),
+		...props,
+	});
+}

package/templates/ui/src/skeleton.test.js

@@ -0,0 +1,22 @@
+import assert from "node:assert";
+import { test } from "node:test";
+import { Skeleton } from "./skeleton.js";
+
+test("Skeleton - exports correctly", () => {
+	assert(typeof Skeleton === "function");
+});
+
+test("Skeleton - renders with default props", () => {
+	const result = Skeleton({});
+	assert.ok(result);
+});
+
+test("Skeleton - accepts className for dimensions", () => {
+	const result = Skeleton({ className: "h-4 w-32" });
+	assert.ok(result);
+});
+
+test("Skeleton - accepts aria props", () => {
+	const result = Skeleton({ "aria-label": "Loading..." });
+	assert.ok(result);
+});

package/templates/ui/src/table.js

@@ -0,0 +1,75 @@
+import React from "react";
+
+const THEMES = {
+	light: {
+		wrapper: "w-full overflow-auto rounded-xl border border-gray-200 bg-white",
+		table: "w-full caption-bottom text-sm",
+		header: "border-b bg-gray-50",
+		body: "[&_tr:last-child]:border-0",
+		row: "border-b border-gray-100 transition-colors hover:bg-gray-50/80 active:bg-gray-100",
+		head: "h-11 px-3 text-left align-middle font-medium text-gray-600",
+		cell: "p-3 align-middle text-gray-700",
+	},
+	dark: {
+		wrapper:
+			"w-full overflow-auto rounded-xl border border-[#1e2535] bg-[#0d1117]",
+		table: "w-full caption-bottom text-sm",
+		header: "border-b border-[#1e2535] bg-[#090d14]",
+		body: "[&_tr:last-child]:border-0",
+		row: "border-b border-[#1e2535]/50 transition-colors hover:bg-[#1e2535]/40",
+		head: "h-11 px-3 text-left align-middle font-medium text-[#4a4a6a] font-mono text-xs uppercase tracking-widest",
+		cell: "p-3 align-middle text-[#e0e0e0] font-mono text-sm",
+	},
+};
+
+export function Table({ theme = "light", className = "", ...props }) {
+	const t = THEMES[theme] ?? THEMES.light;
+	return React.createElement(
+		"div",
+		{ className: t.wrapper },
+		React.createElement("table", {
+			className: `${t.table} ${className}`.trim(),
+			...props,
+		}),
+	);
+}
+
+export function TableHeader({ theme = "light", className = "", ...props }) {
+	const t = THEMES[theme] ?? THEMES.light;
+	return React.createElement("thead", {
+		className: `${t.header} ${className}`.trim(),
+		...props,
+	});
+}
+
+export function TableBody({ theme = "light", className = "", ...props }) {
+	const t = THEMES[theme] ?? THEMES.light;
+	return React.createElement("tbody", {
+		className: `${t.body} ${className}`.trim(),
+		...props,
+	});
+}
+
+export function TableRow({ theme = "light", className = "", ...props }) {
+	const t = THEMES[theme] ?? THEMES.light;
+	return React.createElement("tr", {
+		className: `${t.row} ${className}`.trim(),
+		...props,
+	});
+}
+
+export function TableHead({ theme = "light", className = "", ...props }) {
+	const t = THEMES[theme] ?? THEMES.light;
+	return React.createElement("th", {
+		className: `${t.head} ${className}`.trim(),
+		...props,
+	});
+}
+
+export function TableCell({ theme = "light", className = "", ...props }) {
+	const t = THEMES[theme] ?? THEMES.light;
+	return React.createElement("td", {
+		className: `${t.cell} ${className}`.trim(),
+		...props,
+	});
+}