@variocube/app-ui 1.15.0 → 1.16.0

package/src/formats/TemporalFormat.spec.tsx

@@ -1,110 +1,108 @@
-import {act, create, ReactTestRenderer} from "react-test-renderer";
 import * as React from "react";
+import {act, create, ReactTestRenderer} from "react-test-renderer";
 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 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("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 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("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("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("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 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("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("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("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 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("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 MESZ");
+	});
 
-    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("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 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");
-    });
+	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");
+	});
 });

package/src/formats/TemporalRangeFormat.spec.tsx

@@ -1,159 +1,158 @@
-import {act, create, ReactTestRenderer} from "react-test-renderer";
 import * as React from "react";
+import {act, create, ReactTestRenderer} from "react-test-renderer";
 import {Instant, PlainDate, PlainDateTime, PlainTime, ZonedDateTime} from "../temporal";
 import {TemporalRangeFormat} from "./TemporalRangeFormat";
 
 describe("TemporalRangeFormat", () => {
+	test("PlainDate de-AT", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			element = create(
+				<TemporalRangeFormat
+					from={PlainDate.from("2022-06-22")}
+					until={PlainDate.from("2022-06-30")}
+					locale="de-AT"
+				/>,
+			);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("22.–30.06.2022");
+	});
 
-    test("PlainDate de-AT", () => {
-        let element: ReactTestRenderer;
-        act(() => {
-            element = create(
-                <TemporalRangeFormat
-                    from={PlainDate.from("2022-06-22")}
-                    until={PlainDate.from("2022-06-30")}
-                    locale="de-AT"
-                />
-            );
-        });
-        const value = element!.root.children[0];
-        expect(value).toBe("22.–30.06.2022");
-    });
-
-    test("PlainDate en-US", () => {
-        let element: ReactTestRenderer;
-        act(() => {
-            element = create(
-                <TemporalRangeFormat
-                    from={PlainDate.from("2022-06-22")}
-                    until={PlainDate.from("2022-06-30")}
-                    locale="en-US"
-                />
-            );
-        });
-        const value = element!.root.children[0];
-        expect(value).toBe("6/22/2022 – 6/30/2022");
-    });
-
-    test("PlainDateTime de-AT", () => {
-        let element: ReactTestRenderer;
-        act(() => {
-            element = create(
-                <TemporalRangeFormat
-                    from={PlainDateTime.from("2022-06-22T14:22")}
-                    until={PlainDateTime.from("2022-06-22T17:55")}
-                    locale="de-AT"
-                />
-            );
-        });
-        const value = element!.root.children[0];
-        expect(value).toBe("22.6.2022, 14:22:00 – 17:55:00");
-    });
+	test("PlainDate en-US", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			element = create(
+				<TemporalRangeFormat
+					from={PlainDate.from("2022-06-22")}
+					until={PlainDate.from("2022-06-30")}
+					locale="en-US"
+				/>,
+			);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("6/22/2022 – 6/30/2022");
+	});
 
-    test("PlainDateTime en-US", () => {
-        let element: ReactTestRenderer;
-        act(() => {
-            element = create(
-                <TemporalRangeFormat
-                    from={PlainDateTime.from("2022-06-22T14:22")}
-                    until={PlainDateTime.from("2022-06-22T17:55")}
-                    locale="en-US"
-                />
-            );
-        });
-        const value = element!.root.children[0];
-        expect(value).toBe("6/22/2022, 2:22:00 PM – 5:55:00 PM");
-    });
+	test("PlainDateTime de-AT", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			element = create(
+				<TemporalRangeFormat
+					from={PlainDateTime.from("2022-06-22T14:22")}
+					until={PlainDateTime.from("2022-06-22T17:55")}
+					locale="de-AT"
+				/>,
+			);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("22.6.2022, 14:22:00 – 17:55:00");
+	});
 
-    test("PlainTime de-AT", () => {
-        let element: ReactTestRenderer;
-        act(() => {
-            element = create(
-                <TemporalRangeFormat
-                    from={PlainTime.from({hour: 14, minute: 22})}
-                    until={PlainTime.from({hour: 18, minute: 0, second: 3})}
-                    locale="de-AT"
-                />
-            );
-        });
-        const value = element!.root.children[0];
-        expect(value).toBe("14:22:00 – 18:00:03");
-    });
+	test("PlainDateTime en-US", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			element = create(
+				<TemporalRangeFormat
+					from={PlainDateTime.from("2022-06-22T14:22")}
+					until={PlainDateTime.from("2022-06-22T17:55")}
+					locale="en-US"
+				/>,
+			);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("6/22/2022, 2:22:00 PM – 5:55:00 PM");
+	});
 
-    test("PlainTime en-US", () => {
-        let element: ReactTestRenderer;
-        act(() => {
-            element = create(
-                <TemporalRangeFormat
-                    from={PlainTime.from({hour: 14, minute: 22})}
-                    until={PlainTime.from({hour: 18, minute: 0, second: 3})}
-                    locale="en-US"
-                />);
-        });
-        const value = element!.root.children[0];
-        expect(value).toBe("2:22:00 PM – 6:00:03 PM");
-    });
+	test("PlainTime de-AT", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			element = create(
+				<TemporalRangeFormat
+					from={PlainTime.from({hour: 14, minute: 22})}
+					until={PlainTime.from({hour: 18, minute: 0, second: 3})}
+					locale="de-AT"
+				/>,
+			);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("14:22:00 – 18:00:03");
+	});
 
-    test("ZonedDateTime de-AT", () => {
-        let element: ReactTestRenderer;
-        act(() => {
-            element = create(
-                <TemporalRangeFormat
-                    from={ZonedDateTime.from("2022-06-22T14:22[MET]")}
-                    until={ZonedDateTime.from("2022-06-22T19:22[MET]")}
-                    locale="de-AT"
-                />
-            );
-        });
-        const value = element!.root.children[0];
-        expect(value).toBe("22.6.2022, 14:22:00 GMT+2 – 19:22:00 GMT+2");
-    });
+	test("PlainTime en-US", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			element = create(
+				<TemporalRangeFormat
+					from={PlainTime.from({hour: 14, minute: 22})}
+					until={PlainTime.from({hour: 18, minute: 0, second: 3})}
+					locale="en-US"
+				/>,
+			);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("2:22:00 PM – 6:00:03 PM");
+	});
 
-    test("ZonedDateTime en-US", () => {
-        let element: ReactTestRenderer;
-        act(() => {
-            element = create(
-                <TemporalRangeFormat
-                    from={ZonedDateTime.from("2022-06-22T14:22[MET]")}
-                    until={ZonedDateTime.from("2022-06-22T19:22[MET]")}
-                    locale="en-US"
-                />
-            );
-        });
-        const value = element!.root.children[0];
-        expect(value).toBe("6/22/2022, 2:22:00 PM GMT+2 – 7:22:00 PM GMT+2");
-    });
+	test("ZonedDateTime de-AT", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			element = create(
+				<TemporalRangeFormat
+					from={ZonedDateTime.from("2022-06-22T14:22[MET]")}
+					until={ZonedDateTime.from("2022-06-22T19:22[MET]")}
+					locale="de-AT"
+				/>,
+			);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("22.6.2022, 14:22:00 MESZ – 19:22:00 MESZ");
+	});
 
-    test("Instant de-AT", () => {
-        let element: ReactTestRenderer;
-        act(() => {
-            element = create(
-                <TemporalRangeFormat
-                    from={Instant.from("2022-06-22T14:22:11Z")}
-                    until={Instant.from("2024-01-30T08:14:32Z")}
-                    timeZone="Europe/Vienna"
-                    locale="de-AT"
-                />
-            );
-        });
-        const value = element!.root.children[0];
-        expect(value).toBe("22.6.2022, 16:22:11 – 30.1.2024, 09:14:32");
-    });
+	test("ZonedDateTime en-US", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			element = create(
+				<TemporalRangeFormat
+					from={ZonedDateTime.from("2022-06-22T14:22[MET]")}
+					until={ZonedDateTime.from("2022-06-22T19:22[MET]")}
+					locale="en-US"
+				/>,
+			);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("6/22/2022, 2:22:00 PM GMT+2 – 7:22:00 PM GMT+2");
+	});
 
-    test("Instant en-US", () => {
-        let element: ReactTestRenderer;
-        act(() => {
-            element = create(
-                <TemporalRangeFormat
-                    from={Instant.from("2022-06-22T14:22:11Z")}
-                    until={Instant.from("2024-01-30T08:14:32Z")}
-                    locale="en-US"
-                    timeZone="UTC"
-                />
-            );
-        });
-        const value = element!.root.children[0];
-        expect(value).toBe("6/22/2022, 2:22:11 PM – 1/30/2024, 8:14:32 AM");
-    });
+	test("Instant de-AT", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			element = create(
+				<TemporalRangeFormat
+					from={Instant.from("2022-06-22T14:22:11Z")}
+					until={Instant.from("2024-01-30T08:14:32Z")}
+					timeZone="Europe/Vienna"
+					locale="de-AT"
+				/>,
+			);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("22.6.2022, 16:22:11 – 30.1.2024, 09:14:32");
+	});
 
+	test("Instant en-US", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			element = create(
+				<TemporalRangeFormat
+					from={Instant.from("2022-06-22T14:22:11Z")}
+					until={Instant.from("2024-01-30T08:14:32Z")}
+					locale="en-US"
+					timeZone="UTC"
+				/>,
+			);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("6/22/2022, 2:22:11 PM – 1/30/2024, 8:14:32 AM");
+	});
 });

package/src/formats/TemporalRangeFormat.tsx

@@ -1,62 +1,62 @@
-import {Formattable} from "../temporal";
-import {useDateTimeFormat} from "./useDateTimeFormat";
 import {Fragment, useMemo} from "react";
 import * as React from "react";
+import {Formattable} from "../temporal";
 import {DateStyle, TimeStyle} from "./types";
+import {useDateTimeFormat} from "./useDateTimeFormat";
 
 export interface TemporalRangeFormatProps {
-    /**
-     * The beginning of the temporal range.
-     */
-    from: Formattable;
-
-    /**
-     * The end of the temporal range.
-     */
-    until: Formattable;
-
-    /**
-     * 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;
-
-    /**
-     * Overrides the user's time zone. Use for testing only.
-     */
-    timeZone?: string;
+	/**
+	 * The beginning of the temporal range.
+	 */
+	from: Formattable;
+
+	/**
+	 * The end of the temporal range.
+	 */
+	until: Formattable;
+
+	/**
+	 * 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;
+
+	/**
+	 * Overrides the user's time zone. Use for testing only.
+	 */
+	timeZone?: string;
 }
 
 export function TemporalRangeFormat(props: TemporalRangeFormatProps) {
-    const {
-        from,
-        until,
-        dateStyle,
-        timeStyle,
-        locale,
-        timeZone,
-    } = props;
-
-    const options = useMemo(() => ({
-        dateStyle,
-        timeStyle,
-        timeZone,
-    }), [dateStyle, timeStyle]);
-
-    const dateTimeFormat = useDateTimeFormat(options, locale);
-
-    const str = useMemo(() => {
-        return dateTimeFormat.formatRange(from, until);
-    }, [dateTimeFormat, from, until]);
-
-    return <Fragment>{str}</Fragment>;
-}
+	const {
+		from,
+		until,
+		dateStyle,
+		timeStyle,
+		locale,
+		timeZone,
+	} = props;
+
+	const options = useMemo(() => ({
+		dateStyle,
+		timeStyle,
+		timeZone,
+	}), [dateStyle, timeStyle]);
+
+	const dateTimeFormat = useDateTimeFormat(options, locale);
+
+	const str = useMemo(() => {
+		return dateTimeFormat.formatRange(from, until);
+	}, [dateTimeFormat, from, until]);
+
+	return <Fragment>{str}</Fragment>;
+}

package/src/formats/types.ts

@@ -1,4 +1,2 @@
-
-
 export type DateStyle = "full" | "long" | "medium" | "short";
-export type TimeStyle = "full" | "long" | "medium" | "short";
+export type TimeStyle = "full" | "long" | "medium" | "short";

package/src/formats/useDateTimeFormat.ts

@@ -1,7 +1,10 @@
-import {getSupportedFormatLocale} from "../getSupportedFormatLocale";
 import {useMemo} from "react";
+import {getSupportedFormatLocale} from "../getSupportedFormatLocale";
 import {DateTimeFormat, DateTimeFormatOptions} from "../temporal";
 
 export function useDateTimeFormat(options?: DateTimeFormatOptions, locale?: string) {
-    return useMemo(() => new DateTimeFormat(locale ?? getSupportedFormatLocale("dateTime"), options), [options, locale]);
+	return useMemo(() => new DateTimeFormat(locale ?? getSupportedFormatLocale("dateTime"), options), [
+		options,
+		locale,
+	]);
 }

package/src/formats/useNumberFormat.ts

@@ -1,6 +1,6 @@
-import {getSupportedFormatLocale} from "../getSupportedFormatLocale";
 import {useMemo} from "react";
+import {getSupportedFormatLocale} from "../getSupportedFormatLocale";
 
 export function useNumberFormat(options?: Intl.NumberFormatOptions, locale?: string) {
-    return useMemo(() => new Intl.NumberFormat(locale ?? getSupportedFormatLocale("number"), options), [options]);
-}
+	return useMemo(() => new Intl.NumberFormat(locale ?? getSupportedFormatLocale("number"), options), [options]);
+}