@j2inn/fin5-ui-utils 0.0.1-alpha.1

package/README.md

@@ -0,0 +1,5 @@
+# What is fin5-ui-utils? #
+A set of useful client-side utilities useful for creating UI applications on top of the FIN 5 framework.
+
+### How do I get set up? ###
+To install this package run `npm i @j2inn/fin5-ui-utils`

package/dist/fantomProps/fantomPropsToObject.d.ts

@@ -0,0 +1,8 @@
+export interface Props {
+    [key: string]: string;
+}
+/**
+ * Convert the given fantom props as string to JS object (@see https://fantom.org/doc/sys/InStream#readProps)
+ */
+export default function fantomPropsToObject(props: string): Props;
+export declare function parseFantomProps(readChar: () => number, unreadChar: (char: number) => void): Props;

package/dist/fantomProps/fantomPropsToObject.js

@@ -0,0 +1,175 @@
+/**
+ * Convert the given fantom props as string to JS object (@see https://fantom.org/doc/sys/InStream#readProps)
+ */
+export default function fantomPropsToObject(props) {
+    let i = 0;
+    const readChar = () => {
+        if (i < props.length) {
+            i++;
+            return props.charCodeAt(i - 1);
+        }
+        else
+            return -1;
+    };
+    const unreadChar = () => {
+        if (i > 0) {
+            i--;
+        }
+    };
+    return parseFantomProps(readChar, unreadChar);
+}
+var UTF_8;
+(function (UTF_8) {
+    UTF_8[UTF_8["tab"] = 9] = "tab";
+    UTF_8[UTF_8["lf"] = 10] = "lf";
+    UTF_8[UTF_8["cr"] = 13] = "cr";
+    UTF_8[UTF_8["space"] = 32] = "space";
+    UTF_8[UTF_8["numberSign"] = 35] = "numberSign";
+    UTF_8[UTF_8["asterisk"] = 42] = "asterisk";
+    UTF_8[UTF_8["solidus"] = 47] = "solidus";
+    UTF_8[UTF_8["equalSign"] = 61] = "equalSign";
+    UTF_8[UTF_8["reverseSolidus"] = 92] = "reverseSolidus";
+    UTF_8[UTF_8["n"] = 110] = "n";
+    UTF_8[UTF_8["r"] = 114] = "r";
+    UTF_8[UTF_8["t"] = 116] = "t";
+    UTF_8[UTF_8["u"] = 117] = "u";
+})(UTF_8 || (UTF_8 = {}));
+const isSpace = (char) => char === UTF_8.space ||
+    char === UTF_8.tab ||
+    char === UTF_8.lf ||
+    char === UTF_8.cr;
+const hex = function (c) {
+    if (48 <= c && c <= 57)
+        return c - 48;
+    if (97 <= c && c <= 102)
+        return c - 97 + 10;
+    if (65 <= c && c <= 70)
+        return c - 65 + 10;
+    return -1;
+};
+/*
+ * Parse the Fantom props file character by character.
+ * Implementation based on https://github.com/fantom-lang/fantom/blob/master/src/sys/js/fan/InStream.js
+ */
+export function parseFantomProps(readChar, unreadChar) {
+    const props = {};
+    let name = '';
+    let value = null;
+    let inBlockComment = 0;
+    let inEndOfLineComment = false;
+    let char = UTF_8.space, lastChar = UTF_8.space;
+    let lineNum = 1;
+    while (true) {
+        lastChar = char;
+        char = readChar();
+        if (char < 0)
+            break;
+        // end of line
+        if (char == UTF_8.lf || char == UTF_8.cr) {
+            inEndOfLineComment = false;
+            if (lastChar == UTF_8.cr && char == UTF_8.lf)
+                continue;
+            const n = name.trim();
+            if (value !== null) {
+                props[n] = value.trim();
+                name = '';
+                value = null;
+            }
+            else if (n.length > 0)
+                throw new Error('Invalid name/value pair [Line ' + lineNum + ']');
+            lineNum++;
+            continue;
+        }
+        // if in comment
+        if (inEndOfLineComment)
+            continue;
+        // block comment
+        if (inBlockComment > 0) {
+            if (lastChar == UTF_8.solidus && char == UTF_8.asterisk)
+                inBlockComment++;
+            if (lastChar == UTF_8.asterisk && char == UTF_8.solidus)
+                inBlockComment--;
+            continue;
+        }
+        // equal
+        if (char == UTF_8.equalSign && value === null) {
+            value = '';
+            continue;
+        }
+        // line comment
+        if (char === UTF_8.numberSign &&
+            (lastChar == UTF_8.lf || lastChar == UTF_8.cr)) {
+            inEndOfLineComment = true;
+            continue;
+        }
+        // end of line comment
+        if (char == UTF_8.solidus && isSpace(lastChar)) {
+            const peek = readChar();
+            if (peek < 0)
+                break;
+            if (peek == UTF_8.solidus) {
+                inEndOfLineComment = true;
+                continue;
+            }
+            if (peek == UTF_8.asterisk) {
+                inBlockComment++;
+                continue;
+            }
+            unreadChar(peek);
+        }
+        // escape or line continuation
+        if (char == UTF_8.reverseSolidus) {
+            let peek = readChar();
+            if (peek < 0)
+                break;
+            else if (peek == UTF_8.n)
+                char = UTF_8.lf;
+            else if (peek == UTF_8.r)
+                char = UTF_8.cr;
+            else if (peek == UTF_8.t)
+                char = UTF_8.tab;
+            else if (peek == UTF_8.reverseSolidus)
+                char = UTF_8.reverseSolidus;
+            else if (peek == UTF_8.cr || peek == UTF_8.lf) {
+                // line continuation
+                lineNum++;
+                if (peek == UTF_8.cr) {
+                    peek = readChar();
+                    if (peek != UTF_8.lf)
+                        unreadChar(peek);
+                }
+                while (true) {
+                    peek = readChar();
+                    if (peek == UTF_8.space || peek == UTF_8.tab)
+                        continue;
+                    unreadChar(peek);
+                    break;
+                }
+                continue;
+            }
+            else if (peek == UTF_8.u) {
+                const n3 = hex(readChar());
+                const n2 = hex(readChar());
+                const n1 = hex(readChar());
+                const n0 = hex(readChar());
+                if (n3 < 0 || n2 < 0 || n1 < 0 || n0 < 0)
+                    throw new Error('Invalid hex value for \\uxxxx [Line ' + lineNum + ']');
+                char = (n3 << 12) | (n2 << 8) | (n1 << 4) | n0;
+            }
+            else
+                throw new Error('Invalid escape sequence [Line ' + lineNum + ']');
+        }
+        // normal character
+        if (value === null)
+            name += String.fromCharCode(char);
+        else
+            value += String.fromCharCode(char);
+    }
+    const n = name.trim();
+    if (value !== null) {
+        props[n] = value.trim();
+    }
+    else if (n.length > 0)
+        throw new Error('Invalid name/value pair [Line ' + lineNum + ']');
+    return props;
+}

package/dist/fantomProps/generateJsonFromFantomPropsFile.d.ts

@@ -0,0 +1 @@
+export default function generateJsonFromFantomPropsFile(inputPath?: string, outputPath?: string): Promise<void>;

package/dist/fantomProps/generateJsonFromFantomPropsFile.js

@@ -0,0 +1,8 @@
+import * as fs from 'fs';
+import readFantomPropsFile from './readFantomPropsFile';
+export default async function generateJsonFromFantomPropsFile(inputPath = '../locale/en.props', outputPath = './src/localeKeys.json') {
+    const result = await readFantomPropsFile(inputPath);
+    fs.writeFile(outputPath, JSON.stringify(result, null, '\t'), () => {
+        return;
+    });
+}

package/dist/fantomProps/index.d.ts

@@ -0,0 +1,3 @@
+export * from './fantomPropsToObject';
+export * from './generateJsonFromFantomPropsFile';
+export * from './readFantomPropsFile';

package/dist/fantomProps/index.js

@@ -0,0 +1,3 @@
+export * from './fantomPropsToObject';
+export * from './generateJsonFromFantomPropsFile';
+export * from './readFantomPropsFile';

package/dist/fantomProps/readFantomPropsFile.d.ts

@@ -0,0 +1,5 @@
+import { Props } from './fantomPropsToObject';
+/**
+ * Asynchronously read the given Fantom props file to JS object (@see https://fantom.org/doc/sys/InStream#readProps)
+ */
+export default function readFantomPropsFile(path: string): Promise<Props>;

package/dist/fantomProps/readFantomPropsFile.js

@@ -0,0 +1,32 @@
+import * as fs from 'fs';
+import { parseFantomProps } from './fantomPropsToObject';
+/**
+ * Asynchronously read the given Fantom props file to JS object (@see https://fantom.org/doc/sys/InStream#readProps)
+ */
+export default function readFantomPropsFile(path) {
+    return new Promise((resolve, reject) => {
+        const fileStream = fs.createReadStream(path);
+        fileStream.once('readable', function () {
+            const readChar = () => {
+                return fileStream.read(1)?.[0] ?? -1;
+            };
+            const unreadChar = (char) => {
+                return fileStream.unshift(new Uint8Array([char]));
+            };
+            try {
+                resolve(parseFantomProps(readChar, unreadChar));
+            }
+            catch (error) {
+                reject(error);
+            }
+            finally {
+                try {
+                    fileStream.close();
+                }
+                catch (err) {
+                    console.error(err);
+                }
+            }
+        });
+    });
+}

package/dist/fin5Top/fin5Top.d.ts

@@ -0,0 +1,111 @@
+import { AlarmFilter } from './openFin5Alarm';
+import { HistorianArgs, HistorianType } from './openFin5Historian';
+export declare const getFin5top: (notifyFailure?: () => void) => Fin5Top | null;
+declare const fin5Top: Fin5Top | null;
+export default fin5Top;
+export declare function isWindowTopFin5(notifyFailure?: () => void): boolean;
+export interface Fin5Top {
+    app: Fin5App;
+    languageManager: LanguageManager;
+    finstack?: {
+        projectName?: string;
+        device?: {
+            currentUser?: {
+                toObj: () => unknown;
+            };
+        };
+    };
+}
+export interface Fin5App {
+    /**
+     * Toggles FIN right side menu.
+     * The forceTo parameter can be used to enforce a specific status instead of a toggling behaviour,
+     * where: true -> menu closed, false -> menu open
+     */
+    ToggleCollapse: (forceTo: boolean) => void;
+    /**
+     * Returns current target record id.
+     */
+    TargetRef: () => TargetRef;
+    /**
+     * Updates the current target record id.
+     * Navigates the current app to the specified
+     * <code>targetRef</code>. Target Ref is the id of any equip/site etc..
+     */
+    NavigateToTargetRef: (targetRef: TargetRef, maintainView: boolean) => void;
+    /**
+     * Navigates to a particular application (trends, notes .. etc) under a specific target.
+     * @param {Fin5AppNames} appName name of the application
+     * @param {TargetRef} targetRef id of the target. Is the id of the equip/site.. etc to where the app should navigate
+     * @param {boolean} skipRef is the flag indicating where to ignore the target ref if not mentioned. If this flag is true and the target ref is not provided, then the navigation will be made to the root target ref and will not be obtained from where the app already is
+     */
+    NavigateToApp: (appName: Fin5AppNames, targetRef?: TargetRef, skipRef?: boolean, params?: string[]) => Promise<void>;
+    /**
+     * Method to open a url on the application LHS. The LHS here is the <code>iframe</code> where all
+     * the graphics etc are opened.
+     *
+     * @method LoadApplication
+     * @param {string} url - Is the url which is to be loaded
+     * @param {string} title - Specifies the title to be displayed on the iframe object
+     * @param {string} targetId - Specifies the id of the equip (etc) to which the main navigation update.
+     * @param {object} settings - extra settings that can be passed in when calling hte func
+     * @param {boolean} settings.collapse - flag indicating the collapse state of the RHS app panel
+     */
+    LoadApplication: (url: string, title?: string, targetRef?: TargetRef, settings?: {
+        collapse?: boolean;
+    }) => Promise<void>;
+    /**
+     * Get the filters object from the alarms application.
+     */
+    GetAlarmFilters: () => AlarmFilter;
+    /**
+     * Sets the filter settings for the alarms.
+     * @param {AlarmFilter} filters Is the object that defines the filter properties.
+     * @param {boolean} historical Flag indicating if the filter properties need to be applied to the historical alarms.
+     */
+    SetAlarmFilters: (filters: AlarmFilter, historical?: boolean) => void;
+    /**
+     * Navigates to the historian app and loads the graphs as per the passed arguments. The graph will be drawn for the passed "point" ids or for a "query" id or for a "string" query
+     * @param {HistorianType} type is the type of graph arg. Available args are:
+     *	- point : the args will have point ids in an array
+     *	- query : the arg will be the id of a saved chart query
+     *	- string : the arg will be a query string
+     * @param {HistorianArgs} args is the array/string for point ids, the query id or the raw query string
+     */
+    OpenHistorianWithOptions: (type: HistorianType, args: HistorianArgs) => void;
+    findComponent: (name: string) => Fin5AppComponent;
+    /**
+     * @see https://ractive.js.org/api/#ractiveobserve
+     */
+    observe: (keypath: string, callback: (newValue: unknown, oldValue: unknown, keypath: string) => void) => {
+        cancel: () => void;
+    };
+    set: (name: string, value: unknown) => Promise<undefined>;
+    get: (name: string) => Promise<unknown>;
+    APP_NAMES: typeof Fin5AppNames;
+}
+export declare enum Fin5AppNames {
+    EQUIP = "equip",
+    GRAPHICS = "graphics",
+    POINTS = "points",
+    ALARMS = "alarms",
+    NOTES = "notes",
+    SUMMARY = "summary",
+    SUMMARY_TOPICS = "summaryList",
+    TOOLS = "tools",
+    SCHEDULES = "schedules",
+    SCHEDULE_LIST = "scheduleList",
+    HISTORIAN = "trends",
+    TREND_LIST = "trendList",
+    SEARCH = "search",
+    LOGOUT = "logout",
+    GENERIC = "generic",
+    REPORTS = "reports"
+}
+interface LanguageManager {
+    currentLang: string;
+}
+interface Fin5AppComponent {
+    set: (value: unknown) => Promise<undefined>;
+}
+export declare type TargetRef = string | null | undefined;

package/dist/fin5Top/fin5Top.js

@@ -0,0 +1,52 @@
+class Fin5TopRetriever {
+    static _fin5Top;
+    static get fin5Top() {
+        return this.getFin5top();
+    }
+    static getFin5top = (notifyFailure) => {
+        if (this._fin5Top === undefined) {
+            this._fin5Top = isWindowTopFin5(notifyFailure)
+                ? window.top // Cast to unknown to obscure properties from Window to simplify usage.
+                : null;
+        }
+        return this._fin5Top;
+    };
+}
+export const getFin5top = Fin5TopRetriever.getFin5top;
+const fin5Top = Fin5TopRetriever.fin5Top;
+export default fin5Top;
+export function isWindowTopFin5(notifyFailure) {
+    try {
+        window?.top?.origin;
+        if (window.top.finstack) {
+            return true;
+        }
+        else {
+            throw new Error('FIN 5 top not available');
+        }
+    }
+    catch (err) {
+        console.warn(err);
+        notifyFailure?.();
+        return false;
+    }
+}
+export var Fin5AppNames;
+(function (Fin5AppNames) {
+    Fin5AppNames["EQUIP"] = "equip";
+    Fin5AppNames["GRAPHICS"] = "graphics";
+    Fin5AppNames["POINTS"] = "points";
+    Fin5AppNames["ALARMS"] = "alarms";
+    Fin5AppNames["NOTES"] = "notes";
+    Fin5AppNames["SUMMARY"] = "summary";
+    Fin5AppNames["SUMMARY_TOPICS"] = "summaryList";
+    Fin5AppNames["TOOLS"] = "tools";
+    Fin5AppNames["SCHEDULES"] = "schedules";
+    Fin5AppNames["SCHEDULE_LIST"] = "scheduleList";
+    Fin5AppNames["HISTORIAN"] = "trends";
+    Fin5AppNames["TREND_LIST"] = "trendList";
+    Fin5AppNames["SEARCH"] = "search";
+    Fin5AppNames["LOGOUT"] = "logout";
+    Fin5AppNames["GENERIC"] = "generic";
+    Fin5AppNames["REPORTS"] = "reports";
+})(Fin5AppNames || (Fin5AppNames = {}));

package/dist/fin5Top/getFin5BinUrl.d.ts

@@ -0,0 +1,2 @@
+import { HRef } from 'haystack-core';
+export declare const getFin5BinUrl: (id: HRef) => string;

package/dist/fin5Top/getFin5BinUrl.js

@@ -0,0 +1,2 @@
+import fin5Top from './fin5Top';
+export const getFin5BinUrl = (id) => `/finGetFile/${fin5Top?.finstack?.projectName}?fileRef=${id?.toString()}`;

package/dist/fin5Top/index.d.ts

@@ -0,0 +1,4 @@
+export * from './fin5Top';
+export * from './getFin5BinUrl';
+export * from './openFin5Alarm';
+export * from './openFin5Historian';

package/dist/fin5Top/index.js

@@ -0,0 +1,4 @@
+export * from './fin5Top';
+export * from './getFin5BinUrl';
+export * from './openFin5Alarm';
+export * from './openFin5Historian';

package/dist/fin5Top/openFin5Alarm.d.ts

@@ -0,0 +1,22 @@
+import { TargetRef } from './fin5Top';
+export interface AlarmFilterTypes {
+    alarms: boolean;
+    events: boolean;
+    acks: boolean;
+}
+export interface AlarmFilter {
+    range?: string;
+    priorityThreshold?: string;
+    acked?: boolean;
+    unacked?: boolean;
+    inAlarm?: boolean;
+    notInAlarm?: boolean;
+    search?: string;
+    types?: AlarmFilterTypes;
+}
+export declare type AlarmOptions = {
+    targetRef?: TargetRef;
+    filter: AlarmFilter;
+    historical?: boolean;
+};
+export declare const openFin5AlarmsApp: ({ targetRef, filter, historical, }: AlarmOptions) => Promise<void>;

package/dist/fin5Top/openFin5Alarm.js

@@ -0,0 +1,17 @@
+//////////////////////////////////////////////////////////////////////////
+// Alarms
+//////////////////////////////////////////////////////////////////////////
+import { getFin5top } from './fin5Top';
+export const openFin5AlarmsApp = async ({ targetRef, filter, historical = false, }) => {
+    const fin5top = getFin5top();
+    await fin5top?.app.NavigateToApp(fin5top?.app?.APP_NAMES?.ALARMS, targetRef);
+    fin5top?.app.ToggleCollapse(false);
+    let alarmFilters = fin5top?.app?.GetAlarmFilters() ?? {};
+    if (filter) {
+        alarmFilters = {
+            ...alarmFilters,
+            ...filter,
+        };
+    }
+    fin5top?.app?.SetAlarmFilters(alarmFilters, historical);
+};

package/dist/fin5Top/openFin5Historian.d.ts

@@ -0,0 +1,3 @@
+export declare type HistorianType = 'point' | 'query' | 'string';
+export declare type HistorianArgs = string | (string | undefined)[];
+export declare const openFin5HistorianApp: (queryType?: HistorianType, args?: HistorianArgs) => Promise<void>;

package/dist/fin5Top/openFin5Historian.js

@@ -0,0 +1,12 @@
+//////////////////////////////////////////////////////////////////////////
+// Historian
+//////////////////////////////////////////////////////////////////////////
+import fin5Top from './fin5Top';
+export const openFin5HistorianApp = async (queryType, args) => {
+    if (fin5Top) {
+        queryType && args
+            ? fin5Top.app.OpenHistorianWithOptions(queryType, args)
+            : fin5Top.app.NavigateToApp(fin5Top.app.APP_NAMES.TREND_LIST);
+        fin5Top?.app.ToggleCollapse(false);
+    }
+};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from 'fantomProps';
+export * from 'fin5Top';
+export * from 'react/components';

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from 'fantomProps';
+export * from 'fin5Top';
+export * from 'react/components';

package/dist/react/components/DefaultErrorBoundary/index.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/react/components/DefaultErrorBoundary/index.jsx

@@ -0,0 +1,35 @@
+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}/>);
+};

package/dist/react/components/LoadingSpinner/index.d.ts

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

package/dist/react/components/LoadingSpinner/index.jsx

@@ -0,0 +1,6 @@
+import { Container, Spin } from '@j2inn/ui';
+import React from 'react';
+const LoadingSpinner = () => (<Container center style={{ height: '100%', width: '100%' }}>
+		<Spin size='large'></Spin>
+	</Container>);
+export default LoadingSpinner;

package/dist/react/components/index.d.ts

@@ -0,0 +1,5 @@
+export * from './DefaultErrorBoundary';
+export * from './LoadingSpinner';
+export * from './navigation/BasicLayout';
+export * from './navigation/MenuPage';
+export * from './navigation/Router';

package/dist/react/components/index.js

@@ -0,0 +1,5 @@
+export * from './DefaultErrorBoundary';
+export * from './LoadingSpinner';
+export * from './navigation/BasicLayout';
+export * from './navigation/MenuPage';
+export * from './navigation/Router';

package/dist/react/components/navigation/BasicLayout/index.d.ts

@@ -0,0 +1,11 @@
+import { MenuProps } from 'antd';
+import React from 'react';
+import { MenuPage } from '../MenuPage';
+export interface BasicLayoutProps {
+    pages: MenuPage[] & [MenuPage];
+    defaultPage?: string;
+    onPageChange?: (page: string) => void;
+    uncollapsedMenuWidth?: number;
+    menuProps: Omit<MenuProps, 'items' | 'selectedKeys' | 'onSelect'>;
+}
+export declare const BasicLayout: React.FC<BasicLayoutProps>;

package/dist/react/components/navigation/BasicLayout/index.jsx

@@ -0,0 +1,74 @@
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
+import { Button, Layout, Menu } from '@j2inn/ui';
+import React, { useEffect, useState } from 'react';
+import { ErrorDisplayer } from '../../DefaultErrorBoundary';
+import { getPage } from '../MenuPage';
+import { Router } from '../Router';
+// Workaround j2inn/ui exporting problem
+const Header = Layout.Sider;
+const Sider = Layout.Sider;
+const Content = Layout.Sider;
+const DEFAULT_UNCOLLAPSED_MENU_WIDTH = 45;
+const COLLAPSED_MENU_WIDTH = 0;
+export const BasicLayout = ({ pages, defaultPage = pages[0].key, onPageChange, uncollapsedMenuWidth = DEFAULT_UNCOLLAPSED_MENU_WIDTH, menuProps, }) => {
+    const [currentPage, setCurrentPage] = useState(defaultPage);
+    // Fire onChange
+    useEffect(() => {
+        onPageChange?.(currentPage);
+    }, [currentPage]);
+    // manage mobile navigation
+    const [isMobile, setIsMobile] = useState(false);
+    const [hiddenSider, setHiddenSider] = useState(true);
+    const actualMenuWidth = hiddenSider && isMobile ? COLLAPSED_MENU_WIDTH : uncollapsedMenuWidth;
+    return (<Layout hasSider>
+			{isMobile && (<Header style={{
+                position: 'fixed',
+                width: '100%',
+                zIndex: 1000,
+            }}>
+					{React.createElement(hiddenSider ? MenuUnfoldOutlined : MenuFoldOutlined, {
+                className: 'antd-menu-custom-header-trigger',
+                onClick: () => {
+                    setHiddenSider(!hiddenSider);
+                },
+            })}
+				</Header>)}
+			<Sider breakpoint='md' onBreakpoint={(broken) => {
+            setIsMobile(broken);
+            setHiddenSider(true);
+        }} collapsed={true} collapsedWidth={actualMenuWidth} trigger={null} style={{
+            overflow: 'auto',
+            height: '100vh',
+            position: 'fixed',
+            left: 0,
+            top: 0,
+            bottom: 0,
+            zIndex: 999,
+            paddingTop: isMobile
+                ? uncollapsedMenuWidth
+                : COLLAPSED_MENU_WIDTH,
+        }}>
+				<Menu mode='inline' {...menuProps} items={pages} selectedKeys={[currentPage]} onSelect={({ key }) => {
+            if (!hiddenSider) {
+                setHiddenSider(true);
+            }
+            const page = getPage(pages, key);
+            if (page?.component) {
+                setCurrentPage(key);
+            }
+        }}/>
+			</Sider>
+			<Content style={{
+            paddingLeft: actualMenuWidth,
+            paddingTop: isMobile
+                ? uncollapsedMenuWidth
+                : COLLAPSED_MENU_WIDTH,
+        }}>
+				<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>);
+};

package/dist/react/components/navigation/MenuPage/index.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 getPage<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/react/components/navigation/MenuPage/index.jsx

@@ -0,0 +1,27 @@
+/**
+ * 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 getPage(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];
+    }
+}

package/dist/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 current 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/react/components/navigation/Router.jsx

@@ -0,0 +1,15 @@
+import React, { Suspense, useEffect, useMemo, } from 'react';
+import LoadingSpinner from '../LoadingSpinner';
+import { getPage } from './MenuPage';
+/**
+ * Renders the current selected page from a tree of pages
+ */
+export function Router({ pages, currentPage, onPageChange, fallbackComponent, }) {
+    const page = useMemo(() => getPage(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>);
+}

package/package.json

@@ -0,0 +1,118 @@
+{
+	"name": "@j2inn/fin5-ui-utils",
+	"version": "0.0.1-alpha.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",
+	"scripts": {
+		"start": "webpack serve --config node_modules/@j2inn/react-config/webpack.config.js",
+		"clean": "rimraf ./dist",
+		"doc": "typedoc ./src --excludePrivate",
+		"prebuild": "npm run clean",
+		"build": "tsc -d --outDir dist",
+		"checktypes": "tsc --noEmit",
+		"format": "prettier-eslint --list-different --write \"$(pwd)/src/**/*.{ts,tsx,js,jsx}\"",
+		"lint": "eslint --fix --ext ts,tsx,js,jsx src/",
+		"lint-staged": "lint-staged",
+		"analyze": "webpack --analyze --config node_modules/@j2inn/react-config/webpack.config.js",
+		"test": "cross-env NODE_ENV=test && npm run test:jest",
+		"test:jest": "jest --passWithNoTests",
+		"prepack": "npm run lint && npm test && npm run build"
+	},
+	"author": "",
+	"license": "ISC",
+	"files": [
+		"dist/**/*"
+	],
+	"devDependencies": {
+		"@babel/cli": "^7.14.3",
+		"@babel/core": "^7.14.3",
+		"@babel/eslint-parser": "^7.14.4",
+		"@babel/plugin-proposal-class-properties": "^7.13.0",
+		"@babel/plugin-proposal-decorators": "^7.14.2",
+		"@babel/plugin-proposal-export-default-from": "^7.12.13",
+		"@babel/plugin-proposal-function-bind": "^7.12.13",
+		"@babel/plugin-proposal-object-rest-spread": "^7.14.4",
+		"@babel/plugin-syntax-dynamic-import": "^7.8.3",
+		"@babel/plugin-transform-react-inline-elements": "^7.12.13",
+		"@babel/plugin-transform-runtime": "^7.14.3",
+		"@babel/preset-env": "^7.14.4",
+		"@babel/preset-react": "^7.13.13",
+		"@babel/preset-typescript": "^7.13.0",
+		"@j2inn/react-config": "^4.0.10",
+		"@svgr/webpack": "^5.5.0",
+		"@types/jest": "^27.4.0",
+		"@types/node": "^15.0.2",
+		"@types/react": "^17.0.8",
+		"@types/react-dom": "^17.0.5",
+		"@typescript-eslint/eslint-plugin": "^5.28.0",
+		"@typescript-eslint/parser": "^5.28.0",
+		"babel-eslint": "^10.1.0",
+		"babel-loader": "^8.2.2",
+		"babel-plugin-jsx-remove-data-test-id": "^3.0.0",
+		"babel-plugin-react-html-attrs": "^3.0.5",
+		"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
+		"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+		"bundle-loader": "^0.5.6",
+		"cpy": "^8.1.2",
+		"cpy-cli": "^3.1.1",
+		"cross-env": "^7.0.3",
+		"css-loader": "^5.2.6",
+		"css-modules-typescript-loader": "^4.0.1",
+		"cypress": "^7.4.0",
+		"eslint": "^7.27.0",
+		"eslint-config-prettier": "^8.3.0",
+		"eslint-plugin-jest": "^24.3.6",
+		"eslint-plugin-prettier": "^4.0.0",
+		"eslint-plugin-react": "^7.24.0",
+		"extract-css-chunks-webpack-plugin": "^4.9.0",
+		"file-loader": "^6.2.0",
+		"html-webpack-plugin": "^5.3.1",
+		"husky": "^6.0.0",
+		"jest": "^27.0.3",
+		"jest-chain": "^1.1.5",
+		"jest-css-modules": "^2.1.0",
+		"jest-css-modules-transform": "^4.2.1",
+		"jest-extended": "^0.11.5",
+		"less": "^4.1.1",
+		"less-loader": "^9.0.0",
+		"lint-staged": "^11.0.0",
+		"lodash-webpack-plugin": "^0.11.6",
+		"loglevel": "^1.7.1",
+		"mini-css-extract-plugin": "^1.6.0",
+		"moment-locales-webpack-plugin": "^1.2.0",
+		"monaco-editor-webpack-plugin": "^3.1.0",
+		"nib": "^1.1.2",
+		"prettier-eslint": "^12.0.0",
+		"prettier-eslint-cli": "^5.0.1",
+		"raw-loader": "^4.0.2",
+		"rimraf": "^3.0.2",
+		"style-loader": "^2.0.0",
+		"stylus": "^0.54.8",
+		"stylus-loader": "^6.0.0",
+		"ts-jest": "^27.1.3",
+		"typedoc": "^0.22.5",
+		"typescript": "^4.3.2",
+		"url-loader": "^4.1.1",
+		"webpack": "^5.38.1",
+		"webpack-bundle-analyzer": "^4.4.1",
+		"webpack-cli": "^4.7.0",
+		"webpack-dev-server": "^3.11.2"
+	},
+	"dependencies": {
+		"@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",
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2"
+	},
+	"lint-staged": {
+		"**/*.[jt]s?(x)": [
+			"prettier-eslint --write",
+			"eslint --fix"
+		]
+	}
+}