@usequark/quark-create-app 1.23.11

package/templates/ui/src/footer.js

@@ -0,0 +1,239 @@
+import React from "react";
+
+const footerCls = "border-t border-[--footer-border] bg-[--footer-bg]";
+const containerCls = "mx-auto";
+const topGridCls =
+	"grid gap-8 sm:gap-10 md:grid-cols-2 lg:grid-cols-[minmax(0,1.45fr)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)]";
+const brandRowCls = "flex items-center gap-3";
+const markCls =
+	"flex shrink-0 items-center justify-center rounded-2xl bg-[--footer-mark-bg] font-bold text-[--footer-mark-text]";
+const brandNameCls =
+	"text-2xl font-bold tracking-tight text-[--footer-text] sm:text-3xl";
+const brandTextCls = "max-w-md text-sm leading-7 text-[--footer-text-muted]";
+const ctaCls =
+	"inline-flex w-full items-center justify-center rounded-full border border-[--footer-cta-border] font-semibold text-[--footer-mark-text] transition-colors hover:bg-[--footer-cta-hover-bg] sm:w-auto";
+const columnTitleCls = "mb-4 font-semibold text-[--footer-text-faint]";
+const columnListCls = "space-y-2.5";
+const linkCls =
+	"break-words text-[--footer-text-muted] transition-colors hover:text-[--footer-link-hover]";
+const textItemCls = "break-words text-[--footer-text-muted]";
+const bottomBarCls =
+	"mt-8 border-t border-[--footer-border] pt-5 flex flex-col gap-3 text-sm text-[--footer-text-faint] sm:mt-10 sm:pt-6 lg:flex-row lg:items-center lg:justify-between";
+const legalCls = "flex flex-wrap items-center gap-2 sm:gap-3";
+const sepCls = "text-[var(--footer-sep)]";
+
+const DEFAULT_COLUMNS = [
+	{
+		title: "Lorem",
+		links: [
+			{ label: "Lorem", href: "#" },
+			{ label: "Ipsum", href: "#" },
+			{ label: "Dolor", href: "#" },
+			{ label: "Sit", href: "#" },
+			{ label: "Amet", href: "#" },
+		],
+	},
+	{
+		title: "Ipsum",
+		links: [
+			{ label: "Consectetur", href: "#" },
+			{ label: "Adipiscing", href: "#" },
+			{ label: "Elit Sed", href: "#" },
+			{ label: "Tempor", href: "#" },
+		],
+	},
+	{
+		title: "Dolor",
+		links: [
+			{ label: "lorem@ipsum.test", href: "mailto:lorem@ipsum.test" },
+			{ label: "+00 000 0000", href: "tel:+000000000" },
+			{ label: "Lorem ipsum dolor" },
+			{ label: "Sit amet consectetur" },
+		],
+	},
+];
+
+const DEFAULT_LEGAL_LINKS = [
+	{ label: "Lorem Policy", href: "#" },
+	{ label: "Ipsum Terms", href: "#" },
+];
+
+function renderColumnItem(item, index) {
+	if (item?.href) {
+		return React.createElement(
+			"li",
+			{ key: `${item.label}-${index}` },
+			React.createElement(
+				"a",
+				{ href: item.href, className: linkCls },
+				item.label,
+			),
+		);
+	}
+
+	return React.createElement(
+		"li",
+		{ key: `${item?.label ?? "item"}-${index}`, className: textItemCls },
+		item?.label,
+	);
+}
+
+export function Footer({
+	className = "",
+	brandName = "Lorem Ipsum Co.",
+	brandDescription = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+	ctaLabel = "Lorem Ipsum CTA \u2192",
+	ctaHref = "#",
+	columns = DEFAULT_COLUMNS,
+	copyrightText = "\u00a9 2026 Lorem Ipsum Co.",
+	legalLinks = DEFAULT_LEGAL_LINKS,
+	poweredByText = "Powered by Lorem Ipsum",
+	poweredByHref = "#",
+	mark,
+}) {
+	const cols = Array.isArray(columns) ? columns : DEFAULT_COLUMNS;
+	const legal = Array.isArray(legalLinks) ? legalLinks : DEFAULT_LEGAL_LINKS;
+
+	return React.createElement(
+		"footer",
+		{ className: `${footerCls} ${className}`.trim() },
+		React.createElement(
+			"div",
+			{
+				className: containerCls,
+				style: {
+					maxWidth: "var(--footer-container-max-width)",
+					paddingLeft: "var(--footer-container-padding-x)",
+					paddingRight: "var(--footer-container-padding-x)",
+					paddingTop: "var(--footer-container-padding-y)",
+					paddingBottom: "var(--footer-container-padding-y)",
+				},
+			},
+			React.createElement(
+				"div",
+				{ className: topGridCls },
+				React.createElement(
+					"div",
+					{ className: "space-y-5 md:col-span-2 lg:col-span-1" },
+					React.createElement(
+						"div",
+						{ className: brandRowCls },
+						mark
+							? mark
+							: React.createElement(
+									"span",
+									{
+										className: markCls,
+										"aria-hidden": "true",
+										style: {
+											width: "var(--footer-mark-width)",
+											height: "var(--footer-mark-height)",
+										},
+									},
+									brandName.charAt(0).toUpperCase(),
+								),
+						React.createElement("h2", { className: brandNameCls }, brandName),
+					),
+					React.createElement(
+						"p",
+						{ className: brandTextCls },
+						brandDescription,
+					),
+					React.createElement(
+						"a",
+						{
+							href: ctaHref,
+							className: ctaCls,
+							style: {
+								paddingLeft: "var(--footer-cta-padding-x)",
+								paddingRight: "var(--footer-cta-padding-x)",
+								paddingTop: "var(--footer-cta-padding-y)",
+								paddingBottom: "var(--footer-cta-padding-y)",
+								fontSize: "var(--footer-cta-font-size)",
+							},
+						},
+						ctaLabel,
+					),
+				),
+				...cols.slice(0, 3).map((column, index) =>
+					React.createElement(
+						"nav",
+						{
+							key: `${column?.title ?? "column"}-${index}`,
+							"aria-label": column?.title ?? `Footer column ${index + 1}`,
+							className: "min-w-0",
+						},
+						React.createElement(
+							"h3",
+							{
+								className: columnTitleCls,
+								style: {
+									fontSize: "var(--footer-column-title-font-size)",
+									textTransform: "var(--footer-column-title-text-transform)",
+									letterSpacing: "var(--footer-column-title-text-tracking)",
+									fontFamily: "var(--footer-column-title-font-family)",
+								},
+							},
+							column?.title,
+						),
+						React.createElement(
+							"ul",
+							{ className: columnListCls },
+							...(column?.links ?? []).map(renderColumnItem),
+						),
+					),
+				),
+			),
+			React.createElement(
+				"div",
+				{ className: bottomBarCls },
+				React.createElement(
+					"div",
+					{ className: legalCls },
+					React.createElement("span", null, copyrightText),
+					legal.length > 0
+						? React.createElement("span", { className: sepCls }, "\u2022")
+						: null,
+					...legal.flatMap((item, index) => {
+						const node = item?.href
+							? React.createElement(
+									"a",
+									{ href: item.href, className: linkCls },
+									item.label,
+								)
+							: React.createElement("span", null, item?.label);
+
+						if (index === legal.length - 1) {
+							return [
+								React.createElement("span", { key: `legal-${index}` }, node),
+							];
+						}
+
+						return [
+							React.createElement("span", { key: `legal-${index}` }, node),
+							React.createElement(
+								"span",
+								{ key: `sep-${index}`, className: sepCls },
+								"\u2022",
+							),
+						];
+					}),
+				),
+				poweredByHref
+					? React.createElement(
+							"a",
+							{
+								href: poweredByHref,
+								className: `${linkCls} lg:text-right`.trim(),
+							},
+							poweredByText,
+						)
+					: React.createElement(
+							"p",
+							{ className: "lg:text-right" },
+							poweredByText,
+						),
+			),
+		),
+	);
+}

package/templates/ui/src/form-field.integration-test.js

@@ -0,0 +1,142 @@
+import assert from "node:assert";
+import { after, test } from "node:test";
+import { JSDOM } from "jsdom";
+
+const dom = new JSDOM(
+	"<!DOCTYPE html><html><body><div id='root'></div></body></html>",
+	{
+		url: "http://localhost",
+		pretendToBeVisual: true,
+	},
+);
+
+function setGlobal(key, value) {
+	Object.defineProperty(globalThis, key, {
+		value,
+		writable: true,
+		configurable: true,
+	});
+}
+
+setGlobal("document", dom.window.document);
+setGlobal("window", dom.window);
+setGlobal("navigator", dom.window.navigator);
+setGlobal("HTMLElement", dom.window.HTMLElement);
+setGlobal("Node", dom.window.Node);
+setGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+
+const { createElement } = await import("react");
+const { createRoot } = await import("react-dom/client");
+const { act } = await import("react");
+const { FormField } = await import("./form-field.js");
+
+after(() => {
+	delete globalThis.document;
+	delete globalThis.window;
+	delete globalThis.navigator;
+	delete globalThis.HTMLElement;
+	delete globalThis.Node;
+	delete globalThis.IS_REACT_ACT_ENVIRONMENT;
+});
+
+function setupContainer() {
+	const container = dom.window.document.createElement("div");
+	dom.window.document.body.appendChild(container);
+	return container;
+}
+
+test("FormField - renders label and input", async () => {
+	const container = setupContainer();
+	const root = createRoot(container);
+	await act(() =>
+		root.render(createElement(FormField, { label: "Name", name: "name" })),
+	);
+	const label = container.querySelector("label");
+	const input = container.querySelector("input");
+	assert.ok(label, "should render a label");
+	assert.ok(input, "should render an input");
+	assert.strictEqual(label.textContent, "Name");
+	assert.strictEqual(input.getAttribute("name"), "name");
+	root.unmount();
+});
+
+test("FormField - connects label to input via htmlFor/id", async () => {
+	const container = setupContainer();
+	const root = createRoot(container);
+	await act(() =>
+		root.render(
+			createElement(FormField, {
+				label: "Email",
+				name: "email",
+				id: "custom-id",
+			}),
+		),
+	);
+	const label = container.querySelector("label");
+	const input = container.querySelector("input");
+	assert.strictEqual(label.getAttribute("for"), "custom-id");
+	assert.strictEqual(input.getAttribute("id"), "custom-id");
+	root.unmount();
+});
+
+test("FormField - renders error message with role alert", async () => {
+	const container = setupContainer();
+	const root = createRoot(container);
+	await act(() =>
+		root.render(
+			createElement(FormField, {
+				label: "Email",
+				name: "email",
+				error: "Required",
+			}),
+		),
+	);
+	const errorEl = container.querySelector("[role='alert']");
+	assert.ok(errorEl, "should render an error element with role alert");
+	assert.strictEqual(errorEl.textContent, "Required");
+	root.unmount();
+});
+
+test("FormField - sets aria-invalid and aria-describedby when error present", async () => {
+	const container = setupContainer();
+	const root = createRoot(container);
+	await act(() =>
+		root.render(
+			createElement(FormField, {
+				label: "Email",
+				name: "email",
+				error: "Required",
+				id: "email-field",
+			}),
+		),
+	);
+	const wrapper = container.querySelector('[aria-invalid="true"]');
+	assert.ok(wrapper, "should set aria-invalid on wrapper");
+	const errorId = wrapper.getAttribute("aria-describedby");
+	assert.ok(errorId, "should set aria-describedby");
+	const errorEl = container.querySelector(`#${errorId}`);
+	assert.ok(errorEl, "aria-describedby should point to existing error element");
+	root.unmount();
+});
+
+test("FormField - renders children instead of default input", async () => {
+	const container = setupContainer();
+	const root = createRoot(container);
+	await act(() =>
+		root.render(
+			createElement(
+				FormField,
+				{ label: "Bio", name: "bio" },
+				createElement("textarea", { "data-testid": "custom" }),
+			),
+		),
+	);
+	const textarea = container.querySelector("textarea");
+	assert.ok(textarea, "should render custom children instead of input");
+	assert.strictEqual(
+		container.querySelector("input"),
+		null,
+		"should not render default input",
+	);
+	root.unmount();
+});

package/templates/ui/src/form-field.js

@@ -0,0 +1,50 @@
+"use client";
+import React, { useId } from "react";
+import { Input } from "./input.js";
+import { Label } from "./label.js";
+
+export function FormField({
+	label,
+	name,
+	error,
+	children,
+	className = "",
+	...props
+}) {
+	const generatedId = useId();
+	const fieldId = props.id ?? generatedId;
+
+	const errorId = `${fieldId}-error`;
+
+	const inputProps = { id: fieldId, name, ...props };
+	if (error) {
+		inputProps["aria-invalid"] = true;
+		inputProps["aria-describedby"] = errorId;
+	}
+
+	const childrenWrapperProps = {};
+	if (error) {
+		childrenWrapperProps["aria-invalid"] = true;
+		childrenWrapperProps["aria-describedby"] = errorId;
+	}
+
+	return React.createElement(
+		"div",
+		{ className: `min-w-0 space-y-1.5 ${className}`.trim() },
+		label ? React.createElement(Label, { htmlFor: fieldId }, label) : null,
+		children
+			? React.createElement("div", childrenWrapperProps, children)
+			: React.createElement(Input, inputProps),
+		error
+			? React.createElement(
+					"p",
+					{
+						id: errorId,
+						className: "text-xs text-[--error-text]",
+						role: "alert",
+					},
+					error,
+				)
+			: null,
+	);
+}

package/templates/ui/src/index.js

@@ -0,0 +1,24 @@
+export * from "./badge.js";
+export * from "./button.js";
+export * from "./card.js";
+export * from "./checkbox.js";
+export * from "./container.js";
+export * from "./dialog.js";
+export * from "./error-banner.js";
+export * from "./footer.js";
+export * from "./form-field.js";
+export * from "./input.js";
+export * from "./label.js";
+export * from "./lightbox.js";
+export * from "./logo.js";
+export * from "./navbar.js";
+export * from "./password-input.js";
+export * from "./rich-text.js";
+export * from "./select.js";
+export * from "./skeleton.js";
+export * from "./spinner.js";
+export * from "./table.js";
+export * from "./textarea.js";
+export * from "./theme.js";
+export * from "./theme-constants.js";
+export * from "./toast.js";

package/templates/ui/src/input.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+const base =
+	"block h-10 w-full border border-[--input-border] bg-[--input-bg] px-3 text-sm text-[--input-text] placeholder:text-[--input-placeholder] transition-colors duration-200 linear hover:border-[--input-border-hover] focus-visible:border-[--input-border-focus] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--input-ring-focus)] disabled:opacity-[--input-disabled-opacity] disabled:cursor-not-allowed";
+
+export function Input({ className = "", ...props }) {
+	return React.createElement("input", {
+		className: `${base} rounded-[--radius-default] ${className}`.trim(),
+		...props,
+	});
+}

package/templates/ui/src/label.js

@@ -0,0 +1,14 @@
+import React from "react";
+
+const base = "block text-xs font-medium text-[--label-text]";
+
+export function Label({ className = "", ...props }) {
+	return React.createElement("label", {
+		className: `${base} ${className}`.trim(),
+		style: {
+			textTransform: "var(--label-text-transform)",
+			letterSpacing: "var(--label-text-tracking)",
+		},
+		...props,
+	});
+}

package/templates/ui/src/lightbox.integration-test.js

@@ -0,0 +1,167 @@
+import assert from "node:assert";
+import { after, test } from "node:test";
+import { JSDOM } from "jsdom";
+
+const dom = new JSDOM(
+	"<!DOCTYPE html><html><body><div id='root'></div></body></html>",
+	{
+		url: "http://localhost",
+		pretendToBeVisual: true,
+	},
+);
+
+function setGlobal(key, value) {
+	Object.defineProperty(globalThis, key, {
+		value,
+		writable: true,
+		configurable: true,
+	});
+}
+
+setGlobal("document", dom.window.document);
+setGlobal("window", dom.window);
+setGlobal("navigator", dom.window.navigator);
+setGlobal("HTMLElement", dom.window.HTMLElement);
+setGlobal("Node", dom.window.Node);
+setGlobal("requestAnimationFrame", dom.window.requestAnimationFrame);
+setGlobal("cancelAnimationFrame", dom.window.cancelAnimationFrame);
+setGlobal("KeyboardEvent", dom.window.KeyboardEvent);
+setGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+
+const { createElement } = await import("react");
+const { createRoot } = await import("react-dom/client");
+const { act } = await import("react");
+const { Lightbox } = await import("./lightbox.js");
+
+after(() => {
+	delete globalThis.document;
+	delete globalThis.window;
+	delete globalThis.navigator;
+	delete globalThis.HTMLElement;
+	delete globalThis.Node;
+	delete globalThis.requestAnimationFrame;
+	delete globalThis.cancelAnimationFrame;
+	delete globalThis.KeyboardEvent;
+	delete globalThis.IS_REACT_ACT_ENVIRONMENT;
+});
+
+function setupContainer() {
+	const container = dom.window.document.createElement("div");
+	dom.window.document.body.appendChild(container);
+	return container;
+}
+
+test("Lightbox - renders nothing when closed", async () => {
+	const container = setupContainer();
+	const root = createRoot(container);
+	await act(() => root.render(createElement(Lightbox, { open: false })));
+	assert.strictEqual(container.innerHTML, "");
+	root.unmount();
+});
+
+test("Lightbox - renders overlay when open", async () => {
+	const container = setupContainer();
+	const root = createRoot(container);
+	await act(() =>
+		root.render(
+			createElement(Lightbox, {
+				open: true,
+				src: "/test.jpg",
+				alt: "Test image",
+				onClose: () => {},
+			}),
+		),
+	);
+	const img = container.querySelector("img");
+	assert.ok(img, "should render an img element");
+	assert.strictEqual(img.getAttribute("src"), "/test.jpg");
+	assert.strictEqual(img.getAttribute("alt"), "Test image");
+	root.unmount();
+});
+
+test("Lightbox - calls onClose when close button clicked", async () => {
+	const container = setupContainer();
+	const root = createRoot(container);
+	let closed = false;
+	await act(() =>
+		root.render(
+			createElement(Lightbox, {
+				open: true,
+				src: "/test.jpg",
+				onClose: () => {
+					closed = true;
+				},
+			}),
+		),
+	);
+	const closeBtn = container.querySelector(
+		"button[aria-label='Close lightbox']",
+	);
+	assert.ok(closeBtn, "should have a close button");
+	await act(() => closeBtn.click());
+	assert.ok(closed, "onClose should be called");
+	root.unmount();
+});
+
+test("Lightbox - shows prev/next buttons and counter", async () => {
+	const container = setupContainer();
+	const root = createRoot(container);
+	await act(() =>
+		root.render(
+			createElement(Lightbox, {
+				open: true,
+				src: "/img2.jpg",
+				showPrevious: true,
+				showNext: true,
+				currentIndex: 2,
+				totalCount: 5,
+				onPrevious: () => {},
+				onNext: () => {},
+				onClose: () => {},
+			}),
+		),
+	);
+	assert.ok(
+		container.textContent.includes("Previous"),
+		"should show Previous button",
+	);
+	assert.ok(container.textContent.includes("Next"), "should show Next button");
+	assert.ok(container.textContent.includes("2 / 5"), "should show counter");
+	root.unmount();
+});
+
+test("Lightbox - calls onPrevious and onNext on button clicks", async () => {
+	const container = setupContainer();
+	const root = createRoot(container);
+	let prev = false;
+	let next = false;
+	await act(() =>
+		root.render(
+			createElement(Lightbox, {
+				open: true,
+				src: "/img2.jpg",
+				showPrevious: true,
+				showNext: true,
+				onPrevious: () => {
+					prev = true;
+				},
+				onNext: () => {
+					next = true;
+				},
+				onClose: () => {},
+			}),
+		),
+	);
+	const buttons = container.querySelectorAll("button");
+	const prevBtn = Array.from(buttons).find((b) =>
+		b.textContent.includes("Previous"),
+	);
+	const nextBtn = Array.from(buttons).find((b) =>
+		b.textContent.includes("Next"),
+	);
+	await act(() => prevBtn.click());
+	assert.ok(prev, "onPrevious should be called");
+	await act(() => nextBtn.click());
+	assert.ok(next, "onNext should be called");
+	root.unmount();
+});