@variocube/app-ui 1.14.0

package/src/help/HelpDrawer.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import {Drawer, Grid, IconButton} from "@mui/material";
+import {useHelpSettingsContext} from "./HelpSettingsContext";
+import {useCallback, useMemo} from "react";
+import {Close, OpenInNew} from "@mui/icons-material";
+
+export const buildHelpDrawerUrl = (selectedHelpAnchor = "", selectedHelpLanguage = "", selectedHelpPage = "", baseUrl: string) => {
+    let extraAnchor = selectedHelpAnchor ? `#${selectedHelpAnchor}` : "";
+    let extraLanguage = selectedHelpLanguage ? `/${selectedHelpLanguage}` : "";
+    return `${baseUrl}${selectedHelpPage}${extraLanguage}${extraAnchor}`;
+}
+
+export function HelpDrawer() {
+    const {baseUrl, selectedHelpPage: selectedHelpPage, clearSelectedHelpPage: clearSelectedHelpPage, 
+        selectedHelpAnchor : selectedHelpAnchor, clearSelectedHelpAnchor: clearSelectedHelpAnchor,
+        selectedHelpLanguage : selectedHelpLanguage, clearSelectedHelpLanguage: clearSelectedHelpLanguage} = useHelpSettingsContext();
+
+    const open = useMemo<boolean>(() => Boolean(selectedHelpPage), [selectedHelpPage, selectedHelpAnchor, selectedHelpLanguage]);
+    const url = useMemo<string>(() => {
+        if(selectedHelpPage) {
+            return buildHelpDrawerUrl(selectedHelpAnchor,selectedHelpLanguage, selectedHelpPage, baseUrl);
+        }else {
+            return `${baseUrl}`;
+        }
+    }, [baseUrl, selectedHelpPage, selectedHelpLanguage, selectedHelpAnchor]);
+
+    const iframe = React.useRef<HTMLIFrameElement>(null);
+
+    const handleOpenInNew = useCallback(() => {
+        window.open(url, url);
+        clearSelectedHelpPage();
+        clearSelectedHelpLanguage();
+        clearSelectedHelpAnchor();
+    }, [url, clearSelectedHelpPage]);
+
+    return (
+        <Drawer open={open} anchor="right" variant="persistent">
+            <Grid container sx={{width: "300px", height: "100%"}}>
+                <Grid item xs={12}>
+                    <Grid container>
+                        <Grid item style={{flexGrow: 1}}>
+                            <IconButton size="small" onClick={() => clearSelectedHelpPage()}>
+                                <Close />
+                            </IconButton>
+                        </Grid>
+                        <Grid item>
+                            <IconButton size="small" onClick={() => handleOpenInNew()}>
+                                <OpenInNew />
+                            </IconButton>
+                        </Grid>
+                    </Grid>
+                </Grid>
+                {open &&
+                    <Grid item xs={12} sx={{height: "100%"}}>
+                        <iframe onLoad={()=>{
+                            if (selectedHelpAnchor){
+                                iframe.current?.contentWindow?.postMessage(selectedHelpAnchor, "*");
+                            }
+                        }} ref={iframe} src={url} style={{border: 0, overflow: "scroll", height: "100%", width: "100%"}}/>
+                    </Grid>
+                }
+            </Grid>
+        </Drawer>
+    );
+}

package/src/help/HelpSettingsContext.tsx

@@ -0,0 +1,178 @@
+import {Button, Dialog, DialogActions, DialogTitle} from "@mui/material";
+import * as React from "react";
+import {
+	createContext,
+	Fragment,
+	PropsWithChildren,
+	ReactNode,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useState,
+} from "react";
+const semver = require("semver");
+const semverDiff = require("semver/functions/diff");
+
+interface HelpSettingsContextData {
+	baseUrl: string;
+	apiUrl?: string;
+	selectedHelpPage?: string;
+	setSelectedHelpPage: (page: string) => void;
+	clearSelectedHelpPage: () => void;
+	selectedHelpAnchor?: string;
+	setSelectedHelpAnchor: (anchor: string) => void;
+	clearSelectedHelpAnchor: () => void;
+
+	selectedHelpLanguage?: string;
+	setSelectedHelpLanguage: (language: string) => void;
+	clearSelectedHelpLanguage: () => void;
+}
+
+const emptyContext: HelpSettingsContextData = {
+	baseUrl: "",
+	setSelectedHelpPage: (page: string) =>
+		console.error(
+			`Empty context should not call setSelectedHelpPage(${page}), you most likely do not have <HelpSettingsContextProvider/> in your component tree.`,
+		),
+	clearSelectedHelpPage: () =>
+		console.error(
+			`Empty context should not call clearSelectedHelpPage(), you most likely do not have <HelpSettingsContextProvider/> in your component tree.`,
+		),
+	setSelectedHelpAnchor: (anchor: string) =>
+		console.error(
+			`Empty context should not call setSelectedHelpAnchor(${anchor}), you most likely do not have <HelpSettingsContextProvider/> in your component tree.`,
+		),
+	clearSelectedHelpAnchor: () =>
+		console.error(
+			`Empty context should not call clearSelectedHelpAnchor(), you most likely do not have <HelpSettingsContextProvider/> in your component tree.`,
+		),
+	setSelectedHelpLanguage: (language: string) =>
+		console.error(
+			`Empty context should not call setSelectedHelpLanguage(${language}), you most likely do not have <HelpSettingsContextProvider/> in your component tree.`,
+		),
+	clearSelectedHelpLanguage: () =>
+		console.error(
+			`Empty context should not call clearSelectedHelpLanguage(), you most likely do not have <HelpSettingsContextProvider/> in your component tree.`,
+		),
+};
+
+const HelpSettingsContext = createContext(emptyContext);
+
+interface HelpSettingsContextProviderProps {
+	baseUrl: string;
+	apiUrl?: string;
+	localStorageVar?: string;
+	changeLogUrl?: string;
+	currentVersion?: string;
+	dialogTitle?: string;
+	dialogContent?: ReactNode;
+}
+
+export function HelpSettingsContextProvider(
+	{baseUrl, apiUrl, localStorageVar, changeLogUrl, currentVersion, dialogTitle, dialogContent, children}:
+		PropsWithChildren<
+			HelpSettingsContextProviderProps
+		>,
+) {
+	const [selectedHelpPage, setSelectedHelpPage] = useState<string | undefined>();
+	const [selectedHelpAnchor, setSelectedHelpAnchor] = useState<string | undefined>();
+	const [selectedHelpLanguage, setSelectedHelpLanguage] = useState<string | undefined>();
+
+	const handleSetSelectedHelpPage = useCallback((helpPage: string) => {
+		setSelectedHelpPage(helpPage);
+	}, []);
+
+	const [openDialog, setOpenDialog] = useState<boolean>(false);
+
+	const clearSelectedHelpPage = useCallback(() => {
+		setSelectedHelpPage(undefined);
+	}, []);
+
+	const handleSetSelectedHelpAnchor = useCallback((helpAnchor: string) => {
+		setSelectedHelpAnchor(helpAnchor);
+	}, []);
+
+	const clearSelectedHelpAnchor = useCallback(() => {
+		setSelectedHelpAnchor(undefined);
+	}, []);
+
+	const handleSetSelectedHelpLanguage = useCallback((helpLanguage: string) => {
+		setSelectedHelpLanguage(helpLanguage);
+	}, []);
+
+	const clearSelectedHelpLanguage = useCallback(() => {
+		setSelectedHelpLanguage(undefined);
+	}, []);
+
+	const defaultContext = useMemo<HelpSettingsContextData>(() => ({
+		baseUrl,
+		apiUrl,
+		selectedHelpPage: selectedHelpPage,
+		setSelectedHelpPage: handleSetSelectedHelpPage,
+		clearSelectedHelpPage: clearSelectedHelpPage,
+		selectedHelpAnchor: selectedHelpAnchor,
+		setSelectedHelpAnchor: handleSetSelectedHelpAnchor,
+		clearSelectedHelpAnchor: clearSelectedHelpAnchor,
+		selectedHelpLanguage: selectedHelpLanguage,
+		setSelectedHelpLanguage: handleSetSelectedHelpLanguage,
+		clearSelectedHelpLanguage: clearSelectedHelpLanguage,
+	}), [
+		baseUrl,
+		apiUrl,
+		selectedHelpPage,
+		handleSetSelectedHelpPage,
+		clearSelectedHelpPage,
+		selectedHelpAnchor,
+		handleSetSelectedHelpAnchor,
+		clearSelectedHelpAnchor,
+		selectedHelpLanguage,
+		handleSetSelectedHelpLanguage,
+		clearSelectedHelpLanguage,
+	]);
+
+	useEffect(() => {
+		if (changeLogUrl && localStorageVar && currentVersion) {
+			const lastSeenVersion = localStorage.getItem(localStorageVar);
+			if (
+				lastSeenVersion
+				&& semver.lt(lastSeenVersion, currentVersion)
+				&& ["major", "minor"].includes(semverDiff(lastSeenVersion, currentVersion) as string)
+			) {
+				setOpenDialog(true);
+			} else {
+				localStorage.setItem(localStorageVar, currentVersion);
+			}
+		}
+	}, []);
+
+	function handleOk() {
+		if (localStorageVar && currentVersion) {
+			localStorage.setItem(localStorageVar, currentVersion);
+		}
+		setOpenDialog(false);
+	}
+
+	return (
+		<Fragment>
+			<HelpSettingsContext.Provider value={defaultContext}>
+				{children}
+			</HelpSettingsContext.Provider>
+			<Dialog open={openDialog} onClose={() => setOpenDialog(false)} fullWidth>
+				<DialogTitle>
+					{dialogTitle}
+				</DialogTitle>
+
+				{dialogContent}
+
+				<DialogActions>
+					<Button variant="outlined" onClick={handleOk}>OK</Button>
+				</DialogActions>
+			</Dialog>
+		</Fragment>
+	);
+}
+
+export function useHelpSettingsContext(): HelpSettingsContextData {
+	return useContext<HelpSettingsContextData>(HelpSettingsContext);
+}

package/src/help/index.ts

@@ -0,0 +1,3 @@
+export {HelpSettingsContextProvider, useHelpSettingsContext} from "./HelpSettingsContext";
+export {HelpButton} from "./HelpButton";
+export {HelpDrawer} from "./HelpDrawer";

package/src/icons.ts

@@ -0,0 +1,23 @@
+export {default as MenuIcon} from "@mui/icons-material/Menu";
+export {default as FilterListIcon} from "@mui/icons-material/FilterList";
+export {default as TuningIcon} from "@mui/icons-material/Tune";
+export {default as CategoryIcon} from '@mui/icons-material/Category';
+export {default as ChevronRightIcon} from "@mui/icons-material/ChevronRight";
+export {default as ErrorIcon} from "@mui/icons-material/Error";
+export {default as SuccessIcon} from "@mui/icons-material/Done";
+export {default as SaveIcon} from "@mui/icons-material/SaveOutlined";
+export {default as CloseIcon} from '@mui/icons-material/Close';
+export {default as MoveUpIcon} from "@mui/icons-material/ArrowUpward";
+export {default as MoveDownIcon} from "@mui/icons-material/ArrowDownward";
+export {default as RemoveIcon} from "@mui/icons-material/Remove";
+export {default as AddIcon} from "@mui/icons-material/Add";
+
+export {default as MoveUpCircleIcon} from "@mui/icons-material/ArrowCircleUp";
+export {default as MoveDownCircleIcon} from "@mui/icons-material/ArrowCircleDown";
+export {default as RemoveCircleIcon} from "@mui/icons-material/RemoveCircle";
+export {default as AddCircleIcon} from "@mui/icons-material/AddCircle";
+
+export {default as SearchIcon} from "@mui/icons-material/Search";
+export {default as AuditIcon} from "@mui/icons-material/TrackChanges";
+export {default as CreateIcon} from "@mui/icons-material/Create";
+export {default as UpdateIcon} from "@mui/icons-material/Update";

package/src/index.ts

@@ -0,0 +1,34 @@
+export * from "./AppShell";
+export * from "./audit";
+export * from "./breadcrumbs";
+export * from "./code";
+export * from "./confirm";
+export * from "./container";
+export * from "./content-table";
+export * from "./country";
+export * from "./cube";
+export * from "./data-table";
+export * from "./date-pickers";
+export * from "./ErrorAlert";
+export * from "./fetch";
+export * from "./filter";
+export * from "./formats";
+export * from "./forms";
+export * from "./help";
+export * from "./icons";
+export * from "./Input";
+export * from "./LanguageSwitcher";
+export * from "./layout";
+export * from "./list";
+export * from "./localization";
+export * from "./logo";
+export * from "./logo";
+export * from "./Paging";
+export * from "./splash";
+export * from "./spring";
+export * from "./storage";
+export * from "./tabs";
+export * from "./temporal";
+export * from "./utils";
+export * from "./VCThemeProvider";
+export * from "./view";

package/src/layout/ErrorBoundary.tsx

@@ -0,0 +1,232 @@
+import React, {Component, ErrorInfo, Fragment} from "react";
+import {Accordion, AccordionDetails, AccordionSummary, Box, Typography} from "@mui/material";
+import {NotFoundSvg} from "./NotFoundSvg";
+import ErrorStackParser from "error-stack-parser";
+import {ExpandMore} from "@mui/icons-material";
+
+type ErrorContext = {
+    url: string,
+    referrer: string,
+    userAgent: string,
+    error: any
+}
+
+type StackTrace = {
+    file?: string,
+    lineNumber?: number,
+    columnNumber?: number,
+    method?: string
+}
+
+type BugsnagConfig = {
+    /**
+     * API Key provided by Bugsnag
+     */
+    apiKey: string,
+
+    /**
+     * Method to retrieve user data such as Id, Name or Email
+     */
+    getUser: () => { id?: string, name?: string, email?: string },
+}
+
+type Props = {
+    /**
+     * List of storage key patterns which values should be anonymized
+     */
+    anonymizeStorageKeyPatterns?: string[],
+
+    /**
+     * Bugsnag configuration
+     */
+    bugsnagConfig?: BugsnagConfig,
+}
+
+type States = {
+    hasError: boolean
+}
+
+const codeSx = {
+    background: '#263238',
+    color: '#fff',
+    fontSize: '0.8rem',
+    padding: 1,
+    borderRadius: '3px',
+    overflowX: 'auto',
+    width: '100%'
+};
+
+export class ErrorBoundary extends Component<Props, States> {
+
+    constructor(props: any) {
+        super(props);
+        this.state = {
+            hasError: false
+        }
+    }
+
+    private static errorContext?: ErrorContext;
+
+    /**
+     * This lifecycle is invoked after an error has been thrown by a descendant component.
+     * It receives the error that was thrown as a parameter and should return a value to update state.
+     * @param error
+     * @doc https://reactjs.org/docs/react-component.html#static-getderivedstatefromerror
+     */
+    static getDerivedStateFromError(error: any) {
+        // Store error context
+        ErrorBoundary.errorContext = {
+            url: location.href,
+            referrer: document.referrer,
+            userAgent: navigator.userAgent,
+            error
+        };
+        // Update state so the next render will show the fallback UI
+        return { hasError: true };
+    }
+
+    componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+        console.error('An error occurred', { error, errorInfo });
+    }
+
+    async reportBugsnag() {
+        if (!this.props.bugsnagConfig) {
+            console.warn('Bugsnag not configured. Skip reporting to bugsnag.');
+            return;
+        }
+        if (!ErrorBoundary.errorContext) {
+            console.warn('Error context not specified. Cannot report to bugsnag.');
+            return;
+        }
+        const {bugsnagConfig: {apiKey, getUser}} = this.props;
+        const {error, url, referrer, userAgent} = ErrorBoundary.errorContext;
+        const stackTraces: StackTrace[] = ErrorStackParser.parse(error)
+            .map(({fileName: file, lineNumber, columnNumber, functionName: method}) => ({
+                file,
+                lineNumber,
+                columnNumber,
+                method
+            }));
+        const payload = {
+            apiKey,
+            payloadVersion: '5',
+            notifier: {
+                name: "variocube app-ui",
+                version: '1.0.11',
+                url: 'https://github.com'
+            },
+            events: [
+                {
+                    exceptions: [{
+                        errorClass: error.message,
+                        stacktrace: stackTraces,
+                        type: 'browserjs'
+                    }],
+                    request: {
+                        httpMethod: '',
+                        url,
+                        referrer
+                    },
+                    user: getUser(),
+                    metaData: {
+                        userAgent: { userAgent },
+                        sessionStorage: sessionStorage,
+                        localStorage: localStorage
+                    }
+                }
+            ]
+        };
+
+        try {
+            const response = await fetch('https://notify.bugsnag.com/', {
+                method: 'POST',
+                body: JSON.stringify(payload)
+            });
+            if (response.ok) {
+                console.info('successfully reported error to bugsnag');
+            }
+        } catch (error) {
+            console.log('failed to report error to bugsnag', error)
+        }
+    }
+
+    renderStorage(storage: Storage) {
+        const {anonymizeStorageKeyPatterns= []} = this.props;
+        const kv = [];
+        for (let i = 0; i < storage.length; i++) {
+            const key = storage.key(i);
+            if (key) {
+                let value = storage.getItem(key);
+                if (value && anonymizeStorageKeyPatterns.find(p => key.indexOf(p) > -1)) {
+                    value = "*****";
+                }
+                kv.push({ key, value });
+            }
+        }
+        if (kv.length === 0) return <Box component="code" sx={{ ...codeSx, mb: 2 }}>NONE</Box>
+        return kv
+            .sort((x, y) => x.key.localeCompare(y.key))
+            .map((o, i) => {
+                let value = o.value;
+                try {
+                    value = JSON.stringify(JSON.parse(value as any), null, 3);
+                } catch (error) {
+                    console.log('cannot parse value', error)
+                }
+                return (
+                    <Fragment key={'kv-' + i} >
+                        <Typography variant="caption">{o.key}</Typography>
+                        <Box component="code" sx={{ ...codeSx, mb: 2 }}>
+                            {value}
+                        </Box>
+                    </Fragment>
+                )
+            })
+    }
+
+    render() {
+        if (!this.state.hasError) return this.props.children;
+
+        this.reportBugsnag()
+            .catch(err => console.error('failed to report to bugsnag', err));
+
+        const {errorContext: { error, url, referrer, userAgent } = {}} = ErrorBoundary;
+        return (
+            <Box p={3}>
+                <NotFoundSvg style={{ width: '100%', maxHeight: 300 }} />
+                <Box p={4} />
+                <Typography variant="h2" align="center">Oops, something went wrong!</Typography>
+                <Box p={2} />
+                <Accordion>
+                    <AccordionSummary expandIcon={<ExpandMore />}>
+                        <Typography>{error?.message}</Typography>
+                    </AccordionSummary>
+                    <AccordionDetails
+                        sx={{
+                            display: 'flex',
+                            flexDirection: 'column'
+                        }}
+                    >
+                        <Typography variant="overline"><strong>URL</strong></Typography>
+                        <Box component="code" sx={codeSx}>{url}</Box>
+                        <Box my={1} />
+                        <Typography variant="overline"><strong>Referrer</strong></Typography>
+                        <Box component="code" sx={codeSx}>{referrer}</Box>
+                        <Box my={1} />
+                        <Typography variant="overline"><strong>User-Agent</strong></Typography>
+                        <Box component="code" sx={codeSx}>{userAgent}</Box>
+                        <Box my={1} />
+                        <Typography variant="overline"><strong>Trace</strong></Typography>
+                        <Box component="code" sx={codeSx}>{error?.stack}</Box>
+                        <Box my={1} />
+                        <Typography variant="overline"><strong>Session Storage</strong></Typography>
+                        {this.renderStorage(sessionStorage)}
+                        <Box my={1} />
+                        <Typography variant="overline"><strong>Local Storage</strong></Typography>
+                        {this.renderStorage(localStorage)}
+                    </AccordionDetails>
+                </Accordion>
+            </Box>
+        )
+    }
+}

package/src/layout/NotFound.tsx

@@ -0,0 +1,51 @@
+import {Button, Grid, Stack, Typography} from "@mui/material";
+import {ReactElement} from "react";
+import {NotFoundSvg} from "./NotFoundSvg";
+import {ContainerLayout} from "../container";
+import React from "react";
+
+interface NotFoundProps {
+  svg?: ReactElement;
+  errorMsg?: string;
+  pathMsg?: string;
+  backToHomeMsg?: string;
+}
+
+export function NotFound(props: NotFoundProps) {
+  const {svg, errorMsg,pathMsg, backToHomeMsg} = props;
+
+  const path = window.location.pathname;
+
+  const defaultErrorMsg = "404: Not Found";
+  const defaultPathMsg = "We could not find the following path:";
+  const defaultBackToHomeMsg = "Back to Home";
+
+  return (
+    <ContainerLayout>
+      <Stack
+        direction="column"
+        alignItems="center"
+      >
+        {!svg &&
+            <NotFoundSvg style={{ width: '100%', maxHeight: 300 }} />
+        }
+        {svg &&
+          svg
+        }
+      </Stack>
+      <Grid container spacing={6}>
+        <Grid item xs={12}>
+          <Typography variant="h3" align="center">{errorMsg != "" ? errorMsg : defaultErrorMsg}</Typography>
+          <Typography variant="body1" align="center">{pathMsg != "" ? pathMsg : defaultPathMsg}</Typography>
+          <Typography variant="body1" align="center">{path}</Typography>
+
+        </Grid>
+        <Grid item xs={12}>
+          <Typography variant="body1" align="center">
+            <Button href="/">{backToHomeMsg != "" ? backToHomeMsg : defaultBackToHomeMsg}</Button>
+          </Typography>
+        </Grid>
+      </Grid>
+    </ContainerLayout>
+  );
+}