@purpurds/table 0.0.1

package/src/story-utils/column-def.ts

@@ -0,0 +1,148 @@
+import { createColumnHelper } from "../table";
+import { SimpleTableData, TableData } from "./table-data";
+
+const columnHelper = createColumnHelper<TableData>();
+const simpleColumnHelper = createColumnHelper<SimpleTableData>();
+
+export const columnDef = [
+  columnHelper.accessor("id", {
+    header: "ID",
+    size: 100,
+    filterFn: "includesString",
+    meta: {
+      cellType: "leadText",
+      filterVariant: "string",
+      filterPlaceholder: "Search by id",
+    },
+  }),
+  columnHelper.accessor("name", {
+    header: "Name",
+    size: 220,
+    meta: {
+      cellType: "bodyText",
+      filterVariant: "string",
+      filterPlaceholder: "Search by name",
+    },
+  }),
+  columnHelper.accessor("badge", {
+    header: "Badge",
+    size: 150,
+    filterFn: "filterOnFilterKey",
+    sortingFn: "sortOnBadgeValue",
+    meta: {
+      cellType: "badge",
+      filterKey: "variant",
+      filterVariant: "select",
+      selectProps: {
+        value: "",
+        options: [
+          {
+            value: "",
+            label: "Default",
+          },
+          {
+            value: "information",
+            label: "Information",
+          },
+          {
+            value: "success",
+            label: "Success",
+          },
+          {
+            value: "warning",
+            label: "Warning",
+          },
+        ],
+        ["aria-label"]: "Filter by badge variant",
+      },
+    },
+  }),
+  columnHelper.accessor("date", {
+    header: "Date",
+    enableColumnFilter: false,
+    size: 150,
+    meta: {
+      cellType: "date",
+    },
+  }),
+  columnHelper.accessor("link", {
+    header: "Link",
+    size: 150,
+    enableSorting: false,
+    enableColumnFilter: false,
+    meta: {
+      cellType: "link",
+    },
+  }),
+  columnHelper.accessor("longString", {
+    header: "Truncate",
+    size: 100,
+    enableSorting: false,
+    enableColumnFilter: false,
+    meta: {
+      cellType: "bodyText",
+    },
+  }),
+  columnHelper.accessor("position", {
+    header: "Position",
+    size: 100,
+    invertSorting: true,
+    meta: {
+      cellType: "number",
+      numberCellAlignment: "right",
+    },
+  }),
+  columnHelper.display({
+    id: "button",
+    header: "Action",
+    size: 100,
+    meta: {
+      cellType: "button",
+      onClick: (cell) => {
+        console.log("cell: ", cell);
+      },
+    },
+  }),
+  columnHelper.display({
+    id: "buttonGroup",
+    header: "Button group",
+    meta: {
+      cellType: "buttonGroup",
+      onClick: (cell) => {
+        console.log("cell: ", cell);
+      },
+    },
+  }),
+];
+
+// Simple column definition for basic examples
+export const simpleColumnDef = [
+  simpleColumnHelper.accessor("name", {
+    header: "Name",
+    size: 120,
+    meta: {
+      cellType: "leadText",
+    },
+  }),
+  simpleColumnHelper.accessor("id", {
+    header: "ID",
+    size: 50,
+    meta: {
+      cellType: "bodyText",
+    },
+  }),
+  simpleColumnHelper.accessor("longString", {
+    header: "Long String",
+    size: 300,
+    meta: {
+      cellType: "bodyText",
+    },
+  }),
+  simpleColumnHelper.accessor("link", {
+    header: "Link",
+    size: 100,
+    meta: {
+      cellType: "link",
+    },
+  }),
+];

package/src/story-utils/table-data.tsx

@@ -0,0 +1,262 @@
+import React from "react";
+import { BadgeVariant } from "@purpurds/badge";
+import { ButtonProps } from "@purpurds/button";
+import { IconDownload } from "@purpurds/icon/download";
+import { IconMoreVertical } from "@purpurds/icon/more-vertical";
+import { IconRemove } from "@purpurds/icon/remove";
+
+import { ButtonGroupButtonProp } from "../cell-types/button-group-cell";
+
+// Table data structure for the data table component
+export type TableData = {
+  id: number;
+  name: string;
+  badge: {
+    variant: BadgeVariant;
+    children: React.ReactNode;
+  };
+  date: string;
+  link?: {
+    href: string;
+    children: React.ReactNode;
+  };
+  longString: string;
+  position: number;
+  button?: ButtonProps | undefined;
+  buttonGroup?: ButtonGroupButtonProp[] | undefined;
+};
+
+// Simple table data structure for basic examples
+export type SimpleTableData = {
+  id: number;
+  name: string;
+  link: {
+    href: string;
+    children: React.ReactNode;
+  };
+  longString: string;
+};
+
+export const tableData: TableData[] = [
+  {
+    id: 12345,
+    name: "Name 1",
+    link: {
+      href: "#",
+      children: "Link 2",
+    },
+    badge: {
+      variant: "information",
+      children: "Information",
+    },
+    date: new Date("2024-05-21T15:10:00+02:00").toISOString(),
+    longString: "Some really long string",
+    position: 1,
+    button: {
+      type: "button",
+      children: "ClickMe",
+      variant: "primary",
+    },
+  },
+  {
+    id: 67890,
+    name: "Name 17",
+    link: { href: "#", children: "Link 9" },
+    badge: {
+      variant: "success",
+      children: "Success",
+    },
+    date: new Date("2024-08-24T15:10:00+02:00").toISOString(),
+    longString: "Lorem, ipsum dolor sit amet consectetur adipisicing elit.",
+    position: 2,
+    button: undefined,
+  },
+  {
+    id: 12346,
+    name: "Name 5",
+    link: { href: "#", children: "Link 1" },
+    badge: {
+      variant: "warning",
+      children: "Warning",
+    },
+    date: new Date("2025-01-14T00:00:00+01:00").toISOString(),
+    longString:
+      "Incidunt ipsa obcaecati maiores dicta aliquid, earum atque saepe, vero perspiciatis libero rem harum debitis ullam cum doloremque voluptatibus facilis temporibus aliquam!",
+    position: 3,
+    button: {
+      type: "button",
+      children: "ClickMe",
+      variant: "primary",
+    },
+  },
+];
+
+export const simpleTableData: SimpleTableData[] = [
+  {
+    id: 12345,
+    name: "Name 1",
+    link: { href: "#", children: "Link 2" },
+    longString: "Some really long string",
+  },
+  {
+    id: 67890,
+    name: "Name 7",
+    link: { href: "#", children: "Link 9" },
+    longString: "Lorem, ipsum dolor sit amet consectetur adipisicing elit.",
+  },
+  {
+    id: 12346,
+    name: "Name 5",
+    link: { href: "#", children: "Link 1" },
+    longString: "Some really long string",
+  },
+  {
+    id: 98463,
+    name: "Name 9",
+    link: { href: "#", children: "Link 9" },
+    longString: "Some really long string",
+  },
+];
+
+const firstNames = [
+  "John",
+  "Jane",
+  "Alex",
+  "Emily",
+  "Chris",
+  "Katie",
+  "Michael",
+  "Sarah",
+  "David",
+  "Laura",
+];
+const lastNames = [
+  "Smith",
+  "Johnson",
+  "Williams",
+  "Brown",
+  "Jones",
+  "Garcia",
+  "Miller",
+  "Davis",
+  "Martinez",
+  "Hernandez",
+];
+
+function generateRandomString(minLength: number, maxLength: number): string {
+  const length = Math.floor(Math.random() * (maxLength - minLength + 1)) + minLength;
+  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+  let result = "";
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * characters.length));
+  }
+  return result;
+}
+
+function generateRandomName(): string {
+  const firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
+  const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
+  return `${firstName} ${lastName}`;
+}
+
+function getRandomDate() {
+  const today = new Date();
+  const randomDays = Math.floor(Math.random() * 7); // Random number of days within the past week
+  const randomHours = Math.floor(Math.random() * 24); // Random hour of the day
+  const randomMinutes = Math.floor(Math.random() * 60); // Random minute of the hour
+  const randomSeconds = Math.floor(Math.random() * 60); // Random second of the minute
+  const randomDate = new Date(today);
+  randomDate.setDate(today.getDate() - randomDays);
+  randomDate.setHours(randomHours, randomMinutes, randomSeconds);
+  return randomDate;
+}
+
+export const generateLargeTableData = (rowCount: number): TableData[] => {
+  const variants = [
+    "attention",
+    "special",
+    "neutral",
+    "information",
+    "success",
+    "warning",
+    "error",
+    "black-friday",
+  ];
+
+  const tableData: TableData[] = [
+    {
+      id: 768,
+      name: "Some really long name to be truncated",
+      badge: {
+        variant: "success",
+        children: "Happy",
+      },
+      date: getRandomDate().toISOString(),
+      link: {
+        href: "#",
+        children: "Some long link name to be truncated",
+      },
+      longString: "Lorem, ipsum dolor sit amet consectetur adipisicing elit.",
+      position: 1,
+      button: {
+        type: "button",
+        children: "ClickMe",
+        variant: "text",
+      },
+    },
+  ];
+  for (let i = 1; i < rowCount; i++) {
+    const id = 1000 + i * 3;
+    const name = generateRandomName();
+    const variant = variants[Math.floor(Math.random() * variants.length)];
+    const badge = {
+      variant: variant as BadgeVariant,
+      children: variant.charAt(0).toUpperCase() + variant.slice(1),
+    };
+
+    const date = getRandomDate().toISOString();
+    const link = {
+      href: "#",
+      children: generateRandomString(5, 12),
+    };
+
+    const row: TableData = {
+      id,
+      name,
+      badge,
+      date,
+      link,
+      longString: "Lorem, ipsum dolor sit amet consectetur adipisicing elit.",
+      position: i + 1,
+      button: {
+        type: "button",
+        children: "ClickMe",
+        variant: "text",
+      },
+      buttonGroup: [
+        {
+          id: "button-1",
+          ariaLabel: "Remove",
+          variant: "tertiary-purple",
+          icon: <IconRemove data-testid="remove-icon" size="sm" />,
+        },
+        {
+          id: `button-2`,
+          ariaLabel: "Download",
+          variant: "tertiary-purple",
+          icon: <IconDownload data-testid="download-icon" size="sm" />,
+        },
+        {
+          id: `button-3`,
+          ariaLabel: "More stuff",
+          variant: "tertiary-purple",
+          icon: <IconMoreVertical data-testid="more-vertical-icon" size="sm" />,
+        },
+      ],
+    };
+
+    tableData.push(row);
+  }
+
+  return tableData;
+};

package/src/story-utils/use-fetch-table-data-hook.tsx

@@ -0,0 +1,30 @@
+import { PaginationState } from "../table";
+import { generateLargeTableData, TableData } from "./table-data";
+
+const data = generateLargeTableData(100);
+
+export const useFetchTableData = ({
+  pagination,
+  selectedRows,
+}: {
+  pagination: PaginationState;
+  selectedRows?: string[];
+}): { data: TableData[]; totalRowCount: number } => {
+  if (selectedRows) {
+    const selectedData = data
+      .filter((row) => selectedRows.includes(`${row.id}`))
+      .slice(
+        pagination.pageIndex * pagination.pageSize,
+        (pagination.pageIndex + 1) * pagination.pageSize
+      );
+
+    return { data: selectedData, totalRowCount: selectedRows.length };
+  }
+
+  const paginatedData = data.slice(
+    pagination.pageIndex * pagination.pageSize,
+    (pagination.pageIndex + 1) * pagination.pageSize
+  );
+
+  return { data: paginatedData, totalRowCount: data.length };
+};

package/src/table-action-bar.module.scss

@@ -0,0 +1,106 @@
+@use "@purpurds/tokens/breakpoint/variables" as *;
+
+.purpur-table-action-bar {
+  $root: &;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  box-sizing: border-box;
+  z-index: 6;
+  width: 100%;
+
+  display: flex;
+  padding: var(--purpur-spacing-150) 0px var(--purpur-spacing-150) var(--purpur-spacing-200);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--purpur-spacing-150);
+
+  border-top: 1px solid var(--purpur-color-border-weak);
+  background: var(--purpur-color-background-primary);
+
+  box-shadow: var(--purpur-shadow-lg);
+
+  visibility: hidden;
+  transform: translateY(100%);
+  transition: transform var(--purpur-motion-duration-300) var(--purpur-motion-easing-ease-in),
+    visibility var(--purpur-motion-duration-300) var(--purpur-motion-easing-ease-in);
+
+  &--is-visible {
+    visibility: visible;
+    transform: translateY(0);
+  }
+
+  &__selected-wrapper {
+    display: flex;
+    justify-content: space-between;
+    row-gap: var(--purpur-spacing-100);
+    align-self: stretch;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--purpur-spacing-100);
+  }
+
+  &__button-group {
+    display: flex;
+    padding-right: var(--purpur-spacing-200);
+    flex-direction: column-reverse;
+    justify-content: center;
+    align-items: flex-start;
+    gap: var(--purpur-spacing-200);
+    align-self: stretch;
+
+    #{$root}__primary-secondary-buttons {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--purpur-spacing-200);
+      align-self: stretch;
+    }
+  }
+
+  @media (min-width: $purpur-breakpoint-md) {
+    padding: var(--purpur-spacing-150) var(--purpur-spacing-100) var(--purpur-spacing-150)
+      var(--purpur-spacing-150);
+
+    &__selected-wrapper {
+      align-items: center;
+      align-content: center;
+      flex-direction: row;
+
+      span {
+        font-weight: 700;
+      }
+    }
+
+    &__button-group {
+      flex-direction: column-reverse;
+      align-items: center;
+      gap: var(--purpur-spacing-100);
+      align-self: stretch;
+      padding-right: 0;
+
+      #{$root}__primary-secondary-buttons {
+        align-items: center;
+        flex-direction: row;
+      }
+    }
+  }
+
+  @media (min-width: $purpur-breakpoint-lg) {
+    padding: var(--purpur-spacing-150) var(--purpur-spacing-400) var(--purpur-spacing-150)
+      var(--purpur-spacing-600);
+    justify-content: space-between;
+    align-items: center;
+    align-content: center;
+    flex-direction: row;
+
+    &__selected-wrapper {
+      gap: var(--purpur-spacing-100) var(--purpur-spacing-200);
+      flex-wrap: wrap;
+    }
+
+    &__button-group {
+      flex-direction: row;
+    }
+  }
+}

package/src/table-action-bar.test.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { axe } from "vitest-axe";
+
+import { TableActionBar } from "./table-action-bar";
+import { copy, Selectors } from "./test-utils/helpers";
+
+const onCancelMock = vi.fn();
+const onToggleSelectedMock = vi.fn();
+const onPrimaryButtonMock = vi.fn();
+const onSecondaryButtonMock = vi.fn();
+
+describe("Data Table - Action bar", () => {
+  let actionBar: HTMLElement;
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    container = render(
+      <TableActionBar
+        onCancelSelection={onCancelMock}
+        onToggleSelected={onToggleSelectedMock}
+        onPrimaryButtonClick={onPrimaryButtonMock}
+        onSecondaryButtonClick={onSecondaryButtonMock}
+        rowCount={10}
+        selectedRowsCount={2}
+        copy={copy.actionBar}
+        isVisible={true}
+      />
+    ).container;
+
+    actionBar = screen.getByTestId(Selectors.ACTION_BAR.ROOT);
+  });
+
+  it("should display batch action bar with '2 of 10 selected", () => {
+    const selectedText = within(actionBar).getByTestId(Selectors.ACTION_BAR.SELECTED_TEXT);
+    expect(selectedText).toHaveTextContent("2 of 10 selected");
+  });
+
+  it("should have a primary button", () => {
+    const primaryButton = within(actionBar).getByTestId(Selectors.ACTION_BAR.PRIMARY_BUTTON);
+    expect(primaryButton).toBeVisible();
+    expect(primaryButton).toHaveTextContent("Primary button");
+  });
+
+  it("should have a secondary button", () => {
+    const secondaryButton = within(actionBar).getByTestId(Selectors.ACTION_BAR.SECONDARY_BUTTON);
+    expect(secondaryButton).toBeVisible();
+  });
+
+  it("should have a cancel selection button", () => {
+    const cancelButton = within(actionBar).getByTestId(Selectors.ACTION_BAR.CANCEL_BUTTON);
+    expect(cancelButton).toBeVisible();
+  });
+
+  it("should have a show only selected toggle", () => {
+    const toggleSelected = within(actionBar).getByTestId(Selectors.ACTION_BAR.TOGGLE_SELECTED);
+    expect(toggleSelected).toBeVisible();
+  });
+
+  it("should send an event when clicking on cancel button", async () => {
+    const closeButton = within(actionBar).getByTestId(Selectors.ACTION_BAR.CANCEL_BUTTON);
+    await userEvent.click(closeButton);
+    expect(onCancelMock).toHaveBeenCalled();
+  });
+
+  it("should send an event when clicking on toggle selection", async () => {
+    const toggleSelected = within(actionBar).getByTestId(Selectors.ACTION_BAR.TOGGLE_SELECTED);
+    await userEvent.click(toggleSelected);
+    expect(onToggleSelectedMock).toHaveBeenCalled();
+  });
+
+  it("should send an event when clicking on primary button", async () => {
+    const primaryButton = within(actionBar).getByTestId(Selectors.ACTION_BAR.PRIMARY_BUTTON);
+    await userEvent.click(primaryButton);
+    expect(onPrimaryButtonMock).toHaveBeenCalled();
+  });
+
+  it("should send an event when clicking on secondary button", async () => {
+    const secondaryButton = within(actionBar).getByTestId(Selectors.ACTION_BAR.SECONDARY_BUTTON);
+    await userEvent.click(secondaryButton);
+    expect(onSecondaryButtonMock).toHaveBeenCalled();
+  });
+
+  it("should be accessible", async () => {
+    const results = await axe(container, {
+      elementRef: true,
+    });
+    const buttonNameViolation = results.violations.find(
+      (violation) => violation.id === "button-name"
+    );
+
+    // "Buttons must have discernible text (button-name)"
+    // This is rule is failing on the toggles
+    if (buttonNameViolation) {
+      buttonNameViolation.nodes = buttonNameViolation.nodes.filter(
+        (node) => !node.element?.matches('[role="switch"]')
+      );
+
+      // remove the violation if there are no more nodes
+      if (!buttonNameViolation.nodes.length) {
+        results.violations.splice(results.violations.indexOf(buttonNameViolation), 1);
+      }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    expect(results).toHaveNoViolations();
+  });
+});