@variocube/app-ui 1.15.0 → 1.16.1

package/src/audit/types.ts

@@ -1,20 +1,19 @@
-
 export interface AppAuditLogEntry {
-    created: string;
-    tenantId: string | null;
-    cubeId: string | null;
-    boxNumber: string | null;
-    occupancyId: string | null;
-    source: string | null;
-    level: string;
-    message: string;
-    referenceType: string | null;
-    referenceId: string | null;
-    type: string;
-    userId: string | null;
-    data?: any;
-    patch?: JsonPatch;
-    actor: string | null;
+	created: string;
+	tenantId: string | null;
+	cubeId: string | null;
+	boxNumber: string | null;
+	occupancyId: string | null;
+	source: string | null;
+	level: string;
+	message: string;
+	referenceType: string | null;
+	referenceId: string | null;
+	type: string;
+	userId: string | null;
+	data?: any;
+	patch?: JsonPatch;
+	actor: string | null;
 }
 
 export type JsonPatch = Array<JsonPatchItem>;
@@ -22,25 +21,25 @@ export type JsonPatch = Array<JsonPatchItem>;
 export type JsonPatchItem = AddPatch | RemovePatch | ReplacePatch | MovePatch | CopyPatch;
 
 export interface Patch {
-    path: string;
+	path: string;
 }
 export interface AddPatch extends Patch {
-    op: "add";
-    value: any;
+	op: "add";
+	value: any;
 }
 export interface RemovePatch extends Patch {
-    op: "remove";
+	op: "remove";
 }
 export interface ReplacePatch extends Patch {
-    op: "replace";
-    value: any;
-    fromValue: any;
+	op: "replace";
+	value: any;
+	fromValue: any;
 }
 export interface MovePatch extends Patch {
-    op: "move";
-    from: string;
+	op: "move";
+	from: string;
 }
 export interface CopyPatch extends Patch {
-    op: "copy";
-    from: string;
-}
+	op: "copy";
+	from: string;
+}

package/src/breadcrumbs.tsx

@@ -1,27 +1,23 @@
-import React, {PropsWithChildren} from "react";
 import {Breadcrumbs as MuiBreadcrumbs, Link, LinkProps, Typography} from "@mui/material";
-import {ChevronRightIcon} from "./icons";
 import {LinkTypeMap} from "@mui/material/Link/Link";
+import React, {PropsWithChildren} from "react";
+import {ChevronRightIcon} from "./icons";
 
 export function Breadcrumbs({children}: PropsWithChildren<{}>) {
-    return (
-        <MuiBreadcrumbs separator={<ChevronRightIcon fontSize="small"/>}>
-            {children}
-        </MuiBreadcrumbs>
-    )
+	return (
+		<MuiBreadcrumbs separator={<ChevronRightIcon fontSize="small" />}>
+			{children}
+		</MuiBreadcrumbs>
+	);
 }
 
 export function BreadcrumbLink<
-    D extends React.ElementType = LinkTypeMap['defaultComponent'],
-    P = {}
+	D extends React.ElementType = LinkTypeMap["defaultComponent"],
+	P = {},
 >(props: LinkProps<D, P>) {
-    return (
-        <Link color="inherit" {...props}/>
-    )
+	return <Link color="inherit" {...props} />;
 }
 
 export function BreadcrumbItem({children}: PropsWithChildren<{}>) {
-    return (
-        <Typography color="textPrimary">{children}</Typography>
-    );
+	return <Typography color="textPrimary">{children}</Typography>;
 }

package/src/code/CodeBlock.tsx

@@ -1,15 +1,15 @@
-import {Code, CodeProps} from "./Code";
 import React, {PropsWithChildren} from "react";
+import {Code, CodeProps} from "./Code";
 
 export type CodeBlockProps = PropsWithChildren<Omit<CodeProps, "block">>;
 
 export function CodeBlock(props: CodeBlockProps) {
-    return (
-        <Code
-            display="block"
-            px="0.5em"
-            py="0.25em"
-            {...props}
-        />
-    )
-}
+	return (
+		<Code
+			display="block"
+			px="0.5em"
+			py="0.25em"
+			{...props}
+		/>
+	);
+}

package/src/confirm/ConfirmButton.tsx

@@ -5,65 +5,65 @@ import {useFlag, useIsMounted} from "../utils";
 import {ConfirmDialog} from "./ConfirmDialog";
 
 interface ConfirmButtonProps {
-    title: string;
-    confirmTitle?: string;
-    cancel: string;
-    onConfirm: () => Promise<any>;
-    fullWidth?: boolean;
-    disabled?: boolean;
-    icon?: React.ReactNode;
-    color?: ButtonProps["color"];
-    variant?: ButtonProps["variant"];
+	title: string;
+	confirmTitle?: string;
+	cancel: string;
+	onConfirm: () => Promise<any>;
+	fullWidth?: boolean;
+	disabled?: boolean;
+	icon?: React.ReactNode;
+	color?: ButtonProps["color"];
+	variant?: ButtonProps["variant"];
 }
 
 export function ConfirmButton(props: PropsWithChildren<ConfirmButtonProps>) {
-    const {
-        fullWidth,
-        title,
-        confirmTitle,
-        cancel,
-        icon,
-        children,
-        onConfirm,
-        color,
-        variant,
-        disabled,
-    } = props;
-    const isMounted = useIsMounted();
-    const [dialogOpen, setDialogOpen, clearDialogOpen] = useFlag(false);
+	const {
+		fullWidth,
+		title,
+		confirmTitle,
+		cancel,
+		icon,
+		children,
+		onConfirm,
+		color,
+		variant,
+		disabled,
+	} = props;
+	const isMounted = useIsMounted();
+	const [dialogOpen, setDialogOpen, clearDialogOpen] = useFlag(false);
 
-    const handleConfirm = useCallback(async () => {
-        await onConfirm();
-        if (isMounted) {
-            clearDialogOpen();
-        }
-    }, [onConfirm, isMounted]);
+	const handleConfirm = useCallback(async () => {
+		await onConfirm();
+		if (isMounted) {
+			clearDialogOpen();
+		}
+	}, [onConfirm, isMounted]);
 
-    return (
-        <Fragment>
-            <Button
-                onClick={setDialogOpen}
-                color={color}
-                variant={variant}
-                disabled={disabled}
-                startIcon={icon}
-                fullWidth={fullWidth}
-            >
-                {title}
-            </Button>
-            <ConfirmDialog
-                open={dialogOpen}
-                onClose={clearDialogOpen}
-                title={title}
-                confirmTitle={confirmTitle}
-                cancel={cancel}
-                onConfirm={handleConfirm}
-                color={color}
-                fullWidth={fullWidth}
-                icon={icon}
-            >
-                {children}
-            </ConfirmDialog>
-        </Fragment>
-    );
+	return (
+		<Fragment>
+			<Button
+				onClick={setDialogOpen}
+				color={color}
+				variant={variant}
+				disabled={disabled}
+				startIcon={icon}
+				fullWidth={fullWidth}
+			>
+				{title}
+			</Button>
+			<ConfirmDialog
+				open={dialogOpen}
+				onClose={clearDialogOpen}
+				title={title}
+				confirmTitle={confirmTitle}
+				cancel={cancel}
+				onConfirm={handleConfirm}
+				color={color}
+				fullWidth={fullWidth}
+				icon={icon}
+			>
+				{children}
+			</ConfirmDialog>
+		</Fragment>
+	);
 }

package/src/confirm/ConfirmDialog.tsx

@@ -5,64 +5,64 @@ import {useAsyncCallback} from "react-async-hook";
 import {ErrorAlert} from "../ErrorAlert";
 
 interface ConfirmDialogProps {
-    open: boolean;
-    onClose: () => void;
-    title: string;
-    confirmTitle?: string;
-    cancel: string;
-    onConfirm: () => Promise<any>;
-    fullWidth?: boolean;
-    icon?: React.ReactNode;
-    color?: ButtonProps["color"];
+	open: boolean;
+	onClose: () => void;
+	title: string;
+	confirmTitle?: string;
+	cancel: string;
+	onConfirm: () => Promise<any>;
+	fullWidth?: boolean;
+	icon?: React.ReactNode;
+	color?: ButtonProps["color"];
 }
 
 export function ConfirmDialog(props: PropsWithChildren<ConfirmDialogProps>) {
-    const {
-        open,
-        onClose,
-        title,
-        confirmTitle = title,
-        cancel,
-        onConfirm,
-        fullWidth = true,
-        icon,
-        color = "primary",
-        children
-    } = props;
+	const {
+		open,
+		onClose,
+		title,
+		confirmTitle = title,
+		cancel,
+		onConfirm,
+		fullWidth = true,
+		icon,
+		color = "primary",
+		children,
+	} = props;
 
-    const {loading, error, execute} = useAsyncCallback(onConfirm);
+	const {loading, error, execute} = useAsyncCallback(onConfirm);
 
-    async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
-        e.preventDefault();
-        if (e.currentTarget.reportValidity()) {
-            await execute();
-        }
-    }
+	async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+		e.preventDefault();
+		if (e.currentTarget.reportValidity()) {
+			await execute();
+		}
+	}
 
-    return (
-        <Dialog fullWidth={fullWidth} open={open} onClose={onClose}>
-            <DialogTitle>{title}</DialogTitle>
-            <form onSubmit={handleSubmit}>
-                <DialogContent>{children}</DialogContent>
-                {error && (
-                    <DialogContent>
-                        <ErrorAlert error={error}/>
-                    </DialogContent>
-                )}
-                <DialogActions>
-                    <Button
-                        type="submit"
-                        color={color}
-                        disabled={loading}
-                        startIcon={loading ? <CircularProgress color={color} size={16} sx={{mx: 0.25}} /> : icon}
-                    >
-                        {confirmTitle}
-                    </Button>
-                    <Button onClick={onClose} color="inherit">
-                        {cancel}
-                    </Button>
-                </DialogActions>
-            </form>
-        </Dialog>
-    );
+	return (
+		<Dialog fullWidth={fullWidth} open={open} onClose={onClose}>
+			<DialogTitle>{title}</DialogTitle>
+			<form onSubmit={handleSubmit}>
+				<DialogContent>{children}</DialogContent>
+				{error && (
+					<DialogContent>
+						<ErrorAlert error={error} />
+					</DialogContent>
+				)}
+				<DialogActions>
+					<Button
+						type="submit"
+						color={color}
+						disabled={loading}
+						startIcon={loading ? <CircularProgress color={color} size={16} sx={{mx: 0.25}} /> : icon}
+					>
+						{confirmTitle}
+					</Button>
+					<Button onClick={onClose} color="inherit">
+						{cancel}
+					</Button>
+				</DialogActions>
+			</form>
+		</Dialog>
+	);
 }

package/src/confirm/ConfirmMenuItem.tsx

@@ -5,62 +5,60 @@ import {useFlag, useIsMounted} from "../utils";
 import {ConfirmDialog} from "./ConfirmDialog";
 
 interface ConfirmButtonProps {
-    title: string;
-    confirmTitle?: string;
-    cancel: string;
-    onConfirm: () => Promise<any>;
-    fullWidth?: boolean;
-    disabled?: boolean;
-    icon?: React.ReactNode;
-    color?: ButtonProps["color"];
+	title: string;
+	confirmTitle?: string;
+	cancel: string;
+	onConfirm: () => Promise<any>;
+	fullWidth?: boolean;
+	disabled?: boolean;
+	icon?: React.ReactNode;
+	color?: ButtonProps["color"];
 }
 
 export function ConfirmMenuItem(props: PropsWithChildren<ConfirmButtonProps>) {
-    const {
-        fullWidth,
-        title,
-        confirmTitle,
-        cancel,
-        icon,
-        children,
-        onConfirm,
-        color,
-        disabled,
-    } = props;
-    const isMounted = useIsMounted();
-    const [dialogOpen, setDialogOpen, clearDialogOpen] = useFlag(false);
+	const {
+		fullWidth,
+		title,
+		confirmTitle,
+		cancel,
+		icon,
+		children,
+		onConfirm,
+		color,
+		disabled,
+	} = props;
+	const isMounted = useIsMounted();
+	const [dialogOpen, setDialogOpen, clearDialogOpen] = useFlag(false);
 
-    const handleConfirm = useCallback(async () => {
-        await onConfirm();
-        if (isMounted) {
-            clearDialogOpen();
-        }
-    }, [onConfirm, isMounted]);
+	const handleConfirm = useCallback(async () => {
+		await onConfirm();
+		if (isMounted) {
+			clearDialogOpen();
+		}
+	}, [onConfirm, isMounted]);
 
-    return (
-        <Fragment>
-            <MenuItem
-                onClick={setDialogOpen}
-                disabled={disabled}
-            >
-                {icon && (
-                    <ListItemIcon>{icon}</ListItemIcon>
-                )}
-                <ListItemText primary={title} />
-            </MenuItem>
-            <ConfirmDialog
-                open={dialogOpen}
-                onClose={clearDialogOpen}
-                title={title}
-                confirmTitle={confirmTitle}
-                cancel={cancel}
-                onConfirm={handleConfirm}
-                color={color}
-                fullWidth={fullWidth}
-                icon={icon}
-            >
-                {children}
-            </ConfirmDialog>
-        </Fragment>
-    );
+	return (
+		<Fragment>
+			<MenuItem
+				onClick={setDialogOpen}
+				disabled={disabled}
+			>
+				{icon && <ListItemIcon>{icon}</ListItemIcon>}
+				<ListItemText primary={title} />
+			</MenuItem>
+			<ConfirmDialog
+				open={dialogOpen}
+				onClose={clearDialogOpen}
+				title={title}
+				confirmTitle={confirmTitle}
+				cancel={cancel}
+				onConfirm={handleConfirm}
+				color={color}
+				fullWidth={fullWidth}
+				icon={icon}
+			>
+				{children}
+			</ConfirmDialog>
+		</Fragment>
+	);
 }

package/src/container/ContainerLayout.tsx

@@ -1,9 +1,9 @@
-import React, {createElement, PropsWithChildren} from "react";
-import {Breakpoint} from "@mui/system";
 import {Box, Container} from "@mui/material";
-import {containerWidthToBreakPoint, useContainerSettingsContext} from "./ContainerSettingsContext";
-import {useHelpSettingsContext} from "../help/HelpSettingsContext";
+import {Breakpoint} from "@mui/system";
+import React, {createElement, PropsWithChildren} from "react";
 import {HelpDrawer} from "../help/HelpDrawer";
+import {useHelpSettingsContext} from "../help/HelpSettingsContext";
+import {containerWidthToBreakPoint, useContainerSettingsContext} from "./ContainerSettingsContext";
 
 interface ContainerLayoutProps extends PropsWithChildren<any> {
 	fixedWidth?: Breakpoint | false;
@@ -15,7 +15,7 @@ export function ContainerLayout({children, fixedWidth, margin, helpKey}: Contain
 	const {baseUrl} = useHelpSettingsContext();
 
 	let selectedWidth = fixedWidth;
-	if(!selectedWidth && width) {
+	if (!selectedWidth && width) {
 		selectedWidth = containerWidthToBreakPoint(width);
 	}
 
@@ -28,9 +28,8 @@ export function ContainerLayout({children, fixedWidth, margin, helpKey}: Contain
 				displayPrint="none"
 			>
 				{children}
-				{baseUrl &&
-					<HelpDrawer />
-				}
+				{baseUrl
+					&& <HelpDrawer />}
 			</Box>
 			<Box id="containerLayoutBoxPrint" display="none" displayPrint="block" style={{marginTop: "-32px"}}>
 				{children}

package/src/container/ContainerSettingsContext.tsx

@@ -1,77 +1,80 @@
+import {Breakpoint} from "@mui/system";
 import * as React from "react";
 import {
-    createContext,
-    createElement,
-    PropsWithChildren,
-    useCallback,
-    useContext,
-    useEffect,
-    useMemo,
-    useState
+	createContext,
+	createElement,
+	PropsWithChildren,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useState,
 } from "react";
-import {Breakpoint} from "@mui/system";
 
-type ContainerWidth = Breakpoint | 'max';
+type ContainerWidth = Breakpoint | "max";
 
-const availableWidths: ContainerWidth[] = [ 'lg', 'xl', 'max'];
+const availableWidths: ContainerWidth[] = ["lg", "xl", "max"];
 
 export function nextWidth(currentWidth: ContainerWidth): ContainerWidth {
-    const currentIndex = availableWidths.indexOf(currentWidth);
-    const nextIndex = currentIndex + 1;
-    return nextIndex >= availableWidths.length ? availableWidths[0] : availableWidths[nextIndex];
+	const currentIndex = availableWidths.indexOf(currentWidth);
+	const nextIndex = currentIndex + 1;
+	return nextIndex >= availableWidths.length ? availableWidths[0] : availableWidths[nextIndex];
 }
 
 export function containerWidthToBreakPoint(width: ContainerWidth): Breakpoint | false {
-    return width === 'max' ? false : width;
+	return width === "max" ? false : width;
 }
 
 const WIDTH_KEY = "variocube-container-width";
-const DEFAULT_WIDTH: ContainerWidth = 'lg';
+const DEFAULT_WIDTH: ContainerWidth = "lg";
 
 interface ContainerSettingsContextData {
-    width: ContainerWidth;
-    setWidth: (width: ContainerWidth) => void;
+	width: ContainerWidth;
+	setWidth: (width: ContainerWidth) => void;
 }
 
 const emptyContext: ContainerSettingsContextData = {
-    width: DEFAULT_WIDTH,
-    setWidth: (width: ContainerWidth) => console.error(`Empty context should not call setWidth(${width}), you most likely do not have <ContainerSettingsContextProvider/> in your component tree.`)
+	width: DEFAULT_WIDTH,
+	setWidth: (width: ContainerWidth) =>
+		console.error(
+			`Empty context should not call setWidth(${width}), you most likely do not have <ContainerSettingsContextProvider/> in your component tree.`,
+		),
 };
 
 const ContainerSettingsContext = createContext(emptyContext);
 
 export function ContainerSettingsContextProvider({children}: PropsWithChildren<any>) {
-    const [width, setWidth] = useState<ContainerWidth | undefined>(undefined);
+	const [width, setWidth] = useState<ContainerWidth | undefined>(undefined);
 
-    const handleSetWidth = useCallback((next: ContainerWidth) => {
-        console.log(`Setting container width to ${next}`);
-        localStorage.setItem(WIDTH_KEY, next);
-        setWidth(next);
-    }, []);
+	const handleSetWidth = useCallback((next: ContainerWidth) => {
+		console.log(`Setting container width to ${next}`);
+		localStorage.setItem(WIDTH_KEY, next);
+		setWidth(next);
+	}, []);
 
-    const defaultContext = useMemo<ContainerSettingsContextData>(() => {
-        return {
-            width: width || DEFAULT_WIDTH,
-            setWidth: handleSetWidth
-        };
-    }, [width, handleSetWidth]);
+	const defaultContext = useMemo<ContainerSettingsContextData>(() => {
+		return {
+			width: width || DEFAULT_WIDTH,
+			setWidth: handleSetWidth,
+		};
+	}, [width, handleSetWidth]);
 
-    useEffect(() => {
-        let configured = localStorage.getItem(WIDTH_KEY);
-        if(configured) {
-            setWidth(configured as ContainerWidth);
-        } else {
-            setWidth(DEFAULT_WIDTH);
-        }
-    }, []);
+	useEffect(() => {
+		let configured = localStorage.getItem(WIDTH_KEY);
+		if (configured) {
+			setWidth(configured as ContainerWidth);
+		} else {
+			setWidth(DEFAULT_WIDTH);
+		}
+	}, []);
 
-    return (
-        <ContainerSettingsContext.Provider value={defaultContext}>
-            {children}
-        </ContainerSettingsContext.Provider>
-    );
+	return (
+		<ContainerSettingsContext.Provider value={defaultContext}>
+			{children}
+		</ContainerSettingsContext.Provider>
+	);
 }
 
 export function useContainerSettingsContext(): ContainerSettingsContextData {
-    return useContext<ContainerSettingsContextData>(ContainerSettingsContext);
+	return useContext<ContainerSettingsContextData>(ContainerSettingsContext);
 }