@torpor/ui 0.3.4 → 0.3.6

package/src/Drawer/DrawerTrigger.torp

@@ -1,39 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { DrawerContextName, type DrawerContext } from "./DrawerTypes";
-
-interface DrawerTriggerProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-}
-
-/**
- * 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]}
-			{$props?.style}
-			onclick={handleClick}
-		>
-			<slot />
-		</button>
-	}
-}

package/src/Drawer/DrawerTypes.ts

@@ -1,24 +0,0 @@
-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,6 +0,0 @@
-import Drawer from "./Drawer.torp";
-import DrawerContent from "./DrawerContent.torp";
-import DrawerOverlay from "./DrawerOverlay.torp";
-import DrawerTrigger from "./DrawerTrigger.torp";
-
-export { Drawer, DrawerContent, DrawerOverlay, DrawerTrigger };

package/src/Form/CheckBox.torp

@@ -1,94 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import getId from "../utils/getId";
-import { FormContextName, FieldContextName, type FormContext, type FieldContext } from "./FormTypes";
-
-interface CheckBoxProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** The name of the checkbox's form data field */
-	name?: string,
-	/** Whether the checkbox is checked */
-	checked?: boolean,
-	/** An ARIA label for describing the checkbox to screen readers when there is no associated label element */
-	ariaLabel?: string,
-	/** Raised on change */
-	onchange?: (e: Event) => void,
-	/** Raised on input */
-	oninput?: (e: Event) => void,
-};
-
-/**
- * A checkbox input in a form.
- */
-export default function CheckBox($props: CheckBoxProps | undefined) {
-	let defaultId = getId();
-
-	let name = $props?.name
-
-	let blurred = false;
-
-	// Get stuff out of the FormContext and FieldContext
-	const formContext = $context[FormContextName] as FormContext;
-	const fieldContext = $context[FieldContextName] as FieldContext;
-	if (fieldContext) {
-		name ??= fieldContext.name;
-	}
-
-	// Use the FieldContext's state, or create a new one
-	let $state = fieldContext?.state ?? $watch({
-		inputId: $props?.id ?? defaultId,
-		value: $props?.checked,
-		errors: {} as Record<string, string>,
-		valid: false,
-		message: "",
-	});
-
-	// Binding
-	$run(() => {
-		if ($props !== undefined) {
-			$props.checked = $state.value === true;
-		}
-	});
-
-	// Set the input ID now that we know it and it will get linked with the associated label
-	$state.inputId = $props?.id ?? defaultId;
-
-	function handleInput(e: Event) {
-		if (formContext) {
-			formContext.validate();
-		}
-		if (fieldContext && blurred) {
-			fieldContext.validate();
-		}
-		if ($props?.oninput) {
-			$props.oninput(e);
-		}
-	}
-
-	function handleBlur() {
-		if (fieldContext) {
-			fieldContext.validate();
-		}
-		blurred = true;
-	}
-
-	@render {
-		<input
-			id={$props?.id ?? defaultId}
-			class={`torp-check-box
-			 ${$props?.class ?? ""}`.trim()}
-			type="checkbox"
-			{name}
-			&checked={$state.value}
-			aria-label={$props?.ariaLabel}
-			data-valid={$state.valid ? "valid" : "invalid"}
-			onchange={$props?.onchange}
-			oninput={handleInput}
-			onblur={handleBlur}
-		/>
-	}
-}

package/src/Form/Field.torp

@@ -1,95 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-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;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** 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]}
-			{$props?.style}
-			data-valid={$state.valid ? "valid" : "invalid"}
-		>
-			<slot />
-		</div>
-	}
-}

package/src/Form/File.torp

@@ -1,102 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import getId from "../utils/getId";
-import { FormContextName, FieldContextName, type FormContext, type FieldContext } from "./FormTypes";
-
-interface FileProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** The name of the input's form data field */
-	name?: string,
-	/** The type of files that this input accepts e.g. `image/*` */
-	accept?: string,
-	/** Text to display when the input value is empty */
-	placeholder?: string,
-	/** Whether the input should be readonly */
-	readonly?: boolean,
-	/** The maximum number of characters allowed for the input value */
-	maxlength?: number,
-	/** An ARIA label for describing the input to screen readers when there is no associated label element */
-	ariaLabel?: string,
-	/** Raised on change */
-	onchange?: (e: Event) => void,
-	/** Raised on input */
-	oninput?: (e: Event) => void,
-};
-
-/**
- * A file input in a form.
- */
-export default function File($props: FileProps | undefined) {
-	let defaultId = getId();
-
-	let name = $props?.name
-
-	let blurred = false;
-
-	// Get stuff out of the FormContext and FieldContext
-	const formContext = $context[FormContextName] as FormContext;
-	const fieldContext = $context[FieldContextName] as FieldContext;
-	if (fieldContext) {
-		name ??= fieldContext.name;
-	}
-
-	// This will change the form's enctype to `multipart/form-data`
-	if (formContext) {
-		formContext.state.hasFile = true;
-	}
-
-	// Use the FieldContext's state, or create a new one
-	let $state = fieldContext?.state ?? $watch({
-		inputId: $props?.id ?? defaultId,
-		// You can't use value with a file input
-		value: null,
-		errors: {} as Record<string, string>,
-		valid: false,
-		message: "",
-	});
-
-	// Set the input ID now that we know it and it will get linked with the associated label
-	$state.inputId = $props?.id ?? defaultId;
-
-	function handleInput(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
-		if (formContext) {
-			formContext.validate();
-		}
-		if (fieldContext && blurred) {
-			fieldContext.validate();
-		}
-		if ($props?.oninput) {
-			$props.oninput(e);
-		}
-	}
-
-	function handleBlur() {
-		if (fieldContext) {
-			fieldContext.validate();
-		}
-		blurred = true;
-	}
-
-	@render {
-		<input
-			id={$props?.id ?? defaultId}
-			class={["torp-file", $props?.class]}
-			{$props?.style}
-			type="file"
-			{name}
-			{$props?.accept}
-			{$props?.placeholder}
-			{$props?.readonly}
-			{$props?.maxlength}
-			aria-label={$props?.ariaLabel}
-			data-valid={$state.valid ? "valid" : "invalid"}
-			onchange={$props?.onchange}
-			oninput={handleInput}
-			onblur={handleBlur}
-		/>
-	}
-}

package/src/Form/Form.torp

@@ -1,146 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { FormContextName, type ValidationIssue, type FormContext } from "./FormTypes";
-import { StandardSchemaV1 } from "./StandardSchemaV1"
-
-interface FormProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** The data to display in the form */
-	data?: any,
-	/** Where to post the form's data **/
-	action?: string,
-	/** The action to use when submitting the form, which defaults to POST */
-	method?: string,
-	/**
-	 * The form's encoding type e.g. `multipart/form-data` where there are file
-	 * inputs. This will be automatically set unless overridden
-	 */
-	enctype?: 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 ?? {},
-		hasFile: false,
-		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]` etc
-						issues.push({ 
-							// @ts-ignore
-							path: issue.path.map((p) => p.key ?? p).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]}
-			{$props?.style}
-			method={$props?.method ?? "POST"}
-			enctype={$props?.enctype ?? ($state.hasFile ? "multipart/form-data" : undefined)}
-			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

@@ -1,35 +0,0 @@
-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: {
-		/**
-		 * Whether there is a file input in the form. If so, the form's enctype
-		 * will be set to `multipart/form-data`
-		 */
-		hasFile: boolean;
-		issues: ValidationIssue[];
-	};
-	validate: () => void;
-}
-
-export interface FieldContext {
-	name: string;
-	schema?: StandardSchemaV1;
-	state: {
-		inputId: string;
-		value?: any;
-		issues: ValidationIssue[];
-		valid: boolean;
-		message: string;
-	};
-	validate: () => void;
-}

package/src/Form/Hidden.torp

@@ -1,25 +0,0 @@
-import getId from "../utils/getId";
-import { FormContextName, FieldContextName, type FormContext, type FieldContext } from "./FormTypes";
-
-interface HiddenProps {
-	/** An ID for the root element */
-	id?: string;
-	/** The name of the input's form data field */
-	name?: string,
-	/** The data value that this field is bound to */
-	value?: any,
-};
-
-/**
- * A standard input in a form.
- */
-export default function Hidden($props: HiddenProps | undefined) {
-	@render {
-		<input
-			{$props?.id}
-			type="hidden"
-			{$props?.name}
-			{$props?.value}
-		/>
-	}
-}

package/src/Form/Input.torp

@@ -1,112 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import getId from "../utils/getId";
-import { FormContextName, FieldContextName, type FormContext, type FieldContext } from "./FormTypes";
-
-interface InputProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** The input type */
-	type?: string, // TODO: "text" | "number" | "password" | "email" | "url" | "tel",
-	/** The name of the input's form data field */
-	name?: string,
-	/** The data value that this field is bound to */
-	value?: any,
-	/** Text to display when the input value is empty */
-	placeholder?: string,
-	/** Whether the input should be readonly */
-	readonly?: boolean,
-	/** Whether the input's value is required */
-	required?: boolean,
-	/** The maximum number of characters allowed for the input value */
-	maxlength?: number,
-	/** An ARIA label for describing the input to screen readers when there is no associated label element */
-	ariaLabel?: string,
-	/** Raised on change */
-	onchange?: (e: Event) => void,
-	/** Raised on input */
-	oninput?: (e: Event) => void,
-};
-
-/**
- * A standard input in a form.
- */
-export default function Input($props: InputProps | undefined) {
-	let defaultId = getId();
-
-	let type = $props?.type ?? "text";
-	let name = $props?.name
-
-	let blurred = false;
-
-	// Get stuff out of the FormContext and FieldContext
-	const formContext = $context[FormContextName] as FormContext;
-	const fieldContext = $context[FieldContextName] as FieldContext;
-	if (fieldContext) {
-		name ??= fieldContext.name;
-	}
-
-	// Use the FieldContext's state, or create a new one
-	let $state = fieldContext?.state ?? $watch({
-		inputId: $props?.id ?? defaultId,
-		value: $props?.value,
-		errors: {} as Record<string, string>,
-		valid: false,
-		message: "",
-	});
-
-	// Binding
-	$run(() => {
-		if ($props !== undefined) {
-			$props.value = $state.value;
-		}
-	});
-
-	// Set the input ID now that we know it and it will get linked with the associated label
-	$state.inputId = $props?.id ?? defaultId;
-
-	// NOTE: Adapted this from https://stackoverflow.com/a/57393751,
-	// not sure if it's still a good way to do things
-	function handleInput(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
-		$state.value = $props!.type?.match(/^(number|range)$/) ? +e.currentTarget.value : e.currentTarget.value;
-		if (formContext) {
-			formContext.validate();
-		}
-		if (fieldContext && blurred) {
-			fieldContext.validate();
-		}
-		if ($props?.oninput) {
-			$props.oninput(e);
-		}
-	}
-
-	function handleBlur() {
-		if (fieldContext) {
-			fieldContext.validate();
-		}
-		blurred = true;
-	}
-
-	@render {
-		<input
-			id={$props?.id ?? defaultId}
-			class={["torp-input", $props?.class]}
-			{$props?.style}
-			{type}
-			{name}
-			&value={$state.value}
-			{$props?.placeholder}
-			{$props?.readonly}
-			{$props?.required}
-			{$props?.maxlength}
-			aria-label={$props?.ariaLabel}
-			data-valid={$state.valid ? "valid" : "invalid"}
-			onchange={$props?.onchange}
-			oninput={handleInput}
-			onblur={handleBlur}
-		/>
-	}
-}