@torpor/ui 0.3.5 → 0.3.6

package/CHANGELOG.md

@@ -1,344 +0,0 @@
-# @torpor/ui
-
-## 0.3.5
-
-### Patch Changes
-
-- 8731a11: Fix: add form action
-
-## 0.3.4
-
-### Patch Changes
-
-- b8d978a: Feat: style property for UI components
-- Updated dependencies [aa0c0e2]
-  - @torpor/view@0.4.13
-
-## 0.3.3
-
-### Patch Changes
-
-- 2fdad81: Fix: File input add accept, remove value
-
-## 0.3.2
-
-### Patch Changes
-
-- 3f4eef3: Fix: File component name
-- dddec65: Feat: Hidden UI form component
-- fae47e6: Fix: TextArea should be a textarea
-- e9fe640: Fix: get checkbox checked from state value
-- 00c4d30: Feat: allow setting input required
-- e1a3f46: Fix: string unions don't work in $props
-- 14cd367: Fix: valibot uses a different path format
-
-## 0.3.1
-
-### Patch Changes
-
-- b670819: Feat: more UI form components
-- Updated dependencies [3cc2168]
-- Updated dependencies [13f2afb]
-  - @torpor/view@0.4.7
-
-## 0.3.0
-
-### Minor Changes
-
-- 92438fc: !Edit: split Popover into Contextual, Modal and Popover
-- 42c6b60: !Fix: transitions
-
-### Patch Changes
-
-- 4f17acb: Fix: handle undefined $props in UI components
-- Updated dependencies [255aad3]
-- Updated dependencies [8b377a2]
-- Updated dependencies [450b739]
-- Updated dependencies [168dff3]
-- Updated dependencies [fc60fe0]
-- Updated dependencies [42c6b60]
-- Updated dependencies [2818679]
-- Updated dependencies [38fd0a5]
-- Updated dependencies [3e6f3f7]
-- Updated dependencies [051998b]
-  - @torpor/view@0.4.0
-  - @torpor/unplugin@0.2.1
-
-## 0.2.1
-
-### Patch Changes
-
-- 84f7d87: Fix: prop types
-- 34d17f7: Feat: UI Form component and client-side submit
-- Updated dependencies [f4716c5]
-- Updated dependencies [1253f7a]
-- Updated dependencies [6268e00]
-- Updated dependencies [f2fb547]
-  - @torpor/view@0.3.2
-
-## 0.2.0
-
-### Minor Changes
-
-- 51dbba7: Chore: drop CJS build and go ESM only
-
-### Patch Changes
-
-- e613d99: Feat: create UI component d.ts files
-- 55750d4: Feat: UI Notification component
-- 94e8f0b: !Refactor: renamed OffScreen to Drawer
-- ede55da: Feat: add some basic UI icons
-- 7000755: Feat: UI Breadcrumb component
-- 2232fae: Feat: UI Menu and MenuBar components
-- 5492230: Feat: UI Calendar component
-- Updated dependencies [be98b35]
-- Updated dependencies [51dbba7]
-- Updated dependencies [2298a87]
-- Updated dependencies [3a8431a]
-- Updated dependencies [eb58d37]
-- Updated dependencies [e0637be]
-- Updated dependencies [9fcc613]
-- Updated dependencies [f5f84e6]
-- Updated dependencies [6cc57ff]
-- Updated dependencies [c4f9d18]
-- Updated dependencies [5598bc9]
-- Updated dependencies [18f1ccf]
-- Updated dependencies [c2b5c02]
-- Updated dependencies [91d1536]
-- Updated dependencies [4dc16df]
-- Updated dependencies [543b229]
-- Updated dependencies [3cf3ae6]
-  - @torpor/view@0.3.0
-  - @torpor/unplugin@0.2.0
-
-## 0.1.7
-
-### Patch Changes
-
-- 995d950: Fix: merge :class and class (making :class obsolete)
-- Updated dependencies [c38f914]
-- Updated dependencies [995d950]
-- Updated dependencies [b716d5c]
-- Updated dependencies [014bda0]
-  - @torpor/view@0.2.0
-  - @torpor/unplugin@0.1.17
-
-## 0.1.6
-
-### Patch Changes
-
-- 586f073: Fix: set disabled properly
-- a14a74f: Refactor: remove <div style="display: contents">
-- Updated dependencies [1866f30]
-- Updated dependencies [a31647f]
-- Updated dependencies [951a86f]
-- Updated dependencies [6d6fb89]
-- Updated dependencies [9c13f0f]
-  - @torpor/view@0.1.6
-
-## 0.1.5
-
-### Patch Changes
-
-- Updated dependencies [f390b78]
-  - @torpor/view@0.1.5
-  - @torpor/unplugin@0.1.16
-
-## 0.1.4
-
-### Patch Changes
-
-- Updated dependencies [daba2ad]
-  - @torpor/view@0.1.4
-  - @torpor/unplugin@0.1.15
-
-## 0.1.3
-
-### Patch Changes
-
-- Updated dependencies [de51225]
-  - @torpor/view@0.1.3
-  - @torpor/unplugin@0.1.14
-
-## 0.1.2
-
-### Patch Changes
-
-- Updated dependencies [0e69292]
-- Updated dependencies [b69fde1]
-  - @torpor/view@0.1.2
-  - @torpor/unplugin@0.1.13
-
-## 0.1.1
-
-### Patch Changes
-
-- 4e6a5aa: Break: rename PopoverContentStatic to PopoverContent
-- 2d7fae6: Fix: show the first tab content if no value set
-- a3a40f6: Fix: Popover issues
-- Updated dependencies [f9fd76d]
-- Updated dependencies [1ddc240]
-- Updated dependencies [7b9dc31]
-  - @torpor/view@0.1.1
-  - @torpor/unplugin@0.1.12
-
-## 0.1.0
-
-### Minor Changes
-
-- 995513a: Break: specify binding with `&` rather than `:`
-
-### Patch Changes
-
-- cda6804: Fix: move itemStates out of $state
-- 80c5461: Feat: id and class props for the Accordion
-- cbd07ca: Feat: bind component props with `&name`
-- d4a7ecc: Feat: UI Popover component
-- b6bf066: Fix: set data-state (open/closed/active/inactive)
-- baec4c7: Feat: UI NavMenu component
-- 8545f43: Feat: UI Dialog component
-- 7cdeaa5: Feat: id and class props for the TabGroup
-- Updated dependencies [28a993b]
-- Updated dependencies [98602ec]
-- Updated dependencies [a49d307]
-- Updated dependencies [995513a]
-- Updated dependencies [c9a9cf8]
-- Updated dependencies [cbd07ca]
-- Updated dependencies [f53b184]
-- Updated dependencies [215db17]
-- Updated dependencies [95e866b]
-  - @torpor/unplugin@0.1.11
-  - @torpor/view@0.1.0
-
-## 0.0.17
-
-### Patch Changes
-
-- 819a7d8: Feat: UI TabGroup component
-- Updated dependencies [fb896c6]
-- Updated dependencies [85bccf6]
-  - @torpor/view@0.0.14
-  - @torpor/unplugin@0.1.10
-
-## 0.0.16
-
-### Patch Changes
-
-- Updated dependencies [ed4a6db]
-  - @torpor/view@0.0.13
-  - @torpor/unplugin@0.1.9
-
-## 0.0.15
-
-### Patch Changes
-
-- Updated dependencies [ff5f459]
-  - @torpor/view@0.0.12
-  - @torpor/unplugin@0.1.8
-
-## 0.0.14
-
-### Patch Changes
-
-- Updated dependencies [e4060e6]
-  - @torpor/unplugin@0.1.7
-
-## 0.0.13
-
-### Patch Changes
-
-- Updated dependencies [5676a0b]
-  - @torpor/unplugin@0.1.6
-
-## 0.0.12
-
-### Patch Changes
-
-- Updated dependencies [78e78b9]
-  - @torpor/view@0.0.11
-  - @torpor/unplugin@0.1.5
-
-## 0.0.11
-
-### Patch Changes
-
-- Updated dependencies [8852c89]
-  - @torpor/unplugin@0.1.4
-
-## 0.0.10
-
-### Patch Changes
-
-- Updated dependencies [3cf6de6]
-  - @torpor/view@0.0.10
-  - @torpor/unplugin@0.1.3
-
-## 0.0.9
-
-### Patch Changes
-
-- 47c5277: Chore: update dependencies
-- Updated dependencies [47c5277]
-  - @torpor/unplugin@0.1.2
-  - @torpor/view@0.0.9
-
-## 0.0.8
-
-### Patch Changes
-
-- Updated dependencies [a8ead36]
-  - @torpor/view@0.0.8
-  - @torpor/unplugin@0.1.1
-
-## 0.0.7
-
-### Patch Changes
-
-- Updated dependencies
-  - @torpor/unplugin@0.1.0
-
-## 0.0.6
-
-### Patch Changes
-
-- Updated dependencies [b90d729]
-  - @torpor/view@0.0.7
-  - @torpor/unplugin@0.0.6
-
-## 0.0.5
-
-### Patch Changes
-
-- Updated dependencies [808da4c]
-  - @torpor/view@0.0.6
-  - @torpor/unplugin@0.0.5
-
-## 0.0.4
-
-### Patch Changes
-
-- Updated dependencies [44cf656]
-- Updated dependencies [a278176]
-  - @torpor/view@0.0.5
-  - @torpor/unplugin@0.0.4
-
-## 0.0.3
-
-### Patch Changes
-
-- Updated dependencies [76dd6ea]
-- Updated dependencies [8f0a0a1]
-  - @torpor/view@0.0.4
-  - @torpor/unplugin@0.0.3
-
-## 0.0.2
-
-### Patch Changes
-
-- Updated dependencies
-- Updated dependencies
-- Updated dependencies
-- Updated dependencies
-- Updated dependencies
-  - @torpor/view@0.0.3
-  - @torpor/unplugin@0.0.2

package/scripts/postbuild.ts

@@ -1,127 +0,0 @@
-import { buildType, parse } from "@torpor/view/compile";
-import chalk from "chalk";
-import { existsSync, promises as fs, lstatSync } from "node:fs";
-import { basename, dirname, join, resolve } from "node:path";
-import { fileURLToPath } from "node:url";
-
-// HACK: There is almost certainly a way to do this with standard TS/TSUP/etc
-// but I can't figure it out
-
-async function run() {
-	const scriptsFolder = dirname(fileURLToPath(import.meta.url));
-	const sourceFolder = resolve(scriptsFolder, "../src");
-	const distFolder = resolve(scriptsFolder, "../dist");
-
-	// Wait for the types to be generated, then wait another 500ms, because
-	// otherwise the types WE generate get deleted
-	await waitUntilFileExists(join(distFolder, "index.d.ts"));
-	await new Promise((resolve, _reject) => setTimeout(() => resolve(true), 500));
-
-	// Read the dist files first, not for every component
-	const distFiles = (await fs.readdir(distFolder)).filter((f) => f.endsWith(".torp"));
-
-	// Loop through component folders e.g. Accordion
-	const componentFolders = (await fs.readdir(distFolder)).filter((f) =>
-		lstatSync(join(distFolder, f)).isDirectory(),
-	);
-	for (const component of componentFolders) {
-		// If it's an old folder, delete it
-		if (!existsSync(join(sourceFolder, component))) {
-			await fs.rmdir(join(distFolder, component));
-			continue;
-		}
-
-		console.log(chalk.cyan.inverse(" POST "), `Tidy ${component}`);
-
-		// Loop through files and change declarations to imports so they get
-		// processed by bundlers
-		let indexFiles = await fs.readdir(join(distFolder, component));
-		for (const file of indexFiles) {
-			let jsfile = join(distFolder, component, file);
-			let code = await fs.readFile(jsfile, "utf8");
-			code = code.replace(/var (.+?) = "\.\.\/(.+?)-(.+?).torp"/g, 'import $1 from "./$2.torp"');
-			await fs.writeFile(jsfile, code);
-		}
-
-		// Move all *.torp files for the component into this folder
-		// And while we're at it, create type definitions
-		let typeDefs: string[] = [];
-		let relatedFiles = (await fs.readdir(join(sourceFolder, component)))
-			.filter((f) => f.endsWith(".torp") && f !== component)
-			.map((f) => basename(f, ".torp"))
-			.map((f) => {
-				const output = distFiles.find((df) => df.startsWith(`${f}-`) && df.endsWith(".torp"));
-				if (!output) {
-					console.log("FILE NOT FOUND:", f, distFiles);
-				}
-				return output!;
-			});
-		for (let file of relatedFiles) {
-			const newFileName = file.substring(0, file.indexOf("-")) + ".torp";
-			const newFilePath = join(distFolder, component, newFileName);
-			await fs.rename(join(distFolder, file), newFilePath);
-
-			const parsed = parse(await fs.readFile(newFilePath, "utf8"));
-			// HACK: by this point we should be certain there's no errors
-			typeDefs.push(buildType(parsed.template!));
-		}
-
-		// Move all *.ts files into this folder
-		const srcFolder = resolve(distFolder, "..", "src", component);
-		const tsFiles = (await fs.readdir(srcFolder)).filter(
-			(f) => f.endsWith(".ts") && f !== "index.ts",
-		);
-		for (const file of tsFiles) {
-			await fs.copyFile(join(srcFolder, file), join(distFolder, component, file));
-		}
-
-		// Create the d.ts file from the type definitions
-		let dts = `import { type SlotRender } from "@torpor/view";\n`;
-		let exportNames: string[] = [];
-		for (let typeDef of typeDefs) {
-			const match = /export default (.+?);/.exec(typeDef);
-			if (match) {
-				exportNames.push(match[1]);
-				typeDef = typeDef.replace(match[0], "");
-			}
-			typeDef = typeDef.replace(`import { type SlotRender } from "@torpor/view";`, "");
-			dts += typeDef;
-		}
-		dts += `export { ${exportNames.join(", ")} };`;
-		await fs.writeFile(join(distFolder, component, "index.d.ts"), dts);
-	}
-
-	// Move all `utils` and `mount` TS files into the dest folder
-	await moveUtils(distFolder, "utils");
-	await moveUtils(distFolder, "mount");
-
-	// HACK: Move index.d.ts into the motion folder. This works because it's the
-	// only d.ts file we create (for now...?)
-	await fs.copyFile(join(distFolder, "index.d.ts"), join(distFolder, "motion", "index.d.ts"));
-}
-
-async function moveUtils(distFolder: string, folderName: string) {
-	// Move all utils/*.ts files into the dest folder
-	if (!existsSync(join(distFolder, folderName))) {
-		await fs.mkdir(join(distFolder, folderName));
-	}
-
-	const utilsFolder = resolve(distFolder, "..", "src", folderName);
-	const utilsFiles = (await fs.readdir(utilsFolder)).filter(
-		(f) => f.endsWith(".ts") && f !== "index.ts",
-	);
-	for (const file of utilsFiles) {
-		await fs.copyFile(join(utilsFolder, file), join(distFolder, folderName, file));
-	}
-}
-
-// From https://stackoverflow.com/a/62339353
-async function waitUntilFileExists(filePath: string, currentTime = 0, timeout = 5000) {
-	if (existsSync(filePath)) return true;
-	if (currentTime === timeout) return false;
-	const interval = 500;
-	await new Promise((resolve, _reject) => setTimeout(() => resolve(true), interval));
-	return waitUntilFileExists(filePath, currentTime + interval, timeout);
-}
-
-await run();

package/src/Accordion/Accordion.torp

@@ -1,230 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { AccordionContextName, type AccordionContext, type ItemState } from "./AccordionTypes";
-
-interface AccordionProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** Whether a single AccordionItem or multiple AccordionItems can be expanded at the same time */
-	type?: "single" | "multiple",
-	/** The value of the expanded AccordionItem, or an array of values if the type is "multiple" */
-	value?: string | string[],
-	/** If set to true, the user cannot interact with any items in the Accordion */
-	disabled?: boolean,
-	/** Raised when the expanded item(s) have changed */
-	onchange?: (value: string | string[]) => void,
-}
-
-/**
- * A vertically stacked set of interactive headings that enable users to reveal
- * or hide associated sections of content.
- *
- * See [the WAI ARIA guidelines for Accordions](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).
- *
- * The structure of an Accordion is:
- *
- * ```
- * <Accordion>
- * 	<AccordionItem>
- * 		<AccordionHeader>
- * 			<AccordionTrigger />
- * 		</AccordionHeader>
- * 		<AccordionContent />
- * 	</AccordionItem>
- * </Accordion>
- * ```
- */
-export default function Accordion($props: AccordionProps | undefined) {
-	let type = $props?.type ?? "single";
-
-	let $state = $watch({
-		value: $props?.value ?? (type === "single" ? "" : [] as string[])
-	});
-
-	$run(() => {
-		if ($props !== undefined) {
-			$props.value = $state.value;
-		}
-	});
-
-	let itemStates: ItemState[] = [];
-
-	// This is used to assign automatic indexes to items where needed
-	let nextIndex = 0;
-
-	// Set the context to pass down to items, with functions for each item to call
-	let context: AccordionContext = {
-		registerItem,
-		removeItem,
-		toggleItem,
-		handleHeaderKey
-	};
-	$context[AccordionContextName] = context;
-
-	$run(() => {
-		// HACK: This should probably be done with setters?
-		let newValue = $state.value;
-
-		// Get the value
-		switch (type) {
-			case "single": {
-				// Ensure the value passed in was a string (in case e.g. the user has set values to ints)
-				newValue = newValue.toString();
-				for (let item of itemStates) {
-					item.expanded = item.value === newValue;
-				}
-				break;
-			}
-			case "multiple": {
-				// Ensure the value passed in is an array
-				if (!Array.isArray(newValue)) {
-					newValue = [newValue];
-				}
-				for (let item of itemStates) {
-					item.expanded = newValue.indexOf(item.value) !== -1;
-				}
-				break;
-			}
-		}
-
-		// Set the value
-		$state.value = newValue;
-	})
-
-	$run(() => {
-		itemStates.forEach((s) => s.parentDisabled = $props?.disabled === true);
-	});
-
-	// Dispatch the change event when the value changes
-	let firstChange = true;
-	$run(() => {
-		const ev = $props?.onchange;
-		const value = $state.value;
-		if (firstChange) {
-			firstChange = false;
-		} else if (ev) {
-			ev(value);
-		}
-	});
-
-	function registerItem(itemState: ItemState) {
-		// If an index wasn't set for the item, set it automatically
-		if (itemState.index === -1) {
-			itemState.index = nextIndex++;
-		}
-
-		// If a value wasn't set for the item, set it to the index
-		if (!itemState.value) {
-			itemState.value = itemState.index.toString();
-		}
-
-		// If we have a value, set whether the item should be expanded
-		if ($state.value) {
-			switch (type) {
-				case "single": {
-					itemState.expanded = $state.value === itemState.value;
-					break;
-				}
-				case "multiple": {
-					itemState.expanded = $state.value.includes(itemState.value);
-					break;
-				}
-			}
-		}
-
-		// Set whether the Accordion itself is disabled
-		itemState.parentDisabled = $props?.disabled === true
-
-		// Add the item's state to the array
-		itemStates.splice(itemState.index, 0, itemState);
-	}
-
-	// TODO: I think this should be done by value
-	function removeItem(itemIndex: number) {
-		// Remove the item and re-index
-		let index = itemStates.findIndex((item) => item.index === itemIndex);
-		if (index !== -1) {
-			itemStates.splice(itemIndex, 1);
-		}
-		itemStates.forEach((item, i) => (item.index = i));
-	}
-
-	function toggleItem(toggleValue: string) {
-		switch (type) {
-			case "single": {
-				for (let item of itemStates) {
-					// The item is expanded if it has the supplied value (i.e. if it was clicked) and if it
-					// wasn't already expanded (i.e. we collapse it if it was expanded and clicked)
-					if (item.value === toggleValue) {
-						$state.value = item.expanded ? "" : item.value;
-						break;
-					}
-				}
-				break;
-			}
-			case "multiple": {
-				let newValue = [];
-				for (let item of itemStates) {
-					// The item is expanded if it has the supplied value (i.e. if it was clicked) or if it
-					// was already expanded
-					if (
-						(item.value === toggleValue && !item.expanded) ||
-						(item.value !== toggleValue && item.expanded)
-					) {
-						newValue.push(item.value);
-					}
-				}
-				$state.value = newValue.sort();
-				break;
-			}
-		}
-	}
-
-	function handleHeaderKey(headerIndex: number, e: KeyboardEvent) {
-		switch (e.key) {
-			case "Up":
-			case "ArrowUp": {
-				if (headerIndex > 0) {
-					e.preventDefault();
-					itemStates[headerIndex - 1].setFocused();
-				}
-				break;
-			}
-			case "Down":
-			case "ArrowDown": {
-				if (headerIndex < itemStates.length - 1) {
-					e.preventDefault();
-					itemStates[headerIndex + 1].setFocused();
-				}
-				break;
-			}
-			case "Home": {
-				if (headerIndex > 0) {
-					e.preventDefault();
-					itemStates[0].setFocused();
-				}
-				break;
-			}
-			case "End": {
-				if (headerIndex < itemStates.length - 1) {
-					e.preventDefault();
-					itemStates[itemStates.length - 1].setFocused();
-				}
-				break;
-			}
-		}
-	}
-
-	@render {
-		<div
-			{$props?.id}
-			class={["torp-accordion", $props?.class]}
-			{$props?.style}
-		>
-			<slot />
-		</div>
-	}
-}