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

package/src/workspace-management/LayoutList.css.js

@@ -0,0 +1,74 @@
+const css = `
+.vuuLayoutList {
+  --vuuMeasuredContainer-flex: 1 1 1px;
+  --vuuList-borderStyle: none;
+  --vuuListItem-separator-color: transparent;
+  background: var(--vuuLayoutList-background, var(--salt-container-primary-background));
+  height: 100%;
+  padding: 0 var(--vuuLayoutList-padding, 0);
+  flex-direction: column;
+  display: flex;
+
+  & .vuuListItem {
+    border-bottom: none;
+    justify-content: space-between;
+  }
+}
+
+.vuuLayoutList-header {
+  flex: 0 0 48px;
+  align-items: center;
+  font-weight: 700;
+  line-height: 2;
+  display: flex;
+}
+
+.vuuLayoutList-content {
+  flex-direction: column;
+  flex: auto;
+  font-size: 12px;
+  font-weight: 700;
+  display: flex;
+  overflow: auto;
+}
+
+.vuuLayoutList-group {
+  --vuuMeasuredContainer-flex: 0 0 auto;
+  flex-direction: column;
+  display: flex;
+
+  & .vuuLayoutList-groupHeader {
+    flex: 0 0 32px;
+    padding: 8px 0;
+  }
+
+  & .vuuPalette {
+    flex: auto;
+    height: auto;
+  }
+}
+
+.vuuLayoutList-group:first-child {
+  margin-top: 12px;
+}
+
+.vuuLayoutList-group + .vuuLayoutList-group {
+  margin-top: 24px;
+}
+
+.vuuLayoutList-screenshot {
+  border: 1px solid #d6d7da;
+  width: 60px;
+  height: 45.6px;
+}
+
+.vuuLayoutList-layoutDetails {
+  color: var(--light-text-secondary, #606477);
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 150%;
+}
+
+
+`;
+export default css;

package/src/workspace-management/LayoutList.js

@@ -0,0 +1,130 @@
+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 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 = [];
+const LayoutList_LayoutList = ({ className, title, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-layout-list",
+        css: LayoutList,
+        window: targetWindow
+    });
+    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, "vuuScrollable"),
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-header`,
+                children: title
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-content`,
+                children: [
+                    sysContent,
+                    ...content
+                ]
+            })
+        ]
+    });
+};
+export { LayoutList_LayoutList as LayoutList };

package/src/workspace-management/LayoutTile.css.js

@@ -0,0 +1,31 @@
+const css = `
+.vuuLayoutTile-layoutTile {
+  cursor: pointer;
+  flex: auto;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0;
+  display: flex;
+}
+
+.vuuLayoutTile-layoutName {
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
+.vuuLayoutTile-screenshot {
+  border: 1px solid #d6d7da;
+  width: 60px;
+  height: 45.6px;
+}
+
+.vuuLayoutTile-layoutDetails {
+  color: var(--salt-content-secondary-foreground);
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 150%;
+}
+
+
+`;
+export default css;

package/src/workspace-management/LayoutTile.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import LayoutTile from "./LayoutTile.css";
+const classBase = "vuuLayoutTile";
+const LayoutTile_LayoutTile = ({ metadata, onLoadLayout, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-layout-tile",
+        css: LayoutTile,
+        window: targetWindow
+    });
+    return /*#__PURE__*/ createElement("div", {
+        ...htmlAttributes,
+        className: `${classBase}-layoutTile`,
+        key: metadata?.id,
+        onClick: ()=>onLoadLayout(metadata?.id, metadata.layoutJSON),
+        children: [
+            /*#__PURE__*/ jsx("img", {
+                className: `${classBase}-screenshot`,
+                src: metadata?.screenshot
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: `${classBase}-layoutName`,
+                        children: metadata?.name
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: `${classBase}-layoutDetails`,
+                        children: /*#__PURE__*/ jsx("div", {
+                            children: `${metadata?.created}`
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+export { LayoutTile_LayoutTile as LayoutTile };

package/src/workspace-management/SaveLayoutPanel.css.js

@@ -0,0 +1,123 @@
+const css = `
+.vuuSaveLayoutPanel {
+  --salt-selectable-foreground-hover: #6d18bdc3;
+  --salt-selectable-foreground-selected: #6d18bd;
+  --salt-selectable-borderColor-selected: #6d18bd;
+  --saltInputLegacy-fontSize: 12px;
+  --salt-text-label-fontSize: 10px;
+  --saltFormFieldLegacy-label-paddingLeft: 0;
+  --saltFormField-label-fontWeight: 400;
+  --saltText-color: var(--text-secondary-foreground, #606477);
+  flex-direction: column;
+  align-items: flex-start;
+  display: flex;
+
+  & .saltFormField {
+    border: solid 1px var(--salt-editable-borderColor);
+    padding: var(--salt-spacing-50) var(--salt-spacing-200);
+  }
+
+  & .saltComboBox {
+    & .saltPillInput-endAdornmentContainer {
+      & .saltButton {
+        border: none;
+        width: 18px;
+        transform: rotate(90deg);
+      }
+
+      & .saltButton:after {
+        content: "";
+        background-color: var(--salt-content-secondary-foreground);
+        height: 20px;
+        mask: var(--vuu-svg-triangle-right) center center/20px 20px;
+        left: auto;
+        top: var(--vuu-icon-top, auto);
+        transform: var(--vuu-icon-transform, none);
+        width: 20px;
+        position: absolute;
+        mask-repeat: no-repeat;
+      }
+    }
+
+    & .saltPillInput-activationIndicator {
+      display: none;
+    }
+  }
+}
+
+.spinner {
+  background-image: var(--svg-spinner);
+  width: 100px;
+  height: 100px;
+}
+
+.vuuSaveLayoutPanel-panelContent {
+  margin-top: var(--salt-spacing-200);
+  gap: 32px;
+  display: grid;
+}
+
+.vuuSaveLayoutPanel-inputText {
+  color: var(--light-text-primary, #15171b);
+  border: none;
+  outline: none;
+  width: 100%;
+  padding-left: 4px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+}
+
+.vuuSaveLayoutPanel-settingsGroup {
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 10px;
+  width: 100%;
+  line-height: 16px;
+  display: flex;
+}
+
+.vuuSaveLayoutPanel-screenshotContainer {
+  background: var(--dark-text-primary, #fff);
+  border: 1px solid #e8e8e8;
+  justify-content: center;
+  align-items: center;
+  width: 304px;
+  height: 208px;
+  padding: 11px 15.5px;
+  display: flex;
+}
+
+.vuuSaveLayoutPanel-screenshot {
+  background: #d3d3d3 50% / cover no-repeat;
+  width: 273px;
+  height: 186px;
+}
+
+.vuuSaveLayoutPanel-buttonsContainer {
+  justify-content: flex-end;
+  align-self: stretch;
+  align-items: flex-start;
+  gap: 8px;
+  padding-top: 24px;
+  display: flex;
+}
+
+.vuuSaveLayoutPanel-cancelButton, .vuuSaveLayoutPanel-saveButton {
+  letter-spacing: .48px;
+  text-transform: uppercase;
+  border-radius: 6px;
+  align-items: flex-start;
+  gap: 8px;
+  height: fit-content;
+  padding: 4px 8px;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 133.333%;
+  display: flex;
+}
+
+
+`;
+export default css;

package/src/workspace-management/SaveLayoutPanel.js

@@ -0,0 +1,141 @@
+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 { 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",
+    "Group 2",
+    "Group 3",
+    "Group 4",
+    "Group 5"
+];
+const SaveLayoutPanel_SaveLayoutPanel = (props)=>{
+    const { defaultTitle = "", onCancel, onSave, componentId } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-save-layout-panel",
+        css: SaveLayoutPanel,
+        window: targetWindow
+    });
+    const [layoutName, setLayoutName] = useState(defaultTitle);
+    const [group, setGroup] = useState("");
+    const [screenshot, setScreenshot] = useState();
+    const [screenshotErrorMessage, setScreenshotErrorMessage] = useState();
+    const { username } = useApplicationUser();
+    useEffect(()=>{
+        if (componentId) takeScreenshot(document.getElementById(componentId)).then((screenshot)=>{
+            setScreenshot(screenshot);
+        }).catch((error)=>{
+            setScreenshotErrorMessage(error.message);
+        });
+    }, [
+        componentId
+    ]);
+    const handleSubmit = ()=>{
+        onSave({
+            name: layoutName,
+            group,
+            screenshot: screenshot ?? "",
+            user: username
+        });
+    };
+    const screenshotContent = useMemo(()=>{
+        if (screenshot) return /*#__PURE__*/ jsx("img", {
+            className: `${classBase}-screenshot`,
+            src: screenshot,
+            alt: "screenshot of current layout"
+        });
+        if (screenshotErrorMessage) return /*#__PURE__*/ jsx(Text, {
+            children: screenshotErrorMessage
+        });
+        return /*#__PURE__*/ jsx("div", {
+            className: "spinner"
+        });
+    }, [
+        screenshot,
+        screenshotErrorMessage
+    ]);
+    const handleSelectionChange = useCallback((e, [selectedValue])=>{
+        if ("Tab" !== e.key || selectedValue.toLowerCase().startsWith(group.toLowerCase())) setGroup(selectedValue || "");
+    }, [
+        group
+    ]);
+    const handleChange = useCallback((e)=>{
+        setGroup(e.target.value);
+    }, []);
+    return /*#__PURE__*/ jsxs("div", {
+        className: `${classBase}`,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: `${classBase}-panelContent`,
+                children: [
+                    /*#__PURE__*/ jsxs(FormField, {
+                        children: [
+                            /*#__PURE__*/ jsx(FormFieldLabel, {
+                                children: "Group"
+                            }),
+                            /*#__PURE__*/ jsx(ComboBox, {
+                                "data-embedded": true,
+                                inputProps: {
+                                    autoComplete: "off",
+                                    className: `${classBase}-inputText`,
+                                    placeholder: "Select Group or Enter New Name"
+                                },
+                                onChange: handleChange,
+                                onSelectionChange: handleSelectionChange,
+                                value: group,
+                                children: groups.map((group, i)=>/*#__PURE__*/ jsx(Option, {
+                                        value: group
+                                    }, i))
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(FormField, {
+                        children: [
+                            /*#__PURE__*/ jsx(FormFieldLabel, {
+                                children: "Layout Name"
+                            }),
+                            /*#__PURE__*/ jsx(Input, {
+                                "data-embedded": true,
+                                inputProps: {
+                                    className: `${classBase}-inputText`,
+                                    placeholder: "Enter Layout Name"
+                                },
+                                onChange: (event)=>setLayoutName(event.target.value),
+                                value: layoutName
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: `${classBase}-screenshotContainer`,
+                        children: screenshotContent
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: `${classBase}-buttonsContainer`,
+                children: [
+                    /*#__PURE__*/ jsx(Button, {
+                        className: `${classBase}-cancelButton`,
+                        onClick: onCancel,
+                        children: "Cancel"
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        appearance: "solid",
+                        className: `${classBase}-saveButton`,
+                        onClick: handleSubmit,
+                        disabled: "" === layoutName || "" === group,
+                        sentiment: "accented",
+                        children: "Save"
+                    })
+                ]
+            })
+        ]
+    });
+};
+export { SaveLayoutPanel_SaveLayoutPanel as SaveLayoutPanel };