@vuu-ui/vuu-layout 0.0.27

package/README.md

@@ -0,0 +1 @@
+This is a regular package

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@vuu-ui/vuu-layout",
+  "version": "0.0.27",
+  "description": "VUU Layout Components",
+  "main": "src/index.ts",
+  "author": "heswell",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "node ../../scripts/run-build.mjs",
+    "type-defs": "tsc --project tsconfig-emit-types.json"
+  },
+  "files": [
+    "index.js",
+    "index.css",
+    "index.js.map",
+    "index.css.map",
+    "/src"
+  ],
+  "types": "src/index.ts",
+  "peerDependencies": {
+    "@heswell/uitk-core": "0.8.0-vuu.1",
+    "@heswell/uitk-icons": "0.7.0-vuu.1",
+    "@heswell/uitk-lab": "0.8.0-vuu.1",
+    "@vuu-ui/ui-controls": "0.0.27",
+    "@vuu-ui/vuu-utils": "0.0.27",
+    "classnames": "^2.2.6",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}

package/src/Component.css

@@ -0,0 +1,2 @@
+.Component {
+}

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,29 @@
+import classnames from 'classnames';
+import React, { useRef } from 'react';
+import { registerComponent } from './registry/ComponentRegistry';
+
+import './DraggableLayout.css';
+
+// We need to add props to restrict drag behaviour to, for example, popups only
+export const DraggableLayout = function DraggableLayout(props) {
+  // We shouldn't need this but somewhere the customDispatcher/handleDragStart callback is not
+  // being updated and preserves stale ref to props.children, so DragDrop from within a nested
+  // LatoutContext (Stack or DraggableLayout) fails.
+  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/action-buttons/action-buttons.css

@@ -0,0 +1,12 @@
+.hwActionButton {
+  border-width: 0;
+  border-radius: 0;
+  min-height: 28px;
+  min-width: 28px;
+  padding: 0;
+}
+
+.hwActionButton svg {
+  width: 12px;
+  height: 12px;
+}

package/src/action-buttons/action-buttons.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import {
+  ChevronDoubleLeftIcon,
+  ChevronDoubleRightIcon,
+} from "@vuu-ui/ui-controls";
+import { Button, ButtonProps } from "@heswell/uitk-core";
+
+import "./action-buttons.css";
+
+export const ChevronDoubleLeftButton = (props: ButtonProps) => (
+  <Button
+    className="hwActionButton"
+    variant="secondary"
+    aria-label="Close"
+    {...props}
+  >
+    <ChevronDoubleLeftIcon />
+  </Button>
+);
+
+export const ChevronDoubleRightButton = (props: ButtonProps) => (
+  <Button
+    className="hwActionButton"
+    variant="secondary"
+    aria-label="Close"
+    {...props}
+  >
+    <ChevronDoubleRightIcon />
+  </Button>
+);

package/src/action-buttons/index.ts

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

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,153 @@
+.hwDrawer {
+  --drawer-leading-edge-border: solid 1px var(--uitk-container-borderColor-medium, none);
+  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;
+}
+
+.hwDrawer-peekaboo {
+  flex-basis: var(--drawer-peek-size);
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.hwDrawer-inline.hwDrawer-open {
+  flex-basis: var(--drawer-size);
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.hwDrawer-liner {
+  background-color: var(--drawer-bg);
+  overflow: hidden;
+  position: relative;
+}
+
+.hwDrawer-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%;
+}
+
+.hwDrawer-open .hwDrawer-content {
+  right: 0;
+}
+
+/* .hwDrawer:not(.hwDrawer-open) .hwDrawer-liner > * {
+  display: none;
+} */
+
+.hwDrawer-left {
+  border-right: var(--drawer-leading-edge-border);
+}
+.hwDrawer-right {
+  border-left: var(--drawer-leading-edge-border);
+}
+.hwDrawer-top {
+  border-bottom: var(--drawer-leading-edge-border);
+}
+.hwDrawer-bottom {
+  border-top: var(--drawer-leading-edge-border);
+}
+
+.hwDrawer-left .hwDrawer-liner,
+.hwDrawer-right .hwDrawer-liner {
+  height: 100%;
+  transition: width;
+}
+
+.hwDrawer-top .hwDrawer-liner,
+.hwDrawer-bottom .hwDrawer-liner {
+  width: 100%;
+  transition: height;
+}
+
+.hwDrawer-inline .hwDrawer-liner {
+  width: 100%;
+  height: 100%;
+}
+
+.hwDrawer-over .hwDrawer-liner {
+  position: absolute;
+  transition-duration: 0.4s;
+}
+
+.hwDrawer-over.hwDrawer-left .hwDrawer-liner {
+  top: 0;
+  left: 0;
+  width: 0;
+}
+
+.hwDrawer-over.hwDrawer-right .hwDrawer-liner {
+  top: 0;
+  right: 0;
+  width: 0;
+}
+
+.hwDrawer-over.hwDrawer-top .hwDrawer-liner {
+  height: 0;
+  top: 0;
+  left: 0;
+}
+
+.hwDrawer-over.hwDrawer-bottom .hwDrawer-liner {
+  bottom: 0;
+  height: 0;
+  left: 0;
+}
+
+.hwDrawer-left.hwDrawer-over.hwDrawer-peekaboo .hwDrawer-liner,
+.hwDrawer-right.hwDrawer-over.hwDrawer-peekaboo .hwDrawer-liner {
+  width: var(--drawer-peek-size);
+}
+
+.hwDrawer-top.hwDrawer-over.hwDrawer-peekaboo .hwDrawer-liner,
+.hwDrawer-bottom.hwDrawer-over.hwDrawer-peekaboo .hwDrawer-liner {
+  height: var(--drawer-peek-size);
+}
+
+.hwDrawer-left.hwDrawer-over.hwDrawer-open .hwDrawer-liner,
+.hwDrawer-right.hwDrawer-over.hwDrawer-open .hwDrawer-liner {
+  width: var(--drawer-size);
+}
+
+.hwDrawer-top.hwDrawer-over.hwDrawer-open .hwDrawer-liner,
+.hwDrawer-bottom.hwDrawer-over.hwDrawer-open .hwDrawer-liner {
+  height: var(--drawer-size);
+}
+
+.hwDrawer-top,
+.hwDrawer-left {
+  order: 0;
+}
+
+.hwDrawer-bottom,
+.hwDrawer-right {
+  order: 99;
+}
+
+.hwDrawer-left,
+.hwDrawer-right {
+  flex-direction: column;
+}
+
+.hwToggleButton-container {
+  --uitkButton-height: 28px;
+  --uitkButton-width: 28px;
+  --vuu-icon-size: 12px;
+  --vuu-icon-svg: var(--svg-chevron-double-left);
+  flex: 0 0 28px;
+}

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

@@ -0,0 +1,118 @@
+import React, { CSSProperties, HTMLAttributes, useCallback } from "react";
+import cx from "classnames";
+import { Button, useControlled } from "@heswell/uitk-core";
+
+import "./Drawer.css";
+
+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 classBase = "hwDrawer";
+
+  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("hwToggleButton-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;
+};

package/src/dialog/Dialog.css

@@ -0,0 +1,16 @@
+.hwDialog {
+  --dialog-border: var(--hw-dialog-border, solid 1px #ccc);
+  --dialog-padding: var(--hw-dialog-padding, 0);
+  --dialog-shadow: var(--hw-dialog-shadow, none);
+  --vuuView-margin: 0;
+  --vuuView-flex-wrap: none;
+
+  border: var(--dialog-border);
+  margin: var(--hwDialog-margin, 200px auto 0 auto);
+  padding: var(--dialog-padding);
+  box-shadow: var(--dialog-shadow);
+}
+
+.hwDialog::backdrop {
+  background-color: var(--hw-dialog-backdrop);
+}