@vuu-ui/vuu-layout 0.0.27 → 0.5.5

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

@@ -1,112 +0,0 @@
-[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

@@ -1,369 +0,0 @@
-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

@@ -1,15 +0,0 @@
-.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

@@ -1,36 +0,0 @@
-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

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

package/src/use-persistent-state.ts

@@ -1,115 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

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