@variocube/app-ui 1.14.0

package/src/formats/TemporalFormat.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import {Fragment, useMemo} from "react";
+import {Formattable} from "../temporal";
+import {DateStyle, TimeStyle} from "./types";
+import {useDateTimeFormat} from "./useDateTimeFormat";
+
+export interface TemporalFormatProps {
+	/**
+	 * The date value to format.
+	 */
+	value?: Formattable | 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;
+
+	/**
+	 * Overrides the user's time zone. Use for testing only.
+	 */
+	timeZone?: string;
+}
+
+export function useTemporalFormat(props: TemporalFormatProps) {
+	const {
+		value,
+		dateStyle,
+		timeStyle,
+		locale,
+		timeZone,
+	} = props;
+
+	const options = useMemo(() => ({
+		dateStyle,
+		timeStyle,
+		timeZone,
+	}), [dateStyle, timeStyle]);
+
+	const dateTimeFormat = useDateTimeFormat(options, locale);
+
+	return useMemo(() => {
+		return value != null ? dateTimeFormat.format(value) : "";
+	}, [dateTimeFormat, value]);
+}
+
+export function TemporalFormat(props: TemporalFormatProps) {
+	return <Fragment>{useTemporalFormat(props)}</Fragment>;
+}

package/src/formats/TemporalRangeFormat.spec.tsx

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

@@ -0,0 +1,62 @@
+import {Formattable} from "../temporal";
+import {useDateTimeFormat} from "./useDateTimeFormat";
+import {Fragment, useMemo} from "react";
+import * as React from "react";
+import {DateStyle, TimeStyle} from "./types";
+
+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;
+}
+
+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>;
+}

package/src/formats/index.ts

@@ -0,0 +1,8 @@
+export * from "./CompactFormat";
+export * from "./CurrencyFormat";
+export * from "./DecimalFormat";
+export * from "./DurationFormat";
+export * from "./RelativeTemporalFormat";
+export * from "./SwitchableTemporalFormat";
+export * from "./TemporalFormat";
+export * from "./TemporalRangeFormat";

package/src/formats/types.ts

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

package/src/formats/useDateTimeFormat.ts

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

package/src/formats/useNumberFormat.ts

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

package/src/formats/useRelativeTimeFormat.ts

@@ -0,0 +1,6 @@
+import {getSupportedFormatLocale} from "../getSupportedFormatLocale";
+import {useMemo} from "react";
+
+export function useRelativeTimeFormat(options?: Intl.RelativeTimeFormatOptions, locale?: string) {
+    return useMemo(() => new Intl.RelativeTimeFormat(locale ?? getSupportedFormatLocale("relativeTime"), options), [options]);
+}

package/src/forms/EditForm.tsx

@@ -0,0 +1,69 @@
+import {
+	Button,
+	Card,
+	CardContent,
+	CardContentProps as MuiCardContentProps,
+	CardProps as MuiCardProps,
+	Stack,
+} from "@mui/material";
+import React, {PropsWithChildren} from "react";
+import {ErrorAlert} from "../ErrorAlert";
+import {CloseIcon} from "../icons";
+import {Labels} from "../localization";
+import {SubmitButton} from "./SubmitButton";
+import {useFormSubmit} from "./useFormSubmit";
+
+interface EditFormProps {
+	loading: boolean;
+	onSave: () => Promise<any>;
+	onCancel?: () => void;
+	CardProps?: MuiCardProps;
+	CardContentProps?: MuiCardContentProps;
+	labels: Labels<"save" | "cancel">;
+}
+
+export function EditForm(
+	{children, loading, onSave, onCancel, CardProps, CardContentProps, labels}: PropsWithChildren<EditFormProps>,
+) {
+	const {onSubmit, onChange, submitted, submitting, error} = useFormSubmit({
+		onSubmit: onSave,
+	});
+
+	const pending = loading || submitting;
+
+	return (
+		<Card {...CardProps}>
+			<form onSubmit={onSubmit} onChange={onChange}>
+				{children}
+				{error && (
+					<CardContent {...CardContentProps}>
+						<ErrorAlert error={error} />
+					</CardContent>
+				)}
+				<CardContent {...CardContentProps}>
+					<Stack direction="row" spacing={2}>
+						<SubmitButton
+							variant="outlined"
+							disabled={pending}
+							submitted={submitted}
+							submitting={submitting}
+						>
+							{labels("save")}
+						</SubmitButton>
+						{onCancel && (
+							<Button
+								variant="outlined"
+								color="inherit"
+								disabled={pending}
+								startIcon={<CloseIcon />}
+								onClick={onCancel}
+							>
+								{labels("cancel")}
+							</Button>
+						)}
+					</Stack>
+				</CardContent>
+			</form>
+		</Card>
+	);
+}

package/src/forms/SearchForm.tsx

@@ -0,0 +1,51 @@
+import {IconButton, InputAdornment} from "@mui/material";
+import * as React from "react";
+import {FormEvent, useEffect, useState} from "react";
+import {SearchIcon} from "../icons";
+import {TextField, TextFieldProps} from "../Input/TextField";
+
+export type SearchFormProps = Omit<TextFieldProps, "value" | "onChange" | "InputProps"> & {
+    search?: string;
+    onSearch: (search: string) => void;
+}
+
+export function SearchForm(props: SearchFormProps) {
+    const {
+        search,
+        onSearch,
+        ...rest
+    } = props;
+
+
+    const [value, setValue] = useState(search || "");
+
+    useEffect(() => {
+        if (search) {
+            setValue(value);
+        }
+    }, [search]);
+
+    function handleSubmit(e: FormEvent) {
+        e.preventDefault();
+        onSearch(value);
+    }
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <TextField
+                value={value}
+                onChange={setValue}
+                InputProps={{
+                    endAdornment: (
+                        <InputAdornment position="end">
+                            <IconButton type="submit" size="large">
+                                <SearchIcon/>
+                            </IconButton>
+                        </InputAdornment>
+                    )
+                }}
+                {...rest}
+            />
+        </form>
+    );
+}

package/src/forms/SubmitButton.tsx

@@ -0,0 +1,34 @@
+import {Button, ButtonProps, CircularProgress} from "@mui/material";
+import React, {ReactNode, useMemo} from "react";
+import {SaveIcon, SuccessIcon} from "../icons";
+
+interface SubmitButtonProps extends Omit<ButtonProps, "startIcon" | "type"> {
+	submitting: boolean;
+	submitted: boolean;
+	icon?: ReactNode;
+}
+
+export function SubmitButton(props: SubmitButtonProps) {
+	const {icon, submitted, submitting, disabled, ...rest} = props;
+
+	const dynamicIcon = useMemo(() => {
+		if (submitting) {
+			return <CircularProgress size={16} sx={{mx: 0.25}} />;
+		}
+		if (submitted) {
+			return <SuccessIcon fontSize="small" />;
+		}
+		return icon ?? <SaveIcon />;
+	}, [submitting, submitted]);
+
+	return (
+		<Button
+			type="submit"
+			variant="outlined"
+			startIcon={dynamicIcon}
+			disabled={disabled || submitting}
+			color={submitted ? "success" : "primary"}
+			{...rest}
+		/>
+	);
+}

package/src/forms/index.ts

@@ -0,0 +1,4 @@
+export * from "./EditForm";
+export * from "./SearchForm";
+export * from "./SubmitButton";
+export * from "./useFormSubmit";

package/src/forms/useFormSubmit.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import {useAsyncCallback} from "react-async-hook";
+import {useFlag} from "../utils";
+
+interface UseFormSubmitOptions {
+	onSubmit: () => Promise<any>;
+}
+
+export function useFormSubmit({onSubmit}: UseFormSubmitOptions) {
+	const [submitted, setSubmitted, clearSubmitted] = useFlag(false);
+
+	const {loading: submitting, error, execute: save} = useAsyncCallback(
+		async (e: React.FormEvent<HTMLFormElement>) => {
+			e.preventDefault();
+			clearSubmitted();
+			await onSubmit();
+			setSubmitted();
+		},
+	);
+
+	return {
+		submitting,
+		submitted,
+		error,
+		onSubmit: save,
+		onChange: clearSubmitted,
+	};
+}

package/src/getNavigatorLanguages.ts

@@ -0,0 +1,11 @@
+
+/**
+ * Returns the users preferred languages selected in the browser, or an empty array if not called in a browser context.
+ * @see navigator.languages
+ */
+export function getNavigatorLanguages() {
+    if (typeof navigator != "undefined") {
+        return navigator.languages || [navigator.language || (navigator as any).userLanguage];
+    }
+    return [];
+}

package/src/getSupportedFormatLocale.ts

@@ -0,0 +1,24 @@
+import {getNavigatorLanguages} from "./getNavigatorLanguages";
+import {DateTimeFormat} from "./temporal";
+
+export const IntlFormats = {
+    "number": Intl.NumberFormat,
+    "relativeTime": Intl.RelativeTimeFormat,
+    "dateTime": DateTimeFormat,
+} as const;
+
+export type IntlFormat = keyof typeof IntlFormats;
+
+const supportedLocaleCache = {} as Record<IntlFormat, string>;
+
+export function getSupportedFormatLocale(format: IntlFormat) {
+    return supportedLocaleCache[format] ?? findSupportedFormatLocale(format);
+}
+
+function findSupportedFormatLocale(format: IntlFormat) {
+    const formatCtor = IntlFormats[format];
+    const locale = getNavigatorLanguages()
+        .find(locale => locale == new formatCtor(locale).resolvedOptions().locale) ?? "default";
+    supportedLocaleCache[format] = locale;
+    return locale;
+}

package/src/help/HelpButton.tsx

@@ -0,0 +1,134 @@
+import {Help} from "@mui/icons-material";
+import {IconButton} from "@mui/material";
+import * as React from "react";
+import {useCallback, useEffect, useMemo, useState} from "react";
+import {useHelpSettingsContext} from "./HelpSettingsContext";
+
+/**
+ * For english language must be an empty string.
+ */
+interface HelpProps {
+	helpPage: string;
+	helpAnchor: string;
+	language: string;
+	showEmpty?: boolean;
+}
+
+type wikipageParse = {
+	parse: wikipageType;
+};
+
+type sectionsArray = {
+	anchor: string;
+	byteoffset: number;
+	fromtitle: string;
+	index: string;
+	level: string;
+	line: string;
+	number: string;
+	toclevel: number;
+};
+
+type wikipageType = {
+	categories: string[];
+	displaytitle: string;
+	externallinks: string[];
+	images: string[];
+	iwLinks: string[];
+	langlinks: string[];
+	links: string[];
+	pageid: number;
+	parsewarning: string[];
+	properties: string[];
+	revid: number;
+	sections: sectionsArray[];
+	templates: string[];
+	text: string;
+	title: string;
+};
+
+export function HelpButton({helpPage, helpAnchor = "", language = "", showEmpty}: HelpProps) {
+	const {
+		baseUrl,
+		apiUrl,
+		selectedHelpPage: selectedHelpPage,
+		setSelectedHelpPage: setSelectedHelpPage,
+		clearSelectedHelpPage: clearSelectedHelpPage,
+		selectedHelpAnchor: selectedHelpAnchor,
+		setSelectedHelpAnchor: setSelectedHelpAnchor,
+		clearSelectedHelpAnchor: clearSelectedHelpAnchor,
+		selectedHelpLanguage: selectedHelpLanguage,
+		setSelectedHelpLanguage: setSelectedHelpLanguage,
+		clearSelectedHelpLanguage: clearSelectedHelpLanguage,
+	} = useHelpSettingsContext();
+
+	const currentSelectedHelpPage = useMemo<boolean>(() => selectedHelpPage === helpPage, [selectedHelpPage, helpPage]);
+	const currentSelectedHelpAnchor = useMemo<boolean>(() => selectedHelpAnchor === helpAnchor, [
+		selectedHelpAnchor,
+		helpAnchor,
+	]);
+	const currentSelectedHelpLanguage = useMemo<boolean>(() => selectedHelpLanguage === language, [
+		selectedHelpLanguage,
+		language,
+	]);
+
+	const [hasContent, setHasContent] = useState<boolean>();
+	const languageUrl = (language == "de" ? "/de" : "");
+
+	useEffect(() => {
+		(async () => {
+			if (!apiUrl) {
+				console.info("No API URL provided for HelpButton, cannot check if content exists");
+				return;
+			}
+			try {
+				const response = await fetch(
+					`${apiUrl}?action=parse&page=${helpPage}${languageUrl}&format=json`,
+					{
+						method: "GET",
+						mode: "no-cors",
+					},
+				);
+				if (response.ok) {
+					const wp: wikipageParse = await response.json();
+					setHasContent(wp.parse.sections.find(s => s.anchor === helpAnchor) != undefined);
+				}
+			} catch (err) {
+				console.log("Error while fetching Wiki Page.");
+			}
+		})();
+	}, []);
+
+	const handleHelpButtonClicked = useCallback(() => {
+		if (!currentSelectedHelpPage || !currentSelectedHelpAnchor) {
+			setSelectedHelpPage(helpPage);
+			setSelectedHelpAnchor(helpAnchor || "");
+			setSelectedHelpLanguage(language || "");
+		} else {
+			clearSelectedHelpPage();
+			clearSelectedHelpAnchor();
+			clearSelectedHelpLanguage();
+		}
+	}, [helpPage, currentSelectedHelpPage, currentSelectedHelpAnchor, currentSelectedHelpLanguage]);
+
+	if (!baseUrl || (!hasContent && !showEmpty)) {
+		return null;
+	}
+
+	return (
+		<IconButton
+			onClick={ev => {
+				ev.stopPropagation();
+				handleHelpButtonClicked();
+			}}
+			size="small"
+			color={!hasContent
+				? "error"
+				: (currentSelectedHelpPage && currentSelectedHelpAnchor && currentSelectedHelpLanguage
+					? "primary"
+					: "default")}
+		>
+			<Help />
+		</IconButton>
+	);
+}