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

package/src/shell-layout-templates/index.js

@@ -0,0 +1,3 @@
+export * from "./context-panel/index.js";
+export * from "./useShellLayout.js";
+export * from "./side-panel/index.js";

package/src/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DockLayout, Drawer, Flexbox, LayoutContainer, View } from "@vuu-ui/vuu-layout";
+import { VuuShellLocation } from "@vuu-ui/vuu-utils";
+import { useCallback, useMemo, useRef, useState } from "react";
+const useInlayLeftPanel = ({ SidePanelProps: LeftSidePanelProps, appHeader, htmlAttributes })=>{
+    const paletteView = useRef(null);
+    const [open, setOpen] = useState(true);
+    const handleDrawerClick = useCallback((e)=>{
+        const target = e.target;
+        if (!paletteView.current?.contains(target)) setOpen(!open);
+    }, [
+        open
+    ]);
+    return useMemo(()=>{
+        const getDrawers = (leftSidePanel)=>{
+            const drawers = [];
+            drawers.push(/*#__PURE__*/ jsx(Drawer, {
+                onClick: handleDrawerClick,
+                open: open,
+                position: "left",
+                inline: true,
+                peekaboo: true,
+                sizeOpen: 200,
+                toggleButton: "end",
+                children: /*#__PURE__*/ jsx(View, {
+                    className: "vuuShell-palette",
+                    id: "vw-app-palette",
+                    ref: paletteView,
+                    style: {
+                        height: "100%"
+                    },
+                    children: leftSidePanel
+                }, "app-palette")
+            }, "left-panel"));
+            return drawers;
+        };
+        return /*#__PURE__*/ jsxs(Flexbox, {
+            ...htmlAttributes,
+            style: {
+                ...htmlAttributes?.style,
+                flexDirection: "column"
+            },
+            children: [
+                appHeader,
+                /*#__PURE__*/ jsx(DockLayout, {
+                    style: {
+                        flex: 1
+                    },
+                    children: getDrawers(LeftSidePanelProps?.children).concat(/*#__PURE__*/ jsx(LayoutContainer, {
+                        dropTarget: true,
+                        id: VuuShellLocation.WorkspaceContainer,
+                        style: {
+                            width: "100%",
+                            height: "100%"
+                        }
+                    }, "main-content"))
+                })
+            ]
+        });
+    }, [
+        LeftSidePanelProps,
+        appHeader,
+        handleDrawerClick,
+        htmlAttributes,
+        open
+    ]);
+};
+export { useInlayLeftPanel };

package/src/shell-layout-templates/left-main-tabs/useLeftMainTabs.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Flexbox, StackLayout } from "@vuu-ui/vuu-layout";
+import { VuuShellLocation } from "@vuu-ui/vuu-utils";
+import { useMemo } from "react";
+const useLeftMainTabs = ({ appHeader, htmlAttributes, ToolbarProps })=>{
+    if (void 0 === ToolbarProps) throw Error("LeftMainTabs layout requires ToolbarProps");
+    return useMemo(()=>/*#__PURE__*/ jsxs(Flexbox, {
+            ...htmlAttributes,
+            style: {
+                ...htmlAttributes?.style,
+                flexDirection: "column"
+            },
+            children: [
+                appHeader,
+                /*#__PURE__*/ jsx(StackLayout, {
+                    TabstripProps: {
+                        className: `${VuuShellLocation.MultiWorkspaceContainer}-tabs`
+                    },
+                    active: 0,
+                    showTabs: "left",
+                    style: {
+                        flex: 1
+                    },
+                    id: VuuShellLocation.MultiWorkspaceContainer
+                })
+            ]
+        }), [
+        appHeader,
+        htmlAttributes
+    ]);
+};
+export { useLeftMainTabs };

package/src/shell-layout-templates/side-panel/SidePanel.css.js

@@ -0,0 +1,9 @@
+const css = `
+.vuuShellSidePanel {
+  width: var(--shell-left-nav-size);
+  transition: width .2s ease-out;
+}
+
+
+`;
+export default css;

package/src/shell-layout-templates/side-panel/SidePanel.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import clsx from "clsx";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import SidePanel from "./SidePanel.css";
+const classBase = "vuuShellSidePanel";
+const SidePanel_SidePanel = ({ children, open = true, sizeClosed = 90, sizeOpen = 200, style: styleProp, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-side-panel",
+        css: SidePanel,
+        window: targetWindow
+    });
+    const style = useMemo(()=>({
+            ...styleProp,
+            "--shell-left-nav-size": open ? `${sizeOpen}px` : `${sizeClosed}px`
+        }), [
+        open,
+        sizeClosed,
+        sizeOpen,
+        styleProp
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        ...htmlAttributes,
+        className: clsx(classBase),
+        style: style,
+        children: children
+    });
+};
+export { SidePanel_SidePanel as SidePanel };

package/src/shell-layout-templates/side-panel/index.js

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

package/src/shell-layout-templates/simple-content-pane/useSimpleContentPane.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Flexbox, LayoutContainer } from "@vuu-ui/vuu-layout";
+import { VuuShellLocation } from "@vuu-ui/vuu-utils";
+import { ContextPanel } from "../context-panel/index.js";
+import { useMemo } from "react";
+const useSimpleContentPane = ({ appHeader, htmlAttributes })=>useMemo(()=>/*#__PURE__*/ jsxs(Flexbox, {
+            ...htmlAttributes,
+            style: {
+                ...htmlAttributes?.style,
+                flexDirection: "row"
+            },
+            children: [
+                /*#__PURE__*/ jsxs(Flexbox, {
+                    className: "vuuShell-content",
+                    style: {
+                        flex: 1,
+                        flexDirection: "column"
+                    },
+                    children: [
+                        appHeader,
+                        /*#__PURE__*/ jsx(LayoutContainer, {
+                            id: VuuShellLocation.WorkspaceContainer,
+                            style: {
+                                flex: 1
+                            }
+                        }, "main-content")
+                    ]
+                }),
+                /*#__PURE__*/ jsx(ContextPanel, {
+                    id: VuuShellLocation.ContextPanel,
+                    overlay: true
+                })
+            ]
+        }), [
+        appHeader,
+        htmlAttributes
+    ]);
+export { useSimpleContentPane };

package/src/shell-layout-templates/useShellLayout.js

@@ -0,0 +1,15 @@
+import { useFullHeightLeftPanel } from "./full-height-left-panel/useFullHeightLeftPanel.js";
+import { useInlayLeftPanel } from "./inlay-left-panel/useInlayLeftPanel.js";
+import { useLeftMainTabs } from "./left-main-tabs/useLeftMainTabs.js";
+import { useSimpleContentPane } from "./simple-content-pane/useSimpleContentPane.js";
+const LayoutHook = {
+    "full-height": useFullHeightLeftPanel,
+    inlay: useInlayLeftPanel,
+    "left-main-tabs": useLeftMainTabs,
+    "simple-content-pane": useSimpleContentPane
+};
+const useShellLayout = ({ layoutTemplateId = "simple-content-pane", ...props })=>{
+    const useLayoutHook = LayoutHook[layoutTemplateId];
+    return useLayoutHook(props);
+};
+export { useShellLayout };

package/src/shell.css.js

@@ -0,0 +1,59 @@
+const css = `
+.vuuShell {
+  background-color: var(--vuuShell-background, var(--salt-container-primary-background));
+  height: var(--vuuShell-height, 100vh);
+  width: var(--vuuShell-width, 100vw);
+
+  & .left-main-tabs {
+    --vuuOverflowContainer-width: 48px;
+  }
+}
+
+.vuu-workspace-tabs {
+  background: var(--vuuWorkspace-background, var(--salt-container-primary-background));
+}
+
+.vuuShell-palette {
+  --vuuView-border: none;
+  --vuuView-margin: 0;
+}
+
+.vuuShell-warningPlaceholder {
+  background-color: var(--salt-container-background-high);
+  height: 100%;
+}
+
+.vuuToolbarProxy {
+  background: var(--salt-container-primary-background);
+}
+
+.vuu-workspace-tabs > .vuuTabstrip > .vuuOverflowContainer-wrapContainer {
+  background: var(--vuuShell-background, var(--salt-container-primary-background));
+}
+
+.vuu-workspace-tabs {
+  --vuuTab-height: 28px;
+  border: solid 1px var(--salt-separable-primary-borderColor);
+  border-radius: 6px;
+  width: 100%;
+  height: 100%;
+  padding: 36px 8px 8px;
+  position: relative;
+  border-top: none !important;
+}
+
+.vuu-workspace-tabs > .vuuTabstrip {
+  padding-bottom: 7px;
+  top: 0;
+  left: 0;
+  right: 0;
+  position: absolute !important;
+}
+
+.vuuShell-content {
+  padding: var(--vuuShell-content-padding, 8px);
+}
+
+
+`;
+export default css;

package/src/shell.js

@@ -0,0 +1,108 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { ContextMenuProvider } from "@vuu-ui/vuu-context-menu";
+import { LayoutProvider, StackLayout } from "@vuu-ui/vuu-layout";
+import { NotificationsProvider } from "@vuu-ui/vuu-notifications";
+import { ModalProvider } from "@vuu-ui/vuu-ui-controls";
+import { logger, registerComponent } from "@vuu-ui/vuu-utils";
+import { useCallback, useMemo } from "react";
+import { AppHeader } from "./app-header/index.js";
+import { ApplicationProvider } from "./application-provider/index.js";
+import { LocalPersistenceManager, PersistenceProvider, usePersistenceManager } from "./persistence-manager/index.js";
+import { useShellLayout } from "./shell-layout-templates/index.js";
+import { UserSettingsPanel } from "./user-settings/index.js";
+import { WorkspaceProvider, useWorkspace, useWorkspaceContextMenuItems } from "./workspace-management/index.js";
+import { loadingJSON } from "./workspace-management/defaultWorkspaceJSON.js";
+import { useLostConnection } from "@vuu-ui/vuu-data-react";
+import shell from "./shell.css";
+registerComponent("ApplicationSettings", UserSettingsPanel, "view");
+if ("production" === process.env.NODE_ENV) {
+    if ("function" != typeof StackLayout) console.warn("StackLayout module not loaded, will be unable to deserialize from layout JSON");
+}
+const { error: error } = logger("Shell");
+const defaultAppHeader = /*#__PURE__*/ jsx(AppHeader, {});
+const getAppHeader = (shellLayoutProps)=>shellLayoutProps?.appHeader ?? defaultAppHeader;
+const defaultHTMLAttributes = {
+    className: "vuuShell"
+};
+const getHTMLAttributes = (props)=>{
+    if (props?.htmlAttributes) return {
+        ...defaultHTMLAttributes,
+        ...props.htmlAttributes
+    };
+    return defaultHTMLAttributes;
+};
+const VuuApplication = ({ shellLayoutProps: ShellLayoutProps, children })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-shell",
+        css: shell,
+        window: targetWindow
+    });
+    const { workspaceJSON, saveApplicationLayout } = useWorkspace();
+    const { buildMenuOptions, handleMenuAction } = useWorkspaceContextMenuItems();
+    const handleLayoutChange = useCallback((layout)=>{
+        try {
+            saveApplicationLayout(layout);
+        } catch  {
+            error?.("Failed to save layout");
+        }
+    }, [
+        saveApplicationLayout
+    ]);
+    const isLayoutLoading = workspaceJSON === loadingJSON;
+    const initialLayout = useShellLayout({
+        ...ShellLayoutProps,
+        appHeader: getAppHeader(ShellLayoutProps),
+        htmlAttributes: getHTMLAttributes(ShellLayoutProps)
+    });
+    useLostConnection();
+    return isLayoutLoading ? null : /*#__PURE__*/ jsxs(ContextMenuProvider, {
+        menuActionHandler: handleMenuAction,
+        menuBuilder: buildMenuOptions,
+        children: [
+            /*#__PURE__*/ jsx(LayoutProvider, {
+                workspaceJSON: workspaceJSON,
+                onLayoutChange: handleLayoutChange,
+                children: initialLayout
+            }),
+            children
+        ]
+    });
+};
+const Shell = ({ logout, user, userSettingsSchema, workspaceProps, ...props })=>{
+    const persistenceManager = usePersistenceManager();
+    const localPersistenceManager = useMemo(()=>{
+        if (persistenceManager) return;
+        console.log(`No Persistence Manager, configuration data will be persisted to Local Storage, key: 'vuu/${user.username}'`);
+        return new LocalPersistenceManager(`vuu/${user.username}`);
+    }, [
+        persistenceManager,
+        user.username
+    ]);
+    const shellProviders = /*#__PURE__*/ jsx(ApplicationProvider, {
+        density: "high",
+        logout: logout,
+        theme: "vuu-theme",
+        user: user,
+        userSettingsSchema: userSettingsSchema,
+        children: /*#__PURE__*/ jsx(WorkspaceProvider, {
+            ...workspaceProps,
+            children: /*#__PURE__*/ jsx(ModalProvider, {
+                children: /*#__PURE__*/ jsx(NotificationsProvider, {
+                    children: /*#__PURE__*/ jsx(VuuApplication, {
+                        ...props,
+                        user: user
+                    })
+                })
+            })
+        })
+    });
+    if (persistenceManager) return shellProviders;
+    return /*#__PURE__*/ jsx(PersistenceProvider, {
+        persistenceManager: localPersistenceManager,
+        children: shellProviders
+    });
+};
+export { Shell };

package/src/theme-switch/ThemeSwitch.css.js

@@ -0,0 +1,34 @@
+const css = `
+.vuuThemeSwitch {
+  --saltButton-minWidth: 22px;
+  --svg-light: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\"><path d=\"M24 31q2.9 0 4.95-2.05Q31 26.9 31 24q0-2.9-2.05-4.95Q26.9 17 24 17q-2.9 0-4.95 2.05Q17 21.1 17 24q0 2.9 2.05 4.95Q21.1 31 24 31Zm0 3q-4.15 0-7.075-2.925T14 24q0-4.15 2.925-7.075T24 14q4.15 0 7.075 2.925T34 24q0 4.15-2.925 7.075T24 34ZM3.5 25.5q-.65 0-1.075-.425Q2 24.65 2 24q0-.65.425-1.075Q2.85 22.5 3.5 22.5h5q.65 0 1.075.425Q10 23.35 10 24q0 .65-.425 1.075-.425.425-1.075.425Zm36 0q-.65 0-1.075-.425Q38 24.65 38 24q0-.65.425-1.075.425-.425 1.075-.425h5q.65 0 1.075.425Q46 23.35 46 24q0 .65-.425 1.075-.425.425-1.075.425ZM24 10q-.65 0-1.075-.425Q22.5 9.15 22.5 8.5v-5q0-.65.425-1.075Q23.35 2 24 2q.65 0 1.075.425.425.425.425 1.075v5q0 .65-.425 1.075Q24.65 10 24 10Zm0 36q-.65 0-1.075-.425-.425-.425-.425-1.075v-5q0-.65.425-1.075Q23.35 38 24 38q.65 0 1.075.425.425.425.425 1.075v5q0 .65-.425 1.075Q24.65 46 24 46ZM12 14.1l-2.85-2.8q-.45-.45-.425-1.075.025-.625.425-1.075.45-.45 1.075-.45t1.075.45L14.1 12q.4.45.4 1.05 0 .6-.4 1-.4.45-1.025.45-.625 0-1.075-.4Zm24.7 24.75L33.9 36q-.4-.45-.4-1.075t.45-1.025q.4-.45 1-.45t1.05.45l2.85 2.8q.45.45.425 1.075-.025.625-.425 1.075-.45.45-1.075.45t-1.075-.45ZM33.9 14.1q-.45-.45-.45-1.05 0-.6.45-1.05l2.8-2.85q.45-.45 1.075-.425.625.025 1.075.425.45.45.45 1.075t-.45 1.075L36 14.1q-.4.4-1.025.4-.625 0-1.075-.4ZM9.15 38.85q-.45-.45-.45-1.075t.45-1.075L12 33.9q.45-.45 1.05-.45.6 0 1.05.45.45.45.45 1.05 0 .6-.45 1.05l-2.8 2.85q-.45.45-1.075.425-.625-.025-1.075-.425ZM24 24Z\"/></svg>");
+  --svg-dark: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\"><path d=\"M24 42q-7.5 0-12.75-5.25T6 24q0-7.5 5.25-12.75T24 6q.4 0 .85.025.45.025 1.15.075-1.8 1.6-2.8 3.95-1 2.35-1 4.95 0 4.5 3.15 7.65Q28.5 25.8 33 25.8q2.6 0 4.95-.925T41.9 22.3q.05.6.075.975Q42 23.65 42 24q0 7.5-5.25 12.75T24 42Zm0-3q5.45 0 9.5-3.375t5.05-7.925q-1.25.55-2.675.825Q34.45 28.8 33 28.8q-5.75 0-9.775-4.025T19.2 15q0-1.2.25-2.575.25-1.375.9-3.125-4.9 1.35-8.125 5.475Q9 18.9 9 24q0 6.25 4.375 10.625T24 39Zm-.2-14.85Z\"/></svg>");
+  padding: 2px;
+}
+
+.salt-density-high .vuuThemeSwitch {
+  --saltButton-minWidth: 16px;
+  --saltButton-width: 18px;
+  --vuuThemeSwitch-iconSize: 16px;
+}
+
+.vuuThemeSwitch [data-icon] {
+  --vuu-icon-size: var(--vuuThemeSwitch-iconSize, 18px);
+}
+
+.vuuThemeSwitch [data-icon="light"] {
+  --vuu-icon-svg: var(--svg-light);
+}
+
+.vuuThemeSwitch [data-icon="dark"] {
+  --vuu-icon-svg: var(--svg-dark);
+}
+
+.vuuThemeSwitch .saltToggleButton {
+  width: 20px;
+  height: 20px;
+}
+
+
+`;
+export default css;

package/src/theme-switch/ThemeSwitch.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { ToggleButton, ToggleButtonGroup, useControlled } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { useCallback } from "react";
+import ThemeSwitch from "./ThemeSwitch.css";
+const classBase = "vuuThemeSwitch";
+const ThemeSwitch_ThemeSwitch = ({ className: classNameProp, defaultMode: defaultModeProp, mode: modeProp, onChange, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-theme-switch",
+        css: ThemeSwitch,
+        window: targetWindow
+    });
+    const [mode, setMode] = useControlled({
+        controlled: modeProp,
+        default: defaultModeProp ?? "light",
+        name: "ThemeSwitch",
+        state: "mode"
+    });
+    const handleChangeSecondary = useCallback((evt)=>{
+        const { value } = evt.target;
+        setMode(value);
+        onChange(value);
+    }, [
+        onChange,
+        setMode
+    ]);
+    const className = clsx(classBase, classNameProp);
+    return /*#__PURE__*/ jsxs(ToggleButtonGroup, {
+        className: className,
+        ...htmlAttributes,
+        onChange: handleChangeSecondary,
+        value: mode,
+        children: [
+            /*#__PURE__*/ jsx(ToggleButton, {
+                "aria-label": "alert",
+                "data-icon": "light",
+                value: "light"
+            }),
+            /*#__PURE__*/ jsx(ToggleButton, {
+                "aria-label": "home",
+                "data-icon": "dark",
+                value: "dark"
+            })
+        ]
+    });
+};
+export { ThemeSwitch_ThemeSwitch as ThemeSwitch };

package/src/theme-switch/index.js

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

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";