@variocube/app-ui 1.14.0

package/src/Input/Select.tsx

@@ -0,0 +1,33 @@
+import {MenuItem} from "@mui/material";
+import React, {ReactNode} from "react";
+import {TextField, TextFieldProps} from "./TextField";
+
+interface SelectProps<T extends string | number> extends Omit<TextFieldProps, "value" | "onChange" | "children"> {
+	label?: ReactNode;
+	value: T | undefined;
+	onChange: (value: T) => any;
+	options: ReadonlyArray<T>;
+	renderLabel?: (option: T) => ReactNode;
+}
+
+export function Select<T extends string>(props: Readonly<SelectProps<T>>) {
+	const {label, value, onChange, options, renderLabel, ...rest} = props;
+	return (
+		<TextField
+			select
+			label={label}
+			value={value}
+			onChange={(value) => onChange(value as T)}
+			{...rest}
+		>
+			{options.map(option => (
+				<MenuItem
+					key={option}
+					value={option}
+				>
+					{renderLabel ? renderLabel(option) : option}
+				</MenuItem>
+			))}
+		</TextField>
+	);
+}

package/src/Input/Selector.tsx

@@ -0,0 +1,21 @@
+import React, {PropsWithChildren} from "react";
+import {MenuItem} from "@mui/material";
+import {TextField, TextFieldProps} from "./TextField";
+
+type SelectorProps = TextFieldProps & {
+    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>
+    )
+}

package/src/Input/Switch.tsx

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

package/src/Input/TextField.tsx

@@ -0,0 +1,69 @@
+import {TextField as MuiTextField, TextFieldProps as MuiTextFieldProps} from "@mui/material";
+import React, {useRef, useState} from "react";
+
+export type TextFieldProps = Omit<MuiTextFieldProps, "inputRef" | "onChange"> & {
+	onChange?: (value: string, e: React.ChangeEvent<HTMLInputElement>) => any;
+	validate?: (value: string) => string | undefined;
+};
+
+export function TextField({onChange, validate, onBlur, helperText, select, SelectProps, ...props}: TextFieldProps) {
+	const input = useRef<HTMLInputElement | HTMLTextAreaElement | undefined>();
+	const [validationCount, setValidationCount] = useState(0);
+
+	const incValidationCount = () => setValidationCount(v => v + 1);
+	const wasValidated = validationCount > 0;
+
+	const error = wasValidated && input.current != null && !input.current.validity.valid;
+
+	function maybeUpdateValidity(value: string) {
+		if (wasValidated) {
+			if (validate) {
+				input.current?.setCustomValidity(validate(value) || "");
+			}
+			incValidationCount();
+		}
+	}
+
+	function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+		const value = e.currentTarget?.value || e.target.value;
+		maybeUpdateValidity(value);
+		if (onChange) {
+			onChange(value, e);
+		}
+	}
+
+	function handleBlur(e: React.FocusEvent<HTMLInputElement>) {
+		const value = e.currentTarget?.value || e.target.value;
+		maybeUpdateValidity(value);
+		if (onBlur) {
+			onBlur(e);
+		}
+	}
+
+	// Despite typed differently, a MUI TextField with the `select` property set,
+	// provides a ref that is an object with a `node` property which contains the
+	// actual input element. We handle both cases here.
+	function handleInputRef(ref: HTMLInputElement | HTMLTextAreaElement | { node: HTMLInputElement }) {
+		const element = ref instanceof HTMLInputElement || ref instanceof HTMLTextAreaElement ? ref : ref?.node;
+		if (element) {
+			input.current = element;
+		}
+	}
+
+	return (
+		<MuiTextField
+			{...props}
+			select={select}
+			SelectProps={SelectProps && {
+				...SelectProps,
+				native: true,
+			}}
+			onChange={handleChange}
+			onInvalid={incValidationCount}
+			onBlur={handleBlur}
+			inputRef={handleInputRef}
+			error={error}
+			helperText={error ? input.current?.validationMessage : helperText}
+		/>
+	);
+}

package/src/Input/UrlUploadField.tsx

@@ -0,0 +1,84 @@
+import {CloudUpload, OpenInNew} from "@mui/icons-material";
+import {CircularProgress, IconButton, InputAdornment} from "@mui/material";
+import React, {ChangeEvent, useRef} from "react";
+import {useAsyncCallback} from "react-async-hook";
+import {TextField, TextFieldProps} from "./TextField";
+
+interface UrlUploadFieldProps extends TextFieldProps {
+	accept?: string;
+	upload?: (file: File) => Promise<string>;
+	value?: string;
+}
+
+export function UrlUploadField(props: UrlUploadFieldProps) {
+	const {
+		upload: uploadFunc,
+		type = "url",
+		accept,
+		value,
+	} = props;
+
+	const fileInputRef = useRef<HTMLInputElement>(null);
+
+	const showFileSelect = () => {
+		if (fileInputRef && fileInputRef.current) {
+			fileInputRef.current.click();
+		}
+	};
+
+	const upload = useAsyncCallback(async (e: ChangeEvent<HTMLInputElement>) => {
+		const files = e.target.files;
+		if (files && uploadFunc) {
+			for (const file of files) {
+				const publicUrl = await uploadFunc(file);
+				props.onChange && props.onChange(publicUrl, e);
+			}
+		}
+	});
+
+	const startAdornment = (
+		<InputAdornment position="start">
+			{!upload.loading && (
+				<IconButton onClick={showFileSelect}>
+					<CloudUpload />
+				</IconButton>
+			)}
+			{upload.loading && <CircularProgress size={24} sx={{mx: 1}} />}
+		</InputAdornment>
+	);
+
+	const endAdornment = (
+		<InputAdornment position="end">
+			<IconButton
+				component="a"
+				target="_blank"
+				href={value}
+				disabled={!value}
+			>
+				<OpenInNew />
+			</IconButton>
+		</InputAdornment>
+	);
+
+	return (
+		<React.Fragment>
+			<input
+				type="file"
+				accept={accept}
+				ref={fileInputRef}
+				onChange={upload.execute}
+				style={{display: "none"}}
+			/>
+			<TextField
+				{...props}
+				value={value}
+				type={type}
+				InputProps={{
+					...props.InputProps,
+					startAdornment: upload ? startAdornment : undefined,
+					endAdornment: endAdornment,
+				}}
+			/>
+		</React.Fragment>
+	);
+}

package/src/Input/index.ts

@@ -0,0 +1,9 @@
+export * from "./ActionsMenu";
+export * from "./Checkbox";
+export * from "./NumberField";
+export * from "./RadioGroup";
+export * from "./Select";
+export * from "./Selector";
+export * from "./Switch";
+export * from "./TextField";
+export * from "./UrlUploadField";

package/src/LanguageSwitcher/LanguageSwitcher.tsx

@@ -0,0 +1,63 @@
+import {ExpandMore, Translate} from "@mui/icons-material";
+import {Button, Hidden, Menu, MenuItem} from "@mui/material";
+import {ButtonPropsColorOverrides} from "@mui/material/Button/Button";
+import {OverridableStringUnion} from "@mui/types";
+import * as React from "react";
+import {useCallback, useState} from "react";
+
+export interface Language {
+	language: string;
+	displayName: string;
+}
+
+export interface LanguageSwitcherMenuProps {
+	color?: OverridableStringUnion<
+		"inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning",
+		ButtonPropsColorOverrides
+	>;
+	language: string;
+	setLanguage: (language: string) => void;
+	languages: ReadonlyArray<Language>;
+}
+
+export function LanguageSwitcher(props: LanguageSwitcherMenuProps) {
+	const {color, language, setLanguage, languages} = props;
+
+	const [anchorEl, setAnchorEl] = useState<HTMLAnchorElement | HTMLButtonElement | undefined>();
+
+	const handleSelectLanguage = useCallback((language: string) => {
+		setLanguage(language);
+		setAnchorEl(undefined);
+	}, [setLanguage]);
+
+	const {displayName} = languages.find(l => l.language == language) ?? {};
+
+	return (
+		<React.Fragment>
+			<Button
+				color={color}
+				startIcon={<Translate />}
+				endIcon={<ExpandMore fontSize="small" />}
+				onClick={(e) => setAnchorEl(e.currentTarget)}
+			>
+				<Hidden mdDown>{displayName || language.toLocaleUpperCase()}</Hidden>
+				<Hidden mdUp>{language.toLocaleUpperCase()}</Hidden>
+			</Button>
+			<Menu
+				open={Boolean(anchorEl)}
+				anchorEl={anchorEl}
+				keepMounted
+				onClose={() => setAnchorEl(undefined)}
+			>
+				{languages.map((l) => (
+					<MenuItem
+						key={l.language}
+						onClick={() => handleSelectLanguage(l.language)}
+					>
+						{l.displayName}
+					</MenuItem>
+				))}
+			</Menu>
+		</React.Fragment>
+	);
+}

package/src/LanguageSwitcher/index.ts

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

package/src/Paging/Paging.ts

@@ -0,0 +1,77 @@
+export interface Page<T> {
+    content: T[];
+    totalPages: number;
+    totalElements: number;
+    number: number;
+    numberOfElements: number;
+    size: number;
+    last: boolean;
+    first: boolean;
+    hasContent: boolean;
+    hasNext: boolean;
+    hasPrevious: boolean;
+}
+
+export interface Pageable<K = string> {
+    pageNumber: number;
+    pageSize: number;
+    sort?: K;
+    direction?: 'asc' | 'desc';
+}
+
+export interface PagingSettings<K> extends Pageable<K> {
+    filters?: { [key: string]: any }
+}
+
+export interface Paging {
+    updateSettings: <K> (settings: PagingSettings<K>) => void;
+    getSettings: <K> () => PagingSettings<K>;
+    toQueryString: (prefix?: string) => string;
+}
+
+export class PagingImpl implements Paging {
+
+    private storage = sessionStorage;
+
+    private readonly baseSettings = { pageNumber: 0, pageSize: 25 };
+
+    constructor(private _storageKey: string, private _unpaged: boolean = false) {
+        const stored = this.storage.getItem(_storageKey);
+        if (!stored) {
+            this.storage.setItem(_storageKey, JSON.stringify(this.baseSettings));
+        }
+    }
+
+    updateSettings<K>(settings: PagingSettings<K>) {
+        this.storage.setItem(this._storageKey, JSON.stringify(settings));
+    }
+
+    getSettings<K>(): PagingSettings<K> {
+        const stored = this.storage.getItem(this._storageKey);
+        if (stored) return JSON.parse(stored) as PagingSettings<K>;
+        return this.baseSettings;
+    }
+
+    resetSettings() {
+        this.storage.setItem(this._storageKey, JSON.stringify(this.baseSettings));
+    }
+
+    toQueryString(prefix?: string) {
+        const {pageNumber, pageSize, sort, direction, filters} = this.getSettings();
+        let query = this._unpaged ? '&unpaged=true' : `page=${pageNumber}&size=${pageSize}`;
+        if (sort) {
+            query += `&sort=${sort},${direction || 'desc'}`
+        }
+        if (filters) {
+            for (let key of Object.keys(filters)) {
+                if (typeof filters[key] === 'string') {
+                    query += `&${key}=${filters[key]}`;
+                } else if (Array.isArray(filters[key])) {
+                    query = '&' + filters[key].map((v: any) => `${key}=${v}`).join('&');
+                }
+            }
+        }
+
+        return `${prefix ? (prefix + '&') : '?'}${query}`;
+    }
+}

package/src/Paging/index.ts

@@ -0,0 +1 @@
+export {Page, Pageable, PagingSettings, Paging, PagingImpl} from "./Paging";

package/src/VCThemeProvider/JetbrainsMonoFont.tsx

@@ -0,0 +1,55 @@
+import {GlobalStyles} from "@mui/material";
+import React, {Fragment} from "react";
+import JetbrainsMono300Woff from "@fontsource/jetbrains-mono/files/jetbrains-mono-latin-300-normal.woff";
+import JetbrainsMono300Woff2 from "@fontsource/jetbrains-mono/files/jetbrains-mono-latin-300-normal.woff2";
+import JetbrainsMono400Woff from "@fontsource/jetbrains-mono/files/jetbrains-mono-latin-400-normal.woff";
+import JetbrainsMono400Woff2 from "@fontsource/jetbrains-mono/files/jetbrains-mono-latin-400-normal.woff2";
+import JetbrainsMono500Woff from "@fontsource/jetbrains-mono/files/jetbrains-mono-latin-500-normal.woff";
+import JetbrainsMono500Woff2 from "@fontsource/jetbrains-mono/files/jetbrains-mono-latin-500-normal.woff2";
+import JetbrainsMono700Woff from "@fontsource/jetbrains-mono/files/jetbrains-mono-latin-700-normal.woff";
+import JetbrainsMono700Woff2 from "@fontsource/jetbrains-mono/files/jetbrains-mono-latin-700-normal.woff2";
+
+/**
+ * Loads the Jetbrains Mono fonts.
+ */
+export const JetbrainsMonoFont = () => (
+    <Fragment>
+        <GlobalStyles styles={{
+            "@font-face": {
+                fontFamily: "Jetbrains Mono",
+                src: `url("${JetbrainsMono300Woff2}") format("woff2"), url("${JetbrainsMono300Woff}") format("woff")`,
+                fontWeight: 300,
+                fontStyle: "normal",
+            }
+        }}/>
+        <GlobalStyles styles={{
+            "@font-face": {
+                fontFamily: "Jetbrains Mono",
+                src: `url("${JetbrainsMono400Woff2}") format("woff2"), url("${JetbrainsMono400Woff}") format("woff")`,
+                fontWeight: 400,
+                fontStyle: "normal",
+            }
+        }}/>
+        <GlobalStyles styles={{
+            "@font-face": {
+                fontFamily: "Jetbrains Mono",
+                src: `url("${JetbrainsMono500Woff2}") format("woff2"), url("${JetbrainsMono500Woff}") format("woff")`,
+                fontWeight: 500,
+                fontStyle: "normal",
+            }
+        }}/>
+        <GlobalStyles styles={{
+            "@font-face": {
+                fontFamily: "Jetbrains Mono",
+                src: `url("${JetbrainsMono700Woff2}") format("woff2"), url("${JetbrainsMono700Woff}") format("woff")`,
+                fontWeight: 700,
+                fontStyle: "normal",
+            }
+        }}/>
+        <GlobalStyles styles={{
+            "code, kbd, pre, samp": {
+                fontFamily: "Jetbrains Mono"
+            }
+        }}/>
+    </Fragment>
+);

package/src/VCThemeProvider/RobotoFont.tsx

@@ -0,0 +1,52 @@
+import {GlobalStyles} from "@mui/material";
+import React, {Fragment} from "react";
+import RobotoLightWoff from "roboto-fontface/fonts/roboto/Roboto-Light.woff";
+import RobotoLightWoff2 from "roboto-fontface/fonts/roboto/Roboto-Light.woff2";
+import RobotoRegularWoff from "roboto-fontface/fonts/roboto/Roboto-Regular.woff";
+import RobotoRegularWoff2 from "roboto-fontface/fonts/roboto/Roboto-Regular.woff2";
+import RobotoMediumWoff from "roboto-fontface/fonts/roboto/Roboto-Medium.woff";
+import RobotoMediumWoff2 from "roboto-fontface/fonts/roboto/Roboto-Medium.woff2";
+import RobotoBoldWoff from "roboto-fontface/fonts/roboto/Roboto-Bold.woff";
+import RobotoBoldWoff2 from "roboto-fontface/fonts/roboto/Roboto-Bold.woff2";
+
+/**
+ * Loads the Roboto fonts used by MUI as specified at:
+ * https://mui.com/material-ui/getting-started/installation/#roboto-font
+ * @constructor
+ */
+export const RobotoFont = () => (
+    <Fragment>
+        <GlobalStyles styles={{
+            "@font-face": {
+                fontFamily: "Roboto",
+                src: `url("${RobotoLightWoff2}") format("woff2"), url("${RobotoLightWoff}") format("woff")`,
+                fontWeight: 300,
+                fontStyle: "normal",
+            }
+        }}/>
+        <GlobalStyles styles={{
+            "@font-face": {
+                fontFamily: "Roboto",
+                src: `url("${RobotoRegularWoff2}") format("woff2"), url("${RobotoRegularWoff}") format("woff")`,
+                fontWeight: 400,
+                fontStyle: "normal",
+            }
+        }}/>
+        <GlobalStyles styles={{
+            "@font-face": {
+                fontFamily: "Roboto",
+                src: `url("${RobotoMediumWoff2}") format("woff2"), url("${RobotoMediumWoff}") format("woff")`,
+                fontWeight: 500,
+                fontStyle: "normal",
+            }
+        }}/>
+        <GlobalStyles styles={{
+            "@font-face": {
+                fontFamily: "Roboto",
+                src: `url("${RobotoBoldWoff2}") format("woff2"), url("${RobotoBoldWoff}") format("woff")`,
+                fontWeight: 700,
+                fontStyle: "normal",
+            }
+        }}/>
+    </Fragment>
+);

package/src/VCThemeProvider/ThemeModeSwitcher.tsx

@@ -0,0 +1,23 @@
+import React, {useCallback} from "react";
+import {FormControlLabel, FormGroup, Switch} from "@mui/material";
+import LightModeIcon from "@mui/icons-material/Brightness7";
+import DarkModeIcon from "@mui/icons-material/Brightness4";
+import {usePaletteMode} from "./VCThemeProvider";
+
+export const ThemeModeSwitcher = () => {
+    const {mode, setMode} = usePaletteMode();
+
+    const handleModeChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        setMode(e.currentTarget.checked ? "light" : "dark");
+    }, [setMode]);
+
+    return (
+        <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
+            <FormControlLabel
+                control={<Switch checked={mode === 'light'} onChange={handleModeChange} />}
+                componentsProps={{ typography: { lineHeight: '1em' }}}
+                label={mode === 'light' ? <LightModeIcon /> : <DarkModeIcon />}
+            />
+        </FormGroup>
+    )
+}