@variocube/app-ui 1.14.0

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@variocube/app-ui",
+  "version": "1.14.0",
+  "description": "Common UI components for Variocube applications.",
+  "module": "esm/index.js",
+  "types": "esm/index.d.ts",
+  "scripts": {
+    "dev": "webpack serve --progress",
+    "clean": "rimraf esm/",
+    "build": "npm run clean && tsc",
+    "test": "npx jest",
+    "build:demo": "webpack"
+  },
+  "files": [
+    "esm/**/*",
+    "src/**/*"
+  ],
+  "peerDependencies": {
+    "@emotion/react": "11.x",
+    "@emotion/styled": "11.x",
+    "@mui/icons-material": "5.x",
+    "@mui/lab": ">5.0.0-alpha <6",
+    "@mui/material": "5.x",
+    "@mui/x-date-pickers": ">5.0.0-beta <6",
+    "mustache": "4.x",
+    "react": "17.x"
+  },
+  "dependencies": {
+    "@fontsource/jetbrains-mono": "^5.0.18",
+    "@js-temporal/polyfill": "0.4.3",
+    "deepmerge": "^4.3.0",
+    "error-stack-parser": "^2.1.4",
+    "json-lexer": "^1.2.0",
+    "react-async-hook": "^4.0.0",
+    "roboto-fontface": "^0.10.0",
+    "semver": "^7.5.4"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.15.7",
+    "@mui/lab": "^5.0.0-alpha.162",
+    "@mui/material": "^5.15.7",
+    "@mui/x-date-pickers": "^5.0.0-beta.0",
+    "@types/jest": "^27.5.1",
+    "@types/mustache": "^4.1.2",
+    "@types/react-dom": "^17.0.17",
+    "@types/react-helmet": "^6.1.11",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@types/react-test-renderer": "^17.0.2",
+    "dprint": "^0.46.3",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.5.0",
+    "jest": "^29.7.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0",
+    "react-syntax-highlighter": "^15.5.0",
+    "react-test-renderer": "^17.0.2",
+    "rimraf": "^3.0.2",
+    "ts-jest": "^29.1.2",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.3.3",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.9.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/AppShell/AppShell.tsx

@@ -0,0 +1,165 @@
+import {AppBar, Box, Breakpoint, Drawer, IconButton, useMediaQuery, useTheme} from "@mui/material";
+import React, {PropsWithChildren, useEffect} from "react";
+import {useFlag} from "../utils";
+import {MenuIcon} from "../icons";
+import {LayoutProvider} from "../layout";
+import {VCAppLogo} from "../logo/VCAppLogo";
+
+interface AppShellProps {
+    appName: string;
+    sideNav?: JSX.Element | null | undefined;
+    sideNavWidth?: number;
+    sideNavFixed?: Breakpoint;
+    topNav?: JSX.Element | null | undefined;
+    footer?: JSX.Element | null | undefined;
+}
+
+export function AppShell(props: PropsWithChildren<AppShellProps>) {
+
+    const {
+        children,
+        appName,
+        sideNav,
+        sideNavWidth = 200,
+        topNav,
+        sideNavFixed = "md",
+        footer,
+    } = props;
+
+    const [drawerOpen, setDrawerOpen, clearDrawerOpen, toggleDrawerOpen] = useFlag(false);
+
+    const theme = useTheme();
+
+    const drawerPermanent = useMediaQuery(theme.breakpoints.up(sideNavFixed));
+    useEffect(() => {
+        if (drawerPermanent) {
+            setDrawerOpen();
+        }
+    }, [drawerPermanent]);
+
+    return (
+        <LayoutProvider appName={appName}>
+            <Box sx={{
+                display: "flex",
+                flexFlow: "column nowrap",
+                "@media screen": {
+                    height: "100vh",
+                    overflowY: "scroll"
+                },
+                "@media print": {
+                    padding:0,
+                    margin:0
+                }
+            }}>
+                <AppBar
+                    elevation={0}
+                    position="static"
+                    color="inherit"
+                    sx={{
+                        borderBottom: 1,
+                        borderColor: "divider",
+                        backgroundColor: "paper.elevation1",
+                        color: "text.primary",
+                        displayPrint: "none"
+                    }}
+                >
+                    <Box
+                        sx={{
+                            position: "relative",
+                            display: "flex",
+                            flexFlow: "row nowrap",
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                            px: 2
+                        }}
+                    >
+                        {!drawerPermanent && (
+                            <IconButton
+                                edge="start"
+                                sx={{marginRight: 1}}
+                                color="inherit"
+                                aria-label="menu"
+                                onClick={toggleDrawerOpen}
+                                disabled={!sideNav}
+                                size="large"
+                            >
+                                <MenuIcon/>
+                            </IconButton>
+                        )}
+						<VCAppLogo
+							appName={drawerPermanent ? appName : undefined}
+							sx={{
+								py: 1,
+								...(!drawerPermanent && {
+									position: "absolute",
+									top: "50%",
+									left: "50%",
+									transform: "translate(-50%, -50%)"
+								})
+							}}
+						/>
+                        {topNav}
+                        {!topNav && <Box/>}
+                    </Box>
+                </AppBar>
+                <Box sx={{
+                    flex: "1 1 auto",
+                    display: "flex",
+                    flexFlow: "row nowrap",
+                }}>
+                    {sideNav && (
+                        <Drawer
+                            variant={!drawerPermanent ? "temporary" : "permanent"}
+                            sx={{
+                                displayPrint: "none",
+                                [`& .MuiDrawer-paper`]: {
+                                    position: "relative",
+                                    whiteSpace: "nowrap",
+                                    overflowX: "hidden",
+                                    width: sideNavWidth,
+                                    boxSizing: "border-box"
+                                },
+                                ["& .MuiPaper-elevation0"]: {
+                                    backgroundColor: "paper.elevation1"
+                                }
+                            }}
+                            open={drawerOpen}
+                            onClick={!drawerPermanent ? clearDrawerOpen : undefined}
+                            onClose={clearDrawerOpen}
+                        >
+                            {!drawerPermanent && (
+                                <VCAppLogo
+                                    appName={appName}
+                                    sx={{
+                                        px: 2,
+                                        py: 1,
+                                    }}
+                                />
+                            )}
+                            {sideNav}
+                        </Drawer>
+                    )}
+                    <Box sx={{
+                        py: 4,
+                        flex: 1,
+                        maxWidth: "100%",
+                        "@media print": { padding:0, margin:0 }
+                    }}>
+                        {children}
+                    </Box>
+                </Box>
+                {footer && (
+                    <Box sx={{
+                            borderTop: 1,
+                            borderColor: "divider",
+                            backgroundColor: theme.palette.background.paper,
+                            color: "text.primary",
+                            displayPrint: "none"
+                    }}>
+                        {footer}
+                    </Box>
+                )}
+            </Box>
+        </LayoutProvider>
+    );
+}

package/src/AppShell/index.tsx

@@ -0,0 +1 @@
+export {AppShell} from "./AppShell";

package/src/ErrorAlert.tsx

@@ -0,0 +1,71 @@
+import {Alert, AlertTitle, Typography} from "@mui/material";
+import * as React from "react";
+import {ForwardedRef} from "react";
+import {ApiError, ProblemJson} from "./fetch";
+import {ErrorIcon} from "./icons";
+
+export interface ErrorAlertProps {
+	/**
+	 * The error to display.
+	 *
+	 * This can be an API error, JavaScript error, an error message string. If the passed value evaluates to `false`,
+	 * no error message is displayed.
+	 */
+
+	error: Partial<ProblemJson> | Error | string | any;
+}
+
+export const ErrorAlert = React.forwardRef(
+	({error}: ErrorAlertProps, ref: ForwardedRef<HTMLDivElement>) => {
+		if (!error) {
+			return null;
+		}
+		const {title, status, detail, type, instance, stack, ...rest} = normalizeError(error);
+		return (
+			<Alert ref={ref} severity="error" icon={<ErrorIcon />}>
+				<AlertTitle>{title}</AlertTitle>
+				{detail}
+				{status && <Typography component="div" variant="caption">Status: {status}</Typography>}
+				{instance && <Typography component="div" variant="caption">Instance: {instance}</Typography>}
+				{type && type != "about:blank" && (
+					<Typography component="div" variant="caption">Type: {type}</Typography>
+				)}
+				{Object.entries(rest).map(([key, value]) => (
+					<Typography component="div" variant="caption" key={key}>{key}: {value}</Typography>
+				))}
+			</Alert>
+		);
+	},
+);
+
+type NormalizedError =
+	// `title` from `ProblemJson` is required
+	& Pick<ProblemJson, "title">
+	// other properties from `ProblemJson` are optional
+	& Partial<ProblemJson>
+	// properties from `Error` are optional
+	& Partial<Error>;
+
+function normalizeError(error: any): NormalizedError {
+	if (typeof error == "string") {
+		return {
+			title: error,
+		};
+	}
+	if (error instanceof ApiError) {
+		return error;
+	}
+	if (error instanceof Error) {
+		return {
+			title: error.message,
+			type: error.name,
+			stack: error.stack,
+		};
+	}
+	if (typeof error.title != "undefined") {
+		return error;
+	}
+	return {
+		title: error.toString(),
+	};
+}

package/src/Input/ActionsMenu.tsx

@@ -0,0 +1,102 @@
+import {Button, ButtonGroup, ButtonPropsSizeOverrides, Menu, MenuItem} from "@mui/material";
+import * as React from "react";
+import {PropsWithChildren, useState} from "react";
+import {OverridableStringUnion} from "@mui/types";
+import {ExpandMore} from "@mui/icons-material";
+
+export interface ActionMenuItem {
+  label: string;
+  onClick: () => void;
+}
+
+export interface ActionsMenuProps {
+  actions: ActionMenuItem[];
+}
+
+export function ActionsMenu(props: ActionsMenuProps) {
+  const {actions} = props;
+
+  if (actions.length == 0) {
+    return null;
+  }
+
+  if (actions.length == 1) {
+    return <SimpleButton label={actions[0].label} onClick={actions[0].onClick} />;
+  }
+
+  return (
+    <PushButtonWithMenu label={actions[0].label} onClick={actions[0].onClick}>
+      {actions.slice(1).map((action, index) => (
+        <MenuItem key={index} onClick={action.onClick}>{action.label}</MenuItem>
+      ))}
+    </PushButtonWithMenu>
+  );
+}
+
+
+interface SimpleButtonProps {
+  label: string;
+  onClick: () => void;
+  primary?: boolean;
+  size?: OverridableStringUnion<"small" | "medium" | "large", ButtonPropsSizeOverrides>;
+  loading?: boolean;
+}
+
+function SimpleButton({label, onClick, primary, size, loading}: SimpleButtonProps) {
+  return (
+    <Button
+      color={primary ? "primary" : undefined}
+      variant={primary ? "contained" : "outlined"}
+      size={size}
+      disabled={loading}
+      onClick={onClick}
+    >
+      {label}
+    </Button>
+  );
+}
+
+interface PushButtonWithMenuProps extends PropsWithChildren<any> {
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+  size?: "small" | "medium" | "large";
+}
+
+function PushButtonWithMenu(props: PushButtonWithMenuProps) {
+  const {label, onClick, disabled, size, children} = props;
+
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  return (
+    <React.Fragment>
+      <ButtonGroup size={size}>
+        <Button variant="outlined" disabled={disabled} onClick={onClick}>{label}</Button>
+        <Button
+          variant="outlined"
+          disabled={disabled}
+          size="small"
+          onClick={(e) => setAnchorEl(e.currentTarget)}
+        >
+          <ExpandMore />
+        </Button>
+      </ButtonGroup>
+      {children
+        && (
+          <Menu
+            open={Boolean(anchorEl)}
+            anchorEl={anchorEl}
+            onClose={() => setAnchorEl(null)}
+            keepMounted
+            onClick={() => setAnchorEl(null)}
+            anchorOrigin={{vertical: "bottom", horizontal: "center"}}
+            transformOrigin={{vertical: "top", horizontal: "center"}}
+          >
+            {children}
+          </Menu>
+        )}
+    </React.Fragment>
+  );
+}
+
+

package/src/Input/Checkbox.tsx

@@ -0,0 +1,33 @@
+import {Checkbox as MuiCheckbox, CheckboxProps as MuiCheckboxProps, FormControlLabel} from "@mui/material";
+import React, {ReactNode, useCallback} from "react";
+
+export type CheckboxProps = Omit<MuiCheckboxProps, "onChange" | "value"> & {
+	label?: ReactNode;
+	value?: boolean;
+	onChange?: (checked: boolean) => any;
+	className?: string;
+};
+
+export const Checkbox = ({label, value, onChange, disabled, className, color, ...props}: CheckboxProps) => {
+	const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+		if (onChange) {
+			onChange(e.target.checked);
+		}
+	}, [onChange]);
+
+	return (
+		<FormControlLabel
+			control={
+				<MuiCheckbox
+					checked={value}
+					onChange={handleChange}
+					disabled={disabled}
+					{...props}
+				/>
+			}
+			label={label}
+			disabled={disabled}
+			className={className}
+		/>
+	);
+};

package/src/Input/EmailSenderField.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import {TextField, TextFieldProps} from "./TextField";
+import {useState} from "react";
+
+export type EmailSenderFieldProps = Omit<TextFieldProps, "onChange"> & {
+    onChange?: (value: string, e: React.ChangeEvent<HTMLInputElement>) => any;
+    updateValidity?: (valid: boolean) => void;
+}
+
+export function EmailSenderField({onChange, validate, onBlur, helperText, select, SelectProps, error, updateValidity, ...props}: EmailSenderFieldProps) {
+    const [valid, setValid] = useState<boolean>(false);
+
+    async function validateEmailSender(value: string) {
+        let valid = false;
+        if(isEmail(value)) {
+            const response = await fetch("https://28pdqh9qy3.execute-api.eu-west-1.amazonaws.com/dev/validate-email-sender", {
+                method: "POST",
+                body: JSON.stringify({
+                    "email": value
+                })
+            });
+            if(response.ok) {
+                const json = await response.json();
+                valid = json.valid;
+            }
+        }
+        setValid(valid);
+        if(updateValidity) {
+            updateValidity(valid);
+        }
+    }
+
+    function handleChange(value: string, e: React.ChangeEvent<HTMLInputElement>) {
+        if (onChange) {
+            onChange(value, e);
+        }
+        validateEmailSender(value);
+    }
+
+    function handleBlur(e: React.FocusEvent<HTMLInputElement>) {
+        const value = e.currentTarget?.value || e.target.value;
+        if (onBlur) {
+            onBlur(e);
+        }
+        validateEmailSender(value);
+    }
+
+    return (
+        <TextField
+            {...props}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            error={error || !valid}
+        />
+    );
+}
+
+export function isEmail(email: string): boolean {
+    if(!email) {
+        return false;
+    }
+    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    return re.test(email.toLowerCase());
+}

package/src/Input/NumberField.tsx

@@ -0,0 +1,127 @@
+import {TextField} from "@mui/material";
+import {TextFieldProps} from "@mui/material/TextField/TextField";
+import * as React from "react";
+import {useCallback, useEffect, useMemo, useRef, useState} from "react";
+
+export const IntegerNumberFormat = new Intl.NumberFormat("en-US", {
+	minimumFractionDigits: 0,
+	maximumFractionDigits: 0,
+	useGrouping: false,
+});
+
+export type NumberFieldProps = TextFieldProps & {
+	numberFormat: Intl.NumberFormat;
+	numberValue: number | null;
+	onChangeNumber: (value: number | null) => void;
+	invalidMessage?: string;
+};
+
+export function NumberField(
+	{
+		numberValue,
+		onChangeNumber,
+		onChange,
+		onFocus,
+		onBlur,
+		onKeyPress,
+		numberFormat,
+		invalidMessage,
+		helperText,
+		...props
+	}: NumberFieldProps,
+) {
+	const [strValue, setStrValue] = useState("");
+	const [error, setError] = useState("");
+	const [focus, setFocus] = useState(false);
+	const input = useRef<HTMLInputElement | null>(null);
+
+	// find out decimal separator
+	const decimalSeparator = useMemo(() => {
+		return numberFormat.format(1.1).replace(/[01]/g, "");
+	}, [numberFormat]);
+
+	// find out thousands separator
+	const thousandSeparator = useMemo(() => {
+		return numberFormat.format(1111).replace(/[01]/g, "").replace(decimalSeparator, "");
+	}, [numberFormat, decimalSeparator]);
+
+	// restrict key press to chars that can be part of a number
+	const handleKeyPress = useCallback((e) => {
+		const keyValue = String.fromCharCode(e.charCode);
+		if (!keyValue.match(/[\-0-9]/g) && keyValue !== thousandSeparator && keyValue !== decimalSeparator) {
+			e.preventDefault();
+		} else {
+			onKeyPress && onKeyPress(e);
+		}
+	}, [onKeyPress, thousandSeparator, decimalSeparator]);
+
+	// set controlled string value and call onChange with numeric value
+	const handleChange = useCallback((e) => {
+		const {value} = e.currentTarget;
+		setStrValue(value);
+		onChangeNumber(value ? parseNumber(value, thousandSeparator, decimalSeparator) : null);
+		onChange && onChange(e);
+	}, [thousandSeparator, decimalSeparator, onChangeNumber, onChange]);
+
+	// remember focus
+	const handleFocus = useCallback(e => {
+		setFocus(true);
+		onFocus && onFocus(e);
+	}, [onFocus]);
+
+	// format on blur
+	const handleBlur = useCallback((e) => {
+		setFocus(false);
+		onBlur && onBlur(e);
+	}, [onBlur, numberFormat, numberValue]);
+
+	// format when number value changes and user is not editing
+	useEffect(() => {
+		if (!focus) {
+			if (numberValue !== null && Number.isFinite(numberValue)) {
+				setStrValue(numberFormat.format(numberValue));
+			}
+		}
+	}, [focus, numberValue]);
+
+	// set error message when user entered a string that is NaN
+	useEffect(() => {
+		const valid = (numberValue === null || Number.isFinite(numberValue));
+		setError(valid ? "" : (invalidMessage || "Invalid number"));
+	}, [numberValue, invalidMessage]);
+
+	// apply error to HTML5 form validation
+	useEffect(() => {
+		if (input.current) {
+			input.current.setCustomValidity(error);
+		}
+	}, [error]);
+
+	return (
+		<TextField
+			{...props}
+			value={strValue}
+			inputRef={input}
+			error={!!error}
+			helperText={error || helperText}
+			onFocus={handleFocus}
+			onBlur={handleBlur}
+			onKeyPress={handleKeyPress}
+			onChange={handleChange}
+		/>
+	);
+}
+
+function parseNumber(value: string, thousandSeparator: string, decimalSeparator: string) {
+	if (thousandSeparator) {
+		value = replaceAll(value, thousandSeparator, "");
+	}
+	if (decimalSeparator) {
+		value = replaceAll(value, decimalSeparator, ".");
+	}
+	return Number.parseFloat(value);
+}
+
+function replaceAll(str: string, search: string, replacement: string) {
+	return str.split(search).join(replacement);
+}

package/src/Input/RadioGroup.tsx

@@ -0,0 +1,37 @@
+import {
+	FormControl,
+	FormControlLabel,
+	FormLabel,
+	Radio,
+	RadioGroup as MuiRadioGroup,
+	RadioGroupProps as MuiRadioGroupProps,
+} from "@mui/material";
+import React, {ReactNode} from "react";
+
+interface RadioGroupProps<T extends string> extends Omit<MuiRadioGroupProps, "value" | "onChange" | "children"> {
+	label?: ReactNode;
+	value: T | undefined;
+	onChange: (value: T) => any;
+	options: ReadonlyArray<T>;
+	renderLabel?: (option: T) => ReactNode;
+	required?: boolean;
+}
+
+export function RadioGroup<T extends string>(props: Readonly<RadioGroupProps<T>>) {
+	const {label, value, onChange, options, renderLabel, required, ...radioGroupProps} = props;
+
+	return (
+		<FormControl required={required}>
+			{label && <FormLabel>{label}</FormLabel>}
+			<MuiRadioGroup value={value} onChange={(_, value) => onChange(value as T)} {...radioGroupProps}>
+				{options.map(option => (
+					<FormControlLabel
+						key={option}
+						control={<Radio required={required} value={option} />}
+						label={renderLabel ? renderLabel(option) : option}
+					/>
+				))}
+			</MuiRadioGroup>
+		</FormControl>
+	);
+}