@vuu-ui/vuu-layout 0.0.27 → 0.5.5

package/src/drag-drop/dragDropTypes.ts

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

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

package/src/editable-label/EditableLabel.css

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

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

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

package/src/flexbox/Flexbox.css

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

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

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

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

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

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

@@ -1,140 +0,0 @@
-.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%
-  );
-}