@torpor/ui 0.0.1

package/test/Accordion/components/AccordionAccessibility.torp

@@ -0,0 +1,44 @@
+import {
+	Accordion,
+	AccordionItem,
+	AccordionHeader,
+	AccordionTrigger,
+	AccordionContent,
+} from "../../../src/Accordion/index";
+
+export default function AccordionAccessibility() {
+	@render {
+		<Accordion value={$props.value} type="multiple">
+			<AccordionItem>
+				<AccordionHeader as="h4">
+					<AccordionTrigger>Role Header</AccordionTrigger>
+				</AccordionHeader>
+				<AccordionContent>Role Content</AccordionContent>
+			</AccordionItem>
+			<AccordionItem>
+				<AccordionHeader as="h4">
+					<AccordionTrigger>Open Header</AccordionTrigger>
+				</AccordionHeader>
+				<AccordionContent>Open Content</AccordionContent>
+			</AccordionItem>
+			<AccordionItem>
+				<AccordionHeader as="h4">
+					<AccordionTrigger>Closed Header</AccordionTrigger>
+				</AccordionHeader>
+				<AccordionContent>Closed Content</AccordionContent>
+			</AccordionItem>
+			<AccordionItem>
+				<AccordionHeader as="h4">
+					<AccordionTrigger>Region Header</AccordionTrigger>
+				</AccordionHeader>
+				<AccordionContent ariaRegion>Region Content</AccordionContent>
+			</AccordionItem>
+			<AccordionItem disabled>
+				<AccordionHeader as="h4">
+					<AccordionTrigger>Disabled Header</AccordionTrigger>
+				</AccordionHeader>
+				<AccordionContent>Disabled Content</AccordionContent>
+			</AccordionItem>
+		</Accordion>
+	}
+}

package/test/Accordion/components/AccordionKeyboard.torp

@@ -0,0 +1,32 @@
+import {
+	Accordion,
+	AccordionItem,
+	AccordionHeader,
+	AccordionTrigger,
+	AccordionContent,
+} from "../../../src/Accordion/index";
+
+export default function AccordionKeyboard() {
+	@render {
+		<Accordion value={$props.value} type="multiple">
+			<AccordionItem>
+				<AccordionHeader as="h4">
+					<AccordionTrigger>Header 1</AccordionTrigger>
+				</AccordionHeader>
+				<AccordionContent>Content 1</AccordionContent>
+			</AccordionItem>
+			<AccordionItem>
+				<AccordionHeader as="h4">
+					<AccordionTrigger>Header 2</AccordionTrigger>
+				</AccordionHeader>
+				<AccordionContent>Content 2</AccordionContent>
+			</AccordionItem>
+			<AccordionItem>
+				<AccordionHeader as="h4">
+					<AccordionTrigger>Header 3</AccordionTrigger>
+				</AccordionHeader>
+				<AccordionContent>Content 3</AccordionContent>
+			</AccordionItem>
+		</Accordion>
+	}
+}

package/test/Accordion/components/AccordionList.torp

@@ -0,0 +1,23 @@
+import {
+	Accordion,
+	AccordionItem,
+	AccordionHeader,
+	AccordionTrigger,
+	AccordionContent,
+} from "../../../src/Accordion/index";
+
+export default function AccordionList() {
+	@render {
+		<Accordion value={$props.value}>
+			@for (let item of $props.items) {
+				@key = item.id
+				<AccordionItem>
+					<AccordionHeader as="h4">
+						<AccordionTrigger>{item.header}</AccordionTrigger>
+					</AccordionHeader>
+					<AccordionContent>{item.text}</AccordionContent>
+				</AccordionItem>
+			}
+		</Accordion>
+	}
+}

package/test/Accordion/components/AccordionMultiple.torp

@@ -0,0 +1,32 @@
+import {
+	Accordion,
+	AccordionItem,
+	AccordionHeader,
+	AccordionTrigger,
+	AccordionContent,
+} from "../../../src/Accordion/index";
+
+export default function AccordionMultiple() {
+	@render {
+		<Accordion value={$props.value} type="multiple">
+			<AccordionItem>
+				<AccordionHeader as="h4">
+					<AccordionTrigger>Header 1</AccordionTrigger>
+				</AccordionHeader>
+				<AccordionContent>Content 1</AccordionContent>
+			</AccordionItem>
+			<AccordionItem>
+				<AccordionHeader as="h4">
+					<AccordionTrigger>Header 2</AccordionTrigger>
+				</AccordionHeader>
+				<AccordionContent>Content 2</AccordionContent>
+			</AccordionItem>
+			<AccordionItem>
+				<AccordionHeader as="h4">
+					<AccordionTrigger>Header 3</AccordionTrigger>
+				</AccordionHeader>
+				<AccordionContent>Content 3</AccordionContent>
+			</AccordionItem>
+		</Accordion>
+	}
+}

package/test/Accordion/components/AccordionSingle.torp

@@ -0,0 +1,32 @@
+import {
+	Accordion,
+	AccordionItem,
+	AccordionHeader,
+	AccordionTrigger,
+	AccordionContent,
+} from "../../../src/Accordion/index";
+
+export default function AccordionSingle() {
+	@render {
+		<Accordion value={$props.value}>
+			<AccordionItem>
+				<AccordionHeader as="h4">
+					<AccordionTrigger>Header 1</AccordionTrigger>
+				</AccordionHeader>
+				<AccordionContent>Content 1</AccordionContent>
+			</AccordionItem>
+			<AccordionItem>
+				<AccordionHeader as="h4">
+					<AccordionTrigger>Header 2</AccordionTrigger>
+				</AccordionHeader>
+				<AccordionContent>Content 2</AccordionContent>
+			</AccordionItem>
+			<AccordionItem>
+				<AccordionHeader as="h4">
+					<AccordionTrigger>Header 3</AccordionTrigger>
+				</AccordionHeader>
+				<AccordionContent>Content 3</AccordionContent>
+			</AccordionItem>
+		</Accordion>
+	}
+}

package/test/Accordion/for-items.test.ts

@@ -0,0 +1,54 @@
+import { getByText, queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
+import { $watch, mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+import AccordionList from "./components/AccordionList.torp";
+
+describe("Accordion", () => {
+	it("Items in a for loop", async () => {
+		const user = userEvent.setup();
+
+		let $state = $watch({
+			value: "1",
+			items: [
+				{ id: 0, header: "Item 1", text: "Content 1" },
+				{ id: 1, header: "Item 2", text: "Content 2" },
+				{ id: 2, header: "Item 3", text: "Content 3" },
+			],
+		});
+
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, AccordionList, $state);
+
+		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
+		expect(queryByText(container, "Item 2")).toBeInTheDocument();
+		expect(queryByText(container, "Content 2")).toBeInTheDocument();
+		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
+
+		$state.items.splice(1, 1);
+
+		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
+		expect(queryByText(container, "Item 2")).not.toBeInTheDocument();
+		expect(queryByText(container, "Content 2")).not.toBeInTheDocument();
+		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
+
+		// Clicking header 1 should reveal body 1
+		await user.click(getByText(container, "Item 1"));
+		expect(queryByText(container, "Content 1")).toBeInTheDocument();
+
+		$state.items.push({ id: 3, header: "Item 4", text: "Content 4" });
+
+		expect(queryByText(container, "Content 1")).toBeInTheDocument();
+		expect(queryByText(container, "Content 2")).not.toBeInTheDocument();
+		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
+		expect(queryByText(container, "Item 4")).toBeInTheDocument();
+		expect(queryByText(container, "Content 4")).not.toBeInTheDocument();
+
+		// Clicking header 4 should reveal body 4
+		await user.click(getByText(container, "Item 4"));
+		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
+		expect(queryByText(container, "Content 4")).toBeInTheDocument();
+	});
+});

package/test/Accordion/keyboard.test.ts

@@ -0,0 +1,67 @@
+import { fireEvent, 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 AccordionKeyboard from "./components/AccordionKeyboard.torp";
+
+describe("Accordion", () => {
+	it("Keyboard", async () => {
+		const user = userEvent.setup();
+
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, AccordionKeyboard, { value: ["1", "2"] });
+
+		// Tests from https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
+
+		// Enter or Space:
+		//   * When focus is on the accordion header for a collapsed panel, expands the associated panel.
+		//     If the implementation allows only one panel to be expanded, and if another panel is expanded,
+		//     collapses that panel
+		//   * When focus is on the accordion header for an expanded panel, collapses the panel if the
+		//     implementation supports collapsing. Some implementations require one panel to be expanded
+		//     at all times and allow only one panel to be expanded; so, they do not support a collapse
+		//     function
+		// NOTE: I don't think we can test this
+		// NOTE: Accordion headers are buttons so this functionality should be baked in by default
+		//screen.queryByText('Header 1').focus();
+		//expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
+		//fireEvent(screen.getByText('Header 1'), { key: 'Space' });
+		//expect(screen.queryByText('Content 1')).toBeInTheDocument();
+		//fireEvent(screen.getByText('Header 1'), { key: 'Space' });
+		//expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
+
+		// Tab: Moves focus to the next focusable element; all focusable elements in the accordion are
+		// included in the page Tab sequence
+		// NOTE: I don't think we can test this
+		//fireEvent(screen.getByText('Header 1'), { key: 'Tab' });
+		//expect(document.activeElement).toBe(screen.queryByText('Header 2'));
+
+		// Shift + Tab: Moves focus to the previous focusable element; all focusable elements in the
+		// accordion are included in the page Tab sequence
+		// NOTE: I don't think we can test this
+		//fireEvent(screen.getByText('Header 2'), { key: 'Tab', shiftKey: true });
+		//expect(document.activeElement).toBe(screen.queryByText('Header 1'));
+
+		// Down Arrow: If focus is on an accordion header, moves focus to the next accordion header.
+		// If focus is on the last accordion header, either does nothing or moves focus to the first
+		// accordion header
+		fireEvent(getByText(container, "Header 1"), new KeyboardEvent("keydown", { key: "ArrowDown" }));
+		expect(document.activeElement).toBe(queryByText(container, "Header 2"));
+
+		// Up Arrow: If focus is on an accordion header, moves focus to the previous accordion header.
+		// If focus is on the first accordion header, either does nothing or moves focus to the last
+		// accordion header
+		fireEvent(getByText(container, "Header 2"), new KeyboardEvent("keydown", { key: "ArrowUp" }));
+		expect(document.activeElement).toBe(queryByText(container, "Header 1"));
+
+		// Home: When focus is on an accordion header, moves focus to the first accordion header
+		fireEvent(getByText(container, "Header 3"), new KeyboardEvent("keydown", { key: "Home" }));
+		expect(document.activeElement).toBe(queryByText(container, "Header 1"));
+
+		// End: When focus is on an accordion header, moves focus to the last accordion header
+		fireEvent(getByText(container, "Header 1"), new KeyboardEvent("keydown", { key: "End" }));
+		expect(document.activeElement).toBe(queryByText(container, "Header 3"));
+	});
+});

package/test/Accordion/multiple-item-toggle.test.ts

@@ -0,0 +1,34 @@
+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 AccordionMultiple from "./components/AccordionMultiple.torp";
+
+describe("Accordion", () => {
+	it("Multiple item toggle", async () => {
+		const user = userEvent.setup();
+
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, AccordionMultiple);
+
+		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
+		expect(queryByText(container, "Content 2")).not.toBeInTheDocument();
+		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
+
+		// Clicking header 1 should reveal body 1
+		await user.click(getByText(container, "Header 1"));
+		expect(queryByText(container, "Content 1")).toBeInTheDocument();
+
+		// Clicking header 2 should reveal body 1 and body 2
+		await user.click(getByText(container, "Header 2"));
+		expect(queryByText(container, "Content 1")).toBeInTheDocument();
+		expect(queryByText(container, "Content 2")).toBeInTheDocument();
+
+		// Clicking header 2 again should hide body 2
+		await user.click(getByText(container, "Header 2"));
+		expect(queryByText(container, "Content 1")).toBeInTheDocument();
+		expect(queryByText(container, "Content 2")).not.toBeInTheDocument();
+	});
+});

package/test/Accordion/multiple-item-value.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 AccordionMultiple from "./components/AccordionMultiple.torp";
+
+describe("Accordion", () => {
+	it("Multiple item default value", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, AccordionMultiple, { value: "1" });
+
+		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
+		expect(queryByText(container, "Content 2")).toBeInTheDocument();
+		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
+	});
+});

package/test/Accordion/single-item-toggle.test.ts

@@ -0,0 +1,33 @@
+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 AccordionSingle from "./components/AccordionSingle.torp";
+
+describe("Accordion", () => {
+	it("Single item toggle", async () => {
+		const user = userEvent.setup();
+
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, AccordionSingle);
+
+		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
+		expect(queryByText(container, "Content 2")).not.toBeInTheDocument();
+		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
+
+		// Clicking header 1 should reveal body 1
+		await user.click(getByText(container, "Header 1"));
+		expect(queryByText(container, "Content 1")).toBeInTheDocument();
+
+		// Clicking header 2 should hide body 1 and reveal body 2
+		await user.click(getByText(container, "Header 2"));
+		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
+		expect(queryByText(container, "Content 2")).toBeInTheDocument();
+
+		// Clicking header 2 again should hide body 2
+		await user.click(getByText(container, "Header 2"));
+		expect(queryByText(container, "Content 2")).not.toBeInTheDocument();
+	});
+});

package/test/Accordion/single-item-value.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 AccordionSingle from "./components/AccordionSingle.torp";
+
+describe("Accordion", () => {
+	it("Single item default value", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, AccordionSingle, { value: "1" });
+
+		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
+		expect(queryByText(container, "Content 2")).toBeInTheDocument();
+		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
+	});
+});

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+	"extends": "../tsconfig",
+	"include": ["tsup.config.ts"]
+}

package/tsup.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+	entry: ["src/Accordion/index.ts", "src/motion.ts"],
+	format: ["esm", "cjs"],
+	dts: { entry: ["src/motion.ts"] },
+	clean: true,
+	metafile: true,
+	sourcemap: true,
+	loader: {
+		".torp": "file",
+	},
+	onSuccess: "npm run build:fix",
+});

package/vitest.config.ts

@@ -0,0 +1,12 @@
+import torpor from "@torpor/unplugin/vite";
+import { defineConfig } from "vitest/config";
+
+export default defineConfig(({ mode }) => ({
+	plugins: [torpor()],
+	resolve: {
+		conditions: mode === "test" ? ["browser"] : [],
+	},
+	test: {
+		environment: "jsdom",
+	},
+}));