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

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

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

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

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

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

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

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