@variocube/app-ui 1.15.0 → 1.16.0

package/src/VCThemeProvider/VCThemeProvider.tsx

@@ -1,51 +1,59 @@
-import React, { createContext, PropsWithChildren, useCallback, useContext, useMemo } from "react";
-import { createTheme, CssBaseline, decomposeColor, PaletteMode, ThemeOptions, ThemeProvider, useMediaQuery } from "@mui/material";
-import { useStorage } from "../storage";
-import { RobotoFont } from "./RobotoFont";
+import {
+	createTheme,
+	CssBaseline,
+	decomposeColor,
+	PaletteMode,
+	ThemeOptions,
+	ThemeProvider,
+	useMediaQuery,
+} from "@mui/material";
 import deepmerge from "deepmerge";
-import { JetbrainsMonoFont } from "./JetbrainsMonoFont";
+import React, {createContext, PropsWithChildren, useCallback, useContext, useMemo} from "react";
+import {useStorage} from "../storage";
+import {JetbrainsMonoFont} from "./JetbrainsMonoFont";
+import {RobotoFont} from "./RobotoFont";
 
 const DEFAULT_PRIMARY = "#ff6a00";
 const DEFAULT_SECONDARY = "#009dd8";
 
 const SUCCESS = {
-    light: "#429945",
-    dark: "#58cc5c"
-}
+	light: "#429945",
+	dark: "#58cc5c",
+};
 
 const WARNING = {
-    light: "#ccaa00",
-    dark: "#e6bf00"
+	light: "#ccaa00",
+	dark: "#e6bf00",
 };
 
 const ERROR = {
-    light: "#aa0000",
-    dark: "#e62e2e"
-}
+	light: "#aa0000",
+	dark: "#e62e2e",
+};
 
 const INFO = {
-    light: "#082480",
-    dark: "#294fcc"
-}
+	light: "#082480",
+	dark: "#294fcc",
+};
 
 const BACKGROUND = {
-    light: "#fffaf7",
-    dark: "#15161a"
-}
+	light: "#fffaf7",
+	dark: "#15161a",
+};
 
 const PAPER = {
-    light: "#ffffff",
-    dark: "#282b33"
-}
+	light: "#ffffff",
+	dark: "#282b33",
+};
 
 const TEXT = {
-    light: "#282b33",
-    dark: "#fdfaf7"
-}
+	light: "#282b33",
+	dark: "#fdfaf7",
+};
 
 interface ThemeContextValue {
-    mode: PaletteMode;
-    setMode: (mode: PaletteMode) => any;
+	mode: PaletteMode;
+	setMode: (mode: PaletteMode) => any;
 	customLogo?: CustomLogo;
 }
 
@@ -56,8 +64,8 @@ export interface CustomLogo {
 }
 
 const ThemeContext = createContext<ThemeContextValue>({
-    mode: "light",
-    setMode: () => void 0,
+	mode: "light",
+	setMode: () => void 0,
 });
 
 export interface Branding {
@@ -71,113 +79,110 @@ export interface Branding {
 }
 
 export interface VCThemeProviderProps {
-    branding?: Branding;
+	branding?: Branding;
 }
 
-export function VCThemeProvider({ branding, children }: PropsWithChildren<VCThemeProviderProps>) {
+export function VCThemeProvider({branding, children}: PropsWithChildren<VCThemeProviderProps>) {
+	// Determine default mode based on user preference
+	const userPrefersDark = useMediaQuery("(prefers-color-scheme: dark)");
+	const defaultMode = useMemo(() => userPrefersDark ? "dark" : "light", [userPrefersDark]);
 
-    // Determine default mode based on user preference
-    const userPrefersDark = useMediaQuery("(prefers-color-scheme: dark)");
-    const defaultMode = useMemo(() => userPrefersDark ? "dark" : "light", [userPrefersDark]);
+	// Allow overriding the default mode
+	const [modeOverride, setModeOverride] = useStorage<PaletteMode | null>("variocube-palette-mode", null);
 
-    // Allow overriding the default mode
-    const [modeOverride, setModeOverride] = useStorage<PaletteMode | null>("variocube-palette-mode", null);
+	// Select actual mode to use
+	const mode = useMemo(() => modeOverride ?? defaultMode, [modeOverride, defaultMode]);
 
-    // Select actual mode to use
-    const mode = useMemo(() => modeOverride ?? defaultMode, [modeOverride, defaultMode]);
+	// Allows setting the mode override. Clears the storage item if the default mode is set.
+	const setMode = useCallback((newMode: PaletteMode) => {
+		setModeOverride(newMode != defaultMode ? newMode : null);
+	}, [defaultMode]);
 
-    // Allows setting the mode override. Clears the storage item if the default mode is set.
-    const setMode = useCallback((newMode: PaletteMode) => {
-        setModeOverride(newMode != defaultMode ? newMode : null);
-    }, [defaultMode]);
-
-    const {
-        colorPrimary,
-        colorSecondary,
+	const {
+		colorPrimary,
+		colorSecondary,
 		logoLightUrl,
 		logoDarkUrl,
 		logoPaddingX,
 		logoPaddingY,
-    } = branding ?? {};
-
-
-    const theme = useMemo(() => {
-
-        const themeOptions: ThemeOptions = {
-            palette: {
-                mode,
-                primary: {
-                    main: sanitizeColor(colorPrimary, DEFAULT_PRIMARY),
-                },
-                secondary: {
-                    main: sanitizeColor(colorSecondary, DEFAULT_SECONDARY),
-                },
-                success: {
-                    main: SUCCESS[mode],
-                },
-                warning: {
-                    main: WARNING[mode],
-                },
-                error: {
-                    main: ERROR[mode],
-                },
-                info: {
-                    main: INFO[mode],
-                },
-                text: {
-                    primary: TEXT[mode],
-                },
-                background: {
-                    default: BACKGROUND[mode],
-                    paper: PAPER[mode]
-                }
-            },
-            typography: {
-                h1: {
-                    fontSize: 46,
-                    fontWeight: 300,
-                },
-                h2: {
-                    fontSize: 29,
-                    fontWeight: 500,
-                },
-                h3: {
-                    fontSize: 24,
-                    fontWeight: 500,
-                },
-                h4: {
-                    fontSize: 20,
-                    fontWeight: 500,
-                },
-                h5: {
-                    fontSize: 18,
-                    fontWeight: 500,
-                },
-                h6: {
-                    fontSize: 18,
-                    fontWeight: 500,
-                },
-                overline: {
-                    fontWeight: 500,
-                }
-            },
-            components: {
-                MuiLink: {
-                    defaultProps: {
-                        underline: "hover"
-                    }
-                },
-                MuiPaper: {
-                    styleOverrides: {
-                        root: {
-                            backgroundImage: "unset"
-                        }
-                    }
-                }
-            }
-        };
-        return createTheme(deepmerge(themeOptions, branding?.muiThemeOptions || {}));
-    }, [mode, branding]);
+	} = branding ?? {};
+
+	const theme = useMemo(() => {
+		const themeOptions: ThemeOptions = {
+			palette: {
+				mode,
+				primary: {
+					main: sanitizeColor(colorPrimary, DEFAULT_PRIMARY),
+				},
+				secondary: {
+					main: sanitizeColor(colorSecondary, DEFAULT_SECONDARY),
+				},
+				success: {
+					main: SUCCESS[mode],
+				},
+				warning: {
+					main: WARNING[mode],
+				},
+				error: {
+					main: ERROR[mode],
+				},
+				info: {
+					main: INFO[mode],
+				},
+				text: {
+					primary: TEXT[mode],
+				},
+				background: {
+					default: BACKGROUND[mode],
+					paper: PAPER[mode],
+				},
+			},
+			typography: {
+				h1: {
+					fontSize: 46,
+					fontWeight: 300,
+				},
+				h2: {
+					fontSize: 29,
+					fontWeight: 500,
+				},
+				h3: {
+					fontSize: 24,
+					fontWeight: 500,
+				},
+				h4: {
+					fontSize: 20,
+					fontWeight: 500,
+				},
+				h5: {
+					fontSize: 18,
+					fontWeight: 500,
+				},
+				h6: {
+					fontSize: 18,
+					fontWeight: 500,
+				},
+				overline: {
+					fontWeight: 500,
+				},
+			},
+			components: {
+				MuiLink: {
+					defaultProps: {
+						underline: "hover",
+					},
+				},
+				MuiPaper: {
+					styleOverrides: {
+						root: {
+							backgroundImage: "unset",
+						},
+					},
+				},
+			},
+		};
+		return createTheme(deepmerge(themeOptions, branding?.muiThemeOptions || {}));
+	}, [mode, branding]);
 
 	const customLogo = useMemo(() => {
 		const logoUrl = mode == "light" ? (logoLightUrl || logoDarkUrl) : (logoDarkUrl || logoLightUrl);
@@ -185,21 +190,21 @@ export function VCThemeProvider({ branding, children }: PropsWithChildren<VCThem
 			return {
 				url: logoUrl,
 				paddingX: logoPaddingX,
-				paddingY: logoPaddingY
-			}
+				paddingY: logoPaddingY,
+			};
 		}
 	}, [logoLightUrl, logoDarkUrl, mode, logoPaddingX, logoPaddingY]);
 
-    return (
-        <ThemeProvider theme={theme}>
-            <ThemeContext.Provider value={{mode, setMode, customLogo}}>
-                <CssBaseline />
-                <RobotoFont />
-                <JetbrainsMonoFont />
-                {children}
-            </ThemeContext.Provider>
-        </ThemeProvider>
-    )
+	return (
+		<ThemeProvider theme={theme}>
+			<ThemeContext.Provider value={{mode, setMode, customLogo}}>
+				<CssBaseline />
+				<RobotoFont />
+				<JetbrainsMonoFont />
+				{children}
+			</ThemeContext.Provider>
+		</ThemeProvider>
+	);
 }
 
 function sanitizeColor(color: string | undefined, fallback: string) {
@@ -208,19 +213,18 @@ function sanitizeColor(color: string | undefined, fallback: string) {
 			decomposeColor(color);
 			return color;
 		}
-	}
-	catch (error) {
+	} catch (error) {
 	}
 	return fallback;
 }
 
 export function usePaletteMode() {
-    const value = useContext(ThemeContext);
-    if (!value) {
-        throw new Error("Could not find theme context. Are you missing a VCThemeProvider in your component tree?");
-    }
+	const value = useContext(ThemeContext);
+	if (!value) {
+		throw new Error("Could not find theme context. Are you missing a VCThemeProvider in your component tree?");
+	}
 	const {mode, setMode} = value;
-    return {mode, setMode};
+	return {mode, setMode};
 }
 
 export function useCustomLogo() {

package/src/audit/AuditChanges.tsx

@@ -1,16 +1,16 @@
 import {Add, ChangeCircleOutlined, Remove} from "@mui/icons-material";
 import {Box, Chip, List, ListItem, ListItemIcon, ListItemText, Stack} from "@mui/material";
 import React, {Fragment} from "react";
-import {AppAuditLogEntry, JsonPatch, JsonPatchItem} from "./types";
 import {Code} from "../code/Code";
 import {CodeBlock} from "../code/CodeBlock";
 import {Json} from "../code/Json";
+import {AppAuditLogEntry, JsonPatch, JsonPatchItem} from "./types";
 
 export function AuditChanges({data, patch}: Pick<AppAuditLogEntry, "data" | "patch">) {
 	return (
 		<Stack spacing={2}>
 			{patch && <AuditPatch patch={patch} />}
-			{data && <AuditData data={data}/>}
+			{data && <AuditData data={data} />}
 		</Stack>
 	);
 }
@@ -25,7 +25,7 @@ export function AuditPatch({patch}: { patch: JsonPatch }) {
 							icon={getIcon(item.op)}
 							label={item.path}
 							sx={{
-								fontFamily: "Jetbrains Mono"
+								fontFamily: "Jetbrains Mono",
 							}}
 						/>
 					</ListItemIcon>
@@ -35,18 +35,18 @@ export function AuditPatch({patch}: { patch: JsonPatch }) {
 								{item.op == "replace" && (
 									<Fragment>
 										<Box sx={{color: "success"}}>
-											<Value value={item.value}/>
+											<Value value={item.value} />
 										</Box>
 										<Box color="error">
 											<s>
-												<Value value={item.fromValue}/>
+												<Value value={item.fromValue} />
 											</s>
 										</Box>
 									</Fragment>
 								)}
 								{item.op == "add" && (
 									<div>
-										<Value value={item.value}/>
+										<Value value={item.value} />
 									</div>
 								)}
 							</Box>
@@ -58,18 +58,24 @@ export function AuditPatch({patch}: { patch: JsonPatch }) {
 	);
 }
 
-export function AuditData({data}: {data: any}) {
+export function AuditData({data}: { data: any }) {
 	return (
-		<CodeBlock><Json data={data}/></CodeBlock>
+		<CodeBlock>
+			<Json data={data} />
+		</CodeBlock>
 	);
 }
 
 function getIcon(op: JsonPatchItem["op"]) {
 	switch (op) {
-		case "add": return <Add/>;
-		case "remove": return <Remove/>;
-		case "replace": return <ChangeCircleOutlined/>;
-		default: return;
+		case "add":
+			return <Add />;
+		case "remove":
+			return <Remove />;
+		case "replace":
+			return <ChangeCircleOutlined />;
+		default:
+			return;
 	}
 }
 

package/src/audit/AuditTimeline.tsx

@@ -1,25 +1,24 @@
-import React, {PropsWithChildren} from "react";
 import {Timeline} from "@mui/lab";
+import React, {PropsWithChildren} from "react";
 import {AuditTimelineItemSkeleton} from "./AuditTimelineItem";
 
 interface AuditTimelineProps {
-    loading?: boolean;
+	loading?: boolean;
 }
 
 export function AuditTimeline({loading, children}: PropsWithChildren<AuditTimelineProps>) {
-    if (loading) {
-        return (
-            <Timeline>
-                <AuditTimelineItemSkeleton/>
-                <AuditTimelineItemSkeleton/>
-                <AuditTimelineItemSkeleton/>
-            </Timeline>
-        )
-    }
-    return (
-        <Timeline>
-            {children}
-        </Timeline>
-    );
+	if (loading) {
+		return (
+			<Timeline>
+				<AuditTimelineItemSkeleton />
+				<AuditTimelineItemSkeleton />
+				<AuditTimelineItemSkeleton />
+			</Timeline>
+		);
+	}
+	return (
+		<Timeline>
+			{children}
+		</Timeline>
+	);
 }
-

package/src/audit/AuditTimelineItem.tsx

@@ -1,75 +1,72 @@
-import React, {ReactNode} from "react";
 import {
-    TimelineConnector,
-    TimelineContent,
-    TimelineDot,
-    TimelineItem,
-    TimelineOppositeContent,
-    TimelineSeparator
+	TimelineConnector,
+	TimelineContent,
+	TimelineDot,
+	TimelineItem,
+	TimelineOppositeContent,
+	TimelineSeparator,
 } from "@mui/lab";
 import {Box, Skeleton, Stack, Typography, useMediaQuery, useTheme} from "@mui/material";
+import React, {ReactNode} from "react";
 
 export interface AuditTimelineItemProps {
-    created: ReactNode;
-    actor: ReactNode;
-    connector?: boolean;
-    message: ReactNode;
-    changes: ReactNode;
+	created: ReactNode;
+	actor: ReactNode;
+	connector?: boolean;
+	message: ReactNode;
+	changes: ReactNode;
 }
 
 export function AuditTimelineItem(props: AuditTimelineItemProps) {
-    const {
-        created,
-        actor,
-        connector = true,
-        message,
-        changes,
-    } = props;
-    const theme = useTheme();
-    const sm = useMediaQuery(theme.breakpoints.down("sm"));
+	const {
+		created,
+		actor,
+		connector = true,
+		message,
+		changes,
+	} = props;
+	const theme = useTheme();
+	const sm = useMediaQuery(theme.breakpoints.down("sm"));
 
-    const createdAndActor = (
-        <Stack spacing={1}>
-            <Box color="text.secondary">{created}</Box>
-            <Box color="text.primary">{actor}</Box>
-        </Stack>
-    );
+	const createdAndActor = (
+		<Stack spacing={1}>
+			<Box color="text.secondary">{created}</Box>
+			<Box color="text.primary">{actor}</Box>
+		</Stack>
+	);
 
-    return (
-        <TimelineItem>
-            {sm
-                ? <TimelineOppositeContent sx={{flex: 0, padding: 0}}/>
-                : <TimelineOppositeContent>{createdAndActor}</TimelineOppositeContent>
-            }
-            <TimelineSeparator>
-                <TimelineDot/>
-                {connector && (
-                    <TimelineConnector/>
-                )}
-            </TimelineSeparator>
-            <TimelineContent>
-                <Stack spacing={1}>
-                    <Typography variant="h6" sx={{transform: "translateY(-1px)"}}>
-                        {message}
-                    </Typography>
-                    {sm && createdAndActor}
-                    <Typography variant="body2">
-                    {changes}
-                    </Typography>
-                </Stack>
-            </TimelineContent>
-        </TimelineItem>
-    )
+	return (
+		<TimelineItem>
+			{sm
+				? <TimelineOppositeContent sx={{flex: 0, padding: 0}} />
+				: <TimelineOppositeContent>{createdAndActor}</TimelineOppositeContent>}
+			<TimelineSeparator>
+				<TimelineDot />
+				{connector && <TimelineConnector />}
+			</TimelineSeparator>
+			<TimelineContent>
+				<Stack spacing={1}>
+					<Typography variant="h6" sx={{transform: "translateY(-1px)"}}>
+						{message}
+					</Typography>
+					{sm && createdAndActor}
+					<Typography variant="body2">
+						{changes}
+					</Typography>
+				</Stack>
+			</TimelineContent>
+		</TimelineItem>
+	);
 }
 
 export function AuditTimelineItemSkeleton() {
-    return (
-        <AuditTimelineItem
-            connector
-            created={<Skeleton/>}
-            actor={<Skeleton/>}
-            message={<Skeleton/>}
-            changes={<Skeleton variant="rounded" height="150px"/>}
-        />
-    );
+	return (
+		<AuditTimelineItem
+			connector
+			created={<Skeleton />}
+			actor={<Skeleton />}
+			message={<Skeleton />}
+			changes={<Skeleton variant="rounded" height="150px" />}
+		/>
+	);
 }

package/src/audit/index.ts

@@ -1,4 +1,4 @@
+export * from "./AuditChanges";
 export * from "./AuditTimeline";
 export * from "./AuditTimelineItem";
-export * from "./AuditChanges";
-export * from "./types";
+export * from "./types";