@torpor/ui 0.2.0 → 0.2.1

package/src/TabGroup/TabGroup.torp

@@ -1,5 +1,22 @@
 import { TabGroupContextName, type TabGroupContext, type ItemState } from "./TabGroupTypes";
 
+interface TabGroupProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The orientation of the tab buttons, which affects keyboard navigation */
+	orientation?: "horizontal" | "vertical",
+	/** How tabs are activated; if automatic they are shown on focus, if manual they must be clicked */
+	activation?: "automatic" | "manual",
+	/** The value of the active TabContent */
+	value?: string | string[],
+	/** If set to true, the user cannot interact with any items in the TabGroup */
+	disabled?: boolean,
+	/** Raised when the active item has changed */
+	onchange?: (value: string | string[]) => void
+}
+
 /**
  * A list of interactive headings coupled with layered sections of content that
  * enable users to reveal a single section of content at a time.
@@ -18,14 +35,9 @@ import { TabGroupContextName, type TabGroupContext, type ItemState } from "./Tab
  * 	<TabContent />
  * </TabGroup>
  * ```
- *
- * @prop {"horizontal" | "vertical"} orientation -- The orientation of the tab buttons, which affects keyboard navigation
- * @prop {"automatic" | "manual"} activation -- How tabs are activated; if automatic they are shown on focus, if manual they must be clicked
- * @prop {string | string[]} value -- The value of the active TabContent
- * @prop {boolean} disabled -- If set to true, the user cannot interact with any items in the TabGroup
- * @prop {(value: string | string[]) => void} [onchange] -- Raised when the active item has changed
  */
-export default function TabGroup($props: any) {
+export default function TabGroup($props: TabGroupProps) {
+	$props ??= $watch({});
 	$props.orientation ||= "horizontal";
 	$props.activation ||= "automatic";
 	$props.value ||= "";
@@ -63,7 +75,7 @@ export default function TabGroup($props: any) {
 	});
 
 	$run(() => {
-		itemStates.forEach((s) => s.parentDisabled = $props.disabled);
+		itemStates.forEach((s) => s.parentDisabled = $props.disabled === true);
 	});
 
 	// Dispatch the change event when the value changes
@@ -74,7 +86,7 @@ export default function TabGroup($props: any) {
 		if (firstChange) {
 			firstChange = false;
 		} else if (ev) {
-			ev(value);
+			ev(value!);
 		}
 	});
 

package/src/TabGroup/TabHeader.torp

@@ -1,5 +1,14 @@
 import { TabGroupContextName, TabItemContextName, type TabGroupContext, type TabItemContext } from "./TabGroupTypes";
 
+interface TabHeaderProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The type of HTML header to use */
+	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+}
+
 /**
  * The header for a tab item, which contains the TabTrigger.
  *
@@ -10,15 +19,15 @@ import { TabGroupContextName, TabItemContextName, type TabGroupContext, type Tab
  * 	<TabTrigger />
  * </TabHeader>
  * ```
- *
- * @prop {"h1" | "h2" | "h3" | "h4" | "h5" | "h6"} as -- The type of HTML header to use
  */
-export default function TabHeader($props: any) {
+export default function TabHeader($props: TabHeaderProps) {
+	$props ??= $watch({});
+
 	const context = $context[TabGroupContextName] as TabGroupContext;
 	if (!context) {
 		throw new Error("TabHeader must be contained within a TabGroup");
 	}
-	let $state = $context[TabGroupContextName].registerHeader($props.index, $props.value);
+	let $state = context.registerHeader($props.index, $props.value);
 
 	const itemContext: TabItemContext = {
 		triggerItem: context.triggerItem,
@@ -44,7 +53,7 @@ export default function TabHeader($props: any) {
 				$state.orientation
 			]}
 			data-state={$state.dataState}
-			data-disabled={$state.dataDisabled}
+			data-disabled={$state.disabled ? "true" : undefined}
 		>
 			<slot />
 		</h4>

package/src/TabGroup/TabList.torp

@@ -1,4 +1,13 @@
-import { TabGroupContextName, TabItemContextName, type TabGroupContext, type TabItemContext } from "./TabGroupTypes";
+import { TabGroupContextName, type TabGroupContext } from "./TabGroupTypes";
+
+interface TabListProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** An ARIA label for describing the tab list to screen readers */
+	ariaLabel?: string,
+}
 
 /**
  * A component that holds the TabHeaders of a TabGroup.
@@ -12,10 +21,10 @@ import { TabGroupContextName, TabItemContextName, type TabGroupContext, type Tab
  * 	</TabHeader>
  * </TabList>
  * ```
- *
- * @prop {string} ariaLabel -- An ARIA label for describing the tab list to screen readers
  */
-export default function TabList($props: any) {
+export default function TabList($props: TabListProps) {
+	$props ??= $watch({});
+
 	// Get stuff out of the TabGroupContext
 	const context = $context[TabGroupContextName] as TabGroupContext;
 	if (!context) {

package/src/TabGroup/TabTrigger.torp

@@ -1,20 +1,28 @@
 import getId from "../utils/getId";
 import { TabItemContextName, type TabItemContext } from "./TabGroupTypes";
 
+interface TabTriggerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
 /**
  * A header button for a tab item, which can be used to reveal an associated TabContent.
  */
-export default function TabTrigger() {
-	let button: HTMLButtonElement;
-
+export default function TabTrigger($props: TabTriggerProps) {
+	$props ??= $watch({});
 	$props.id ||= getId();
 
+	let button: HTMLButtonElement;
+
 	// Get stuff out of the TabItemContext
 	const context = $context[TabItemContextName] as TabItemContext;
 	if (!context) {
 		throw new Error("TabTrigger must be contained within a TabHeader");
 	}
-	let $state = $context[TabItemContextName].state;
+	let $state = context.state;
 
 	// Set the header ID so that it can be used with aria-labelledby in TabContent
 	$state.headerId = $props.id;

package/src/icons/ArrowDown.torp

@@ -1,8 +1,8 @@
-export default function ArrowDown() {
+export default function ArrowDown($props: any) {
 	@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/ArrowLeft.torp

@@ -1,8 +1,8 @@
-export default function ArrowLeft() {
+export default function ArrowLeft($props: any) {
 	@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/ArrowRight.torp

@@ -1,8 +1,8 @@
-export default function ArrowRight() {
+export default function ArrowRight($props: any) {
 	@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/ArrowUp.torp

@@ -1,8 +1,8 @@
-export default function ArrowUp() {
+export default function ArrowUp($props: any) {
 	@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/Bars.torp

@@ -1,8 +1,8 @@
-export default function Bars() {
+export default function Bars($props: any) {
 	@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/Check.torp

@@ -1,8 +1,8 @@
-export default function Check() {
+export default function Check($props: any) {
 	@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/ChevronDown.torp

@@ -1,8 +1,8 @@
-export default function ChevronDown() {
+export default function ChevronDown($props: any) {
 	@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/ChevronLeft.torp

@@ -1,8 +1,8 @@
-export default function ChevronLeft() {
+export default function ChevronLeft($props: any) {
 	@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/ChevronRight.torp

@@ -1,8 +1,8 @@
-export default function ChevronRight() {
+export default function ChevronRight($props: any) {
 	@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/ChevronUp.torp

@@ -1,8 +1,8 @@
-export default function ChevronUp() {
+export default function ChevronUp($props: any) {
 	@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/Cross.torp

@@ -1,8 +1,8 @@
-export default function Cross() {
+export default function Cross($props: any) {
 	@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/Loading.torp

@@ -1,8 +1,8 @@
-export default function Loading() {
+export default function Loading($props: any) {
 	@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="20"

package/src/icons/Minus.torp

@@ -1,8 +1,8 @@
-export default function Minus() {
+export default function Minus($props: any) {
 	@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,8 @@
-export default function Plus() {
+export default function Plus($props: any) {
 	@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/test/Accordion/components/AccordionAccessibility.torp

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

package/test/Accordion/components/AccordionKeyboard.torp

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

package/test/Accordion/components/AccordionList.torp

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

package/test/Accordion/components/AccordionMultiple.torp

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

package/test/Accordion/components/AccordionSingle.torp

@@ -7,6 +7,8 @@ import {
 } from "../../../src/Accordion/index";
 
 export default function AccordionSingle() {
+	$props ??= $watch({});
+
 	@render {
 		<Accordion value={$props.value}>
 			<AccordionItem>

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

@@ -6,6 +6,8 @@ import {
 } from "../../../src/Disclosure/index";
 
 export default function DisclosureAccessibility($props: { expanded: boolean }) {
+	$props ??= $watch({ expanded: false });
+
 	@render {
 		<Disclosure {$props.expanded}>
 			<DisclosureHeader as="h4">

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} />
+	}
+}

package/test/Form/field.test.ts

@@ -0,0 +1,34 @@
+import {
+	fireEvent,
+	getByPlaceholderText,
+	queryByPlaceholderText,
+	queryByText,
+} from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
+import { mount } from "@torpor/view";
+import { expect, test } from "vitest";
+import Field from "./components/FieldTest.torp";
+
+test("Field", async () => {
+	const container = document.createElement("div");
+	document.body.appendChild(container);
+	mount(container, Field);
+
+	// Label, input, message
+	expect(queryByText(container, "Name:")).not.toBeNull();
+	expect(queryByPlaceholderText(container, "Name...")).not.toBeNull();
+	expect(queryByText(container, "Name is required!")).toBeNull();
+
+	// Label `for` should be automatically hooked up
+	expect(queryByPlaceholderText(container, "Name...")).toHaveAttribute("id", "name-id");
+	expect(queryByText(container, "Name:")).toHaveAttribute("for", "name-id");
+
+	// Validation should be fired on blur
+	fireEvent.blur(queryByPlaceholderText(container, "Name...")!);
+	expect(queryByText(container, "Name is required!")).not.toBeNull();
+
+	// After blur, validation should fire on input
+	await userEvent.type(getByPlaceholderText(container, "Name..."), "G");
+	expect(queryByText(container, "Name is required!")).toBeNull();
+});

package/test/Form/form.test.ts

@@ -0,0 +1,34 @@
+import {
+	getByPlaceholderText,
+	getByText,
+	queryByPlaceholderText,
+	queryByText,
+} from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
+import { mount } from "@torpor/view";
+import { expect, test } from "vitest";
+import Form from "./components/FormTest.torp";
+
+test("Form", async () => {
+	const container = document.createElement("div");
+	document.body.appendChild(container);
+	mount(container, Form);
+
+	// Label, input, message
+	expect(queryByText(container, "Name:")).not.toBeNull();
+	expect(queryByPlaceholderText(container, "Name...")).not.toBeNull();
+	expect(queryByText(container, "Name is required!")).toBeNull();
+
+	// Label `for` should be automatically hooked up
+	expect(queryByPlaceholderText(container, "Name...")).toHaveAttribute("id", "name-id");
+	expect(queryByText(container, "Name:")).toHaveAttribute("for", "name-id");
+
+	// Validation should be fired on submit
+	await userEvent.click(getByText(container, "Submit"));
+	expect(queryByText(container, "Name is required!")).not.toBeNull();
+
+	// After submitting, validation should fire on input
+	await userEvent.type(getByPlaceholderText(container, "Name..."), "G");
+	expect(queryByText(container, "Name is required!")).toBeNull();
+});

package/test/Form/input.test.ts

@@ -0,0 +1,19 @@
+import { getByPlaceholderText, queryByPlaceholderText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
+import { mount } from "@torpor/view";
+import { expect, test } from "vitest";
+import Input from "./components/InputTest.torp";
+
+test("Input", async () => {
+	let props = { value: "" };
+
+	const container = document.createElement("div");
+	document.body.appendChild(container);
+	mount(container, Input, props);
+
+	expect(queryByPlaceholderText(container, "Name...")).not.toBeNull();
+
+	await userEvent.type(getByPlaceholderText(container, "Name..."), "Greg");
+	expect(props.value).toBe("Greg");
+});

package/test/Menu/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 MenuAccessibility from "./components/MenuAccessibility.torp";
@@ -35,7 +36,7 @@ describe("Menu", () => {
 		// 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"));
+		await userEvent.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