@variocube/app-ui 1.14.0

package/src/formats/CompactFormat.tsx

@@ -0,0 +1,48 @@
+import {useNumberFormat} from "./useNumberFormat";
+import {Fragment, useMemo} from "react";
+import * as React from "react";
+
+export type CompactDisplay = "long" | "short";
+
+export interface CompactFormatProps {
+    /**
+     * The numeric amount of currency.
+     */
+    value: number | bigint | null | undefined;
+
+    /**
+     * Compact display.
+     */
+    compactDisplay?: CompactDisplay;
+
+    /**
+     * Overrides the user's locale. Use for testing only.
+     */
+    locale?: string;
+}
+
+/**
+ * Returns a compact string representing the large number `value` formatted according to the user's locale.
+ * @param props
+ * @constructor
+ */
+export function CompactFormat(props: CompactFormatProps) {
+    const {
+        value,
+        compactDisplay,
+        locale,
+    } = props;
+
+    const options = useMemo(() => ({
+        notation: "compact",
+        compactDisplay,
+    } as const), [compactDisplay]);
+
+    const numberFormat = useNumberFormat(options, locale);
+
+    const str = useMemo(() => {
+        return (typeof value == "number" || typeof value == "bigint") ? numberFormat.format(value) : "";
+    }, [numberFormat, value]);
+
+    return <Fragment>{str}</Fragment>;
+}

package/src/formats/CurrencyFormat.spec.tsx

@@ -0,0 +1,25 @@
+import {act, create, ReactTestRenderer} from "react-test-renderer";
+import * as React from "react";
+import {CurrencyFormat} from "./CurrencyFormat";
+
+describe("CurrencyFormat", () => {
+
+    test("render de-AT", () => {
+        let element: ReactTestRenderer;
+        act(() => {
+            element = create(<CurrencyFormat value={1234.5} currency="EUR" locale="de-AT" />);
+        })
+        const value = element!.root.children[0];
+        expect(value).toBe("€\u00a01.234,50"); // \u00a0 is a non-breaking space
+    });
+
+    test("render en-US", () => {
+        let element: ReactTestRenderer;
+        act(() => {
+            element = create(<CurrencyFormat value={1234.5} currency="USD" locale="en-US" />);
+        })
+        const value = element!.root.children[0];
+        expect(value).toBe("$1,234.50");
+    });
+
+});

package/src/formats/CurrencyFormat.tsx

@@ -0,0 +1,77 @@
+import {useNumberFormat} from "./useNumberFormat";
+import {Fragment, useMemo} from "react";
+import * as React from "react";
+
+export type CurrencyDisplay = "symbol" | "name" | "narrowSymbol" | "code";
+export type CurrencySign = "accounting" | "standard";
+
+export interface CurrencyFormatProps {
+    /**
+     * The numeric amount of currency.
+     */
+    value: number | bigint | null | undefined;
+
+    /**
+     * The 3-letter currency identifier.
+     */
+    currency: string;
+
+    /**
+     * How to display the currency. Default depends on the browser.
+     */
+    currencyDisplay?: CurrencyDisplay;
+
+    /**
+     * The currency sign to use. Default depends on the browser.
+     */
+    currencySign?: CurrencySign;
+
+    /**
+     * Minimum fraction digits. Default depends on the browser.
+     */
+    minimumFractionDigits?: number;
+
+    /**
+     * Maximum fraction digits. Default depends on the browser.
+     */
+    maximumFractionDigits?: number;
+
+    /**
+     * Overrides the user's locale. Use for testing only.
+     */
+    locale?: string;
+}
+
+/**
+ * Returns a string representing the specified `value` in the specified `currency` in the user's locale.
+ * @param props
+ * @constructor
+ */
+export function CurrencyFormat(props: CurrencyFormatProps) {
+    const {
+        value,
+        currency,
+        currencyDisplay,
+        currencySign,
+        minimumFractionDigits,
+        maximumFractionDigits,
+        locale,
+    } = props;
+
+    const options = useMemo(() => ({
+        style: "currency",
+        currency,
+        currencyDisplay,
+        currencySign,
+        minimumFractionDigits,
+        maximumFractionDigits,
+    }), [currency, currencyDisplay, currencySign, minimumFractionDigits, maximumFractionDigits]);
+
+    const numberFormat = useNumberFormat(options, locale);
+
+    const str = useMemo(() => {
+        return (typeof value == "number" || typeof value == "bigint") ? numberFormat.format(value) : "";
+    }, [numberFormat, value]);
+
+    return <Fragment>{str}</Fragment>;
+}

package/src/formats/DecimalFormat.spec.tsx

@@ -0,0 +1,25 @@
+import {act, create, ReactTestRenderer} from "react-test-renderer";
+import * as React from "react";
+import {DecimalFormat} from "./DecimalFormat";
+
+describe("DecimalFormat", () => {
+
+    test("render de-AT", () => {
+        let element: ReactTestRenderer;
+        act(() => {
+            element = create(<DecimalFormat value={1234.5} locale="de-AT" />);
+        })
+        const value = element!.root.children[0];
+        expect(value).toBe("1\u00a0234,5");
+    });
+
+    test("render en-US", () => {
+        let element: ReactTestRenderer;
+        act(() => {
+            element = create(<DecimalFormat value={1234.5} locale="en-US" />);
+        })
+        const value = element!.root.children[0];
+        expect(value).toBe("1,234.5");
+    });
+
+});

package/src/formats/DecimalFormat.tsx

@@ -0,0 +1,59 @@
+import {useNumberFormat} from "./useNumberFormat";
+import {Fragment, useMemo} from "react";
+import * as React from "react";
+
+export interface DecimalFormatProps {
+    /**
+     * The numeric amount of currency.
+     */
+    value: number | bigint | null | undefined;
+
+    /**
+     * Minimum fraction digits. Default depends on the browser.
+     */
+    minimumFractionDigits?: number;
+
+    /**
+     * Maximum fraction digits. Default depends on the browser.
+     */
+    maximumFractionDigits?: number;
+
+    /**
+     * Fraction digits. Shorthand to set both `minimumFractionDigits` and `maximumFractionDigits`.
+     */
+    fractionDigits?: number;
+
+    /**
+     * Overrides the user's locale. Use for testing only.
+     */
+    locale?: string;
+}
+
+/**
+ * Returns a string representing the specified `value` formatted according to the user's locale.
+ * @param props
+ * @constructor
+ */
+export function DecimalFormat(props: DecimalFormatProps) {
+    const {
+        value,
+        fractionDigits,
+        minimumFractionDigits = fractionDigits,
+        maximumFractionDigits = fractionDigits,
+        locale,
+    } = props;
+
+    const options = useMemo(() => ({
+        style: "decimal",
+        minimumFractionDigits,
+        maximumFractionDigits,
+    }), [minimumFractionDigits, maximumFractionDigits]);
+
+    const numberFormat = useNumberFormat(options, locale);
+
+    const str = useMemo(() => {
+        return (typeof value == "number" || typeof value == "bigint") ? numberFormat.format(value) : "";
+    }, [numberFormat, value]);
+
+    return <Fragment>{str}</Fragment>;
+}

package/src/formats/DurationFormat.spec.tsx

@@ -0,0 +1,57 @@
+import {act, create, ReactTestRenderer} from "react-test-renderer";
+import * as React from "react";
+import {DurationFormat} from "./DurationFormat";
+import {Duration, Now} from "../temporal";
+
+describe("DurationFormat", () => {
+
+    test("render de-AT", () => {
+        let element: ReactTestRenderer;
+        act(() => {
+            element = create(<DurationFormat value={Duration.from({days: 5, hours: 2, seconds: 2})} locale="de-AT" />);
+        })
+        const value = element!.root.children[0];
+        expect(value).toBe("5d 02:00:02");
+    });
+
+    test("render en-US", () => {
+        let element: ReactTestRenderer;
+        act(() => {
+            element = create(<DurationFormat value={Duration.from({days: 5, hours: 2, seconds: 2})} locale="en-US" />);
+        })
+        const value = element!.root.children[0];
+        expect(value).toBe("5d 02:00:02");
+    });
+
+    test("balance seconds de-AT", () => {
+        let element: ReactTestRenderer;
+        act(() => {
+            const duration = Now.instant().until(Now.instant().add({seconds: 10000}))
+                .round({largestUnit: "hours"});
+            element = create(<DurationFormat value={duration} locale="de-AT" />);
+        })
+        const value = element!.root.children[0];
+        expect(value).toBe("02:46:40");
+    });
+
+    test("balance days de-AT", () => {
+        let element: ReactTestRenderer;
+        act(() => {
+            const duration = Now.instant().until(Now.instant().add({hours: 5 * 24}))
+                .round({largestUnit: "days"});
+            element = create(<DurationFormat value={duration} locale="de-AT" />);
+        })
+        const value = element!.root.children[0];
+        expect(value).toBe("5d");
+    });
+
+    test("complex de-AT", () => {
+        let element: ReactTestRenderer;
+        act(() => {
+            const duration = Duration.from({years: 3, months: 4, weeks: 1, days: 6});
+            element = create(<DurationFormat value={duration} locale="de-AT" />);
+        })
+        const value = element!.root.children[0];
+        expect(value).toBe("3y 4m 1w 6d");
+    });
+});

package/src/formats/DurationFormat.tsx

@@ -0,0 +1,72 @@
+import {Duration} from "../temporal";
+import {getSupportedFormatLocale} from "../getSupportedFormatLocale";
+import * as React from "react";
+import {Fragment, useMemo} from "react";
+import {DateStyle, TimeStyle} from "./types";
+
+interface DurationFormatProps {
+    /**
+     * The duration value to format.
+     */
+    value?: Duration | null | undefined;
+
+    /**
+     * The style of the date format.
+     */
+    dateStyle?: DateStyle | undefined;
+
+    /**
+     * The style of the time format.
+     */
+    timeStyle?: TimeStyle | undefined;
+
+    /**
+     * Overrides the user's locale. Use for testing only.
+     */
+    locale?: string;
+}
+
+export function DurationFormat(props: DurationFormatProps) {
+    const {
+        value,
+        dateStyle,
+        timeStyle,
+        locale: suppliedLocale
+    } = props;
+
+    if (!value) {
+        return null;
+    }
+
+    const options = useMemo(() => ({
+        dateStyle,
+        timeStyle,
+    }), [dateStyle, timeStyle]);
+
+    const locale = useMemo(() => suppliedLocale ?? getSupportedFormatLocale("dateTime"), [suppliedLocale]);
+
+    const strValue = useMemo(() => {
+        // TODO: this can only be supported once a polyfill or browser support for DurationFormat is available
+        // https://github.com/tc39/proposal-intl-duration-format/
+        // In the meantime, we format the duration in a simple neural format.
+        return formatDuration(value);
+    }, [value, locale, options]);
+
+    return <Fragment>{strValue}</Fragment>;
+}
+
+function formatDuration(value: Duration) {
+    const parts = (["years", "months", "weeks", "days"] as const)
+        .map(prop => [prop, value[prop]] as const)
+        .filter(([_, value]) => Boolean(value))
+        .map(([prop, value]) => value + prop.charAt(0));
+
+    if (value.hours || value.minutes || value.seconds) {
+        const time = [value.hours || 0, value.minutes || 0, value.seconds]
+            .map(value => value.toString().padStart(2, "0"))
+            .join(":");
+        parts.push(time);
+    }
+
+    return parts.join(" ");
+}

package/src/formats/RelativeTemporalFormat.spec.tsx

@@ -0,0 +1,84 @@
+import * as React from "react";
+import {act, create, ReactTestRenderer} from "react-test-renderer";
+import {Now} from "../temporal";
+import {RelativeTemporalFormat} from "./RelativeTemporalFormat";
+
+describe("RelativeTemporalFormat", () => {
+	test("plainDate de-AT", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			element = create(<RelativeTemporalFormat value={Now.plainDateISO().subtract({days: 1})} locale="de-AT" />);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("gestern");
+	});
+
+	test("plainDate en-US", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			element = create(<RelativeTemporalFormat value={Now.plainDateISO().subtract({days: 1})} locale="en-US" />);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("yesterday");
+	});
+
+	// TODO: Does not round correctly on Node, but works in browser
+	test.skip("plainDateTime de-AT", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			element = create(<RelativeTemporalFormat value={Now.plainDateTimeISO().add({hours: 3})} locale="de-AT" />);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("in 3 Stunden");
+	});
+
+	// TODO: Does not round correctly on Node, but works in browser
+	test.skip("plainDateTime en-US", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			element = create(<RelativeTemporalFormat value={Now.plainDateTimeISO().add({hours: 3})} locale="en-US" />);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("in 3 hours");
+	});
+
+	// TODO: Does not round correctly on Node, but works in browser
+	test.skip("zonedDateTime de-AT", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			element = create(<RelativeTemporalFormat value={Now.zonedDateTimeISO().add({hours: 3})} locale="de-AT" />);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("in 3 Stunden");
+	});
+
+	// TODO: Does not round correctly on Node, but works in browser
+	test.skip("zonedDateTime en-US", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			element = create(<RelativeTemporalFormat value={Now.zonedDateTimeISO().add({hours: 3})} locale="en-US" />);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("in 3 hours");
+	});
+
+	// TODO: Does not round correctly on Node, but works in browser
+	test.skip("instant de-AT", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			element = create(<RelativeTemporalFormat value={Now.instant().add({hours: 3})} locale="de-AT" />);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("in 3 Stunden");
+	});
+
+	// TODO: Does not round correctly on Node, but works in browser
+	test.skip("instant en-US", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			element = create(<RelativeTemporalFormat value={Now.instant().add({hours: 3})} locale="en-US" />);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("in 3 hours");
+	});
+});

package/src/formats/RelativeTemporalFormat.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+import {Fragment, useMemo} from "react";
+import {Duration, Instant, Now, PlainDate, PlainDateTime, ZonedDateTime} from "../temporal";
+import {useRelativeTimeFormat} from "./useRelativeTimeFormat";
+
+export interface RelativeTemporalFormatProps {
+	/** The value to format. */
+	value?: PlainDate | PlainDateTime | ZonedDateTime | Instant | null | undefined;
+
+	/** The format of output message. */
+	numeric?: "always" | "auto" | undefined;
+
+	/** The length of the internationalized message */
+	style?: "long" | "short" | "narrow" | undefined;
+
+	/**
+	 * Overrides the user's locale. Use for testing only.
+	 */
+	locale?: string;
+}
+
+/**
+ * Returns a Temporal type formatted as relative time.
+ */
+export function useRelativeTemporalFormat(props: RelativeTemporalFormatProps) {
+	const {
+		value,
+		numeric = "auto",
+		style,
+		locale,
+	} = props;
+
+	const options = useMemo(() => ({
+		numeric,
+		style,
+	}), [numeric, style]);
+
+	// Convert the given value to a duration relative to "now", rounded to the largest unit.
+	// Unfortunately this is not straightforward and there might even be bugs in the polyfill.
+	const duration = useMemo(() => {
+		if (value instanceof PlainDate) {
+			const relativeTo = Now.plainDateISO();
+			return value.since(relativeTo, {largestUnit: "auto"})
+				.round({largestUnit: "years", relativeTo});
+		}
+		if (value instanceof PlainDateTime) {
+			const relativeTo = Now.plainDateTimeISO();
+			return value.since(relativeTo, {largestUnit: "auto"})
+				.round({largestUnit: "years", relativeTo});
+		}
+		if (value instanceof ZonedDateTime) {
+			const relativeTo = Now.zonedDateTimeISO();
+			return value.since(relativeTo, {largestUnit: "auto"})
+				.round({largestUnit: "years", relativeTo});
+		}
+		if (value instanceof Instant) {
+			const now = Now.instant();
+			const relativeTo = now.toZonedDateTimeISO(Now.timeZone());
+			return value.since(now, {largestUnit: "auto"})
+				.round({largestUnit: "years", relativeTo}) // first time rounds to hours
+				.round({largestUnit: "years", relativeTo}); // second time round to years
+		}
+		return undefined;
+	}, [value]);
+
+	const format = useRelativeTimeFormat(options, locale);
+
+	return useMemo(() => {
+		return duration ? format.format(...convertDuration(duration)) : "";
+	}, [format, duration]);
+}
+
+/**
+ * Displays a Temporal type formatted as relative time.
+ */
+export function RelativeTemporalFormat(props: RelativeTemporalFormatProps) {
+	return <Fragment>{useRelativeTemporalFormat(props)}</Fragment>;
+}
+
+type RelativeDateTimeFormatArgs = [number, Intl.RelativeTimeFormatUnit];
+
+function convertDuration(duration: Duration): RelativeDateTimeFormatArgs {
+	const props = ["years", "months", "weeks", "days", "hours", "minutes", "seconds"] as const;
+	const prop = props.find(prop => Boolean(duration[prop]));
+	return prop ? [duration[prop], prop] : [0, "seconds"];
+}

package/src/formats/SwitchableTemporalFormat.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import {useFlag} from "../utils";
+import {RelativeTemporalFormatProps, useRelativeTemporalFormat} from "./RelativeTemporalFormat";
+import {TemporalFormatProps, useTemporalFormat} from "./TemporalFormat";
+
+export type SwitchableTemporalFormatProps = TemporalFormatProps & RelativeTemporalFormatProps;
+
+export function SwitchableTemporalFormat(props: SwitchableTemporalFormatProps) {
+	const [isRelative, , , toggleRelative] = useFlag(true);
+	const relative = useRelativeTemporalFormat(props);
+	const absolute = useTemporalFormat(props);
+	return (
+		<abbr title={isRelative ? absolute : relative} onClick={toggleRelative}>
+			{isRelative ? relative : absolute}
+		</abbr>
+	);
+}

package/src/formats/TemporalFormat.spec.tsx

@@ -0,0 +1,110 @@
+import {act, create, ReactTestRenderer} from "react-test-renderer";
+import * as React from "react";
+import {Instant, PlainDate, PlainDateTime, PlainTime, ZonedDateTime} from "../temporal";
+import {TemporalFormat} from "./TemporalFormat";
+
+describe("TemporalFormat", () => {
+
+    test("PlainDate de-AT", () => {
+        let element: ReactTestRenderer;
+        act(() => {
+            element = create(<TemporalFormat value={PlainDate.from("2022-06-22")} locale="de-AT"/>);
+        });
+        const value = element!.root.children[0];
+        expect(value).toBe("22.6.2022");
+    });
+
+    test("PlainDate en-US", () => {
+        let element: ReactTestRenderer;
+        act(() => {
+            element = create(<TemporalFormat value={PlainDate.from("2022-06-22")} locale="en-US"/>);
+        });
+        const value = element!.root.children[0];
+        expect(value).toBe("6/22/2022");
+    });
+
+    test("PlainDateTime de-AT", () => {
+        let element: ReactTestRenderer;
+        act(() => {
+            element = create(<TemporalFormat value={PlainDateTime.from("2022-06-22T14:22")} locale="de-AT"/>);
+        });
+        const value = element!.root.children[0];
+        expect(value).toBe("22.6.2022, 14:22:00");
+    });
+
+    test("PlainDateTime en-US", () => {
+        let element: ReactTestRenderer;
+        act(() => {
+            element = create(<TemporalFormat value={PlainDateTime.from("2022-06-22T14:22")} locale="en-US"/>);
+        });
+        const value = element!.root.children[0];
+        expect(value).toBe("6/22/2022, 2:22:00 PM");
+    });
+
+    test("PlainTime de-AT", () => {
+        let element: ReactTestRenderer;
+        act(() => {
+            element = create(<TemporalFormat value={PlainTime.from({hour: 14, minute: 22})} locale="de-AT"/>);
+        });
+        const value = element!.root.children[0];
+        expect(value).toBe("14:22:00");
+    });
+
+    test("PlainTime en-US", () => {
+        let element: ReactTestRenderer;
+        act(() => {
+            element = create(<TemporalFormat value={PlainTime.from({hour: 14, minute: 22})} locale="en-US"/>);
+        });
+        const value = element!.root.children[0];
+        expect(value).toBe("2:22:00 PM");
+    });
+
+    test("ZonedDateTime de-AT", () => {
+        let element: ReactTestRenderer;
+        act(() => {
+            element = create(<TemporalFormat value={ZonedDateTime.from("2022-06-22T14:22[MET]")} locale="de-AT"/>);
+        });
+        const value = element!.root.children[0];
+        expect(value).toBe("22.6.2022, 14:22:00 GMT+2");
+    });
+
+    test("ZonedDateTime en-US", () => {
+        let element: ReactTestRenderer;
+        act(() => {
+            element = create(<TemporalFormat value={ZonedDateTime.from("2022-06-22T14:22[MET]")} locale="en-US"/>);
+        });
+        const value = element!.root.children[0];
+        expect(value).toBe("6/22/2022, 2:22:00 PM GMT+2");
+    });
+
+    test("Instant de-AT", () => {
+        let element: ReactTestRenderer;
+        act(() => {
+            element = create(
+                <TemporalFormat
+                    value={Instant.from("2022-06-22T14:22:11Z")}
+                    timeZone="Europe/Vienna"
+                    locale="de-AT"
+                />
+            );
+        });
+        const value = element!.root.children[0];
+        expect(value).toBe("22.6.2022, 16:22:11");
+    });
+
+    test("Instant en-US", () => {
+        let element: ReactTestRenderer;
+        act(() => {
+            element = create(
+                <TemporalFormat
+                    value={Instant.from("2022-06-22T14:22:11Z")}
+                    locale="en-US"
+                    timeZone="UTC"
+                />
+            );
+        });
+        const value = element!.root.children[0];
+        expect(value).toBe("6/22/2022, 2:22:11 PM");
+    });
+
+});