@torpor/ui 0.1.7 → 0.2.1

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) {
@@ -35,7 +44,7 @@ export default function TabList($props: any) {
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-tab-list ${$props.class ?? ""}`.trim()}
 			role="tablist"
 			aria-label={$props.ariaLabel}
@@ -44,7 +53,7 @@ export default function TabList($props: any) {
 			tabindex="0"
 			onfocus={handleFocus}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }

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;
@@ -44,7 +52,7 @@ export default function TabTrigger() {
 	@render {
 		<button
 			type="button"
-			id={$props.id}
+			{$props.id}
 			class={`torp-tab-trigger ${$props.class ?? ""}`.trim()}
 			role="tab"
 			tabindex="-1"
@@ -59,7 +67,7 @@ export default function TabTrigger() {
 			onclick={handleClick}
 			onkeydown={handleKey}
 		>
-			<:slot />
+			<slot />
 		</button>
 	}
 }

package/src/icons/ArrowDown.torp

@@ -0,0 +1,15 @@
+export default function ArrowDown($props: any) {
+	@render {
+		<svg
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
+			viewBox="0 0 100 100"
+			stroke-linejoin="round"
+			stroke-width="12"
+		>
+			<g>
+				<polygon points="25,40 50,70 75,40" />
+			</g>
+		</svg>
+	}
+}

package/src/icons/ArrowLeft.torp

@@ -0,0 +1,15 @@
+export default function ArrowLeft($props: any) {
+	@render {
+		<svg
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
+			viewBox="0 0 100 100"
+			stroke-linejoin="round"
+			stroke-width="12"
+		>
+			<g>
+				<polygon points="60,25 30,50 60,75" />
+			</g>
+		</svg>
+	}
+}

package/src/icons/ArrowRight.torp

@@ -0,0 +1,15 @@
+export default function ArrowRight($props: any) {
+	@render {
+		<svg
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
+			viewBox="0 0 100 100"
+			stroke-linejoin="round"
+			stroke-width="12"
+		>
+			<g>
+				<polygon points="40,25 70,50 40,75" />
+			</g>
+		</svg>
+	}
+}

package/src/icons/ArrowUp.torp

@@ -0,0 +1,15 @@
+export default function ArrowUp($props: any) {
+	@render {
+		<svg
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
+			viewBox="0 0 100 100"
+			stroke-linejoin="round"
+			stroke-width="12"
+		>
+			<g>
+				<polygon points="25,60 50,30 75,60" />
+			</g>
+		</svg>
+	}
+}

package/src/icons/Bars.torp

@@ -0,0 +1,17 @@
+export default function Bars($props: any) {
+	@render {
+		<svg
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
+			viewBox="0 0 100 100"
+			stroke-linejoin="round"
+			stroke-width="12"
+		>
+			<g>
+				<path d="M10,25 L90,25" />
+				<path d="M10,50 L90,50" />
+				<path d="M10,75 L90,75" />
+			</g>
+		</svg>
+	}
+}

package/src/icons/Check.torp

@@ -0,0 +1,15 @@
+export default function Check($props: any) {
+	@render {
+		<svg
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
+			viewBox="0 0 100 100"
+			stroke-linejoin="round"
+			stroke-width="12"
+		>
+			<g>
+				<path d="M10,55 L35,80 L90,25" fill="none" />
+			</g>
+		</svg>
+	}
+}

package/src/icons/ChevronDown.torp

@@ -0,0 +1,15 @@
+export default function ChevronDown($props: any) {
+	@render {
+		<svg
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
+			viewBox="0 0 100 100"
+			stroke-linejoin="round"
+			stroke-width="12"
+		>
+			<g>
+				<path d="M10,30 L50,70 L90,30" fill="none" />
+			</g>
+		</svg>
+	}
+}

package/src/icons/ChevronLeft.torp

@@ -0,0 +1,15 @@
+export default function ChevronLeft($props: any) {
+	@render {
+		<svg
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
+			viewBox="0 0 100 100"
+			stroke-linejoin="round"
+			stroke-width="12"
+		>
+			<g>
+				<path d="M70,10 L30,50 L70,90" fill="none" />
+			</g>
+		</svg>
+	}
+}

package/src/icons/ChevronRight.torp

@@ -0,0 +1,15 @@
+export default function ChevronRight($props: any) {
+	@render {
+		<svg
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
+			viewBox="0 0 100 100"
+			stroke-linejoin="round"
+			stroke-width="12"
+		>
+			<g>
+				<path d="M30,10 L70,50 L30,90" fill="none" />
+			</g>
+		</svg>
+	}
+}

package/src/icons/ChevronUp.torp

@@ -0,0 +1,15 @@
+export default function ChevronUp($props: any) {
+	@render {
+		<svg
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
+			viewBox="0 0 100 100"
+			stroke-linejoin="round"
+			stroke-width="12"
+		>
+			<g>
+				<path d="M10,70 L50,30 L90,70" fill="none" />
+			</g>
+		</svg>
+	}
+}

package/src/icons/Cross.torp

@@ -0,0 +1,16 @@
+export default function Cross($props: any) {
+	@render {
+		<svg
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
+			viewBox="0 0 100 100"
+			stroke-linejoin="round"
+			stroke-width="12"
+		>
+			<g>
+				<path d="M15,15 L85,85" />
+				<path d="M15,85 L85,15" />
+			</g>
+		</svg>
+	}
+}

package/src/icons/Loading.torp

@@ -0,0 +1,16 @@
+export default function Loading($props: any) {
+	@render {
+		<svg
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
+			viewBox="0 0 100 100"
+			stroke-linejoin="round"
+			stroke-width="20"
+		>
+			<g>
+				<circle cx="50" cy="50" r="40" fill="none" opacity="0.3" />
+				<path d="M 22 22 A 40 40 0 0 1 78 22" fill="none" />
+			</g>
+		</svg>
+	}
+}

package/src/icons/Minus.torp

@@ -0,0 +1,15 @@
+export default function Minus($props: any) {
+	@render {
+		<svg
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
+			viewBox="0 0 100 100"
+			stroke-linejoin="round"
+			stroke-width="12"
+		>
+			<g>
+				<path d="M10,50 L90,50" />
+			</g>
+		</svg>
+	}
+}

package/src/icons/Plus.torp

@@ -0,0 +1,16 @@
+export default function Plus($props: any) {
+	@render {
+		<svg
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
+			viewBox="0 0 100 100"
+			stroke-linejoin="round"
+			stroke-width="12"
+		>
+			<g>
+				<path d="M50,10 L50,90" />
+				<path d="M10,50 L90,50" />
+			</g>
+		</svg>
+	}
+}

package/src/icons/index.ts

@@ -0,0 +1,31 @@
+import ArrowDown from "./ArrowDown.torp";
+import ArrowLeft from "./ArrowLeft.torp";
+import ArrowRight from "./ArrowRight.torp";
+import ArrowUp from "./ArrowUp.torp";
+import Bars from "./Bars.torp";
+import Check from "./Check.torp";
+import ChevronDown from "./ChevronDown.torp";
+import ChevronLeft from "./ChevronLeft.torp";
+import ChevronRight from "./ChevronRight.torp";
+import ChevronUp from "./ChevronUp.torp";
+import Cross from "./Cross.torp";
+import Loading from "./Loading.torp";
+import Minus from "./Minus.torp";
+import Plus from "./Plus.torp";
+
+export {
+	ArrowDown,
+	ArrowLeft,
+	ArrowRight,
+	ArrowUp,
+	Bars,
+	Check,
+	ChevronDown,
+	ChevronLeft,
+	ChevronRight,
+	ChevronUp,
+	Cross,
+	Loading,
+	Minus,
+	Plus,
+};

package/src/motion/fade.ts

@@ -1,6 +1,6 @@
-type AnimationFrame = {
+interface AnimationFrame {
 	opacity: number;
-};
+}
 
 const animationFrames: AnimationFrame[] = [{ opacity: 0 }, { opacity: 1 }];
 

package/src/motion/index.ts

@@ -0,0 +1,3 @@
+import fade from "./fade";
+
+export { fade };

package/src/utils/dateUtils.ts

@@ -0,0 +1,244 @@
+// TODO: Can we get these from the locale?
+const monthNames: string[] = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December",
+];
+const shortMonthNames: string[] = monthNames.map((n) => n.substring(0, 3).toLowerCase());
+
+const dayNames: string[] = [
+	"Sunday",
+	"Monday",
+	"Tuesday",
+	"Wednesday",
+	"Thursday",
+	"Friday",
+	"Saturday",
+	"Sunday",
+];
+const shortDayNames: string[] = dayNames.map((n) => n.substring(0, 3).toLowerCase());
+
+export { monthNames, shortMonthNames, dayNames, shortDayNames };
+
+export function areDatesEqual(date1: Date, date2: Date): boolean {
+	if ((date1 && !date2) || (date2 && !date1)) {
+		return false;
+	}
+	return (
+		date1.getFullYear() === date2.getFullYear() &&
+		date1.getMonth() === date2.getMonth() &&
+		date1.getDate() === date2.getDate()
+	);
+}
+
+export function parseDateTime(text: string, dateOrder: string): Date {
+	const parts = text
+		.toString()
+		.toLowerCase()
+		.split(/[.,/ :-]/);
+
+	const today = new Date();
+	let day = today.getDate();
+	let month = today.getMonth();
+	let year = today.getFullYear();
+	let hour = 9;
+	let minute = 0;
+	//let ampm = "";
+
+	let dayPart = -1;
+	let monthPart = -1;
+	let yearPart = -1;
+	//let hourPart = -1;
+
+	// Try to get the month if it's been supplied as a word
+	for (let i = 0; i < parts.length; i++) {
+		const index = shortMonthNames.indexOf(parts[i].substring(0, 3));
+		if (index !== -1) {
+			month = index;
+			monthPart = i;
+			break;
+		}
+	}
+
+	// Get each date part based on the dateOrder supplied
+	const dateOrderLower = dateOrder.toLowerCase();
+	for (let i = 0; i < dateOrder.length; i++) {
+		if (dateOrderLower[i] === "d") {
+			const dayResult = getDayPart(parts, monthPart, yearPart);
+			if (dayResult) {
+				day = dayResult.value;
+				dayPart = dayResult.part;
+			}
+		}
+		if (dateOrderLower[i] === "m" && monthPart === -1) {
+			const monthResult = getMonthPart(parts, dayPart, yearPart);
+			if (monthResult) {
+				month = monthResult.value;
+				monthPart = monthResult.part;
+			}
+		}
+		if (dateOrderLower[i] === "y") {
+			const yearResult = getYearPart(parts, dayPart, monthPart);
+			if (yearResult) {
+				year = yearResult.value;
+				yearPart = yearResult.part;
+			}
+		}
+	}
+
+	// TODO: Time...
+	//if (includeTime) {
+	//    // Hour part is the first part that isn't a date part
+	//    for (let i = 0; i < parts.length; i++) {
+	//        if (i !== yearPart && i !== monthPart && i !== dayPart) {
+	//            const maybehour = parseInt(parts[i])
+	//            if (!isNaN(maybehour)) {
+	//                hour = maybehour
+	//                hourPart = i
+	//                break
+	//            }
+	//        }
+	//    }
+	//
+	//    // Minute part is the first part that isn't a date part or the hour part
+	//    for (let i = 0; i < parts.length; i++) {
+	//        if (i !== yearPart && i !== monthPart && i !== dayPart && i !== hourPart) {
+	//            const maybeminute = parseInt(parts[i])
+	//            if (!isNaN(maybeminute)) {
+	//                minute = maybeminute
+	//                break
+	//            }
+	//        }
+	//    }
+	//
+	//    // Look for AM or PM
+	//    for (let i = 0; i < parts.length; i++) {
+	//        if (parts[i] === 'am' || parts[i] === 'pm') {
+	//            ampm = parts[i].toString().toUpperCase()
+	//            if (ampm === 'PM') {
+	//                hour = hour + 12
+	//            }
+	//            break
+	//        }
+	//    }
+	//}
+
+	return new Date(year, month, day, hour, minute);
+}
+
+interface DatePart {
+	value: number;
+	part: number;
+}
+
+function getDayPart(parts: string[], monthPart: number, yearPart: number): DatePart | undefined {
+	for (let i = 0; i < parts.length; i++) {
+		if (i !== monthPart && i !== yearPart) {
+			const maybeday = parseInt(parts[i]);
+			if (!isNaN(maybeday)) {
+				const value = maybeday;
+				const part = i;
+				return { value, part };
+			}
+		}
+	}
+}
+
+function getMonthPart(parts: string[], dayPart: number, yearPart: number): DatePart | undefined {
+	for (let i = 0; i < parts.length; i++) {
+		if (i !== dayPart && i !== yearPart) {
+			const maybemonth = parseInt(parts[i]);
+			if (!isNaN(maybemonth)) {
+				const value = maybemonth - 1;
+				const part = i;
+				return { value, part };
+			}
+		}
+	}
+}
+
+function getYearPart(parts: string[], dayPart: number, monthPart: number): DatePart | undefined {
+	for (let i = 0; i < parts.length; i++) {
+		if (i !== monthPart && i !== dayPart) {
+			const maybeyear = parseInt(parts[i]);
+			if (!isNaN(maybeyear)) {
+				const value = maybeyear < 100 ? maybeyear + 2000 : maybeyear;
+				const part = i;
+				return { value, part };
+			}
+		}
+	}
+}
+
+export function formatDate(value: Date, dateFormat: string): string {
+	if (!value) {
+		return "";
+	}
+
+	const date = new Date(value);
+
+	// Build the text that will be displayed
+	return dateFormat.replace(/(d+)|(M+)|(y+)/g, (m) => {
+		if (m.indexOf("d") >= 0) {
+			return formatDay(date, m);
+		} else if (m.indexOf("M") >= 0) {
+			return formatMonth(date, m);
+		} else if (m.indexOf("y") >= 0) {
+			return formatYear(date, m);
+		} else {
+			throw new Error("Invalid date format string");
+		}
+	});
+
+	// TODO: Time
+	//if (includeTime) {
+	//    const ampm = hour >= 12 ? 'PM' : 'AM'
+	//    hour = hour % 12
+	//    hour = hour || 12 // the hour '0' should be '12'
+	//
+	//    minute = minute < 10 ? '0' + minute : minute
+	//    text = text + ' ' + hour + ':' + minute + ' ' + ampm
+	//}
+}
+
+function formatDay(date: Date, d: string): string {
+	if (d.length >= 4) {
+		return dayNames[date.getDay()];
+	} else if (d.length === 3) {
+		return dayNames[date.getDay()].substring(0, 3);
+	} else if (d.length == 2) {
+		let text = date.getDate().toString();
+		return text.length < 2 ? "0" + text : text;
+	} else {
+		return date.getDate().toString();
+	}
+}
+
+function formatMonth(date: Date, m: string): string {
+	if (m.length >= 4) {
+		return monthNames[date.getMonth()];
+	} else if (m.length === 3) {
+		return monthNames[date.getMonth()].substring(0, 3);
+	} else if (m.length == 2) {
+		let text = date.getMonth().toString();
+		return text.length < 2 ? "0" + text : text;
+	} else {
+		return date.getMonth().toString();
+	}
+}
+
+function formatYear(date: Date, y: string): string {
+	return date
+		.getFullYear()
+		.toString()
+		.substring(4 - y.length, y.length);
+}

package/src/utils/setPopoverPosition.ts

@@ -42,6 +42,7 @@ export default function setPopoverPosition(
 			break;
 		}
 		default: {
+			// eslint-disable-next-line restrict-template-expressions
 			throw new Error(`Invalid MenuPopout side: ${side}`);
 		}
 	}
@@ -68,6 +69,7 @@ export default function setPopoverPosition(
 			break;
 		}
 		default: {
+			// eslint-disable-next-line restrict-template-expressions
 			throw new Error(`Invalid MenuPopout side: ${side}`);
 		}
 	}
@@ -94,6 +96,7 @@ function setVerticalAlignment(
 			break;
 		}
 		default: {
+			// eslint-disable-next-line restrict-template-expressions
 			throw new Error(`Invalid Popout alignment: ${alignment}`);
 		}
 	}
@@ -126,6 +129,7 @@ function setHorizontalAlignment(
 			break;
 		}
 		default: {
+			// eslint-disable-next-line restrict-template-expressions
 			throw new Error(`Invalid Popout alignment: ${alignment}`);
 		}
 	}

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) {