willa-workspace 0.0.3-alpha.2739b3e

package/packages/willa-content/src/components/Table/layout.ts

@@ -0,0 +1,80 @@
+import type { CSSProperties } from "react";
+
+import type { TableCell, TableColumnFixed } from "#content/components/Table";
+import {
+  defaultFixedColumnWidth,
+  getCellKey,
+  getCellStyle,
+  getCellWidth,
+  getFixedColumnStyle,
+} from "#content/components/Table/utils";
+
+export const getResolvedCellStyle = (options: {
+  cell: TableCell;
+  index: number;
+  isHeader: boolean;
+  stickyFixedColumns: boolean;
+  headers: Array<TableCell>;
+  hasSelection: boolean;
+  hasExpandableRows: boolean;
+  hasActions: boolean;
+  stickyActions: boolean;
+  actionsColumnWidth?: string;
+  columnWidths: Record<string, number>;
+}) => {
+  const {
+    cell,
+    index,
+    isHeader,
+    stickyFixedColumns,
+    headers,
+    hasSelection,
+    hasExpandableRows,
+    hasActions,
+    stickyActions,
+    actionsColumnWidth,
+    columnWidths,
+  } = options;
+  const width = columnWidths[getCellKey(cell, index)] ?? cell.width;
+  const fixedSide = cell.fixed as TableColumnFixed | undefined;
+  const resolvedWidth =
+    width ?? (fixedSide ? defaultFixedColumnWidth : undefined);
+  if (resolvedWidth === undefined && !fixedSide) return getCellStyle(cell);
+
+  const style: CSSProperties = {
+    ...(resolvedWidth !== undefined
+      ? {
+          width: getCellWidth(resolvedWidth),
+          minWidth: getCellWidth(resolvedWidth),
+        }
+      : {}),
+  };
+
+  if (!fixedSide || !stickyFixedColumns) {
+    return style;
+  }
+
+  const fixedStyle = getFixedColumnStyle({
+    fixed: fixedSide,
+    index,
+    isHeader,
+    headers,
+    hasSelection,
+    hasExpandableRows,
+    hasActions,
+    stickyActions,
+    actionsColumnWidth,
+    columnWidths,
+  });
+
+  return {
+    ...style,
+    ...fixedStyle,
+  };
+};
+
+export const getEstimatedTableRowHeight = (size: "sm" | "md" | "lg") => {
+  if (size === "lg") return 64;
+  if (size === "sm") return 40;
+  return 52;
+};

package/packages/willa-content/src/components/Table/tree.ts

@@ -0,0 +1,28 @@
+import type { TableItem } from "#content/components/Table";
+
+export const flattenTreeItems = (
+  items: Array<TableItem>,
+  expandedSet: Set<string | number>,
+) => {
+  const result: Array<{
+    item: TableItem;
+    depth: number;
+    parentKey?: string | number;
+  }> = [];
+
+  const walk = (
+    currentItems: Array<TableItem>,
+    depth: number,
+    parentKey?: string | number,
+  ) => {
+    currentItems.forEach((item) => {
+      result.push({ item, depth, parentKey });
+      if (item.children?.length && expandedSet.has(item.key)) {
+        walk(item.children, depth + 1, item.key);
+      }
+    });
+  };
+
+  walk(items, 0);
+  return result;
+};

package/packages/willa-content/src/components/Table/types.ts

@@ -0,0 +1,177 @@
+export type TableSize = "sm" | "md" | "lg";
+export type TableAlign = "start" | "center" | "end";
+export type TableSortDirection = "asc" | "desc";
+export type TableSelectionMode = "none" | "single" | "multiple";
+export type TableRowTone =
+  | "neutral"
+  | "info"
+  | "success"
+  | "warning"
+  | "danger";
+
+export type TableSortState = {
+  key: string;
+  direction: TableSortDirection;
+};
+
+export type TableColumnFixed = "left" | "right";
+
+export type TableRef = {
+  scrollTo: (options?: ScrollToOptions) => void;
+  scrollToTop: (behavior?: ScrollBehavior) => void;
+  scrollToBottom: (behavior?: ScrollBehavior) => void;
+  scrollToLeft: (behavior?: ScrollBehavior) => void;
+};
+
+export type TablePagination = {
+  pageSize: number;
+  page?: number;
+  defaultPage?: number;
+  total?: number;
+  onPageChange?: (page: number) => void;
+};
+
+export type TableCellBehavior = {
+  tooltip?: boolean;
+};
+
+export type TableCell = {
+  key?: string;
+  label: React.ReactNode;
+  value?: React.ReactNode;
+  render?: React.ReactNode;
+  sortValue?: string | number;
+  sortable?: boolean;
+  compare?: (
+    a: TableCell,
+    b: TableCell,
+    aItem: TableItem,
+    bItem: TableItem,
+  ) => number;
+  align?: TableAlign;
+  fixed?: TableColumnFixed;
+  width?: number | string;
+  hidden?: boolean;
+  ellipsis?: boolean;
+  title?: string;
+  className?: string;
+  headerClassName?: string;
+  rowSpan?: number;
+  colSpan?: number;
+};
+
+export type TableItem = {
+  key: string | number;
+  cells: Array<TableCell>;
+  children?: Array<TableItem>;
+  actions?: React.ReactNode;
+  expanded?: React.ReactNode;
+  selected?: boolean;
+  disabled?: boolean;
+  tone?: TableRowTone;
+  onClick?: () => void;
+  className?: string;
+};
+
+export type TableColumnState = {
+  order: Array<string>;
+  hidden: Array<string>;
+  widths: Record<string, number>;
+};
+
+export type TableGroupContext = {
+  key: string;
+  value: string | number | undefined;
+  label: React.ReactNode;
+  summary?: React.ReactNode;
+  count: number;
+  items: Array<TableItem>;
+  index: number;
+};
+
+export type TableDisplayRow =
+  | {
+      type: "item";
+      item: TableItem;
+      depth: number;
+      parentKey?: string | number;
+    }
+  | {
+      type: "group";
+      context: TableGroupContext;
+    };
+
+export type TableSelectionBarContext = {
+  selectedKeys: Array<string | number>;
+  selectedCount: number;
+  totalCount: number;
+  visibleCount: number;
+  visibleSelectedCount: number;
+  allVisibleSelected: boolean;
+  onClear: () => void;
+  onSelectVisible: () => void;
+};
+
+export type TableProps = {
+  items: Array<TableItem>;
+  caption?: React.ReactNode;
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+  size?: TableSize;
+  cellBehavior?: TableCellBehavior;
+  cellTooltip?: boolean;
+  stickyHeader?: boolean;
+  stickyActions?: boolean;
+  actionsWidth?: number | string;
+  loading?: boolean;
+  loadingText?: React.ReactNode;
+  empty?: React.ReactNode;
+  actionsLabel?: React.ReactNode;
+  sort?: TableSortState;
+  defaultSort?: TableSortState;
+  onSortChange?: (sort: TableSortState) => void;
+  selectionMode?: TableSelectionMode;
+  selectedKeys?: Array<string | number>;
+  defaultSelectedKeys?: Array<string | number>;
+  onSelectionChange?: (keys: Array<string | number>) => void;
+  selectionBar?:
+    | boolean
+    | React.ReactNode
+    | ((context: TableSelectionBarContext) => React.ReactNode);
+  selectionBarActions?:
+    | React.ReactNode
+    | ((context: TableSelectionBarContext) => React.ReactNode);
+  selectionBarDescription?:
+    | React.ReactNode
+    | ((context: TableSelectionBarContext) => React.ReactNode);
+  selectionBarSticky?: boolean;
+  expandedKeys?: Array<string | number>;
+  defaultExpandedKeys?: Array<string | number>;
+  onExpandedChange?: (keys: Array<string | number>) => void;
+  pagination?: TablePagination;
+  resizableColumns?: boolean;
+  columnDraggable?: boolean;
+  columnOrder?: Array<string>;
+  defaultColumnOrder?: Array<string>;
+  hiddenColumns?: Array<string>;
+  defaultHiddenColumns?: Array<string>;
+  columnWidths?: Record<string, number>;
+  defaultColumnWidths?: Record<string, number>;
+  onColumnOrderChange?: (order: Array<string>) => void;
+  onColumnWidthsChange?: (widths: Record<string, number>) => void;
+  onHiddenColumnsChange?: (hiddenColumns: Array<string>) => void;
+  columnStateKey?: string;
+  treeMode?: boolean;
+  groupBy?: string | ((item: TableItem) => string | number | undefined);
+  groupLabel?:
+    | React.ReactNode
+    | ((context: TableGroupContext) => React.ReactNode);
+  groupSummary?: (context: TableGroupContext) => React.ReactNode;
+  virtualScroll?: boolean;
+  virtualScrollOverscan?: number;
+  infiniteScroll?: boolean;
+  hasMore?: boolean;
+  scrollThreshold?: number;
+  onLoadMore?: () => void | Promise<void>;
+  tableClassName?: string;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;

package/packages/willa-content/src/components/Table/useTableColumnResize.ts

@@ -0,0 +1,227 @@
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type PointerEvent,
+  type RefObject,
+} from "react";
+
+import type { TableCell } from "#content/components/Table/types";
+import {
+  escapeCssAttribute,
+  getCellKey,
+} from "#content/components/Table/utils";
+
+const resizeMinWidth = 80;
+const keyboardResizeStep = 16;
+const keyboardResizeLargeStep = 48;
+
+type SetColumnWidths = (
+  nextWidths:
+    | Record<string, number>
+    | ((currentWidths: Record<string, number>) => Record<string, number>),
+) => void;
+
+type UseTableColumnResizeOptions = {
+  resizableColumns: boolean;
+  orderedHeaders: Array<TableCell>;
+  tableRef: RefObject<HTMLTableElement | null>;
+  headerCellRefs: RefObject<Record<string, HTMLTableCellElement | null>>;
+  setColumnWidths: SetColumnWidths;
+};
+
+export function useTableColumnResize(options: UseTableColumnResizeOptions) {
+  const {
+    resizableColumns,
+    orderedHeaders,
+    tableRef,
+    headerCellRefs,
+    setColumnWidths,
+  } = options;
+  const [isResizing, setIsResizing] = useState(false);
+  const setColumnWidthsRef = useRef(setColumnWidths);
+
+  const resizeStateRef = useRef<{
+    key: string;
+    pointerId: number;
+    startX: number;
+    startWidth: number;
+    widths: Record<string, number>;
+  } | null>(null);
+
+  useEffect(() => {
+    setColumnWidthsRef.current = setColumnWidths;
+  }, [setColumnWidths]);
+
+  const handleColumnResizeMove = useCallback(
+    (event: globalThis.PointerEvent) => {
+      const resizeState = resizeStateRef.current;
+      if (!resizeState) return;
+      if (event.pointerId !== resizeState.pointerId) return;
+
+      const nextWidth = Math.max(
+        resizeState.startWidth + (event.clientX - resizeState.startX),
+        resizeMinWidth,
+      );
+
+      setColumnWidthsRef.current((currentWidths) =>
+        currentWidths[resizeState.key] === nextWidth
+          ? currentWidths
+          : {
+              ...currentWidths,
+              ...resizeState.widths,
+              [resizeState.key]: nextWidth,
+            },
+      );
+    },
+    [],
+  );
+
+  const handleColumnResizeEnd = useCallback(
+    (event?: globalThis.PointerEvent) => {
+      const resizeState = resizeStateRef.current;
+      if (event && resizeState && event.pointerId !== resizeState.pointerId) {
+        return;
+      }
+
+      resizeStateRef.current = null;
+      setIsResizing(false);
+      window.removeEventListener("pointermove", handleColumnResizeMove);
+      window.removeEventListener("pointerup", handleColumnResizeEnd);
+      window.removeEventListener("pointercancel", handleColumnResizeEnd);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    },
+    [handleColumnResizeMove],
+  );
+
+  const measureHeaderWidths = useCallback(() => {
+    return orderedHeaders.reduce<Record<string, number>>(
+      (widths, headerCellItem, headerIndex) => {
+        const key = getCellKey(headerCellItem, headerIndex);
+        const element = headerCellRefs.current[key];
+        if (!element) return widths;
+
+        return {
+          ...widths,
+          [key]: Math.ceil(element.getBoundingClientRect().width),
+        };
+      },
+      {},
+    );
+  }, [headerCellRefs, orderedHeaders]);
+
+  const startColumnResize = useCallback(
+    (
+      event: PointerEvent<HTMLButtonElement>,
+      cell: TableCell,
+      index: number,
+    ) => {
+      if (!resizableColumns || typeof window === "undefined") return;
+      if (event.button !== 0) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      const columnKey = getCellKey(cell, index);
+      const headerCell = headerCellRefs.current[columnKey];
+      if (!headerCell) return;
+
+      const measuredWidths = measureHeaderWidths();
+
+      resizeStateRef.current = {
+        key: columnKey,
+        pointerId: event.pointerId,
+        startX: event.clientX,
+        startWidth:
+          measuredWidths[columnKey] ?? headerCell.getBoundingClientRect().width,
+        widths: measuredWidths,
+      };
+      setColumnWidths((currentWidths) => ({
+        ...currentWidths,
+        ...measuredWidths,
+      }));
+      setIsResizing(true);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+      window.addEventListener("pointermove", handleColumnResizeMove);
+      window.addEventListener("pointerup", handleColumnResizeEnd);
+      window.addEventListener("pointercancel", handleColumnResizeEnd);
+    },
+    [
+      handleColumnResizeEnd,
+      handleColumnResizeMove,
+      headerCellRefs,
+      measureHeaderWidths,
+      resizableColumns,
+      setColumnWidths,
+    ],
+  );
+
+  const resizeColumnBy = useCallback(
+    (cell: TableCell, index: number, delta: number) => {
+      if (!resizableColumns || typeof window === "undefined") return;
+
+      const columnKey = getCellKey(cell, index);
+      const headerCell = headerCellRefs.current[columnKey];
+      if (!headerCell) return;
+
+      const measuredWidths = measureHeaderWidths();
+      const currentWidth =
+        measuredWidths[columnKey] ?? headerCell.getBoundingClientRect().width;
+      const nextWidth = Math.max(
+        Math.ceil(currentWidth + delta),
+        resizeMinWidth,
+      );
+
+      setColumnWidths((currentWidths) => ({
+        ...currentWidths,
+        ...measuredWidths,
+        [columnKey]: nextWidth,
+      }));
+    },
+    [headerCellRefs, measureHeaderWidths, resizableColumns, setColumnWidths],
+  );
+
+  const autoSizeColumn = useCallback(
+    (cell: TableCell, index: number) => {
+      if (!resizableColumns || typeof window === "undefined") return;
+
+      const columnKey = getCellKey(cell, index);
+      const tableElement = tableRef.current;
+      if (!tableElement) return;
+
+      const selector = `[data-column-key="${escapeCssAttribute(columnKey)}"]`;
+      const candidates = tableElement.querySelectorAll<HTMLElement>(selector);
+      let nextWidth = 0;
+
+      candidates.forEach((element) => {
+        nextWidth = Math.max(nextWidth, element.scrollWidth);
+      });
+
+      if (nextWidth <= 0) return;
+
+      setColumnWidths((currentWidths) => ({
+        ...currentWidths,
+        [columnKey]: Math.ceil(nextWidth + 18),
+      }));
+    },
+    [resizableColumns, setColumnWidths, tableRef],
+  );
+
+  useEffect(() => {
+    return () => {
+      handleColumnResizeEnd();
+    };
+  }, [handleColumnResizeEnd]);
+
+  return {
+    isResizing,
+    startColumnResize,
+    resizeColumnBy,
+    autoSizeColumn,
+    keyboardResizeLargeStep,
+    keyboardResizeStep,
+  };
+}

package/packages/willa-content/src/components/Table/useTableColumnState.ts

@@ -0,0 +1,153 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import type { TableColumnState } from "#content/components/Table/types";
+import {
+  readColumnState,
+  writeColumnState,
+} from "#content/components/Table/columnState";
+
+type UseTableColumnStateOptions = {
+  columnStateKey?: string;
+  columnOrder?: Array<string>;
+  defaultColumnOrder?: Array<string>;
+  hiddenColumns?: Array<string>;
+  defaultHiddenColumns?: Array<string>;
+  columnWidths?: Record<string, number>;
+  defaultColumnWidths?: Record<string, number>;
+  onColumnOrderChange?: (order: Array<string>) => void;
+  onColumnWidthsChange?: (widths: Record<string, number>) => void;
+  onHiddenColumnsChange?: (hiddenColumns: Array<string>) => void;
+};
+
+const emptyColumnState: TableColumnState = {
+  order: [],
+  hidden: [],
+  widths: {},
+};
+
+export function useTableColumnState(options: UseTableColumnStateOptions) {
+  const {
+    columnOrder,
+    defaultColumnOrder = emptyColumnState.order,
+    hiddenColumns,
+    defaultHiddenColumns = emptyColumnState.hidden,
+    columnWidths: controlledColumnWidths,
+    defaultColumnWidths = emptyColumnState.widths,
+    onColumnOrderChange,
+    onColumnWidthsChange,
+    onHiddenColumnsChange,
+    columnStateKey,
+  } = options;
+
+  const persistedColumnState = useMemo<TableColumnState | null>(() => {
+    if (!columnStateKey) return null;
+
+    const state = readColumnState(columnStateKey);
+    if (!state) return null;
+
+    return {
+      order: state.order ?? defaultColumnOrder,
+      hidden: state.hidden ?? defaultHiddenColumns,
+      widths: state.widths ?? defaultColumnWidths,
+    };
+  }, [
+    columnStateKey,
+    defaultColumnOrder,
+    defaultHiddenColumns,
+    defaultColumnWidths,
+  ]);
+
+  const [internalColumnWidths, setInternalColumnWidths] = useState<
+    Record<string, number>
+  >(persistedColumnState?.widths ?? defaultColumnWidths);
+
+  const [internalColumnOrder, setInternalColumnOrder] = useState<Array<string>>(
+    persistedColumnState?.order ?? defaultColumnOrder,
+  );
+
+  const [internalHiddenColumns, setInternalHiddenColumns] = useState<
+    Array<string>
+  >(persistedColumnState?.hidden ?? defaultHiddenColumns);
+
+  const resolvedHiddenColumns = hiddenColumns ?? internalHiddenColumns;
+  const currentColumnOrder = columnOrder ?? internalColumnOrder;
+  const columnWidths = controlledColumnWidths ?? internalColumnWidths;
+
+  useEffect(() => {
+    if (!columnStateKey) return;
+
+    writeColumnState(columnStateKey, {
+      order: currentColumnOrder,
+      hidden: resolvedHiddenColumns,
+      widths: columnWidths,
+    });
+  }, [columnStateKey, columnWidths, currentColumnOrder, resolvedHiddenColumns]);
+
+  const setColumnWidths = useCallback(
+    (
+      nextWidths:
+        | Record<string, number>
+        | ((currentWidths: Record<string, number>) => Record<string, number>),
+    ) => {
+      const resolvedWidths =
+        typeof nextWidths === "function"
+          ? nextWidths(controlledColumnWidths ?? internalColumnWidths)
+          : nextWidths;
+
+      if (controlledColumnWidths === undefined) {
+        setInternalColumnWidths(resolvedWidths);
+      }
+      onColumnWidthsChange?.(resolvedWidths);
+    },
+    [controlledColumnWidths, internalColumnWidths, onColumnWidthsChange],
+  );
+
+  const setColumnOrderState = useCallback(
+    (nextOrder: Array<string>) => {
+      if (columnOrder === undefined) {
+        setInternalColumnOrder(nextOrder);
+      }
+      onColumnOrderChange?.(nextOrder);
+    },
+    [columnOrder, onColumnOrderChange],
+  );
+
+  const setHiddenColumnsState = useCallback(
+    (nextHiddenColumns: Array<string>) => {
+      if (hiddenColumns === undefined) {
+        setInternalHiddenColumns(nextHiddenColumns);
+      }
+      onHiddenColumnsChange?.(nextHiddenColumns);
+    },
+    [hiddenColumns, onHiddenColumnsChange],
+  );
+
+  const resetColumnState = useCallback(() => {
+    setColumnOrderState(defaultColumnOrder);
+    setHiddenColumnsState(defaultHiddenColumns);
+    setColumnWidths(defaultColumnWidths);
+  }, [
+    defaultColumnOrder,
+    defaultColumnWidths,
+    defaultHiddenColumns,
+    setColumnOrderState,
+    setColumnWidths,
+    setHiddenColumnsState,
+  ]);
+
+  return {
+    columnOrder: currentColumnOrder,
+    columnWidths,
+    hiddenColumns: resolvedHiddenColumns,
+    currentColumnOrder,
+    resolvedHiddenColumns,
+    resetColumnState,
+    setColumnOrder: setColumnOrderState,
+    setColumnOrderState,
+    setHiddenColumns: setHiddenColumnsState,
+    setColumnWidths,
+    setHiddenColumnsState,
+  };
+}
+
+export type { UseTableColumnStateOptions };