xmlui 0.7.14 → 0.7.16

package/dist/scripts/src/components-core/AppRoot.js

@@ -0,0 +1,424 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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 jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_router_dom_1 = require("react-router-dom");
+const react_2 = require("@remix-run/react");
+const react_query_1 = require("@tanstack/react-query");
+const lodash_es_1 = require("lodash-es");
+const react_helmet_async_1 = require("react-helmet-async");
+const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
+const immer_1 = require("immer");
+const ErrorBoundary_1 = require("./ErrorBoundary");
+const ThemeProvider_1 = __importDefault(require("@components-core//theming/ThemeProvider"));
+const Container_1 = require("./container/Container");
+const misc_1 = require("@components-core/utils/misc");
+const constants_1 = require("@components-core/constants");
+const IconProvider_1 = require("@components/IconProvider");
+const date_fns_1 = require("date-fns");
+const AppContext_1 = require("@components-core/AppContext");
+const useApiInterceptorContext_1 = require("@components-core/interception/useApiInterceptorContext");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const reportEngineError_1 = require("@components-core/reportEngineError");
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const date_functions_1 = require("./appContext/date-functions");
+const misc_utils_1 = require("./appContext/misc-utils");
+const ComponentRegistryContext_1 = require("@components/ComponentRegistryContext");
+const abstractions_1 = require("@components-core/theming/abstractions");
+const ComponentProvider_1 = require("@components/ComponentProvider");
+const ConfirmationModalContextProvider_1 = require("@components/ModalDialog/ConfirmationModalContextProvider");
+const AppStateContext_1 = require("@components/App/AppStateContext");
+const hooks_1 = require("./utils/hooks");
+const InspectorContext_1 = require("@components-core/InspectorContext");
+const DebugViewProvider_1 = require("./DebugViewProvider");
+const package_json_1 = require("../../package.json");
+const math_function_1 = require("./appContext/math-function");
+// --- We want to enable the produce method of `immer` on Map objects
+(0, immer_1.enableMapSet)();
+// --- We use this object in the app context to represent the `QlientQuery`
+// --- of the react-query package.
+const queryClient = new react_query_1.QueryClient({
+    defaultOptions: {
+        queries: {
+            refetchOnWindowFocus: false,
+        },
+    },
+});
+// --- We pass these functions to the global app context
+const DateUtils = {
+    differenceInMinutes: (date1, date2) => {
+        return (0, date_fns_1.differenceInMinutes)(new Date(date1), new Date(date2));
+    },
+    isSameDay: (dateLeft, dateRight) => {
+        // console.log("IS SAME DAY", dateLeft, dateRight);
+        if (!dateLeft || !dateRight) {
+            return false;
+        }
+        return (0, date_fns_1.isSameDay)(new Date(dateLeft), new Date(dateRight));
+    },
+    isToday: (date) => {
+        return (0, date_fns_1.isToday)(new Date(date));
+    },
+    isThisYear: (date) => {
+        return (0, date_fns_1.isThisYear)(new Date(date));
+    },
+};
+// --- We pass this funtion to the global app context
+function signError(error) {
+    react_hot_toast_1.default.error(typeof error === "string" ? error : error.message || "Something went wrong");
+}
+/**
+ *  This component wraps the entire app into a container with these particular
+ *  responsibilities:
+ *  - Managing the application state
+ *  - Helping the app with viewport-related functionality (e.g., information
+ *    of viewport size, supporting responsive apps)
+ *  - Providing xmlui-defined methods and properties for apps, such as
+ *    `activeThemeId`, `navigate`, `toast`, and many others.
+ */
+function AppContent({ rootContainer, routerBaseName, globalProps, standalone, trackContainerHeight, decorateComponentsWithTestId, debugEnabled, }) {
+    const [loggedInUser, setLoggedInUser] = (0, react_1.useState)(null);
+    const debugView = (0, DebugViewProvider_1.useDebugView)();
+    const componentRegistry = (0, ComponentRegistryContext_1.useComponentRegistry)();
+    const navigate = (0, react_2.useNavigate)();
+    const { confirm } = (0, ConfirmationModalContextProvider_1.useConfirm)();
+    // --- Prepare theme-related variables. We will use them to manage the selected theme
+    // --- and also pass them to the app context.
+    const { activeThemeId, activeThemeTone, setActiveThemeId, setActiveThemeTone, availableThemeIds, root, toggleThemeTone, } = (0, ThemeContext_1.useThemes)();
+    // --- Handle special key combinations to change the theme and tone
+    (0, hooks_1.useDocumentKeydown)((event) => {
+        // --- Alt + Ctrl + Shift + T changes the current theme
+        if (event.code === "KeyT" && event.altKey && event.ctrlKey && event.shiftKey) {
+            setActiveThemeId(availableThemeIds[(availableThemeIds.indexOf(activeThemeId) + 1) % availableThemeIds.length]);
+        }
+        // --- Alt + Ctrl + Shift + O changes the current theme tone
+        if (event.code === "KeyO" && event.altKey && event.ctrlKey && event.shiftKey) {
+            setActiveThemeTone(abstractions_1.ThemeToneKeys[(abstractions_1.ThemeToneKeys.indexOf(activeThemeTone) + 1) % abstractions_1.ThemeToneKeys.length]);
+        }
+        // --- Alt + Ctrl + Shift + S toggles the current state view
+        if (event.code === "KeyS" && event.altKey && event.ctrlKey && event.shiftKey) {
+            debugView.setDisplayStateView(!debugView.displayStateView);
+        }
+    });
+    // --- We use the state variables to store the current media query values
+    const [maxWidthPhone, setMaxWidthPhone] = (0, react_1.useState)("0");
+    const [maxWidthPhoneLower, setMaxWidthPhoneLower] = (0, react_1.useState)("0");
+    const [maxWidthLandscapePhone, setMaxWidthLandscapePhone] = (0, react_1.useState)("0");
+    const [maxWidthLandscapePhoneLower, setMaxWidthLandscapePhoneLower] = (0, react_1.useState)("0");
+    const [maxWidthTablet, setMaxWidthTablet] = (0, react_1.useState)("0");
+    const [maxWidthTabletLower, setMaxWidthTabletLower] = (0, react_1.useState)("0");
+    const [maxWidthDesktop, setMaxWidthDesktop] = (0, react_1.useState)("0");
+    const [maxWidthDesktopLower, setMaxWidthDesktopLower] = (0, react_1.useState)("0");
+    const [maxWidthLargeDesktop, setMaxWidthLargeDesktop] = (0, react_1.useState)("0");
+    const [maxWidthLargeDesktopLower, setMaxWidthLargeDesktopLower] = (0, react_1.useState)("0");
+    // --- We create a lower dimension value for the media query using a range
+    const createLowerDimensionValue = (dimension) => {
+        const match = dimension.match(/^(\d+)px$/);
+        return match ? `${parseInt(match[1]) - 0.02}px` : "0";
+    };
+    // --- Whenever the size of the viewport changes, we update the values
+    // --- related to viewport size
+    const observer = (0, react_1.useRef)();
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        if (trackContainerHeight) {
+            if (root && root !== document.body) {
+                // --- We are already observing old element
+                if (observer === null || observer === void 0 ? void 0 : observer.current) {
+                    observer.current.unobserve(root);
+                }
+                observer.current = new ResizeObserver((entries) => {
+                    root.style.setProperty("--containerHeight", entries[0].contentRect.height + "px");
+                });
+                if (observer.current) {
+                    observer.current.observe(root);
+                }
+            }
+        }
+        return () => {
+            if (observer === null || observer === void 0 ? void 0 : observer.current) {
+                observer.current.unobserve(root);
+            }
+        };
+    }, [root, observer, trackContainerHeight]);
+    // --- Whenever the application root DOM object or the active theme changes, we sync
+    // --- with the theme variable values (because we can't use css var in media queries)
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        const mwPhone = getComputedStyle(root).getPropertyValue((0, themeVars_1.getVarKey)("media-max-width-phone"));
+        setMaxWidthPhone(mwPhone);
+        setMaxWidthPhoneLower(createLowerDimensionValue(mwPhone));
+        const mwLandscapePhone = getComputedStyle(root).getPropertyValue((0, themeVars_1.getVarKey)("media-max-width-landscape-phone"));
+        setMaxWidthLandscapePhone(mwLandscapePhone);
+        setMaxWidthLandscapePhoneLower(createLowerDimensionValue(mwLandscapePhone));
+        const mwTablet = getComputedStyle(root).getPropertyValue((0, themeVars_1.getVarKey)("media-max-width-tablet"));
+        setMaxWidthTablet(mwTablet);
+        setMaxWidthTabletLower(createLowerDimensionValue(mwTablet));
+        const mwDesktop = getComputedStyle(root).getPropertyValue((0, themeVars_1.getVarKey)("media-max-width-desktop"));
+        setMaxWidthDesktop(mwDesktop);
+        setMaxWidthDesktopLower(createLowerDimensionValue(mwDesktop));
+        const mwLargeDesktop = getComputedStyle(root).getPropertyValue((0, themeVars_1.getVarKey)("media-max-width-large-desktop"));
+        setMaxWidthLargeDesktop(mwLargeDesktop);
+        setMaxWidthLargeDesktopLower(createLowerDimensionValue(mwLargeDesktop));
+    }, [activeThemeId, root]);
+    // --- Set viewport size information
+    const isViewportPhone = (0, hooks_1.useMediaQuery)(`(max-width: ${maxWidthPhoneLower})`);
+    const isViewportLandscapePhone = (0, hooks_1.useMediaQuery)(`(min-width: ${maxWidthPhone}) and (max-width: ${maxWidthLandscapePhoneLower})`);
+    const isViewportTablet = (0, hooks_1.useMediaQuery)(`(min-width: ${maxWidthLandscapePhone}) and (max-width: ${maxWidthTabletLower})`);
+    const isViewportDesktop = (0, hooks_1.useMediaQuery)(`(min-width: ${maxWidthTablet}) and (max-width: ${maxWidthDesktopLower})`);
+    const isViewportLargeDesktop = (0, hooks_1.useMediaQuery)(`(min-width: ${maxWidthDesktop}) and (max-width: ${maxWidthLargeDesktopLower})`);
+    let vpSize = "xs";
+    let vpSizeIndex = 0;
+    const isViewportXlDesktop = (0, hooks_1.useMediaQuery)(`(min-width: ${maxWidthLargeDesktop})`);
+    if (isViewportXlDesktop) {
+        vpSize = "xxl";
+        vpSizeIndex = 5;
+    }
+    else if (isViewportLargeDesktop) {
+        vpSize = "xl";
+        vpSizeIndex = 4;
+    }
+    else if (isViewportDesktop) {
+        vpSize = "lg";
+        vpSizeIndex = 3;
+    }
+    else if (isViewportTablet) {
+        vpSize = "md";
+        vpSizeIndex = 2;
+    }
+    else if (isViewportLandscapePhone) {
+        vpSize = "sm";
+        vpSizeIndex = 1;
+    }
+    // --- Collect information about the current environment
+    const isInIFrame = (0, hooks_1.useIsInIFrame)();
+    const isWindowFocused = (0, hooks_1.useIsWindowFocused)();
+    const apiInterceptorContext = (0, useApiInterceptorContext_1.useApiInterceptorContext)();
+    const location = (0, react_2.useLocation)();
+    const lastHash = (0, react_1.useRef)("");
+    // listen to location change using useEffect with location as dependency
+    // https://jasonwatmore.com/react-router-v6-listen-to-location-route-change-without-history-listen
+    (0, react_1.useEffect)(() => {
+        if (location.hash) {
+            lastHash.current = location.hash.slice(1); // safe hash for further use after navigation
+        }
+        if (lastHash.current) {
+            setTimeout(() => {
+                var _a;
+                (_a = document
+                    .getElementById(lastHash.current)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "instant", block: "start" });
+                lastHash.current = "";
+            }, 100);
+        }
+    }, [location]);
+    // --- We collect all the actions defined in the app and pass them to the app context
+    const Actions = (0, react_1.useMemo)(() => {
+        const ret = {
+            _SUPPORT_IMPLICIT_CONTEXT: true,
+        };
+        for (const [key, value] of componentRegistry.actionFunctions) {
+            ret[key] = value;
+        }
+        return ret;
+    }, [componentRegistry.actionFunctions]);
+    // --- We collect information about app embedding and pass it to the app context
+    const embed = (0, react_1.useMemo)(() => {
+        return {
+            isInIFrame: isInIFrame,
+        };
+    }, [isInIFrame]);
+    // --- We collect information about the current environment and pass it to the app context
+    const environment = (0, react_1.useMemo)(() => {
+        return {
+            isWindowFocused,
+        };
+    }, [isWindowFocused]);
+    // --- We collect information about the current media size and pass it to the app context
+    const mediaSize = (0, react_1.useMemo)(() => {
+        return {
+            phone: isViewportPhone,
+            landscapePhone: isViewportLandscapePhone,
+            tablet: isViewportTablet,
+            desktop: isViewportDesktop,
+            largeDesktop: isViewportLargeDesktop,
+            xlDesktop: isViewportXlDesktop,
+            smallScreen: isViewportPhone || isViewportLandscapePhone || isViewportTablet,
+            largeScreen: !(isViewportPhone || isViewportLandscapePhone || isViewportTablet),
+            size: vpSize,
+            sizeIndex: vpSizeIndex,
+        };
+    }, [
+        isViewportPhone,
+        isViewportLandscapePhone,
+        isViewportTablet,
+        isViewportDesktop,
+        isViewportLargeDesktop,
+        isViewportXlDesktop,
+        vpSize,
+        vpSizeIndex,
+    ]);
+    // --- We extract the global properties from the app configuration and pass them to the app context
+    const appGlobals = (0, react_1.useMemo)(() => {
+        return globalProps ? Object.assign({}, globalProps) : constants_1.EMPTY_OBJECT;
+    }, [globalProps]);
+    // --- We assemble the app context object form the collected information
+    const appContextValue = (0, react_1.useMemo)(() => {
+        const ret = Object.assign(Object.assign(Object.assign(Object.assign({ 
+            // --- Engine-related
+            version: package_json_1.version,
+            // --- Actions namespace
+            Actions,
+            // --- App-specific
+            appGlobals,
+            debugEnabled,
+            decorateComponentsWithTestId,
+            environment,
+            mediaSize,
+            queryClient,
+            standalone }, date_functions_1.dateFunctions), math_function_1.mathFunctions), { 
+            // --- File Utilities
+            formatFileSizeInBytes: misc_1.formatFileSizeInBytes,
+            getFileExtension: misc_1.getFileExtension,
+            // --- Navigation-related
+            navigate,
+            routerBaseName,
+            // --- Notifications and dialogs
+            confirm,
+            signError,
+            toast: react_hot_toast_1.default,
+            // --- Theme-related
+            activeThemeId,
+            activeThemeTone,
+            availableThemeIds, setTheme: setActiveThemeId, setThemeTone: setActiveThemeTone, toggleThemeTone,
+            // --- User-related
+            loggedInUser,
+            setLoggedInUser,
+            delay: misc_1.delay,
+            DateUtils,
+            embed,
+            apiInterceptorContext, getPropertyByPath: lodash_es_1.get }), misc_utils_1.miscellaneousUtils);
+        return ret;
+    }, [
+        Actions,
+        activeThemeId,
+        activeThemeTone,
+        apiInterceptorContext,
+        availableThemeIds,
+        confirm,
+        debugEnabled,
+        decorateComponentsWithTestId,
+        embed,
+        environment,
+        appGlobals,
+        loggedInUser,
+        mediaSize,
+        navigate,
+        routerBaseName,
+        setActiveThemeId,
+        setActiveThemeTone,
+        toggleThemeTone,
+        standalone,
+    ]);
+    // --- We prepare the helper infrastructure for the `AppState` component, which manages
+    // --- app-wide state using buckets (state sections).
+    const [appState, setAppState] = (0, react_1.useState)(constants_1.EMPTY_OBJECT);
+    const registerAppState = (0, react_1.useCallback)((bucket, initialValue) => {
+        setAppState((prev) => {
+            return Object.assign(Object.assign({}, prev), { [bucket]: initialValue });
+        });
+    }, []);
+    const update = (0, react_1.useCallback)((bucket, patch) => {
+        setAppState((prev) => {
+            return Object.assign(Object.assign({}, prev), { [bucket]: Object.assign(Object.assign({}, (prev[bucket] || {})), patch) });
+        });
+    }, []);
+    const appStateContextValue = (0, react_1.useMemo)(() => {
+        return {
+            registerAppState,
+            appState,
+            update,
+        };
+    }, [appState, registerAppState, update]);
+    const memoedVars = (0, react_1.useRef)(new Map());
+    return ((0, jsx_runtime_1.jsx)(AppContext_1.AppContext.Provider, { value: appContextValue, children: (0, jsx_runtime_1.jsx)(AppStateContext_1.AppStateContext.Provider, { value: appStateContextValue, children: (0, Container_1.renderRoot)(rootContainer, memoedVars) }) }));
+}
+/**
+ * This React component is intended to be the root component in a browser window. It handles the application state
+ * changes, routing, and theming, provides an error boundary, and handles a few other aspects.
+ */
+const AppWrapper = ({ node, previewMode = false, servedFromSingleFile = false, routerBaseName: baseName = "", contributes = constants_1.EMPTY_OBJECT, globalProps, standalone, trackContainerHeight, decorateComponentsWithTestId, debugEnabled, defaultTheme, defaultTone, resources, resourceMap, sources, }) => {
+    var _a;
+    if (previewMode) {
+        //to prevent leaking the meta items to the parent document, if it lives in an iframe (e.g. docs)
+        react_helmet_async_1.HelmetProvider.canUseDOM = false;
+    }
+    const siteName = (globalProps === null || globalProps === void 0 ? void 0 : globalProps.name) || "XMLUI app";
+    const useHashBasedRouting = (_a = globalProps === null || globalProps === void 0 ? void 0 : globalProps.useHashBasedRouting) !== null && _a !== void 0 ? _a : true;
+    const dynamicChildren = ((0, jsx_runtime_1.jsxs)(react_helmet_async_1.HelmetProvider, { children: [(0, jsx_runtime_1.jsx)(react_helmet_async_1.Helmet, { defaultTitle: siteName, titleTemplate: `%s | ${siteName}` }), (0, jsx_runtime_1.jsx)(IconProvider_1.IconProvider, { children: (0, jsx_runtime_1.jsx)(ThemeProvider_1.default, { resourceMap: resourceMap, themes: contributes.themes, defaultTheme: defaultTheme, defaultTone: defaultTone, resources: resources, children: (0, jsx_runtime_1.jsx)(InspectorContext_1.InspectorProvider, { sources: sources, children: (0, jsx_runtime_1.jsx)(ConfirmationModalContextProvider_1.ConfirmationModalContextProvider, { children: (0, jsx_runtime_1.jsx)(AppContent, { rootContainer: node, routerBaseName: baseName, globalProps: globalProps, standalone: standalone, trackContainerHeight: trackContainerHeight, decorateComponentsWithTestId: decorateComponentsWithTestId, debugEnabled: debugEnabled }) }) }) }) })] }));
+    const Router = previewMode
+        ? react_router_dom_1.MemoryRouter
+        : servedFromSingleFile || useHashBasedRouting
+            ? react_router_dom_1.HashRouter
+            : react_router_dom_1.BrowserRouter;
+    return ((0, jsx_runtime_1.jsx)(react_1.default.StrictMode, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: node, location: "root-outer", children: (0, jsx_runtime_1.jsxs)(react_query_1.QueryClientProvider, { client: queryClient, children: [(typeof window === "undefined" || process.env.VITE_REMIX) && dynamicChildren, !(typeof window === "undefined" || process.env.VITE_REMIX) && ((0, jsx_runtime_1.jsx)(Router, { basename: Router === react_router_dom_1.HashRouter ? undefined : baseName, children: dynamicChildren }))] }) }) }));
+};
+/**
+ * This component runs the app in the context of the registered components
+ * (including the core xmlui components and external ones passed to this
+ * component.
+ */
+function AppRoot({ apiInterceptor, contributes, node, decorateComponentsWithTestId, debugEnabled, defaultTheme, defaultTone, resources, globalProps, standalone, trackContainerHeight, routerBaseName, previewMode, servedFromSingleFile, resourceMap, sources, componentManager, }) {
+    const rootNode = (0, react_1.useMemo)(() => {
+        const themedRoot = node.type === "Theme"
+            ? Object.assign(Object.assign({}, node), { props: Object.assign(Object.assign({}, node.props), { root: true }) }) : {
+            type: "Theme",
+            props: {
+                root: true,
+            },
+            children: [node],
+        };
+        return {
+            type: "Container",
+            uid: "root",
+            children: [themedRoot],
+            uses: [],
+        };
+    }, [node]);
+    (0, reportEngineError_1.resetErrors)();
+    return ((0, jsx_runtime_1.jsx)(ComponentProvider_1.ComponentProvider, { contributes: contributes, componentManager: componentManager, children: (0, jsx_runtime_1.jsx)(DebugViewProvider_1.DebugViewProvider, { debugConfig: globalProps === null || globalProps === void 0 ? void 0 : globalProps.debug, children: (0, jsx_runtime_1.jsx)(AppWrapper, { resourceMap: resourceMap, apiInterceptor: apiInterceptor, node: rootNode, contributes: contributes, resources: resources, routerBaseName: routerBaseName, decorateComponentsWithTestId: decorateComponentsWithTestId, debugEnabled: debugEnabled, defaultTheme: defaultTheme, defaultTone: defaultTone, globalProps: globalProps, standalone: standalone, trackContainerHeight: trackContainerHeight, previewMode: previewMode, servedFromSingleFile: servedFromSingleFile, sources: sources }) }) }));
+}
+exports.default = AppRoot;