@variocube/app-ui 1.14.0

package/src/layout/NotFoundSvg.tsx

@@ -0,0 +1,172 @@
+import React, {SVGProps} from "react";
+
+export function NotFoundSvg(props: SVGProps<SVGSVGElement>) {
+
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1120.592"
+            height="777.916"
+            data-name="Layer 1"
+            viewBox="0 0 1120.592 777.916"
+            {...props}
+        >
+            <circle cx="212.592" cy="103" r="64" fill="#ff6584"></circle>
+            <path
+                fill="#f2f2f2"
+                d="M563.68 404.164c0 151.011-89.774 203.739-200.515 203.739s-200.516-52.728-200.516-203.74 200.516-343.12 200.516-343.12 200.515 192.11 200.515 343.12z"
+                transform="translate(-39.704 -61.042)"
+            ></path>
+            <path
+                fill="#3f3d56"
+                d="M316.156 523.761L318.21 397.378 403.674 241.024 318.532 377.552 319.455 320.725 378.357 207.605 319.699 305.687 319.699 305.687 321.359 203.481 384.433 113.423 321.621 187.409 322.658 0 316.138 248.096 316.674 237.861 252.547 139.704 315.646 257.508 309.671 371.654 309.493 368.625 235.565 265.329 309.269 379.328 308.522 393.603 308.388 393.818 308.449 394.99 293.29 684.589 313.544 684.589 315.974 535.005 389.496 421.285 316.156 523.761z"
+            ></path>
+            <path
+                fill="#f2f2f2"
+                d="M1160.296 466.014c0 123.61-73.484 166.77-164.131 166.77s-164.132-43.16-164.132-166.77 164.132-280.862 164.132-280.862 164.131 157.252 164.131 280.862z"
+                transform="translate(-39.704 -61.042)"
+            ></path>
+            <path
+                fill="#3f3d56"
+                d="M950.482 552.833L952.162 449.383 1022.119 321.4 952.426 433.154 953.182 386.639 1001.396 294.044 953.382 374.329 953.382 374.329 954.741 290.669 1006.369 216.952 954.954 277.514 955.804 124.11 950.467 327.188 950.906 318.811 898.414 238.464 950.064 334.893 945.173 428.327 945.027 425.847 884.514 341.294 944.844 434.608 944.232 446.293 944.123 446.469 944.173 447.428 931.764 684.478 948.343 684.478 950.332 562.037 1010.514 468.952 950.482 552.833z"
+            ></path>
+            <ellipse
+                cx="554.592"
+                cy="680.479"
+                fill="#3f3d56"
+                rx="554.592"
+                ry="28.034"
+            ></ellipse>
+            <ellipse
+                cx="892.445"
+                cy="726.797"
+                fill="#3f3d56"
+                rx="94.989"
+                ry="4.802"
+            ></ellipse>
+            <ellipse
+                cx="548.72"
+                cy="773.114"
+                fill="#3f3d56"
+                rx="94.989"
+                ry="4.802"
+            ></ellipse>
+            <ellipse
+                cx="287.944"
+                cy="734.279"
+                fill="#3f3d56"
+                rx="217.014"
+                ry="10.97"
+            ></ellipse>
+            <circle cx="97.084" cy="566.27" r="79" fill="#2f2e41"></circle>
+            <path
+                fill="#2f2e41"
+                d="M99.805 689.023H123.805V732.023H99.805z"
+                transform="rotate(.675 5272.615 -2689.677)"
+            ></path>
+            <path
+                fill="#2f2e41"
+                d="M147.802 689.589H171.802V732.589H147.802z"
+                transform="rotate(.675 5320.612 -2689.112)"
+            ></path>
+            <ellipse
+                cx="119.546"
+                cy="732.616"
+                fill="#2f2e41"
+                rx="7.5"
+                ry="20"
+                transform="rotate(-89.325 68.811 722.182)"
+            ></ellipse>
+            <ellipse
+                cx="167.554"
+                cy="732.182"
+                fill="#2f2e41"
+                rx="7.5"
+                ry="20"
+                transform="rotate(-89.325 116.82 721.748)"
+            ></ellipse>
+            <circle cx="99.319" cy="546.295" r="27" fill="#fff"></circle>
+            <circle cx="99.319" cy="546.295" r="9" fill="#3f3d56"></circle>
+            <path
+                fill="#ff6a00"
+                d="M61.026 552.946c-6.042-28.64 14.687-57.264 46.3-63.933s62.139 11.143 68.18 39.783-14.978 38.93-46.59 45.6-61.848 7.191-67.89-21.45z"
+                transform="translate(-39.704 -61.042)"
+            ></path>
+            <path
+                fill="#ff6a00"
+                d="M257.296 671.384c0 55.076-32.74 74.306-73.13 74.306q-1.403 0-2.802-.03c-1.872-.04-3.725-.13-5.557-.255-36.451-2.58-64.77-22.8-64.77-74.02 0-53.01 67.738-119.897 72.826-124.847l.009-.01.294-.284s73.13 70.064 73.13 125.14z"
+                transform="translate(-39.704 -61.042)"
+            ></path>
+            <path
+                fill="#3f3d56"
+                d="M181.502 737.265l26.747-37.374-26.814 41.477-.071 4.291c-1.872-.04-3.725-.129-5.557-.254l2.883-55.102-.022-.428.049-.08.272-5.204-26.881-41.58 26.965 37.676.063 1.105 2.179-41.633-23.014-42.965 23.294 35.658 2.268-86.314.009-.294v.285l-.379 68.064 22.911-26.983-23.004 32.847-.606 37.275 21.391-35.774-21.48 41.259-.339 20.723 31.056-49.791-31.172 57.023z"
+                transform="translate(-39.704 -61.042)"
+            ></path>
+            <circle cx="712.485" cy="565.415" r="79" fill="#2f2e41"></circle>
+            <path
+                fill="#2f2e41"
+                d="M741.777 691.824H765.777V734.824H741.777z"
+                transform="rotate(-17.083 530.717 814.976)"
+            ></path>
+            <path
+                fill="#2f2e41"
+                d="M787.659 677.723H811.659V720.723H787.659z"
+                transform="rotate(-17.083 576.611 800.885)"
+            ></path>
+            <ellipse
+                cx="767.887"
+                cy="732.003"
+                fill="#2f2e41"
+                rx="20"
+                ry="7.5"
+                transform="rotate(-17.083 544.826 833.656)"
+            ></ellipse>
+            <ellipse
+                cx="813.475"
+                cy="716.946"
+                fill="#2f2e41"
+                rx="20"
+                ry="7.5"
+                transform="rotate(-17.083 590.415 818.599)"
+            ></ellipse>
+            <circle cx="708.522" cy="545.71" r="27" fill="#fff"></circle>
+            <circle cx="708.522" cy="545.71" r="9" fill="#3f3d56"></circle>
+            <path
+                fill="#ff6a00"
+                d="M657.355 578.743c-14.49-25.433-3.478-59.016 24.594-75.009s62.576-8.34 77.066 17.093-2.39 41.643-30.463 57.636-56.707 25.713-71.197.28zM611.296 661.299c0 50.557-30.054 68.21-67.13 68.21q-1.288 0-2.572-.03a109.57 109.57 0 01-5.1-.232c-33.461-2.368-59.458-20.929-59.458-67.948 0-48.66 62.181-110.06 66.852-114.603l.008-.009.27-.261s67.13 64.316 67.13 114.873z"
+                transform="translate(-39.704 -61.042)"
+            ></path>
+            <path
+                fill="#3f3d56"
+                d="M541.72 721.774l24.553-34.307-24.614 38.074-.065 3.939a109.57 109.57 0 01-5.1-.233l2.645-50.582-.02-.393.045-.073.25-4.777-24.676-38.169 24.753 34.586.058 1.014 2-38.217-21.126-39.44 21.383 32.732 2.082-79.232.008-.27v.261l-.347 62.48 21.03-24.77-21.116 30.152-.557 34.218 19.637-32.84-19.718 37.875-.311 19.023 28.507-45.707-28.614 52.345z"
+                transform="translate(-39.704 -61.042)"
+            ></path>
+            <path
+                fill="#ff6a00"
+                d="M875.296 682.384c0 55.076-32.74 74.306-73.13 74.306q-1.403 0-2.802-.03c-1.872-.04-3.725-.13-5.557-.255-36.451-2.58-64.77-22.8-64.77-74.02 0-53.01 67.738-119.897 72.826-124.847l.009-.01.294-.284s73.13 70.064 73.13 125.14z"
+                transform="translate(-39.704 -61.042)"
+            ></path>
+            <path
+                fill="#3f3d56"
+                d="M799.502 748.265l26.747-37.374-26.814 41.477-.071 4.291c-1.872-.04-3.725-.129-5.557-.254l2.883-55.102-.022-.428.049-.08.272-5.204-26.881-41.58 26.965 37.676.063 1.105 2.179-41.633-23.014-42.965 23.294 35.658 2.268-86.314.01-.294v.285l-.38 68.064 22.911-26.983-23.004 32.847-.606 37.275 21.391-35.774-21.48 41.259-.339 20.723 31.056-49.791-31.172 57.023z"
+                transform="translate(-39.704 -61.042)"
+            ></path>
+            <ellipse
+                cx="721.517"
+                cy="656.822"
+                fill="#2f2e41"
+                rx="12.4"
+                ry="39.5"
+                transform="rotate(-64.626 653.41 657.688)"
+            ></ellipse>
+            <ellipse
+                cx="112.517"
+                cy="651.822"
+                fill="#2f2e41"
+                rx="12.4"
+                ry="39.5"
+                transform="rotate(-68.158 47.55 650.645)"
+            ></ellipse>
+        </svg>
+    )
+}

package/src/layout/UserNav.tsx

@@ -0,0 +1,107 @@
+import React, {Fragment, useCallback, useState} from "react";
+import {Avatar, Divider, ListItemIcon, ListItemText, Menu, MenuItem, useTheme} from "@mui/material";
+import PersonIcon from '@mui/icons-material/Person';
+import SettingsIcon from '@mui/icons-material/Settings';
+import LockIcon from '@mui/icons-material/Lock';
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import LogoutIcon from '@mui/icons-material/PowerSettingsNew';
+import {usePaletteMode} from "../VCThemeProvider";
+
+type Props = {
+    onSettingClick?: () => void,
+    onChangePasswordClick?: () => void,
+    onLogoutClick?: () => void,
+    showDarkModeSwitch?: boolean,
+    i18n?: {
+        settings?: string,
+        changePassword?: string,
+        darkMode?: string,
+        logout?: string
+    }
+}
+
+export function UserNav(props: Props) {
+    const {
+        onSettingClick,
+        onChangePasswordClick,
+        onLogoutClick,
+        showDarkModeSwitch,
+        i18n: {
+            settings,
+            changePassword,
+            darkMode,
+            logout
+        } = {}
+    } = props;
+
+    const theme = useTheme();
+    const {mode, setMode} = usePaletteMode();
+
+    const [anchorEl, setAnchorEl] = useState<HTMLElement|null>(null);
+
+    return (
+        <Fragment>
+            <Avatar
+                sx={{
+                    bgcolor: theme.palette.grey["500"],
+                    width: 30,
+                    height: 30,
+                    cursor: 'pointer'
+                }}
+                variant="circular"
+                onClick={ev => setAnchorEl(ev.currentTarget)}
+            >
+                <PersonIcon />
+            </Avatar>
+            <Menu
+                open={anchorEl !== null}
+                anchorEl={anchorEl}
+                onClose={() => setAnchorEl(null)}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'right'
+                }}
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right'
+                }}
+            >
+                {onSettingClick && (
+                    <MenuItem onClick={onSettingClick}>
+                        <ListItemIcon>
+                            <SettingsIcon fontSize="small" />
+                        </ListItemIcon>
+                        <ListItemText>{settings ?? 'Settings'}</ListItemText>
+                    </MenuItem>
+                )}
+                {onChangePasswordClick && (
+                    <MenuItem onClick={onChangePasswordClick}>
+                        <ListItemIcon>
+                            <LockIcon fontSize="small" />
+                        </ListItemIcon>
+                        <ListItemText>{changePassword ?? 'Change password'}</ListItemText>
+                    </MenuItem>
+                )}
+                {showDarkModeSwitch && (
+                    <MenuItem onClick={() => setMode((mode === 'dark') ? "light" : "dark")}>
+                        <ListItemIcon>
+                            <DarkModeIcon fontSize="small" />
+                        </ListItemIcon>
+                        <ListItemText>{darkMode ?? 'Dark Mode'}: {mode === 'dark' ? 'ON' : 'OFF'}</ListItemText>
+                    </MenuItem>
+                )}
+                {onLogoutClick && (
+                    <Fragment>
+                        <Divider />
+                        <MenuItem onClick={onLogoutClick}>
+                            <ListItemIcon>
+                                <LogoutIcon fontSize="small" sx={{ color: theme.palette.error.main }} />
+                            </ListItemIcon>
+                            <ListItemText sx={{ color: theme.palette.error.main }}>{logout ?? 'Logout'}</ListItemText>
+                        </MenuItem>
+                    </Fragment>
+                )}
+            </Menu>
+        </Fragment>
+    )
+}

package/src/layout/index.ts

@@ -0,0 +1,5 @@
+export * from "./ErrorBoundary";
+export * from "./UserNav";
+export * from "./NotFound";
+export * from "./layout-context";
+export * from "./page-title"

package/src/layout/layout-context.tsx

@@ -0,0 +1,40 @@
+import React, {createContext, PropsWithChildren, useContext, useEffect, useMemo, useState} from "react";
+
+interface LayoutContextType {
+	setPageTitle: (name?: string) => void;
+}
+
+const LayoutContext = createContext<LayoutContextType>({
+	setPageTitle: () => void 0,
+});
+
+interface LayoutProviderProps {
+	appName: string;
+}
+
+export function LayoutProvider({appName, children}: PropsWithChildren<LayoutProviderProps>) {
+	const [pageTitle, setPageTitle] = useState<string>();
+
+	useEffect(() => {
+		document.title = pageTitle ? `${pageTitle} | ${appName}` : appName;
+	}, [pageTitle]);
+
+	const value = useMemo(() => ({setPageTitle}), []);
+
+	return (
+		<LayoutContext.Provider value={value}>
+			{children}
+		</LayoutContext.Provider>
+	);
+}
+
+export const useLayoutContext = () => {
+	const value = useContext(LayoutContext);
+	if (!value) {
+		throw new Error("Cannot find layout context. Are you missing a LayoutProvider in your component tree?");
+	}
+	const {setPageTitle} = value;
+	return {
+		setPageTitle,
+	};
+};

package/src/layout/page-title.tsx

@@ -0,0 +1,33 @@
+import {Typography, TypographyProps} from "@mui/material";
+import React, {isValidElement, ReactNode, useEffect} from "react";
+import {useLayoutContext} from "./layout-context";
+
+interface PageTitleProps extends Omit<TypographyProps, "children" | "ref" | "title"> {
+	title?: ReactNode;
+}
+
+export function PageTitle({title, variant = "h1", ...rest}: Readonly<PageTitleProps>) {
+	const {setPageTitle} = useLayoutContext();
+
+	useEffect(() => {
+		setPageTitle(reactNodeToString(title));
+	}, [title]);
+
+	return <Typography variant={variant} component="h1" title="title" {...rest}>{title}</Typography>;
+}
+
+function reactNodeToString(reactNode?: React.ReactNode): string {
+	let string = "";
+	if (typeof reactNode === "string") {
+		string = reactNode;
+	} else if (typeof reactNode === "number") {
+		string = reactNode.toString();
+	} else if (reactNode instanceof Array) {
+		reactNode.forEach(function(child) {
+			string += reactNodeToString(child);
+		});
+	} else if (isValidElement(reactNode)) {
+		string += reactNodeToString(reactNode.props.children);
+	}
+	return string;
+}

package/src/list/List.tsx

@@ -0,0 +1,40 @@
+import {List as MuiList, ListProps as MuiListProps} from "@mui/material";
+import React from "react";
+import {ErrorAlert} from "../ErrorAlert";
+import {SkeletonListItem, SkeletonListItemProps} from "./SkeletonListItem";
+
+export type ListProps = MuiListProps & {
+	/** Whether the list is loading and skeleton list items should be shown. */
+	loading?: boolean;
+
+	/** The error that should be shown. */
+	error?: any;
+
+	/** The number of skeleton items to show. */
+	items?: number;
+
+	/** Properties of the skeleton list items. */
+	skeleton?: SkeletonListItemProps;
+};
+
+export function List(props: ListProps) {
+	const {
+		children,
+		error,
+		loading,
+		items = 3,
+		skeleton = {},
+		...listProps
+	} = props;
+
+	if (error) {
+		return <ErrorAlert error={error} />;
+	}
+	return (
+		<MuiList {...listProps}>
+			{loading
+				? Array.from({length: items}).map(() => <SkeletonListItem {...skeleton} />)
+				: children}
+		</MuiList>
+	);
+}

package/src/list/SkeletonListItem.tsx

@@ -0,0 +1,50 @@
+import {ListItem, ListItemIcon, ListItemSecondaryAction, ListItemText, Skeleton} from "@mui/material";
+import React, {Fragment} from "react";
+
+export interface SkeletonListItemProps {
+	/** Whether the list item has an icon. */
+	icon?: boolean;
+
+	/** Whether the list item has a primary text. */
+	primary?: boolean;
+
+	/** The number of lines in the secondary text. */
+	secondary?: number;
+
+	/** Whether the list item has a secondary action. */
+	action?: boolean;
+
+	/** Whether the list item has a divider. */
+	divider?: boolean;
+}
+
+export function SkeletonListItem(props: Readonly<SkeletonListItemProps>) {
+	const {
+		icon = true,
+		primary = true,
+		secondary = 1,
+		action = false,
+		divider = false,
+	} = props;
+
+	return (
+		<ListItem divider={divider}>
+			{icon && (
+				<ListItemIcon>
+					<Skeleton variant="circular" width={40} height={40} />
+				</ListItemIcon>
+			)}
+			<ListItemText
+				primary={primary && <Skeleton variant="text" />}
+				secondary={
+					<Fragment>
+						{Array.from({length: secondary}).map(() => <Skeleton variant="text" />)}
+					</Fragment>
+				}
+			/>
+			<ListItemSecondaryAction>
+				{action && <Skeleton variant="rounded" width={40} height={40} />}
+			</ListItemSecondaryAction>
+		</ListItem>
+	);
+}

package/src/list/index.tsx

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