@j2inn/fin5-ui-utils 8.2.0 → 9.0.0-beta.0

package/dist_es/react/app/Fin5AppRootStore.js

@@ -1,111 +1,111 @@
-/*
- * Copyright (c) 2022, J2 Innovations. All Rights Reserved
- */
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { action, makeAutoObservable, observable } from 'mobx';
-/**
- * An application root store for use with FIN5.
- */
-export class Fin5AppRootStore {
-    project = '';
-    sidebarOpen = false;
-    locale = '';
-    allLocales = [];
-    target = '';
-    targetSidebar = '';
-    currentUser;
-    get app() {
-        return undefined;
-    }
-    get sidebar() {
-        return undefined;
-    }
-    apps = [];
-    history = {
-        state: {},
-        pushState: (state) => {
-            this.history.state = state;
-        },
-        replaceState: (state) => {
-            this.history.state = state;
-        },
-    };
-    historySidebar = {
-        state: {},
-        pushState: (state) => {
-            this.historySidebar.state = state;
-        },
-        replaceState: (state) => {
-            this.historySidebar.state = state;
-        },
-    };
-    setTarget(target) {
-        this.target = target;
-    }
-    setTargetSidebar(targetSidebar) {
-        this.targetSidebar = targetSidebar;
-    }
-    constructor() {
-        makeAutoObservable(this, {
-            currentUser: observable.ref,
-            apps: observable.ref,
-        });
-    }
-    openAppInNewWindow() { }
-    open(appId, state) {
-        if (this.hasAppAccess(appId)) {
-            if (state) {
-                this.history.pushState(state);
-            }
-        }
-    }
-    openSidebar() { }
-    postAppMessage() { }
-    registerSidebars() { }
-    unregisterSidebars() { }
-    registerQuicklinks() { }
-    unregisterQuicklinks() { }
-    hasAppAccess = (appId) => {
-        // For FIN5, an operator only has readonly app level access.
-        const user = this.currentUser;
-        if (user) {
-            if (!user.has('userRole')) {
-                return false;
-            }
-            if (user.get('userRole')?.value === 'su') {
-                return true;
-            }
-            // if no appAccess is present, then all apps are granted
-            if (user.has('appAccess')) {
-                const appAccess = user.get('appAccess')?.value;
-                const apps = appAccess?.split(',');
-                return apps?.includes(appId) ?? false;
-            }
-            else {
-                return true;
-            }
-        }
-        return false;
-    };
-    hasSidebar() {
-        return false;
-    }
-}
-__decorate([
-    observable
-], Fin5AppRootStore.prototype, "target", void 0);
-__decorate([
-    observable
-], Fin5AppRootStore.prototype, "targetSidebar", void 0);
-__decorate([
-    action
-], Fin5AppRootStore.prototype, "setTarget", null);
-__decorate([
-    action
-], Fin5AppRootStore.prototype, "setTargetSidebar", null);
+/*
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { action, makeAutoObservable, observable } from 'mobx';
+/**
+ * An application root store for use with FIN5.
+ */
+export class Fin5AppRootStore {
+    project = '';
+    sidebarOpen = false;
+    locale = '';
+    allLocales = [];
+    target = '';
+    targetSidebar = '';
+    currentUser;
+    get app() {
+        return undefined;
+    }
+    get sidebar() {
+        return undefined;
+    }
+    apps = [];
+    history = {
+        state: {},
+        pushState: (state) => {
+            this.history.state = state;
+        },
+        replaceState: (state) => {
+            this.history.state = state;
+        },
+    };
+    historySidebar = {
+        state: {},
+        pushState: (state) => {
+            this.historySidebar.state = state;
+        },
+        replaceState: (state) => {
+            this.historySidebar.state = state;
+        },
+    };
+    setTarget(target) {
+        this.target = target;
+    }
+    setTargetSidebar(targetSidebar) {
+        this.targetSidebar = targetSidebar;
+    }
+    constructor() {
+        makeAutoObservable(this, {
+            currentUser: observable.ref,
+            apps: observable.ref,
+        });
+    }
+    openAppInNewWindow() { }
+    open(appId, state) {
+        if (this.hasAppAccess(appId)) {
+            if (state) {
+                this.history.pushState(state);
+            }
+        }
+    }
+    openSidebar() { }
+    postAppMessage() { }
+    registerSidebars() { }
+    unregisterSidebars() { }
+    registerQuicklinks() { }
+    unregisterQuicklinks() { }
+    hasAppAccess = (appId) => {
+        // For FIN5, an operator only has readonly app level access.
+        const user = this.currentUser;
+        if (user) {
+            if (!user.has('userRole')) {
+                return false;
+            }
+            if (user.get('userRole')?.value === 'su') {
+                return true;
+            }
+            // if no appAccess is present, then all apps are granted
+            if (user.has('appAccess')) {
+                const appAccess = user.get('appAccess')?.value;
+                const apps = appAccess?.split(',');
+                return apps?.includes(appId) ?? false;
+            }
+            else {
+                return true;
+            }
+        }
+        return false;
+    };
+    hasSidebar() {
+        return false;
+    }
+}
+__decorate([
+    observable
+], Fin5AppRootStore.prototype, "target", void 0);
+__decorate([
+    observable
+], Fin5AppRootStore.prototype, "targetSidebar", void 0);
+__decorate([
+    action
+], Fin5AppRootStore.prototype, "setTarget", null);
+__decorate([
+    action
+], Fin5AppRootStore.prototype, "setTargetSidebar", null);
 //# sourceMappingURL=Fin5AppRootStore.js.map

package/dist_es/react/app/Fin5AppRootStore.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fin5AppRootStore.js","sourceRoot":"","sources":["../../../src/react/app/Fin5AppRootStore.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Fin5AppRootStore.js","sourceRoot":"","sources":["../../../src/react/app/Fin5AppRootStore.ts"],"names":[],"mappings":"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"}

package/dist_es/react/components/ErrorBoundary.d.ts

@@ -1,57 +1,57 @@
-import React, { ErrorInfo, ReactNode } from 'react';
-/**
- * An error boundary can work at the global level (where something really screws up)
- * or an an app level (where the error is captured just for the running application).
- */
-export declare const enum ErrorBoundaryMode {
-    global = "global",
-    app = "app"
-}
-/**
- * The properties for an error boundary.
- */
-interface ErrorBoundaryProps {
-    /**
-     * The associated application id.
-     */
-    appId?: string;
-    /**
-     * The error mode.
-     */
-    mode: ErrorBoundaryMode;
-    /**
-     * Optional callback to display a report dialog.
-     */
-    showReportDialog?: () => void;
-    /**
-     * Optional callback used to capture the error.
-     */
-    onError?: (error: Error) => void;
-    /**
-     * Child components.
-     */
-    children?: React.ReactNode;
-}
-/**
- * The state for an error boundary.
- */
-interface ErrorBoundryState {
-    /**
-     * The last captured error.
-     */
-    error?: Error;
-}
-/**
- * A common error boundary used to capture errors.
- */
-export declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundryState> {
-    state: {
-        error?: Error;
-    };
-    componentDidCatch(error: Error, info: ErrorInfo): void;
-    static getDerivedStateFromError(error: Error): {
-        error: Error;
-    };
-    render(): ReactNode | JSX.Element;
-}
-export {};
+import React, { ErrorInfo, ReactNode } from 'react';
+/**
+ * An error boundary can work at the global level (where something really screws up)
+ * or an an app level (where the error is captured just for the running application).
+ */
+export declare const enum ErrorBoundaryMode {
+    global = "global",
+    app = "app"
+}
+/**
+ * The properties for an error boundary.
+ */
+interface ErrorBoundaryProps {
+    /**
+     * The associated application id.
+     */
+    appId?: string;
+    /**
+     * The error mode.
+     */
+    mode: ErrorBoundaryMode;
+    /**
+     * Optional callback to display a report dialog.
+     */
+    showReportDialog?: () => void;
+    /**
+     * Optional callback used to capture the error.
+     */
+    onError?: (error: Error) => void;
+    /**
+     * Child components.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * The state for an error boundary.
+ */
+interface ErrorBoundryState {
+    /**
+     * The last captured error.
+     */
+    error?: Error;
+}
+/**
+ * A common error boundary used to capture errors.
+ */
+export declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundryState> {
+    state: {
+        error?: Error;
+    };
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    static getDerivedStateFromError(error: Error): {
+        error: Error;
+    };
+    render(): ReactNode | JSX.Element;
+}
+export {};

package/dist_es/react/components/ErrorBoundary.js

@@ -1,124 +1,124 @@
-/*
- * Copyright (c) 2022, J2 Innovations. All Rights Reserved
- */
-import React, { useState } from 'react';
-import { Button, Checkbox, Divider, Message, Container, ColorVals, } from '@j2inn/ui';
-import { usei18n } from '@j2inn/utils';
-import { createUseStyles, useTheme } from 'react-jss';
-const boundryStyles = createUseStyles((theme) => ({
-    errorBoundry: {
-        backgroundColor: theme.bodyBg,
-        flex: `1 1 auto`,
-    },
-    boundryContainer: {
-        margin: '0 auto',
-        flex: `1 1 auto`,
-        padding: `2rem`,
-        maxWidth: 1024,
-        backgroundColor: theme.bgColor,
-        [`& h1, & h3`]: {
-            paddingBottom: `1rem`,
-        },
-    },
-    errorDetails: {
-        [`& pre`]: {
-            overflow: 'auto',
-            marginTop: '1rem',
-            backgroundColor: ColorVals.Black,
-            color: ColorVals.White,
-            padding: '0.3rem',
-        },
-    },
-}));
-function get(i18n, key, fallback) {
-    return i18n.has(key) ? i18n.get(key) : fallback;
-}
-/**
- * Format an error message into something more useful for the clipboard.
- */
-function formatErrorMessage(error, appId) {
-    return JSON.stringify({
-        timestamp: new Date().toISOString(),
-        appId: appId ?? '',
-        location: location.href,
-        navigator: {
-            cookieEnabled: navigator.cookieEnabled,
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            deviceMemory: navigator.deviceMemory,
-            language: navigator.language,
-            languages: navigator.languages,
-            onLine: navigator.onLine,
-            userAgent: navigator.userAgent,
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            userAgentData: navigator.userAgentData,
-            vendor: navigator.vendor,
-        },
-        error: String(error.stack),
-    }, null, 2);
-}
-/**
- * Shows the internal error details to a user.
- */
-const ErrorDetails = ({ showDetails, setShowDetails, error, appId, }) => {
-    const i18n = usei18n();
-    const classes = boundryStyles();
-    const theme = useTheme();
-    const copyToClipboard = () => {
-        navigator.clipboard.writeText(formatErrorMessage(error, appId));
-        Message.success(theme, get(i18n, 'finUi.errorBoundary.copiedErrorToClipboard', 'Copied error to clipboard'));
-    };
-    return (React.createElement("div", { className: classes.errorDetails },
-        React.createElement(Checkbox, { onChange: (e) => {
-                setShowDetails(e.target.checked);
-            }, defaultChecked: showDetails, value: showDetails }, get(i18n, 'finUi.errorBoundary.showDetails', 'Show details')),
-        showDetails && (React.createElement(React.Fragment, null,
-            React.createElement("pre", null, error.stack),
-            React.createElement(Container, { horizontal: true, middle: true, right: true },
-                React.createElement(Button, { onClick: copyToClipboard }, get(i18n, 'finUi.errorBoundary.copyToClipboard', 'Copy to clipboard')))))));
-};
-/**
- * The inner error boundary component. This is required so
- * we can use hooks that can't be used in a normal class component.
- */
-const ErrorBoundaryInner = ({ error, mode, appId, showReportDialog, }) => {
-    const i18n = usei18n();
-    const [showDetails, setShowDetails] = useState(true);
-    const classes = boundryStyles();
-    const title = `finUi.errorBoundary.${mode}.title`;
-    const appName = `${appId}.name`;
-    const header = get(i18n, title, mode === 'global' ? 'Error' : 'Application error') +
-        (appId ? `: ${get(i18n, appName, appName)}` : '');
-    const continueMsg = get(i18n, `finUi.errorBoundary.${mode}.continue`, mode === 'global'
-        ? 'To continue, please reload or navigate to the home page.'
-        : 'To continue, please reload, navigate to the home page or another application.');
-    return (React.createElement(Container, { vertical: true, top: true, center: true, className: classes.errorBoundry },
-        React.createElement("div", { className: classes.boundryContainer, style: { gap: `1rem` } },
-            React.createElement("h1", null, header),
-            React.createElement("h3", null, get(i18n, 'finUi.errorBoundary.description', 'The application has encountered an error when trying to display some content.')),
-            React.createElement("p", null, continueMsg),
-            React.createElement("div", null,
-                React.createElement(ErrorDetails, { showDetails: showDetails, setShowDetails: setShowDetails, error: error, appId: appId })),
-            React.createElement(Divider, null),
-            React.createElement(Container, { horizontal: true, middle: true, left: true, style: { gap: `1rem` } },
-                React.createElement(Button, { onClick: () => window.location.reload(), type: 'primary' }, get(i18n, 'finUi.common.reload', 'Reload')),
-                React.createElement(Button, { onClick: () => window.location.assign('/') }, get(i18n, 'finUi.common.home', 'Home'))),
-            showReportDialog && (React.createElement("div", { style: { marginTop: `0.5rem` } },
-                React.createElement("small", { onClick: showReportDialog }, get(i18n, 'finUi.errorBoundary.additionalDetails', 'If you’d like, click here to include an additional error report to our team. Any details you provide will be helpful.')))))));
-};
-/**
- * A common error boundary used to capture errors.
- */
-export class ErrorBoundary extends React.Component {
-    state = {};
-    componentDidCatch(error, info) {
-        this.props.onError?.(error);
-        console.error(error, info);
-    }
-    static getDerivedStateFromError(error) {
-        return { error };
-    }
-    render() {
-        return this.state.error ? (React.createElement(ErrorBoundaryInner, { error: this.state.error, mode: this.props.mode, appId: this.props.appId, showReportDialog: this.props.showReportDialog })) : (this.props.children);
-    }
-}
+/*
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
+ */
+import React, { useState } from 'react';
+import { Button, Checkbox, Divider, Message, Container, ColorVals, } from '@j2inn/ui';
+import { usei18n } from '@j2inn/utils';
+import { createUseStyles, useTheme } from 'react-jss';
+const boundryStyles = createUseStyles((theme) => ({
+    errorBoundry: {
+        backgroundColor: theme.bodyBg,
+        flex: `1 1 auto`,
+    },
+    boundryContainer: {
+        margin: '0 auto',
+        flex: `1 1 auto`,
+        padding: `2rem`,
+        maxWidth: 1024,
+        backgroundColor: theme.bgColor,
+        [`& h1, & h3`]: {
+            paddingBottom: `1rem`,
+        },
+    },
+    errorDetails: {
+        [`& pre`]: {
+            overflow: 'auto',
+            marginTop: '1rem',
+            backgroundColor: ColorVals.Black,
+            color: ColorVals.White,
+            padding: '0.3rem',
+        },
+    },
+}));
+function get(i18n, key, fallback) {
+    return i18n.has(key) ? i18n.get(key) : fallback;
+}
+/**
+ * Format an error message into something more useful for the clipboard.
+ */
+function formatErrorMessage(error, appId) {
+    return JSON.stringify({
+        timestamp: new Date().toISOString(),
+        appId: appId ?? '',
+        location: location.href,
+        navigator: {
+            cookieEnabled: navigator.cookieEnabled,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            deviceMemory: navigator.deviceMemory,
+            language: navigator.language,
+            languages: navigator.languages,
+            onLine: navigator.onLine,
+            userAgent: navigator.userAgent,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            userAgentData: navigator.userAgentData,
+            vendor: navigator.vendor,
+        },
+        error: String(error.stack),
+    }, null, 2);
+}
+/**
+ * Shows the internal error details to a user.
+ */
+const ErrorDetails = ({ showDetails, setShowDetails, error, appId, }) => {
+    const i18n = usei18n();
+    const classes = boundryStyles();
+    const theme = useTheme();
+    const copyToClipboard = () => {
+        navigator.clipboard.writeText(formatErrorMessage(error, appId));
+        Message.success(theme, get(i18n, 'finUi.errorBoundary.copiedErrorToClipboard', 'Copied error to clipboard'));
+    };
+    return (React.createElement("div", { className: classes.errorDetails },
+        React.createElement(Checkbox, { onChange: (e) => {
+                setShowDetails(e.target.checked);
+            }, defaultChecked: showDetails, value: showDetails }, get(i18n, 'finUi.errorBoundary.showDetails', 'Show details')),
+        showDetails && (React.createElement(React.Fragment, null,
+            React.createElement("pre", null, error.stack),
+            React.createElement(Container, { horizontal: true, middle: true, right: true },
+                React.createElement(Button, { onClick: copyToClipboard }, get(i18n, 'finUi.errorBoundary.copyToClipboard', 'Copy to clipboard')))))));
+};
+/**
+ * The inner error boundary component. This is required so
+ * we can use hooks that can't be used in a normal class component.
+ */
+const ErrorBoundaryInner = ({ error, mode, appId, showReportDialog, }) => {
+    const i18n = usei18n();
+    const [showDetails, setShowDetails] = useState(true);
+    const classes = boundryStyles();
+    const title = `finUi.errorBoundary.${mode}.title`;
+    const appName = `${appId}.name`;
+    const header = get(i18n, title, mode === 'global' ? 'Error' : 'Application error') +
+        (appId ? `: ${get(i18n, appName, appName)}` : '');
+    const continueMsg = get(i18n, `finUi.errorBoundary.${mode}.continue`, mode === 'global'
+        ? 'To continue, please reload or navigate to the home page.'
+        : 'To continue, please reload, navigate to the home page or another application.');
+    return (React.createElement(Container, { vertical: true, top: true, center: true, className: classes.errorBoundry },
+        React.createElement("div", { className: classes.boundryContainer, style: { gap: `1rem` } },
+            React.createElement("h1", null, header),
+            React.createElement("h3", null, get(i18n, 'finUi.errorBoundary.description', 'The application has encountered an error when trying to display some content.')),
+            React.createElement("p", null, continueMsg),
+            React.createElement("div", null,
+                React.createElement(ErrorDetails, { showDetails: showDetails, setShowDetails: setShowDetails, error: error, appId: appId })),
+            React.createElement(Divider, null),
+            React.createElement(Container, { horizontal: true, middle: true, left: true, style: { gap: `1rem` } },
+                React.createElement(Button, { onClick: () => window.location.reload(), type: 'primary' }, get(i18n, 'finUi.common.reload', 'Reload')),
+                React.createElement(Button, { onClick: () => window.location.assign('/') }, get(i18n, 'finUi.common.home', 'Home'))),
+            showReportDialog && (React.createElement("div", { style: { marginTop: `0.5rem` } },
+                React.createElement("small", { onClick: showReportDialog }, get(i18n, 'finUi.errorBoundary.additionalDetails', 'If you’d like, click here to include an additional error report to our team. Any details you provide will be helpful.')))))));
+};
+/**
+ * A common error boundary used to capture errors.
+ */
+export class ErrorBoundary extends React.Component {
+    state = {};
+    componentDidCatch(error, info) {
+        this.props.onError?.(error);
+        console.error(error, info);
+    }
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    render() {
+        return this.state.error ? (React.createElement(ErrorBoundaryInner, { error: this.state.error, mode: this.props.mode, appId: this.props.appId, showReportDialog: this.props.showReportDialog })) : (this.props.children);
+    }
+}
 //# sourceMappingURL=ErrorBoundary.js.map

package/dist_es/react/components/ErrorDisplayer.d.ts

@@ -1,19 +1,19 @@
-import React, { ErrorInfo, ReactNode } from 'react';
-interface ErrorBoundaryState {
-    error?: Error;
-}
-interface ErrorBoundaryProps {
-    children: ReactNode;
-}
-export declare class DefaultErrorBoundary extends React.Component<ErrorBoundaryProps> {
-    state: ErrorBoundaryState;
-    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
-    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
-    render(): ReactNode;
-}
-export interface ErrorDisplayerProps {
-    error: Error;
-    extra: React.ReactNode;
-}
-export declare const ErrorDisplayer: React.FC<ErrorDisplayerProps>;
-export {};
+import React, { ErrorInfo, ReactNode } from 'react';
+interface ErrorBoundaryState {
+    error?: Error;
+}
+interface ErrorBoundaryProps {
+    children: ReactNode;
+}
+export declare class DefaultErrorBoundary extends React.Component<ErrorBoundaryProps> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): ReactNode;
+}
+export interface ErrorDisplayerProps {
+    error: Error;
+    extra: React.ReactNode;
+}
+export declare const ErrorDisplayer: React.FC<ErrorDisplayerProps>;
+export {};