@vuu-ui/vuu-shell 4.0.0-alpha.9 → 4.0.0-beta.2

package/src/user-settings/SettingsForm.css.js

@@ -0,0 +1,10 @@
+const css = `
+.vuuSettingsForm {
+  gap: var(--salt-spacing-200);
+  flex-direction: column;
+  display: flex;
+}
+
+
+`;
+export default css;

package/src/user-settings/SettingsForm.js

@@ -0,0 +1,141 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { VuuInput } from "@vuu-ui/vuu-ui-controls";
+import { getFieldName } from "@vuu-ui/vuu-utils";
+import { Dropdown, FormField, FormFieldLabel, Option, Switch, ToggleButton, ToggleButtonGroup } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { useCallback, useState } from "react";
+import SettingsForm from "./SettingsForm.css";
+const isOption = (value)=>"object" == typeof value && "label" in value && "label" in value;
+const isBooleanProperty = (property)=>"boolean" === property.type;
+const isStringOrNumber = (value)=>"string" == typeof value || "number" == typeof value;
+const getValueAndLabel = (value)=>isOption(value) ? [
+        value.value,
+        value.label
+    ] : [
+        value,
+        value
+    ];
+const defaultPropertyValue = {
+    boolean: false,
+    number: 0,
+    string: ""
+};
+const classBase = "vuuSettingsForm";
+function FormControl({ property, changeHandler, selectHandler, inputHandler, currentValue = property.defaultValue ?? defaultPropertyValue[property.type] }) {
+    const [value, setValue] = useState(currentValue);
+    if (isBooleanProperty(property)) {
+        const checked = "boolean" == typeof currentValue ? currentValue : property.defaultValue ?? false;
+        return /*#__PURE__*/ jsx(Switch, {
+            checked: checked,
+            onChange: changeHandler
+        });
+    }
+    if (Array.isArray(property.values)) {
+        if (property.values.length <= 2) return /*#__PURE__*/ jsx(ToggleButtonGroup, {
+            value: currentValue,
+            onChange: changeHandler,
+            children: property.values.map((valueOrOption)=>{
+                const [value, label] = getValueAndLabel(valueOrOption);
+                return /*#__PURE__*/ jsx(ToggleButton, {
+                    value: value,
+                    children: label
+                }, value);
+            })
+        });
+        else if (property.values.length > 2) return /*#__PURE__*/ jsx(Dropdown, {
+            value: currentValue,
+            onSelectionChange: selectHandler,
+            children: property.values.map((valueOrOption)=>{
+                const [value, label] = getValueAndLabel(valueOrOption);
+                return /*#__PURE__*/ jsx(Option, {
+                    value: label,
+                    "data-field": property.name
+                }, value);
+            })
+        });
+    } else {
+        const valid = isValidInput(currentValue, property.type);
+        const errorMessage = getTooltipContent(property.type, valid);
+        return /*#__PURE__*/ jsx(VuuInput, {
+            errorMessage: errorMessage,
+            onCommit: inputHandler,
+            onChange: (e)=>setValue(e.target.value),
+            value: value
+        }, property.name);
+    }
+    return null;
+}
+const isValidInput = (value, type)=>{
+    if ("" === value) return;
+    if ("string" === type) return "success";
+    if ("number" === type) {
+        if (Number.isNaN(Number(value))) return "error";
+        return "success";
+    }
+};
+function getTooltipContent(type, valid) {
+    if ("error" !== valid) return;
+    if ("number" === type) return /*#__PURE__*/ jsx("p", {
+        children: "Field is expecting a number"
+    });
+    if ("string" === type) return /*#__PURE__*/ jsx("p", {
+        children: "Field is expecting a string"
+    });
+    return /*#__PURE__*/ jsx("p", {
+        children: "Please contact Admin for more information on expected type"
+    });
+}
+const SettingsForm_SettingsForm = ({ className, settingsSchema, settings, onSettingChanged, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-settings-form",
+        css: SettingsForm,
+        window: targetWindow
+    });
+    const changeHandler = useCallback((event)=>{
+        const fieldName = getFieldName(event.target);
+        const { checked, value } = event.target;
+        onSettingChanged(fieldName, checked ?? value);
+    }, [
+        onSettingChanged
+    ]);
+    const selectHandler = useCallback((event, [selected])=>{
+        const fieldName = getFieldName(event.target);
+        onSettingChanged(fieldName, selected);
+    }, [
+        onSettingChanged
+    ]);
+    const inputHandler = useCallback((event)=>{
+        const fieldName = getFieldName(event.target);
+        const { value } = event.target;
+        if (Number.isNaN(Number(value)) || "" == value) onSettingChanged(fieldName, value);
+        else {
+            const numValue = Number(value);
+            onSettingChanged(fieldName, numValue);
+        }
+    }, [
+        onSettingChanged
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        children: settingsSchema.properties.map((property)=>/*#__PURE__*/ jsxs(FormField, {
+                "data-field": property.name,
+                children: [
+                    /*#__PURE__*/ jsx(FormFieldLabel, {
+                        children: property.label
+                    }),
+                    FormControl({
+                        property,
+                        changeHandler,
+                        selectHandler,
+                        inputHandler,
+                        currentValue: settings[property.name]
+                    })
+                ]
+            }, property.name))
+    });
+};
+export { FormControl, SettingsForm_SettingsForm as SettingsForm, isBooleanProperty, isOption, isStringOrNumber };

package/src/user-settings/UserSettingsPanel.css.js

@@ -0,0 +1,9 @@
+const css = `
+.vuuUserSettingsPanel {
+  height: 100%;
+  overflow: auto;
+}
+
+
+`;
+export default css;

package/src/user-settings/UserSettingsPanel.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { useApplicationSettings } from "../application-provider/index.js";
+import { SettingsForm } from "./SettingsForm.js";
+import clsx from "clsx";
+import UserSettingsPanel from "./UserSettingsPanel.css";
+const classBase = "vuuUserSettingsPanel";
+const UserSettingsPanel_UserSettingsPanel = ({ ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-user-settings-panel",
+        css: UserSettingsPanel,
+        window: targetWindow
+    });
+    const { onUserSettingChanged, userSettings = {}, userSettingsSchema } = useApplicationSettings();
+    if (userSettingsSchema) return /*#__PURE__*/ jsx("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, "vuuScrollable"),
+        children: /*#__PURE__*/ jsx(SettingsForm, {
+            settings: userSettings,
+            settingsSchema: userSettingsSchema,
+            onSettingChanged: onUserSettingChanged
+        })
+    });
+    console.log("no settingsSchema provided to UserSettingsPanel");
+    return null;
+};
+export { UserSettingsPanel_UserSettingsPanel as UserSettingsPanel };

package/src/user-settings/index.js

@@ -0,0 +1,2 @@
+export * from "./UserSettingsPanel.js";
+export * from "./SettingsForm.js";

package/src/workspace-management/LayoutList.js

@@ -1,10 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { createElement, useCallback, useMemo } from "react";
+import { IconButton } from "@vuu-ui/vuu-ui-controls";
 import { ListBox, Option } from "@salt-ds/core";
+import { VuuShellLocation } from "@vuu-ui/vuu-utils";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
-import { IconButton } from "@vuu-ui/vuu-ui-controls";
 import clsx from "clsx";
+import { LayoutTile } from "./LayoutTile.js";
 import { useWorkspace } from "./WorkspaceProvider.js";
+import { useLayouts } from "../feature-and-layout-provider/index.js";
+import { layoutFromJson, useLayoutProviderDispatch } from "@vuu-ui/vuu-layout";
 import LayoutList from "./LayoutList.css";
 const classBase = "vuuLayoutList";
 const NO_SELECTION = [];
@@ -15,73 +20,108 @@ const LayoutList_LayoutList = ({ className, title, ...htmlAttributes })=>{
         css: LayoutList,
         window: targetWindow
     });
-    const { deleteNamedWorkspace, namedWorkspaces, openNamedWorkspace, openSystemWorkspace, status, systemWorkspaces } = useWorkspace();
+    const { layoutMetadata, loadLayoutById } = useWorkspace();
+    const { systemLayouts } = useLayouts();
+    const handleLoadLayout = useCallback((layoutId)=>{
+        if (layoutId) loadLayoutById(layoutId);
+    }, [
+        loadLayoutById
+    ]);
+    const dispatch = useLayoutProviderDispatch();
+    const handleLoadSysLayout = (layoutId, layoutJSON)=>{
+        if (layoutJSON) dispatch({
+            type: "add",
+            path: `#${VuuShellLocation.Workspace}`,
+            component: layoutFromJson(layoutJSON, "0")
+        });
+        else throw Error("layoutJSON is required for system layouts");
+    };
+    const layoutsByGroup = layoutMetadata.reduce((acc, cur)=>{
+        if (acc[cur.group]) return {
+            ...acc,
+            [cur.group]: [
+                ...acc[cur.group],
+                cur
+            ]
+        };
+        return {
+            ...acc,
+            [cur.group]: [
+                cur
+            ]
+        };
+    }, {});
+    let sysContent = [];
+    if (systemLayouts) sysContent = [
+        /*#__PURE__*/ jsxs("div", {
+            className: `${classBase}-group`,
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    className: `${classBase}-groupHeader`,
+                    children: "System Layout"
+                }),
+                /*#__PURE__*/ jsx(ListBox, {
+                    selected: NO_SELECTION,
+                    children: systemLayouts.map((layout)=>/*#__PURE__*/ jsx(Option, {
+                            value: layout,
+                            children: /*#__PURE__*/ createElement(LayoutTile, {
+                                ...htmlAttributes,
+                                key: layout.id,
+                                metadata: layout,
+                                onLoadLayout: handleLoadSysLayout
+                            })
+                        }, layout.id))
+                })
+            ]
+        }, 0)
+    ];
+    const content = useMemo(()=>Object.entries(layoutsByGroup).map(([heading, layoutMetadata], index)=>/*#__PURE__*/ jsxs("div", {
+                className: `${classBase}-group`,
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: `${classBase}-groupHeader`,
+                        children: heading
+                    }),
+                    /*#__PURE__*/ jsx(ListBox, {
+                        selected: NO_SELECTION,
+                        children: layoutMetadata.map((layout)=>/*#__PURE__*/ jsxs(Option, {
+                                value: layout,
+                                children: [
+                                    /*#__PURE__*/ createElement(LayoutTile, {
+                                        ...htmlAttributes,
+                                        key: layout.id,
+                                        metadata: layout,
+                                        onLoadLayout: handleLoadLayout
+                                    }),
+                                    /*#__PURE__*/ jsx(IconButton, {
+                                        className: `${classBase}-menu`,
+                                        "data-embedded": true,
+                                        icon: "more-vert",
+                                        appearance: "transparent",
+                                        sentiment: "neutral"
+                                    })
+                                ]
+                            }, layout.id))
+                    })
+                ]
+            }, index)), [
+        handleLoadLayout,
+        htmlAttributes,
+        layoutsByGroup
+    ]);
     return /*#__PURE__*/ jsxs("div", {
         ...htmlAttributes,
-        className: clsx(classBase, className, "vuuScrollable"),
+        className: clsx(classBase, "vuuScrollable"),
         children: [
             /*#__PURE__*/ jsx("div", {
                 className: `${classBase}-header`,
                 children: title
             }),
-            /*#__PURE__*/ jsxs("div", {
+            /*#__PURE__*/ jsx("div", {
                 className: `${classBase}-content`,
                 children: [
-                    "loading" === status ? /*#__PURE__*/ jsx("div", {
-                        role: "status",
-                        children: "Loading layouts…"
-                    }) : null,
-                    systemWorkspaces.length > 0 ? /*#__PURE__*/ jsxs("div", {
-                        className: `${classBase}-group`,
-                        children: [
-                            /*#__PURE__*/ jsx("div", {
-                                className: `${classBase}-groupHeader`,
-                                children: "System Layouts"
-                            }),
-                            /*#__PURE__*/ jsx(ListBox, {
-                                selected: NO_SELECTION,
-                                children: systemWorkspaces.map((definition)=>/*#__PURE__*/ jsx(Option, {
-                                        value: definition.id,
-                                        children: /*#__PURE__*/ jsx("button", {
-                                            onClick: ()=>void openSystemWorkspace(definition),
-                                            type: "button",
-                                            children: definition.name
-                                        })
-                                    }, definition.id))
-                            })
-                        ]
-                    }) : null,
-                    /*#__PURE__*/ jsxs("div", {
-                        className: `${classBase}-group`,
-                        children: [
-                            /*#__PURE__*/ jsx("div", {
-                                className: `${classBase}-groupHeader`,
-                                children: "My Layouts"
-                            }),
-                            0 === namedWorkspaces.length && "loading" !== status ? /*#__PURE__*/ jsx("div", {
-                                children: "No saved workspaces"
-                            }) : /*#__PURE__*/ jsx(ListBox, {
-                                selected: NO_SELECTION,
-                                children: namedWorkspaces.map((definition)=>/*#__PURE__*/ jsxs(Option, {
-                                        value: definition.id,
-                                        children: [
-                                            /*#__PURE__*/ jsx("button", {
-                                                onClick: ()=>void openNamedWorkspace(definition.id),
-                                                type: "button",
-                                                children: definition.name
-                                            }),
-                                            /*#__PURE__*/ jsx(IconButton, {
-                                                "aria-label": `Delete ${definition.name}`,
-                                                appearance: "transparent",
-                                                icon: "delete",
-                                                onClick: ()=>void deleteNamedWorkspace(definition.id),
-                                                sentiment: "neutral"
-                                            })
-                                        ]
-                                    }, definition.id))
-                            })
-                        ]
-                    })
+                    sysContent,
+                    ...content
                 ]
             })
         ]

package/src/workspace-management/SaveLayoutPanel.js

@@ -2,10 +2,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, ComboBox, FormField, FormFieldLabel, Input, Option, Text } from "@salt-ds/core";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
-import { useAuthenticatedUser } from "@vuu-ui/core";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { takeScreenshot } from "./screenshot-utils.js";
 import SaveLayoutPanel from "./SaveLayoutPanel.css";
+import { useApplicationUser } from "../application-provider/index.js";
 const classBase = "vuuSaveLayoutPanel";
 const groups = [
     "Group 1",
@@ -26,7 +26,7 @@ const SaveLayoutPanel_SaveLayoutPanel = (props)=>{
     const [group, setGroup] = useState("");
     const [screenshot, setScreenshot] = useState();
     const [screenshotErrorMessage, setScreenshotErrorMessage] = useState();
-    const { userName } = useAuthenticatedUser();
+    const { username } = useApplicationUser();
     useEffect(()=>{
         if (componentId) takeScreenshot(document.getElementById(componentId)).then((screenshot)=>{
             setScreenshot(screenshot);
@@ -41,7 +41,7 @@ const SaveLayoutPanel_SaveLayoutPanel = (props)=>{
             name: layoutName,
             group,
             screenshot: screenshot ?? "",
-            user: userName
+            user: username
         });
     };
     const screenshotContent = useMemo(()=>{