@torpor/ui 0.1.7 → 0.2.0

package/src/utils/dateUtils.ts

@@ -0,0 +1,244 @@
+// TODO: Can we get these from the locale?
+const monthNames: string[] = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December",
+];
+const shortMonthNames: string[] = monthNames.map((n) => n.substring(0, 3).toLowerCase());
+
+const dayNames: string[] = [
+	"Sunday",
+	"Monday",
+	"Tuesday",
+	"Wednesday",
+	"Thursday",
+	"Friday",
+	"Saturday",
+	"Sunday",
+];
+const shortDayNames: string[] = dayNames.map((n) => n.substring(0, 3).toLowerCase());
+
+export { monthNames, shortMonthNames, dayNames, shortDayNames };
+
+export function areDatesEqual(date1: Date, date2: Date): boolean {
+	if ((date1 && !date2) || (date2 && !date1)) {
+		return false;
+	}
+	return (
+		date1.getFullYear() === date2.getFullYear() &&
+		date1.getMonth() === date2.getMonth() &&
+		date1.getDate() === date2.getDate()
+	);
+}
+
+export function parseDateTime(text: string, dateOrder: string): Date {
+	const parts = text
+		.toString()
+		.toLowerCase()
+		.split(/[.,/ :-]/);
+
+	const today = new Date();
+	let day = today.getDate();
+	let month = today.getMonth();
+	let year = today.getFullYear();
+	let hour = 9;
+	let minute = 0;
+	//let ampm = "";
+
+	let dayPart = -1;
+	let monthPart = -1;
+	let yearPart = -1;
+	//let hourPart = -1;
+
+	// Try to get the month if it's been supplied as a word
+	for (let i = 0; i < parts.length; i++) {
+		const index = shortMonthNames.indexOf(parts[i].substring(0, 3));
+		if (index !== -1) {
+			month = index;
+			monthPart = i;
+			break;
+		}
+	}
+
+	// Get each date part based on the dateOrder supplied
+	const dateOrderLower = dateOrder.toLowerCase();
+	for (let i = 0; i < dateOrder.length; i++) {
+		if (dateOrderLower[i] === "d") {
+			const dayResult = getDayPart(parts, monthPart, yearPart);
+			if (dayResult) {
+				day = dayResult.value;
+				dayPart = dayResult.part;
+			}
+		}
+		if (dateOrderLower[i] === "m" && monthPart === -1) {
+			const monthResult = getMonthPart(parts, dayPart, yearPart);
+			if (monthResult) {
+				month = monthResult.value;
+				monthPart = monthResult.part;
+			}
+		}
+		if (dateOrderLower[i] === "y") {
+			const yearResult = getYearPart(parts, dayPart, monthPart);
+			if (yearResult) {
+				year = yearResult.value;
+				yearPart = yearResult.part;
+			}
+		}
+	}
+
+	// TODO: Time...
+	//if (includeTime) {
+	//    // Hour part is the first part that isn't a date part
+	//    for (let i = 0; i < parts.length; i++) {
+	//        if (i !== yearPart && i !== monthPart && i !== dayPart) {
+	//            const maybehour = parseInt(parts[i])
+	//            if (!isNaN(maybehour)) {
+	//                hour = maybehour
+	//                hourPart = i
+	//                break
+	//            }
+	//        }
+	//    }
+	//
+	//    // Minute part is the first part that isn't a date part or the hour part
+	//    for (let i = 0; i < parts.length; i++) {
+	//        if (i !== yearPart && i !== monthPart && i !== dayPart && i !== hourPart) {
+	//            const maybeminute = parseInt(parts[i])
+	//            if (!isNaN(maybeminute)) {
+	//                minute = maybeminute
+	//                break
+	//            }
+	//        }
+	//    }
+	//
+	//    // Look for AM or PM
+	//    for (let i = 0; i < parts.length; i++) {
+	//        if (parts[i] === 'am' || parts[i] === 'pm') {
+	//            ampm = parts[i].toString().toUpperCase()
+	//            if (ampm === 'PM') {
+	//                hour = hour + 12
+	//            }
+	//            break
+	//        }
+	//    }
+	//}
+
+	return new Date(year, month, day, hour, minute);
+}
+
+interface DatePart {
+	value: number;
+	part: number;
+}
+
+function getDayPart(parts: string[], monthPart: number, yearPart: number): DatePart | undefined {
+	for (let i = 0; i < parts.length; i++) {
+		if (i !== monthPart && i !== yearPart) {
+			const maybeday = parseInt(parts[i]);
+			if (!isNaN(maybeday)) {
+				const value = maybeday;
+				const part = i;
+				return { value, part };
+			}
+		}
+	}
+}
+
+function getMonthPart(parts: string[], dayPart: number, yearPart: number): DatePart | undefined {
+	for (let i = 0; i < parts.length; i++) {
+		if (i !== dayPart && i !== yearPart) {
+			const maybemonth = parseInt(parts[i]);
+			if (!isNaN(maybemonth)) {
+				const value = maybemonth - 1;
+				const part = i;
+				return { value, part };
+			}
+		}
+	}
+}
+
+function getYearPart(parts: string[], dayPart: number, monthPart: number): DatePart | undefined {
+	for (let i = 0; i < parts.length; i++) {
+		if (i !== monthPart && i !== dayPart) {
+			const maybeyear = parseInt(parts[i]);
+			if (!isNaN(maybeyear)) {
+				const value = maybeyear < 100 ? maybeyear + 2000 : maybeyear;
+				const part = i;
+				return { value, part };
+			}
+		}
+	}
+}
+
+export function formatDate(value: Date, dateFormat: string): string {
+	if (!value) {
+		return "";
+	}
+
+	const date = new Date(value);
+
+	// Build the text that will be displayed
+	return dateFormat.replace(/(d+)|(M+)|(y+)/g, (m) => {
+		if (m.indexOf("d") >= 0) {
+			return formatDay(date, m);
+		} else if (m.indexOf("M") >= 0) {
+			return formatMonth(date, m);
+		} else if (m.indexOf("y") >= 0) {
+			return formatYear(date, m);
+		} else {
+			throw new Error("Invalid date format string");
+		}
+	});
+
+	// TODO: Time
+	//if (includeTime) {
+	//    const ampm = hour >= 12 ? 'PM' : 'AM'
+	//    hour = hour % 12
+	//    hour = hour || 12 // the hour '0' should be '12'
+	//
+	//    minute = minute < 10 ? '0' + minute : minute
+	//    text = text + ' ' + hour + ':' + minute + ' ' + ampm
+	//}
+}
+
+function formatDay(date: Date, d: string): string {
+	if (d.length >= 4) {
+		return dayNames[date.getDay()];
+	} else if (d.length === 3) {
+		return dayNames[date.getDay()].substring(0, 3);
+	} else if (d.length == 2) {
+		let text = date.getDate().toString();
+		return text.length < 2 ? "0" + text : text;
+	} else {
+		return date.getDate().toString();
+	}
+}
+
+function formatMonth(date: Date, m: string): string {
+	if (m.length >= 4) {
+		return monthNames[date.getMonth()];
+	} else if (m.length === 3) {
+		return monthNames[date.getMonth()].substring(0, 3);
+	} else if (m.length == 2) {
+		let text = date.getMonth().toString();
+		return text.length < 2 ? "0" + text : text;
+	} else {
+		return date.getMonth().toString();
+	}
+}
+
+function formatYear(date: Date, y: string): string {
+	return date
+		.getFullYear()
+		.toString()
+		.substring(4 - y.length, y.length);
+}

package/src/utils/setPopoverPosition.ts

@@ -42,6 +42,7 @@ export default function setPopoverPosition(
 			break;
 		}
 		default: {
+			// eslint-disable-next-line restrict-template-expressions
 			throw new Error(`Invalid MenuPopout side: ${side}`);
 		}
 	}
@@ -68,6 +69,7 @@ export default function setPopoverPosition(
 			break;
 		}
 		default: {
+			// eslint-disable-next-line restrict-template-expressions
 			throw new Error(`Invalid MenuPopout side: ${side}`);
 		}
 	}
@@ -94,6 +96,7 @@ function setVerticalAlignment(
 			break;
 		}
 		default: {
+			// eslint-disable-next-line restrict-template-expressions
 			throw new Error(`Invalid Popout alignment: ${alignment}`);
 		}
 	}
@@ -126,6 +129,7 @@ function setHorizontalAlignment(
 			break;
 		}
 		default: {
+			// eslint-disable-next-line restrict-template-expressions
 			throw new Error(`Invalid Popout alignment: ${alignment}`);
 		}
 	}

package/test/Breadcrumb/accessibility.test.ts

@@ -0,0 +1,29 @@
+import { queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import { mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+import BreadcrumbTest from "./components/BreadcrumbTest.torp";
+
+describe("Breadcrumb", () => {
+	it("Accessibility", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, BreadcrumbTest);
+
+		// Tests from https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/
+
+		// Breadcrumb trail is contained within a navigation landmark region
+		expect(
+			queryByText(container, "Main page")?.parentElement?.parentElement?.tagName.toLowerCase(),
+		).toMatch("nav");
+
+		// The landmark region is labelled via aria-label or aria-labelledby
+		expect(queryByText(container, "Main page")?.parentElement?.parentElement).toHaveAttribute(
+			"aria-label",
+		);
+
+		// The link to the current page has aria-current set to page. If the element representing the
+		// current page is not a link, aria-current is optional
+		expect(queryByText(container, "Current page")).toHaveAttribute("aria-current", "page");
+	});
+});

package/test/Breadcrumb/basic.test.ts

@@ -0,0 +1,17 @@
+import { queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import { mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+import BreadcrumbTest from "./components/BreadcrumbTest.torp";
+
+describe("Breadcrumb", () => {
+	it("Basic", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, BreadcrumbTest);
+
+		expect(queryByText(container, "Main page")).toBeInTheDocument();
+		expect(queryByText(container, "Sub page")).toBeInTheDocument();
+		expect(queryByText(container, "Current page")).toBeInTheDocument();
+	});
+});

package/test/Breadcrumb/components/BreadcrumbTest.torp

@@ -0,0 +1,15 @@
+import { Breadcrumb, BreadcrumbItem } from "../../../src/Breadcrumb/index";
+
+export default function BreadcrumbAccessibility() {
+	@render {
+		<Breadcrumb ariaLabel="Breadcrumb">
+			<BreadcrumbItem>
+				<a href={location + "#mainpage"}>Main page</a>
+			</BreadcrumbItem>
+			<BreadcrumbItem>
+				<a href={location + "#subpage"}>Sub page</a>
+			</BreadcrumbItem>
+			<BreadcrumbItem current>Current page</BreadcrumbItem>
+		</Breadcrumb>
+	}
+}

package/test/Calendar/components/CalendarTest.torp

@@ -0,0 +1,9 @@
+import {
+	Calendar,
+} from "../../../src/Calendar/index";
+
+export default function CalendarTest() {
+	@render {
+		<Calendar {$props.selectable} {$props.value} />
+	}
+}

package/test/Calendar/default.test.ts

@@ -0,0 +1,18 @@
+import { queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import { mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+import CalendarTest from "./components/CalendarTest.torp";
+
+describe("Calendar", () => {
+	it("Default value", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, CalendarTest, { selectable: true, value: new Date(2025, 8, 15) });
+
+		expect(queryByText(container, "September 2025")).toBeInTheDocument();
+
+		expect(queryByText(container, "15")).toBeInTheDocument();
+		expect(queryByText(container, "15")!.parentElement!.parentElement).toHaveClass("active");
+	});
+});

package/test/Dialog/components/DialogAccessibility.torp

@@ -1,18 +1,18 @@
-import { Popover, PopoverContent } from '../../../src/Popover/index';
+import { Popover, PopoverContent } from "../../../src/Popover/index";
 import {
 	Dialog,
 	DialogHeader,
 	DialogBody,
 	DialogFooter,
 	DialogButton
-} from '../../../src/Dialog/index';
+} from "../../../src/Dialog/index";
 
 export default function DialogAccessibility($props: any) {
 	$props.modal ??= false;
 	$props.alert ??= false;
 	$props.ariaAnnounce ??= true;
 
-	let color = '';
+	let color = "";
 
 	@render {
 		<Popover visible modal={$props.modal}>
@@ -21,8 +21,8 @@ export default function DialogAccessibility($props: any) {
 					<DialogHeader>Color preference</DialogHeader>
 					<DialogBody ariaAnnounce={$props.ariaAnnounce}>Which color do you prefer?</DialogBody>
 					<DialogFooter>
-						<DialogButton value="blue" onclick={() => (color = 'blue')}>Blue</DialogButton>
-						<DialogButton value="red" onclick={() => (color = 'red')}>Red</DialogButton>
+						<DialogButton value="blue" onclick={() => (color = "blue")}>Blue</DialogButton>
+						<DialogButton value="red" onclick={() => (color = "red")}>Red</DialogButton>
 					</DialogFooter>
 				</Dialog>
 			</PopoverContent>

package/test/Disclosure/accessibility.test.ts

@@ -0,0 +1,30 @@
+import { fireEvent, getByText, queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import { mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+import DisclosureTest from "./components/DisclosureTest.torp";
+
+describe("Disclosure", () => {
+	it("Accessibility", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, DisclosureTest);
+
+		// Tests from https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
+
+		// The element that shows and hides the content has role button
+		expect(queryByText(container, "Disclosure header")?.tagName.toLowerCase()).toMatch("button");
+
+		// When the content is hidden, the element with role button has aria-expanded set to false
+		expect(queryByText(container, "Disclosure header")).toHaveAttribute("aria-expanded", "false");
+
+		// When the content area is visible, it is set to true
+		fireEvent.click(getByText(container, "Disclosure header"));
+		expect(queryByText(container, "Disclosure header")).toHaveAttribute("aria-expanded", "true");
+
+		// Optionally, the element with role button has a value specified for aria-controls that refers
+		// to the element that contains all the content that is shown or hidden
+		const contentId = queryByText(container, "Disclosure content")?.id;
+		expect(queryByText(container, "Disclosure header")).toHaveAttribute("aria-controls", contentId);
+	});
+});

package/test/Disclosure/components/DisclosureTest.torp

@@ -0,0 +1,17 @@
+import {
+	Disclosure,
+	DisclosureHeader,
+	DisclosureTrigger,
+	DisclosureContent
+} from "../../../src/Disclosure/index";
+
+export default function DisclosureAccessibility($props: { expanded: boolean }) {
+	@render {
+		<Disclosure {$props.expanded}>
+			<DisclosureHeader as="h4">
+				<DisclosureTrigger>Disclosure header</DisclosureTrigger>
+			</DisclosureHeader>
+			<DisclosureContent>Disclosure content</DisclosureContent>
+		</Disclosure>
+	}
+}

package/test/Disclosure/default.test.ts

@@ -0,0 +1,15 @@
+import { queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import { mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+import DisclosureTest from "./components/DisclosureTest.torp";
+
+describe("Disclosure", () => {
+	it("Default value", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, DisclosureTest, { expanded: true });
+
+		expect(queryByText(container, "Disclosure content")).toBeInTheDocument();
+	});
+});

package/test/Disclosure/toggle.test.ts

@@ -0,0 +1,19 @@
+import { fireEvent, getByText, queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import { mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+import DisclosureTest from "./components/DisclosureTest.torp";
+
+describe("Disclosure", () => {
+	it("Toggle", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, DisclosureTest);
+
+		expect(queryByText(container, "Disclosure content")).not.toBeInTheDocument();
+
+		// Clicking the header should reveal the body
+		fireEvent.click(getByText(container, "Disclosure header"));
+		expect(queryByText(container, "Disclosure content")).toBeInTheDocument();
+	});
+});

package/test/Menu/accessibility.test.ts

@@ -0,0 +1,82 @@
+import { fireEvent, getByText, queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import { mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+import MenuAccessibility from "./components/MenuAccessibility.torp";
+
+describe("Menu", () => {
+	it("Accessibility", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, MenuAccessibility);
+
+		// Tests from https://www.w3.org/WAI/ARIA/apg/patterns/menu/
+
+		// A menu is a container of items that represent choices. The element serving as the menu has
+		// a role of either menu or menubar
+		expect(queryByText(container, "Menu button")?.parentElement).toHaveAttribute("role", "menu");
+
+		// The items contained in a menu are child elements of the containing menu or menubar and have
+		// any of the following roles:
+		//   * menuitem
+		//   * menuitemcheckbox
+		//   * menuitemradio
+		expect(queryByText(container, "Menu button")).toHaveAttribute("role", "menuitem");
+		expect(queryByText(container, "Check popout button")).toHaveAttribute("role", "menuitem");
+
+		// If activating a menuitem opens a submenu, the menuitem is known as a parent menuitem. A submenu's
+		// menu element is:
+		//   * Contained inside the same menu element as its parent menuitem
+		//   * Is the sibling element immediately following its parent menuitem
+
+		// A parent menuitem has aria-haspopup set to either menu or true
+		expect(queryByText(container, "Check popout button")).toHaveAttribute("aria-haspopup", "true");
+
+		// A parent menuitem has aria-expanded set to false when its child menu is not visible and set
+		// to true when the child menu is visible
+		expect(queryByText(container, "Check popout button")).toHaveAttribute("aria-expanded", "false");
+		fireEvent.click(getByText(container, "Check popout button"));
+		expect(queryByText(container, "Check popout button")).toHaveAttribute("aria-expanded", "true");
+
+		// One of the following approaches is used to enable scripts to move focus among items in a
+		// menu as described in Keyboard Navigation Inside Components:
+		//   * The menu container has tabindex set to -1 or 0 and aria-activedescendant set to the ID
+		//     of the focused item
+		//   * Each item in the menu has tabindex set to -1, except in a menubar, where the first item
+		//     has tabindex set to 0
+
+		// When a menuitemcheckbox or menuitemradio is checked, aria-checked is set to true
+		// NOTE: We don't (currently?) have checkboxes or radios in Menus
+
+		// When a menu item is disabled, aria-disabled is set to true
+		expect(queryByText(container, "Menu button")).not.toHaveAttribute("aria-disabled");
+		expect(queryByText(container, "Disabled button")).toHaveAttribute("aria-disabled", "true");
+
+		// Items in a menu may be divided into groups by placing an element with a role of separator
+		// between groups. For example, this technique should be used when a menu contains a set of
+		// menuitemradio items
+		expect(queryByText(container, "---")).toHaveAttribute("role", "separator");
+
+		// All separators should have aria-orientation consistent with the separator's orientation
+		// NOTE: What does this mean? None of the example separators have aria-orientation set
+
+		// An element with role menu either has:
+		//   * aria-labelledby set to a value that refers to the menuitem or button that controls its
+		//     display
+		//   * A label provided by aria-label
+		// NOTE: We only support aria-label and it's required
+		expect(queryByText(container, "Menu button")?.parentElement).toHaveAttribute(
+			"aria-label",
+			"A menu",
+		);
+
+		// If a menu is horizontally oriented, it has aria-orientation set to horizontal. The default
+		// value of aria-orientation for a menu is vertical
+		// NOTE: For these menus, the only orientation is vertical -- can't really think of a situation
+		// where horizontal would make sense?
+		expect(queryByText(container, "Menu button")?.parentElement).toHaveAttribute(
+			"aria-orientation",
+			"vertical",
+		);
+	});
+});

package/test/Menu/basic.test.ts

@@ -0,0 +1,57 @@
+import { fireEvent, getByText, queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import { mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+import MenuBasic from "./components/MenuBasic.torp";
+
+describe("Menu", () => {
+	it("Basic operation", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, MenuBasic);
+
+		// By default, the top-level buttons should be displayed
+		expect(queryByText(container, "Menu button")).toBeInTheDocument();
+		expect(queryByText(container, "Check popout button")).toBeInTheDocument();
+		expect(queryByText(container, "Radio popout button")).toBeInTheDocument();
+
+		// Submenus should not be displayed
+		expect(queryByText(container, "Checked 1")).not.toBeInTheDocument();
+		expect(queryByText(container, "Radio 1")).not.toBeInTheDocument();
+
+		// Clicking a popout button should show the appropriate menu
+		fireEvent.click(getByText(container, "Check popout button"));
+		expect(queryByText(container, "Checked 1")).toBeInTheDocument();
+		expect(queryByText(container, "Radio 1")).not.toBeInTheDocument();
+
+		// Clicking another popout button should show that menu instead
+		fireEvent.click(getByText(container, "Radio popout button"));
+		//expect(queryByText(container, 'Checked 1')).not.toBeInTheDocument();
+		expect(queryByText(container, "Radio 1")).toBeInTheDocument();
+
+		// Checking a box should show or hide the indicator
+		fireEvent.click(getByText(container, "Check popout button"));
+		expect(queryByText(container, "Tick 1")).not.toBeInTheDocument();
+		expect(queryByText(container, "Tick 2")).not.toBeInTheDocument();
+		fireEvent.click(getByText(container, "Checked 1"));
+		expect(queryByText(container, "Tick 1")).toBeInTheDocument();
+		expect(queryByText(container, "Tick 2")).not.toBeInTheDocument();
+		fireEvent.click(getByText(container, "Checked 2"));
+		expect(queryByText(container, "Tick 1")).toBeInTheDocument();
+		expect(queryByText(container, "Tick 2")).toBeInTheDocument();
+		fireEvent.click(getByText(container, "Checked 1"));
+		expect(queryByText(container, "Tick 1")).not.toBeInTheDocument();
+		expect(queryByText(container, "Tick 2")).toBeInTheDocument();
+
+		// Checking a radio should show the indicator, and hide another indicator if already selected
+		fireEvent.click(getByText(container, "Radio popout button"));
+		expect(queryByText(container, "Circle 1")).not.toBeInTheDocument();
+		expect(queryByText(container, "Circle 2")).not.toBeInTheDocument();
+		fireEvent.click(getByText(container, "Radio 1"));
+		expect(queryByText(container, "Circle 1")).toBeInTheDocument();
+		expect(queryByText(container, "Circle 2")).not.toBeInTheDocument();
+		fireEvent.click(getByText(container, "Radio 2"));
+		expect(queryByText(container, "Circle 1")).not.toBeInTheDocument();
+		expect(queryByText(container, "Circle 2")).toBeInTheDocument();
+	});
+});