@ramesesinc/platform-core 0.1.0

package/dist/components/view/PopupView.tsx

@@ -0,0 +1,160 @@
+import { getError } from "@ramesesinc/client";
+import clsx from "clsx";
+import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { twMerge } from "tailwind-merge";
+import { EventHandler } from "../../core";
+import Page from "../../core/Page";
+import { PageViewContextValue, PageViewHandle, PageViewProvider } from "../../core/PageViewContext";
+
+type PopupViewProps = {
+  url: string;
+  popupClassName?: string;
+  onClose?: () => void;
+  eventHandler?: EventHandler | null;
+};
+
+const PopupView = (props: PopupViewProps) => {
+  const { url, popupClassName, onClose = () => {}, eventHandler } = props ?? {};
+
+  const [paths, setPaths] = useState<string[]>([]);
+
+  const providerRef = useRef<PageViewContextValue>({} as PageViewContextValue);
+  const slotRef = useRef<PopupSlotHandle>(null);
+
+  const [newRootPath, setNewRootPath] = useState<string | null>(null);
+  const [reInitPage, setReInitPage] = useState(true);
+
+  const mainPath = useRef("");
+
+  const defaultPopupClass = `bg-white rounded-lg shadow-xl w-[90%] h-[90%] flex flex-col`;
+  const finalPopupClass = twMerge(clsx(defaultPopupClass, popupClassName));
+
+  const loadPage = (path: string | null) => {
+    // console.log("popupview load page", path);
+    let comp = null;
+    try {
+      const key = "page-" + Math.random().toString(36).slice(2);
+      comp = <Page url={path} key={key} />;
+    } catch (error: any) {
+      const e = getError(error);
+      comp = <div>{e.message}</div>;
+    }
+
+    // update the child slot
+    slotRef.current?.update(comp, finalPopupClass, onClose);
+  };
+
+  useEffect(() => {
+    // console.log("popupview change url", url);
+    const paths = (url == null || url.trim() === "" ? "" : url).split("#");
+    const [firstPath] = paths;
+    mainPath.current = firstPath;
+    setPaths(paths);
+  }, [url]);
+
+  useEffect(() => {
+    // this routine is for the initial loading
+    // console.log("popupview change paths", paths);
+    loadPage(mainPath.current);
+    setReInitPage(false);
+  }, [paths]);
+
+  useEffect(() => {
+    if (reInitPage) {
+      // let the initial loading take effect
+      return;
+    }
+
+    loadPage(newRootPath);
+  }, [newRootPath]);
+
+  const pageViewHandle = {
+    displayName: "PopupView#pageViewHandle",
+    init: (ref: PageViewContextValue) => {
+      providerRef.current = ref;
+    },
+    renderPage: (page: string) => {
+      setNewRootPath(page);
+    },
+    isStandalone: () => true,
+  } as PageViewHandle;
+
+  return (
+    <PageViewProvider prefix="popup" paths={paths} handle={pageViewHandle} eventHandler={eventHandler}>
+      <ChildrenSlot ref={slotRef} />
+    </PageViewProvider>
+  );
+};
+
+export default PopupView;
+
+type PopupSlotHandle = {
+  update: (content: React.ReactNode, popupClassName: string, onClose: () => void) => void;
+};
+
+const ChildrenSlot = memo(
+  forwardRef<PopupSlotHandle>((_, ref) => {
+    const [content, setContent] = useState<React.ReactNode>(null);
+
+    const optionsRef = useRef<Record<string, any>>({});
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        update: (content: React.ReactNode, popupClassName: string, onClose: () => void) => {
+          const options = { popupClassName, onClose };
+          setContent(wrapContent(content, options));
+          optionsRef.current = options;
+        },
+      }),
+      [],
+    );
+
+    const handleClose = () => {
+      setContent(null);
+
+      const { onClose } = optionsRef.current;
+      if (onClose != null && typeof onClose === "function") {
+        onClose();
+      }
+    };
+
+    const wrapContent = (comp: React.ReactNode, options: Record<string, any>): React.ReactNode => {
+      if (comp == null) {
+        return null;
+      }
+
+      const { popupClassName } = options;
+      return (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className={popupClassName}>
+            {/* Header */}
+            <div className="flex items-center justify-between px-4 py-3 border-b">
+              <h2 className="text-lg font-semibold">Page Viewer</h2>
+              <button onClick={handleClose} className="w-8 h-8 flex items-center justify-center rounded-md hover:bg-gray-100 transition-colors">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <line x1="18" y1="6" x2="6" y2="18"></line>
+                  <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+              </button>
+            </div>
+            {/* Content */}
+            <div className="flex-1 overflow-hidden">{comp}</div>
+          </div>
+        </div>
+      );
+    };
+
+    return <>{content == null ? null : content}</>;
+  }),
+);

package/dist/components/view/RootView.d.ts

@@ -0,0 +1,8 @@
+import { EventHandler } from "../../core";
+type RootViewProps = {
+    url: string;
+    eventHandler?: EventHandler | null;
+    standalone?: boolean;
+};
+declare const RootView: (props: RootViewProps) => import("react/jsx-runtime").JSX.Element;
+export default RootView;

package/dist/components/view/RootView.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { getError } from "@ramesesinc/client";
+import { forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import Page from "../../core/Page";
+import { PageViewProvider } from "../../core/PageViewContext";
+const RootView = (props) => {
+    const { url, eventHandler, standalone = true } = props !== null && props !== void 0 ? props : {};
+    const [paths, setPaths] = useState([]);
+    const mainPath = useRef("");
+    const [newRootPath, setNewRootPath] = useState(null);
+    const [reInitPage, setReInitPage] = useState(true);
+    const providerRef = useRef({});
+    const loadPage = (path) => {
+        var _a;
+        let comp = null;
+        try {
+            // console.log("RootView loadPage", path); // main#tasklist
+            const pageUUID = "page-" + Math.random().toString(36).slice(2);
+            comp = _jsx(Page, { url: path }, pageUUID);
+        }
+        catch (error) {
+            const e = getError(error);
+            // console.log("rootview loadpage error", e);
+            comp = _jsx("div", { children: e.message });
+        }
+        // update provider paths but maintain the rootPath
+        // providerRef.current?.updatePaths(newPaths);
+        // update the child slot
+        (_a = slotRef.current) === null || _a === void 0 ? void 0 : _a.update(comp);
+    };
+    useLayoutEffect(() => {
+        const paths = (url == null || url.trim() === "" ? "" : url).split("#");
+        // console.log("RootView useLayoutEffect ", url, paths);
+        const [firstPath] = paths;
+        mainPath.current = firstPath;
+        setPaths(paths);
+    }, [url]);
+    useEffect(() => {
+        // this routine is for the initial loading
+        // pass the original url
+        loadPage(url);
+        setReInitPage(false);
+    }, [paths]);
+    useEffect(() => {
+        if (reInitPage) {
+            // let the initial loading take effect
+            return;
+        }
+        loadPage(newRootPath);
+    }, [newRootPath]);
+    const pageViewHandle = {
+        displayName: "RootView#pageViewHandle",
+        init: (ref) => {
+            providerRef.current = ref;
+        },
+        renderPage: (page) => {
+            // console.log("RootView renderPage", page);
+            setNewRootPath(page);
+        },
+        isStandalone: () => standalone,
+    };
+    const slotRef = useRef(null);
+    return (_jsx(PageViewProvider, { prefix: "root", paths: paths, handle: pageViewHandle, eventHandler: eventHandler, children: _jsx(ChildrenSlot, { ref: slotRef }) }));
+};
+export default RootView;
+const ChildrenSlot = memo(forwardRef((_, ref) => {
+    const [content, setContent] = useState(null);
+    useImperativeHandle(ref, () => ({
+        update: (content) => {
+            // console.log("childrenslot update", content);
+            setContent(content);
+        },
+    }), []);
+    return _jsx(_Fragment, { children: content == null ? null : content });
+}));

package/dist/components/view/RootView.tsx

@@ -0,0 +1,109 @@
+import { getError } from "@ramesesinc/client";
+import { forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { EventHandler } from "../../core";
+import Page from "../../core/Page";
+import { PageViewContextValue, PageViewHandle, PageViewProvider } from "../../core/PageViewContext";
+
+type RootViewProps = {
+  url: string;
+  eventHandler?: EventHandler | null;
+  standalone?: boolean;
+};
+
+const RootView = (props: RootViewProps) => {
+  const { url, eventHandler, standalone = true } = props ?? {};
+
+  const [paths, setPaths] = useState<string[]>([]);
+
+  const mainPath = useRef("");
+
+  const [newRootPath, setNewRootPath] = useState<string | null>(null);
+  const [reInitPage, setReInitPage] = useState(true);
+
+  const providerRef = useRef<PageViewContextValue>({} as PageViewContextValue);
+
+  const loadPage = (path: string | null) => {
+    let comp = null;
+    try {
+      // console.log("RootView loadPage", path); // main#tasklist
+      const pageUUID = "page-" + Math.random().toString(36).slice(2);
+      comp = <Page url={path} key={pageUUID} />;
+    } catch (error: any) {
+      const e = getError(error);
+      // console.log("rootview loadpage error", e);
+      comp = <div>{e.message}</div>;
+    }
+    // update provider paths but maintain the rootPath
+    // providerRef.current?.updatePaths(newPaths);
+    // update the child slot
+    slotRef.current?.update(comp);
+  };
+
+  useLayoutEffect(() => {
+    const paths = (url == null || url.trim() === "" ? "" : url).split("#");
+    // console.log("RootView useLayoutEffect ", url, paths);
+    const [firstPath] = paths;
+    mainPath.current = firstPath;
+    setPaths(paths);
+  }, [url]);
+
+  useEffect(() => {
+    // this routine is for the initial loading
+    // pass the original url
+    loadPage(url);
+    setReInitPage(false);
+  }, [paths]);
+
+  useEffect(() => {
+    if (reInitPage) {
+      // let the initial loading take effect
+      return;
+    }
+
+    loadPage(newRootPath);
+  }, [newRootPath]);
+
+  const pageViewHandle = {
+    displayName: "RootView#pageViewHandle",
+    init: (ref: PageViewContextValue) => {
+      providerRef.current = ref;
+    },
+    renderPage: (page: string) => {
+      // console.log("RootView renderPage", page);
+      setNewRootPath(page);
+    },
+    isStandalone: () => standalone,
+  } as PageViewHandle;
+
+  const slotRef = useRef<ChildrenSlotHandle>(null);
+
+  return (
+    <PageViewProvider prefix="root" paths={paths} handle={pageViewHandle} eventHandler={eventHandler}>
+      <ChildrenSlot ref={slotRef} />
+    </PageViewProvider>
+  );
+};
+
+export default RootView;
+
+type ChildrenSlotHandle = {
+  update: (content: React.ReactNode) => void;
+};
+const ChildrenSlot = memo(
+  forwardRef<ChildrenSlotHandle>((_, ref) => {
+    const [content, setContent] = useState<React.ReactNode>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        update: (content: React.ReactNode) => {
+          // console.log("childrenslot update", content);
+          setContent(content);
+        },
+      }),
+      [],
+    );
+
+    return <>{content == null ? null : content}</>;
+  }),
+);

package/dist/components/view/WizardView.d.ts

@@ -0,0 +1,6 @@
+type WizardViewProps = {
+    name: string;
+    items: Record<string, any>[];
+};
+declare const WizardView: (props: WizardViewProps) => import("react/jsx-runtime").JSX.Element;
+export default WizardView;

package/dist/components/view/WizardView.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { usePageContext } from "../../core/PageContext";
+import { StepHandler } from "../../core/StepHandler";
+import ComponentView from "./ComponentView";
+const WizardView = (props) => {
+    const { name = "wizard", items = [] } = props !== null && props !== void 0 ? props : {};
+    const pageContext = usePageContext();
+    const handlerRef = useRef(null);
+    if (handlerRef.current == null) {
+        const callback = (item) => {
+            var _a;
+            const onInit = (_a = item.events) === null || _a === void 0 ? void 0 : _a.onInit;
+            if (onInit != null && typeof onInit === "function") {
+                onInit();
+            }
+            pageContext === null || pageContext === void 0 ? void 0 : pageContext.set(name, item);
+        };
+        const handler = StepHandler(items, callback);
+        for (const it of items) {
+            const item = it;
+            if (item.attr == null)
+                item.attr = {};
+            item.attr.stepHandler = handler;
+            item.attr.events = {};
+        }
+        handlerRef.current = handler;
+    }
+    useEffect(() => {
+        pageContext === null || pageContext === void 0 ? void 0 : pageContext.set(name, items[0]);
+    }, []);
+    return (_jsx("div", { children: _jsx(ComponentView, { name: name, depends: name }) }));
+};
+export default WizardView;

package/dist/components/view/WizardView.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useRef } from "react";
+import { usePageContext } from "../../core/PageContext";
+import { StepActionHandler, StepHandler } from "../../core/StepHandler";
+import ComponentView from "./ComponentView";
+
+type WizardViewProps = {
+  name: string;
+  items: Record<string, any>[];
+};
+
+const WizardView = (props: WizardViewProps) => {
+  const { name = "wizard", items = [] } = props ?? {};
+  const pageContext = usePageContext();
+  const handlerRef = useRef<StepActionHandler | null>(null);
+
+  if (handlerRef.current == null) {
+    const callback = (item: Record<string, any>) => {
+      const onInit = item.events?.onInit;
+      if (onInit != null && typeof onInit === "function") {
+        onInit();
+      }
+      pageContext?.set(name, item);
+    };
+
+    const handler = StepHandler(items, callback);
+
+    for (const it of items) {
+      const item = it as Record<string, any>;
+      if (item.attr == null) item.attr = {};
+      item.attr.stepHandler = handler;
+      item.attr.events = {};
+    }
+
+    handlerRef.current = handler;
+  }
+
+  useEffect(() => {
+    pageContext?.set(name, items[0]);
+  }, []);
+
+  return (
+    <div>
+      <ComponentView name={name} depends={name} />
+    </div>
+  );
+};
+
+export default WizardView;

package/dist/core/AppContext.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+type AppPathInfo = {
+    prefixPath: string;
+    pageName: string;
+    query: string | null;
+    anchors: string[];
+};
+interface AppContextType {
+    tenant: string | null;
+    module: string | null;
+    activityid: string | null;
+    loading: boolean;
+    pathname: string;
+    options: Record<string, any>;
+    getPageCache: (name: string) => Promise<any>;
+    getComponentCache: (name: string) => Promise<any>;
+    buildPathInfo: (path: string | null) => AppPathInfo;
+    getPathInfo: () => AppPathInfo;
+    getPathLocationInfo: () => AppPathInfo;
+}
+export declare const useApp: () => AppContextType;
+export declare function AppProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/core/AppContext.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRouter } from "next/router";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { getComponent } from "./ComponentCache";
+import { getPage } from "./PageCache";
+const AppContext = createContext({
+    tenant: null,
+    module: null,
+    activityid: null,
+    loading: true,
+    pathname: "",
+    options: {},
+    getPageCache: async () => undefined,
+    getComponentCache: async () => undefined,
+    buildPathInfo: (path) => buildAppPathInfo(path),
+    getPathInfo: () => ({ prefixPath: "", pageName: "", query: null, anchors: [] }),
+    getPathLocationInfo: () => ({ prefixPath: "", pageName: "", query: null, anchors: [] }),
+});
+export const useApp = () => {
+    const context = useContext(AppContext);
+    if (!context) {
+        throw new Error("useApp must be used within AppProvider");
+    }
+    return context;
+};
+function buildAppPathInfo(path) {
+    var _a;
+    const result = {
+        pageName: "",
+        prefixPath: "",
+        query: null,
+        anchors: [],
+    };
+    if (path == null) {
+        return result;
+    }
+    let finalPath = path;
+    if (!finalPath.startsWith("/")) {
+        finalPath = "/" + finalPath;
+    }
+    const [mainPath, ...subPaths] = finalPath.split("#");
+    const [cleanPath, queryPath = null] = mainPath.split("?");
+    const parts = cleanPath.split("/").slice(1);
+    result.pageName = (_a = parts.at(-1)) !== null && _a !== void 0 ? _a : "";
+    result.prefixPath = "/" + parts.slice(0, -1).join("/");
+    result.query = queryPath;
+    result.anchors = subPaths !== null && subPaths !== void 0 ? subPaths : [];
+    return result;
+}
+export function AppProvider({ children }) {
+    var _a, _b;
+    const [isClient, setIsClient] = useState(false);
+    const [state, setState] = useState({
+        tenant: null,
+        module: null,
+        activityid: null,
+        loading: true,
+    });
+    const router = useRouter();
+    const pathInfo = useMemo(() => {
+        if (router.isReady) {
+            return buildAppPathInfo(router.asPath);
+        }
+        return buildAppPathInfo(null);
+    }, [router.asPath, router.isReady]);
+    // Set client-side flag
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
+    // Handle route changes and initial load
+    useEffect(() => {
+        if (!isClient || !router.isReady)
+            return;
+        const extractRouteParams = () => {
+            var _a, _b;
+            const { pathname, query } = router;
+            const tenant = ((_a = query.tenant) !== null && _a !== void 0 ? _a : "");
+            const module = ((_b = query.module) !== null && _b !== void 0 ? _b : "");
+            let activityid = null;
+            if (tenant && module) {
+                const [, , , pageId] = pathname.split("/");
+                if (pageId === null || pageId === void 0 ? void 0 : pageId.trim()) {
+                    activityid = pageId;
+                }
+            }
+            setState({
+                tenant: (tenant === null || tenant === void 0 ? void 0 : tenant.trim()) || null,
+                module: (module === null || module === void 0 ? void 0 : module.trim()) || null,
+                activityid,
+                loading: false,
+            });
+        };
+        extractRouteParams();
+        const handleRouteChange = () => {
+            extractRouteParams();
+        };
+        router.events.on("routeChangeComplete", handleRouteChange);
+        return () => {
+            router.events.off("routeChangeComplete", handleRouteChange);
+        };
+    }, [isClient, router]);
+    // Don't render anything until client-side
+    if (!isClient) {
+        return null;
+    }
+    const cache_fallback = {
+        // getTenant: state.tenant,
+        // getModule: state.module,
+        getTenant: ((_a = router.query.tenant) !== null && _a !== void 0 ? _a : ""),
+        getModule: ((_b = router.query.module) !== null && _b !== void 0 ? _b : ""),
+    };
+    const getPageCache = (name) => getPage(name, cache_fallback);
+    const getComponentCache = (name) => getComponent(name, cache_fallback);
+    const buildPathInfo = (path) => {
+        return buildAppPathInfo(path);
+    };
+    const getPathInfo = () => {
+        return pathInfo;
+    };
+    const getPathLocationInfo = () => {
+        var _a, _b;
+        const result = {
+            pageName: "",
+            prefixPath: "",
+            query: null,
+            anchors: [],
+        };
+        try {
+            if (window == null)
+                return result;
+            const paths = [window.location.pathname];
+            const query = (_a = window.location.search) !== null && _a !== void 0 ? _a : "";
+            if (query.length > 0) {
+                if (!query.startsWith("?")) {
+                    paths.push("?");
+                }
+                paths.push(query);
+            }
+            const hash = (_b = window.location.hash) !== null && _b !== void 0 ? _b : "";
+            if (hash.length > 0) {
+                if (!hash.startsWith("#")) {
+                    paths.push("#");
+                }
+                paths.push(hash);
+            }
+            return buildAppPathInfo(paths.join(""));
+        }
+        catch (err) {
+            console.log("Error getting path location info:", err);
+            return result;
+        }
+    };
+    const contextValue = Object.assign(Object.assign({}, state), { pathname: router.pathname, options: router.query, getPageCache,
+        getComponentCache,
+        buildPathInfo,
+        getPathInfo,
+        getPathLocationInfo });
+    return _jsx(AppContext.Provider, { value: contextValue, children: children });
+}

package/dist/core/AuthContext.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+type AuthContextType = {
+    sessionId: string | null;
+    activityId: string | null;
+    getSessionId: () => Promise<string | null>;
+    signIn: (email: string, password: string) => Promise<string>;
+    signOut: () => Promise<void>;
+};
+export declare const useAuth: () => AuthContextType;
+export declare const AuthProvider: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};