@variocube/app-ui 1.15.0 → 1.16.1

package/src/Paging/Paging.ts

@@ -1,77 +1,76 @@
 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;
+	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';
+	pageNumber: number;
+	pageSize: number;
+	sort?: K;
+	direction?: "asc" | "desc";
 }
 
 export interface PagingSettings<K> extends Pageable<K> {
-    filters?: { [key: string]: any }
+	filters?: { [key: string]: any };
 }
 
 export interface Paging {
-    updateSettings: <K> (settings: PagingSettings<K>) => void;
-    getSettings: <K> () => PagingSettings<K>;
-    toQueryString: (prefix?: string) => string;
+	updateSettings: <K>(settings: PagingSettings<K>) => void;
+	getSettings: <K>() => PagingSettings<K>;
+	toQueryString: (prefix?: string) => string;
 }
 
 export class PagingImpl implements Paging {
+	private storage = sessionStorage;
 
-    private storage = sessionStorage;
+	private readonly baseSettings = {pageNumber: 0, pageSize: 25};
 
-    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));
+		}
+	}
 
-    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));
+	}
 
-    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;
+	}
 
-    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));
+	}
 
-    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("&");
+				}
+			}
+		}
 
-    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}`;
-    }
-}
+		return `${prefix ? (prefix + "&") : "?"}${query}`;
+	}
+}

package/src/Paging/index.ts

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

package/src/VCThemeProvider/JetbrainsMonoFont.tsx

@@ -1,5 +1,3 @@
-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";
@@ -8,48 +6,60 @@ import JetbrainsMono500Woff from "@fontsource/jetbrains-mono/files/jetbrains-mon
 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";
+import {GlobalStyles} from "@mui/material";
+import React, {Fragment} from "react";
 
 /**
  * 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>
-);
+	<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

@@ -1,13 +1,13 @@
 import {GlobalStyles} from "@mui/material";
 import React, {Fragment} from "react";
+import RobotoBoldWoff from "roboto-fontface/fonts/roboto/Roboto-Bold.woff";
+import RobotoBoldWoff2 from "roboto-fontface/fonts/roboto/Roboto-Bold.woff2";
 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";
+import RobotoRegularWoff from "roboto-fontface/fonts/roboto/Roboto-Regular.woff";
+import RobotoRegularWoff2 from "roboto-fontface/fonts/roboto/Roboto-Regular.woff2";
 
 /**
  * Loads the Roboto fonts used by MUI as specified at:
@@ -15,38 +15,46 @@ import RobotoBoldWoff2 from "roboto-fontface/fonts/roboto/Roboto-Bold.woff2";
  * @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>
-);
+	<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

@@ -1,23 +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 LightModeIcon from "@mui/icons-material/Brightness7";
+import {FormControlLabel, FormGroup, Switch} from "@mui/material";
+import React, {useCallback} from "react";
 import {usePaletteMode} from "./VCThemeProvider";
 
 export const ThemeModeSwitcher = () => {
-    const {mode, setMode} = usePaletteMode();
+	const {mode, setMode} = usePaletteMode();
 
-    const handleModeChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-        setMode(e.currentTarget.checked ? "light" : "dark");
-    }, [setMode]);
+	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>
-    )
-}
+	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>
+	);
+};