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

package/src/app-header/AppHeader.js

@@ -1,97 +0,0 @@
-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

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

package/src/application-provider/ApplicationContext.js

@@ -1,9 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

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

package/src/feature/Feature.js

@@ -1,37 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

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

package/src/feature/index.js

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

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

@@ -1,42 +0,0 @@
-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

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

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

@@ -1,62 +0,0 @@
-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

@@ -1,128 +0,0 @@
-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

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

package/src/get-layout-history.js

@@ -1,7 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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";