@j2inn/fin5-ui-utils 0.0.1-alpha.3 → 0.0.1-alpha.4

package/dist/fantomProps/fantomPropsToObject.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseFantomProps = void 0;
 /**
  * Convert the given fantom props as string to JS object (@see https://fantom.org/doc/sys/InStream#readProps)
  */
-function fantomPropsToObject(props) {
+export default function fantomPropsToObject(props) {
     let i = 0;
     const readChar = () => {
         if (i < props.length) {
@@ -21,7 +18,6 @@ function fantomPropsToObject(props) {
     };
     return parseFantomProps(readChar, unreadChar);
 }
-exports.default = fantomPropsToObject;
 var UTF_8;
 (function (UTF_8) {
     UTF_8[UTF_8["tab"] = 9] = "tab";
@@ -55,7 +51,7 @@ const hex = function (c) {
  * 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
  */
-function parseFantomProps(readChar, unreadChar) {
+export function parseFantomProps(readChar, unreadChar) {
     const props = {};
     let name = '';
     let value = null;
@@ -177,4 +173,3 @@ function parseFantomProps(readChar, unreadChar) {
         throw new Error('Invalid name/value pair [Line ' + lineNum + ']');
     return props;
 }
-exports.parseFantomProps = parseFantomProps;

package/dist/fantomProps/generateJsonFromFantomPropsFile.js

@@ -1,37 +1,8 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const fs = __importStar(require("fs"));
-const readFantomPropsFile_1 = __importDefault(require("./readFantomPropsFile"));
-async function generateJsonFromFantomPropsFile(inputPath = '../locale/en.props', outputPath = './src/localeKeys.json') {
-    const result = await (0, readFantomPropsFile_1.default)(inputPath);
+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;
     });
 }
-exports.default = generateJsonFromFantomPropsFile;

package/dist/fantomProps/index.js

@@ -1,19 +1,3 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./fantomPropsToObject"), exports);
-__exportStar(require("./generateJsonFromFantomPropsFile"), exports);
-__exportStar(require("./readFantomPropsFile"), exports);
+export * from './fantomPropsToObject';
+export * from './generateJsonFromFantomPropsFile';
+export * from './readFantomPropsFile';

package/dist/fantomProps/readFantomPropsFile.js

@@ -1,34 +1,9 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const fs = __importStar(require("fs"));
-const fantomPropsToObject_1 = require("./fantomPropsToObject");
+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)
  */
-function readFantomPropsFile(path) {
+export default function readFantomPropsFile(path) {
     return new Promise((resolve, reject) => {
         const fileStream = fs.createReadStream(path);
         fileStream.once('readable', function () {
@@ -39,7 +14,7 @@ function readFantomPropsFile(path) {
                 return fileStream.unshift(new Uint8Array([char]));
             };
             try {
-                resolve((0, fantomPropsToObject_1.parseFantomProps)(readChar, unreadChar));
+                resolve(parseFantomProps(readChar, unreadChar));
             }
             catch (error) {
                 reject(error);
@@ -55,4 +30,3 @@ function readFantomPropsFile(path) {
         });
     });
 }
-exports.default = readFantomPropsFile;

package/dist/fin5Top/fin5Top.js

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Fin5AppNames = exports.isWindowTopFin5 = exports.fin5Top = exports.getFin5top = void 0;
 class Fin5TopRetriever {
     static _fin5Top;
     static get fin5Top() {
@@ -15,9 +12,9 @@ class Fin5TopRetriever {
         return this._fin5Top;
     };
 }
-exports.getFin5top = Fin5TopRetriever.getFin5top;
-exports.fin5Top = Fin5TopRetriever.fin5Top;
-function isWindowTopFin5(notifyFailure) {
+export const getFin5top = Fin5TopRetriever.getFin5top;
+export const fin5Top = Fin5TopRetriever.fin5Top;
+export function isWindowTopFin5(notifyFailure) {
     try {
         window?.top?.origin;
         if (window.top.finstack) {
@@ -33,8 +30,7 @@ function isWindowTopFin5(notifyFailure) {
         return false;
     }
 }
-exports.isWindowTopFin5 = isWindowTopFin5;
-var Fin5AppNames;
+export var Fin5AppNames;
 (function (Fin5AppNames) {
     Fin5AppNames["EQUIP"] = "equip";
     Fin5AppNames["GRAPHICS"] = "graphics";
@@ -52,4 +48,4 @@ var Fin5AppNames;
     Fin5AppNames["LOGOUT"] = "logout";
     Fin5AppNames["GENERIC"] = "generic";
     Fin5AppNames["REPORTS"] = "reports";
-})(Fin5AppNames = exports.Fin5AppNames || (exports.Fin5AppNames = {}));
+})(Fin5AppNames || (Fin5AppNames = {}));

package/dist/fin5Top/getFin5BinUrl.js

@@ -1,6 +1,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFin5BinUrl = void 0;
-const fin5Top_1 = require("./fin5Top");
-const getFin5BinUrl = (id) => `/finGetFile/${fin5Top_1.fin5Top?.finstack?.projectName}?fileRef=${id?.toString()}`;
-exports.getFin5BinUrl = getFin5BinUrl;
+import { fin5Top } from './fin5Top';
+export const getFin5BinUrl = (id) => `/finGetFile/${fin5Top?.finstack?.projectName}?fileRef=${id?.toString()}`;

package/dist/fin5Top/index.js

@@ -1,20 +1,4 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./fin5Top"), exports);
-__exportStar(require("./getFin5BinUrl"), exports);
-__exportStar(require("./openFin5Alarm"), exports);
-__exportStar(require("./openFin5Historian"), exports);
+export * from './fin5Top';
+export * from './getFin5BinUrl';
+export * from './openFin5Alarm';
+export * from './openFin5Historian';

package/dist/fin5Top/openFin5Alarm.js

@@ -1,20 +1,16 @@
-"use strict";
 //////////////////////////////////////////////////////////////////////////
 // Alarms
 //////////////////////////////////////////////////////////////////////////
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.openFin5AlarmsApp = void 0;
-const fin5Top_1 = require("./fin5Top");
-const openFin5AlarmsApp = async ({ targetRef, filter, historical = false, }) => {
-    await fin5Top_1.fin5Top?.app.NavigateToApp(fin5Top_1.fin5Top?.app?.APP_NAMES?.ALARMS, targetRef);
-    fin5Top_1.fin5Top?.app.ToggleCollapse(false);
-    let alarmFilters = fin5Top_1.fin5Top?.app?.GetAlarmFilters() ?? {};
+import { fin5Top } from './fin5Top';
+export const openFin5AlarmsApp = async ({ targetRef, filter, historical = false, }) => {
+    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_1.fin5Top?.app?.SetAlarmFilters(alarmFilters, historical);
+    fin5Top?.app?.SetAlarmFilters(alarmFilters, historical);
 };
-exports.openFin5AlarmsApp = openFin5AlarmsApp;

package/dist/fin5Top/openFin5Historian.js

@@ -1,16 +1,12 @@
-"use strict";
 //////////////////////////////////////////////////////////////////////////
 // Historian
 //////////////////////////////////////////////////////////////////////////
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.openFin5HistorianApp = void 0;
-const fin5Top_1 = require("./fin5Top");
-const openFin5HistorianApp = async (queryType, args) => {
-    if (fin5Top_1.fin5Top) {
+import { fin5Top } from './fin5Top';
+export const openFin5HistorianApp = async (queryType, args) => {
+    if (fin5Top) {
         queryType && args
-            ? fin5Top_1.fin5Top.app.OpenHistorianWithOptions(queryType, args)
-            : fin5Top_1.fin5Top.app.NavigateToApp(fin5Top_1.fin5Top.app.APP_NAMES.TREND_LIST);
-        fin5Top_1.fin5Top?.app.ToggleCollapse(false);
+            ? fin5Top.app.OpenHistorianWithOptions(queryType, args)
+            : fin5Top.app.NavigateToApp(fin5Top.app.APP_NAMES.TREND_LIST);
+        fin5Top?.app.ToggleCollapse(false);
     }
 };
-exports.openFin5HistorianApp = openFin5HistorianApp;

package/dist/index.js

@@ -1,19 +1,3 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./fantomProps"), exports);
-__exportStar(require("./fin5Top"), exports);
-__exportStar(require("./react/components"), exports);
+export * from './fantomProps';
+export * from './fin5Top';
+export * from './react/components';

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

@@ -1,12 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ErrorDisplayer = exports.DefaultErrorBoundary = void 0;
-const ui_1 = require("@j2inn/ui");
-const react_1 = __importDefault(require("react"));
-class DefaultErrorBoundary extends react_1.default.Component {
+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.
@@ -19,25 +13,23 @@ class DefaultErrorBoundary extends react_1.default.Component {
     render() {
         if (this.state.error) {
             // You can render any custom fallback UI
-            return (<exports.ErrorDisplayer error={this.state.error} extra={[
-                    <ui_1.Button type='primary' key='refresh' onClick={() => window.location.reload()}>
+            return (<ErrorDisplayer error={this.state.error} extra={[
+                    <Button type='primary' key='refresh' onClick={() => window.location.reload()}>
 							Refresh The Page
-						</ui_1.Button>,
+						</Button>,
                 ]}/>);
         }
         return this.props.children;
     }
 }
-exports.DefaultErrorBoundary = DefaultErrorBoundary;
-const ErrorDisplayer = ({ error, extra, }) => {
-    return (<ui_1.Result status='error' title='Ouch... Something Went Wrong' subTitle={<ui_1.Container center>
-					<ui_1.Collapse style={{ width: 600, textAlign: 'left' }}>
-						<ui_1.Collapse.Panel header={`${error.toString()}`} key='1'>
-							<ui_1.Typography.Text style={{ width: 400 }}>
+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}
-							</ui_1.Typography.Text>
-						</ui_1.Collapse.Panel>
-					</ui_1.Collapse>
-				</ui_1.Container>} extra={extra}/>);
+							</Typography.Text>
+						</Collapse.Panel>
+					</Collapse>
+				</Container>} extra={extra}/>);
 };
-exports.ErrorDisplayer = ErrorDisplayer;

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

@@ -1,11 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const ui_1 = require("@j2inn/ui");
-const react_1 = __importDefault(require("react"));
-const LoadingSpinner = () => (<ui_1.Container center style={{ height: '100%', width: '100%' }}>
-		<ui_1.Spin size='large'></ui_1.Spin>
-	</ui_1.Container>);
-exports.default = LoadingSpinner;
+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.js

@@ -1,21 +1,5 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./DefaultErrorBoundary"), exports);
-__exportStar(require("./LoadingSpinner"), exports);
-__exportStar(require("./navigation/BasicLayout"), exports);
-__exportStar(require("./navigation/MenuPage"), exports);
-__exportStar(require("./navigation/Router"), exports);
+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.jsx

@@ -1,58 +1,32 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BasicLayout = void 0;
-const icons_1 = require("@ant-design/icons");
-const ui_1 = require("@j2inn/ui");
-const react_1 = __importStar(require("react"));
-const DefaultErrorBoundary_1 = require("../../DefaultErrorBoundary");
-const MenuPage_1 = require("../MenuPage");
-const Router_1 = require("../Router");
+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 = ui_1.Layout.Sider;
-const Sider = ui_1.Layout.Sider;
-const Content = ui_1.Layout.Sider;
+const Header = Layout.Sider;
+const Sider = Layout.Sider;
+const Content = Layout.Sider;
 const DEFAULT_UNCOLLAPSED_MENU_WIDTH = 45;
 const COLLAPSED_MENU_WIDTH = 0;
-const BasicLayout = ({ pages, defaultPage = pages[0].key, onPageChange, uncollapsedMenuWidth = DEFAULT_UNCOLLAPSED_MENU_WIDTH, menuProps, }) => {
-    const [currentPage, setCurrentPage] = (0, react_1.useState)(defaultPage);
+export const BasicLayout = ({ pages, defaultPage = pages[0].key, onPageChange, uncollapsedMenuWidth = DEFAULT_UNCOLLAPSED_MENU_WIDTH, menuProps, }) => {
+    const [currentPage, setCurrentPage] = useState(defaultPage);
     // Fire onChange
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         onPageChange?.(currentPage);
     }, [currentPage]);
     // manage mobile navigation
-    const [isMobile, setIsMobile] = (0, react_1.useState)(false);
-    const [hiddenSider, setHiddenSider] = (0, react_1.useState)(true);
+    const [isMobile, setIsMobile] = useState(false);
+    const [hiddenSider, setHiddenSider] = useState(true);
     const actualMenuWidth = hiddenSider && isMobile ? COLLAPSED_MENU_WIDTH : uncollapsedMenuWidth;
-    return (<ui_1.Layout hasSider>
+    return (<Layout hasSider>
 			{isMobile && (<Header style={{
                 position: 'fixed',
                 width: '100%',
                 zIndex: 1000,
             }}>
-					{react_1.default.createElement(hiddenSider ? icons_1.MenuUnfoldOutlined : icons_1.MenuFoldOutlined, {
+					{React.createElement(hiddenSider ? MenuUnfoldOutlined : MenuFoldOutlined, {
                 className: 'antd-menu-custom-header-trigger',
                 onClick: () => {
                     setHiddenSider(!hiddenSider);
@@ -74,11 +48,11 @@ const BasicLayout = ({ pages, defaultPage = pages[0].key, onPageChange, uncollap
                 ? uncollapsedMenuWidth
                 : COLLAPSED_MENU_WIDTH,
         }}>
-				<ui_1.Menu mode='inline' {...menuProps} items={pages} selectedKeys={[currentPage]} onSelect={({ key }) => {
+				<Menu mode='inline' {...menuProps} items={pages} selectedKeys={[currentPage]} onSelect={({ key }) => {
             if (!hiddenSider) {
                 setHiddenSider(true);
             }
-            const page = (0, MenuPage_1.getPage)(pages, key);
+            const page = getPage(pages, key);
             if (page?.component) {
                 setCurrentPage(key);
             }
@@ -90,12 +64,11 @@ const BasicLayout = ({ pages, defaultPage = pages[0].key, onPageChange, uncollap
                 ? uncollapsedMenuWidth
                 : COLLAPSED_MENU_WIDTH,
         }}>
-				<Router_1.Router pages={pages} currentPage={currentPage ?? defaultPage} fallbackComponent={<DefaultErrorBoundary_1.ErrorDisplayer error={new Error('Page Not Found')} extra={[
-                <ui_1.Button type='primary' key='refresh' onClick={() => setCurrentPage(defaultPage)}>
+				<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
-								</ui_1.Button>,
+								</Button>,
             ]}/>}/>
 			</Content>
-		</ui_1.Layout>);
+		</Layout>);
 };
-exports.BasicLayout = BasicLayout;

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

@@ -1,28 +1,23 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAllSubPages = exports.pageTreeToPageList = exports.getPage = void 0;
 /**
  * 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
  */
-function getPage(pages, name) {
+export function getPage(pages, name) {
     return pageTreeToPageList(pages).find((page) => page.key === name && !page.disabled);
 }
-exports.getPage = getPage;
 /**
  * Expands the list of pages to include all the subpages
  */
-function pageTreeToPageList(pages) {
+export function pageTreeToPageList(pages) {
     return pages.flatMap((page) => getAllSubPages(page));
 }
-exports.pageTreeToPageList = pageTreeToPageList;
 /**
  * Recursively get all the subPages of a root page
  * @param page root page
  * @returns the whole tree of subPages as a list
  */
-function getAllSubPages(page) {
+export function getAllSubPages(page) {
     if (page.children) {
         return [page].concat(...page.children.map((subPage) => getAllSubPages(subPage)));
     }
@@ -30,4 +25,3 @@ function getAllSubPages(page) {
         return [page];
     }
 }
-exports.getAllSubPages = getAllSubPages;

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

@@ -1,45 +1,15 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Router = void 0;
-const react_1 = __importStar(require("react"));
-const LoadingSpinner_1 = __importDefault(require("../LoadingSpinner"));
-const MenuPage_1 = require("./MenuPage");
+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
  */
-function Router({ pages, currentPage, onPageChange, fallbackComponent, }) {
-    const page = (0, react_1.useMemo)(() => (0, MenuPage_1.getPage)(pages, currentPage), [pages, currentPage]);
-    (0, react_1.useEffect)(() => {
+export function Router({ pages, currentPage, onPageChange, fallbackComponent, }) {
+    const page = useMemo(() => getPage(pages, currentPage), [pages, currentPage]);
+    useEffect(() => {
         onPageChange?.(page);
     }, [page]);
-    return page?.component ? (<react_1.Suspense fallback={<LoadingSpinner_1.default />}>
-			{react_1.default.createElement(page.component, page?.props)}
-		</react_1.Suspense>) : (fallbackComponent ?? <div>{currentPage} page not found</div>);
+    return page?.component ? (<Suspense fallback={<LoadingSpinner />}>
+			{React.createElement(page.component, page?.props)}
+		</Suspense>) : (fallbackComponent ?? <div>{currentPage} page not found</div>);
 }
-exports.Router = Router;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@j2inn/fin5-ui-utils",
-	"version": "0.0.1-alpha.3",
+	"version": "0.0.1-alpha.4",
 	"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",