@torpor/ui 0.2.0 → 0.3.0

package/src/Drawer/Drawer.torp

@@ -1,82 +1,123 @@
+import { DrawerContextName, type DrawerContext, type DrawerState } from "./DrawerTypes";
 
-export default function Drawer($props: any) {
-	$props.visible ??= true;
-	$props.position ||= "left";
+interface DrawerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether the drawer is modal. If true, an overlay should be supplied to obscure outside content, and only the drawer content will be visible to screen readers  */
+	modal?: boolean,
+	/** Whether the drawer is visible  */
+	visible?: boolean,
+	/** Which side of the window to show the drawer from */
+	position?: "left" | "right" | "top" | "bottom",
+	/** A function to be called when the user selects a response */
+	callback?: ((value: any) => void),
+	/** Raised when the drawer is opened or closed */
+	ontoggle?: (open: boolean) => void,
+	/** Raised when the drawer has opened */
+	onopen?: () => void,
+	/** Raised when the drawer has closed */
+	onclose?: (result: any) => void,
+}
 
-	let offscreen: HTMLElement | undefined;
+/**
+ * A drawer that can be used to show rich content or obtain information from a user.
+ *
+ * See [the WAI ARIA guidelines for Dialogs](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/).
+ *
+ * The structure of a Drawer is:
+ *
+ * ```
+ * <Drawer>
+ * 	<DrawerTrigger /> (optional)
+ * 	<DrawerContent />
+ * </Drawer>
+ * ```
+ */
+export default function Drawer($props: DrawerProps | undefined) {
+	let $state: DrawerState = $watch({
+		visible: false,
+		modal: $props?.modal ?? false,
+		position: $props?.position ?? "left",
+	});
 
-	// From https://stackoverflow.com/a/46707458
-	function measure(el, fn) {
-		let oldVisibility = el.style.visibility;
-		let oldPosition = el.style.position;
+	// Sync props and state
+	$run(() => {
+		$state.visible = $props?.visible ?? false;
+	});
+	$run(() => {
+		if ($props !== undefined) {
+			$props.visible = $state.visible;
+		}
+	});
 
-		let oldParent = el.parentNode;
-		let oldBefore = el.nextNode;
+	let result: any;
 
-		el.style.visibility = "hidden";
-		el.style.position = "absolute";
+	// Set the context to pass down to items
+	let context: DrawerContext = {
+		handleButton,
+		handleClickOutside,
+		state: $state,
+	};
+	$context[DrawerContextName] = context;
 
-		document.body.appendChild(el);
-		let result = fn(el);
-		el.parentNode.removeChild(el);
+	// Dispatch the toggle event when the drawer is opened or closed
+	let firstToggle = true;
+	$run(() => {
+		const ontoggle = $props?.ontoggle;
+		const onopen = $props?.onopen;
+		const onclose = $props?.onclose;
+		const visible = $state.visible;
+		if (firstToggle) {
+			firstToggle = false;
+		} else {
+			if (ontoggle) ontoggle(visible);
+			if (visible) {
+				if (onopen) onopen()
+			} else {
+				if (onclose) onclose(result);
+			}
+		}
+	});
+
+	function handleButton(type: "confirm" | "cancel" | undefined, value?: any) {
+		// Get the button's result
+		switch (type) {
+			case "confirm": {
+				result = value || true;
+				break;
+			}
+			case "cancel": {
+				result = value || false;
+				break;
+			}
+			default: {
+				result = value;
+				break;
+			}
+		}
 
-		oldParent.appendChild(el, oldBefore);
-		el.style.visibility = oldVisibility;
-		el.style.position = oldPosition;
+		// Hide the drawer
+		$state.visible = false;
 
-		return result;
+		// Call the callback
+		if ($props?.callback) {
+			$props?.callback(result);
+		}
 	}
 
-	function transitionArgs() {
-		if (offscreen) {
-			switch ($props.position) {
-				case "left": {
-					offscreen.style.left = 0;
-					const width = measure(offscreen, (el) => el.offsetWidth);
-					return [
-						{ transform: `translateX(-${width}px)` },
-						{ transform: "translateX(0px)" }
-					];
-				}
-				case "top": {
-					offscreen.style.top = 0;
-					const height = measure(offscreen, (el) => el.offsetHeight);
-					return [
-						{ transform: `translateY(-${height}px)` },
-						{ transform: "translateY(0px)" }
-					];
-				}
-				case "right": {
-					offscreen.style.right = 0;
-					const width = measure(offscreen, (el) => el.offsetWidth);
-					return [
-						{ transform: `translateX(${width}px)` },
-						{ transform: "translateX(0px)" }
-					];
-				}
-				case "bottom": {
-					offscreen.style.bottom = 0;
-					const height = measure(offscreen, (el) => el.offsetHeight);
-					return [
-						{ transform: `translateY(${height}px)` },
-						{ transform: "translateY(0px)" }
-					];
-				}
-			}
-		}
+	function handleClickOutside(e: MouseEvent) {
+		e.preventDefault();
+		$state.visible = false;
 	}
 
 	@render {
-		@if ($props.visible) {
-			<div
-				{$props.id}
-				class={`torp-offscreen ${$props.class ?? ""}`.trim()}
-				style="position: fixed;"
-				transition={transitionArgs()}
-				&ref={offscreen}
-			>
-				<slot />
-			</div>
-		}
+		<div
+			{$props?.id}
+			class={`torp-drawer ${$props?.class ?? ""}`.trim()}
+		>
+			<slot />
+		</div>
 	}
-}
+}

package/src/Drawer/DrawerContent.torp

@@ -0,0 +1,80 @@
+import { type Animation } from "@torpor/view";
+import { slide } from "../motion";
+import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
+import { DrawerContextName, type DrawerContext } from "./DrawerTypes";
+
+interface DrawerContentProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * The content that is displayed for a Drawer when it is open.
+ */
+export default function DrawerContent($props: DrawerContentProps | undefined) {
+	let drawer: HTMLElement;
+	let shown = false;
+	let closeOnClick = false;
+
+	// Get stuff out of the DrawerContext
+	const context = $context[DrawerContextName] as DrawerContext;
+	if (!context) {
+		throw new Error("DrawerContent must be contained within a Drawer");
+	}
+	let $state = context.state;
+
+	$run(() => {
+		if (!$state.visible) {
+			hide();
+		}
+	});
+
+	function show() {
+		shown = true;
+
+		// HACK: Because this Drawer could be shown with a click, we need to wait for another mousedown
+		// before we close on click. Otherwise the click immediately bubbles to the document
+		closeOnClick = false;
+		addDocumentEvent("mousedown", handleDocumentMouseDown);
+		addDocumentEvent("click", handleDocumentClick);
+	}
+
+	function hide() {
+		if (!shown) return;
+
+		removeDocumentEvent("mousedown", handleDocumentMouseDown);
+		removeDocumentEvent("click", handleDocumentClick);
+	}
+
+	function handleDocumentMouseDown() {
+		closeOnClick = true;
+	}
+
+	function handleDocumentClick(e: MouseEvent) {
+		if (
+			closeOnClick &&
+			drawer &&
+			!drawer.contains(e.target as HTMLElement)
+		) {
+			e.preventDefault();
+			context.handleClickOutside!(e);
+		}
+	}
+
+	@render {
+		@if ($state.visible) {
+			<div
+				{$props?.id}
+				class={`torp-drawer-content ${$props?.class ?? ""}`.trim()}
+				style="position: fixed;"
+				transition={(e) => slide(e, { side: $state.position })}
+				&ref={drawer}
+				onmount={show}
+			>
+				<slot />
+			</div>
+		}
+	}
+}

package/src/Drawer/DrawerOverlay.torp

@@ -0,0 +1,38 @@
+import { disableScroll } from "../mount/disableScroll";
+import { DrawerContextName, type DrawerContext } from "./DrawerTypes";
+
+interface DrawerOverlayProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * The background overlay for a Drawer component.
+ * Adding an overlay automatically sets the component's `modal` value to true.
+ */
+export default function DrawerOverlay($props: DrawerOverlayProps | undefined) {
+	// Get stuff out of the DrawerContext
+	const context = $context[DrawerContextName] as DrawerContext;
+	if (!context) {
+		throw new Error("DrawerOverlay must be contained within a Drawer");
+	}
+	let $state = context.state;
+
+	// Any drawer with an overlay is modal
+	$state.modal = true;
+
+	@render {
+		@if ($state.visible) {
+			<div
+				{$props?.id}
+				class={`torp-drawer-overlay ${$props?.class ?? ""}`.trim()}
+				tabindex="-1"
+				onmount={(el) => disableScroll(el)}
+			>
+				<slot />
+			</div>
+		}
+	}
+}

package/src/Drawer/DrawerTrigger.torp

@@ -0,0 +1,35 @@
+import { DrawerContextName, type DrawerContext } from "./DrawerTypes";
+
+interface DrawerTriggerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * The button that causes a Drawer to appear or disappear.
+ */
+export default function DrawerTrigger($props: DrawerTriggerProps | undefined) {
+	// Get stuff out of the DrawerContext
+	const context = $context[DrawerContextName] as DrawerContext;
+	if (!context) {
+		throw new Error("DrawerTrigger must be contained within a Drawer");
+	}
+	let $state = context.state;
+
+	function handleClick() {
+		$state.visible = !$state.visible;
+	}
+
+	@render {
+		<button
+			type="button"
+			{$props?.id}
+			class={`torp-drawer-trigger ${$props?.class ?? ""}`.trim()}
+			onclick={handleClick}
+		>
+			<slot />
+		</button>
+	}
+}

package/src/Drawer/DrawerTypes.ts

@@ -0,0 +1,24 @@
+export const DrawerContextName = "Drawer";
+
+/** The shared context for drawer components (Contextual, Prompt and Drawer) */
+export interface DrawerContext {
+	handleButton: (type: "confirm" | "cancel" | undefined, value?: any) => void;
+	// HACK: We need to be able to let children (i.e. Dialogs) override the click outside functionality
+	// There may be a more elegant way to accomplish this too
+	handleClickOutside?: (e: MouseEvent) => void;
+	state: DrawerState;
+	// HACK: focusFirstElement is necessary because if we focus the first element e.g. in a Dialog's
+	// onMount, it will scroll the page to the focused element and mess up our careful positioning
+	// We need to be able to manually set the order to
+	// 1. set visible (so we have an element with content)
+	// 2. set position (so the element is in the right place)
+	// 3. set focus (for accessibility)
+	// There may be a more elegant way to accomplish this!
+	focusFirstElement?: () => void;
+}
+
+export interface DrawerState {
+	visible: boolean;
+	modal: boolean;
+	position: "left" | "right" | "top" | "bottom";
+}

package/src/Drawer/index.ts

@@ -1,3 +1,6 @@
 import Drawer from "./Drawer.torp";
+import DrawerContent from "./DrawerContent.torp";
+import DrawerOverlay from "./DrawerOverlay.torp";
+import DrawerTrigger from "./DrawerTrigger.torp";
 
-export { Drawer };
+export { Drawer, DrawerContent, DrawerOverlay, DrawerTrigger };

package/src/Form/Field.torp

@@ -0,0 +1,91 @@
+import {
+	FormContextName,
+	FieldContextName,
+	type ValidationIssue,
+	type FormContext,
+	type FieldContext,
+} from "./FormTypes";
+import { StandardSchemaV1 } from "./StandardSchemaV1"
+
+interface FieldProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The name of the data that this field contains */
+	name: string,
+	/** The data value that this field is bound to */
+	value?: any,
+	/** The schema validator to use for this form */
+	schema?: StandardSchemaV1,
+};
+
+/**
+ * A field in a form which automatically links up a Label and/or an input
+ * component and/or a Message.
+ */
+export default function Field($props: FieldProps) {
+	let $state = $watch({
+		inputId: "-1",
+		value: $props.value,
+		issues: [] as ValidationIssue[],
+		get valid() {
+			return this.issues.find((i) => i.path === $props.name) === undefined;
+		},
+		get message() {
+			return this.issues.filter((i) => i.path === $props.name).map((i) => i.message).join("\n");
+		},
+	});
+
+	// Binding
+	$run(() => {
+		$props.value = $state.value;
+	});
+
+	// Get stuff out of the FormContext, if applicable
+	const formContext = $context[FormContextName] as FormContext;
+	if (formContext) {
+		$run(() => {
+			$state.issues = formContext.state.issues;
+		});
+	}
+
+	// Set the context to pass down to Labels, Inputs and Messages
+	let context: FieldContext = {
+		name: $props.name,
+		state: $state,
+		validate: handleValidate
+	};
+	$context[FieldContextName] = context;
+
+	async function validate() {
+		if ($props.schema) {
+			const validator = $props.schema["~standard"];
+			let result = validator.validate($props.value);
+			if (result instanceof Promise) {
+				result = await result;
+			}
+			let issues: ValidationIssue[] = [];
+			if (result.issues) {
+				for (let issue of result.issues) {
+					issues.push({ path: $props.name, message: issue.message });
+				}
+			}
+			$state.issues = $state.issues.filter((e) => e.path !== $props.name).concat(issues);
+		}
+	}
+
+	async function handleValidate() {
+		await validate();
+	}
+
+	@render {
+		<div
+			{$props?.id}
+			class={`torp-field ${$props?.class ?? ""}`.trim()}
+			data-valid={$state.valid ? "valid" : "invalid"}
+		>
+			<slot />
+		</div>
+	}
+}

package/src/Form/Form.torp

@@ -0,0 +1,129 @@
+import { FormContextName, type ValidationIssue, type FormContext } from "./FormTypes";
+import { StandardSchemaV1 } from "./StandardSchemaV1"
+
+interface FormProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The data to display in the form */
+	data?: any,
+	/** Where to post the form's data **/
+	action?: string,
+	/** The schema validator to use for this form */
+	schema?: StandardSchemaV1,
+	onsubmit?: (e: SubmitEvent) => boolean | void | Promise<boolean | void>,
+};
+
+/**
+ * A form for submitting values.
+ */
+export default function Form($props: FormProps | undefined) {
+	let $state = $watch({
+		data: $props?.data ?? {},
+		issues: [] as ValidationIssue[],
+		get valid() {
+			return this.issues.length === 0;
+		}
+	});
+
+	let submitted = false;
+
+	// TODO: Load context from build with a submit method that submits to a form action
+
+	// Set the context to pass down to Fields
+	let context: FormContext = {
+		schema: $props?.schema,
+		state: $state,
+		validate: handleValidate
+	};
+	
+	$context[FormContextName] = context;
+
+	async function validate() {
+		if ($props?.schema) {
+			const validator = $props.schema["~standard"];
+			let result = validator.validate($props.data);
+			if (result instanceof Promise) {
+				result = await result;
+			}
+			let issues: ValidationIssue[] = [];
+			if (result.issues) {
+				for (let issue of result.issues) {
+					if (issue.path) {
+						// TODO: arrays with `[0]`
+						issues.push({ path: issue.path.join("."), message: issue.message });
+					}
+				}
+			}
+			$state.issues = issues;
+		}
+	}
+
+	async function handleSubmit(e: SubmitEvent) {
+		// Validate, and proceed with submission if there are no errors
+		await validate();
+		let proceed = $state.valid;
+
+		// Changing inputs from now on will cause revalidation
+		submitted = true;
+
+		// If validation failed, don't continue
+		if (!proceed) {
+			e.preventDefault();
+			return false;
+		}
+
+		// Dispatch the submit event for the user to handle
+		if ($props?.onsubmit) {
+			let userSubmit = $props.onsubmit(e);
+			if (userSubmit instanceof Promise) {
+				userSubmit = await userSubmit;
+			}
+			proceed = userSubmit !== false && !e.defaultPrevented;
+		}
+		
+		// If the user handled the submit, don't continue
+		if (!proceed) {
+			e.preventDefault();
+			return false;
+		}
+
+		// If there's a @torpor/build context, call its submit event
+		let buildContext = $context["TorporBuildContext"];
+		if (buildContext?.onformsubmit) {
+			let buildSubmit = buildContext.onformsubmit(e);
+			if (buildSubmit instanceof Promise) {
+				buildSubmit = await buildSubmit;
+			}
+			proceed = buildSubmit !== false && !e.defaultPrevented;
+		}
+
+		// If @torpor/build handled the submit, don't continue
+		if (!proceed) {
+			e.preventDefault();
+			return false;
+		}
+
+		// Otherwise just let normal form submission go ahead...
+	}
+
+	async function handleValidate() {
+		if (submitted) {
+			await validate();
+		}
+	}
+
+	@render {
+		<form
+			{$props?.id}
+			class={`torp-form ${$props?.class ?? ""}`.trim()}
+			method="POST"
+			onsubmit={handleSubmit}
+			@// Set novalidate only if JS is enabled (to override HTML validation)
+			onmount={(e) => e.novalidate = true }
+		>
+			<slot />
+		</form>
+	}
+}

package/src/Form/FormTypes.ts

@@ -0,0 +1,30 @@
+import { type StandardSchemaV1 } from "./StandardSchemaV1";
+
+export const FormContextName: unique symbol = Symbol("Form");
+export const FieldContextName: unique symbol = Symbol("Field");
+
+export interface ValidationIssue {
+	path: string;
+	message: string;
+}
+
+export interface FormContext {
+	schema?: StandardSchemaV1;
+	state: {
+		issues: ValidationIssue[];
+	};
+	validate: () => void;
+}
+
+export interface FieldContext {
+	name: string;
+	schema?: StandardSchemaV1;
+	state: {
+		inputId: string;
+		value?: any;
+		issues: ValidationIssue[];
+		valid: boolean;
+		message: string;
+	};
+	validate: () => void;
+}