@vuu-ui/vuu-layout 0.5.13 → 0.5.15

package/package.json

@@ -1,25 +1,22 @@
 {
   "name": "@vuu-ui/vuu-layout",
-  "version": "0.5.13",
+  "version": "0.5.15",
   "description": "VUU Layout Components",
+  "main": "src/index.ts",
   "author": "heswell",
   "license": "Apache-2.0",
+  "scripts": {
+    "build": "node ../../scripts/run-build.mjs",
+    "type-defs": "node ../../scripts/build-type-defs.mjs"
+  },
+  "types": "src/index.ts",
   "peerDependencies": {
     "@salt-ds/core": "1.0.0",
     "@salt-ds/icons": "1.0.0",
     "@heswell/salt-lab": "1.0.0-alpha.0",
-    "@vuu-ui/vuu-utils": "0.5.13",
+    "@vuu-ui/vuu-utils": "0.5.15",
     "classnames": "^2.2.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
-  },
-  "files": [
-    "cjs",
-    "esm",
-    "index.css",
-    "index.css.map",
-    "README.md"
-  ],
-  "module": "esm/index.js",
-  "main": "cjs/index.js"
-}
+  }
+}

package/src/Component.tsx

@@ -0,0 +1,20 @@
+import React, { forwardRef, HTMLAttributes } from 'react';
+import { registerComponent } from './registry/ComponentRegistry';
+
+import './Component.css';
+
+export interface ComponentProps extends HTMLAttributes<HTMLDivElement> {
+  resizeable?: boolean;
+}
+
+const Component = forwardRef(function Component(
+  { resizeable, ...props }: ComponentProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  return <div {...props} className="Component" ref={ref} />;
+}) as React.FunctionComponent<ComponentProps>;
+Component.displayName = 'Component';
+
+export default Component;
+
+registerComponent('Component', Component);

package/src/DraggableLayout.css

@@ -0,0 +1,18 @@
+.DraggableLayout {
+  display: inline-block;
+  outline: none;
+}
+
+[data-dragging='true'] {
+  position: absolute !important;
+  z-index: 100;
+}
+
+.vuuSimpleDraggableWrapper {
+  background-color: white;
+  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
+}
+.vuuSimpleDraggableWrapper > * {
+  height: 100%;
+  width: 100%;
+}

package/src/DraggableLayout.tsx

@@ -0,0 +1,26 @@
+import classnames from 'classnames';
+import { useRef } from 'react';
+import { registerComponent } from './registry/ComponentRegistry';
+
+import './DraggableLayout.css';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const DraggableLayout = function DraggableLayout(props: any) {
+  const sourceRef = useRef();
+  sourceRef.current = props;
+
+  const { className: classNameProp, id, style } = props;
+
+  const className = classnames('DraggableLayout', classNameProp);
+  return (
+    <div className={className} id={id} style={style}>
+      {props.children}
+    </div>
+  );
+};
+
+const componentName = 'DraggableLayout';
+
+DraggableLayout.displayName = componentName;
+
+registerComponent(componentName, DraggableLayout, 'container');

package/src/__tests__/flexbox-utils.spec.js

@@ -0,0 +1,90 @@
+import {
+  findSplitterAndPlaceholderPositions,
+  PLACEHOLDER,
+  SPLITTER
+} from '../flexbox/flexbox-utils';
+
+describe('findSplitterAndPlaceholderPositions', () => {
+  let positions;
+  describe('WHEN there are less than 2 items', () => {
+    it('THEN no splitters are inserted', () => {
+      positions = findSplitterAndPlaceholderPositions([]);
+      expect(positions).toEqual([]);
+
+      positions = findSplitterAndPlaceholderPositions([{ resizeable: true }]);
+      expect(positions).toEqual([0]);
+
+      positions = findSplitterAndPlaceholderPositions([{ resizeable: false }]);
+      expect(positions).toEqual([0]);
+    });
+  });
+
+  describe('WHEN there are no resizeable items', () => {
+    it('THEN no splitters are inserted', () => {
+      positions = findSplitterAndPlaceholderPositions([
+        { resizeable: false },
+        { resizeable: false }
+      ]);
+      expect(positions).toEqual([0, 0]);
+
+      positions = findSplitterAndPlaceholderPositions([
+        { resizeable: false },
+        { resizeable: false },
+        { resizeable: false }
+      ]);
+      expect(positions).toEqual([0, 0, 0]);
+
+      positions = findSplitterAndPlaceholderPositions([
+        { resizeable: false },
+        { resizeable: false },
+        { resizeable: false },
+        { resizeable: false }
+      ]);
+      expect(positions).toEqual([0, 0, 0, 0]);
+    });
+  });
+
+  describe('WHEN all items are resizeable', () => {
+    it('THEN splitters are inserted between items', () => {
+      positions = findSplitterAndPlaceholderPositions([{ resizeable: true }, { resizeable: true }]);
+      expect(positions).toEqual([1, 0]);
+
+      positions = findSplitterAndPlaceholderPositions([
+        { resizeable: true },
+        { resizeable: true },
+        { resizeable: true }
+      ]);
+      expect(positions).toEqual([1, 1, 0]);
+
+      positions = findSplitterAndPlaceholderPositions([
+        { resizeable: true },
+        { resizeable: true },
+        { resizeable: true },
+        { resizeable: true }
+      ]);
+      expect(positions).toEqual([1, 1, 1, 0]);
+    });
+  });
+
+  describe('WHEN some items are resizeable', () => {
+    it('THEN splitters are inserted where appropriate between items', () => {
+      // positions = findSplitterAndPlaceholderPositions([{resizeable: true},{resizeable: true}]);
+      // expect(positions).toEqual([1,0])
+
+      positions = findSplitterAndPlaceholderPositions([
+        { resizeable: false },
+        { resizeable: true },
+        { resizeable: true }
+      ]);
+      expect(positions).toEqual([0, 1, 0]);
+
+      positions = findSplitterAndPlaceholderPositions([
+        { resizeable: false },
+        { resizeable: true },
+        { resizeable: true },
+        { resizeable: true }
+      ]);
+      expect(positions).toEqual([0, 1, 1, 0]);
+    });
+  });
+});

package/src/chest-of-drawers/Chest.css

@@ -0,0 +1,36 @@
+.hwChest {
+  --chest-bg: var(--hw-chest-bg, inherit);
+  --drawer-bg: var(--hw-drawer-bg, inherit);
+  --drawer-size: var(--hw-drawer-size, 200px);
+  --drawer-peek-size: var(--hw-drawer-peek-size, 32px);
+  --drawer-transition-duration: var(--hw-drawer-transition-duration, 0.4s);
+  background-color: var(--chest-bg);
+  display: flex;
+}
+
+.hwChest-horizontal {
+  flex-direction: row;
+}
+
+.hwChest-vertical {
+  flex-direction: column;
+}
+
+.hwChest-content {
+  background-color: var(--chest-bg);
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow: hidden;
+  /* position: relative; */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hwChest-horizontal .hwChest-content {
+  flex-basis: 100%;
+}
+
+.hwChest-vertical .hwChest-content {
+  flex-basis: 100%;
+}

package/src/chest-of-drawers/Chest.tsx

@@ -0,0 +1,42 @@
+import React, { HTMLAttributes, ReactElement } from "react";
+import cx from "classnames";
+import Drawer from "./Drawer";
+import { partition } from "@vuu-ui/vuu-utils";
+import { registerComponent } from "../registry/ComponentRegistry";
+
+import "./Chest.css";
+
+const isDrawer = (component: ReactElement) => component.type === Drawer;
+const isVertical = ({ props: { position = "left" } }: ReactElement) =>
+  position.match(/top|bottom/);
+
+export interface ChestProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactElement[];
+}
+
+const Chest = (props: ChestProps) => {
+  const { children, className: classNameProp, id, style } = props;
+  const classBase = "hwChest";
+  const [drawers, content] = partition(children, isDrawer);
+  const [verticalDrawers, horizontalDrawers] = partition(drawers, isVertical);
+  const orientation =
+    verticalDrawers.length === 0
+      ? "horizontal"
+      : horizontalDrawers.length === 0
+      ? "vertical"
+      : "both";
+
+  const className = cx(classBase, classNameProp, `${classBase}-${orientation}`);
+
+  return (
+    <div className={className} id={id} style={style}>
+      {drawers}
+      <div className={`${classBase}-content`}>{content}</div>
+    </div>
+  );
+};
+Chest.displayName = "Chest";
+
+export default Chest;
+
+registerComponent("Chest", Chest, "container");

package/src/chest-of-drawers/Drawer.css

@@ -0,0 +1,159 @@
+.vuuDrawer {
+  --drawer-leading-edge-border: solid 1px var(--salt-container-primary-borderColor, none);
+  --vuu-close-icon-svg: var(--svg-chevron-double-right);
+
+  transition: flex-basis;
+  transition-duration: var(--drawer-transition-duration);
+  position: relative;
+  z-index: 1;
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+}
+
+.vuuDrawer-peekaboo {
+  flex-basis: var(--drawer-peek-size);
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.vuuDrawer-inline.vuuDrawer-open {
+  flex-basis: var(--drawer-size);
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.vuuDrawer-liner {
+  background-color: var(--drawer-bg);
+  overflow: hidden;
+  position: relative;
+}
+
+.vuuDrawer-content {
+  height: 100%;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  right: var(--drawer-peek-size);
+  transition: right;
+  transition-duration: var(--drawer-transition-duration);
+  width: 100%;
+  flex: 1 1 100%;
+}
+
+.vuuDrawer-open .vuuDrawer-content {
+  right: 0;
+}
+
+/* .vuuDrawer:not(.vuuDrawer-open) .vuuDrawer-liner > * {
+  display: none;
+} */
+
+.vuuDrawer-left {
+  border-right: var(--drawer-leading-edge-border);
+}
+.vuuDrawer-right {
+  border-left: var(--drawer-leading-edge-border);
+}
+.vuuDrawer-top {
+  border-bottom: var(--drawer-leading-edge-border);
+}
+.vuuDrawer-bottom {
+  border-top: var(--drawer-leading-edge-border);
+}
+
+.vuuDrawer-left .vuuDrawer-liner,
+.vuuDrawer-right .vuuDrawer-liner {
+  height: 100%;
+  transition: width;
+}
+
+.vuuDrawer-top .vuuDrawer-liner,
+.vuuDrawer-bottom .vuuDrawer-liner {
+  width: 100%;
+  transition: height;
+}
+
+.vuuDrawer-inline .vuuDrawer-liner {
+  width: 100%;
+  height: 100%;
+}
+
+.vuuDrawer-over .vuuDrawer-liner {
+  position: absolute;
+  transition-duration: 0.4s;
+}
+
+.vuuDrawer-over.vuuDrawer-left .vuuDrawer-liner {
+  top: 0;
+  left: 0;
+  width: 0;
+}
+
+.vuuDrawer-over.vuuDrawer-right .vuuDrawer-liner {
+  top: 0;
+  right: 0;
+  width: 0;
+}
+
+.vuuDrawer-over.vuuDrawer-top .vuuDrawer-liner {
+  height: 0;
+  top: 0;
+  left: 0;
+}
+
+.vuuDrawer-over.vuuDrawer-bottom .vuuDrawer-liner {
+  bottom: 0;
+  height: 0;
+  left: 0;
+}
+
+.vuuDrawer-left.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,
+.vuuDrawer-right.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner {
+  width: var(--drawer-peek-size);
+}
+
+.vuuDrawer-top.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,
+.vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner {
+  height: var(--drawer-peek-size);
+}
+
+.vuuDrawer-left.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,
+.vuuDrawer-right.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner {
+  width: var(--drawer-size);
+}
+
+.vuuDrawer-top.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,
+.vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner {
+  height: var(--drawer-size);
+}
+
+.vuuDrawer-top,
+.vuuDrawer-left {
+  order: 0;
+}
+
+.vuuDrawer-bottom,
+.vuuDrawer-right {
+  order: 99;
+}
+
+.vuuDrawer-left,
+.vuuDrawer-right {
+  flex-direction: column;
+}
+
+.vuuToggleButton-container {
+  --saltButton-height: 28px;
+  --saltButton-width: 28px;
+  --vuu-icon-size: 12px;
+  flex: 0 0 28px;
+}
+
+.vuuDrawer-open {
+  --vuu-close-icon-svg: var(--svg-chevron-double-left);
+
+}

package/src/chest-of-drawers/Drawer.tsx

@@ -0,0 +1,118 @@
+import { Button, useControlled } from "@salt-ds/core";
+import cx from "classnames";
+import { CSSProperties, HTMLAttributes, useCallback } from "react";
+
+import "./Drawer.css";
+
+const classBase = "vuuDrawer";
+
+const sizeAttribute = (value: string | number) => {
+  return typeof value === "string" ? value : value + "px";
+};
+
+const getStyle = (
+  styleProp?: CSSProperties,
+  sizeOpen?: number,
+  sizeClosed?: number
+) => {
+  const hasSizeOpen = sizeOpen !== undefined;
+  const hasSizeClosed = sizeClosed !== undefined;
+
+  if (!styleProp && !hasSizeClosed && !hasSizeOpen) {
+    return undefined;
+  }
+
+  if (!hasSizeClosed && !hasSizeOpen) {
+    return styleProp;
+  }
+
+  return {
+    ...styleProp,
+    "--drawer-size": hasSizeOpen ? sizeAttribute(sizeOpen) : undefined,
+    "--drawer-peek-size": hasSizeClosed ? sizeAttribute(sizeClosed) : undefined,
+  };
+};
+
+export interface DrawerProps extends HTMLAttributes<HTMLDivElement> {
+  clickToOpen?: boolean;
+  defaultOpen: boolean;
+  inline?: boolean;
+  open?: boolean;
+  peekaboo?: boolean;
+  position?: "left" | "right" | "top" | "bottom";
+  sizeOpen?: number;
+  sizeClosed?: number;
+  toggleButton?: "start" | "end";
+}
+const Drawer = ({
+  children,
+  className: classNameProp,
+  clickToOpen,
+  defaultOpen,
+  sizeOpen,
+  sizeClosed,
+  style: styleProp,
+  open: openProp,
+  position = "left",
+  inline,
+  onClick,
+  peekaboo = false,
+  toggleButton,
+  ...props
+}: DrawerProps) => {
+  const [open, setOpen] = useControlled({
+    controlled: openProp,
+    default: defaultOpen ?? false,
+    name: "Drawer",
+    state: "open",
+  });
+
+  const className = cx(classBase, classNameProp, `${classBase}-${position}`, {
+    [`${classBase}-open`]: open,
+    [`${classBase}-inline`]: inline,
+    [`${classBase}-over`]: !inline,
+    [`${classBase}-peekaboo`]: peekaboo,
+  });
+
+  const toggleDrawer = useCallback(() => {
+    console.log("toggleDrawer");
+    setOpen(!open);
+  }, [open, setOpen]);
+
+  const style = getStyle(styleProp, sizeOpen, sizeClosed);
+
+  const handleClick = clickToOpen ? toggleDrawer : onClick;
+
+  const renderToggleButton = () => (
+    <div className={cx("vuuToggleButton-container")}>
+      {open ? (
+        <Button
+          aria-label="close"
+          onClick={toggleDrawer}
+          data-icon="close"
+          variant="secondary"
+        />
+      ) : (
+        <Button
+          aria-label="open"
+          onClick={toggleDrawer}
+          data-icon="close"
+          variant="secondary"
+        />
+      )}
+    </div>
+  );
+
+  return (
+    <div {...props} className={className} onClick={handleClick} style={style}>
+      {toggleButton == "start" ? renderToggleButton() : null}
+      <div className={`${classBase}-liner`}>
+        <div className={`${classBase}-content`}>{children}</div>
+      </div>
+      {toggleButton == "end" ? renderToggleButton() : null}
+    </div>
+  );
+};
+Drawer.displayName = "Drawer";
+
+export default Drawer;

package/src/chest-of-drawers/index.ts

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

package/src/common-types.ts

@@ -0,0 +1,9 @@
+export interface rect {
+  bottom: number;
+  left: number;
+  right: number;
+  top: number;
+}
+export type rectTuple = [number, number, number, number];
+
+export type dimension = 'width' | 'height';

package/src/debug.ts

@@ -0,0 +1,16 @@
+import { ReactElement } from 'react';
+import { typeOf } from './utils';
+
+export const tree = (el: ReactElement, depth = 0) => {
+  const type = typeOf(el);
+  const spaces = '          ';
+  let str = `\n${spaces.slice(0, depth)}${type}`;
+  if (type !== 'View') {
+    const els = el.props.children || [];
+    (Array.isArray(els) ? els : [els]).forEach((child) => {
+      str += tree(child, depth + 1);
+    });
+  }
+
+  return str;
+};