@purpurds/table 0.0.1

package/src/table-row-cell-skeleton.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { Skeleton } from "@purpurds/skeleton";
+import c from "classnames/bind";
+
+import styles from "./table.module.scss";
+import { pxToRemString } from "./utils/unit-conversions";
+
+const cx = c.bind(styles);
+
+type TableRowCellSkeletonProps = {
+  isLastRow: boolean;
+  isFirstCell: boolean;
+  isLastCell: boolean;
+  stickyColumn?: boolean;
+  isScrolled: boolean;
+  showBorder: boolean;
+  cellWidth: number | string;
+};
+
+const rootClassName = "purpur-table-row-cell";
+
+const TableRowCellSkeleton = ({
+  isLastRow,
+  isFirstCell,
+  isLastCell,
+  stickyColumn,
+  isScrolled,
+  showBorder,
+  cellWidth,
+}: TableRowCellSkeletonProps) => {
+  const classes = cx([
+    rootClassName,
+    {
+      [`${rootClassName}__sticky-column`]: stickyColumn,
+      [`${rootClassName}__sticky-column__with-sticky-border`]: isScrolled && showBorder,
+      [`${rootClassName}__border-radius-first-cell`]: isFirstCell && isLastRow,
+      [`${rootClassName}__border-radius-last-cell`]: isLastCell && isLastRow,
+      [`${rootClassName}__last-row-first-cell-visible`]: isFirstCell && isLastRow,
+      [`${rootClassName}__last-row-last-cell-visible`]: isLastCell && isLastRow,
+    },
+  ]);
+
+  const cellWidthString = typeof cellWidth === "string" ? cellWidth : pxToRemString(cellWidth);
+
+  return (
+    <td
+      className={classes}
+      style={{
+        minWidth: cellWidthString,
+        maxWidth: cellWidthString,
+      }}
+    >
+      <Skeleton
+        data-testid="purpur-table-cell-skeleton"
+        className={cx(`${rootClassName}__skeleton`)}
+      />
+    </td>
+  );
+};
+
+export default TableRowCellSkeleton;

package/src/table-row-cell.test.tsx

@@ -0,0 +1,360 @@
+import React from "react";
+import { IconCheckmark } from "@purpurds/icon/checkmark";
+import { IconRemove } from "@purpurds/icon/remove";
+import { Cell } from "@tanstack/react-table";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import TableRowCell from "./table-row-cell";
+import { CellType } from "./types";
+
+describe("Table row cell - Cell types", () => {
+  describe("Badge", () => {
+    it("should render badge", () => {
+      renderTableRowCell("badge", { children: "Badge label", variant: "primary" });
+
+      expect(screen.getByText("Badge label")).toBeInTheDocument();
+    });
+
+    it("should render empty cell when value is undefined", () => {
+      renderTableRowCell("badge", undefined);
+
+      expect(screen.getByText("-")).toBeInTheDocument();
+    });
+  });
+
+  describe("Body text", () => {
+    it("should render body text", () => {
+      renderTableRowCell("bodyText", "Body text");
+
+      expect(screen.getByText("Body text")).toBeInTheDocument();
+    });
+
+    it("should render empty cell when value is undefined", () => {
+      renderTableRowCell("bodyText", undefined);
+
+      expect(screen.getByText("-")).toBeInTheDocument();
+    });
+  });
+
+  describe("Button", () => {
+    it("should render button", () => {
+      renderTableRowCell(
+        "button",
+        { label: "Click Me", onClick: vi.fn() },
+        {
+          original: {
+            button: {
+              variant: "primary",
+              children: "Click Me",
+            },
+          },
+        },
+        "button"
+      );
+
+      expect(screen.getByText("Click Me")).toBeInTheDocument();
+    });
+
+    it("should render empty cell when value is undefined", () => {
+      renderTableRowCell(
+        "button",
+        undefined,
+        {
+          original: {
+            button: undefined,
+          },
+        },
+        "button"
+      );
+
+      expect(screen.getByText("-")).toBeInTheDocument();
+    });
+  });
+
+  describe("Button group", () => {
+    it("should render button group", () => {
+      renderTableRowCell(
+        "buttonGroup",
+        [],
+        {
+          original: {
+            buttonGroup: [
+              {
+                label: "Button 1",
+                icon: <IconCheckmark data-testid="checkmark-icon" />,
+                variant: "primary",
+              },
+              { label: "Button 2", icon: <IconRemove data-testid="remove-icon" /> },
+            ],
+          },
+        },
+        "buttonGroup"
+      );
+
+      expect(screen.getByTestId("checkmark-icon")).toBeInTheDocument();
+      expect(screen.getByTestId("remove-icon")).toBeInTheDocument();
+    });
+
+    it("should render empty cell when value is undefined", () => {
+      renderTableRowCell(
+        "buttonGroup",
+        [],
+        {
+          original: {
+            buttonGroup: undefined,
+          },
+        },
+        "buttonGroup"
+      );
+
+      expect(screen.getByText("-")).toBeInTheDocument();
+    });
+  });
+
+  describe("CTA link", () => {
+    it("should render CTA link", () => {
+      renderTableRowCell("ctaLink", { href: "#", children: "CTA link text" });
+
+      const link = screen.getByRole("link");
+
+      expect(link).toHaveTextContent("CTA link text");
+      expect(link).toHaveAttribute("href", "#");
+    });
+
+    it("should render empty cell when value is undefined", () => {
+      renderTableRowCell("ctaLink", undefined);
+
+      expect(screen.getByText("-")).toBeInTheDocument();
+    });
+  });
+
+  describe("Date", () => {
+    it("should render date", () => {
+      renderTableRowCell("date", "2023-03-15");
+
+      expect(screen.getByText("2023-03-15")).toBeInTheDocument();
+    });
+
+    it("should render empty cell when value is undefined", () => {
+      renderTableRowCell("date", undefined);
+
+      expect(screen.getByText("-")).toBeInTheDocument();
+    });
+  });
+
+  describe("Error alert message", () => {
+    it("should render error alert message", () => {
+      renderTableRowCell("errorAlertMessage", "Error message");
+
+      expect(screen.getByText("Error message")).toBeInTheDocument();
+      expect(screen.getByTestId("error-icon")).toBeInTheDocument();
+    });
+
+    it("should render empty cell when value is undefined", () => {
+      renderTableRowCell("errorAlertMessage", undefined);
+
+      expect(screen.getByText("-")).toBeInTheDocument();
+    });
+  });
+
+  describe("Icon text", () => {
+    it("should render icon text", () => {
+      renderTableRowCell("iconText", {
+        icon: <IconCheckmark data-testid="checkmark-icon" />,
+        text: "Icon text",
+      });
+
+      expect(screen.getByText("Icon text")).toBeInTheDocument();
+      expect(screen.getByTestId("checkmark-icon")).toBeInTheDocument();
+    });
+
+    it("should render empty cell when value is undefined", () => {
+      renderTableRowCell("iconText", undefined);
+
+      expect(screen.getByText("-")).toBeInTheDocument();
+    });
+  });
+
+  describe("Lead text", () => {
+    it("should render lead text", () => {
+      renderTableRowCell("leadText", "Lead text content");
+
+      expect(screen.getByText("Lead text content")).toBeInTheDocument();
+    });
+
+    it("should render empty cell when value is undefined", () => {
+      renderTableRowCell("leadText", undefined);
+
+      expect(screen.getByText("-")).toBeInTheDocument();
+    });
+  });
+
+  describe("Link", () => {
+    it("should render link", () => {
+      renderTableRowCell("link", { href: "https://example.com", children: "Example Link" });
+
+      const link = screen.getByRole("link");
+
+      expect(link).toHaveTextContent("Example Link");
+      expect(link).toHaveAttribute("href", "https://example.com");
+    });
+
+    it("should render empty cell when value is undefined", () => {
+      renderTableRowCell("link", undefined);
+
+      expect(screen.getByText("-")).toBeInTheDocument();
+    });
+  });
+
+  describe("Number left aligned", () => {
+    it("should render number left aligned", () => {
+      renderTableRowCell("number", 12345);
+
+      const element = screen.getByText("12345");
+      expect(element).toBeInTheDocument();
+
+      const hasRightAlignClass = element.className
+        .split(" ")
+        .some((c) => c.includes("_right-align"));
+      expect(hasRightAlignClass).toBe(false);
+    });
+
+    it("should render empty cell when value is undefined", () => {
+      renderTableRowCell("number", undefined);
+
+      expect(screen.getByText("-")).toBeInTheDocument();
+    });
+  });
+
+  describe("Number right aligned", () => {
+    it("should render number right aligned", () => {
+      renderTableRowCell("number", 12345, undefined, "id", "right");
+
+      const element = screen.getByText("12345");
+      expect(element).toBeInTheDocument();
+
+      const hasRightAlignClass = element.className
+        .split(" ")
+        .some((c) => c.includes("_right-align"));
+      expect(hasRightAlignClass).toBe(true);
+    });
+
+    it("should render empty cell when value is undefined", () => {
+      renderTableRowCell("number", undefined, undefined, "id", "right");
+
+      expect(screen.getByText("-")).toBeInTheDocument();
+    });
+  });
+
+  describe("Row selection", () => {
+    it("should render a checkbox", () => {
+      renderTableRowCell(
+        "rowSelection",
+        { checked: true, id: "row-1" },
+        {
+          getToggleSelectedHandler: vi.fn().mockImplementation(() => vi.fn()),
+          getIsSelected: vi.fn().mockReturnValue(true),
+          getCanSelect: vi.fn().mockReturnValue(true),
+        }
+      );
+
+      const checkbox = screen.getByRole("checkbox");
+      expect(checkbox).toBeInTheDocument();
+      expect(checkbox).toBeChecked();
+    });
+  });
+
+  describe("Row toggle", () => {
+    it("should render a radio toggle", () => {
+      renderTableRowCell(
+        "rowToggle",
+        { checked: true, id: "row-1" },
+        {
+          getToggleSelectedHandler: vi.fn().mockImplementation(() => vi.fn()),
+          getIsSelected: vi.fn().mockReturnValue(true),
+          getCanSelect: vi.fn().mockReturnValue(true),
+        }
+      );
+
+      const radioInput = screen.getByRole("radio");
+      expect(radioInput).toBeInTheDocument();
+      expect(radioInput).toBeChecked();
+    });
+  });
+
+  describe("Toggle", () => {
+    it("should render toggle", () => {
+      renderTableRowCell(
+        "toggle",
+        {
+          id: "toggle-id",
+          label: "Toggle label",
+          checked: true,
+        },
+        {
+          getToggleSelectedHandler: vi.fn().mockImplementation(() => vi.fn()),
+        }
+      );
+
+      expect(screen.getByText("Toggle label")).toBeInTheDocument();
+    });
+
+    it("should render empty cell when value is undefined", () => {
+      renderTableRowCell("toggle", undefined);
+
+      expect(screen.getByText("-")).toBeInTheDocument();
+    });
+  });
+
+  describe("Warning alert message", () => {
+    it("should render warning alert message", () => {
+      renderTableRowCell("warningAlertMessage", "Warning message");
+
+      expect(screen.getByText("Warning message")).toBeInTheDocument();
+      expect(screen.getByTestId("alert-icon")).toBeInTheDocument();
+    });
+
+    it("should render empty cell when value is undefined", () => {
+      renderTableRowCell("warningAlertMessage", undefined);
+
+      expect(screen.getByText("-")).toBeInTheDocument();
+    });
+  });
+});
+
+const renderTableRowCell = (
+  cellType: CellType,
+  value: unknown,
+  row?: unknown,
+  id = "id",
+  numberCellAlignment?: "left" | "right" | undefined
+) => {
+  render(
+    <table>
+      <tbody>
+        <tr>
+          <TableRowCell
+            cell={
+              {
+                column: {
+                  columnDef: { id, meta: { cellType, numberCellAlignment } },
+                  getSize: vi.fn().mockReturnValue(100),
+                  columns: [],
+                  id,
+                  getIsFirstColumn: vi.fn().mockReturnValue(false),
+                  getIsLastColumn: vi.fn().mockReturnValue(false),
+                },
+                getValue: vi.fn().mockReturnValue(value),
+                row,
+              } as unknown as Cell<unknown, unknown> // Typecasting to avoid setting up the entire Cell type
+            }
+            isLastRow={true}
+            isFirstCell={false}
+            isLastCell={false}
+          />
+        </tr>
+      </tbody>
+    </table>
+  );
+};

package/src/table-row-cell.tsx

@@ -0,0 +1,188 @@
+import React, { useEffect, useRef, useState } from "react";
+import { type Cell, flexRender, type RowData } from "@tanstack/react-table";
+import c from "classnames/bind";
+
+import { BadgeCell } from "./cell-types/badge-cell";
+import { BodyTextCell } from "./cell-types/body-text-cell";
+import { ButtonCell } from "./cell-types/button-cell";
+import { ButtonGroupCell } from "./cell-types/button-group-cell";
+import { CtaLinkCell } from "./cell-types/cta-link-cell";
+import { DateCell } from "./cell-types/date-cell";
+import { ErrorAlertMessageCell } from "./cell-types/error-message-cell";
+import { IconTextCell } from "./cell-types/icon-text-cell";
+import { LeadTextCell } from "./cell-types/lead-text-cell";
+import { LinkCell } from "./cell-types/link-cell";
+import { NumberCell } from "./cell-types/number-cell";
+import { RowSelectionCell } from "./cell-types/row-selection-cell";
+import { RowToggleCell } from "./cell-types/row-toggle-cell";
+import { ToggleCell } from "./cell-types/toggle-cell";
+import { WarningAlertMessageCell } from "./cell-types/warning-message-cell";
+import styles from "./table.module.scss";
+import { pxToRemString } from "./utils/unit-conversions";
+
+const cx = c.bind(styles);
+
+type EmptyTableCell = {
+  cell?: never;
+  children: React.ReactNode;
+};
+
+type TableRowCell<TData extends RowData> = {
+  cell: Cell<TData, unknown>;
+  children?: never;
+};
+
+type TableRowCellProps<TData extends RowData> = {
+  ["data-testid"]?: string;
+  className?: string;
+  stickyColumn?: boolean;
+  colSpan?: number;
+  isScrolled?: boolean;
+  showBorder?: boolean;
+  isLastRow: boolean;
+  isFirstCell: boolean;
+  isLastCell: boolean;
+} & (EmptyTableCell | TableRowCell<TData>);
+
+const rootClassName = "purpur-table-row-cell";
+
+const TableRowCell = <TData extends RowData>({
+  className,
+  ["data-testid"]: dataTestId,
+  cell,
+  stickyColumn,
+  children,
+  colSpan = 1,
+  isScrolled,
+  showBorder,
+  isLastRow,
+  isFirstCell,
+  isLastCell,
+}: TableRowCellProps<TData>) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const elementRef = useRef<HTMLTableCellElement>(null);
+
+  useEffect(() => {
+    const currentElement = elementRef.current;
+    if (!currentElement) {
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsVisible(entry.isIntersecting);
+      },
+      { threshold: 1 }
+    );
+
+    observer.observe(currentElement);
+
+    return () => {
+      if (currentElement) {
+        observer.unobserve(currentElement);
+      }
+    };
+  }, []);
+
+  const classes = cx([
+    className,
+    rootClassName,
+    {
+      [`${rootClassName}__sticky-column`]: stickyColumn,
+      [`${rootClassName}__sticky-column__with-sticky-border`]: isScrolled && showBorder,
+      [`${rootClassName}__border-radius-first-cell`]: isFirstCell && isLastRow,
+      [`${rootClassName}__border-radius-last-cell`]: isLastCell && isLastRow,
+      [`${rootClassName}__last-row-first-cell-visible`]:
+        (cell?.column.getIsFirstColumn() || isFirstCell) && isVisible && isLastRow,
+      [`${rootClassName}__last-row-last-cell-visible`]:
+        (cell?.column.getIsLastColumn() || isLastCell) && isVisible && isLastRow,
+    },
+  ]);
+
+  const styles = cell
+    ? {
+        width: pxToRemString(cell.column.getSize()),
+      }
+    : {};
+
+  const cellContent = cell ? getCellContent(cell) : children;
+
+  return (
+    <td
+      ref={elementRef}
+      data-testid={dataTestId}
+      className={classes}
+      key={cell?.column.columnDef?.id}
+      style={styles}
+      colSpan={colSpan}
+    >
+      {cellContent}
+    </td>
+  );
+};
+
+export default TableRowCell;
+
+const getCellContent = <TData extends RowData>(cell: Cell<TData, unknown>) => {
+  const { cellType } = cell.column.columnDef.meta ?? {};
+
+  // Define which cell types should have guaranteed truncation
+  const needsTruncation = ["bodyText", "iconText", "leadText", "link"].includes(cellType || "");
+
+  const content = (() => {
+    switch (cellType) {
+      case "badge":
+        return <BadgeCell cell={cell} />;
+      case "bodyText":
+        return <BodyTextCell cell={cell} />;
+      case "button":
+        return <ButtonCell cell={cell} />;
+      case "buttonGroup":
+        return <ButtonGroupCell cell={cell} />;
+      case "ctaLink":
+        return <CtaLinkCell cell={cell} />;
+      case "date":
+        return <DateCell cell={cell} />;
+      case "errorAlertMessage":
+        return <ErrorAlertMessageCell cell={cell} />;
+      case "iconText":
+        return <IconTextCell cell={cell} />;
+      case "leadText":
+        return <LeadTextCell cell={cell} />;
+      case "link":
+        return <LinkCell cell={cell} />;
+      case "number":
+        return <NumberCell cell={cell} />;
+      case "rowSelection":
+        return <RowSelectionCell cell={cell} />;
+      case "rowToggle":
+        return <RowToggleCell cell={cell} />;
+      case "toggle":
+        return <ToggleCell cell={cell} />;
+      case "warningAlertMessage":
+        return <WarningAlertMessageCell cell={cell} />;
+      default:
+        return flexRender(cell.column.columnDef.cell, cell.getContext());
+    }
+  })();
+
+  // If the cell type needs guaranteed truncation, wrap it with a truncation container
+  if (needsTruncation && cell) {
+    const widthInRemString = pxToRemString(cell.column.getSize());
+
+    return (
+      <div
+        className={cx(`${rootClassName}__truncate`)}
+        style={{
+          width: "100%",
+          maxWidth: widthInRemString,
+          minWidth: widthInRemString,
+        }}
+      >
+        {content}
+      </div>
+    );
+  }
+
+  return content;
+};

package/src/table-row.tsx

@@ -0,0 +1,30 @@
+import React, { ReactNode } from "react";
+import c from "classnames/bind";
+
+import styles from "./table.module.scss";
+const cx = c.bind(styles);
+
+type TableRowProps = {
+  ["data-testid"]?: string;
+  children: ReactNode;
+  className?: string;
+  isSelected?: boolean;
+};
+
+const rootClassName = "purpur-table-row";
+
+const TableRow = ({
+  children,
+  className,
+  ["data-testid"]: dataTestId,
+  isSelected,
+}: TableRowProps) => (
+  <tr
+    data-testid={dataTestId}
+    className={cx([className, rootClassName, { [`${rootClassName}--selected`]: isSelected }])}
+  >
+    {children}
+  </tr>
+);
+
+export default TableRow;

package/src/table-settings-drawer.module.scss

@@ -0,0 +1,25 @@
+.purpur-table-settings-drawer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--purpur-spacing-600);
+  align-self: stretch;
+
+  &__general-settings,
+  &__visible-columns {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--purpur-spacing-200);
+    align-self: stretch;
+  }
+
+  &__button-group {
+    text-align: center;
+  }
+
+  &__toggle {
+    justify-content: space-between;
+    width: 100%;
+  }
+}