@j2inn/fin5-ui-utils 0.0.2 → 0.0.5-beta.1

package/dist_es/react/components/ErrorBoundary.jsx

@@ -0,0 +1,150 @@
+/*
+ * 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 (<div className={classes.errorDetails}>
+			<Checkbox onChange={(e) => {
+            setShowDetails(e.target.checked);
+        }} defaultChecked={showDetails} value={showDetails}>
+				{get(i18n, 'finUi.errorBoundary.showDetails', 'Show details')}
+			</Checkbox>
+			{showDetails && (<>
+					<pre>{error.stack}</pre>
+					<Container horizontal middle right>
+						<Button onClick={copyToClipboard}>
+							{get(i18n, 'finUi.errorBoundary.copyToClipboard', 'Copy to clipboard')}
+						</Button>
+					</Container>
+				</>)}
+		</div>);
+};
+/**
+ * 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 (<Container vertical top center className={classes.errorBoundry}>
+			<div className={classes.boundryContainer} style={{ gap: `1rem` }}>
+				<h1>{header}</h1>
+
+				<h3>
+					{get(i18n, 'finUi.errorBoundary.description', 'The application has encountered an error when trying to display some content.')}
+				</h3>
+
+				<p>{continueMsg}</p>
+
+				<div>
+					<ErrorDetails showDetails={showDetails} setShowDetails={setShowDetails} error={error} appId={appId}/>
+				</div>
+
+				<Divider />
+
+				<Container horizontal middle left style={{ gap: `1rem` }}>
+					<Button onClick={() => window.location.reload()} type='primary'>
+						{get(i18n, 'finUi.common.reload', 'Reload')}
+					</Button>
+					<Button onClick={() => window.location.assign('/')}>
+						{get(i18n, 'finUi.common.home', 'Home')}
+					</Button>
+				</Container>
+
+				{showReportDialog && (<div style={{ marginTop: `0.5rem` }}>
+						<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.')}
+						</small>
+					</div>)}
+			</div>
+		</Container>);
+};
+/**
+ * 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 ? (<ErrorBoundaryInner error={this.state.error} mode={this.props.mode} appId={this.props.appId} showReportDialog={this.props.showReportDialog}/>) : (this.props.children);
+    }
+}
+//# sourceMappingURL=ErrorBoundary.jsx.map

package/dist_es/react/components/ErrorBoundary.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.jsx","sourceRoot":"","sources":["../../../src/react/components/ErrorBoundary.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +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 {};

package/dist_es/react/components/ErrorDisplayer.jsx

@@ -0,0 +1,36 @@
+import { Button, Collapse, Container, Result, Typography } from '@j2inn/ui';
+import React from 'react';
+export class DefaultErrorBoundary extends React.Component {
+    state = {};
+    static getDerivedStateFromError(error) {
+        // Update state so the next render will show the fallback UI.
+        return { error: error };
+    }
+    componentDidCatch(error, errorInfo) {
+        // You can also log the error to an error reporting service
+        console.error(error, errorInfo);
+    }
+    render() {
+        if (this.state.error) {
+            // You can render any custom fallback UI
+            return (<ErrorDisplayer error={this.state.error} extra={[
+                    <Button type='primary' key='refresh' onClick={() => window.location.reload()}>
+							Refresh The Page
+						</Button>,
+                ]}/>);
+        }
+        return this.props.children;
+    }
+}
+export const ErrorDisplayer = ({ error, extra, }) => {
+    return (<Result status='error' title='Ouch... Something Went Wrong' subTitle={<Container center>
+					<Collapse style={{ width: 600, textAlign: 'left' }}>
+						<Collapse.Panel header={`${error.toString()}`} key='1'>
+							<Typography.Text style={{ width: 400 }}>
+								{error.stack}
+							</Typography.Text>
+						</Collapse.Panel>
+					</Collapse>
+				</Container>} extra={extra}/>);
+};
+//# sourceMappingURL=ErrorDisplayer.jsx.map

package/dist_es/react/components/ErrorDisplayer.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorDisplayer.jsx","sourceRoot":"","sources":["../../../src/react/components/ErrorDisplayer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAC3E,OAAO,KAA+B,MAAM,OAAO,CAAA;AAUnD,MAAM,OAAO,oBAAqB,SAAQ,KAAK,CAAC,SAA6B;IACnE,KAAK,GAAuB,EAAE,CAAA;IAEvC,MAAM,CAAC,wBAAwB,CAAC,KAAY;QAC3C,6DAA6D;QAC7D,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,CAAA;IACxB,CAAC;IAEQ,iBAAiB,CAAC,KAAY,EAAE,SAAoB;QAC5D,2DAA2D;QAC3D,OAAO,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;IAChC,CAAC;IAEQ,MAAM;QACd,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;YACrB,wCAAwC;YACxC,OAAO,CACN,CAAC,cAAc,CACd,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CACxB,KAAK,CAAC,CAAC;oBACN,CAAC,MAAM,CACN,IAAI,CAAC,SAAS,CACd,GAAG,CAAC,SAAS,CACb,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,CACxC;;MACD,EAAE,MAAM,CAAC;iBACT,CAAC,EACD,CACF,CAAA;SACD;QACD,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA;IAC3B,CAAC;CACD;AAOD,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAC7D,KAAK,EACL,KAAK,GACL,EAAE,EAAE;IACJ,OAAO,CACN,CAAC,MAAM,CACN,MAAM,CAAC,OAAO,CACd,KAAK,CAAC,8BAA8B,CACpC,QAAQ,CAAC,CACR,CAAC,SAAS,CAAC,MAAM,CAChB;KAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAClD;MAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CACrD;OAAA,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CACtC;QAAA,CAAC,KAAK,CAAC,KAAK,CACb;OAAA,EAAE,UAAU,CAAC,IAAI,CAClB;MAAA,EAAE,QAAQ,CAAC,KAAK,CACjB;KAAA,EAAE,QAAQ,CACX;IAAA,EAAE,SAAS,CAAC,CACZ,CACD,KAAK,CAAC,CAAC,KAAK,CAAC,EACZ,CACF,CAAA;AACF,CAAC,CAAA"}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+/**
+ * A simple UI loader.
+ */
+declare const Loader: ({ loading, children, }: {
+    loading: boolean;
+    children?: React.ReactNode;
+}) => JSX.Element;
+export default Loader;

package/dist_es/react/components/Loader.jsx

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
+ */
+import React from 'react';
+import LoadingSpinner from './LoadingSpinner';
+/**
+ * A simple UI loader.
+ */
+const Loader = ({ loading, children, }) => {
+    return loading ? <LoadingSpinner /> : <>{children}</>;
+};
+export default Loader;
+//# sourceMappingURL=Loader.jsx.map

package/dist_es/react/components/Loader.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.jsx","sourceRoot":"","sources":["../../../src/react/components/Loader.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAE7C;;GAEG;AACH,MAAM,MAAM,GAAG,CAAC,EACf,OAAO,EACP,QAAQ,GAIR,EAAe,EAAE;IACjB,OAAO,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,AAAD,EAAG,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAA;AACtD,CAAC,CAAA;AAED,eAAe,MAAM,CAAA"}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const LoadingSpinner: React.FC;
+export default LoadingSpinner;

package/dist_es/react/components/LoadingSpinner.jsx

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
+ */
+import { Spin } from '@j2inn/ui';
+import React from 'react';
+import { createUseStyles } from 'react-jss';
+const useStyles = createUseStyles(() => ({
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+        width: '100%',
+    },
+}));
+const LoadingSpinner = () => {
+    const classes = useStyles();
+    return (<div className={classes.container}>
+			<Spin size='large'></Spin>
+		</div>);
+};
+export default LoadingSpinner;
+//# sourceMappingURL=LoadingSpinner.jsx.map

package/dist_es/react/components/LoadingSpinner.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingSpinner.jsx","sourceRoot":"","sources":["../../../src/react/components/LoadingSpinner.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAChC,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAE3C,MAAM,SAAS,GAAG,eAAe,CAAC,GAAG,EAAE,CAAC,CAAC;IACxC,SAAS,EAAE;QACV,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;KACb;CACD,CAAC,CAAC,CAAA;AAEH,MAAM,cAAc,GAAa,GAAG,EAAE;IACrC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,OAAO,CACN,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CACjC;GAAA,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,IAAI,CAC1B;EAAA,EAAE,GAAG,CAAC,CACN,CAAA;AACF,CAAC,CAAA;AAED,eAAe,cAAc,CAAA"}

package/dist_es/react/components/navigation/BasicLayout.d.ts

@@ -0,0 +1,21 @@
+import { LayoutProps, MenuProps, SiderProps } from 'antd';
+import React from 'react';
+import { MenuPage } from './MenuPage';
+export interface BasicLayoutProps {
+    /**
+     * List of pages for the menu and the routing
+     */
+    pages?: MenuPage[];
+    defaultPage?: string;
+    onPageChange?: (page: string) => void;
+    compactSider?: boolean;
+    layoutProps?: LayoutProps;
+    mobileHeaderProps?: LayoutProps;
+    siderProps?: SiderProps;
+    contentProps?: LayoutProps;
+    menuProps?: Omit<MenuProps, 'items' | 'selectedKeys' | 'onSelect'>;
+}
+/**
+ * Basic layout that combines menu and routing into one.
+ */
+export declare const BasicLayout: React.FC<BasicLayoutProps>;

package/dist_es/react/components/navigation/BasicLayout.jsx

@@ -0,0 +1,104 @@
+/*
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
+ */
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
+import { Button, Layout, Menu } from '@j2inn/ui';
+import classNames from 'classnames';
+import React, { useEffect, useState } from 'react';
+import { createUseStyles } from 'react-jss';
+import { ErrorDisplayer } from '../ErrorDisplayer';
+import { findPageByName } from './MenuPage';
+import { Router } from './Router';
+const HEADER_HEIGHT = 45;
+const useStyles = createUseStyles((theme) => {
+    return {
+        header: {
+            position: 'fixed',
+            width: '100%',
+            zIndex: 1000,
+            padding: 0,
+            height: HEADER_HEIGHT,
+            lineHeight: '45px',
+        },
+        sider: {
+            overflow: 'auto',
+            height: '100vh',
+            position: 'fixed',
+            left: 0,
+            top: 0,
+            bottom: 0,
+            zIndex: 999,
+            paddingTop: ({ isMobile }) => isMobile ? HEADER_HEIGHT : 0,
+        },
+        menuTrigger: {
+            width: 45,
+            height: '100%',
+            textAlign: 'center',
+            fontSize: 18,
+            cursor: 'pointer',
+            transition: 'color 0.3s ease-in-out',
+            backgroundColor: 'transparent',
+            color: 'white',
+            '&:hover': {
+                color: theme.linkActiveColor,
+            },
+        },
+        content: ({ isMobile, compactSider }) => ({
+            paddingLeft: isMobile ? 0 : compactSider ? 45 : 200,
+            paddingTop: isMobile ? HEADER_HEIGHT : 0,
+        }),
+    };
+});
+// Workaround j2inn/ui exporting problem
+const Header = Layout.Header;
+const Sider = Layout.Sider;
+const Content = Layout.Content;
+/**
+ * Basic layout that combines menu and routing into one.
+ */
+export const BasicLayout = ({ pages = [], defaultPage = pages?.[0].key ?? '', onPageChange, compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, }) => {
+    const [currentPage, setCurrentPage] = useState(defaultPage);
+    // Fire onChange
+    useEffect(() => {
+        onPageChange?.(currentPage);
+    }, [currentPage]);
+    // manage mobile navigation
+    const [isMobile, setIsMobile] = useState(false);
+    const [hiddenSider, setHiddenSider] = useState(false);
+    const classes = useStyles({ isMobile, compactSider });
+    return (<Layout hasSider {...layoutProps}>
+			{isMobile && (<Header className={classes.header} {...mobileHeaderProps}>
+					{hiddenSider ? (<MenuUnfoldOutlined className={classes.menuTrigger} onClick={() => {
+                    setHiddenSider(!hiddenSider);
+                }}/>) : (<MenuFoldOutlined className={classes.menuTrigger} onClick={() => {
+                    setHiddenSider(!hiddenSider);
+                }}/>)}
+				</Header>)}
+			<Sider {...siderProps} className={classNames(classes.sider, siderProps?.className)} breakpoint='md' onBreakpoint={(broken) => {
+            setIsMobile(broken);
+            setHiddenSider(true);
+        }} collapsed={(isMobile && hiddenSider) || compactSider} collapsedWidth={isMobile && hiddenSider
+            ? 0
+            : compactSider
+                ? HEADER_HEIGHT
+                : 0} trigger={null}>
+				<Menu {...menuProps} items={pages} selectedKeys={[currentPage]} onSelect={({ key }) => {
+            if (!hiddenSider) {
+                setHiddenSider(true);
+            }
+            const page = findPageByName(pages, key);
+            if (page?.component) {
+                setCurrentPage(key);
+            }
+        }}/>
+			</Sider>
+			<Content className={classes.content} {...contentProps}>
+				<Router pages={pages} currentPage={currentPage ?? defaultPage} fallbackComponent={<ErrorDisplayer error={new Error('Page Not Found')} extra={[
+                <Button type='primary' key='refresh' onClick={() => setCurrentPage(defaultPage)}>
+									Go Home
+								</Button>,
+            ]}/>}/>
+			</Content>
+		</Layout>);
+};
+//# sourceMappingURL=BasicLayout.jsx.map

package/dist_es/react/components/navigation/BasicLayout.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasicLayout.jsx","sourceRoot":"","sources":["../../../../src/react/components/navigation/BasicLayout.tsx"],"names":[],"mappings":"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"}

package/dist_es/react/components/navigation/MenuPage.d.ts

@@ -0,0 +1,33 @@
+import { ItemType } from 'antd/lib/menu/hooks/useItems';
+import React, { PropsWithChildren } from 'react';
+/**
+ * Menu page has both the data required by the menu and the data required to actually render the page.
+ */
+export declare type MenuPage<T = Record<string, unknown>> = ItemType & Page<T>;
+/**
+ * Menu Item that represents an application page
+ */
+interface Page<T = Record<string, unknown>> {
+    key: string;
+    component?: React.LazyExoticComponent<React.FC<T>>;
+    props?: PropsWithChildren<T>;
+    children?: Page<T>[];
+    disabled?: boolean;
+}
+/**
+ * Retrieve a specific page or subPage from a root page list
+ * @param name the name of the searched page
+ * @param pages the list of root pages
+ */
+export declare function findPageByName<T extends MenuPage>(pages: T[], name?: string): T | undefined;
+/**
+ * Expands the list of pages to include all the subpages
+ */
+export declare function pageTreeToPageList<T extends MenuPage>(pages: T[]): T[];
+/**
+ * Recursively get all the subPages of a root page
+ * @param page root page
+ * @returns the whole tree of subPages as a list
+ */
+export declare function getAllSubPages<T extends MenuPage>(page: T): T[];
+export {};

package/dist_es/react/components/navigation/MenuPage.jsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
+ */
+/**
+ * Retrieve a specific page or subPage from a root page list
+ * @param name the name of the searched page
+ * @param pages the list of root pages
+ */
+export function findPageByName(pages, name) {
+    return pageTreeToPageList(pages).find((page) => page.key === name && !page.disabled);
+}
+/**
+ * Expands the list of pages to include all the subpages
+ */
+export function pageTreeToPageList(pages) {
+    return pages.flatMap((page) => getAllSubPages(page));
+}
+/**
+ * Recursively get all the subPages of a root page
+ * @param page root page
+ * @returns the whole tree of subPages as a list
+ */
+export function getAllSubPages(page) {
+    if (page.children) {
+        return [page].concat(...page.children.map((subPage) => getAllSubPages(subPage)));
+    }
+    else {
+        return [page];
+    }
+}
+//# sourceMappingURL=MenuPage.jsx.map

package/dist_es/react/components/navigation/MenuPage.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPage.jsx","sourceRoot":"","sources":["../../../../src/react/components/navigation/MenuPage.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAqBH;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAC7B,KAAU,EACV,IAAa;IAEb,OAAO,kBAAkB,CAAC,KAAK,CAAC,CAAC,IAAI,CACpC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAC7C,CAAA;AACF,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAAqB,KAAU;IAChE,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,cAAc,CAAC,IAAS,CAAC,CAAC,CAAA;AAC1D,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAAqB,IAAO;IACzD,IAAI,IAAI,CAAC,QAAQ,EAAE;QAClB,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,CACnB,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,cAAc,CAAC,OAAY,CAAC,CAAC,CAC/D,CAAA;KACD;SAAM;QACN,OAAO,CAAC,IAAI,CAAC,CAAA;KACb;AACF,CAAC"}

package/dist_es/react/components/navigation/Router.d.ts

@@ -0,0 +1,12 @@
+import { PropsWithChildren, ReactElement } from 'react';
+import { MenuPage } from './MenuPage';
+export interface RouterProps<T extends MenuPage> {
+    pages?: T[];
+    currentPage: string;
+    onPageChange?: (selectedPage?: T) => void;
+    fallbackComponent?: ReactElement;
+}
+/**
+ * Renders the currently selected page from a tree of pages
+ */
+export declare function Router<T extends MenuPage>({ pages, currentPage, onPageChange, fallbackComponent, }: PropsWithChildren<RouterProps<T>>): JSX.Element;

package/dist_es/react/components/navigation/Router.jsx

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
+ */
+import React, { Suspense, useEffect, useMemo, } from 'react';
+import LoadingSpinner from '../LoadingSpinner';
+import { findPageByName } from './MenuPage';
+/**
+ * Renders the currently selected page from a tree of pages
+ */
+export function Router({ pages = [], currentPage, onPageChange, fallbackComponent, }) {
+    const page = useMemo(() => findPageByName(pages, currentPage), [pages, currentPage]);
+    useEffect(() => {
+        onPageChange?.(page);
+    }, [page]);
+    return page?.component ? (<Suspense fallback={<LoadingSpinner />}>
+			{React.createElement(page.component, page?.props)}
+		</Suspense>) : (fallbackComponent ?? <div>{currentPage} page not found</div>);
+}
+//# sourceMappingURL=Router.jsx.map

package/dist_es/react/components/navigation/Router.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Router.jsx","sourceRoot":"","sources":["../../../../src/react/components/navigation/Router.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,EAGb,QAAQ,EACR,SAAS,EACT,OAAO,GACP,MAAM,OAAO,CAAA;AACd,OAAO,cAAc,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,cAAc,EAAY,MAAM,YAAY,CAAA;AASrD;;GAEG;AACH,MAAM,UAAU,MAAM,CAAqB,EAC1C,KAAK,GAAG,EAAE,EACV,WAAW,EACX,YAAY,EACZ,iBAAiB,GACkB;IACnC,MAAM,IAAI,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,WAAW,CAAC,EACxC,CAAC,KAAK,EAAE,WAAW,CAAC,CACpB,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACd,YAAY,EAAE,CAAC,IAAI,CAAC,CAAA;IACrB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,OAAO,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CACxB,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,AAAD,EAAG,CAAC,CACtC;GAAA,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,KAAK,CAAC,CAClD;EAAA,EAAE,QAAQ,CAAC,CACX,CAAC,CAAC,CAAC,CACH,iBAAiB,IAAI,CAAC,GAAG,CAAC,CAAC,WAAW,CAAE,eAAc,EAAE,GAAG,CAAC,CAC5D,CAAA;AACF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@j2inn/fin5-ui-utils",
-	"version": "0.0.2",
+	"version": "0.0.5-beta.1",
 	"description": "A set of useful client-side utilities useful for creating UI applications on top of FIN 5",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -16,26 +16,29 @@
 		"lint": "eslint --fix --ext ts,tsx,js,jsx src/",
 		"lint-staged": "lint-staged",
 		"test": "cross-env NODE_ENV=test && npm run test:jest",
-		"test:jest": "jest --passWithNoTests",
+		"test:jest": "jest",
 		"prepack": "npm run lint && npm run test && npm run build"
 	},
 	"author": "",
 	"license": "ISC",
 	"files": [
 		"dist/**/*",
-		"scripts/**/*"
+		"dist_es/**/*"
 	],
 	"dependencies": {
 		"@hot-loader/react-dom": "^17.0.2",
-		"@j2inn/react-config": "^4.0.10",
-		"@j2inn/ui": "^5.0.0-beta.6",
-		"@j2inn/utils": "^5.0.6",
-		"haystack-core": "^2.0.29",
-		"haystack-nclient": "^3.0.12",
-		"haystack-react": "^3.0.3",
-		"haystack-units": "^1.0.12"
+		"@j2inn/react-config": "^4.0.16",
+		"classnames": "^2.3.1",
+		"js-yaml": "^4.1.0"
 	},
 	"peerDependencies": {
+		"@j2inn/app": "^1.0.17",
+		"@j2inn/ui": "^5.0.0-beta.17",
+		"@j2inn/utils": "^5.0.8",
+		"haystack-core": "^2.0.35",
+		"haystack-nclient": "^3.0.24",
+		"haystack-react": "^3.0.8",
+		"haystack-units": "^1.0.18",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
 		"react-jss": "^10.9.0"
@@ -57,7 +60,11 @@
 		"@babel/plugin-transform-runtime": "^7.17.0",
 		"@babel/preset-typescript": "^7.16.7",
 		"@babel/runtime": "^7.17.8",
+		"@j2inn/app": "^1.0.17",
+		"@j2inn/ui": "^5.0.0-beta.17",
+		"@j2inn/utils": "^5.0.8",
 		"@types/jest": "^27.4.0",
+		"@types/js-yaml": "^4.0.5",
 		"@types/node": "^15.0.2",
 		"@types/react": "^17.0.8",
 		"@typescript-eslint/eslint-plugin": "^5.28.0",
@@ -79,6 +86,10 @@
 		"eslint-plugin-prettier": "^4.0.0",
 		"eslint-plugin-react": "^7.29.4",
 		"extract-css-chunks-webpack-plugin": "^4.9.0",
+		"haystack-core": "^2.0.35",
+		"haystack-nclient": "^3.0.24",
+		"haystack-react": "^3.0.8",
+		"haystack-units": "^1.0.18",
 		"husky": "^7.0.4",
 		"jest": "^27.0.3",
 		"jest-chain": "^1.1.5",
@@ -109,4 +120,4 @@
 			"eslint --fix"
 		]
 	}
-}
+}