@variocube/app-ui 1.14.0

package/src/date-pickers/timeframe-picker.tsx

@@ -0,0 +1,202 @@
+import {Now, PlainDate, tryParsePlainDate} from "../temporal";
+import React, {ChangeEvent, useEffect} from "react";
+import {Box, Grid, MenuItem, TextField} from "@mui/material";
+import {PlainDatePicker} from "./PlainDatePicker";
+
+export enum TimeFrameType {
+	All = "All",
+	Today = "Today",
+	Yesterday = "Yesterday",
+	Last7Days = "Last7Days",
+	LastWeek = "LastWeek",
+	ThisMonth = "ThisMonth",
+	LastMonth = "LastMonth",
+	Last3Months = "Last3Months",
+	LastYear = "LastYear",
+	Custom = "Custom",
+}
+
+export interface FilterTimeFrame {
+	type: TimeFrameType;
+	from?: string | null;
+	until?: string | null;
+}
+
+interface TimeFrameSelectProps {
+	value: FilterTimeFrame;
+	onChange: (value: FilterTimeFrame) => void;
+	i18n?: {
+		timeframeTitle?: string;
+		from?: string;
+		until?: string;
+		types?: {
+			All?: string;
+			Today?: string;
+			Yesterday?: string;
+			Last7Days?: string;
+			LastWeek?: string;
+			ThisMonth?: string;
+			LastMonth?: string;
+			Last3Months?: string;
+			LastYear?: string;
+			Custom?: string;
+		}
+	}
+}
+
+export function TimeframePicker({value, onChange, i18n}: TimeFrameSelectProps) {
+	const {
+		type,
+		from,
+		until
+	} = value;
+
+	const fromPlainDate = tryParsePlainDate(from) ?? null;
+	const untilPlainDate = tryParsePlainDate(until) ?? null;
+
+	useEffect(() => {
+		const {from, until} = computeFromUntil(type, fromPlainDate, untilPlainDate);
+		onChange({
+			type,
+			from: from?.toString(),
+			until: until?.toString(),
+		});
+	}, [type, from, until]);
+
+	function handleTypeChange(event: ChangeEvent<HTMLInputElement>) {
+		const type = event.target.value as TimeFrameType;
+		const {from, until} = computeFromUntil(type, fromPlainDate, untilPlainDate);
+		onChange({
+			type,
+			from: from?.toString(),
+			until: until?.toString(),
+		});
+	}
+
+	function handleFromChange(value: PlainDate | null) {
+		onChange({
+			type,
+			from: value?.toString(),
+			until,
+		});
+	}
+
+	function handleUntilChange(value: PlainDate | null) {
+		onChange({
+			type,
+			from,
+			until: value?.toString(),
+		});
+	}
+
+	const {
+		timeframeTitle: tTimeframeTitle,
+		from: tFrom,
+		until: tUntil,
+		types: tTypes = {}
+	} = i18n ?? {};
+
+	return (
+		<Box>
+			<Grid container spacing={2}>
+				<Grid item md={4} xs={12}>
+					<TextField
+						fullWidth
+						select
+						variant="outlined"
+						label={tTimeframeTitle ?? 'Timeframe'}
+						value={type}
+						onChange={handleTypeChange}
+					>
+						{Object.values(TimeFrameType).map(tf => (
+							<MenuItem key={tf} value={tf}>{tTypes[tf] ?? tf}</MenuItem>
+						))}
+					</TextField>
+				</Grid>
+				<Grid item md={4} xs={12}>
+					<PlainDatePicker
+						label={tFrom ?? 'From'}
+						value={fromPlainDate}
+						onChange={handleFromChange}
+						disabled={type != TimeFrameType.Custom}
+						fullWidth
+					/>
+				</Grid>
+				<Grid item md={4} xs={12}>
+					<PlainDatePicker
+						label={tUntil ?? 'Until'}
+						value={untilPlainDate}
+						onChange={handleUntilChange}
+						disabled={type != TimeFrameType.Custom}
+						fullWidth
+					/>
+				</Grid>
+			</Grid>
+		</Box>
+	)
+}
+
+export function computeFromUntil(type: TimeFrameType, from?: PlainDate | null, until?: PlainDate | null) {
+	const today = Now.plainDateISO();
+	const yesterday = today.subtract({days: 1});
+	const lastMonth = today.subtract({months: 1});
+	const lastWeek = today.subtract({weeks: 1});
+	const lastYear = today.subtract({years: 1});
+
+	switch (type) {
+		case TimeFrameType.All:
+			return {from: undefined, until: undefined};
+
+		case TimeFrameType.Custom:
+			return {from, until};
+
+		case TimeFrameType.Today:
+			return {
+				from: today,
+				until: today,
+			}
+
+		case TimeFrameType.Yesterday:
+			return {
+				from: yesterday,
+				until: yesterday,
+			}
+
+		case TimeFrameType.Last7Days:
+			return {
+				from: yesterday.subtract({days: 7}),
+				until: yesterday,
+			};
+
+		case TimeFrameType.LastWeek:
+			return {
+				from: lastWeek.subtract({days: lastWeek.dayOfWeek - 1}),
+				until: lastWeek.add({days: 7 - lastWeek.dayOfWeek}),
+			}
+
+		case TimeFrameType.ThisMonth:
+			return {
+				from: today.with({day: 1}),
+				until: today.with({day: lastMonth.daysInMonth}),
+			}
+
+		case TimeFrameType.LastMonth:
+			return {
+				from: lastMonth.with({day: 1}),
+				until: lastMonth.with({day: lastMonth.daysInMonth}),
+			};
+
+		case TimeFrameType.Last3Months:
+			return {
+				from: lastMonth.subtract({months: 3}).with({day: 1}),
+				until: lastMonth.with({day: lastMonth.daysInMonth}),
+			}
+
+		case TimeFrameType.LastYear:
+			return {
+				from: lastYear.with({day: 1, month: 1}),
+				until: lastYear.with({day: 31, month: 12}),
+			}
+
+	}
+}

package/src/date-pickers/useLocale.ts

@@ -0,0 +1,6 @@
+import {useMemo} from "react";
+import {getSupportedFormatLocale} from "../getSupportedFormatLocale";
+
+export function useLocale(suppliedLocale: string | undefined) {
+    return useMemo(() => suppliedLocale || getSupportedFormatLocale("dateTime"), [suppliedLocale]);
+}

package/src/date-pickers/useRenderInput.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import {useCallback} from "react";
+import {TextFieldProps} from "@mui/material/TextField/TextField";
+import {TextField} from "@mui/material";
+
+export type UseRenderInputProps = Pick<TextFieldProps, "fullWidth" | "helperText" | "size" | "required">;
+
+export function useRenderInput(props: UseRenderInputProps) {
+    const {fullWidth, helperText, size, required} = props;
+    return useCallback((props: TextFieldProps) => (
+        <TextField
+            variant="outlined"
+            fullWidth={fullWidth}
+            helperText={helperText}
+            size={size}
+            required={required}
+            {...props}
+        />
+    ), [fullWidth, helperText, size]);
+}

package/src/fetch.spec.ts

@@ -0,0 +1,85 @@
+import {createApiError, createQueryString} from "./fetch";
+
+describe("createQueryString", () => {
+	test("simple", () => {
+		expect(createQueryString({foo: "bar"})).toEqual("foo=bar");
+	});
+	test("number", () => {
+		expect(createQueryString({foo: 5})).toEqual("foo=5");
+		expect(createQueryString({foo: 42.01})).toEqual("foo=42.01");
+	});
+	test("multi", () => {
+		expect(createQueryString({foo: "bar"}, {foo: "baz"})).toEqual("foo=bar&foo=baz");
+		expect(createQueryString({one: 1}, {two: 2})).toEqual("one=1&two=2");
+	});
+	test("array", () => {
+		expect(createQueryString({foo: ["bar", "baz"]})).toEqual("foo=bar&foo=baz");
+		expect(createQueryString({foo: ["bar", "baz"]}, {foo: ["bar2", "baz2"]})).toEqual(
+			"foo=bar&foo=baz&foo=bar2&foo=baz2",
+		);
+	});
+});
+
+describe("createApiError", () => {
+	test("problem+json with custom properties", async () => {
+		const response = new Response(
+			JSON.stringify({
+				title: "You do not have enough credit",
+				status: 400,
+				type: "https://example.com/probs/out-of-credit",
+				detail: "Your current balance is 30, but that costs 50.",
+				instance: "/account/12345/msgs/abc",
+				balance: 30,
+			}),
+			{status: 400, headers: {"Content-Type": "application/problem+json"}},
+		);
+
+		const result = await createApiError(response);
+		expect(result.title).toBe("You do not have enough credit");
+		expect(result.status).toBe(400);
+		expect(result.detail).toBe("Your current balance is 30, but that costs 50.");
+		expect(result.instance).toBe("/account/12345/msgs/abc");
+		expect(result.balance).toBe(30);
+	});
+	test("problem+json without custom properties", async () => {
+		const response = new Response(
+			JSON.stringify({
+				title: "You do not have enough credit",
+				status: 400,
+				type: "https://example.com/probs/out-of-credit",
+				detail: "Your current balance is 30, but that costs 50.",
+			}),
+			{status: 400, headers: {"Content-Type": "application/problem+json"}},
+		);
+
+		const result = await createApiError(response);
+		expect(result.title).toBe("You do not have enough credit");
+		expect(result.status).toBe(400);
+		expect(result.detail).toBe("Your current balance is 30, but that costs 50.");
+	});
+	test("non-json body", async () => {
+		const response = new Response("Page not found.", {status: 404, statusText: "Not found"});
+		const result = await createApiError(response);
+		expect(result.title).toBe("Not found");
+		expect(result.status).toBe(404);
+	});
+	test("no content", async () => {
+		const response = new Response(null, {status: 204, statusText: "No content"});
+		const result = await createApiError(response);
+		expect(result.title).toBe("No content");
+		expect(result.status).toBe(204);
+	});
+	test("older format", async () => {
+		const response = new Response(
+			JSON.stringify({
+				error: "Failed to query data.",
+				message: "There was a problem with your request.",
+			}),
+			{status: 400},
+		);
+		const result = await createApiError(response);
+		expect(result.title).toBe("Failed to query data.");
+		expect(result.detail).toBe("There was a problem with your request.");
+		expect(result.status).toBe(400);
+	});
+});

package/src/fetch.ts

@@ -0,0 +1,165 @@
+export interface ProblemJson {
+	title: string;
+	status: number;
+	type?: string;
+	instance?: string;
+	detail?: string;
+	[key: string]: any;
+}
+
+/** An error from the REST API. */
+export class ApiError extends Error implements ProblemJson {
+	constructor(problemJson: ProblemJson) {
+		super(problemJson.title);
+		this.title = problemJson.title;
+		this.status = problemJson.status;
+		Object.assign(this, problemJson);
+	}
+
+	title: string;
+	status: number;
+	type?: string;
+	instance?: string;
+	detail?: string;
+	[key: string]: any;
+}
+
+/**
+ * Creates a wrapper around window.fetch for most common REST API requests.
+ * @param baseUrl The base URL of the API, i.e. https://api.cubeadmin.center
+ * @param baseHeaders The base headers of each request, i.e. {Authorization: "Bearer XXXX"}
+ */
+export function createApiFetcher(baseUrl: string, baseHeaders?: HeadersInit) {
+	async function fetch(path: string, options?: RequestInit) {
+		options = options || {};
+		options.headers = {
+			...baseHeaders,
+			...options.headers,
+		};
+		const response = await window.fetch(`${baseUrl}${path}`, options);
+		await checkOkay(response);
+		return response;
+	}
+
+	async function fetchJson<T>(path: string, options?: RequestInit) {
+		const response = await fetch(path, options);
+		return await response.json() as T;
+	}
+
+	return {
+		fetch,
+		fetchJson,
+		get: fetchJson,
+		del: (path: string, body?: any) => fetch(path, createJsonRequest("delete", body)),
+		put: (path: string, body?: any) => fetch(path, createJsonRequest("put", body)),
+		post: (path: string, body?: any) => fetch(path, createJsonRequest("post", body)),
+		patch: (path: string, body?: any) => fetch(path, createJsonRequest("PATCH", body)),
+	};
+}
+
+export type ApiFetcher = ReturnType<typeof createApiFetcher>;
+
+async function checkOkay(response: Response) {
+	if (!response.ok) {
+		throw await createApiError(response);
+	}
+}
+
+function isProblemJson(error: any): error is ProblemJson {
+	return typeof error.title == "string" && typeof error.status == "number";
+}
+
+function isLegacySpringError(error: any): error is { error: string; message: string } {
+	return typeof error.error == "string" && typeof error.message == "string";
+}
+
+export async function createApiError(response: Response) {
+	const statusText = response.statusText || "Error";
+	try {
+		const error = await response.json();
+		if (isProblemJson(error)) {
+			return new ApiError(error);
+		}
+		if (isLegacySpringError(error)) {
+			return new ApiError({
+				title: error.error,
+				status: response.status,
+				detail: error.message,
+			});
+		}
+		// As a fallback, just copy the response body to the error and use title and status
+		// from the response
+		return new ApiError({
+			...error,
+			title: statusText,
+			status: response.status,
+		});
+	} catch (parseError) {
+		// If parsing fails, fallback to generic error based on HTTP status
+		return new ApiError({
+			title: statusText,
+			status: response.status,
+		});
+	}
+}
+
+/**
+ * Creates a query string from one or more objects containing key value pairs.
+ * @param args
+ */
+export function createQueryString(...args: Record<string, any>[]) {
+	const allArgs = args.reduce((acc, curr) => {
+		const currArgs = Object.entries(curr)
+			.filter(([_, value]) => typeof value != "undefined" && value !== null)
+			.flatMap(([key, value]) =>
+				(Array.isArray(value) ? value : [value])
+					.map(value => [key, `${value}`])
+			);
+		return acc.concat(currArgs);
+	}, []);
+	return new URLSearchParams(allArgs).toString();
+}
+
+export function createJsonRequest(method: string, body?: any): RequestInit {
+	return {
+		method: method,
+		...getBodyRequestInit(body),
+	};
+}
+
+function getBodyRequestInit(body?: any) {
+	if (typeof body !== "undefined") {
+		return {
+			body: JSON.stringify(body),
+			headers: {
+				"content-type": "application/json",
+			},
+		};
+	} else {
+		return {
+			body: null,
+		};
+	}
+}
+
+interface UploadFileRequest {
+	uploadUrl: string;
+	uploadHeaders: Record<string, string>;
+}
+
+/**
+ * Uploads a file to the specified upload URL that is compatible with an Amazon S3 pre-signed PUT URL.
+ * @param file The file to upload
+ * @param request The upload file request
+ */
+export async function uploadFile(file: File, request: UploadFileRequest) {
+	const response = await fetch(request.uploadUrl, {
+		method: "put",
+		headers: {
+			"content-type": file.type,
+			...request.uploadHeaders,
+		},
+		body: file,
+	});
+	await checkOkay(response);
+}

package/src/filter/Filter.tsx

@@ -0,0 +1,194 @@
+import {Clear, ExpandLess, ExpandMore, FilterList} from "@mui/icons-material";
+import {Box, Chip, Collapse, FormControl, IconButton, InputLabel, Paper, Stack, styled} from "@mui/material";
+import React, {KeyboardEvent, PropsWithChildren, ReactNode, useEffect, useState} from "react";
+import {TextField, TextFieldProps} from "../Input";
+import {Labels} from "../localization";
+import {useFlag} from "../utils";
+
+export interface FilterProps {
+	label?: string;
+	active?: ReactNode[];
+	enableSearch?: boolean;
+	onSearch?: (search: string) => any;
+	onClear?: () => any;
+
+	variant?: TextFieldProps["variant"];
+	labels: Labels<"none" | "search" | "reset">;
+
+	/**
+	 * Whether the filter input takes up the full width of the container. This is now always true.
+	 * If you need a smaller width, place this control in a smaller container.
+	 *
+	 * @deprecated This is now ignored and always true. Remove this property.
+	 */
+	fullWidth?: boolean;
+
+	/**
+	 * Whether the `children` are placed in a paper (default: true).
+	 */
+	paper?: boolean;
+
+	/**
+	 * Called when the filter is opened.
+	 *
+	 * @deprecated use `onChangeOpen` instead.
+	 */
+	onFilterClick?: () => void;
+
+	/**
+	 * Called when the open state of the filter changes.
+	 * @param open Whether the filter is opened.
+	 */
+	onChangeOpen?: (open: boolean) => void;
+}
+
+export const OutlinedContainer = styled(Box)(({theme}) => ({
+	display: "flex",
+	alignItems: "center",
+	padding: theme.spacing(1),
+	borderRadius: theme.shape.borderRadius,
+	border: `1px solid ${theme.palette.divider}`,
+}));
+
+export function Filter(props: PropsWithChildren<FilterProps>) {
+	const {
+		label,
+		active,
+		enableSearch,
+		onSearch,
+		onClear,
+		variant,
+		labels,
+		paper = true,
+		onFilterClick,
+		onChangeOpen,
+		children,
+	} = props;
+
+	const [open, setOpen, , toggleOpen] = useFlag(false);
+
+	const [value, setValue] = useState("");
+
+	function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {
+		if (onSearch) {
+			if (e.key == "Enter") {
+				onSearch(value);
+				setValue("");
+			}
+		}
+	}
+
+	useEffect(() => {
+		if (open && onFilterClick) {
+			onFilterClick();
+		}
+	}, [onFilterClick, open]);
+
+	useEffect(() => {
+		if (onChangeOpen) {
+			onChangeOpen(open);
+		}
+	}, [onChangeOpen, open]);
+
+	const hasActiveFilter = Boolean(active?.filter(node => Boolean(node)).length);
+
+	return (
+		<Box>
+			<FormControl variant={variant} fullWidth onClick={enableSearch ? undefined : toggleOpen}>
+				{label && (
+					<InputLabel shrink>
+						{label}
+					</InputLabel>
+				)}
+
+				<OutlinedContainer>
+					<Stack
+						sx={{
+							flexDirection: {
+								xs: "column",
+								sm: "row",
+							},
+							alignItems: "center",
+							width: "100%",
+						}}
+						spacing={1}
+						useFlexGap
+					>
+						{children && (
+							<IconButton
+								onClick={enableSearch ? toggleOpen : undefined}
+								sx={{
+									display: {
+										xs: "none",
+										sm: "inline-flex",
+									},
+								}}
+							>
+								<FilterList />
+							</IconButton>
+						)}
+
+						<Stack
+							direction="row"
+							alignItems="center"
+							sx={{
+								justifyContent: {
+									xs: "center",
+									sm: "flex-start",
+								},
+							}}
+							flexWrap="wrap"
+							spacing={1}
+							useFlexGap
+							flex={1}
+						>
+							{active}
+							{enableSearch && (
+								<TextField
+									value={value}
+									onChange={setValue}
+									onKeyDown={handleKeyDown}
+									variant={"standard"}
+									placeholder={enableSearch ? labels("search") : undefined}
+								/>
+							)}
+						</Stack>
+
+						<Stack direction="row" spacing={1} alignItems="center">
+							{!hasActiveFilter && (
+								<Chip
+									variant="outlined"
+									label={labels("none")}
+									clickable
+									onClick={enableSearch ? setOpen : undefined}
+								/>
+							)}
+							{hasActiveFilter && onClear && (
+								<IconButton onClick={onClear} title={labels("reset")}>
+									<Clear />
+								</IconButton>
+							)}
+							{children && (
+								<IconButton onClick={enableSearch ? toggleOpen : undefined} edge="end">
+									{open ? <ExpandLess /> : <ExpandMore />}
+								</IconButton>
+							)}
+						</Stack>
+					</Stack>
+				</OutlinedContainer>
+			</FormControl>
+
+			{children && (
+				<Collapse in={open} mountOnEnter unmountOnExit>
+					{paper
+						? (
+							<Paper elevation={2}>
+								{children}
+							</Paper>
+						)
+						: children}
+				</Collapse>
+			)}
+		</Box>
+	);
+}

package/src/filter/index.ts

@@ -0,0 +1 @@
+export * from "./Filter";

package/src/formats/CompactFormat.spec.tsx

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