@vertly/dashboard-grid 0.1.0 → 0.2.0

package/dist/dashboard-grid.js

@@ -0,0 +1,608 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, useCallback, useRef, useState } from "react";
+import { DndProvider, useDrag, useDragLayer, useDrop } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { GripVerticalIcon } from "lucide-react";
+import {
+  COLS,
+  MAX_ITEMS_PER_ROW,
+  MAX_ROW_HEIGHT,
+  MIN_ROW_HEIGHT,
+  ZONE_WIDTH_PX,
+  moveRow,
+  placeItemAt,
+  placeItemInNewRow,
+  removeItemFromRow,
+  resizeItemPair,
+  resizeRow
+} from "./layout-engine";
+import { cn } from "./cn";
+const DEFAULT_SAVE_DEBOUNCE_MS = 600;
+const ItemTypes = { WIDGET: "widget", ROW: "row" };
+const EXTERNAL_ITEM_TYPE = "vertly-dashboard-grid:external-item";
+function DashboardGrid({
+  rows: initialRows,
+  widgets,
+  readOnly = false,
+  saveDebounceMs = DEFAULT_SAVE_DEBOUNCE_MS,
+  onUpdateLayout,
+  onDeleteWidget,
+  onDropExternalItem,
+  onCreateRowExternalItem,
+  renderRowEdgeAdd,
+  renderWidgetMenu,
+  renderWidgetConfigDialog
+}) {
+  const [{ rows, items }, setState] = useState(() => ({
+    rows: initialRows.map((row) => ({
+      id: row.id,
+      heightPx: row.heightPx,
+      widgetIds: row.widgetIds
+    })),
+    items: Object.fromEntries(
+      Object.values(widgets).map((w) => [w.id, { id: w.id, colSpan: w.colSpan }])
+    )
+  }));
+  const saveTimer = useRef(null);
+  const persist = useCallback(
+    (nextRows, nextItems) => {
+      if (readOnly) return;
+      if (saveTimer.current) clearTimeout(saveTimer.current);
+      saveTimer.current = setTimeout(() => {
+        onUpdateLayout?.(
+          nextRows.map((row) => ({ id: row.id, heightPx: row.heightPx, widgetIds: row.widgetIds })),
+          Object.values(nextItems).map((item) => ({ id: item.id, colSpan: item.colSpan }))
+        );
+      }, saveDebounceMs);
+    },
+    [readOnly, saveDebounceMs, onUpdateLayout]
+  );
+  const placeWidgetAt = useCallback(
+    (opts, targetRowId, index) => {
+      setState((prev) => {
+        const next = placeItemAt(
+          prev.rows,
+          prev.items,
+          opts.widgetId,
+          opts.fromRowId,
+          targetRowId,
+          index
+        );
+        persist(next.rows, next.items);
+        return next;
+      });
+    },
+    [persist]
+  );
+  const createRowWith = useCallback(
+    (opts) => {
+      setState((prev) => {
+        const next = placeItemInNewRow(
+          prev.rows,
+          prev.items,
+          opts.widgetId,
+          opts.fromRowId,
+          `row-${crypto.randomUUID()}`
+        );
+        persist(next.rows, next.items);
+        return next;
+      });
+    },
+    [persist]
+  );
+  const removeWidget = useCallback(
+    (widgetId, rowId) => {
+      setState((prev) => {
+        const next = removeItemFromRow(prev.rows, prev.items, widgetId, rowId);
+        persist(next.rows, next.items);
+        return next;
+      });
+      onDeleteWidget?.(widgetId);
+    },
+    [persist, onDeleteWidget]
+  );
+  const resizeWidgetPair = useCallback(
+    (leftId, rightId, nextLeftColSpan) => {
+      setState((prev) => {
+        const nextItems = resizeItemPair(prev.items, leftId, rightId, nextLeftColSpan);
+        persist(prev.rows, nextItems);
+        return { rows: prev.rows, items: nextItems };
+      });
+    },
+    [persist]
+  );
+  const resizeRowHeight = useCallback(
+    (rowId, heightPx) => {
+      setState((prev) => {
+        const nextRows = resizeRow(prev.rows, rowId, heightPx);
+        persist(nextRows, prev.items);
+        return { rows: nextRows, items: prev.items };
+      });
+    },
+    [persist]
+  );
+  const moveRowTo = useCallback(
+    (from, to) => {
+      setState((prev) => {
+        const nextRows = moveRow(prev.rows, from, to);
+        persist(nextRows, prev.items);
+        return { rows: nextRows, items: prev.items };
+      });
+    },
+    [persist]
+  );
+  return /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, children: /* @__PURE__ */ jsx(
+    Board,
+    {
+      rows,
+      items,
+      widgets,
+      readOnly,
+      onDropExisting: placeWidgetAt,
+      onCreateRowExisting: createRowWith,
+      onRemoveWidget: removeWidget,
+      onResizeWidget: resizeWidgetPair,
+      onResizeRow: resizeRowHeight,
+      onMoveRow: moveRowTo,
+      onDropExternalItem,
+      onCreateRowExternalItem,
+      renderRowEdgeAdd,
+      renderWidgetMenu,
+      renderWidgetConfigDialog
+    }
+  ) });
+}
+function Board({
+  rows,
+  items,
+  widgets,
+  readOnly,
+  onDropExisting,
+  onCreateRowExisting,
+  onRemoveWidget,
+  onResizeWidget,
+  onResizeRow,
+  onMoveRow,
+  onDropExternalItem,
+  onCreateRowExternalItem,
+  renderRowEdgeAdd,
+  renderWidgetMenu,
+  renderWidgetConfigDialog
+}) {
+  const dragActive = useDragLayer((monitor) => monitor.isDragging());
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-4", children: [
+    rows.map((row, index) => /* @__PURE__ */ jsx(
+      SortableRow,
+      {
+        row,
+        index,
+        items,
+        widgets,
+        readOnly,
+        dragActive,
+        onDropExisting,
+        onRemoveWidget,
+        onResizeWidget,
+        onResizeRow,
+        onMoveRow,
+        onDropExternalItem,
+        renderRowEdgeAdd,
+        renderWidgetMenu,
+        renderWidgetConfigDialog
+      },
+      row.id
+    )),
+    !readOnly ? /* @__PURE__ */ jsx(
+      NewRowDropZone,
+      {
+        onDropExisting: onCreateRowExisting,
+        onCreateRowExternalItem
+      }
+    ) : null
+  ] });
+}
+function NewRowDropZone({
+  onDropExisting,
+  onCreateRowExternalItem
+}) {
+  const [{ isOver }, dropRef] = useDrop(
+    () => ({
+      accept: onCreateRowExternalItem ? [ItemTypes.WIDGET, EXTERNAL_ITEM_TYPE] : ItemTypes.WIDGET,
+      drop: (item, monitor) => {
+        if (monitor.getItemType() === EXTERNAL_ITEM_TYPE) {
+          onCreateRowExternalItem?.(item);
+        } else {
+          onDropExisting(item);
+        }
+      },
+      collect: (monitor) => ({ isOver: monitor.isOver() })
+    }),
+    [onDropExisting, onCreateRowExternalItem]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: (node) => {
+        dropRef(node);
+      },
+      className: cn(
+        "flex h-12 items-center justify-center rounded-lg border-2 border-dashed border-border text-xs text-muted-foreground transition-colors",
+        isOver && "border-primary bg-primary/5 text-primary"
+      ),
+      children: "Drop here to start a new row"
+    }
+  );
+}
+function SortableRow({
+  row,
+  index,
+  items,
+  widgets,
+  readOnly,
+  dragActive,
+  onDropExisting,
+  onRemoveWidget,
+  onResizeWidget,
+  onResizeRow,
+  onMoveRow,
+  onDropExternalItem,
+  renderRowEdgeAdd,
+  renderWidgetMenu,
+  renderWidgetConfigDialog
+}) {
+  const [{ isDragging }, dragRef, previewRef] = useDrag(
+    () => ({
+      type: ItemTypes.ROW,
+      item: { rowId: row.id, index },
+      canDrag: !readOnly,
+      collect: (monitor) => ({ isDragging: monitor.isDragging() })
+    }),
+    [row.id, index, readOnly]
+  );
+  const [, dropRef] = useDrop(
+    () => ({
+      accept: ItemTypes.ROW,
+      canDrop: () => !readOnly,
+      hover: (item) => {
+        if (readOnly || item.index === index) return;
+        onMoveRow(item.index, index);
+        item.index = index;
+      }
+    }),
+    [index, readOnly, onMoveRow]
+  );
+  const setRowRef = useCallback(
+    (node) => {
+      previewRef(node);
+      dropRef(node);
+    },
+    [previewRef, dropRef]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setRowRef,
+      style: { height: row.heightPx },
+      className: cn(
+        "group/row relative flex items-stretch gap-2 rounded-lg bg-muted/30 p-2 transition-opacity",
+        isDragging && "opacity-40"
+      ),
+      children: [
+        !readOnly ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: (node) => {
+              dragRef(node);
+            },
+            className: "flex w-6 shrink-0 cursor-grab items-center justify-center text-muted-foreground active:cursor-grabbing",
+            title: "Drag to reorder row",
+            children: /* @__PURE__ */ jsx(GripVerticalIcon, { className: "size-4" })
+          }
+        ) : null,
+        !readOnly && row.widgetIds.length < MAX_ITEMS_PER_ROW ? /* @__PURE__ */ jsx(RowEdgeAddWidget, { rowId: row.id, edge: "start", render: renderRowEdgeAdd }) : null,
+        /* @__PURE__ */ jsx(
+          RowContent,
+          {
+            row,
+            items,
+            widgets,
+            readOnly,
+            dragActive,
+            onDropExisting,
+            onRemoveWidget,
+            onResizeWidget,
+            onDropExternalItem,
+            renderWidgetMenu,
+            renderWidgetConfigDialog
+          }
+        ),
+        !readOnly && row.widgetIds.length < MAX_ITEMS_PER_ROW ? /* @__PURE__ */ jsx(RowEdgeAddWidget, { rowId: row.id, edge: "end", render: renderRowEdgeAdd }) : null,
+        !readOnly ? /* @__PURE__ */ jsx(RowResizeHandle, { rowId: row.id, heightPx: row.heightPx, onResize: onResizeRow }) : null
+      ]
+    }
+  );
+}
+function RowEdgeAddWidget({
+  rowId,
+  edge,
+  render
+}) {
+  if (!render) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: render({ rowId, edge }) });
+}
+function RowContent({
+  row,
+  items,
+  widgets,
+  readOnly,
+  dragActive,
+  onDropExisting,
+  onRemoveWidget,
+  onResizeWidget,
+  onDropExternalItem,
+  renderWidgetMenu,
+  renderWidgetConfigDialog
+}) {
+  const containerRef = useRef(null);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "flex h-full min-w-0 flex-1 items-stretch", children: [
+    !readOnly ? /* @__PURE__ */ jsx(
+      InsertionZone,
+      {
+        rowId: row.id,
+        index: 0,
+        widgetCount: row.widgetIds.length,
+        dragActive,
+        onDropExisting,
+        onDropExternalItem
+      }
+    ) : /* @__PURE__ */ jsx(ZoneSpacer, {}),
+    row.widgetIds.map((widgetId, i) => {
+      const item = items[widgetId];
+      const widget = widgets[widgetId];
+      if (!item || !widget) return null;
+      return (
+        // A Fragment, not a wrapping div — PlacedWidget must be a direct
+        // flex child of the row container above, since its percentage
+        // width resolves against its immediate parent. A wrapper div here
+        // (with no definite width of its own) would make that percentage
+        // resolve against an indefinite size and collapse to content
+        // width instead.
+        /* @__PURE__ */ jsxs(Fragment2, { children: [
+          /* @__PURE__ */ jsx(
+            PlacedWidget,
+            {
+              item,
+              widget,
+              rowId: row.id,
+              widgetCount: row.widgetIds.length,
+              readOnly,
+              onRemoveWidget,
+              renderWidgetMenu,
+              renderWidgetConfigDialog
+            }
+          ),
+          !readOnly ? /* @__PURE__ */ jsx(
+            InsertionZone,
+            {
+              rowId: row.id,
+              index: i + 1,
+              widgetCount: row.widgetIds.length,
+              dragActive,
+              leftWidgetId: widgetId,
+              rightWidgetId: row.widgetIds[i + 1],
+              leftColSpan: item.colSpan,
+              containerRef,
+              onDropExisting,
+              onDropExternalItem,
+              onResizeWidget
+            }
+          ) : /* @__PURE__ */ jsx(ZoneSpacer, {})
+        ] }, widgetId)
+      );
+    })
+  ] });
+}
+function ZoneSpacer() {
+  return /* @__PURE__ */ jsx("div", { style: { width: ZONE_WIDTH_PX }, className: "shrink-0" });
+}
+function InsertionZone({
+  rowId,
+  index,
+  widgetCount,
+  dragActive,
+  leftWidgetId,
+  rightWidgetId,
+  leftColSpan,
+  containerRef,
+  onDropExisting,
+  onDropExternalItem,
+  onResizeWidget
+}) {
+  const [{ isOver, canDrop }, dropRef] = useDrop(
+    () => ({
+      accept: onDropExternalItem ? [ItemTypes.WIDGET, EXTERNAL_ITEM_TYPE] : ItemTypes.WIDGET,
+      // A same-row reorder never grows the row, so it's always allowed —
+      // only a drop that would add a net-new member to an already-full row
+      // is rejected (mirrors the authoritative check in placeItemAt). A
+      // dropped external item is always a net-new member (there's nothing
+      // to reorder), so it only ever gets the row-not-full check.
+      canDrop: (item, monitor) => {
+        if (monitor.getItemType() === EXTERNAL_ITEM_TYPE) {
+          return widgetCount < MAX_ITEMS_PER_ROW;
+        }
+        if (widgetCount < MAX_ITEMS_PER_ROW) return true;
+        return item.fromRowId === rowId;
+      },
+      drop: (item, monitor) => {
+        if (monitor.getItemType() === EXTERNAL_ITEM_TYPE) {
+          onDropExternalItem?.(item, rowId, index);
+        } else {
+          onDropExisting(item, rowId, index);
+        }
+      },
+      collect: (monitor) => ({ isOver: monitor.isOver(), canDrop: monitor.canDrop() })
+    }),
+    [rowId, index, widgetCount, onDropExisting, onDropExternalItem]
+  );
+  const isResizable = leftWidgetId !== void 0 && rightWidgetId !== void 0;
+  const handleMouseDown = useCallback(
+    (event) => {
+      if (leftWidgetId === void 0 || rightWidgetId === void 0 || leftColSpan === void 0 || !containerRef?.current || !onResizeWidget) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      const containerWidth = containerRef.current.getBoundingClientRect().width;
+      if (!containerWidth) return;
+      const zonesWidthPx = (widgetCount + 1) * ZONE_WIDTH_PX;
+      const colWidthPx = (containerWidth - zonesWidthPx) / COLS;
+      const startX = event.clientX;
+      const startLeftColSpan = leftColSpan;
+      const resolvedOnResize = onResizeWidget;
+      const resolvedLeftId = leftWidgetId;
+      const resolvedRightId = rightWidgetId;
+      function handleMove(moveEvent) {
+        const deltaCols = Math.round((moveEvent.clientX - startX) / colWidthPx);
+        resolvedOnResize(resolvedLeftId, resolvedRightId, startLeftColSpan + deltaCols);
+      }
+      function handleUp() {
+        window.removeEventListener("mousemove", handleMove);
+        window.removeEventListener("mouseup", handleUp);
+      }
+      window.addEventListener("mousemove", handleMove);
+      window.addEventListener("mouseup", handleUp);
+    },
+    [leftWidgetId, rightWidgetId, leftColSpan, containerRef, widgetCount, onResizeWidget]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: (node) => {
+        dropRef(node);
+      },
+      onMouseDown: handleMouseDown,
+      style: { width: ZONE_WIDTH_PX },
+      className: cn(
+        // Fixed footprint at all times — the "grows on hover" affordance
+        // comes from a scale transform on the inner pill, not a width
+        // change, so it can't perturb every other widget's calc()'d width
+        // mid-drag.
+        "flex h-full shrink-0 items-center justify-center",
+        isResizable && "cursor-ew-resize"
+      ),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "h-full w-full rounded-full transition-all",
+            isOver && canDrop ? "scale-x-150 bg-primary/25 ring-2 ring-primary" : dragActive && canDrop ? "ring-dashed bg-muted-foreground/20 ring-1 ring-border" : isResizable ? "bg-transparent hover:bg-muted-foreground/20 hover:ring-1 hover:ring-border" : "bg-transparent"
+          )
+        }
+      )
+    }
+  );
+}
+function PlacedWidget({
+  item,
+  widget,
+  rowId,
+  widgetCount,
+  readOnly,
+  onRemoveWidget,
+  renderWidgetMenu,
+  renderWidgetConfigDialog
+}) {
+  const zonesWidthPx = (widgetCount + 1) * ZONE_WIDTH_PX;
+  const widthCss = `calc((100% - ${zonesWidthPx}px) * ${item.colSpan} / ${COLS})`;
+  const [{ isDragging }, dragRef, previewRef] = useDrag(
+    () => ({
+      type: ItemTypes.WIDGET,
+      item: { widgetId: item.id, fromRowId: rowId },
+      canDrag: !readOnly,
+      collect: (monitor) => ({ isDragging: monitor.isDragging() })
+    }),
+    [item.id, rowId, readOnly]
+  );
+  const [configureOpen, setConfigureOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: (node) => {
+        previewRef(node);
+      },
+      style: { width: widthCss },
+      className: cn(
+        "group relative h-full min-w-0 shrink-0 overflow-hidden transition-opacity",
+        isDragging && "opacity-40"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "h-full", children: widget.content }),
+        !readOnly ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              ref: (node) => {
+                dragRef(node);
+              },
+              className: "absolute top-2 left-2 z-10 cursor-grab rounded-md bg-background/80 p-1 text-muted-foreground opacity-0 backdrop-blur transition-opacity group-hover:opacity-100 focus-visible:opacity-100 active:cursor-grabbing",
+              title: "Drag to move",
+              children: /* @__PURE__ */ jsx(GripVerticalIcon, { className: "size-3.5" })
+            }
+          ),
+          renderWidgetMenu?.(widget, {
+            onConfigure: () => setConfigureOpen(true),
+            onDelete: () => onRemoveWidget(widget.id, rowId)
+          }),
+          renderWidgetConfigDialog?.({
+            widget,
+            open: configureOpen,
+            onOpenChange: setConfigureOpen
+          })
+        ] }) : null
+      ]
+    }
+  );
+}
+function RowResizeHandle({
+  rowId,
+  heightPx,
+  onResize
+}) {
+  const handleMouseDown = useCallback(
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const startY = event.clientY;
+      const startHeight = heightPx;
+      function handleMove(moveEvent) {
+        const nextHeight = Math.min(
+          MAX_ROW_HEIGHT,
+          Math.max(MIN_ROW_HEIGHT, startHeight + (moveEvent.clientY - startY))
+        );
+        onResize(rowId, nextHeight);
+      }
+      function handleUp() {
+        window.removeEventListener("mousemove", handleMove);
+        window.removeEventListener("mouseup", handleUp);
+      }
+      window.addEventListener("mousemove", handleMove);
+      window.addEventListener("mouseup", handleUp);
+    },
+    [rowId, heightPx, onResize]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onMouseDown: handleMouseDown,
+      className: "absolute inset-x-6 -bottom-2 flex h-3 cursor-ns-resize items-center justify-center",
+      title: "Drag to resize row height",
+      children: /* @__PURE__ */ jsx("div", { className: "h-1 w-10 rounded-full bg-border" })
+    }
+  );
+}
+export {
+  DashboardGrid,
+  EXTERNAL_ITEM_TYPE
+};
+//# sourceMappingURL=dashboard-grid.js.map