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

package/src/stack/Stack.css.js

@@ -0,0 +1,44 @@
+const css = `
+.vuuTabs {
+  box-sizing: border-box;
+  flex-direction: column;
+  display: flex;
+}
+
+.vuuTabs-horizontal {
+  --vuu-tabs-border-style: none solid none none;
+  flex-direction: row;
+}
+
+.vuuTabs .Toolbar:before {
+  content: "";
+  background: var(--grey60);
+  width: 100%;
+  height: 1px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.vuuTabs-tabPanel {
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+}
+
+.vuuTabs-tabPanel > * {
+  flex: auto;
+}
+
+.vuuTabHeader + .vuuView > .vuuHeader {
+  height: 0;
+  overflow: hidden;
+}
+
+.Layout-svg-button {
+  --spacing-medium: 5px;
+}
+
+
+`;
+export default css;

package/src/stack/Stack.js

@@ -0,0 +1,98 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tab, Tabstrip } from "@vuu-ui/vuu-ui-controls";
+import { useId } from "@vuu-ui/vuu-utils";
+import clsx from "clsx";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import react, { forwardRef, useCallback, useRef } from "react";
+import { getDefaultTabLabel } from "../layout-reducer/index.js";
+import Stack_0 from "./Stack.css";
+const classBase = "vuuTabs";
+const getDefaultTabIcon = ()=>void 0;
+const getChildElements = (children)=>{
+    const elements = [];
+    react.Children.forEach(children, (child)=>{
+        if (/*#__PURE__*/ react.isValidElement(child)) elements.push(child);
+        else console.warn("Stack has unexpected child element type");
+    });
+    return elements;
+};
+const DefaultTabstripProps = {
+    allowAddTab: false,
+    allowCloseTab: false,
+    allowRenameTab: false
+};
+const Stack_Stack = /*#__PURE__*/ forwardRef(function({ TabstripProps = DefaultTabstripProps, active = 0, children, className: classNameProp, getTabIcon = getDefaultTabIcon, getTabLabel = getDefaultTabLabel, id: idProp, keyBoardActivation = "manual", onAddTab, onMoveTab, onTabClose, onTabEdit, onTabSelectionChanged, showTabs = "top", style }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-stack",
+        css: Stack_0,
+        window: targetWindow
+    });
+    const id = useId(idProp);
+    const tabLabelsRef = useRef([]);
+    const { allowCloseTab, allowRenameTab, className: tabstripClassName } = TabstripProps;
+    const handleExitEditMode = useCallback((_oldText, newText, _allowDeactivation, tabIndex)=>{
+        onTabEdit?.(tabIndex, newText);
+    }, [
+        onTabEdit
+    ]);
+    const activeChild = ()=>{
+        if (/*#__PURE__*/ react.isValidElement(children)) return children;
+        if (Array.isArray(children)) return children[active] ?? null;
+        return null;
+    };
+    tabLabelsRef.current.length = 0;
+    const renderTabs = ()=>getChildElements(children).map((child, idx)=>{
+            const { closeable = allowCloseTab, id: childId = `${id}-${idx}`, "data-tab-location": tabLocation } = child.props;
+            const label = getTabLabel(child, idx, tabLabelsRef.current);
+            tabLabelsRef.current.push(label);
+            return /*#__PURE__*/ jsx(Tab, {
+                ariaControls: childId,
+                "data-icon": getTabIcon(child, idx),
+                id: `${childId}-tab`,
+                index: idx,
+                label: label,
+                location: tabLocation,
+                closeable: closeable,
+                editable: allowRenameTab
+            }, childId);
+        });
+    const child = activeChild();
+    const isHorizontal = "left" === showTabs || "right" === showTabs;
+    const tabstripOrientation = isHorizontal ? "vertical" : "horizontal";
+    return /*#__PURE__*/ jsxs("div", {
+        className: clsx(classBase, classNameProp, {
+            [`${classBase}-horizontal`]: isHorizontal
+        }),
+        style: style,
+        id: id,
+        ref: ref,
+        children: [
+            showTabs ? /*#__PURE__*/ jsx(Tabstrip, {
+                "aria-label": "data tabs",
+                ...TabstripProps,
+                activeTabIndex: TabstripProps?.activeTabIndex ?? (null === child ? -1 : active),
+                allowDragDrop: false !== TabstripProps.allowDragDrop,
+                animateSelectionThumb: true,
+                className: clsx("vuuTabHeader", tabstripClassName),
+                keyBoardActivation: keyBoardActivation,
+                onActiveChange: onTabSelectionChanged,
+                onAddTab: onAddTab,
+                onCloseTab: onTabClose,
+                onExitEditMode: handleExitEditMode,
+                onMoveTab: onMoveTab,
+                orientation: tabstripOrientation,
+                children: renderTabs()
+            }) : null,
+            /*#__PURE__*/ jsx("div", {
+                "aria-labelledby": `${id}-${active}`,
+                className: `${classBase}-tabPanel`,
+                role: "tabpanel",
+                children: child
+            })
+        ]
+    });
+});
+Stack_Stack.displayName = "Stack";
+export { Stack_Stack as Stack };

package/src/stack/StackLayout.js

@@ -0,0 +1,116 @@
+import { jsx } from "react/jsx-runtime";
+import { registerComponent, useId } from "@vuu-ui/vuu-utils";
+import react, { useCallback, useRef } from "react";
+import { useLayoutCreateNewChild, useLayoutProviderDispatch } from "../layout-provider/index.js";
+import { getDefaultTabLabel } from "../layout-reducer/index.js";
+import { useViewActionDispatcher } from "../layout-view-actions/useViewActionDispatcher.js";
+import { useViewBroadcastChannel } from "../layout-view/useViewBroadcastChannel.js";
+import { usePersistentState } from "../use-persistent-state.js";
+import { Stack } from "./Stack.js";
+const StackLayout = (props)=>{
+    const rootRef = useRef(null);
+    const dispatch = useLayoutProviderDispatch();
+    const { loadState } = usePersistentState();
+    const { createNewChild: createNewChildProp, id: idProp, onTabSelectionChanged, path, ...restProps } = props;
+    const { children } = props;
+    const id = useId(idProp);
+    const sendMessage = useViewBroadcastChannel();
+    const [dispatchViewAction] = useViewActionDispatcher(id, rootRef, path);
+    const createNewChildFromContext = useLayoutCreateNewChild();
+    const createNewChild = createNewChildProp ?? createNewChildFromContext;
+    const handleTabSelection = (nextIdx)=>{
+        if (path) {
+            dispatch({
+                type: "switch-tab",
+                id,
+                path,
+                nextIdx
+            });
+            onTabSelectionChanged?.(nextIdx);
+        }
+    };
+    const handleTabClose = useCallback((tabIndex)=>{
+        if (Array.isArray(children)) {
+            const { props: { "data-path": dataPath, path = dataPath } } = children[tabIndex];
+            sendMessage({
+                type: "layout-closed",
+                path
+            });
+            setTimeout(()=>{
+                dispatch({
+                    type: "remove",
+                    path
+                });
+            }, 100);
+        }
+    }, [
+        children,
+        dispatch,
+        sendMessage
+    ]);
+    const handleTabAdd = useCallback(()=>{
+        if (path) {
+            const tabIndex = react.Children.count(children);
+            dispatch({
+                type: "add",
+                path,
+                component: createNewChild(tabIndex)
+            });
+        }
+    }, [
+        children,
+        createNewChild,
+        dispatch,
+        path
+    ]);
+    const handleMoveTab = useCallback((fromIndex, toIndex)=>{
+        if (path) dispatch({
+            fromIndex,
+            toIndex,
+            path,
+            type: "move-child"
+        });
+    }, [
+        dispatch,
+        path
+    ]);
+    const handleMouseDown = async (e, index)=>{
+        let readyToDrag;
+        const preDragActivity = async ()=>new Promise((resolve)=>{
+                console.log("preDragActivity: Ok, gonna release the drag");
+                readyToDrag = resolve;
+            });
+        const dragging = await dispatchViewAction({
+            type: "mousedown",
+            index,
+            preDragActivity
+        }, e);
+        if (dragging) readyToDrag?.(void 0);
+    };
+    const handleTabEdit = (tabIndex, text)=>{
+        dispatch({
+            type: "set-title",
+            path: `${path}.${tabIndex}`,
+            title: text
+        });
+    };
+    const getTabLabel = (component, idx, existingLabels)=>{
+        const { id, title } = component.props;
+        return loadState(id, "view-title") || title || getDefaultTabLabel(component, idx, existingLabels);
+    };
+    return /*#__PURE__*/ jsx(Stack, {
+        ...restProps,
+        id: id,
+        getTabLabel: getTabLabel,
+        onMouseDown: handleMouseDown,
+        onMoveTab: handleMoveTab,
+        onAddTab: handleTabAdd,
+        onTabClose: handleTabClose,
+        onTabEdit: handleTabEdit,
+        onTabSelectionChanged: handleTabSelection,
+        ref: rootRef
+    });
+};
+StackLayout.displayName = "Stack";
+registerComponent("Stack", StackLayout, "container");
+export { StackLayout };

package/src/stack/index.js

@@ -0,0 +1,3 @@
+export * from "./Stack.js";
+export * from "./StackLayout.js";
+export * from "./stackTypes.js";

package/src/tabs/TabPanel.css.js

@@ -0,0 +1,17 @@
+const css = `
+.TabPanel {
+  flex: 1;
+  display: flex;
+}
+
+.TabPanel > * {
+  height: 100%;
+}
+
+.TabPanel > .View > .Header {
+  display: none;
+}
+
+
+`;
+export default css;

package/src/tabs/TabPanel.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import "./TabPanel.css";
+const TabPanel = ({ ariaLabelledBy, children, id })=>/*#__PURE__*/ jsx("div", {
+        className: "TabPanel",
+        id: id,
+        role: "tabpanel",
+        "aria-labelledby": ariaLabelledBy,
+        children: children
+    });
+var tabs_TabPanel = TabPanel;
+export default tabs_TabPanel;

package/src/tabs/index.js

@@ -0,0 +1 @@
+export { default as TabPanel } from "./TabPanel.js";

package/src/tools/config-wrapper/ConfigWrapper.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import react, { useState } from "react";
+import { LayoutConfigurator, LayoutTreeViewer } from "../index.js";
+import { followPathToComponent } from "../../index.js";
+const ConfigWrapper = ({ children })=>{
+    const designMode = false;
+    const [layout, setLayout] = useState(children);
+    const [selectedComponent, setSelectedComponent] = useState(children);
+    const handleSelection = (selectedPath)=>{
+        const targetComponent = followPathToComponent(layout, selectedPath);
+        setSelectedComponent(targetComponent);
+    };
+    const handleChange = (property, value)=>{
+        console.log(`change ${property} -> ${value}`);
+        const newComponent = /*#__PURE__*/ react.cloneElement(selectedComponent, {
+            style: {
+                ...selectedComponent.props.style,
+                [property]: value
+            }
+        });
+        setSelectedComponent(newComponent);
+        setLayout(/*#__PURE__*/ react.cloneElement(layout, {}, newComponent));
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        "data-design-mode": `${designMode}`,
+        children: [
+            layout,
+            /*#__PURE__*/ jsx("br", {}),
+            /*#__PURE__*/ jsxs("div", {
+                style: {
+                    display: "flex"
+                },
+                children: [
+                    /*#__PURE__*/ jsx(LayoutConfigurator, {
+                        height: 300,
+                        managedStyle: selectedComponent.props.style,
+                        width: 300,
+                        onChange: handleChange,
+                        style: void 0
+                    }),
+                    /*#__PURE__*/ jsx(LayoutTreeViewer, {
+                        layout: layout,
+                        onSelect: handleSelection,
+                        style: {
+                            width: 300,
+                            height: 300,
+                            backgroundColor: "#ccc"
+                        }
+                    })
+                ]
+            })
+        ]
+    });
+};
+export { ConfigWrapper };

package/src/tools/config-wrapper/index.js

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

package/src/tools/devtools-box/layout-configurator.css.js

@@ -0,0 +1,113 @@
+const css = `
+[data-design-mode="true"] .Component {
+  filter: grayscale();
+  opacity: .4;
+}
+
+[data-design-mode="true"] .Component:after {
+  color: #000;
+  content: "Component";
+  background-color: #ff0;
+  height: 12px;
+}
+
+.LayoutConfigurator {
+  --margin-color: #f3cea5;
+  --border-color: #fddda0;
+  --padding-color: #c6d092;
+  --content-color: #8cb6c0;
+  background-color: var(--margin-color);
+  flex-direction: column;
+  align-items: stretch;
+  display: flex;
+}
+
+.LayoutConfigurator .layout-outer {
+  flex-direction: column;
+  flex: auto;
+  align-items: stretch;
+  display: flex;
+}
+
+.LayoutBox {
+  --hw-control-font-size: 13px;
+  --hw-text-input-bg: #ffffff4d;
+  --hwTextInput-padding: 3px;
+  --hw-text-input-position: absolute;
+  --hwTextInput-width: 30px;
+  flex: auto;
+}
+
+.LayoutBox > .layout-top {
+  flex-direction: row;
+  flex: 0 0 40px;
+  align-items: center;
+  padding-left: 12px;
+  display: flex;
+  position: relative;
+}
+
+.LayoutBox > .layout-bottom {
+  flex-direction: row;
+  flex: 0 0 40px;
+  align-items: center;
+  display: flex;
+  position: relative;
+}
+
+.LayoutBox > .layout-inner > .layout-right, .LayoutBox > .layout-inner > .layout-left {
+  flex-direction: column;
+  flex: 0 0 40px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.layout-top, .layout-bottom {
+  --hw-text-input-margin: 0 0 0 -15px;
+}
+
+.layout-top > .layout-input, .layout-bottom > .layout-input {
+  left: 50%;
+}
+
+.LayoutBox > .layout-inner {
+  flex-direction: row;
+  flex: auto;
+  align-items: stretch;
+  display: flex;
+}
+
+.LayoutBox.layout-margin {
+  background-color: var(--margin-color);
+  border: 2px dashed #000;
+}
+
+.LayoutBox.layout-border {
+  background-color: var(--border-color);
+  border: 2px solid #000;
+}
+
+.LayoutBox.layout-padding {
+  background-color: var(--padding-color);
+  border: 2px dashed #000;
+}
+
+.LayoutBox .layout-content {
+  background-color: var(--content-color);
+  border: 2px solid gray;
+  flex: auto;
+}
+
+.LayoutBox .layout-title {
+  color: #161616;
+  font-size: 11px;
+  line-height: 15px;
+  position: absolute;
+  top: 1px;
+  left: 4px;
+}
+
+
+`;
+export default css;

package/src/tools/devtools-tree/layout-tree-viewer.css.js

@@ -0,0 +1,17 @@
+const css = `
+.hwLayoutTreeNode {
+  cursor: default;
+}
+
+.hwLayoutTreeNode:hover {
+  background-color: #fff3;
+}
+
+.hwLayoutTreeNode[aria-selected="true"] {
+  color: #fff;
+  background-color: #6495ed;
+}
+
+
+`;
+export default css;

package/src/tools/index.js

@@ -0,0 +1,3 @@
+export * from "./config-wrapper/index.js";
+export * from "./devtools-box/layout-configurator.js";
+export * from "./devtools-tree/layout-tree-viewer.js";

package/src/use-persistent-state.js

@@ -0,0 +1,43 @@
+import { useCallback } from "react";
+const persistentState = new Map();
+const getPersistentState = (id)=>persistentState.get(id);
+const hasPersistentState = (id)=>persistentState.has(id);
+const setPersistentState = (id, value)=>persistentState.set(id, value);
+const usePersistentState = ()=>{
+    const loadState = useCallback((id, key)=>{
+        const state = persistentState.get(id);
+        if (state) {
+            if (void 0 !== key) return state[key];
+            return state;
+        }
+    }, []);
+    const saveState = useCallback((id, key, data)=>{
+        if (void 0 === key) persistentState.set(id, data);
+        else if (persistentState.has(id)) {
+            const state = persistentState.get(id);
+            persistentState.set(id, {
+                ...state,
+                [key]: data
+            });
+        } else persistentState.set(id, {
+            [key]: data
+        });
+    }, []);
+    const purgeState = useCallback((id, key)=>{
+        if (persistentState.has(id)) if (void 0 === key) persistentState.delete(id);
+        else {
+            const state = persistentState.get(id);
+            if (state[key]) {
+                const { [key]: _doomedState, ...rest } = persistentState.get(id);
+                if (Object.keys(rest).length > 0) persistentState.set(id, rest);
+                else persistentState.delete(id);
+            }
+        }
+    }, []);
+    return {
+        loadState,
+        saveState,
+        purgeState
+    };
+};
+export { getPersistentState, hasPersistentState, setPersistentState, usePersistentState };

package/src/utils/index.js

@@ -0,0 +1,5 @@
+export * from "./pathUtils.js";
+export * from "./propUtils.js";
+export * from "./refUtils.js";
+export * from "./styleUtils.js";
+export * from "./typeOf.js";