@variocube/app-ui 1.14.0

package/src/VCThemeProvider/VCThemeProvider.tsx

@@ -0,0 +1,232 @@
+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 deepmerge from "deepmerge";
+import { JetbrainsMonoFont } from "./JetbrainsMonoFont";
+
+const DEFAULT_PRIMARY = "#ff6a00";
+const DEFAULT_SECONDARY = "#009dd8";
+
+const SUCCESS = {
+    light: "#429945",
+    dark: "#58cc5c"
+}
+
+const WARNING = {
+    light: "#ccaa00",
+    dark: "#e6bf00"
+};
+
+const ERROR = {
+    light: "#aa0000",
+    dark: "#e62e2e"
+}
+
+const INFO = {
+    light: "#082480",
+    dark: "#294fcc"
+}
+
+const BACKGROUND = {
+    light: "#fffaf7",
+    dark: "#15161a"
+}
+
+const PAPER = {
+    light: "#ffffff",
+    dark: "#282b33"
+}
+
+const TEXT = {
+    light: "#282b33",
+    dark: "#fdfaf7"
+}
+
+interface ThemeContextValue {
+    mode: PaletteMode;
+    setMode: (mode: PaletteMode) => any;
+	customLogo?: CustomLogo;
+}
+
+export interface CustomLogo {
+	paddingX?: number | null;
+	paddingY?: number | null;
+	url: string;
+}
+
+const ThemeContext = createContext<ThemeContextValue>({
+    mode: "light",
+    setMode: () => void 0,
+});
+
+export interface Branding {
+	colorPrimary?: string;
+	colorSecondary?: string;
+	muiThemeOptions?: ThemeOptions;
+	logoPaddingX?: number | null;
+	logoPaddingY?: number | null;
+	logoLightUrl?: string;
+	logoDarkUrl?: string;
+}
+
+export interface VCThemeProviderProps {
+    branding?: Branding;
+}
+
+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]);
+
+    // 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]);
+
+    // 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,
+		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]);
+
+	const customLogo = useMemo(() => {
+		const logoUrl = mode == "light" ? (logoLightUrl || logoDarkUrl) : (logoDarkUrl || logoLightUrl);
+		if (logoUrl) {
+			return {
+				url: logoUrl,
+				paddingX: logoPaddingX,
+				paddingY: logoPaddingY
+			}
+		}
+	}, [logoLightUrl, logoDarkUrl, mode, logoPaddingX, logoPaddingY]);
+
+    return (
+        <ThemeProvider theme={theme}>
+            <ThemeContext.Provider value={{mode, setMode, customLogo}}>
+                <CssBaseline />
+                <RobotoFont />
+                <JetbrainsMonoFont />
+                {children}
+            </ThemeContext.Provider>
+        </ThemeProvider>
+    )
+}
+
+function sanitizeColor(color: string | undefined, fallback: string) {
+	try {
+		if (color) {
+			decomposeColor(color);
+			return color;
+		}
+	}
+	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 {mode, setMode} = value;
+    return {mode, setMode};
+}
+
+export function useCustomLogo() {
+	const value = useContext(ThemeContext);
+	if (!value) {
+		throw new Error("Could not find theme context. Are you missing a VCThemeProvider in your component tree?");
+	}
+	return value.customLogo;
+}

package/src/VCThemeProvider/code-colors.ts

@@ -0,0 +1,34 @@
+import {useTheme} from "@mui/material";
+import {green, grey, lightBlue, orange, purple, teal} from "@mui/material/colors";
+
+export const CodeColors = {
+	literal: orange,
+	number: lightBlue,
+	string: green,
+	key: purple,
+	punctuation: grey,
+	className: teal,
+} as const;
+
+type TokenType = keyof typeof CodeColors;
+
+export function useThemeShade() {
+	const theme = useTheme();
+	return theme.palette.mode == "light" ? 700 : 300;
+}
+
+export function useCodeColors() {
+	const theme = useTheme();
+	const shade = useThemeShade();
+	const colors = Object.entries(CodeColors)
+		.map(([key, value]) => [key as TokenType, value[shade]] as const)
+		.reduce((acc, [key, value]) => {
+			acc[key] = value;
+			return acc;
+		}, {} as Record<TokenType, string>);
+
+	return {
+		...colors,
+		keyword: theme.palette.primary.main,
+	};
+}

package/src/VCThemeProvider/files.d.ts

@@ -0,0 +1,2 @@
+declare module "*.woff";
+declare module "*.woff2";

package/src/VCThemeProvider/index.ts

@@ -0,0 +1,5 @@
+export * from "./code-colors";
+export * from "./JetbrainsMonoFont";
+export * from "./RobotoFont";
+export * from "./ThemeModeSwitcher";
+export * from "./VCThemeProvider";

package/src/audit/AuditChanges.tsx

@@ -0,0 +1,82 @@
+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";
+
+export function AuditChanges({data, patch}: Pick<AppAuditLogEntry, "data" | "patch">) {
+	return (
+		<Stack spacing={2}>
+			{patch && <AuditPatch patch={patch} />}
+			{data && <AuditData data={data}/>}
+		</Stack>
+	);
+}
+
+export function AuditPatch({patch}: { patch: JsonPatch }) {
+	return (
+		<List dense disablePadding>
+			{patch.map(item => (
+				<ListItem disablePadding>
+					<ListItemIcon>
+						<Chip
+							icon={getIcon(item.op)}
+							label={item.path}
+							sx={{
+								fontFamily: "Jetbrains Mono"
+							}}
+						/>
+					</ListItemIcon>
+					<ListItemText
+						primary={
+							<Box pl={1}>
+								{item.op == "replace" && (
+									<Fragment>
+										<Box sx={{color: "success"}}>
+											<Value value={item.value}/>
+										</Box>
+										<Box color="error">
+											<s>
+												<Value value={item.fromValue}/>
+											</s>
+										</Box>
+									</Fragment>
+								)}
+								{item.op == "add" && (
+									<div>
+										<Value value={item.value}/>
+									</div>
+								)}
+							</Box>
+						}
+					/>
+				</ListItem>
+			))}
+		</List>
+	);
+}
+
+export function AuditData({data}: {data: any}) {
+	return (
+		<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;
+	}
+}
+
+function Value({value}: { value: any }) {
+	return (
+		<Code>
+			{JSON.stringify(value, null, 4)}
+		</Code>
+	);
+}

package/src/audit/AuditTimeline.tsx

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

package/src/audit/AuditTimelineItem.tsx

@@ -0,0 +1,75 @@
+import React, {ReactNode} from "react";
+import {
+    TimelineConnector,
+    TimelineContent,
+    TimelineDot,
+    TimelineItem,
+    TimelineOppositeContent,
+    TimelineSeparator
+} from "@mui/lab";
+import {Box, Skeleton, Stack, Typography, useMediaQuery, useTheme} from "@mui/material";
+
+export interface AuditTimelineItemProps {
+    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 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>
+    )
+}
+
+export function AuditTimelineItemSkeleton() {
+    return (
+        <AuditTimelineItem
+            connector
+            created={<Skeleton/>}
+            actor={<Skeleton/>}
+            message={<Skeleton/>}
+            changes={<Skeleton variant="rounded" height="150px"/>}
+        />
+    );
+}

package/src/audit/index.ts

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

package/src/audit/types.ts

@@ -0,0 +1,46 @@
+
+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;
+}
+
+export type JsonPatch = Array<JsonPatchItem>;
+
+export type JsonPatchItem = AddPatch | RemovePatch | ReplacePatch | MovePatch | CopyPatch;
+
+export interface Patch {
+    path: string;
+}
+export interface AddPatch extends Patch {
+    op: "add";
+    value: any;
+}
+export interface RemovePatch extends Patch {
+    op: "remove";
+}
+export interface ReplacePatch extends Patch {
+    op: "replace";
+    value: any;
+    fromValue: any;
+}
+export interface MovePatch extends Patch {
+    op: "move";
+    from: string;
+}
+export interface CopyPatch extends Patch {
+    op: "copy";
+    from: string;
+}

package/src/breadcrumbs.tsx

@@ -0,0 +1,27 @@
+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";
+
+export function Breadcrumbs({children}: PropsWithChildren<{}>) {
+    return (
+        <MuiBreadcrumbs separator={<ChevronRightIcon fontSize="small"/>}>
+            {children}
+        </MuiBreadcrumbs>
+    )
+}
+
+export function BreadcrumbLink<
+    D extends React.ElementType = LinkTypeMap['defaultComponent'],
+    P = {}
+>(props: LinkProps<D, P>) {
+    return (
+        <Link color="inherit" {...props}/>
+    )
+}
+
+export function BreadcrumbItem({children}: PropsWithChildren<{}>) {
+    return (
+        <Typography color="textPrimary">{children}</Typography>
+    );
+}

package/src/code/Code.tsx

@@ -0,0 +1,53 @@
+import {darken, lighten, Typography, TypographyProps, useTheme} from "@mui/material";
+import React, {PropsWithChildren} from "react";
+
+export interface CodeProps {
+	variant?: TypographyProps["variant"];
+	color?: TypographyProps["color"];
+	display?: TypographyProps["display"];
+	px?: TypographyProps["px"];
+	py?: TypographyProps["py"];
+}
+
+export function Code(props: PropsWithChildren<CodeProps>) {
+	const {
+		variant,
+		color,
+		display,
+		px = "0.25em",
+		py = 0,
+		children,
+	} = props;
+	const theme = useTheme();
+
+	const backgroundColor = theme.palette.mode == "light"
+		? darken(theme.palette.background.default, 0.04)
+		: theme.palette.background.paper;
+
+	const backgroundColorOnPaper = theme.palette.mode == "light"
+		? darken(theme.palette.background.default, 0.025)
+		: lighten(theme.palette.background.paper, 0.1);
+
+	return (
+		<Typography
+			component="code"
+			display={display}
+			color={color}
+			variant={variant}
+			fontFamily="Jetbrains Mono"
+			fontSize={variant ? undefined : "inherit"}
+			px={px}
+			py={py}
+			whiteSpace="break-spaces"
+			borderRadius="0.25em"
+			sx={{
+				bgcolor: backgroundColor,
+				".MuiPaper-root &": {
+					bgcolor: backgroundColorOnPaper,
+				},
+			}}
+		>
+			{children}
+		</Typography>
+	);
+}

package/src/code/CodeBlock.tsx

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

package/src/code/Json.tsx

@@ -0,0 +1,73 @@
+import {Box} from "@mui/material";
+import jsonLexer, {LexerTokens} from "json-lexer";
+import React, {Fragment, useMemo} from "react";
+import {useCodeColors} from "../VCThemeProvider";
+
+export function Json({data}: { data: any }) {
+	const tokens = useMemo(() => {
+		const jsonString = JSON.stringify(data, null, 4);
+		return detectKeys(jsonLexer(jsonString));
+	}, [data]);
+
+	const colors = useCodeColors();
+
+	return (
+		<Fragment>
+			{tokens.map(({type, value, raw}) => {
+				switch (type) {
+					case "punctuator":
+						return raw;
+					case "whitespace":
+						return raw;
+					case "literal":
+						return <Box component="span" color={colors.literal}>{raw}</Box>;
+					case "number":
+						return <Box component="span" color={colors.number}>{raw}</Box>;
+					case "string":
+						return <Box component="span" color={colors.string}>{raw}</Box>;
+					case "key":
+						return <Box component="span" color={colors.key}>{value}</Box>;
+				}
+			})}
+		</Fragment>
+	);
+}
+
+type NodeType = "array" | "object";
+
+function detectKeys(tokens: LexerTokens) {
+	const tree: NodeType[] = [];
+	let nextStringIsKey = false;
+
+	return tokens.map(token => {
+		if (token.type == "string" && nextStringIsKey) {
+			return {
+				...token,
+				type: "key",
+			};
+		}
+		if (token.type == "punctuator") {
+			switch (token.value) {
+				case "{":
+					tree.push("object");
+					nextStringIsKey = true;
+					break;
+				case "[":
+					tree.push("array");
+					break;
+				case "}":
+				case "]":
+					tree.pop();
+					nextStringIsKey = tree[tree.length - 1] == "object";
+					break;
+				case ":":
+					nextStringIsKey = false;
+					break;
+				case ",":
+					nextStringIsKey = tree[tree.length - 1] == "object";
+					break;
+			}
+		}
+		return token;
+	});
+}

package/src/code/index.ts

@@ -0,0 +1,3 @@
+export * from "./Code";
+export * from "./CodeBlock";
+export * from "./Json";