@vuu-ui/vuu-shell 2.1.19-beta.1 → 2.1.19-beta.2

package/src/workspace-management/WorkspaceProvider.js

@@ -0,0 +1,209 @@
+import { jsx } from "react/jsx-runtime";
+import { isLayoutJSON, resolveJSONPath } from "@vuu-ui/vuu-layout";
+import { useNotifications } from "@vuu-ui/vuu-notifications";
+import { VuuShellLocation, WorkspaceContext, logger } from "@vuu-ui/vuu-utils";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { usePersistenceManager } from "../persistence-manager/index.js";
+import { getWorkspaceWithLayoutJSON, loadingJSON } from "./defaultWorkspaceJSON.js";
+const { info: info } = logger("useLayoutManager");
+const ensureLayoutHasTitle = (layout, layoutMetadata)=>{
+    if (layout.props?.title !== void 0) return layout;
+    return {
+        ...layout,
+        props: {
+            ...layout.props,
+            title: layoutMetadata.name
+        }
+    };
+};
+const loadingApplicationJSON = {
+    workspaceJSON: loadingJSON
+};
+const WorkspaceProvider = ({ TabstripProps, children, layoutJSON, activeLayoutIndex, layoutPlaceholderJSON, showTabs, workspaceJSON: customWorkspaceJSON })=>{
+    const [layoutMetadata, setLayoutMetadata] = useState([]);
+    const [, forceRefresh] = useState({});
+    const { showNotification } = useNotifications();
+    const persistenceManager = usePersistenceManager();
+    const applicationJSONRef = useRef(loadingApplicationJSON);
+    const setApplicationJSON = useCallback((applicationJSON, rerender = true)=>{
+        applicationJSONRef.current = applicationJSON;
+        if (rerender) forceRefresh({});
+    }, []);
+    const setWorkspaceJSON = useCallback((workspaceJSON, rerender = true)=>{
+        setApplicationJSON({
+            ...applicationJSONRef.current,
+            workspaceJSON
+        }, rerender);
+    }, [
+        setApplicationJSON
+    ]);
+    const setApplicationSettings = useCallback((settings)=>{
+        setApplicationJSON({
+            ...applicationJSONRef.current,
+            settings: {
+                ...applicationJSONRef.current.settings,
+                ...settings
+            }
+        }, false);
+    }, [
+        setApplicationJSON
+    ]);
+    useEffect(()=>{
+        persistenceManager?.loadMetadata().then((metadata)=>{
+            setLayoutMetadata(metadata);
+        }).catch((error)=>{
+            showNotification({
+                content: "Could not load list of available layouts",
+                header: "Failed to Load Layouts",
+                status: "error",
+                type: "toast"
+            });
+            console.error("Error occurred while retrieving metadata", error);
+        });
+        persistenceManager?.loadApplicationJSON().then((applicationJSON)=>{
+            if (applicationJSON) {
+                info?.("applicationJSON loaded successfully");
+                setApplicationJSON(applicationJSON);
+            } else {
+                const workspaceJSON = getWorkspaceWithLayoutJSON(customWorkspaceJSON, layoutJSON, activeLayoutIndex, {
+                    TabstripProps,
+                    showTabs
+                });
+                info?.(`applicationJSON not found, getting defaultWorkspaceJSON,
+            ${JSON.stringify(workspaceJSON, null, 2)}
+            `);
+                setApplicationJSON({
+                    workspaceJSON
+                });
+            }
+        }).catch((error)=>{
+            showNotification({
+                content: "Could not load your latest view",
+                header: "Failed to Load Layout",
+                status: "error",
+                type: "toast"
+            });
+            console.error("Error occurred while retrieving application layout", error);
+        });
+    }, [
+        TabstripProps,
+        activeLayoutIndex,
+        customWorkspaceJSON,
+        layoutJSON,
+        showNotification,
+        persistenceManager,
+        setApplicationJSON,
+        showTabs
+    ]);
+    const saveApplicationLayout = useCallback((layout)=>{
+        if (isLayoutJSON(layout)) {
+            setWorkspaceJSON(layout, false);
+            persistenceManager?.saveApplicationJSON(applicationJSONRef.current);
+        } else console.error("Tried to save invalid application layout", layout);
+    }, [
+        persistenceManager,
+        setWorkspaceJSON
+    ]);
+    const saveLayout = useCallback((metadata)=>{
+        let layoutToSave;
+        try {
+            const { workspaceJSON } = applicationJSONRef.current;
+            if (Array.isArray(workspaceJSON)) console.log("how do we identify the right thing to save");
+            else layoutToSave = resolveJSONPath(workspaceJSON, `#${VuuShellLocation.Workspace}.ACTIVE_CHILD`);
+        } catch (e) {}
+        if (layoutToSave && isLayoutJSON(layoutToSave)) persistenceManager?.createLayout(metadata, ensureLayoutHasTitle(layoutToSave, metadata)).then((metadata)=>{
+            showNotification({
+                content: `${metadata.name} saved successfully`,
+                header: "Layout Saved Successfully",
+                status: "success",
+                type: "toast"
+            });
+            setLayoutMetadata((prev)=>[
+                    ...prev,
+                    metadata
+                ]);
+        }).catch((error)=>{
+            showNotification({
+                content: `Failed to save layout ${metadata.name}`,
+                header: "Failed to Save Layout",
+                status: "error",
+                type: "toast"
+            });
+            console.error("Error occurred while saving layout", error);
+        });
+        else {
+            console.error("Tried to save invalid layout", layoutToSave);
+            showNotification({
+                content: "Cannot save invalid layout",
+                header: "Failed to Save Layout",
+                status: "error",
+                type: "toast"
+            });
+        }
+    }, [
+        showNotification,
+        persistenceManager
+    ]);
+    const saveApplicationSettings = useCallback((settings, key)=>{
+        const { settings: applicationSettings } = applicationJSONRef.current;
+        key ? setApplicationSettings({
+            ...applicationSettings,
+            [key]: settings
+        }) : setApplicationSettings(settings);
+        persistenceManager?.saveApplicationJSON(applicationJSONRef.current);
+    }, [
+        persistenceManager,
+        setApplicationSettings
+    ]);
+    const getApplicationSettings = useCallback((key)=>{
+        const { settings } = applicationJSONRef.current;
+        return key ? settings?.[key] : settings;
+    }, []);
+    const loadLayoutById = useCallback((id)=>{
+        persistenceManager?.loadLayout(id).then((layoutJson)=>{
+            const { workspaceJSON: currentLayout } = applicationJSONRef.current;
+            if (Array.isArray(currentLayout)) console.log("how do we deal witha amulti layoput");
+            else setWorkspaceJSON({
+                ...currentLayout,
+                children: (currentLayout.children || []).concat(layoutJson),
+                props: {
+                    ...currentLayout.props,
+                    active: currentLayout.children?.length ?? 0
+                }
+            });
+        }).catch((error)=>{
+            showNotification({
+                content: "Failed to load the requested layout",
+                header: "Failed to Load Layout",
+                status: "error",
+                type: "toast"
+            });
+            console.error("Error occurred while loading layout", error);
+        });
+    }, [
+        showNotification,
+        persistenceManager,
+        setWorkspaceJSON
+    ]);
+    return /*#__PURE__*/ jsx(WorkspaceContext.Provider, {
+        value: {
+            getApplicationSettings,
+            layoutMetadata,
+            layoutPlaceholderJSON,
+            saveLayout,
+            workspaceJSON: applicationJSONRef.current.workspaceJSON,
+            saveApplicationLayout,
+            saveApplicationSettings,
+            loadLayoutById
+        },
+        children: children
+    });
+};
+const useWorkspace = ()=>{
+    const { workspaceJSON = getWorkspaceWithLayoutJSON(), ...contextProps } = useContext(WorkspaceContext);
+    return {
+        ...contextProps,
+        workspaceJSON
+    };
+};
+export { WorkspaceProvider, useWorkspace };

package/src/workspace-management/defaultWorkspaceJSON.js

@@ -0,0 +1,88 @@
+import { VuuShellLocation } from "@vuu-ui/vuu-utils";
+const warningLayout = {
+    type: "View",
+    props: {
+        style: {
+            height: "calc(100% - 6px)"
+        }
+    },
+    children: [
+        {
+            props: {
+                className: "vuuShell-warningPlaceholder"
+            },
+            type: "Placeholder"
+        }
+    ]
+};
+const loadingJSON = {
+    type: "Component",
+    id: "loading-main",
+    props: {}
+};
+const defaultWorkspaceJSON = {
+    type: "Stack",
+    id: VuuShellLocation.Workspace,
+    props: {
+        className: `${VuuShellLocation.Workspace}-tabs`,
+        TabstripProps: {
+            allowAddTab: true,
+            allowCloseTab: true,
+            allowRenameTab: true,
+            animateSelectionThumb: false,
+            "aria-label": "Workspace Tabs",
+            location: "workspace-tab",
+            variant: "primary"
+        },
+        preserve: true
+    }
+};
+const getStackWorkspaceJSON = (activeLayoutIndex)=>({
+        ...defaultWorkspaceJSON,
+        active: activeLayoutIndex ?? 0
+    });
+const placeholderLayout = {
+    props: {
+        id: "tab1",
+        title: "Tab 1",
+        className: "vuuShell-Placeholder"
+    },
+    type: "Placeholder"
+};
+const getWorkspaceWithLayoutJSON = (customWorkspaceJSON, layoutJSON = placeholderLayout, activeLayoutIndex, stackProps)=>{
+    const stackWorkspace = getStackWorkspaceJSON(activeLayoutIndex);
+    if (Array.isArray(customWorkspaceJSON)) {
+        const workspace = customWorkspaceJSON.find((layout)=>layout.id === VuuShellLocation.Workspace);
+        if (workspace) return customWorkspaceJSON.map((ws)=>{
+            if (ws.id === VuuShellLocation.Workspace) return {
+                ...ws,
+                children: Array.isArray(layoutJSON) ? layoutJSON : [
+                    layoutJSON
+                ]
+            };
+            return ws;
+        });
+        throw Error("Multiple workspaces have been provided but none has the workspace id");
+    }
+    if (customWorkspaceJSON) return {
+        ...customWorkspaceJSON,
+        children: Array.isArray(layoutJSON) ? layoutJSON : [
+            layoutJSON
+        ]
+    };
+    return {
+        ...stackWorkspace,
+        props: {
+            ...stackWorkspace.props,
+            ...stackProps,
+            TabstripProps: {
+                ...stackWorkspace.props?.TabstripProps,
+                ...stackProps?.TabstripProps
+            }
+        },
+        children: Array.isArray(layoutJSON) ? layoutJSON : [
+            layoutJSON
+        ]
+    };
+};
+export { defaultWorkspaceJSON, getStackWorkspaceJSON, getWorkspaceWithLayoutJSON, loadingJSON, warningLayout };

package/src/workspace-management/index.js

@@ -0,0 +1,5 @@
+export * from "./SaveLayoutPanel.js";
+export * from "./LayoutList.js";
+export * from "./WorkspaceProvider.js";
+export * from "./defaultWorkspaceJSON.js";
+export * from "./useWorkspaceContextMenuItems.js";

package/src/workspace-management/screenshot-utils.js

@@ -0,0 +1,13 @@
+import { toPng } from "html-to-image";
+const takeScreenshot = (node)=>new Promise((resolve, reject)=>{
+        toPng(node, {
+            cacheBust: true
+        }).then((screenshot)=>{
+            if (!screenshot) reject(new Error("No Screenshot available"));
+            resolve(screenshot);
+        }).catch((error)=>{
+            console.error("the following error occurred while taking a screenshot of a DOMNode", error);
+            reject(new Error("Error taking screenshot"));
+        });
+    });
+export { takeScreenshot };

package/src/workspace-management/useWorkspaceContextMenuItems.js

@@ -0,0 +1,58 @@
+import { jsx } from "react/jsx-runtime";
+import { useModal } from "@vuu-ui/vuu-ui-controls";
+import { useCallback, useMemo } from "react";
+import { SaveLayoutPanel } from "./SaveLayoutPanel.js";
+import { useWorkspace } from "./WorkspaceProvider.js";
+const useWorkspaceContextMenuItems = ()=>{
+    const { saveLayout } = useWorkspace();
+    const { showDialog, closeDialog } = useModal();
+    const handleCloseDialog = useCallback(()=>{
+        closeDialog();
+    }, [
+        closeDialog
+    ]);
+    const handleSave = useCallback((layoutMetadata)=>{
+        saveLayout(layoutMetadata);
+        closeDialog();
+    }, [
+        saveLayout,
+        closeDialog
+    ]);
+    const [buildMenuOptions, handleMenuAction] = useMemo(()=>[
+            (location, options)=>{
+                const locations = location.split(" ");
+                const menuDescriptors = [];
+                if (locations.includes("workspace-tab")) menuDescriptors.push({
+                    label: "Save Layout",
+                    id: "save-layout",
+                    options
+                }, {
+                    label: "Layout Settings",
+                    id: "layout-settings",
+                    options
+                });
+                return menuDescriptors;
+            },
+            (menuItemId, options)=>{
+                if ("save-layout" === menuItemId) {
+                    showDialog(/*#__PURE__*/ jsx(SaveLayoutPanel, {
+                        onCancel: handleCloseDialog,
+                        onSave: handleSave,
+                        componentId: options?.controlledComponentId,
+                        defaultTitle: options?.controlledComponentTitle
+                    }), "Save Layout", [], true);
+                    return true;
+                }
+                return false;
+            }
+        ], [
+        handleCloseDialog,
+        handleSave,
+        showDialog
+    ]);
+    return {
+        buildMenuOptions,
+        handleMenuAction
+    };
+};
+export { useWorkspaceContextMenuItems };