@vuu-ui/vuu-layout 0.0.27

package/src/responsive/useResizeObserver.ts

@@ -0,0 +1,154 @@
+/* eslint-disable no-restricted-syntax */
+import { useCallback, useLayoutEffect, useRef, RefObject } from 'react';
+export const WidthHeight = ['height', 'width'];
+export const HeightOnly = ['height'];
+export const WidthOnly = ['width'];
+
+export type measurements<T = string | number> = {
+  height?: T;
+  scrollHeight?: T;
+  scrollWidth?: T;
+  width?: T;
+};
+type measuredDimension = keyof measurements<number>;
+
+export type ResizeHandler = (measurements: measurements<number>) => void;
+
+type observedDetails = {
+  onResize?: ResizeHandler;
+  measurements: measurements<number>;
+};
+const observedMap = new WeakMap<HTMLElement, observedDetails>();
+
+const getTargetSize = (
+  element: HTMLElement,
+  contentRect: DOMRectReadOnly,
+  dimension: measuredDimension
+): number => {
+  switch (dimension) {
+    case 'height':
+      return contentRect.height;
+    case 'scrollHeight':
+      return element.scrollHeight;
+    case 'scrollWidth':
+      return element.scrollWidth;
+    case 'width':
+      return contentRect.width;
+    default:
+      return 0;
+  }
+};
+
+const resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+  for (const entry of entries) {
+    const { target, contentRect } = entry;
+    const observedTarget = observedMap.get(target as HTMLElement);
+    if (observedTarget) {
+      const { onResize, measurements } = observedTarget;
+      let sizeChanged = false;
+      for (const [dimension, size] of Object.entries(measurements)) {
+        const newSize = getTargetSize(
+          target as HTMLElement,
+          contentRect,
+          dimension as measuredDimension
+        );
+        if (newSize !== size) {
+          sizeChanged = true;
+          measurements[dimension as measuredDimension] = newSize;
+        }
+      }
+      if (sizeChanged) {
+        onResize && onResize(measurements);
+      }
+    }
+  }
+});
+
+// TODO use an optional lag (default to false) to ask to fire onResize
+// with initial size
+// Note asking for scrollHeight alone will not trigger onResize, this is only triggered by height,
+// with scrollHeight returned as an auxilliary value
+export function useResizeObserver(
+  ref: RefObject<Element | HTMLElement | null>,
+  dimensions: string[],
+  onResize: ResizeHandler,
+  reportInitialSize = false
+): void {
+  const dimensionsRef = useRef(dimensions);
+  const measure = useCallback((target: HTMLElement): measurements<number> => {
+    const rect = target.getBoundingClientRect();
+    return dimensionsRef.current.reduce((map: { [key: string]: number }, dim) => {
+      map[dim] = getTargetSize(target, rect, dim as measuredDimension);
+      return map;
+    }, {});
+  }, []);
+
+  // TODO use ref to store resizeHandler here
+  // resize handler registered with REsizeObserver will never change
+  // use ref to store user onResize callback here
+  // resizeHandler will call user callback.current
+
+  // Keep this effect separate in case user inadvertently passes different
+  // dimensions or callback instance each time - we only ever want to
+  // initiate new observation when ref changes.
+  useLayoutEffect(() => {
+    const target = ref.current as HTMLElement;
+    let cleanedUp = false;
+
+    async function registerObserver() {
+      // Create the map entry immediately. useEffect may fire below
+      // before fonts are ready and attempt to update entry
+      observedMap.set(target, { measurements: {} as measurements<number> });
+      cleanedUp = false;
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      const { fonts } = document as any;
+      if (fonts) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        await fonts.ready;
+      }
+      if (!cleanedUp) {
+        const observedTarget = observedMap.get(target);
+        if (observedTarget) {
+          const measurements = measure(target);
+          observedTarget.measurements = measurements;
+          resizeObserver.observe(target);
+          if (reportInitialSize) {
+            onResize(measurements);
+          }
+        }
+      }
+    }
+
+    if (target) {
+      // TODO might we want multiple callers to attach a listener to the same element ?
+      if (observedMap.has(target)) {
+        throw Error('useResizeObserver attemping to observe same element twice');
+      }
+      void registerObserver();
+    }
+    return () => {
+      if (target && observedMap.has(target)) {
+        resizeObserver.unobserve(target);
+        observedMap.delete(target);
+        cleanedUp = true;
+      }
+    };
+  }, [ref, measure]);
+
+  useLayoutEffect(() => {
+    const target = ref.current as HTMLElement;
+    const record = observedMap.get(target);
+    if (record) {
+      if (dimensionsRef.current !== dimensions) {
+        dimensionsRef.current = dimensions;
+        const measurements = measure(target);
+        record.measurements = measurements;
+      }
+      // Might not have changed, but no harm ...
+      record.onResize = onResize;
+    }
+  }, [dimensions, measure, ref, onResize]);
+
+  // TODO might be a good idea to ref and return the current measurememnts. That way, derived hooks
+  // e.g useBreakpoints don't have to measure and client cn make onResize callback simpler
+}

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 .Toolbar:before {
+  left: 0;
+  width: 100%;
+  bottom: 0;
+  height: 1px;
+  content: '';
+  position: absolute;
+  background: var(--grey60);
+}
+
+.vuuTabHeader {
+  --uitkTabs-activationIndicator-background: transparent;
+  --uitkToolbarField-marginTop: calc(var(--uitk-size-unit) - 1px);
+  border-bottom: solid 1px var(--uitk-container-borderColor-medium);
+}
+
+.vuuTabHeader + .hwFlexbox,
+.vuuTabHeader + * {
+  flex: 1;
+}
+
+.vuuTabHeader + .vuuView > .vuuHeader {
+  height: 0;
+  overflow: hidden;
+}
+
+/* .Splitter.column + .Flexbox > .Tabs:first-child {
+  border-top: solid 1px lightgrey;
+} */
+
+.Layout-svg-button {
+  --spacing-medium: 5px;
+}

package/src/stack/Stack.tsx

@@ -0,0 +1,160 @@
+import { useIdMemo as useId } from "@heswell/uitk-core";
+import { Tab, Tabstrip, Toolbar, ToolbarField } from "@heswell/uitk-lab";
+import React, {
+  ForwardedRef,
+  forwardRef,
+  MouseEvent,
+  ReactElement,
+  ReactNode,
+  useCallback,
+} from "react";
+import { StackProps } from "./stackTypes";
+
+import "./Stack.css";
+
+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,
+    enableAddTab,
+    enableCloseTabs,
+    getTabLabel = getDefaultTabLabel,
+    id: idProp,
+    keyBoardActivation = "manual",
+    onMouseDown,
+    onTabAdd,
+    onTabClose,
+    onTabEdit,
+    onTabSelectionChanged,
+    showTabs,
+    style,
+  }: StackProps,
+  ref: ForwardedRef<HTMLDivElement>
+) {
+  const id = useId(idProp);
+
+  const handleTabSelection = (nextIdx: number) => {
+    // if uncontrolled, handle it internally
+    onTabSelectionChanged?.(nextIdx);
+  };
+
+  const handleTabClose = (tabIndex: number) => {
+    // if uncontrolled, handle it internally
+    onTabClose?.(tabIndex);
+  };
+
+  const handleAddTab = () => {
+    // if uncontrolled, handle it internally
+    onTabAdd?.(React.Children.count(children));
+  };
+
+  const handleMouseDown = (e: MouseEvent<HTMLDivElement>) => {
+    // if uncontrolled, handle it internally
+    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) {
+        onMouseDown?.(e, tabIndex);
+      } else {
+        throw Error("Stack: mousedown on tab with unknown index");
+      }
+    } else if (role === "tablist") {
+      console.log(`Stack mousedown on tabstrip`);
+    }
+  };
+
+  const handleExitEditMode = useCallback(
+    (
+      _oldText: string,
+      newText: string,
+      _allowDeactivation: boolean,
+      tabIndex: number
+    ) => {
+      onTabEdit?.(tabIndex, newText);
+    },
+    [onTabEdit]
+  );
+
+  const activeChild = () => {
+    if (React.isValidElement(children)) {
+      return children;
+    } else if (Array.isArray(children)) {
+      return children[active] ?? null;
+    } else {
+      return null;
+    }
+  };
+
+  const renderTabs = () =>
+    getChildElements(children).map((child, idx) => {
+      const rootId = `${id}-${idx}`;
+      const { closeable, id: childId } = child.props;
+      return (
+        <Tab
+          ariaControls={`${rootId}-tab`}
+          draggable
+          key={childId} // Important that we key by child identifier, not using index
+          id={rootId}
+          label={getTabLabel(child, idx)}
+          closeable={closeable}
+          editable={true}
+          // onEdit={handleTabEdit}
+        />
+      );
+    });
+
+  const child = activeChild();
+
+  return (
+    <div className="Tabs" style={style} id={id} ref={ref}>
+      {showTabs ? (
+        <Toolbar
+          className="vuuTabHeader vuuHeader"
+          // onMouseDown={handleMouseDown}
+        >
+          <ToolbarField
+            disableFocusRing
+            data-collapsible="dynamic"
+            data-priority="3"
+          >
+            <Tabstrip
+              enableRenameTab
+              enableAddTab={enableAddTab}
+              enableCloseTab={enableCloseTabs}
+              keyBoardActivation={keyBoardActivation}
+              onActiveChange={handleTabSelection}
+              onAddTab={handleAddTab}
+              onCloseTab={handleTabClose}
+              onExitEditMode={handleExitEditMode}
+              onMouseDown={handleMouseDown}
+              activeTabIndex={active || (child === null ? -1 : 0)}
+            >
+              {renderTabs()}
+            </Tabstrip>
+          </ToolbarField>
+        </Toolbar>
+      ) : null}
+      {child}
+    </div>
+  );
+});
+Stack.displayName = "Stack";

package/src/stack/StackLayout.tsx

@@ -0,0 +1,137 @@
+import { useIdMemo as useId } from "@heswell/uitk-core";
+import React, { ReactElement, useRef } from "react";
+import { Stack } from "./Stack";
+// import { Tooltray } from "../toolbar";
+// import { CloseButton, MinimizeButton, MaximizeButton } from "../action-buttons";
+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 { StackProps } from "./stackTypes";
+
+import "./Stack.css";
+
+const defaultCreateNewChild = (index: number) => (
+  // Note make this width 100% and height 100% and we get a weird error where view continually resizes - growing
+  <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, saveState } = 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: any, tabIndex = React.Children.count(children)) => {
+    if (path) {
+      console.log(`[StackLayout] handleTabAdd`);
+      const component = createNewChild(tabIndex);
+      console.log({ component });
+      dispatch({
+        type: "add",
+        path,
+        component,
+      });
+    }
+  };
+
+  const handleMouseDown = async (e: any, index: number) => {
+    // If user drags the selected Tab, we need to select another Tab and re-render.
+    // This needs to be co-ordinated with drag Tab within Tabstrip, whcih can
+    // be handles within The Tabstrip until final release - much like Splitter
+    // dragging in Flexbox.
+    let readyToDrag: undefined | ((value: unknown) => void);
+
+    // Experimental
+    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) => {
+    // Save into state on behalf of the associated View
+    // Do we need a mechanism to get this into the JSPOMN when we serialize ?
+    // const { id } = children[tabIndex].props;
+    // saveState(id, 'view-title', text);
+    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}
+      // toolbarContent={
+      //   <Tooltray data-align="right" className="layout-buttons">
+      //     <MinimizeButton />
+      //     <MaximizeButton />
+      //     <CloseButton />
+      // </Tooltray>
+      // }
+    />
+  );
+};
+StackLayout.displayName = "Stack";
+
+registerComponent("Stack", StackLayout, "container");

package/src/stack/index.ts

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

package/src/stack/stackTypes.ts

@@ -0,0 +1,19 @@
+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;
+  getTabLabel?: (component: ReactElement, index: number) => string;
+  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;
+}

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 React, { 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.jsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+
+import { LayoutConfigurator, LayoutTreeViewer } from '..';
+import { followPathToComponent } from '../..';
+
+export const ConfigWrapper = ({ children }) => {
+  const designMode = false;
+  // const [designMode, setDesignMode] = useState(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}`);
+
+    // 2) replace selectedComponent and set layout
+    const newComponent = React.cloneElement(selectedComponent, {
+      style: {
+        ...selectedComponent.props.style,
+        [property]: value
+      }
+    });
+    setSelectedComponent(newComponent);
+    setLayout(React.cloneElement(layout, null, newComponent));
+  };
+
+  return (
+    <div data-design-mode={`${designMode}`}>
+      {layout}
+      <br />
+      <div style={{ display: 'flex' }}>
+        <LayoutConfigurator
+          height={300}
+          managedStyle={selectedComponent.props.style}
+          width={300}
+          onChange={handleChange}
+        />
+        <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.js

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