@torpor/ui 0.2.0 → 0.3.0

package/src/icons/Minus.torp

@@ -1,8 +1,10 @@
-export default function Minus() {
+import { type IconProps } from "./IconTypes";
+
+export default function Minus($props: IconProps | undefined) {
 	@render {
 		<svg
-			{$props.id}
-			class={`torp-icon ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
 			viewBox="0 0 100 100"
 			stroke-linejoin="round"
 			stroke-width="12"

package/src/icons/Plus.torp

@@ -1,8 +1,10 @@
-export default function Plus() {
+import { type IconProps } from "./IconTypes";
+
+export default function Plus($props: IconProps | undefined) {
 	@render {
 		<svg
-			{$props.id}
-			class={`torp-icon ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
 			viewBox="0 0 100 100"
 			stroke-linejoin="round"
 			stroke-width="12"

package/src/motion/fade.ts

@@ -1,7 +1,16 @@
-interface AnimationFrame {
-	opacity: number;
-}
-
-const animationFrames: AnimationFrame[] = [{ opacity: 0 }, { opacity: 1 }];
+import { type Animation } from "@torpor/view";
 
-export default animationFrames;
+export default function fade(
+	_el: HTMLElement,
+	options?: number | KeyframeAnimationOptions,
+): Animation {
+	const keyframes = [
+		{
+			opacity: 0,
+		},
+		{
+			opacity: 1,
+		},
+	];
+	return { keyframes, options };
+}

package/src/motion/grow.ts

@@ -0,0 +1,23 @@
+import { type Animation } from "@torpor/view";
+import measure from "./measure";
+
+export default function grow(
+	el: HTMLElement,
+	options?: number | KeyframeAnimationOptions,
+): Animation {
+	const height = measure(el, (el) => el.clientHeight);
+	const keyframes = [
+		{
+			height: "0px",
+			overflow: "hidden",
+			paddingTop: "0px",
+			paddingBottom: "0px",
+			marginTop: "0px",
+			marginBottom: "0px",
+		},
+		{
+			height: height + "px",
+		},
+	];
+	return { keyframes, options };
+}

package/src/motion/index.ts

@@ -1,3 +1,6 @@
 import fade from "./fade";
+import grow from "./grow";
+import measure from "./measure";
+import slide from "./slide";
 
-export { fade };
+export { fade, grow, measure, slide };

package/src/motion/measure.ts

@@ -0,0 +1,28 @@
+/**
+ * Measures an element before it is added to the DOM
+ * @param el The element to measure
+ * @param fn The function to use to get the desired measurement (e.g. el.offsetHeight)
+ */
+export default function measure(el: HTMLElement, fn: (_: HTMLElement) => number): number {
+	// From https://stackoverflow.com/a/46707458
+	let oldVisibility = el.style.visibility;
+	let oldPosition = el.style.position;
+
+	let oldParent = el.parentNode;
+	let oldBefore = el.nextSibling;
+
+	el.style.visibility = "hidden";
+	el.style.position = "absolute";
+
+	document.body.appendChild(el);
+	let result = fn(el);
+	el.parentNode!.removeChild(el);
+
+	if (oldParent !== null) {
+		oldParent.insertBefore(el, oldBefore);
+		el.style.visibility = oldVisibility;
+		el.style.position = oldPosition;
+	}
+
+	return result;
+}

package/src/motion/slide.ts

@@ -0,0 +1,45 @@
+import { type Animation } from "@torpor/view";
+import measure from "./measure";
+
+interface Options extends KeyframeAnimationOptions {
+	side: "left" | "right" | "top" | "bottom";
+}
+
+export default function slide(el: HTMLElement, options?: Options): Animation {
+	let position = options?.side ?? "left";
+	switch (position) {
+		case "left": {
+			el.style.left = "0px";
+			const width = measure(el, (el) => el.offsetWidth);
+			const keyframes = [
+				{ transform: `translateX(-${width}px)` },
+				{ transform: "translateX(0px)" },
+			];
+			return { keyframes, options };
+		}
+		case "top": {
+			el.style.top = "0px";
+			const height = measure(el, (el) => el.offsetHeight);
+			const keyframes = [
+				{ transform: `translateY(-${height}px)` },
+				{ transform: "translateY(0px)" },
+			];
+			return { keyframes, options };
+		}
+		case "right": {
+			el.style.right = "0px";
+			const width = measure(el, (el) => el.offsetWidth);
+			const keyframes = [{ transform: `translateX(${width}px)` }, { transform: "translateX(0px)" }];
+			return { keyframes, options };
+		}
+		case "bottom": {
+			el.style.bottom = "0px";
+			const height = measure(el, (el) => el.offsetHeight);
+			const keyframes = [
+				{ transform: `translateY(${height}px)` },
+				{ transform: "translateY(0px)" },
+			];
+			return { keyframes, options };
+		}
+	}
+}

package/src/mount/clickPopover.ts

@@ -0,0 +1,51 @@
+//import type { Component } from "@torpor/view";
+//import showPopover from "../Modal/showModal";
+//
+//interface ClickPopoverOptions {
+//	popover: Component;
+//	props?: Record<PropertyKey, any>;
+//}
+//
+///**
+// * A mount directive for showing a popover when an element is clicked.
+// * @param node The element to show the popover for
+// * @param options Options for showing the popover, consisting of the popover component and any props
+// */
+//export default function clickPopover(node: HTMLElement, options: ClickPopoverOptions) {
+//	const { popover, props } = options;
+//
+//	// Add a click event handler to the node
+//	node.addEventListener("click", handleClick);
+//
+//	function handleClick(e: MouseEvent) {
+//		e.preventDefault();
+//		show();
+//	}
+//
+//	let div: HTMLDivElement;
+//
+//	function show() {
+//		// Show the popover in a div
+//		if (div) {
+//			document.body.removeChild(div);
+//		}
+//		div = document.createElement("div");
+//		document.body.appendChild(div);
+//
+//		showPopover(popover, node, props, div);
+//	}
+//
+//	return {
+//		destroy(): void {
+//			// Remove the event listener from the node on destroy
+//			node.removeEventListener("click", handleClick);
+//
+//			// Remove the div we added
+//			// TODO: Should we do this in more places?
+//			if (div) {
+//				document.body.removeChild(div);
+//			}
+//		},
+//	};
+//}
+//

package/src/mount/contextPopover.ts

@@ -0,0 +1,51 @@
+//import type { Component } from "@torpor/view";
+//import showPopover from "../Modal/showModal";
+//
+//interface ContextPopoverOptions {
+//	popover: Component;
+//	props?: Record<PropertyKey, any>;
+//}
+//
+///**
+// * A mount directive for showing a popover when the user opens an element's context menu.
+// * @param node The element to show the popover for
+// * @param options Options for showing the popover, consisting of the popover component and any props
+// */
+//export default function contextPopover(node: HTMLElement, options: ContextPopoverOptions) {
+//	const { popover, props } = options;
+//
+//	// Add a contextmenu event handler to the node
+//	node.addEventListener("contextmenu", handleClick);
+//
+//	function handleClick(e: MouseEvent) {
+//		e.preventDefault();
+//		show();
+//	}
+//
+//	let div: HTMLDivElement;
+//
+//	function show() {
+//		// Show the popover in a div
+//		if (div) {
+//			document.body.removeChild(div);
+//		}
+//		div = document.createElement("div");
+//		document.body.appendChild(div);
+//
+//		showPopover(popover, node, props, div);
+//	}
+//
+//	return {
+//		destroy(): void {
+//			// Remove the event listener from the node on destroy
+//			node.removeEventListener("contextmenu", handleClick);
+//
+//			// Remove the div we added
+//			// TODO: Should we do this in more places?
+//			if (div) {
+//				document.body.removeChild(div);
+//			}
+//		},
+//	};
+//}
+//

package/src/mount/hoverPopover.ts

@@ -0,0 +1,58 @@
+//import type { Component } from "@torpor/view";
+//import showPopover from "../Modal/showModal";
+//import hoverTrigger from "./hoverTrigger";
+//
+//interface HoverPopoverOptions {
+//	popover: Component;
+//	props?: Record<PropertyKey, any>;
+//	hoverDelay?: number;
+//	touchDelay?: number;
+//}
+//
+///**
+// * A mount directive for showing a popover when an element is hovered.
+// * @param node The element to show the popover for
+// * @param options Options for showing the popover, consisting of the popover component, any props and delays for hover and touch
+// */
+//export default function hoverPopover(node: HTMLElement, options: HoverPopoverOptions): () => void {
+//	const { popover, props, hoverDelay, touchDelay } = options;
+//
+//	let div: HTMLDivElement | undefined;
+//
+//	function onHover(node: HTMLElement, e: MouseEvent | TouchEvent) {
+//		// Show the popover in a div
+//		if (div) {
+//			document.body.removeChild(div);
+//		}
+//		div = document.createElement("div");
+//		document.body.appendChild(div);
+//
+//		// Get the position relative to the element, so we can reposition on scroll
+//		const rect = node.getBoundingClientRect();
+//		let position: { x: number; y: number };
+//		if (e.type.startsWith("mouse")) {
+//			const me = e as MouseEvent;
+//			position = { x: me.clientX - rect.left, y: me.clientY - rect.top };
+//		} else {
+//			const te = e as TouchEvent;
+//			position = {
+//				x: te.touches[0].clientX - rect.left,
+//				y: te.touches[0].clientY - rect.top,
+//			};
+//		}
+//		const allProps = Object.assign({}, props, { anchor: node, position });
+//
+//		showPopover(popover, node, allProps, div);
+//	}
+//
+//	function onExit() {
+//		// Remove the div
+//		if (div) {
+//			document.body.removeChild(div);
+//			div = undefined;
+//		}
+//	}
+//
+//	return hoverTrigger(node, { onHover, onExit, hoverDelay, touchDelay });
+//}
+//

package/test/Accordion/components/AccordionAccessibility.torp

@@ -6,7 +6,7 @@ import {
 	AccordionContent,
 } from "../../../src/Accordion/index";
 
-export default function AccordionAccessibility() {
+export default function AccordionAccessibility($props: any) {
 	@render {
 		<Accordion value={$props.value} type="multiple">
 			<AccordionItem>

package/test/Accordion/components/AccordionKeyboard.torp

@@ -6,7 +6,7 @@ import {
 	AccordionContent,
 } from "../../../src/Accordion/index";
 
-export default function AccordionKeyboard() {
+export default function AccordionKeyboard($props: any) {
 	@render {
 		<Accordion value={$props.value} type="multiple">
 			<AccordionItem>

package/test/Accordion/components/AccordionList.torp

@@ -6,7 +6,7 @@ import {
 	AccordionContent,
 } from "../../../src/Accordion/index";
 
-export default function AccordionList() {
+export default function AccordionList($props: any) {
 	@render {
 		<Accordion value={$props.value}>
 			@for (let item of $props.items) {

package/test/Accordion/components/AccordionMultiple.torp

@@ -6,9 +6,9 @@ import {
 	AccordionContent,
 } from "../../../src/Accordion/index";
 
-export default function AccordionMultiple() {
+export default function AccordionMultiple($props: any) {
 	@render {
-		<Accordion value={$props.value} type="multiple">
+		<Accordion value={$props?.value} type="multiple">
 			<AccordionItem>
 				<AccordionHeader as="h4">
 					<AccordionTrigger>Header 1</AccordionTrigger>

package/test/Accordion/components/AccordionSingle.torp

@@ -6,9 +6,9 @@ import {
 	AccordionContent,
 } from "../../../src/Accordion/index";
 
-export default function AccordionSingle() {
+export default function AccordionSingle($props: any) {
 	@render {
-		<Accordion value={$props.value}>
+		<Accordion value={$props?.value}>
 			<AccordionItem>
 				<AccordionHeader as="h4">
 					<AccordionTrigger>Header 1</AccordionTrigger>

package/test/Dialog/accessibility-modal.test.ts

@@ -2,13 +2,13 @@ import { queryByText } from "@testing-library/dom";
 import "@testing-library/jest-dom/vitest";
 import { mount } from "@torpor/view";
 import { assert, describe, expect, it } from "vitest";
-import DialogAccessibility from "./components/DialogAccessibility.torp";
+import DialogModal from "./components/DialogModal.torp";
 
 describe("Dialog", () => {
 	it("Accessibility -- modal", async () => {
 		const container = document.createElement("div");
 		document.body.appendChild(container);
-		mount(container, DialogAccessibility, { modal: true, ariaAnnounce: false });
+		mount(container, DialogModal, { modal: true, ariaAnnounce: false });
 
 		// Tests from https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/
 		// This is for a Dialog in a Popover with its modal property set to true

package/test/Dialog/components/DialogAccessibility.torp

@@ -1,4 +1,3 @@
-import { Popover, PopoverContent } from "../../../src/Popover/index";
 import {
 	Dialog,
 	DialogHeader,
@@ -8,24 +7,19 @@ import {
 } from "../../../src/Dialog/index";
 
 export default function DialogAccessibility($props: any) {
-	$props.modal ??= false;
 	$props.alert ??= false;
 	$props.ariaAnnounce ??= true;
 
 	let color = "";
 
 	@render {
-		<Popover visible modal={$props.modal}>
-			<PopoverContent>
-				<Dialog alert={$props.alert}>
-					<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>
-					</DialogFooter>
-				</Dialog>
-			</PopoverContent>
-		</Popover>
+		<Dialog alert={$props.alert}>
+			<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>
+			</DialogFooter>
+		</Dialog>
 	}
 }

package/test/Dialog/components/DialogFunction.torp

@@ -1,12 +1,11 @@
-import { showPopoverPrompt } from "../../../src/Popover";
-import CustomDialog from "./CustomDialog.torp";
+import { Modal, ModalContent, showPrompt } from "../../../src/Modal/index";
+import { Dialog, DialogBody, DialogFooter, DialogButton } from "../../../src/Dialog/index";
 
 export default function DialogFunction($props: any) {
 	let $state = $watch({ color: "" });
 
 	async function show() {
-		// @ts-ignore
-		$state.color = await showPopoverPrompt(CustomDialog, null, $parent);
+		$state.color = await showPrompt(CustomDialog, null, $parent);
 	}
 
 	@render {
@@ -18,3 +17,20 @@ export default function DialogFunction($props: any) {
 	}
 }
 
+function CustomDialog($props: any) {
+	@render {
+		<Modal visible callback={$props.callback}>
+			<ModalContent>
+				<Dialog>
+					<DialogBody>
+						<p>Which color do you prefer?</p>
+					</DialogBody>
+					<DialogFooter>
+						<DialogButton value="blue">Blue</DialogButton>
+						<DialogButton value="red">Red</DialogButton>
+					</DialogFooter>
+				</Dialog>
+			</ModalContent>
+		</Modal>
+	}
+}

package/test/Dialog/components/DialogModal.torp

@@ -0,0 +1,30 @@
+import { Modal, ModalContent } from "../../../src/Modal/index";
+import {
+	Dialog,
+	DialogHeader,
+	DialogBody,
+	DialogFooter,
+	DialogButton
+} from "../../../src/Dialog/index";
+
+export default function DialogModal($props: any) {
+	$props.alert ??= false;
+	$props.ariaAnnounce ??= true;
+
+	let color = "";
+
+	@render {
+		<Modal visible>
+			<ModalContent>
+				<Dialog alert={$props.alert}>
+					<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>
+					</DialogFooter>
+				</Dialog>
+			</ModalContent>
+		</Modal>
+	}
+}

package/test/Dialog/components/DialogVariable.torp

@@ -1,14 +1,14 @@
-import { Popover, PopoverContent } from "../../../src/Popover/index";
+import { Modal, ModalContent } from "../../../src/Modal/index";
 import { Dialog, DialogBody, DialogFooter, DialogButton } from "../../../src/Dialog/index";
 
 export default function DialogVariable($props: any) {
 	let $state = $watch({
 		color: "",
-		showPopover: false
+		showModal: false
 	});
 
 	@render {
-		<button type="button" onclick={(e) => ($state.showPopover = !$state.showPopover)}>
+		<button type="button" onclick={(e) => ($state.showModal = !$state.showModal)}>
 			Show the modal
 		</button>
 
@@ -16,8 +16,8 @@ export default function DialogVariable($props: any) {
 			<p>Your favorite color is {$state.color}?!</p>
 		}
 
-		<Popover visible={$state.showPopover}>
-			<PopoverContent>
+		<Modal &visible={$state.showModal}>
+			<ModalContent>
 				<Dialog>
 					<DialogBody>
 						<p>Which color do you prefer?</p>
@@ -27,7 +27,7 @@ export default function DialogVariable($props: any) {
 						<DialogButton value="red" onclick={() => ($state.color = "red")}>Red</DialogButton>
 					</DialogFooter>
 				</Dialog>
-			</PopoverContent>
-		</Popover>
+			</ModalContent>
+		</Modal>
 	}
 }

package/test/Disclosure/accessibility.test.ts

@@ -1,5 +1,6 @@
-import { fireEvent, getByText, queryByText } from "@testing-library/dom";
+import { getByText, queryByText } from "@testing-library/dom";
 import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
 import { mount } from "@torpor/view";
 import { describe, expect, it } from "vitest";
 import DisclosureTest from "./components/DisclosureTest.torp";
@@ -19,7 +20,7 @@ describe("Disclosure", () => {
 		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"));
+		await userEvent.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

package/test/Disclosure/components/DisclosureTest.torp

@@ -7,7 +7,7 @@ import {
 
 export default function DisclosureAccessibility($props: { expanded: boolean }) {
 	@render {
-		<Disclosure {$props.expanded}>
+		<Disclosure {$props?.expanded}>
 			<DisclosureHeader as="h4">
 				<DisclosureTrigger>Disclosure header</DisclosureTrigger>
 			</DisclosureHeader>

package/test/Disclosure/toggle.test.ts

@@ -1,5 +1,6 @@
-import { fireEvent, getByText, queryByText } from "@testing-library/dom";
+import { getByText, queryByText } from "@testing-library/dom";
 import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
 import { mount } from "@torpor/view";
 import { describe, expect, it } from "vitest";
 import DisclosureTest from "./components/DisclosureTest.torp";
@@ -13,7 +14,7 @@ describe("Disclosure", () => {
 		expect(queryByText(container, "Disclosure content")).not.toBeInTheDocument();
 
 		// Clicking the header should reveal the body
-		fireEvent.click(getByText(container, "Disclosure header"));
+		await userEvent.click(getByText(container, "Disclosure header"));
 		expect(queryByText(container, "Disclosure content")).toBeInTheDocument();
 	});
 });

package/test/Form/components/FieldTest.torp

@@ -0,0 +1,25 @@
+import {
+	Field,
+	Label,
+	Input,
+	Message,
+} from "../../../src/Form/index";
+import * as z from "zod";
+
+export default function FormTest($props: { value: string }) {
+	const schema = z.string().trim().min(1, { message: 'Name is required!' });
+
+	let $state = $watch({
+		data: {
+			name: "",
+		}
+	});
+
+	@render {
+		<Field name="name" &value={$state.data.name} {schema}>
+			<Label>Name:</Label>
+			<Input id="name-id" placeholder="Name..." />
+			<Message />
+		</Field>
+	}
+}

package/test/Form/components/FormTest.torp

@@ -0,0 +1,31 @@
+import {
+	Form,
+	Field,
+	Label,
+	Input,
+	Message,
+} from "../../../src/Form/index";
+import * as z from "zod";
+
+export default function FormTest($props: { value: string }) {
+	const schema = z.object({
+		name: z.string().trim().min(1, { message: 'Name is required!' }),
+	});
+
+	let $state = $watch({
+		data: {
+			name: "",
+		}
+	});
+
+	@render {
+		<Form {$state.data} {schema}>
+			<Field name="name" &value={$state.data.name}>
+				<Label>Name:</Label>
+				<Input id="name-id" placeholder="Name..." />
+				<Message />
+			</Field>
+			<button>Submit</button>
+		</Form>
+	}
+}

package/test/Form/components/InputTest.torp

@@ -0,0 +1,9 @@
+import {
+	Input,
+} from "../../../src/Form/index";
+
+export default function FormTest($props: { value: string }) {
+	@render {
+		<Input id="name-id" placeholder="Name..." &value={$props.value} />
+	}
+}