@vuu-ui/vuu-layout 0.0.27

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

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

@@ -0,0 +1,369 @@
+import "./layout-configurator.css";
+import { FormField, Input } from "@heswell/uitk-core";
+
+const NO_STYLE = {};
+
+const DIMENSIONS = {
+  margin: {
+    top: "marginTop",
+    right: "marginRight",
+    bottom: "marginBottom",
+    left: "marginLeft",
+  },
+  border: {
+    top: "borderTopWidth",
+    right: "borderRightWidth",
+    bottom: "borderBottomWidth",
+    left: "borderLeftWidth",
+  },
+  padding: {
+    top: "paddingTop",
+    right: "paddingRight",
+    bottom: "paddingBottom",
+    left: "paddingLeft",
+  },
+};
+
+const LayoutBox = ({ feature, children, style, onChange }) => {
+  return (
+    <div className={`LayoutBox layout-${feature} layout-outer`}>
+      <div className={`layout-top`}>
+        <span className="layout-title">{feature}</span>
+        <FormField className="layout-input" style={{ width: 30 }}>
+          <Input
+            value={style.top}
+            onChange={(evt, value) => onChange(feature, "top", value)}
+          />
+        </FormField>
+      </div>
+      <div className={`layout-inner`}>
+        <div className={`layout-left`}>
+          <FormField className="layout-input" style={{ width: 30 }}>
+            <Input
+              value={style.left}
+              onChange={(evt, value) => onChange(feature, "left", value)}
+            />
+          </FormField>
+        </div>
+        {children}
+        <div className={`layout-right`}>
+          <FormField className="layout-input" style={{ width: 30 }}>
+            <Input
+              value={style.right}
+              onChange={(evt, value) => onChange(feature, "right", value)}
+            />
+          </FormField>
+        </div>
+      </div>
+      <div className={`layout-bottom`}>
+        <FormField className="layout-input" style={{ width: 30 }}>
+          <Input
+            value={style.bottom}
+            onChange={(evt, value) => onChange(feature, "bottom", value)}
+          />
+        </FormField>
+      </div>
+    </div>
+  );
+};
+
+export const MARGIN_STYLES = {
+  margin: true,
+  marginTop: true,
+  marginRight: true,
+  marginBottom: true,
+  marginLeft: true,
+};
+
+export const PADDING_STYLES = {
+  padding: true,
+  paddingTop: true,
+  paddingRight: true,
+  paddingBottom: true,
+  paddingLeft: true,
+};
+
+export const BORDER_STYLES = {
+  border: true,
+  borderColor: true,
+  borderWidth: true,
+  borderTopWidth: true,
+  borderRightWidth: true,
+  borderBottomWidth: true,
+  borderLeftWidth: true,
+};
+
+const CSS_DIGIT = "(\\d+)(?:px)?";
+const CSS_MEASURE = `^(?:${CSS_DIGIT}(?:\\s${CSS_DIGIT}(?:\\s${CSS_DIGIT}(?:\\s${CSS_DIGIT})?)?)?)$`;
+const CSS_REX = new RegExp(CSS_MEASURE);
+const BORDER_REX = /^(?:(\d+)(?:px)\ssolid\s([a-zA-Z,0-9().]+))$/;
+
+export const LayoutConfigurator = ({
+  height,
+  managedStyle,
+  onChange,
+  style,
+  width,
+}) => {
+  const state = normalizeStyle(managedStyle);
+
+  const handleChange = (feature, dimension, strValue) => {
+    const value = parseInt(strValue || "0", 10);
+    const property = DIMENSIONS[feature][dimension];
+    onChange(property, value);
+  };
+
+  const {
+    marginTop: mt = 0,
+    marginRight: mr = 0,
+    marginBottom: mb = 0,
+    marginLeft: ml = 0,
+  } = state;
+  const {
+    borderTopWidth: bt = 0,
+    borderRightWidth: br = 0,
+    borderBottomWidth: bb = 0,
+    borderLeftWidth: bl = 0,
+  } = state;
+  const {
+    paddingTop: pt = 0,
+    paddingRight: pr = 0,
+    paddingBottom: pb = 0,
+    paddingLeft: pl = 0,
+  } = state;
+  return (
+    <div className="LayoutConfigurator" style={{ width, height, ...style }}>
+      <LayoutBox
+        feature="margin"
+        style={{ top: mt, right: mr, bottom: mb, left: ml }}
+        onChange={handleChange}
+      >
+        <LayoutBox
+          feature="border"
+          style={{ top: bt, right: br, bottom: bb, left: bl }}
+          onChange={handleChange}
+        >
+          <LayoutBox
+            feature="padding"
+            style={{ top: pt, right: pr, bottom: pb, left: pl }}
+            onChange={handleChange}
+          >
+            <div className="layout-content" />
+          </LayoutBox>
+        </LayoutBox>
+      </LayoutBox>
+    </div>
+  );
+};
+
+// TODO merge the following two functions
+export function XXXnormalizeStyles(
+  layoutStyle = NO_STYLE,
+  visualStyle = NO_STYLE
+) {
+  const {
+    margin,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    padding,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    ...style
+  } = layoutStyle;
+
+  if (typeof margin === "number") {
+    style.marginTop =
+      style.marginRight =
+      style.marginBottom =
+      style.marginLeft =
+        margin;
+  } else if (typeof margin === "string") {
+    const match = CSS_REX.exec(margin);
+    if (match === null) {
+      console.error(`Invalid css value for margin '${margin}'`);
+    } else {
+      const [, pos1, pos2, pos3, pos4] = match;
+      const pos123 = pos1 && pos2 && pos3;
+      if (pos123 && pos4) {
+        style.marginTop = parseInt(pos1, 10);
+        style.marginRight = parseInt(pos2, 10);
+        style.marginBottom = parseInt(pos3, 10);
+        style.marginLeft = parseInt(pos4, 10);
+      } else if (pos123) {
+        style.marginTop = parseInt(pos1, 10);
+        style.marginRight = style.marginLeft = parseInt(pos2, 10);
+        style.marginBottom = parseInt(pos3, 10);
+      } else if (pos1 && pos2) {
+        style.marginTop = style.marginBottom = parseInt(pos1, 10);
+        style.marginRight = style.marginLeft = parseInt(pos2, 10);
+      } else {
+        style.marginTop =
+          style.marginRight =
+          style.marginBottom =
+          style.marginLeft =
+            parseInt(pos1, 10);
+      }
+    }
+  }
+  if (typeof marginTop === "number") style.marginTop = marginTop;
+  if (typeof marginRight === "number") style.marginRight = marginRight;
+  if (typeof marginBottom === "number") style.marginBottom = marginBottom;
+  if (typeof marginLeft === "number") style.marginLeft = marginLeft;
+
+  if (typeof padding === "number") {
+    style.paddingTop =
+      style.paddingRight =
+      style.paddingBottom =
+      style.paddingLeft =
+        padding;
+  } else if (typeof padding === "string") {
+    const match = CSS_REX.exec(padding);
+    if (match === null) {
+      console.error(`Invalid css value for padding '${padding}'`);
+    } else {
+      const [, pos1, pos2, pos3, pos4] = match;
+      const pos123 = pos1 && pos2 && pos3;
+      if (pos123 && pos4) {
+        style.paddingTop = parseInt(pos1, 10);
+        style.paddingRight = parseInt(pos2, 10);
+        style.paddingBottom = parseInt(pos3, 10);
+        style.paddingLeft = parseInt(pos4, 10);
+      } else if (pos123) {
+        style.paddingTop = parseInt(pos1, 10);
+        style.paddingRight = style.paddingLeft = parseInt(pos2, 10);
+        style.paddingBottom = parseInt(pos3, 10);
+      } else if (pos1 && pos2) {
+        style.paddingTop = style.paddingBottom = parseInt(pos1, 10);
+        style.paddingRight = style.paddingLeft = parseInt(pos2, 10);
+      } else {
+        style.paddingTop =
+          style.paddingRight =
+          style.paddingBottom =
+          style.paddinggLeft =
+            parseInt(pos1, 10);
+      }
+    }
+  }
+  if (typeof paddingTop === "number") style.paddingTop = paddingTop;
+  if (typeof paddingRight === "number") style.paddingRight = paddingRight;
+  if (typeof paddingBottom === "number") style.paddingBottom = paddingBottom;
+  if (typeof paddingLeft === "number") style.paddingLeft = paddingLeft;
+
+  return normalizeStyle(style, visualStyle);
+}
+
+function normalizeStyle(managedStyle = NO_STYLE) {
+  const style = { ...managedStyle };
+
+  // if (BORDER_LIST.some(bs => style[bs])) {
+  let match;
+
+  let {
+    border,
+    borderWidth,
+    borderTopWidth,
+    borderRightWidth,
+    borderBottomWidth,
+    borderLeftWidth,
+    borderColor,
+    margin,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    padding,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    ...rest
+  } = style;
+
+  let marginStyles = {};
+  let paddingStyles = {};
+
+  if (typeof margin === "number") {
+    style.marginTop =
+      style.marginRight =
+      style.marginBottom =
+      style.marginLeft =
+        margin;
+    marginStyles = {
+      marginTop: margin,
+      marginRight: margin,
+      marginBottom: margin,
+      marginLeft: margin,
+    };
+  }
+
+  if (typeof padding === "number") {
+    style.paddingTop =
+      style.paddingRight =
+      style.paddingBottom =
+      style.paddingLeft =
+        padding;
+    paddingStyles = {
+      paddingTop: padding,
+      paddingRight: padding,
+      paddingBottom: padding,
+      paddingLeft: padding,
+    };
+  }
+
+  if (
+    border ||
+    borderWidth ||
+    borderTopWidth ||
+    borderRightWidth ||
+    borderBottomWidth ||
+    borderLeftWidth
+  ) {
+    if (typeof border === "string" && (match = BORDER_REX.exec(border))) {
+      // what if both border and borderWidth are specified ?
+      [, borderWidth, borderColor] = match;
+      borderWidth = parseInt(borderWidth, 10);
+    }
+
+    if (borderWidth) {
+      borderTopWidth =
+        borderTopWidth === undefined ? borderWidth : borderTopWidth;
+      borderRightWidth =
+        borderRightWidth === undefined ? borderWidth : borderRightWidth;
+      borderBottomWidth =
+        borderBottomWidth === undefined ? borderWidth : borderBottomWidth;
+      borderLeftWidth =
+        borderLeftWidth === undefined ? borderWidth : borderLeftWidth;
+    }
+
+    borderColor = borderColor || "black";
+    const boxShadow = `
+                ${borderColor} ${borderLeftWidth || 0}px ${
+      borderTopWidth || 0
+    }px 0 0 inset,
+                ${borderColor} ${-borderRightWidth || 0}px ${
+      -borderBottomWidth || 0
+    }px 0 0 inset`;
+
+    return {
+      ...rest,
+      ...marginStyles,
+      ...paddingStyles,
+      borderTopWidth,
+      borderRightWidth,
+      borderBottomWidth,
+      borderLeftWidth,
+      borderColor,
+      borderStyle: "solid",
+      boxShadow,
+    };
+  } else {
+    return style;
+  }
+  // } else {
+  //   return style;
+  // }
+}

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

@@ -0,0 +1,15 @@
+.hwLayoutTreeViewer {
+}
+
+.hwLayoutTreeNode {
+  cursor: default;
+}
+
+.hwLayoutTreeNode:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.hwLayoutTreeNode[aria-selected='true'] {
+  background-color: cornflowerblue;
+  color: white;
+}

package/src/tools/devtools-tree/layout-tree-viewer.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import cx from "classnames";
+import { typeOf } from "../../utils";
+
+import "./layout-tree-viewer.css";
+import { Tree } from "@vuu-ui/ui-controls";
+
+const classBaseTree = "hwLayoutTreeViewer";
+
+const toTreeJson = (component, path = "0") => {
+  return {
+    label: typeOf(component),
+    path,
+    childNodes: React.Children.map(component.props.children, (child, i) =>
+      toTreeJson(child, path ? `${path}.${i}` : `${i}`)
+    ),
+  };
+};
+
+export const LayoutTreeViewer = ({ layout, onSelect, style }) => {
+  const treeJson = [toTreeJson(layout)];
+
+  const handleSelection = (evt, [{ path }]) => {
+    onSelect(path);
+  };
+
+  return (
+    <div className={cx(classBaseTree)} style={style}>
+      <Tree
+        source={treeJson}
+        groupSelection="single"
+        onSelectionChange={handleSelection}
+      />
+    </div>
+  );
+};

package/src/tools/index.js

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

package/src/use-persistent-state.ts

@@ -0,0 +1,115 @@
+import { useCallback } from "react";
+
+const persistentState = new Map<string, any>();
+const sessionState = new Map<string, any>();
+
+// These is not exported by package, only available within
+// layout. Used by LayoutProvider for layout serialization.
+export const getPersistentState = (id: string) => persistentState.get(id);
+export const hasPersistentState = (id: string) => persistentState.has(id);
+export const setPersistentState = (id: string, value: any) =>
+  persistentState.set(id, value);
+
+export const usePersistentState = () => {
+  //TODO create single set of methods that operate on either session or state
+
+  const loadSessionState = useCallback((id, key) => {
+    const state = sessionState.get(id);
+    if (state) {
+      if (key !== undefined && state[key] !== undefined) {
+        return state[key];
+      } else if (key !== undefined) {
+        return undefined;
+      } else {
+        return state;
+      }
+    }
+  }, []);
+
+  const saveSessionState = useCallback((id, key, data) => {
+    if (key === undefined) {
+      sessionState.set(id, data);
+    } else if (sessionState.has(id)) {
+      const state = sessionState.get(id);
+      sessionState.set(id, {
+        ...state,
+        [key]: data,
+      });
+    } else {
+      sessionState.set(id, { [key]: data });
+    }
+  }, []);
+
+  const purgeSessionState = useCallback((id: string, key?: string) => {
+    if (sessionState.has(id)) {
+      if (key === undefined) {
+        sessionState.delete(id);
+      } else {
+        const state = sessionState.get(id);
+        if (state[key]) {
+          const { [key]: _doomedState, ...rest } = sessionState.get(id);
+          if (Object.keys(rest).length > 0) {
+            sessionState.set(id, rest);
+          } else {
+            sessionState.delete(id);
+          }
+        }
+      }
+    }
+  }, []);
+
+  const loadState = useCallback((id: string, key?: string) => {
+    const state = persistentState.get(id);
+    if (state) {
+      if (key !== undefined) {
+        return state[key];
+      } else {
+        return state;
+      }
+    }
+  }, []);
+
+  const saveState = useCallback(
+    (id: string, key: string | undefined, data: any) => {
+      if (key === undefined) {
+        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: string, key?: string) => {
+    if (persistentState.has(id)) {
+      if (key === undefined) {
+        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 {
+    loadSessionState,
+    loadState,
+    saveSessionState,
+    saveState,
+    purgeState,
+    purgeSessionState,
+  };
+};

package/src/utils/componentFromLayout.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { LayoutJSON } from '../layout-reducer';
+import { ComponentRegistry } from '../registry/ComponentRegistry';
+
+export function componentFromLayout(layoutModel: LayoutJSON) {
+
+  const { id, type, props, children: layoutChildren } = layoutModel;
+  const ReactType = getComponentType(type);
+  let children =
+    !layoutChildren || layoutChildren.length === 0
+      ? null
+      : layoutChildren.length === 1
+      ? componentFromLayout(layoutChildren[0])
+      : layoutChildren.map(componentFromLayout);
+
+  return (
+    <ReactType {...props} key={id}>
+      {children}
+    </ReactType>
+  );
+}
+
+// support for built-in react ttpes (div etc) removed here
+function getComponentType(type: string) {
+  const reactType = ComponentRegistry[type];
+  if (reactType === undefined){
+    throw Error('componentFromLayout: unknown component type: ' + type);
+  }
+  return reactType;
+}

package/src/utils/index.ts

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