@vuu-ui/vuu-layout 0.5.13 → 0.5.15

package/src/responsive/utils.ts

@@ -0,0 +1,37 @@
+const COLLAPSIBLE = 'data-collapsible';
+
+const RESPONSIVE_ATTRIBUTE: { [key: string]: boolean } = {
+  [COLLAPSIBLE]: true,
+  'data-pad-start': true,
+  'data-pad-end': true
+};
+
+export const isResponsiveAttribute = (propName: string): boolean =>
+  RESPONSIVE_ATTRIBUTE[propName] ?? false;
+
+const isCollapsible = (propName: string) => propName === COLLAPSIBLE;
+
+const COLLAPSIBLE_VALUE: { [key: string]: string } = {
+  dynamic: 'dynamic',
+  instant: 'instant',
+  true: 'instant'
+};
+
+const collapsibleValue = (value: string) => COLLAPSIBLE_VALUE[value] ?? 'none';
+
+type Props = { [key: string]: any };
+export const extractResponsiveProps = (props: Props) => {
+  return Object.keys(props).reduce<[Props, Props]>(
+    (result, propName) => {
+      const [toolbarProps, rest] = result;
+      if (isResponsiveAttribute(propName)) {
+        const value = isCollapsible(propName) ? collapsibleValue(props[propName]) : props[propName];
+
+        toolbarProps[propName] = value;
+        rest[propName] = undefined;
+      }
+      return result;
+    },
+    [{}, {}]
+  );
+};

package/src/stack/Stack.css

@@ -0,0 +1,39 @@
+.Tabs {
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+}
+
+.Tabs-horizontal {
+  flex-direction: row;
+}
+
+.Tabs .Toolbar:before {
+  left: 0;
+  width: 100%;
+  bottom: 0;
+  height: 1px;
+  content: '';
+  position: absolute;
+  background: var(--grey60);
+}
+
+.vuuTabHeader {
+  --saltTabs-activationIndicator-background: transparent;
+  --saltToolbarField-marginTop: calc(var(--salt-size-unit) - 1px);
+  border-bottom: solid 1px var(--salt-container-primary-borderColor);
+}
+
+.vuuTabHeader + .hwFlexbox,
+.vuuTabHeader + * {
+  flex: 1;
+}
+
+.vuuTabHeader + .vuuView > .vuuHeader {
+  height: 0;
+  overflow: hidden;
+}
+
+.Layout-svg-button {
+  --spacing-medium: 5px;
+}

package/src/stack/Stack.tsx

@@ -0,0 +1,173 @@
+import { Tab, Tabstrip, Toolbar, ToolbarField } from "@heswell/salt-lab";
+import { useIdMemo as useId } from "@salt-ds/core";
+import cx from "classnames";
+import React, {
+  ForwardedRef,
+  forwardRef,
+  MouseEvent,
+  ReactElement,
+  ReactNode,
+  useCallback
+} from "react";
+import { StackProps } from "./stackTypes";
+
+import "./Stack.css";
+
+const classBase = "Tabs";
+
+const getDefaultTabIcon = () =>
+  undefined;
+
+const getDefaultTabLabel = (component: ReactElement, tabIndex: number) =>
+  component.props?.title ?? `Tab ${tabIndex + 1}`;
+
+const getChildElements = <T extends ReactElement = ReactElement>(
+  children: ReactNode
+): T[] => {
+  const elements: T[] = [];
+  React.Children.forEach(children, (child) => {
+    if (React.isValidElement(child)) {
+      elements.push(child as T);
+    } else {
+      console.warn(`Stack has unexpected child element type`);
+    }
+  });
+  return elements;
+};
+
+export const Stack = forwardRef(function Stack(
+  {
+    active = 0,
+    children,
+    className: classNameProp,
+    enableAddTab,
+    enableCloseTabs,
+    getTabIcon = getDefaultTabIcon,
+    getTabLabel = getDefaultTabLabel,
+    id: idProp,
+    keyBoardActivation = "manual",
+    onMouseDown,
+    onTabAdd,
+    onTabClose,
+    onTabEdit,
+    onTabSelectionChanged,
+    showTabs,
+    style,
+    TabstripProps,
+  }: StackProps,
+  ref: ForwardedRef<HTMLDivElement>
+) {
+  const id = useId(idProp);
+
+  const handleTabSelection = (nextIdx: number) => {
+    onTabSelectionChanged?.(nextIdx);
+  };
+
+  const handleTabClose = (tabIndex: number) => {
+    onTabClose?.(tabIndex);
+  };
+
+  const handleAddTab = () => {
+    onTabAdd?.(React.Children.count(children));
+  };
+
+  const handleMouseDown = (e: MouseEvent<HTMLDivElement>) => {
+    const target = e.target as HTMLElement;
+    const tabElement = target.closest('[role^="tab"]') as HTMLDivElement;
+    const role = tabElement?.getAttribute("role");
+    if (role === "tab") {
+      const tabIndex = parseInt(tabElement.dataset.idx ?? "-1");
+      if (tabIndex === -1) {
+        throw Error("Stack: mousedown on tab with unknown index");
+      }
+      onMouseDown?.(e, tabIndex);
+    }
+  };
+
+  const handleExitEditMode = useCallback(
+    (
+      _oldText: string,
+      newText: string,
+      _allowDeactivation: boolean,
+      tabIndex: number
+    ) => {
+      onTabEdit?.(tabIndex, newText);
+    },
+    [onTabEdit]
+  );
+
+  const activeChild = () => {
+    if (React.isValidElement(children)) {
+      return children;
+    }
+    if (Array.isArray(children)) {
+      return children[active] ?? null;
+    }
+    return null;
+  };
+
+  const renderTabs = () =>
+    getChildElements(children).map((child, idx) => {
+      const rootId = `${id}-${idx}`;
+      const { closeable, id: childId } = child.props;
+      return (
+        <Tab
+          ariaControls={`${rootId}-tab`}
+          data-icon={getTabIcon(child, idx)}
+          draggable
+          key={childId ?? idx}
+          id={rootId}
+          label={getTabLabel(child, idx)}
+          closeable={closeable}
+          editable={TabstripProps?.enableRenameTab !== false}
+        />
+      );
+    });
+
+  const child = activeChild();
+
+  return (
+    <div
+      className={cx(classBase, classNameProp, {
+        [`${classBase}-horizontal`]: TabstripProps?.orientation === "vertical",
+      })}
+      style={style}
+      id={id}
+      ref={ref}
+    >
+      {showTabs ? (
+        <Toolbar
+          className="vuuTabHeader vuuHeader"
+          orientation={TabstripProps?.orientation}
+        >
+          <ToolbarField
+            disableFocusRing
+            data-collapsible="dynamic"
+            data-priority="3"
+            style={{ alignSelf: "flex-end" }}
+          >
+            <Tabstrip
+              {...TabstripProps}
+              enableRenameTab={TabstripProps?.enableRenameTab !== false}
+              enableAddTab={enableAddTab}
+              enableCloseTab={enableCloseTabs}
+              keyBoardActivation={keyBoardActivation}
+              onActiveChange={handleTabSelection}
+              onAddTab={handleAddTab}
+              onCloseTab={handleTabClose}
+              onExitEditMode={handleExitEditMode}
+              onMouseDown={handleMouseDown}
+              activeTabIndex={
+                TabstripProps?.activeTabIndex ?? (child === null ? -1 : active)
+              }
+            >
+              {renderTabs()}
+            </Tabstrip>
+          </ToolbarField>
+        </Toolbar>
+      ) : null}
+      {child}
+    </div>
+  );
+});
+Stack.displayName = "Stack";

package/src/stack/StackLayout.tsx

@@ -0,0 +1,119 @@
+import { useIdMemo as useId } from "@salt-ds/core";
+import React, { ReactElement, useRef } from "react";
+import Component from "../Component";
+import { useLayoutProviderDispatch } from "../layout-provider";
+import { useViewActionDispatcher, View } from "../layout-view";
+import { registerComponent } from "../registry/ComponentRegistry";
+import { usePersistentState } from "../use-persistent-state";
+import { Stack } from "./Stack";
+import { StackProps } from "./stackTypes";
+
+import "./Stack.css";
+
+const defaultCreateNewChild = (index: number) => (
+  <View
+    resizeable
+    title={`Tab ${index}`}
+    style={{ flexGrow: 1, flexShrink: 0, flexBasis: 0 }}
+    header
+    closeable
+  >
+    <Component style={{ flex: 1 }} />
+  </View>
+);
+
+export const StackLayout = (props: StackProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const dispatch = useLayoutProviderDispatch();
+  const { loadState } = usePersistentState();
+
+  const {
+    createNewChild = defaultCreateNewChild,
+    id: idProp,
+    onTabSelectionChanged,
+    path,
+    ...restProps
+  } = props;
+
+  const { children } = props;
+
+  const id = useId(idProp);
+
+  const [dispatchViewAction] = useViewActionDispatcher(id, ref, path);
+
+  const handleTabSelection = (nextIdx: number) => {
+    console.log(`StackLayout handleTabSelection nextTab = ${nextIdx}`);
+    if (path) {
+      dispatch({ type: "switch-tab", path, nextIdx });
+      onTabSelectionChanged?.(nextIdx);
+    }
+  };
+
+  const handleTabClose = (tabIndex: number) => {
+    if (Array.isArray(children)) {
+      const {
+        props: { "data-path": dataPath, path = dataPath },
+      } = children[tabIndex];
+      dispatch({ type: "remove", path });
+    }
+  };
+
+  const handleTabAdd = (e: unknown, tabIndex = React.Children.count(children)) => {
+    if (path) {
+      console.log(`[StackLayout] handleTabAdd`);
+      const component = createNewChild(tabIndex);
+      console.log({ component });
+      dispatch({
+        type: "add",
+        path,
+        component,
+      });
+    }
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handleMouseDown = async (e: any, index: number) => {
+    let readyToDrag: undefined | ((value: unknown) => void);
+
+    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?.(undefined);
+    }
+  };
+
+  const handleTabEdit = (tabIndex: number, text: string) => {
+    dispatch({ type: "set-title", path: `${path}.${tabIndex}`, title: text });
+  };
+
+  const getTabLabel = (component: ReactElement, idx: number) => {
+    const { id, title } = component.props;
+    return loadState(id, "view-title") || title || `Tab ${idx + 1}`;
+  };
+
+  return (
+    <Stack
+      {...restProps}
+      id={id}
+      getTabLabel={getTabLabel}
+      onMouseDown={handleMouseDown}
+      onTabAdd={handleTabAdd}
+      onTabClose={handleTabClose}
+      onTabEdit={handleTabEdit}
+      onTabSelectionChanged={handleTabSelection}
+      ref={ref}
+    />
+  );
+};
+StackLayout.displayName = "Stack";
+
+registerComponent("Stack", StackLayout, "container");

package/src/stack/index.ts

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

package/src/stack/stackTypes.ts

@@ -0,0 +1,22 @@
+import { TabstripProps } from "@heswell/salt-lab";
+import { HTMLAttributes, MouseEvent, ReactElement, ReactNode } from "react";
+
+export interface StackProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onMouseDown"> {
+  active?: number;
+  createNewChild?: (index: number) => ReactElement;
+  enableAddTab?: boolean;
+  enableCloseTabs?: boolean;
+  getTabIcon?: (component: ReactElement, index: number) => string | undefined;
+  getTabLabel?: (component: ReactElement, index: number) => string | undefined;
+  keyBoardActivation?: "automatic" | "manual";
+  onMouseDown?: (e: MouseEvent, tabIndex: number) => void;
+  onTabAdd?: (tabIndex: number) => void;
+  onTabClose?: (tabIndex: number) => void;
+  onTabEdit?: (tabIndex: number, label: string) => void;
+  onTabSelectionChanged?: (nextIndex: number) => void;
+  path?: string;
+  showTabs?: boolean;
+  toolbarContent?: ReactNode;
+  TabstripProps?: Partial<TabstripProps>;
+}

package/src/tabs/TabPanel.css

@@ -0,0 +1,12 @@
+.TabPanel {
+  display: flex;
+  flex: 1;
+}
+
+.TabPanel > * {
+  height: 100%;
+}
+
+.TabPanel > .View > .Header {
+  display: none;
+}

package/src/tabs/TabPanel.tsx

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from 'react';
+
+import './TabPanel.css';
+
+export interface TabPanelProps extends HTMLAttributes<HTMLDivElement>{
+  ariaLabelledBy: string;
+}
+
+const TabPanel = ({ ariaLabelledBy, children, id }: TabPanelProps) => {
+  return (
+    <div className="TabPanel" id={id} role="tabpanel" aria-labelledby={ariaLabelledBy}>
+      {children}
+    </div>
+  );
+};
+
+export default TabPanel;

package/src/tabs/index.ts

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

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

@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+
+import { LayoutConfigurator, LayoutTreeViewer } from "..";
+import { followPathToComponent } from "../..";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ConfigWrapper = ({ children }: any) => {
+  const designMode = false;
+  const [layout, setLayout] = useState(children);
+  const [selectedComponent, setSelectedComponent] = useState(children);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handleSelection = (selectedPath: any) => {
+    const targetComponent = followPathToComponent(layout, selectedPath);
+    setSelectedComponent(targetComponent);
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handleChange = (property: any, value: any) => {
+    console.log(`change ${property} -> ${value}`);
+
+    const newComponent = React.cloneElement(selectedComponent, {
+      style: {
+        ...selectedComponent.props.style,
+        [property]: value,
+      },
+    });
+    setSelectedComponent(newComponent);
+    setLayout(React.cloneElement(layout, {}, newComponent));
+  };
+
+  return (
+    <div data-design-mode={`${designMode}`}>
+      {layout}
+      <br />
+      <div style={{ display: "flex" }}>
+        <LayoutConfigurator
+          height={300}
+          managedStyle={selectedComponent.props.style}
+          width={300}
+          onChange={handleChange}
+          style={undefined}
+        />
+        <LayoutTreeViewer
+          layout={layout}
+          onSelect={handleSelection}
+          style={{ width: 300, height: 300, backgroundColor: "#ccc" }}
+        />
+      </div>
+      {/* <StateButton
+        defaultChecked={false}
+        onChange={(e, value) => setDesignMode(value)}>Design Mode</StateButton> */}
+    </div>
+  );
+};

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

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

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

@@ -0,0 +1,112 @@
+[data-design-mode='true'] .Component {
+  filter: grayscale(100%);
+  opacity: 0.4;
+}
+
+[data-design-mode='true'] .Component:after {
+  color: black;
+  content: 'Component';
+  height: 12px;
+  background-color: yellow;
+}
+
+.LayoutConfigurator {
+  --margin-color: #f3cea5;
+  --border-color: #fddda0;
+  --padding-color: #c6d092;
+  --content-color: #8cb6c0;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  background-color: var(--margin-color);
+}
+
+.LayoutConfigurator .layout-outer {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.LayoutBox {
+  --hw-control-font-size: 13px;
+  --hw-text-input-bg: rgba(255, 255, 255, 0.3);
+  --hwTextInput-padding: 3px;
+  --hw-text-input-position: absolute;
+  --hwTextInput-width: 30px;
+
+  flex: 1 1 auto;
+}
+
+.LayoutBox > .layout-top {
+  flex: 0 0 40px;
+  padding-left: 12px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: relative;
+}
+
+.LayoutBox > .layout-bottom {
+  flex: 0 0 40px;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.LayoutBox > .layout-inner > .layout-right,
+.LayoutBox > .layout-inner > .layout-left {
+  flex: 0 0 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.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: 1 1 auto;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+}
+
+.LayoutBox.layout-margin {
+  background-color: var(--margin-color);
+  border: dashed 2px black;
+}
+
+.LayoutBox.layout-border {
+  background-color: var(--border-color);
+  border: solid 2px black;
+}
+
+.LayoutBox.layout-padding {
+  background-color: var(--padding-color);
+  border: dashed 2px black;
+}
+
+.LayoutBox .layout-content {
+  flex: 1 1 auto;
+  background-color: var(--content-color);
+  border: solid 2px #808080;
+}
+
+.LayoutBox .layout-title {
+  color: #161616;
+  font-size: 11px;
+  left: 4px;
+  line-height: 15px;
+  position: absolute;
+  top: 1px;
+}