@vuu-ui/vuu-layout 0.0.27

package/src/drag-drop/dragDropTypes.ts

@@ -0,0 +1,49 @@
+import type { ReactElement } from 'react';
+import type { rect } from '../common-types';
+import { DropTarget } from './DropTarget';
+export interface DragDropRect extends rect {
+  children?: DragDropRect[];
+  header?: {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+    titleWidth?: number;
+  };
+  height: number;
+  scrolling?: { id: string; scrollTop: number; scrollHeight: number };
+  Stack?: { left: number; right: number }[];
+  width: number;
+}
+
+export interface DropPosition {
+  Absolute: boolean;
+  Centre: boolean;
+  East: boolean;
+  EastOrWest: boolean;
+  Header: boolean;
+  North: boolean;
+  NorthOrSouth: boolean;
+  offset: number;
+  South: boolean;
+  SouthOrEast: boolean;
+  West: boolean;
+}
+
+export type RelativePosition = 'after' | 'before';
+
+export type DropPosTab = {
+  index: number;
+  left: number;
+  positionRelativeToTab: RelativePosition;
+  width: number;
+};
+export interface DropPos {
+  closeToTheEdge: number;
+  height?: number;
+  position: DropPosition;
+  tab?: DropPosTab;
+  width?: number;
+  x: number;
+  y: number;
+}

package/src/drag-drop/index.ts

@@ -0,0 +1,4 @@
+export * from "./Draggable";
+export * from "./DropMenu";
+export * from "./DropTarget";
+export * from "./dragDropTypes";

package/src/editable-label/EditableLabel.css

@@ -0,0 +1,28 @@
+.hwEditableLabel {
+  --input-border-width: 1px;
+  color: inherit;
+  font-size: inherit;
+  z-index: 1;
+}
+
+.hwEditableLabel-editing::after {
+  content: attr(data-text) ' ';
+  visibility: hidden;
+  white-space: pre-wrap;
+}
+
+.hwEditableLabel-input {
+  bottom: 0;
+  border: solid grey var(--input-border-width);
+  /* font-weight: var(--hw-font-weight-regular); */
+  left: var(--tab-spacing, 0);
+  outline: none;
+  padding: 0;
+  position: absolute;
+  outline-style: none;
+  right: var(--tab-spacing, 0);
+  top: 0;
+  height: calc(100% - 2 * var(--input-border-width));
+  width: calc(100% - 2 * var(--input-border-width));
+  white-space: nowrap;
+}

package/src/editable-label/EditableLabel.tsx

@@ -0,0 +1,99 @@
+import React, { ChangeEvent, FocusEvent, HTMLAttributes, KeyboardEvent, MouseEvent, useLayoutEffect, useRef, useState } from 'react';
+import cx from 'classnames';
+
+import './EditableLabel.css';
+
+export interface EditableLabelProps extends HTMLAttributes<HTMLDivElement>{
+  onEnterEditMode?: (evt: MouseEvent) => void;
+  onExitEditMode?: (evt: FocusEvent | KeyboardEvent, value: string) => void;
+  value: string;
+}
+
+const EditableLabel = ({
+  className: classNameProp,
+  onEnterEditMode,
+  onExitEditMode,
+  value: valueProp
+}: EditableLabelProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [editing, setEditing] = useState(false);
+  const isEditing = useRef(false);
+  const [value, setValue] = useState(valueProp);
+  const classBase = 'hwEditableLabel';
+
+  useLayoutEffect(() => {
+    if (editing) {
+      inputRef.current?.select();
+      inputRef.current?.focus();
+    }
+  }, [editing, inputRef]);
+
+  const enterEditMode = (evt: MouseEvent) => {
+    if (!isEditing.current) {
+      setEditing((isEditing.current = true));
+      onEnterEditMode && onEnterEditMode(evt);
+    }
+  };
+
+  const exitEditMode = (evt: FocusEvent | KeyboardEvent) => {
+    if (isEditing.current) {
+      setEditing((isEditing.current = false));
+      onExitEditMode && onExitEditMode(evt, value);
+    }
+  };
+
+  const handleChange = (evt: ChangeEvent) => {
+    evt.stopPropagation();
+    setValue((evt.target as HTMLInputElement).value);
+  };
+
+  const handleDoubleClick = (evt: MouseEvent<HTMLSpanElement>) => {
+    enterEditMode(evt);
+  };
+
+  const handleBlur = (evt: FocusEvent<HTMLInputElement>) => {
+    exitEditMode(evt);
+  };
+
+  const handleKeyDown = (evt: KeyboardEvent<HTMLInputElement>) => {
+    evt.stopPropagation();
+    if (evt.key === 'Enter') {
+      exitEditMode(evt);
+    } else if (evt.key === 'ArrowRight' || evt.key === 'ArrowLeft') {
+      evt.stopPropagation();
+    } else if (evt.key === 'Escape') {
+      // TODO restore original value
+      exitEditMode(evt);
+    }
+  };
+
+  const handleKeyUp = (evt: KeyboardEvent<HTMLInputElement>) => {
+    evt.stopPropagation();
+    evt.preventDefault();
+  };
+
+  const className = cx(classBase, classNameProp, {
+    [`${classBase}-editing`]: editing
+  });
+
+  return (
+    <span className={className} onDoubleClick={handleDoubleClick} data-text={value}>
+      {editing ? (
+        <input
+          className={`${classBase}-input`}
+          value={value}
+          onBlur={handleBlur}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          onKeyUp={handleKeyUp}
+          ref={inputRef}
+          style={{ padding: 0 }}
+        />
+      ) : (
+        value
+      )}
+    </span>
+  );
+};
+
+export default EditableLabel;

package/src/editable-label/index.ts

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

package/src/flexbox/Flexbox.css

@@ -0,0 +1,45 @@
+:root {
+  --hw-space-unit: 4px;
+  --hw-flex-gap: 3;
+  --hw-fluid-grid-col-bg: rgba(200, 200, 200, 0.3);
+}
+
+.hwFlexbox {
+  background-color: var(--container1-background);
+  box-sizing: border-box;
+  display: flex;
+  gap: calc(var(--spacing) * var(--space));
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.hwFlexbox-column {
+  flex-direction: column;
+}
+
+.hwFlexbox-row {
+  flex-direction: row;
+}
+
+.hwFlexbox > .Splitter {
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.hwFlexbox.full-page {
+  height: 100vh;
+  width: 100vw;
+}
+
+.flex-fill {
+  border-color: red;
+  flex: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.vuuView.flex-fill {
+  border-color: red;
+}

package/src/flexbox/Flexbox.tsx

@@ -0,0 +1,70 @@
+import { useForkRef } from "@heswell/uitk-core";
+import cx from "classnames";
+import { CSSProperties, ForwardedRef, forwardRef } from "react";
+import { FlexboxProps } from "./flexboxTypes";
+import { useSplitterResizing } from "./useSplitterResizing";
+
+import "./Flexbox.css";
+
+const classBase = "hwFlexbox";
+
+const Flexbox = forwardRef(function Flexbox(
+  props: FlexboxProps,
+  ref: ForwardedRef<HTMLDivElement>
+) {
+  const {
+    breakPoints,
+    children,
+    // cols: colsProp,
+    column,
+    className: classNameProp,
+    flexFill,
+    gap,
+    fullPage,
+    id,
+    onSplitterMoved,
+    resizeable,
+    row,
+    spacing,
+    splitterSize,
+    style,
+    ...rest
+  } = props;
+
+  const { content, rootRef } = useSplitterResizing({
+    children,
+    // cols: colsProp,
+    onSplitterMoved,
+    style,
+  });
+
+  const className = cx(classBase, classNameProp, {
+    [`${classBase}-column`]: column,
+    [`${classBase}-row`]: row,
+    "flex-fill": flexFill,
+    "full-page": fullPage,
+  });
+
+  return (
+    <div
+      {...rest}
+      className={className}
+      // data-cols={cols}
+      data-resizeable={resizeable || undefined}
+      id={id}
+      ref={useForkRef(rootRef, ref)}
+      style={
+        {
+          ...style,
+          gap,
+          "--spacing": spacing,
+        } as CSSProperties
+      }
+    >
+      {content}
+    </div>
+  );
+});
+Flexbox.displayName = "Flexbox";
+
+export default Flexbox;

package/src/flexbox/FlexboxLayout.jsx

@@ -0,0 +1,26 @@
+import React, { useCallback } from 'react';
+import Flexbox from './Flexbox';
+import { Action } from '../layout-action';
+import { registerComponent } from '../registry/ComponentRegistry';
+import { useLayoutProviderDispatch } from '../layout-provider';
+
+export const FlexboxLayout = function FlexboxLayout(props) {
+  const { path } = props;
+  const dispatch = useLayoutProviderDispatch();
+
+  const handleSplitterMoved = useCallback(
+    (sizes) => {
+      dispatch({
+        type: Action.SPLITTER_RESIZE,
+        path,
+        sizes
+      });
+    },
+    [dispatch, path]
+  );
+
+  return <Flexbox {...props} onSplitterMoved={handleSplitterMoved} />;
+};
+FlexboxLayout.displayName = 'Flexbox';
+
+registerComponent('Flexbox', FlexboxLayout, 'container');

package/src/flexbox/FluidGrid.css

@@ -0,0 +1,134 @@
+:root {
+  --hw-space-unit: 4px;
+  --hw-fluid-grid-col-bg: rgba(252, 209, 232, 0.7);
+}
+
+.hwFluidGrid {
+  --gap: var(--gutter-width);
+
+  display: flex;
+  gap: calc(var(--grid-gap) * var(--hw-space-unit));
+  flex-wrap: wrap;
+  padding: 0;
+}
+
+.hwFluidGrid > * {
+  --gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));
+  --gutter-count: calc(var(--parent-col-count) - 1);
+  --total-gutter-width: calc(var(--gutter-count) * var(--gutter-width));
+  --available-width: calc(100% - var(--total-gutter-width));
+
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+  position: relative;
+}
+
+.hwFluidGrid > *:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: dashed 2px blue;
+}
+
+.hwFluidGrid > [data-xs] {
+  --internal-gutter-count: calc(var(--col-span) - 1);
+  --percent-width: calc(var(--col-span) / var(--parent-col-count));
+  --internal-gutter-width: calc(var(--internal-gutter-count) * var(--gutter-width));
+  flex-basis: calc(var(--available-width) * var(--percent-width) + var(--internal-gutter-width));
+  flex-grow: 0;
+}
+
+.hwFluidGrid > [data-xs='1'] {
+  --col-span: 1;
+}
+.hwFluidGrid > [data-xs='2'] {
+  --col-span: 2;
+}
+.hwFluidGrid > [data-xs='3'] {
+  --col-span: 3;
+}
+
+.hwFluidGrid > [data-xs='4'] {
+  --col-span: 4;
+}
+
+.hwFluidGrid > [data-xs='6'] {
+  --col-span: 6;
+}
+
+.hwFluidGrid > [data-xs='8'] {
+  --col-span: 8;
+}
+
+.hwFluidGrid > [data-xs='9'] {
+  --col-span: 9;
+}
+.hwFluidGrid > [data-xs='10'] {
+  --col-span: 10;
+}
+.hwFluidGrid > [data-xs='11'] {
+  --col-span: 11;
+}
+
+.hwFluidGrid > [data-xs='12'] {
+  --col-span: 12;
+}
+
+@media (min-width: 600px) {
+  .hwFluidGrid > [data-sm='1'] {
+    --col-span: 1;
+  }
+  .hwFluidGrid > [data-sm='2'] {
+    --col-span: 2;
+  }
+
+  .hwFluidGrid > [data-sm='3'] {
+    --col-span: 3;
+  }
+
+  .hwFluidGrid > [data-sm='4'] {
+    --col-span: 4;
+  }
+
+  .hwFluidGrid > [data-sm='6'] {
+    --col-span: 6;
+  }
+
+  .hwFluidGrid > [data-sm='8'] {
+    --col-span: 8;
+  }
+  .hwFluidGrid > [data-sm='9'] {
+    --col-span: 9;
+  }
+  .hwFluidGrid > [data-sm='10'] {
+    --col-span: 10;
+  }
+  .hwFluidGrid > [data-sm='11'] {
+    --col-span: 11;
+  }
+  .hwFluidGrid > [data-sm='12'] {
+    --col-span: 12;
+  }
+}
+
+/* Display the grid background */
+
+.hwFluidGrid-show-grid {
+  --gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));
+  --grid-gutter-count: calc(var(--grid-col-count, var(--parent-col-count)) - 1);
+  --grid-total-gutter-width: calc(var(--grid-gutter-count) * var(--gutter-width));
+  --grid-available-width: calc(100% - var(--grid-total-gutter-width));
+  --grid-percent-width: calc(1 / var(--grid-col-count, var(--parent-col-count)));
+  --column-width: calc(var(--grid-available-width) * var(--grid-percent-width));
+  background: repeating-linear-gradient(
+    to right,
+    var(--hw-fluid-grid-col-bg) 0,
+    var(--hw-fluid-grid-col-bg) var(--column-width),
+    white var(--column-width),
+    white calc(var(--column-width) + var(--gutter-width))
+  );
+}

package/src/flexbox/FluidGrid.tsx

@@ -0,0 +1,84 @@
+import { useForkRef } from "@heswell/uitk-core";
+import cx from "classnames";
+import { ForwardedRef, forwardRef } from "react";
+import { useBreakpoints } from "../responsive";
+import { FlexboxProps } from "./flexboxTypes";
+import "./FluidGrid.css";
+import { useResponsiveSizing } from "./useResponsiveSizing";
+
+const classBase = "hwFluidGrid";
+
+export interface FluidGridProps extends FlexboxProps {
+  showGrid?: boolean;
+}
+
+export const FluidGrid = forwardRef(function FluidGrid(
+  props: FluidGridProps,
+  ref: ForwardedRef<HTMLDivElement>
+) {
+  const {
+    breakPoints,
+    children,
+    column,
+    cols: colsProp = 12,
+    className: classNameProp,
+    flexFill,
+    gap = 3,
+    fullPage,
+    id,
+    onSplitterMoved,
+    resizeable,
+    row,
+    showGrid,
+    spacing,
+    splitterSize,
+    style: styleProp,
+    ...rest
+  } = props;
+
+  const { cols, content, rootRef } = useResponsiveSizing({
+    children,
+    cols: colsProp,
+    // onSplitterMoved,
+    style: styleProp,
+  });
+
+  const breakpoint = useBreakpoints(
+    {
+      breakPoints,
+    },
+    rootRef
+  );
+
+  const className = cx(classBase, classNameProp, {
+    [`${classBase}-column`]: column,
+    [`${classBase}-row`]: row,
+    [`${classBase}-show-grid`]: showGrid,
+    "flex-fill": flexFill,
+    "full-page": fullPage,
+  });
+
+  const style = {
+    ...styleProp,
+    "--spacing": spacing,
+    // only needed to display the cols
+    "--grid-col-count": cols,
+    "--grid-gap": gap,
+  };
+
+  return (
+    <div
+      {...rest}
+      className={className}
+      data-breakpoint={breakpoint}
+      data-cols={cols}
+      data-resizeable={resizeable || undefined}
+      id={id}
+      ref={useForkRef(rootRef, ref)}
+      style={style}
+    >
+      {content}
+    </div>
+  );
+});
+FluidGrid.displayName = "FluidGrid";

package/src/flexbox/FluidGridLayout.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import {FluidGrid, FluidGridProps} from './FluidGrid';
+import { registerComponent } from '../registry/ComponentRegistry';
+
+export const FluidGridLayout = function FluidGridLayout(props: FluidGridProps) {
+  return <FluidGrid {...props} />;
+};
+FluidGridLayout.displayName = 'FluidGrid';
+
+registerComponent('FluidGrid', FluidGridLayout, 'container');

package/src/flexbox/Splitter.css

@@ -0,0 +1,140 @@
+.Splitter {
+  --splitter-size: 3px;
+  --splitter-border-width: 4px;
+  --splitter-border-style: none;
+  --splitter-border-color: white;
+
+  align-items: center;
+  background-color: var(--grey60);
+  border-color: var(--splitter-border-color);
+  border-style: var(--splitter-border-style);
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  outline: none;
+  z-index: 1;
+}
+
+.Splitter:hover {
+  background-color: var(--grey40);
+}
+.active.Splitter {
+  background-color: var(--blue500);
+}
+
+.Splitter.column {
+  cursor: ns-resize;
+  height: var(--splitter-size);
+  border-width: var(--splitter-border-width) 0;
+}
+
+.Splitter:not(.column) {
+  cursor: ew-resize;
+  width: var(--splitter-size);
+  border-width: 0 var(--splitter-border-width);
+}
+
+.Splitter:before {
+  border: none;
+  border-radius: 0;
+  content: '';
+  display: block;
+  padding: 0;
+}
+
+.Splitter .grab-zone {
+  position: absolute;
+  background-color: rgba(255, 0, 0, 0.01);
+  cursor: inherit;
+}
+
+.Splitter.column .grab-zone {
+  left: 0;
+  right: 0;
+  top: -5px;
+  bottom: -5px;
+}
+
+.Splitter:not(column) .grab-zone {
+  left: -5px;
+  right: -5px;
+  top: 0;
+  bottom: 0;
+}
+
+.Splitter:not(.column):before {
+  width: 1px;
+  height: 10px;
+  background: linear-gradient(
+    to bottom,
+    var(--grey900) 10%,
+    transparent 10%,
+    transparent 30%,
+    var(--grey900) 30%,
+    var(--grey900) 40%,
+    transparent 40%,
+    transparent 60%,
+    var(--grey900) 60%,
+    var(--grey900) 70%,
+    transparent 70%,
+    transparent 90%,
+    var(--grey900) 90%
+  );
+}
+
+.active.Splitter.column:before {
+  background: linear-gradient(
+    to right,
+    #ffffff 10%,
+    transparent 10%,
+    transparent 30%,
+    #ffffff 30%,
+    #ffffff 40%,
+    transparent 40%,
+    transparent 60%,
+    #ffffff 60%,
+    #ffffff 70%,
+    transparent 70%,
+    transparent 90%,
+    #ffffff 90%
+  );
+}
+
+.active.Splitter:not(.column):before {
+  background: linear-gradient(
+    to bottom,
+    #ffffff 10%,
+    transparent 10%,
+    transparent 30%,
+    #ffffff 30%,
+    #ffffff 40%,
+    transparent 40%,
+    transparent 60%,
+    #ffffff 60%,
+    #ffffff 70%,
+    transparent 70%,
+    transparent 90%,
+    #ffffff 90%
+  );
+}
+
+.Splitter.column:before {
+  width: 10px;
+  height: 1px;
+  background: linear-gradient(
+    to right,
+    var(--grey900) 10%,
+    transparent 10%,
+    transparent 30%,
+    var(--grey900) 30%,
+    var(--grey900) 40%,
+    transparent 40%,
+    transparent 60%,
+    var(--grey900) 60%,
+    var(--grey900) 70%,
+    transparent 70%,
+    transparent 90%,
+    var(--grey900) 90%
+  );
+}