@variocube/app-ui 1.14.5 → 1.16.0

package/src/AppShell/AppShell.tsx

@@ -1,91 +1,92 @@
 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";
+import {useFlag} from "../utils";
 
 interface AppShellProps {
-    appName: string;
-    sideNav?: JSX.Element | null | undefined;
-    sideNavWidth?: number;
-    sideNavFixed?: Breakpoint;
-    topNav?: JSX.Element | null | undefined;
-    footer?: JSX.Element | null | undefined;
+	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 {
-        children,
-        appName,
-        sideNav,
-        sideNavWidth = 200,
-        topNav,
-        sideNavFixed = "md",
-        footer,
-    } = props;
-
-    const [drawerOpen, setDrawerOpen, clearDrawerOpen, toggleDrawerOpen] = useFlag(false);
+	const [drawerOpen, setDrawerOpen, clearDrawerOpen, toggleDrawerOpen] = useFlag(false);
 
-    const theme = useTheme();
+	const theme = useTheme();
 
-    const drawerPermanent = useMediaQuery(theme.breakpoints.up(sideNavFixed));
-    useEffect(() => {
-        if (drawerPermanent) {
-            setDrawerOpen();
-        }
-    }, [drawerPermanent]);
+	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>
-                        )}
+	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={{
@@ -94,72 +95,78 @@ export function AppShell(props: PropsWithChildren<AppShellProps>) {
 									position: "absolute",
 									top: "50%",
 									left: "50%",
-									transform: "translate(-50%, -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>
-    );
+						{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

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

package/src/Input/ActionsMenu.tsx

@@ -1,102 +1,99 @@
+import {ExpandMore} from "@mui/icons-material";
 import {Button, ButtonGroup, ButtonPropsSizeOverrides, Menu, MenuItem} from "@mui/material";
+import {OverridableStringUnion} from "@mui/types";
 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;
+	label: string;
+	onClick: () => void;
 }
 
 export interface ActionsMenuProps {
-  actions: ActionMenuItem[];
+	actions: ActionMenuItem[];
 }
 
 export function ActionsMenu(props: ActionsMenuProps) {
-  const {actions} = props;
+	const {actions} = props;
 
-  if (actions.length == 0) {
-    return null;
-  }
+	if (actions.length == 0) {
+		return null;
+	}
 
-  if (actions.length == 1) {
-    return <SimpleButton label={actions[0].label} onClick={actions[0].onClick} />;
-  }
+	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>
-  );
+	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;
+	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>
-  );
+	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";
+	label: string;
+	onClick: () => void;
+	disabled?: boolean;
+	size?: "small" | "medium" | "large";
 }
 
 function PushButtonWithMenu(props: PushButtonWithMenuProps) {
-  const {label, onClick, disabled, size, children} = props;
+	const {label, onClick, disabled, size, children} = props;
 
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+	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>
-  );
+	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/EmailSenderField.tsx

@@ -1,64 +1,71 @@
 import * as React from "react";
-import {TextField, TextFieldProps} from "./TextField";
 import {useState} from "react";
+import {TextField, TextFieldProps} from "./TextField";
 
 export type EmailSenderFieldProps = Omit<TextFieldProps, "onChange"> & {
-    onChange?: (value: string, e: React.ChangeEvent<HTMLInputElement>) => any;
-    updateValidity?: (valid: boolean) => void;
-}
+	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);
+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);
-        }
-    }
+	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 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);
-    }
+	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}
-        />
-    );
+	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());
-}
+	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/Selector.tsx

@@ -1,21 +1,21 @@
-import React, {PropsWithChildren} from "react";
 import {MenuItem} from "@mui/material";
+import React, {PropsWithChildren} from "react";
 import {TextField, TextFieldProps} from "./TextField";
 
 type SelectorProps = TextFieldProps & {
-    options: {label: string, value: string}[],
-}
+	options: { label: string; value: string }[];
+};
 
 export const Selector = ({fullWidth = true, options, ...props}: PropsWithChildren<SelectorProps>) => {
-    return (
-        <TextField
-            {...props}
-            select
-            fullWidth={fullWidth}
-        >
-            {options.map((o, i) => (
-                <MenuItem key={'select-item-' + o.value + '-' + i} value={o.value}>{o.label}</MenuItem>
-            ))}
-        </TextField>
-    )
-}
+	return (
+		<TextField
+			{...props}
+			select
+			fullWidth={fullWidth}
+		>
+			{options.map((o, i) => (
+				<MenuItem key={"select-item-" + o.value + "-" + i} value={o.value}>{o.label}</MenuItem>
+			))}
+		</TextField>
+	);
+};

package/src/LanguageSwitcher/index.ts

@@ -1 +1 @@
-export * from "./LanguageSwitcher";
+export * from "./LanguageSwitcher";