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

package/package.json

@@ -1,26 +1,27 @@
 {
-  "version": "2.1.18",
+  "version": "2.1.19-beta.2",
   "description": "VUU UI Shell",
   "author": "heswell",
   "license": "Apache-2.0",
+  "type": "module",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "2.1.18",
-    "@vuu-ui/vuu-protocol-types": "2.1.18",
-    "@vuu-ui/vuu-table-types": "2.1.18"
+    "@vuu-ui/vuu-data-types": "2.1.19-beta.2",
+    "@vuu-ui/vuu-protocol-types": "2.1.19-beta.2",
+    "@vuu-ui/vuu-table-types": "2.1.19-beta.2"
   },
   "dependencies": {
     "@salt-ds/core": "1.54.1",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-context-menu": "2.1.18",
-    "@vuu-ui/vuu-data-react": "2.1.18",
-    "@vuu-ui/vuu-data-remote": "2.1.18",
-    "@vuu-ui/vuu-icons": "2.1.18",
-    "@vuu-ui/vuu-layout": "2.1.18",
-    "@vuu-ui/vuu-notifications": "2.1.18",
-    "@vuu-ui/vuu-table": "2.1.18",
-    "@vuu-ui/vuu-ui-controls": "2.1.18",
-    "@vuu-ui/vuu-utils": "2.1.18",
+    "@vuu-ui/vuu-context-menu": "2.1.19-beta.2",
+    "@vuu-ui/vuu-data-react": "2.1.19-beta.2",
+    "@vuu-ui/vuu-data-remote": "2.1.19-beta.2",
+    "@vuu-ui/vuu-icons": "2.1.19-beta.2",
+    "@vuu-ui/vuu-layout": "2.1.19-beta.2",
+    "@vuu-ui/vuu-notifications": "2.1.19-beta.2",
+    "@vuu-ui/vuu-table": "2.1.19-beta.2",
+    "@vuu-ui/vuu-ui-controls": "2.1.19-beta.2",
+    "@vuu-ui/vuu-utils": "2.1.19-beta.2",
     "html-to-image": "^1.11.11"
   },
   "peerDependencies": {
@@ -31,20 +32,16 @@
   "sideEffects": false,
   "files": [
     "README.md",
-    "esm",
-    "cjs",
+    "src",
     "/types"
   ],
   "exports": {
     ".": {
-      "require": "./cjs/index.js",
-      "import": "./esm/index.js",
+      "import": "./src/index.js",
       "types": "./types/index.d.ts"
     }
   },
-  "main": "cjs/index.js",
-  "module": "esm/index.js",
+  "module": "index.js",
   "name": "@vuu-ui/vuu-shell",
-  "type": "module",
   "types": "types/index.d.ts"
 }

package/src/ShellContextProvider.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { ShellContext } from "@vuu-ui/vuu-utils";
+const Provider = ({ children, context, inheritedContext })=>{
+    const mergedContext = {
+        ...inheritedContext,
+        ...context
+    };
+    return /*#__PURE__*/ jsx(ShellContext.Provider, {
+        value: mergedContext,
+        children: children
+    });
+};
+const ShellContextProvider = ({ children, value })=>/*#__PURE__*/ jsx(ShellContext.Consumer, {
+        children: (context)=>/*#__PURE__*/ jsx(Provider, {
+                context: value,
+                inheritedContext: context,
+                children: children
+            })
+    });
+export { ShellContextProvider };

package/src/app-header/AppHeader.css.js

@@ -0,0 +1,21 @@
+const css = `
+.vuuAppHeader {
+  --saltButton-borderRadius: 6px;
+  --saltButton-text-color: var(--vuu-color-gray-50);
+  --saltButton-padding: 12px;
+  --vuuToolbarItem-height: 26px;
+  --vuuOverflowContainer-gap: 8px;
+  --vuuOverflowContainer-height: var(--vuuAppHeader-height, 42px);
+  --vuu-icon-color: var(--vuu-color-gray-45);
+  --vuu-icon-size: 16px;
+  --vuuToolbar-borderWidth: 1px;
+  --vuuToolbar-borderStyle: solid;
+  --vuuToolbar-borderColor: var(--salt-separable-primary-borderColor);
+  justify-content: flex-end;
+  align-items: center;
+  display: flex;
+}
+
+
+`;
+export default css;

package/src/app-header/AppHeader.js

@@ -0,0 +1,97 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { useLayoutOperation } from "@vuu-ui/vuu-layout";
+import { Toolbar } from "@vuu-ui/vuu-ui-controls";
+import clsx from "clsx";
+import { useCallback, useRef } from "react";
+import { usePersistenceManager } from "../persistence-manager/index.js";
+import { NotificationType, useNotifications } from "@vuu-ui/vuu-notifications";
+import { useLogout } from "../application-provider/index.js";
+import AppHeader from "./AppHeader.css";
+const classBase = "vuuAppHeader";
+const AppHeader_AppHeader = ({ className: classNameProp, themeMode: _, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-app-header",
+        css: AppHeader,
+        window: targetWindow
+    });
+    const persistenceManager = usePersistenceManager();
+    const settingsButtonRef = useRef(null);
+    const className = clsx(classBase, classNameProp);
+    const logout = useLogout();
+    const { showComponentInContextPanel } = useLayoutOperation();
+    const { showNotification } = useNotifications();
+    const handleReset = useCallback(()=>{
+        persistenceManager?.clearUserSettings();
+        showNotification({
+            animationType: "slide-out",
+            renderPostRefresh: true,
+            type: NotificationType.Toast,
+            header: "Success",
+            content: "Settings cleared",
+            status: "success"
+        });
+        location.reload();
+    }, [
+        persistenceManager,
+        showNotification
+    ]);
+    const handleShowSettings = useCallback(()=>{
+        showComponentInContextPanel({
+            type: "ApplicationSettings"
+        }, "Settings", ()=>settingsButtonRef.current?.focus());
+    }, [
+        showComponentInContextPanel
+    ]);
+    return /*#__PURE__*/ jsxs(Toolbar, {
+        alignItems: "end",
+        className: className,
+        role: "banner",
+        showSeparators: true,
+        ...htmlAttributes,
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                className: `${classBase}-menuItem`,
+                appearance: "transparent",
+                sentiment: "neutral",
+                children: "Help"
+            }),
+            /*#__PURE__*/ jsxs(Button, {
+                appearance: "transparent",
+                className: `${classBase}-menuItem`,
+                onClick: handleReset,
+                sentiment: "neutral",
+                children: [
+                    "Reset ",
+                    /*#__PURE__*/ jsx("span", {
+                        "data-icon": "history"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(Button, {
+                appearance: "transparent",
+                className: `${classBase}-menuItem`,
+                onClick: handleShowSettings,
+                ref: settingsButtonRef,
+                sentiment: "neutral",
+                children: [
+                    "Settings ",
+                    /*#__PURE__*/ jsx("span", {
+                        "data-icon": "settings"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Button, {
+                appearance: "transparent",
+                className: `${classBase}-menuItem`,
+                onClick: logout,
+                sentiment: "neutral",
+                children: "Log out"
+            })
+        ]
+    });
+};
+export { AppHeader_AppHeader as AppHeader };

package/src/app-header/index.js

@@ -0,0 +1 @@
+export * from "./AppHeader.js";

package/src/application-provider/ApplicationContext.js

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+const Guest = {
+    username: "unknown"
+};
+const ApplicationContext = /*#__PURE__*/ createContext({
+    onUserSettingChanged: (propertyName)=>console.warn(`Cannot change setting '${propertyName}'.\nDid you forget to declare an ApplicationProvider ?`),
+    user: Guest
+});
+export { ApplicationContext };

package/src/application-provider/ApplicationProvider.js

@@ -0,0 +1,77 @@
+import { jsx } from "react/jsx-runtime";
+import { SaltProviderNext, useDensity, useTheme } from "@salt-ds/core";
+import { useCallback, useContext, useMemo, useState } from "react";
+import { ApplicationContext } from "./ApplicationContext.js";
+import { usePersistenceManager } from "../persistence-manager/index.js";
+const accentPurple = "purple";
+const getThemeMode = (mode = "light", userSettings)=>{
+    const themeMode = userSettings?.themeMode;
+    if ("light" === themeMode || "dark" === themeMode) return themeMode;
+    return mode;
+};
+const ApplicationProvider = ({ children, density: densityProp, logout, mode, theme, userSettingsSchema: userSettingsSchema, user })=>{
+    const { mode: inheritedMode, theme: inheritedTheme } = useTheme();
+    const density = useDensity(densityProp);
+    const persistenceManager = usePersistenceManager();
+    const context = useContext(ApplicationContext);
+    const [userSettings, setSettings] = useState();
+    useMemo(async ()=>{
+        if (persistenceManager) {
+            const userSettings = await persistenceManager.getUserSettings();
+            setSettings(userSettings);
+        } else setSettings({});
+    }, [
+        persistenceManager
+    ]);
+    const onUserSettingChanged = useCallback((propertyName, value)=>{
+        setSettings((currentSettings)=>{
+            const newSettings = {
+                ...currentSettings,
+                [propertyName]: value
+            };
+            persistenceManager?.saveUserSettings(newSettings);
+            return newSettings;
+        });
+    }, [
+        persistenceManager
+    ]);
+    return userSettings ? /*#__PURE__*/ jsx(ApplicationContext.Provider, {
+        value: {
+            ...context,
+            logout,
+            onUserSettingChanged,
+            userSettings,
+            userSettingsSchema,
+            user: user ?? context.user
+        },
+        children: /*#__PURE__*/ jsx(SaltProviderNext, {
+            accent: accentPurple,
+            corner: "rounded",
+            theme: theme ?? inheritedTheme ?? "vuu-theme",
+            density: density,
+            mode: getThemeMode(mode ?? inheritedMode, userSettings),
+            children: children
+        })
+    }) : null;
+};
+const useApplicationUser = ()=>{
+    const { user } = useContext(ApplicationContext);
+    return user;
+};
+const useApplicationSettings = ()=>{
+    const { onUserSettingChanged, userSettings, userSettingsSchema } = useContext(ApplicationContext);
+    return {
+        onUserSettingChanged,
+        userSettings,
+        userSettingsSchema
+    };
+};
+const useUserSetting = ()=>{
+    const { userSettings } = useContext(ApplicationContext);
+    return userSettings;
+};
+const useLogout = ()=>{
+    const { logout } = useContext(ApplicationContext);
+    return logout;
+};
+export { ApplicationProvider, useApplicationSettings, useApplicationUser, useLogout, useUserSetting };

package/src/application-provider/index.js

@@ -0,0 +1 @@
+export * from "./ApplicationProvider.js";

package/src/feature/Feature.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import { importCSS, registerComponent } from "@vuu-ui/vuu-utils";
+import react, { useEffect } from "react";
+import { FeatureErrorBoundary } from "./FeatureErrorBoundary.js";
+const componentsMap = new Map();
+const useCachedFeature = (url)=>{
+    useEffect(()=>()=>{
+            componentsMap.delete(url);
+        }, [
+        url
+    ]);
+    if (!componentsMap.has(url)) componentsMap.set(url, /*#__PURE__*/ react.lazy(()=>import(/* @vite-ignore */ url)));
+    const lazyFeature = componentsMap.get(url);
+    if (lazyFeature) return lazyFeature;
+    throw Error(`Unable to load Lazy Feature at url ${url}`);
+};
+function RawFeature({ url, css, ComponentProps: params, ...props }) {
+    if (css) //   import(/* @vite-ignore */ css, { assert: { type: "css" } }).then(
+    importCSS(css).then((styleSheet)=>{
+        document.adoptedStyleSheets = [
+            ...document.adoptedStyleSheets,
+            styleSheet
+        ];
+    });
+    const LazyFeature = useCachedFeature(url);
+    return /*#__PURE__*/ jsx(FeatureErrorBoundary, {
+        url: url,
+        children: /*#__PURE__*/ jsx(LazyFeature, {
+            ...props,
+            ...params
+        })
+    });
+}
+const Feature = /*#__PURE__*/ react.memo(RawFeature);
+Feature.displayName = "Feature";
+registerComponent("Feature", Feature, "view");
+export { Feature };

package/src/feature/FeatureErrorBoundary.js

@@ -0,0 +1,33 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import react from "react";
+class FeatureErrorBoundary extends react.Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            errorMessage: null
+        };
+    }
+    static getDerivedStateFromError(error) {
+        return {
+            errorMessage: error.message
+        };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.log(`error creating component at ${this.props.url}`);
+        console.log(error, errorInfo);
+    }
+    render() {
+        if (this.state.errorMessage) return /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx("h1", {
+                    children: "An error occured while creating component."
+                }),
+                /*#__PURE__*/ jsx("p", {
+                    children: this.state.errorMessage
+                })
+            ]
+        });
+        return this.props.children;
+    }
+}
+export { FeatureErrorBoundary };

package/src/feature/Loader.js

@@ -0,0 +1,5 @@
+import { jsx } from "react/jsx-runtime";
+const Loader = ()=>/*#__PURE__*/ jsx("div", {
+        className: "hwLoader"
+    });
+export { Loader };

package/src/feature/index.js

@@ -0,0 +1 @@
+export * from "./Feature.js";

package/src/feature-and-layout-provider/FeatureAndLayoutProvider.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import { getCustomAndTableFeatures } from "@vuu-ui/vuu-utils";
+import { createContext, useContext, useMemo } from "react";
+import { useVuuTables } from "@vuu-ui/vuu-data-react";
+const NO_FEATURES = [];
+const NO_STATICFEATURES = [];
+const NO_SYSTEMLAYOUTS = [];
+const NO_FEATURES_VUU = {
+    dynamicFeatures: NO_FEATURES,
+    tableFeatures: NO_FEATURES
+};
+const FeatureContext = /*#__PURE__*/ createContext({
+    dynamicFeatures: NO_FEATURES,
+    tableFeatures: NO_FEATURES,
+    staticFeatures: NO_STATICFEATURES
+});
+const LayoutContext = /*#__PURE__*/ createContext({
+    systemLayouts: NO_SYSTEMLAYOUTS
+});
+const FeatureAndLayoutProvider = ({ children, dynamicFeatures: dynamicFeaturesProp = [], staticFeatures, systemLayouts })=>{
+    const tableSchemas = useVuuTables();
+    const { dynamicFeatures, tableFeatures } = useMemo(()=>tableSchemas ? getCustomAndTableFeatures(dynamicFeaturesProp, tableSchemas) : NO_FEATURES_VUU, [
+        dynamicFeaturesProp,
+        tableSchemas
+    ]);
+    return /*#__PURE__*/ jsx(FeatureContext.Provider, {
+        value: {
+            dynamicFeatures,
+            tableFeatures,
+            staticFeatures
+        },
+        children: /*#__PURE__*/ jsx(LayoutContext.Provider, {
+            value: {
+                systemLayouts
+            },
+            children: children
+        })
+    });
+};
+const useFeatures = ()=>useContext(FeatureContext);
+const useLayouts = ()=>useContext(LayoutContext);
+export { FeatureAndLayoutProvider, useFeatures, useLayouts };

package/src/feature-and-layout-provider/index.js

@@ -0,0 +1 @@
+export * from "./FeatureAndLayoutProvider.js";

package/src/feature-list/FeatureList.css.js

@@ -0,0 +1,62 @@
+const css = `
+.vuuFeatureList {
+  --vuuListItem-padding: var(--salt-spacing-200);
+  background: var(--vuuFeatureList-background, var(--salt-container-primary-background));
+  height: 100%;
+  padding: 0 var(--vuuFeatureList-padding, 0);
+  flex-direction: column;
+  display: flex;
+}
+
+.vuuFeatureList-header {
+  flex: 0 0 48px;
+  align-items: center;
+  font-weight: 700;
+  line-height: 2;
+  display: flex;
+}
+
+.vuuFeatureList-content {
+  flex-direction: column;
+  flex: auto;
+  font-size: 12px;
+  font-weight: 700;
+  display: flex;
+  overflow: auto;
+}
+
+.vuuFeatureList-standalone {
+  margin-top: 24px;
+}
+
+.vuuFeatureList-group {
+  --vuuMeasuredContainer-flex: 0 0 auto;
+  flex-direction: column;
+  display: flex;
+
+  & .vuuFeatureList-groupHeader {
+    flex: 0 0 32px;
+    padding: 8px 0;
+  }
+
+  & .vuuPalette {
+    flex: auto;
+    height: auto;
+  }
+}
+
+.vuuFeatureList-group:first-child {
+  margin-top: 12px;
+}
+
+.vuuFeatureList-group + .vuuFeatureList-group {
+  margin-top: 24px;
+}
+
+.vuuFeatureList-itemName {
+  font-weight: 700;
+}
+
+
+`;
+export default css;

package/src/feature-list/FeatureList.js

@@ -0,0 +1,128 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Palette, PaletteItem } from "@vuu-ui/vuu-layout";
+import { Icon } from "@vuu-ui/vuu-ui-controls";
+import { featureFromJson, isStaticFeatures } from "@vuu-ui/vuu-utils";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { useMemo } from "react";
+import { Feature } from "../feature/Feature.js";
+import FeatureList from "./FeatureList.css";
+const classBase = "vuuFeatureList";
+const FeatureList_FeatureList = ({ features, title = "VUU TABLES", ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-feature-list",
+        css: FeatureList,
+        window: targetWindow
+    });
+    const content = useMemo(()=>{
+        if (isStaticFeatures(features)) return features.map(({ label, type }, idx)=>/*#__PURE__*/ jsxs(PaletteItem, {
+                ViewProps: {
+                    closeable: true,
+                    header: true,
+                    resize: "defer",
+                    resizeable: true
+                },
+                component: featureFromJson({
+                    type
+                }),
+                value: label,
+                children: [
+                    /*#__PURE__*/ jsx(Icon, {
+                        name: "draggable",
+                        size: 18
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: `${classBase}-itemName`,
+                        children: label
+                    })
+                ]
+            }, idx));
+        if (Array.isArray(features)) return [
+            /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-standalone`,
+                children: /*#__PURE__*/ jsx(Palette, {
+                    orientation: "vertical",
+                    children: features.map(({ ViewProps, ...featureProps }, i)=>/*#__PURE__*/ jsxs(PaletteItem, {
+                            ViewProps: {
+                                closeable: true,
+                                header: true,
+                                resize: "defer",
+                                resizeable: true,
+                                title: featureProps.title,
+                                ...ViewProps
+                            },
+                            component: /*#__PURE__*/ jsx(Feature, {
+                                ...featureProps
+                            }),
+                            value: featureProps.title,
+                            children: [
+                                /*#__PURE__*/ jsx(Icon, {
+                                    name: "draggable",
+                                    size: 18
+                                }),
+                                /*#__PURE__*/ jsx("span", {
+                                    className: `${classBase}-itemName`,
+                                    children: featureProps.title
+                                })
+                            ]
+                        }, i))
+                }, "0")
+            }, 0)
+        ];
+        return Object.entries(features).map(([heading, featureList], index)=>/*#__PURE__*/ jsxs("div", {
+                className: `${classBase}-group`,
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: `${classBase}-groupHeader`,
+                        children: heading
+                    }),
+                    /*#__PURE__*/ jsx(Palette, {
+                        orientation: "vertical",
+                        children: featureList.map(({ ViewProps, ...featureProps }, i)=>/*#__PURE__*/ jsxs(PaletteItem, {
+                                ViewProps: {
+                                    closeable: true,
+                                    header: true,
+                                    resize: "defer",
+                                    resizeable: true,
+                                    title: featureProps.title,
+                                    ...ViewProps
+                                },
+                                component: /*#__PURE__*/ jsx(Feature, {
+                                    ...featureProps
+                                }),
+                                value: featureProps.title,
+                                children: [
+                                    /*#__PURE__*/ jsx(Icon, {
+                                        name: "draggable",
+                                        size: 18
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: `${classBase}-itemName`,
+                                        children: featureProps.title
+                                    })
+                                ]
+                            }, i))
+                    })
+                ]
+            }, index));
+    }, [
+        features
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, "vuuScrollable"),
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-header`,
+                children: title
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-content`,
+                children: content
+            })
+        ]
+    });
+};
+export { FeatureList_FeatureList as FeatureList };

package/src/feature-list/index.js

@@ -0,0 +1 @@
+export * from "./FeatureList.js";

package/src/get-layout-history.js

@@ -0,0 +1,7 @@
+const getLayoutHistory = async (user)=>{
+    const history = await fetch(`api/vui/${user.username}`, {}).then((response)=>response.ok ? response.json() : null).catch(()=>{
+        console.log("error getting history");
+    });
+    return history;
+};
+export { getLayoutHistory };

package/src/index.js

@@ -0,0 +1,14 @@
+export * from "./application-provider/index.js";
+export * from "./app-header/index.js";
+export * from "./feature/index.js";
+export * from "./feature-and-layout-provider/index.js";
+export * from "./left-nav/index.js";
+export * from "./persistence-manager/index.js";
+export * from "./shell.js";
+export * from "./shell-layout-templates/index.js";
+export * from "./ShellContextProvider.js";
+export * from "./feature-list/index.js";
+export * from "./theme-switch/index.js";
+export * from "./user-settings/index.js";
+export * from "./workspace-management/index.js";
+export { LoginPanel } from "./login/LoginPanel.js";