Showcase refurb (#1571)

* migrate showcase from vuu-layout to grid-layout

* rewrite grid spliytter resiz I

* IFrame should respond to location changes

* adopt features of flexbox splitter in grid splitter

* fix bug, splitter fails with iframe

* fix margin issues with griditems adjoining splitters

* fix issue in showcase tree building

* add file watcher to showcase

Author: heswell

vuu-ui/package-lock.json

@@ -37,7 +37,7 @@
     "deploy:websocket-test": "node ./tools/deploy-websocket-test.mjs",
     "view-bundle": "node ./scripts/visualize-bundle.mjs",
     "type-defs": "node ./scripts/build-all-type-defs.mjs",
-    "showcase": "cd showcase && tsx ../tools/vuu-showcase/scripts/showcase-vite-api.ts",
+    "showcase": "cd showcase && tsx ../tools/vuu-showcase/scripts/showcase-dev.ts",
     "showcase:prod": "npm run build:worker && cd showcase && tsx ../tools/vuu-showcase/scripts/showcase-build.ts",
     "test:cypress": "npm run build:worker && cypress run --component --browser chrome --headless",
     "test:cypress:local": "cypress open --component --browser chrome",

vuu-ui/package.json

@@ -20,6 +20,12 @@
   &.vuuResizing {
     transition: .3s;
   }
+
+  &.vuuFullPage {
+    height: 100vh;
+    width: 100vw;
+  }
+  
 }
 
 .vuuGridLayoutItem {
@@ -34,6 +40,13 @@
     grid-column: 0/0 !important;
     grid-row: 0/0;
   }
+
+  &.has-h-splitter:not(.vuu-stacked) {
+    margin-top: 7px;
+  }
+  &.has-v-splitter {
+    margin-left: 7px;
+  }
 }
 
 .vuuGridLayoutItem-active {
@@ -82,7 +95,12 @@
 }
 
 .vuu-stacked {
-  margin-top: var(--vuu-layout-tabs-height)
+  &.has-h-splitter {
+    margin-top: calc(var(--vuu-layout-tabs-height) + 7px);
+  }
+  &:not(.has-h-splitter){
+    margin-top: var(--vuu-layout-tabs-height);
+  }
 }
 
 .vuuGridLayoutItemHeader-close {

vuu-ui/packages/grid-layout/src/GridLayout.css

@@ -5,53 +5,22 @@ import { useWindow } from "@salt-ds/window";
 import cx from "clsx";
 import { CSSProperties, HTMLAttributes, ReactElement } from "react";
 import { DragDropProviderNext } from "./drag-drop-next/DragDropProviderNext";
-import type { ResizeOrientation } from "./grid-dom-utils";
 import { getGridArea } from "./grid-layout-utils";
 import { GridLayoutContext } from "./GridLayoutContext";
 import { GridLayoutItemProps } from "./GridLayoutItem";
 import { GridLayoutStackedItem } from "./GridLayoutStackedtem";
-import {
-  AriaOrientation,
-  GridColumnsAndRows,
-  GridLayoutChangeHandler,
-} from "./GridModel";
+import { GridColumnsAndRows, GridLayoutChangeHandler } from "./GridModel";
 import { GridPlaceholder } from "./GridPlaceholder";
 import { useGridLayout } from "./useGridLayout";
 import { useGridSplitterResizing } from "./useGridSplitterResizing";
+import { GridSplitter } from "./GridSplitter";
 
 import gridLayoutCss from "./GridLayout.css";
 
 const classBase = "vuuGridLayout";
 
 export type GridResizeable = "h" | "v" | "hv";
 
-export interface GridSplitterProps extends HTMLAttributes<HTMLDivElement> {
-  "aria-controls": string;
-  ariaOrientation: AriaOrientation;
-  orientation: ResizeOrientation;
-}
-
-const NO_DRAG_SOURCES = {} as const;
-
-export const GridSplitter = ({
-  "aria-controls": ariaControls,
-  ariaOrientation,
-  orientation,
-  ...htmlAttributes
-}: GridSplitterProps) => {
-  const id = `${ariaControls}-splitter-${orientation[0]}`;
-  return (
-    <div
-      {...htmlAttributes}
-      aria-controls={ariaControls}
-      aria-orientation={ariaOrientation}
-      className="vuuGridSplitter"
-      id={id}
-      role="separator"
-    />
-  );
-};
-
 export interface GridLayoutProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
   children?:
@@ -62,6 +31,8 @@ export interface GridLayoutProps
   onChange?: GridLayoutChangeHandler;
 }
 
+const NO_DRAG_SOURCES = {} as const;
+
 export const GridLayout = ({
   id: idProp,
   children: childrenProp,
@@ -108,6 +79,8 @@ export const GridLayout = ({
     onClick,
   });
 
+  // const splitterProps = useGridSplitter();
+
   const style = {
     ...gridModel.tracks.css,
     ...styleProp,
@@ -162,6 +135,7 @@ export const GridLayout = ({
           ))}
           {splitters.map((splitter) => (
             <GridSplitter
+              // {...splitterProps}
               aria-controls={splitter.controls}
               ariaOrientation={splitter.ariaOrientation}
               id={splitter.id}

vuu-ui/packages/grid-layout/src/GridLayout.tsx

@@ -22,7 +22,6 @@ import {
   useGridLayoutDragStartHandler,
 } from "./GridLayoutContext";
 import { GridModelChildItemProps } from "./GridModel";
-import gridSplitterCss from "./GridSplitter.css";
 import { useDraggable } from "./useDraggable";
 import { useGridChildProps } from "./useGridChildProps";
 import { IconButton } from "./IconButton";
@@ -90,11 +89,6 @@ export const GridLayoutItem = ({
     css: gridLayoutCss,
     window: targetWindow,
   });
-  useComponentCssInjection({
-    testId: "vuu-grid-splitter",
-    css: gridSplitterCss,
-    window: targetWindow,
-  });
 
   const dispatch = useGridLayoutDispatch();
   // TODO pass the styleProp in here to initialise the model value
@@ -103,8 +97,10 @@ export const GridLayoutItem = ({
     contentVisible,
     dropTarget,
     header,
+    horizontalSplitter,
     stacked,
     title,
+    verticalSplitter,
     ...layoutProps
   } = useGridChildProps({
     contentVisible: contentVisibleProp,
@@ -150,6 +146,8 @@ export const GridLayoutItem = ({
   const className = cx(classBaseItem, {
     "vuu-detached": contentDetached,
     "vuu-stacked": stacked && !contentDetached,
+    "has-h-splitter": horizontalSplitter,
+    "has-v-splitter": verticalSplitter,
   });
 
   const style = {

vuu-ui/packages/grid-layout/src/GridLayoutItem.tsx

@@ -53,12 +53,13 @@ export const GridLayoutStackedItem = ({
     registerTabsForDragDrop(id);
   }, [id, registerTabsForDragDrop]);
 
-  const layoutProps = useGridChildProps({
-    id,
-    resizeable,
-    style: styleProp,
-    type: "stacked-content",
-  });
+  const { horizontalSplitter, verticalSplitter, ...layoutProps } =
+    useGridChildProps({
+      id,
+      resizeable,
+      style: styleProp,
+      type: "stacked-content",
+    });
 
   const { getTabState } = useGridModel();
   const tabState = getTabState(id);
@@ -70,7 +71,10 @@ export const GridLayoutStackedItem = ({
     [tabState],
   );
 
-  const className = cx(classBaseItem, "vuuGridLayoutItem");
+  const className = cx(classBaseItem, "vuuGridLayoutItem", {
+    "has-h-splitter": horizontalSplitter,
+    "has-v-splitter": verticalSplitter,
+  });
 
   const style = {
     ...styleProp,

vuu-ui/packages/grid-layout/src/GridLayoutStackedtem.tsx

@@ -248,11 +248,13 @@ export class GridModelChildItem implements IGridModelChildItem {
   dropTarget?: boolean | string;
   header?: boolean;
   height?: number;
+  horizontalSplitter = false;
   stackId?: string;
   resizeable: GridModelItemResizeable;
   row: GridModelPosition;
   title?: string;
   type: GridModelItemType;
+  verticalSplitter = false;
   width?: number;
 
   #dragging = false;
@@ -1260,13 +1262,18 @@ export class GridModel extends EventEmitter<GridModelEvents> {
       row: { start: rowStart, end: rowEnd },
     } = targetChild;
     const stackId = uuid();
+
     const stackChild = new GridModelChildItem({
       column: { start: colStart, end: colEnd },
       id: stackId,
       row: { start: rowStart, end: rowEnd },
       type: "stacked-content",
     });
 
+    const { horizontalSplitter: h, verticalSplitter: v } = targetChild;
+    stackChild.horizontalSplitter = stackedChild.horizontalSplitter = h;
+    stackChild.verticalSplitter = stackedChild.verticalSplitter = v;
+
     this.setTabState(stackId, [targetChild, stackedChild]);
 
     this.addChildItem(stackChild);
@@ -1390,6 +1397,10 @@ export class GridModel extends EventEmitter<GridModelEvents> {
   }
 
   getSplitters() {
+    this.#childItems.forEach((childItem) => {
+      childItem.horizontalSplitter = false;
+      childItem.verticalSplitter = false;
+    });
     return this.#childItems.flatMap(this.getSplittersForChildItem);
   }
 
@@ -1405,7 +1416,11 @@ export class GridModel extends EventEmitter<GridModelEvents> {
 
     if (!isFixedWidthChildItem(childItem)) {
       const columnContrasAndSiblings =
-        this.findColContrasAndSiblings(childItem);
+        this.findColumnContrasAndSiblings(childItem);
+
+      console.log(`column contrasAndSiblings for #${childItem.id}`, {
+        columnContrasAndSiblings,
+      });
 
       if (columnContrasAndSiblings) {
         const resizeTrackIndex = column.start - 1;
@@ -1416,6 +1431,10 @@ export class GridModel extends EventEmitter<GridModelEvents> {
           after: columnContrasAndSiblings.siblings.map((c) => c.id),
         };
 
+        columnContrasAndSiblings.siblings.forEach((childItem) => {
+          childItem.verticalSplitter = true;
+        });
+
         splitters.push({
           align: "start",
           ariaOrientation: "vertical",
@@ -1448,6 +1467,10 @@ export class GridModel extends EventEmitter<GridModelEvents> {
           after: rowContrasAndSiblings.siblings.map((c) => c.id),
         };
 
+        rowContrasAndSiblings.siblings.forEach((childItem) => {
+          childItem.horizontalSplitter = true;
+        });
+
         splitters.push({
           align: "start",
           ariaOrientation: "horizontal",
@@ -1472,7 +1495,7 @@ export class GridModel extends EventEmitter<GridModelEvents> {
     return splitters;
   };
 
-  private findColContrasAndSiblings(childItem: GridModelChildItem) {
+  private findColumnContrasAndSiblings(childItem: GridModelChildItem) {
     const contrasLeft = this.getContrasLeft(childItem);
     if (contrasLeft.length > 0) {
       const siblingsBelow = this.getSiblingsBelow(childItem);