@vuu-ui/vuu-layout 0.5.14 → 0.5.15

package/src/palette/Palette.tsx

@@ -0,0 +1,140 @@
+import { uuid } from "@vuu-ui/vuu-utils";
+import { List, ListItem, ListItemProps } from "@heswell/salt-lab";
+import cx from "classnames";
+import {
+  cloneElement,
+  HTMLAttributes,
+  memo,
+  MouseEvent,
+  ReactElement,
+} from "react";
+import { useLayoutProviderDispatch } from "../layout-provider";
+import { View } from "../layout-view";
+import { registerComponent } from "../registry/ComponentRegistry";
+
+import "./Palette.css";
+
+const clonePaletteItem = (paletteItem: HTMLElement) => {
+  const dolly = paletteItem.cloneNode(true) as HTMLElement;
+  dolly.id = "";
+  delete dolly.dataset.idx;
+  return dolly;
+};
+
+export interface PaletteItemProps extends ListItemProps {
+  children: ReactElement;
+  closeable?: boolean;
+  header?: boolean;
+  idx?: number;
+  resize?: "defer";
+  resizeable?: boolean;
+}
+
+export const PaletteItem = memo(
+  ({
+    className,
+    children: component,
+    idx,
+    resizeable,
+    header,
+    closeable,
+    ...props
+  }: PaletteItemProps) => {
+    return (
+      <ListItem
+        className={cx("vuuPaletteItem", className)}
+        data-draggable
+        {...props}
+      />
+    );
+  }
+);
+
+PaletteItem.displayName = "PaletteItem";
+
+export interface PaletteProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  children: ReactElement[];
+  orientation: "horizontal" | "vertical";
+  selection?: string;
+}
+
+export const Palette = ({
+  children,
+  className,
+  orientation = "horizontal",
+  ...props
+}: PaletteProps) => {
+  const dispatch = useLayoutProviderDispatch();
+  const classBase = "vuuPalette";
+
+  function handleMouseDown(evt: MouseEvent) {
+    const target = evt.target as HTMLElement;
+    const listItemElement = target.closest(".vuuPaletteItem") as HTMLElement;
+    const idx = parseInt(listItemElement.dataset.idx ?? "-1");
+    if (idx !== -1) {
+      console.log({
+        children,
+        idx,
+        listItemElement,
+      });
+    }
+    const {
+      props: { caption, children: payload, template, ...props },
+    } = children[idx];
+    const { height, left, top, width } =
+      listItemElement.getBoundingClientRect();
+    const id = uuid();
+    const identifiers = { id, key: id };
+    const component = template ? (
+      payload
+    ) : (
+      <View {...identifiers} {...props} title={props.label}>
+        {payload}
+      </View>
+    );
+
+    dispatch({
+      dragRect: {
+        left,
+        top,
+        right: left + width,
+        bottom: top + 150,
+        width,
+        height,
+      },
+      dragElement: clonePaletteItem(listItemElement),
+      evt: evt.nativeEvent,
+      instructions: {
+        DoNotRemove: true,
+        DoNotTransform: true,
+        RemoveDraggableOnDragEnd: true,
+        dragThreshold: 10,
+      },
+      path: "*",
+      payload: component,
+      type: "drag-start",
+    });
+  }
+
+  return (
+    <List
+      {...props}
+      borderless
+      className={cx(classBase, className, `${classBase}-${orientation}`)}
+      maxHeight={800}
+      selected={null}
+    >
+      {children.map((child, idx) =>
+        child.type === PaletteItem
+          ? cloneElement(child, {
+              key: idx,
+              onMouseDown: handleMouseDown,
+            })
+          : child
+      )}
+    </List>
+  );
+};
+
+registerComponent("Palette", Palette, "view");

package/src/palette/PaletteSalt.css

@@ -0,0 +1,9 @@
+.vuuPalette {
+  --list-item-header-bg: inherit;
+  --list-item-header-color: inherit;
+  --list-item-padding: 0 6px 0 24px;
+  --list-item-header-twisty-color: black;
+  --list-item-header-twisty-left: 3px;
+  --list-item-header-twisty-right: auto;
+}
+

package/src/palette/PaletteSalt.tsx

@@ -0,0 +1,79 @@
+import { uuid } from "@vuu-ui/vuu-utils";
+import { List, ListItem, ListItemProps, ListProps } from "@heswell/salt-lab";
+import cx from "classnames";
+import { MouseEvent, ReactElement } from "react";
+import { useLayoutProviderDispatch } from "../layout-provider";
+import { View } from "../layout-view";
+import { registerComponent } from "../registry/ComponentRegistry";
+
+import "./PaletteSalt.css";
+
+const classBase = "vuuPalette";
+
+export interface PaletteListItemProps extends ListItemProps {
+  children: ReactElement;
+  ViewProps: {
+    header?: boolean;
+    closeable?: boolean;
+    resizeable?: boolean;
+  };
+  template: boolean;
+}
+
+export const PaletteListItem = (props: PaletteListItemProps) => {
+  const { children, ViewProps, label, onMouseDown, template, ...restProps } =
+    props;
+  const dispatch = useLayoutProviderDispatch();
+
+  const handleMouseDown = (evt: MouseEvent<HTMLDivElement>) => {
+    const { left, top, width } = evt.currentTarget.getBoundingClientRect();
+    const id = uuid();
+    const identifiers = { id, key: id };
+    const component = template ? (
+      children
+    ) : (
+      <View {...identifiers} {...ViewProps} title={props.label}>
+        {children}
+      </View>
+    );
+
+    dispatch({
+      type: "drag-start",
+      evt: evt.nativeEvent,
+      path: "*",
+      payload: component,
+      instructions: {
+        DoNotRemove: true,
+        DoNotTransform: true,
+        RemoveDraggableOnDragEnd: true,
+        dragThreshold: 10,
+      },
+      dragRect: {
+        left,
+        top,
+        right: left + width,
+        bottom: top + 150,
+        width,
+        height: 100,
+      },
+    });
+  };
+  return (
+    <ListItem onMouseDown={handleMouseDown} {...restProps}>
+      {label}
+    </ListItem>
+  );
+};
+
+export const PaletteSalt = ({ className, ...props }: ListProps) => {
+  return (
+    <List
+      {...props}
+      className={cx(classBase, className)}
+      height="100%"
+      selectionStrategy="none"
+    />
+  );
+};
+
+registerComponent("PaletteSalt", PaletteSalt, "view");

package/src/palette/index.ts

@@ -0,0 +1,3 @@
+export * from "./Palette";
+export * from "./PaletteSalt";
+

package/src/placeholder/Placeholder.css

@@ -0,0 +1,10 @@
+.vuuPlaceholder {
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.vuuPlaceholder-shim {
+  flex-grow: 0;
+  flex-shrink: 0;
+}

package/src/placeholder/Placeholder.tsx

@@ -0,0 +1,38 @@
+import cx from "classnames";
+import { HTMLAttributes } from "react";
+import { registerComponent } from "../registry/ComponentRegistry";
+
+import "./Placeholder.css";
+
+const classBase = "vuuPlaceholder";
+
+export interface PlaceholderProps extends HTMLAttributes<HTMLDivElement> {
+  closeable?: boolean;
+  flexFill?: boolean;
+  resizeable?: boolean;
+  shim?: boolean;
+}
+
+export const Placeholder = ({
+  className,
+  closeable,
+  flexFill,
+  resizeable,
+  shim,
+  ...props
+}: PlaceholderProps) => {
+  return (
+    <div
+      className={cx(classBase, className, {
+        [`${classBase}-shim`]: shim,
+      })}
+      {...props}
+      data-placeholder
+      data-resizeable
+    >
+    </div>
+  );
+};
+
+Placeholder.displayName = "Placeholder";
+registerComponent("Placeholder", Placeholder);

package/src/placeholder/index.ts

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

package/src/registry/ComponentRegistry.ts

@@ -0,0 +1,44 @@
+import { FunctionComponent } from "react";
+
+const _containers: { [key: string]: boolean } = {};
+const _views: { [key: string]: boolean } = {};
+
+export type layoutComponentType = "component" | "container" | "view";
+
+export interface ComponentWithId {
+  id: string;
+  [key: string]: unknown;
+}
+
+export const ComponentRegistry: {
+  [key: string]: FunctionComponent<ComponentWithId>;
+} = {};
+
+export function isContainer(componentType: string) {
+  return _containers[componentType] === true;
+}
+
+export function isView(componentType: string) {
+  return _views[componentType] === true;
+}
+
+export const isLayoutComponent = (type: string) =>
+  isContainer(type) || isView(type);
+
+export const isRegistered = (className: string) =>
+  !!ComponentRegistry[className];
+
+export function registerComponent(
+  componentName: string,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  component: FunctionComponent<any>,
+  type: layoutComponentType = "component"
+) {
+  ComponentRegistry[componentName] = component;
+
+  if (type === "container") {
+    _containers[componentName] = true;
+  } else if (type === "view") {
+    _views[componentName] = true;
+  }
+}

package/src/registry/index.ts

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

package/src/responsive/breakpoints.ts

@@ -0,0 +1,62 @@
+// should we have some global; defaults ?
+
+import { BreakPointsProp } from "../flexbox/flexboxTypes";
+
+export type BreakPointRamp = [string, number, number];
+
+function breakpointReader(
+  themeName: string,
+  defaultBreakpoints?: BreakPointsProp
+) {
+  //TODO ownerDocument
+  const themeRoot = document.body.querySelector(`.${themeName}`);
+  const handler = {
+    get: function (style: CSSStyleDeclaration, stopName: string) {
+      const val = style.getPropertyValue(
+        // lets assume we have the following naming convention
+        `--${themeName}-breakpoint-${stopName}`
+      );
+      return val ? parseInt(val) : undefined;
+    },
+  };
+
+  return themeRoot
+    ? new Proxy(getComputedStyle(themeRoot), handler)
+    : defaultBreakpoints ?? {};
+}
+
+const byDescendingStopSize = (
+  [, s1]: [string, number],
+  [, s2]: [string, number]
+) => s2 - s1;
+
+// These are assumed to be min-width (aka mobile-first) stops, we could take a
+// paramneter to support max-width as well ?
+// return [stopName, minWidth, maxWidth]
+export const breakpointRamp = (
+  breakpoints: BreakPointsProp
+): BreakPointRamp[] =>
+  Object.entries(breakpoints)
+    .sort(byDescendingStopSize)
+    .map(([name, value], i, all) => [
+      name,
+      value,
+      i < all.length - 1 ? all[i + 1][1] : 9999,
+    ]);
+
+let documentBreakpoints: BreakPointRamp[] | null = null;
+
+const loadBreakpoints = (themeName = "salt") => {
+  // TODO would be nice to read these breakpoint labels from a css variable to
+  // avoid hard-coding them here ?
+  const { xs, sm, md, lg, xl } = breakpointReader(themeName) as BreakPointsProp;
+  return breakpointRamp({ xs, sm, md, lg, xl });
+};
+
+//TODO support multiple themes loaded
+export const getBreakPoints = (themeName?: string) => {
+  if (documentBreakpoints === null) {
+    documentBreakpoints = loadBreakpoints(themeName);
+  }
+  return documentBreakpoints;
+};

package/src/responsive/index.ts

@@ -0,0 +1,3 @@
+export * from "./use-breakpoints";
+export * from "./useResizeObserver";
+export * from "./utils";

package/src/responsive/measureMinimumNodeSize.ts

@@ -0,0 +1,23 @@
+const LEFT_RIGHT = ['left', 'right'];
+const TOP_BOTTOM = ['top', 'bottom'];
+
+export function measureMinimumNodeSize(node: HTMLElement, dimension: 'width' | 'height' = 'width') {
+  const { [dimension]: size } = node.getBoundingClientRect();
+  const { padRight = false, padLeft = false } = node.dataset;
+  const style = getComputedStyle(node);
+  const [start, end] = dimension === 'width' ? LEFT_RIGHT : TOP_BOTTOM;
+  const marginStart = padLeft ? 0 : parseInt(style.getPropertyValue(`margin-${start}`), 10);
+  const marginEnd = padRight ? 0 : parseInt(style.getPropertyValue(`margin-${end}`), 10);
+
+  let minWidth = size;
+  const flexShrink = parseInt(style.getPropertyValue('flex-shrink'), 10);
+  if (flexShrink > 0) {
+    const flexBasis = parseInt(style.getPropertyValue('flex-basis'), 10);
+    // TODO what about percentage values ?
+    if (!isNaN(flexBasis)) {
+      minWidth = flexBasis;
+    }
+  }
+
+  return marginStart + minWidth + marginEnd;
+}

package/src/responsive/overflowUtils.js

@@ -0,0 +1,14 @@
+export const getOverflowedItems = (containerRef, height = 64) => {
+  const elements = Array.from(containerRef.current.childNodes);
+  const firstOverflowIdx = findFirstOverflow(elements, height);
+  return [elements.slice(0, firstOverflowIdx), elements.slice(firstOverflowIdx)];
+};
+
+export const findFirstOverflow = (elements, height) => {
+  for (let i = 0; i < elements.length; i++) {
+    if (elements[i].offsetTop >= height) {
+      return i;
+    }
+  }
+  return -1;
+};

package/src/responsive/use-breakpoints.ts

@@ -0,0 +1,101 @@
+import { RefObject, useCallback, useEffect, useRef, useState } from "react";
+import { useResizeObserver } from "./useResizeObserver";
+import {
+  BreakPointRamp,
+  breakpointRamp,
+  getBreakPoints as getDocumentBreakpoints,
+} from "./breakpoints";
+import { BreakPoint, BreakPointsProp } from "../flexbox/flexboxTypes";
+
+const EMPTY_ARRAY: BreakPoint[] = [];
+
+export interface BreakpointsHookProps {
+  breakPoints?: BreakPointsProp;
+  smallerThan?: string;
+}
+
+// TODO how do we cater for smallerThan/greaterThan breakpoints
+export const useBreakpoints = (
+  { breakPoints: breakPointsProp, smallerThan }: BreakpointsHookProps,
+  ref: RefObject<HTMLElement>
+) => {
+  const [breakpointMatch, setBreakpointmatch] = useState(
+    smallerThan ? false : "lg"
+  );
+  const bodyRef = useRef(document.body);
+  const breakPointsRef = useRef<BreakPointRamp[]>(
+    breakPointsProp ? breakpointRamp(breakPointsProp) : getDocumentBreakpoints()
+  );
+
+  // TODO how do we identify the default
+  const sizeRef = useRef("lg");
+
+  const stopFromMinWidth = useCallback(
+    (w) => {
+      if (breakPointsRef.current) {
+        for (const [name, size] of breakPointsRef.current) {
+          if (w >= size) {
+            return name;
+          }
+        }
+      }
+    },
+    [breakPointsRef]
+  );
+
+  const matchSizeAgainstBreakpoints = useCallback(
+    (width) => {
+      if (smallerThan) {
+        const breakPointRamp = breakPointsRef.current.find(
+          ([name]: BreakPointRamp) => name === smallerThan
+        );
+        if (breakPointRamp) {
+          const [, , maxValue] = breakPointRamp;
+          return width < maxValue;
+        }
+      } else {
+        return stopFromMinWidth(width);
+      }
+      // is this right ?
+      return width;
+    },
+    [smallerThan, stopFromMinWidth]
+  );
+
+  // TODO need to make the dimension a config
+  useResizeObserver(
+    ref || bodyRef,
+    breakPointsRef.current ? ["width"] : EMPTY_ARRAY,
+    ({ width: measuredWidth }: { width?: number }) => {
+      const result = matchSizeAgainstBreakpoints(measuredWidth);
+      if (result !== sizeRef.current) {
+        sizeRef.current = result;
+        setBreakpointmatch(result);
+      }
+    },
+    true
+  );
+
+  useEffect(() => {
+    const target = ref || bodyRef;
+    if (target.current) {
+      const prevSize = sizeRef.current;
+      if (breakPointsRef.current) {
+        // We're measuring here when the resizeObserver has also measured
+        // There isn't a convenient way to get the Resizeobserver to
+        // notify initial size - that's not really its job, unless we
+        // set a flag ?
+        const { clientWidth } = target.current;
+        const result = matchSizeAgainstBreakpoints(clientWidth);
+        sizeRef.current = result;
+        // If initial size of ref does not match the default, notify client after render
+        if (result !== prevSize) {
+          setBreakpointmatch(result);
+        }
+      }
+    }
+  }, [setBreakpointmatch, matchSizeAgainstBreakpoints, ref]);
+
+  // No, just ass the class directly to the ref, no need to render
+  return breakpointMatch;
+};

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
+}