@purpurds/table 8.3.1 → 8.4.0

package/src/table-content-drag.test.tsx

@@ -0,0 +1,505 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { axe } from "vitest-axe";
+
+import { EmptyTableContent, LoadingTableContent, NormalTableContent } from "./table-content";
+
+// Mock tanstack table
+const mockTanstackTable = {
+  getVisibleLeafColumns: vi.fn(() => [{ id: "col1" }, { id: "col2" }]),
+} as unknown as Parameters<typeof NormalTableContent>[0]["tanstackTable"];
+
+// Mock row data
+const mockTableRows = [
+  {
+    id: "row1",
+    getIsSelected: () => false,
+    getVisibleCells: () => [
+      {
+        id: "cell1",
+        column: {
+          id: "col1",
+          getIsFirstColumn: () => true,
+          getIsLastColumn: () => false,
+          columnDef: { meta: { cellType: "default" } },
+        },
+        getValue: () => "Value 1",
+        getContext: () => ({ getValue: () => "Value 1" }),
+      },
+      {
+        id: "cell2",
+        column: {
+          id: "col2",
+          getIsFirstColumn: () => false,
+          getIsLastColumn: () => true,
+          columnDef: { meta: { cellType: "default" } },
+        },
+        getValue: () => "Value 2",
+        getContext: () => ({ getValue: () => "Value 2" }),
+      },
+    ],
+  },
+  {
+    id: "row2",
+    getIsSelected: () => true,
+    getVisibleCells: () => [
+      {
+        id: "cell3",
+        column: {
+          id: "col1",
+          getIsFirstColumn: () => true,
+          getIsLastColumn: () => false,
+          columnDef: { meta: { cellType: "default" } },
+        },
+        getValue: () => "Value 3",
+        getContext: () => ({ getValue: () => "Value 3" }),
+      },
+      {
+        id: "cell4",
+        column: {
+          id: "col2",
+          getIsFirstColumn: () => false,
+          getIsLastColumn: () => true,
+          columnDef: { meta: { cellType: "default" } },
+        },
+        getValue: () => "Value 4",
+        getContext: () => ({ getValue: () => "Value 4" }),
+      },
+    ],
+  },
+] as unknown as Parameters<typeof NormalTableContent>[0]["tableRows"];
+
+const mockRenderTableHeaders = () => (
+  <tr>
+    <th>Header 1</th>
+    <th>Header 2</th>
+  </tr>
+);
+
+describe("Table Content Components with Drag and Drop", () => {
+  describe("NormalTableContent", () => {
+    const defaultProps = {
+      tanstackTable: mockTanstackTable,
+      tableRows: mockTableRows,
+      showColumnFiltersEnabled: false,
+      fullWidth: false,
+      renderTableHeaders: mockRenderTableHeaders,
+      stickyFirstColumn: false,
+      getStickyColumn: () => false,
+      isScrolled: false,
+      showBorder: () => false,
+      enableColumnDrag: false,
+      activeId: null,
+    };
+
+    it("should render table with drag disabled by default", () => {
+      render(<NormalTableContent {...defaultProps} />);
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+      expect(table.className).toContain("purpur-table__table");
+    });
+
+    it("should render table with drag enabled", () => {
+      render(<NormalTableContent {...defaultProps} enableColumnDrag={true} />);
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+    });
+
+    it("should apply full width class when fullWidth is true", () => {
+      render(<NormalTableContent {...defaultProps} fullWidth={true} />);
+
+      const table = screen.getByRole("table");
+      expect(table.className).toContain("purpur-table__table--full-width");
+    });
+
+    it("should render correct number of rows", () => {
+      render(<NormalTableContent {...defaultProps} />);
+
+      const rows = screen.getAllByRole("row");
+      // Should have header row + data rows
+      expect(rows.length).toBeGreaterThan(mockTableRows.length);
+    });
+
+    it("should pass enableColumnDrag prop to table cells", () => {
+      render(<NormalTableContent {...defaultProps} enableColumnDrag={true} />);
+
+      // All cells should receive the enableColumnDrag prop
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+    });
+
+    it("should pass draggingActive prop to cells when activeId matches", () => {
+      render(<NormalTableContent {...defaultProps} enableColumnDrag={true} activeId="col1" />);
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+    });
+
+    it("should handle sticky columns with drag enabled", () => {
+      render(
+        <NormalTableContent
+          {...defaultProps}
+          stickyFirstColumn={true}
+          getStickyColumn={(index) => index === 0}
+          enableColumnDrag={true}
+        />
+      );
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+    });
+
+    it("should handle scrolled state with drag enabled", () => {
+      render(<NormalTableContent {...defaultProps} isScrolled={true} enableColumnDrag={true} />);
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+    });
+
+    it("should handle border showing with drag enabled", () => {
+      render(
+        <NormalTableContent
+          {...defaultProps}
+          showBorder={(index) => index === 0}
+          enableColumnDrag={true}
+        />
+      );
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+    });
+
+    it("should be accessible with drag enabled", async () => {
+      const { container } = render(
+        <NormalTableContent {...defaultProps} enableColumnDrag={true} />
+      );
+
+      const results = await axe(container);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      expect(results).toHaveNoViolations();
+    });
+
+    it("should handle empty table rows", () => {
+      render(<NormalTableContent {...defaultProps} tableRows={[]} enableColumnDrag={true} />);
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+    });
+
+    it("should handle selected rows with drag enabled", () => {
+      const selectedRows = mockTableRows.map(
+        (row: Parameters<typeof NormalTableContent>[0]["tableRows"][0]) => ({
+          ...row,
+          getIsSelected: () => true,
+        })
+      );
+
+      render(
+        <NormalTableContent {...defaultProps} tableRows={selectedRows} enableColumnDrag={true} />
+      );
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+    });
+  });
+
+  describe("LoadingTableContent", () => {
+    const defaultProps = {
+      tanstackTable: mockTanstackTable,
+      tableRows: [],
+      showColumnFiltersEnabled: false,
+      fullWidth: false,
+      renderTableHeaders: mockRenderTableHeaders,
+      skeletonRows: 5,
+      getStickyColumn: () => false,
+      stickyFirstColumn: false,
+      isScrolled: false,
+      showBorder: () => false,
+      getColumnWidths: () => ["100px", "150px"],
+    };
+
+    it("should render loading table with drag context support", () => {
+      render(<LoadingTableContent {...defaultProps} />);
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+      expect(table.className).toContain("purpur-table__table");
+    });
+
+    it("should apply full width class when fullWidth is true", () => {
+      render(<LoadingTableContent {...defaultProps} fullWidth={true} />);
+
+      const table = screen.getByRole("table");
+      expect(table.className).toContain("purpur-table__table--full-width");
+    });
+
+    it("should render with column filters enabled", () => {
+      render(<LoadingTableContent {...defaultProps} showColumnFiltersEnabled={true} />);
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+    });
+
+    it("should handle sticky columns in loading state", () => {
+      render(
+        <LoadingTableContent
+          {...defaultProps}
+          stickyFirstColumn={true}
+          getStickyColumn={(index) => index === 0}
+        />
+      );
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+    });
+
+    it("should handle scrolled state in loading", () => {
+      render(<LoadingTableContent {...defaultProps} isScrolled={true} />);
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+    });
+
+    it("should pass correct skeleton row count", () => {
+      const skeletonRows = 3;
+      render(<LoadingTableContent {...defaultProps} skeletonRows={skeletonRows} />);
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+    });
+
+    it("should pass column widths to loading rows", () => {
+      const columnWidths = ["120px", "180px", "200px"];
+      render(<LoadingTableContent {...defaultProps} getColumnWidths={() => columnWidths} />);
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+    });
+
+    it("should be accessible in loading state", async () => {
+      const { container } = render(<LoadingTableContent {...defaultProps} />);
+
+      const results = await axe(container);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      expect(results).toHaveNoViolations();
+    });
+  });
+
+  describe("EmptyTableContent", () => {
+    const defaultProps = {
+      tanstackTable: mockTanstackTable,
+      tableRows: [],
+      showColumnFiltersEnabled: false,
+      fullWidth: false,
+      renderTableHeaders: mockRenderTableHeaders,
+      variant: "primary" as const,
+      emptyTableHeadingTag: "h2" as const,
+      emptyTableCopy: {
+        title: "No data available",
+        description: "There are no items to display in this table.",
+      },
+      emptyTableIcon: <div data-testid="empty-icon">Empty Icon</div>,
+    };
+
+    it("should render empty table with drag context support", () => {
+      render(<EmptyTableContent {...defaultProps} />);
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+      expect(table.className).toContain("purpur-table__table");
+    });
+
+    it("should apply full width class when fullWidth is true", () => {
+      render(<EmptyTableContent {...defaultProps} fullWidth={true} />);
+
+      const table = screen.getByRole("table");
+      expect(table.className).toContain("purpur-table__table--full-width");
+    });
+
+    it("should render with column filters enabled", () => {
+      render(<EmptyTableContent {...defaultProps} showColumnFiltersEnabled={true} />);
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+    });
+
+    it("should display empty table content", () => {
+      render(<EmptyTableContent {...defaultProps} />);
+
+      expect(screen.getByText(defaultProps.emptyTableCopy.title)).toBeInTheDocument();
+      expect(screen.getByText(defaultProps.emptyTableCopy.description)).toBeInTheDocument();
+      expect(screen.getByTestId("empty-icon")).toBeInTheDocument();
+    });
+
+    it("should handle different variants", () => {
+      const variants = ["primary", "secondary"] as const;
+
+      variants.forEach((variant) => {
+        const { unmount } = render(<EmptyTableContent {...defaultProps} variant={variant} />);
+
+        const table = screen.getByRole("table");
+        expect(table).toBeInTheDocument();
+
+        unmount();
+      });
+    });
+
+    it("should handle different heading tags", () => {
+      const headingTags = ["h1", "h2", "h3", "h4", "h5", "h6"] as const;
+
+      headingTags.forEach((tag) => {
+        const { unmount } = render(
+          <EmptyTableContent {...defaultProps} emptyTableHeadingTag={tag} />
+        );
+
+        const table = screen.getByRole("table");
+        expect(table).toBeInTheDocument();
+
+        unmount();
+      });
+    });
+
+    it("should handle missing icon", () => {
+      render(<EmptyTableContent {...defaultProps} emptyTableIcon={undefined} />);
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+      expect(screen.queryByTestId("empty-icon")).not.toBeInTheDocument();
+    });
+
+    it("should calculate correct colSpan from tanstack table", () => {
+      const mockTableWithMoreColumns = {
+        getVisibleLeafColumns: vi.fn(() => [
+          { id: "col1" },
+          { id: "col2" },
+          { id: "col3" },
+          { id: "col4" },
+        ]),
+      } as unknown as Parameters<typeof EmptyTableContent>[0]["tanstackTable"];
+
+      render(<EmptyTableContent {...defaultProps} tanstackTable={mockTableWithMoreColumns} />);
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+    });
+
+    it("should be accessible in empty state", async () => {
+      const { container } = render(<EmptyTableContent {...defaultProps} />);
+
+      const results = await axe(container);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      expect(results).toHaveNoViolations();
+    });
+
+    it("should handle empty copy strings", () => {
+      render(
+        <EmptyTableContent
+          {...defaultProps}
+          emptyTableCopy={{
+            title: "",
+            description: "",
+          }}
+        />
+      );
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+    });
+  });
+
+  describe("Integration between content types", () => {
+    it("should maintain consistent table structure across all content types", () => {
+      const baseProps = {
+        tanstackTable: mockTanstackTable,
+        showColumnFiltersEnabled: false,
+        fullWidth: true,
+        renderTableHeaders: mockRenderTableHeaders,
+      };
+
+      // Normal content
+      const { container: normalContainer, unmount: unmountNormal } = render(
+        <NormalTableContent
+          {...baseProps}
+          tableRows={mockTableRows}
+          stickyFirstColumn={false}
+          getStickyColumn={() => false}
+          isScrolled={false}
+          showBorder={() => false}
+          enableColumnDrag={false}
+          activeId={null}
+        />
+      );
+
+      const normalTable = normalContainer.querySelector("table");
+      expect(normalTable?.className).toContain("purpur-table__table");
+      expect(normalTable?.className).toContain("purpur-table__table--full-width");
+      unmountNormal();
+
+      // Loading content
+      const { container: loadingContainer, unmount: unmountLoading } = render(
+        <LoadingTableContent
+          {...baseProps}
+          tableRows={[]}
+          skeletonRows={5}
+          getStickyColumn={() => false}
+          stickyFirstColumn={false}
+          isScrolled={false}
+          showBorder={() => false}
+          getColumnWidths={() => []}
+        />
+      );
+
+      const loadingTable = loadingContainer.querySelector("table");
+      expect(loadingTable?.className).toContain("purpur-table__table");
+      expect(loadingTable?.className).toContain("purpur-table__table--full-width");
+      unmountLoading();
+
+      // Empty content
+      const { container: emptyContainer, unmount: unmountEmpty } = render(
+        <EmptyTableContent
+          {...baseProps}
+          tableRows={[]}
+          variant="primary"
+          emptyTableHeadingTag="h2"
+          emptyTableCopy={{
+            title: "Empty",
+            description: "No data",
+          }}
+        />
+      );
+
+      const emptyTable = emptyContainer.querySelector("table");
+      expect(emptyTable?.className).toContain("purpur-table__table");
+      expect(emptyTable?.className).toContain("purpur-table__table--full-width");
+      unmountEmpty();
+    });
+
+    it("should handle drag and drop props consistently", () => {
+      // Test that drag-related props don't break any content type
+      expect(() => {
+        render(
+          <div>
+            <NormalTableContent
+              tanstackTable={mockTanstackTable}
+              tableRows={mockTableRows}
+              showColumnFiltersEnabled={false}
+              fullWidth={false}
+              renderTableHeaders={mockRenderTableHeaders}
+              stickyFirstColumn={false}
+              getStickyColumn={() => false}
+              isScrolled={false}
+              showBorder={() => false}
+              enableColumnDrag={true}
+              activeId="col1"
+            />
+          </div>
+        );
+      }).not.toThrow();
+    });
+  });
+});

package/src/table-content.tsx

@@ -0,0 +1,165 @@
+import React from "react";
+import type { UniqueIdentifier } from "@dnd-kit/core";
+import { type HeadingTagType } from "@purpurds/heading";
+import type { Row, Table } from "@tanstack/react-table";
+import type { RowData } from "@tanstack/react-table";
+import c from "classnames/bind";
+
+import { EmptyTable } from "./empty-table";
+import { LoadingTableRows } from "./loading-table-rows";
+import styles from "./table.module.scss";
+import { TableBody } from "./table-body";
+import { TableHeader } from "./table-header";
+import { TableRow } from "./table-row";
+import { TableRowCell } from "./table-row-cell";
+
+const cx = c.bind(styles);
+const rootClassName = "purpur-table";
+
+type BaseTableContentProps<TData extends RowData> = {
+  tanstackTable: Table<TData>;
+  tableRows: Row<TData>[];
+  showColumnFiltersEnabled: boolean;
+  fullWidth: boolean;
+  renderTableHeaders: () => React.ReactNode;
+};
+
+type NormalTableContentProps<TData extends RowData> = BaseTableContentProps<TData> & {
+  stickyFirstColumn: boolean;
+  getStickyColumn: (index: number) => boolean;
+  isScrolled: boolean;
+  showBorder: (index: number) => boolean;
+  enableColumnDrag: boolean;
+  activeId: UniqueIdentifier | null;
+};
+
+export function NormalTableContent<TData extends RowData>({
+  tableRows,
+  showColumnFiltersEnabled,
+  fullWidth,
+  renderTableHeaders,
+  stickyFirstColumn,
+  getStickyColumn,
+  isScrolled,
+  showBorder,
+  enableColumnDrag,
+  activeId,
+}: NormalTableContentProps<TData>) {
+  return (
+    <table
+      className={cx([
+        `${rootClassName}__table`,
+        { [`${rootClassName}__table--full-width`]: fullWidth },
+      ])}
+    >
+      <TableHeader columnFiltersEnabled={showColumnFiltersEnabled}>
+        {renderTableHeaders()}
+      </TableHeader>
+      <TableBody>
+        {tableRows.map((row, rowIndex) => (
+          <TableRow key={row.id} isSelected={row.getIsSelected()}>
+            {row.getVisibleCells().map((cell, cellIndex) => (
+              <TableRowCell
+                key={cell.id}
+                cell={cell}
+                isLastRow={rowIndex === tableRows.length - 1}
+                isFirstCell={cellIndex === 0}
+                isLastCell={cellIndex === row.getVisibleCells().length - 1}
+                stickyColumn={stickyFirstColumn && getStickyColumn(cellIndex)}
+                isScrolled={isScrolled}
+                showBorder={showBorder(cellIndex)}
+                enableColumnDrag={enableColumnDrag || false}
+                draggingActive={activeId === cell.column.id}
+              />
+            ))}
+          </TableRow>
+        ))}
+      </TableBody>
+    </table>
+  );
+}
+
+type LoadingTableContentProps<TData extends RowData> = BaseTableContentProps<TData> & {
+  skeletonRows: number;
+  getStickyColumn: (index: number) => boolean;
+  stickyFirstColumn: boolean;
+  isScrolled: boolean;
+  showBorder: (index: number) => boolean;
+  getColumnWidths: () => (string | number)[];
+};
+
+export function LoadingTableContent<TData extends RowData>({
+  showColumnFiltersEnabled,
+  fullWidth,
+  renderTableHeaders,
+  skeletonRows,
+  getStickyColumn,
+  stickyFirstColumn,
+  isScrolled,
+  showBorder,
+  getColumnWidths,
+}: LoadingTableContentProps<TData>) {
+  return (
+    <table
+      className={cx([
+        `${rootClassName}__table`,
+        { [`${rootClassName}__table--full-width`]: fullWidth },
+      ])}
+    >
+      <TableHeader columnFiltersEnabled={showColumnFiltersEnabled}>
+        {renderTableHeaders()}
+      </TableHeader>
+      <TableBody>
+        <LoadingTableRows
+          rowCount={skeletonRows}
+          getStickyColumn={getStickyColumn}
+          stickyFirstColumn={stickyFirstColumn}
+          isScrolled={isScrolled}
+          cellWidths={getColumnWidths()}
+          showBorder={showBorder}
+        />
+      </TableBody>
+    </table>
+  );
+}
+
+type EmptyTableContentProps<TData extends RowData> = BaseTableContentProps<TData> & {
+  variant: "primary" | "secondary";
+  emptyTableHeadingTag: HeadingTagType;
+  emptyTableCopy: { title: string; description: string };
+  emptyTableIcon?: React.ReactNode;
+};
+
+export function EmptyTableContent<TData extends RowData>({
+  tanstackTable,
+  showColumnFiltersEnabled,
+  fullWidth,
+  renderTableHeaders,
+  variant,
+  emptyTableHeadingTag,
+  emptyTableCopy,
+  emptyTableIcon,
+}: EmptyTableContentProps<TData>) {
+  return (
+    <table
+      className={cx([
+        `${rootClassName}__table`,
+        { [`${rootClassName}__table--full-width`]: fullWidth },
+      ])}
+    >
+      <TableHeader columnFiltersEnabled={showColumnFiltersEnabled}>
+        {renderTableHeaders()}
+      </TableHeader>
+      <TableBody>
+        <EmptyTable
+          variant={variant}
+          tag={emptyTableHeadingTag}
+          title={emptyTableCopy.title}
+          description={emptyTableCopy.description}
+          colSpan={tanstackTable.getVisibleLeafColumns().length}
+          icon={emptyTableIcon}
+        />
+      </TableBody>
+    </table>
+  );
+}