@remit/ui 0.0.67 → 0.0.69

package/src/components/folder-tree-picker.render.test.ts

@@ -2,24 +2,7 @@ import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import { createElement } from "react";
 import { renderToString } from "react-dom/server";
-import {
-	type FolderTreeNode,
-	FolderTreePicker,
-	folderTreePickerInternals,
-} from "./folder-tree-picker.js";
-
-const {
-	orderFolderNodes,
-	filterFolderTree,
-	collapseFolderTree,
-	queryExpandedPaths,
-	withCreateRows,
-	matchesQuery,
-	findFirstFocusable,
-	findLastFocusable,
-	findNextFocusable,
-	findParentRow,
-} = folderTreePickerInternals;
+import { type FolderTreeNode, FolderTreePicker } from "./folder-tree-picker.js";
 
 const node = (
 	id: string,
@@ -37,11 +20,6 @@ const folders: FolderTreeNode[] = [
 	node("trash", "Trash", "Deleted Messages"),
 ];
 
-const ordered = orderFolderNodes(folders, "/");
-
-const paths = (rows: readonly { folder: FolderTreeNode }[]): string[] =>
-	rows.map((row) => row.folder.path);
-
 /** The opening tag of the element carrying `needle`, attribute order aside. */
 const tagWith = (html: string, needle: string): string => {
 	const at = html.indexOf(needle);
@@ -49,267 +27,6 @@ const tagWith = (html: string, needle: string): string => {
 	return html.slice(html.lastIndexOf("<", at), html.indexOf(">", at) + 1);
 };
 
-describe("folder ordering", () => {
-	it("puts every child straight after its parent", () => {
-		assert.deepEqual(
-			orderFolderNodes(folders, "/").map((folder) => folder.path),
-			[
-				"INBOX",
-				"Archive",
-				"Travel",
-				"Travel/Hotels",
-				"Travel/Hotels/Receipts",
-				"Deleted Messages",
-			],
-		);
-	});
-
-	it("renders a folder whose parent is absent as a root", () => {
-		const orphaned = [
-			node("archive", "Archive", "Archive"),
-			node("apollo", "Apollo", "Work/Projects/Apollo"),
-		];
-		assert.deepEqual(
-			orderFolderNodes(orphaned, "/").map((folder) => folder.path),
-			["Archive", "Work/Projects/Apollo"],
-		);
-	});
-
-	it("nests on the provider's separator", () => {
-		const dotted = [
-			node("child", "Hotels", "Travel.Hotels"),
-			node("other", "Archive", "Archive"),
-			node("parent", "Travel", "Travel"),
-		];
-		assert.deepEqual(
-			orderFolderNodes(dotted, ".").map((folder) => folder.path),
-			["Archive", "Travel", "Travel.Hotels"],
-		);
-	});
-});
-
-describe("collapsing", () => {
-	it("shows the top level and nothing under it", () => {
-		const rows = collapseFolderTree(ordered, new Set(), "/");
-		assert.deepEqual(paths(rows), [
-			"INBOX",
-			"Archive",
-			"Travel",
-			"Deleted Messages",
-		]);
-	});
-
-	it("reveals only the children of what is open", () => {
-		const rows = collapseFolderTree(ordered, new Set(["Travel"]), "/");
-		assert.deepEqual(paths(rows), [
-			"INBOX",
-			"Archive",
-			"Travel",
-			"Travel/Hotels",
-			"Deleted Messages",
-		]);
-	});
-
-	it("needs every ancestor open to reach a grandchild", () => {
-		assert.deepEqual(
-			paths(collapseFolderTree(ordered, new Set(["Travel/Hotels"]), "/")),
-			["INBOX", "Archive", "Travel", "Deleted Messages"],
-		);
-		assert.deepEqual(
-			paths(
-				collapseFolderTree(ordered, new Set(["Travel", "Travel/Hotels"]), "/"),
-			),
-			[
-				"INBOX",
-				"Archive",
-				"Travel",
-				"Travel/Hotels",
-				"Travel/Hotels/Receipts",
-				"Deleted Messages",
-			],
-		);
-	});
-
-	it("marks what is open on the row", () => {
-		const rows = collapseFolderTree(ordered, new Set(["Travel"]), "/");
-		assert.deepEqual(
-			rows.map((row) => row.expanded),
-			[false, false, true, false, false],
-		);
-	});
-
-	it("shows a folder whose parent is absent from the list", () => {
-		const orphaned = orderFolderNodes(
-			[
-				node("archive", "Archive", "Archive"),
-				node("apollo", "Apollo", "Work/Projects/Apollo"),
-			],
-			"/",
-		);
-		assert.deepEqual(paths(collapseFolderTree(orphaned, new Set(), "/")), [
-			"Archive",
-			"Work/Projects/Apollo",
-		]);
-	});
-});
-
-describe("filtering", () => {
-	it("matches on the label", () => {
-		assert.equal(matchesQuery(node("a", "Archive", "Archive"), "arch"), true);
-	});
-
-	it("matches on the path, so a role-labelled folder is still findable", () => {
-		assert.equal(
-			matchesQuery(node("t", "Trash", "Deleted Messages"), "deleted"),
-			true,
-		);
-	});
-
-	it("keeps the ancestors of a match on screen", () => {
-		const rows = filterFolderTree(ordered, "receipts", "/");
-		assert.deepEqual(paths(rows), [
-			"Travel",
-			"Travel/Hotels",
-			"Travel/Hotels/Receipts",
-		]);
-	});
-
-	it("marks an ancestor kept for context as no match of its own", () => {
-		const rows = filterFolderTree(ordered, "receipts", "/");
-		assert.deepEqual(
-			rows.map((row) => row.context),
-			[true, true, false],
-		);
-	});
-
-	it("keeps a matching ancestor a match", () => {
-		const rows = filterFolderTree(ordered, "travel", "/");
-		assert.deepEqual(
-			rows.map((row) => row.context),
-			[false, false, false],
-		);
-	});
-
-	it("opens the ancestors a match hides behind", () => {
-		assert.deepEqual([...queryExpandedPaths(ordered, "receipts", "/")].sort(), [
-			"Travel",
-			"Travel/Hotels",
-		]);
-	});
-
-	it("opens nothing on an empty query, so the list stays as it was", () => {
-		assert.equal(queryExpandedPaths(ordered, "", "/").size, 0);
-	});
-
-	it("carries the depth the row indents by", () => {
-		const rows = filterFolderTree(ordered, "", "/");
-		assert.deepEqual(
-			rows.map((row) => row.depth),
-			[0, 0, 0, 1, 2, 0],
-		);
-	});
-
-	it("narrows to nothing when the query matches no folder", () => {
-		assert.deepEqual(filterFolderTree(ordered, "zzz", "/"), []);
-	});
-});
-
-describe("create rows", () => {
-	const kinds = (expanded: string[]) =>
-		withCreateRows(
-			collapseFolderTree(ordered, new Set(expanded), "/"),
-			"/",
-		).map((entry) =>
-			entry.kind === "create"
-				? `new inside ${entry.parent.path} @${entry.depth}`
-				: entry.row.folder.path,
-		);
-
-	it("offers none while everything is closed", () => {
-		assert.deepEqual(kinds([]), [
-			"INBOX",
-			"Archive",
-			"Travel",
-			"Deleted Messages",
-		]);
-	});
-
-	it("puts the action after the children of the folder it belongs to", () => {
-		assert.deepEqual(kinds(["Travel"]), [
-			"INBOX",
-			"Archive",
-			"Travel",
-			"Travel/Hotels",
-			"new inside Travel @1",
-			"Deleted Messages",
-		]);
-	});
-
-	it("closes the deepest branch first when several are open", () => {
-		assert.deepEqual(kinds(["Travel", "Travel/Hotels"]), [
-			"INBOX",
-			"Archive",
-			"Travel",
-			"Travel/Hotels",
-			"Travel/Hotels/Receipts",
-			"new inside Travel/Hotels @2",
-			"new inside Travel @1",
-			"Deleted Messages",
-		]);
-	});
-
-	it("offers the action on an open folder with no children", () => {
-		assert.deepEqual(kinds(["Archive"]), [
-			"INBOX",
-			"Archive",
-			"new inside Archive @1",
-			"Travel",
-			"Deleted Messages",
-		]);
-	});
-});
-
-describe("roving focus", () => {
-	const rows = filterFolderTree(ordered, "receipts", "/");
-
-	it("skips context rows, which are branches rather than folders to open", () => {
-		assert.equal(findFirstFocusable(rows), 2);
-		assert.equal(findLastFocusable(rows), 2);
-	});
-
-	it("reaches the current folder, which cannot be picked but can be opened", () => {
-		const all = collapseFolderTree(ordered, new Set(), "/");
-		assert.equal(findFirstFocusable(all), 0);
-		assert.equal(findNextFocusable(all, 3, 1), 0);
-		assert.equal(findNextFocusable(all, 0, -1), 3);
-	});
-
-	it("walks only what is on screen, so closed children are skipped", () => {
-		const closed = collapseFolderTree(ordered, new Set(), "/");
-		assert.equal(
-			closed[findNextFocusable(closed, 2, 1)]?.folder.path,
-			"Deleted Messages",
-		);
-		const open = collapseFolderTree(ordered, new Set(["Travel"]), "/");
-		assert.equal(
-			open[findNextFocusable(open, 2, 1)]?.folder.path,
-			"Travel/Hotels",
-		);
-	});
-
-	it("finds the parent to move focus to when a row closes", () => {
-		const open = collapseFolderTree(ordered, new Set(["Travel"]), "/");
-		assert.equal(findParentRow(open, 3, "/"), 2);
-		assert.equal(findParentRow(open, 2, "/"), -1);
-	});
-
-	it("returns -1 when there is nothing to walk", () => {
-		assert.equal(findFirstFocusable([]), -1);
-		assert.equal(findLastFocusable([]), -1);
-		assert.equal(findNextFocusable([], 0, 1), -1);
-	});
-});
-
 describe("FolderTreePicker render", () => {
 	const render = (props: Partial<Parameters<typeof FolderTreePicker>[0]>) =>
 		renderToString(
@@ -365,6 +82,17 @@ describe("FolderTreePicker render", () => {
 		assert.doesNotMatch(html, /aria-label="New folder inside/);
 	});
 
+	it("gives the pinned create action the prominent treatment", () => {
+		const html = render({
+			onCreateFolder: () =>
+				Promise.resolve(node("made", "Made", "Travel/Made")),
+		});
+		assert.match(
+			tagWith(html, 'aria-label="New folder"'),
+			/data-prominence="prominent"/,
+		);
+	});
+
 	it("renders the empty state when no folder matches", () => {
 		const html = render({ folders: [] });
 		assert.match(html, /No folders match/);

package/src/components/folder-tree-picker.stories.tsx

@@ -127,7 +127,10 @@ function Picker({
 	);
 }
 
-/** The list at rest: top level only, one tap deep into anything. */
+/**
+ * The list at rest: top level only, one tap deep into anything, with the pinned
+ * "New folder" carrying the kit's dashed add affordance.
+ */
 export const Default: Story = {
 	name: "Default (collapsed to top level)",
 	render: () => <Picker />,
@@ -208,7 +211,8 @@ const expand = async (canvasElement: HTMLElement, ...labels: string[]) => {
 
 /**
  * One tap picks the destination and opens it. The children arrive indented,
- * with "New folder" sitting at the end of them as the last folder inside.
+ * with a quieter "New folder" at the end of them — the same action as the
+ * pinned one, subordinate to the folder it sits in.
  */
 export const Expanded: Story = {
 	name: "A folder opened (children and its New folder)",
@@ -218,7 +222,10 @@ export const Expanded: Story = {
 	},
 };
 
-/** Three levels open at once, each with its own place to add a folder. */
+/**
+ * One open branch, three levels deep: the ancestors stay open because the
+ * folder you opened lives inside them.
+ */
 export const DeepExpansion: Story = {
 	name: "Opened three levels deep",
 	render: () => <Picker />,
@@ -250,9 +257,9 @@ export const CreateTopLevel: Story = {
 };
 
 /**
- * The folder you opened is the answer to "inside where": the action sits among
- * its children and the form states the parent as text, so there is no second
- * choice to make.
+ * The folder you opened is the answer to "inside where": the form takes the
+ * place of the action it came from, among that folder's children, and states
+ * the parent as text — so there is no second choice to make.
  */
 export const CreateSubfolder: Story = {
 	name: "Create a folder inside an opened one",
@@ -353,10 +360,16 @@ function WizardFolderStep() {
 	);
 }
 
-/** The pattern at the size it is used: the wizard's folder step on a phone. */
+/**
+ * The pattern at the size it is used: the wizard's folder step on a phone, with
+ * a folder open so both create actions are on screen at once.
+ */
 export const PhoneWizardStep: Story = {
 	name: "Phone — wizard folder step",
 	parameters: { layout: "fullscreen" },
 	globals: { viewport: { value: "mobile" } },
 	render: () => <WizardFolderStep />,
+	play: async ({ canvasElement }) => {
+		await expand(canvasElement, "Travel");
+	},
 };