@purpurds/table 0.0.1

package/dist/utils/unit-conversions.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Converts pixel values to rem values accounting for the Purpur rescale factor
+ *
+ * In the Purpur design system:
+ * - For 16px rem base: --purpur-rescale = 1
+ * - For 10px rem base: --purpur-rescale = 1.6
+ *
+ * @param pxValue The pixel value to convert to rem
+ * @returns The value in rem units
+ */
+export declare const pxToRem: (pxValue: number) => number;
+/**
+ * Converts pixel values to rem strings with 'rem' unit appended
+ *
+ * @param pxValue The pixel value to convert to rem
+ * @returns A string with the rem value and 'rem' unit
+ */
+export declare const pxToRemString: (pxValue: number) => string;
+//# sourceMappingURL=unit-conversions.d.ts.map

package/dist/utils/unit-conversions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"unit-conversions.d.ts","sourceRoot":"","sources":["../../src/utils/unit-conversions.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO,YAAa,MAAM,KAAG,MASzC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,aAAa,YAAa,MAAM,KAAG,MAE/C,CAAC"}

package/dist/utils/unit-conversions.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=unit-conversions.spec.d.ts.map

package/dist/utils/unit-conversions.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"unit-conversions.spec.d.ts","sourceRoot":"","sources":["../../src/utils/unit-conversions.spec.ts"],"names":[],"mappings":""}

package/eslint.config.mjs

@@ -0,0 +1,2 @@
+import purpurCommon from "@purpurds/component-rig/eslint.config.mjs";
+export default purpurCommon;

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@purpurds/table",
+  "version": "0.0.1",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/table.cjs.js",
+  "types": "./dist/table.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/table.cjs.js",
+      "types": "./dist/table.d.ts",
+      "default": "./dist/table.es.js"
+    },
+    "./styles": "./dist/styles.css",
+    "./metadata": "./dist/metadata.js"
+  },
+  "source": "src/table.tsx",
+  "dependencies": {
+    "@tanstack/react-table": "~8.21.2",
+    "classnames": "~2.5.0",
+    "@purpurds/button": "6.11.1",
+    "@purpurds/badge": "6.11.1",
+    "@purpurds/checkbox": "6.11.1",
+    "@purpurds/cta-link": "6.11.1",
+    "@purpurds/drawer": "6.11.1",
+    "@purpurds/icon": "6.11.1",
+    "@purpurds/heading": "6.11.1",
+    "@purpurds/select": "6.11.1",
+    "@purpurds/link": "6.11.1",
+    "@purpurds/paragraph": "6.11.1",
+    "@purpurds/skeleton": "6.11.1",
+    "@purpurds/text-field": "6.11.1",
+    "@purpurds/tooltip": "6.11.1",
+    "@purpurds/tokens": "6.11.1",
+    "@purpurds/toggle": "6.11.1",
+    "@purpurds/visually-hidden": "6.11.1"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.10.0",
+    "@storybook/blocks": "^8.6.4",
+    "@storybook/react": "^8.6.4",
+    "@testing-library/dom": "~10.4.0",
+    "@testing-library/jest-dom": "~6.4.0",
+    "@testing-library/react": "~16.2.0",
+    "@testing-library/user-event": "~14.5.1",
+    "@types/node": "20.12.12",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "eslint": "9.24.0",
+    "jsdom": "~22.1.0",
+    "lint-staged": "15.5.0",
+    "prettier": "~2.8.8",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "storybook": "^8.6.4",
+    "typescript": "^5.6.3",
+    "vite": "^6.2.1",
+    "vitest": "^3.1.2",
+    "vitest-axe": "~0.1.0",
+    "vitest-canvas-mock": "~0.3.3",
+    "@purpurds/grid": "6.11.1",
+    "@purpurds/component-rig": "1.0.0",
+    "@purpurds/autocomplete": "6.11.1",
+    "@purpurds/label": "6.11.1",
+    "@purpurds/illustrative-icon": "6.11.1",
+    "@purpurds/listbox": "6.11.1",
+    "@purpurds/pagination": "6.11.1"
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "vite build",
+    "ci:build": "rushx build",
+    "coverage": "vitest run --coverage",
+    "lint:fix": "eslint . --fix",
+    "lint": "lint-staged --no-stash 2>&1",
+    "sbdev": "rush sbdev",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:watch": "vitest --watch",
+    "test": "rushx test:unit",
+    "typecheck": "tsc -p ./tsconfig.json"
+  }
+}

package/src/cell-types/badge-cell.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Badge, BadgeProps } from "@purpurds/badge";
+import { Cell, RowData } from "@tanstack/react-table";
+
+import { EmptyCell } from "./empty-cell";
+
+export type BadgeCellProps<TData> = {
+  cell: Cell<TData, unknown>;
+};
+
+export const BadgeCell = <TData extends RowData>({ cell }: BadgeCellProps<TData>) => {
+  const value = cell.getValue<BadgeProps>();
+
+  if (!value) {
+    return <EmptyCell />;
+  }
+
+  const { variant, children, ...props } = value;
+
+  return (
+    <Badge variant={variant} {...props}>
+      {children}
+    </Badge>
+  );
+};

package/src/cell-types/body-text-cell.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { Paragraph } from "@purpurds/paragraph";
+import { Tooltip } from "@purpurds/tooltip";
+import { Cell, RowData } from "@tanstack/react-table";
+import c from "classnames/bind";
+
+import styles from "../table.module.scss";
+import useTruncatedTooltip from "../use-truncated-hook";
+import { pxToRemString } from "../utils/unit-conversions";
+import { EmptyCell } from "./empty-cell";
+const cx = c.bind(styles);
+
+export type BodyTextCellProps<TData> = {
+  cell: Cell<TData, unknown>;
+};
+
+export const BodyTextCell = <TData extends RowData>({ cell }: BodyTextCellProps<TData>) => {
+  const value = cell.getValue<string>();
+  const { divRef, showPopover, onMouseLeave, onMouseEnter } = useTruncatedTooltip(cell);
+
+  if (!value) {
+    return <EmptyCell />;
+  }
+
+  const widthInRemString = pxToRemString(cell.column.getSize());
+
+  const content = (
+    <div
+      ref={divRef}
+      className={cx("purpur-table-row-cell__truncate")}
+      style={{
+        maxWidth: widthInRemString,
+        minWidth: widthInRemString,
+      }}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      <Paragraph>{value}</Paragraph>
+    </div>
+  );
+
+  return (
+    <Tooltip
+      position="top"
+      align="center"
+      triggerElement={content}
+      // @ts-expect-error open does not exist on tooltip but gets passed down to radix tooltip with ...props
+      open={showPopover}
+      contentClassName={cx("purpur-table-row-cell___tooltip-content")}
+    >
+      {value}
+    </Tooltip>
+  );
+};

package/src/cell-types/button-cell.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Button, ButtonProps } from "@purpurds/button";
+import { Cell, RowData } from "@tanstack/react-table";
+
+import { EmptyCell } from "./empty-cell";
+
+export type ButtonCellProps<TData> = {
+  cell: Cell<TData, unknown>;
+};
+
+export const ButtonCell = <TData extends RowData>({ cell }: ButtonCellProps<TData>) => {
+  const buttonProps = (cell.row.original as Record<string, ButtonProps>)[cell.column.id];
+
+  if (buttonProps === undefined || buttonProps === null) {
+    return <EmptyCell />;
+  }
+  const metaOnClick = cell.column.columnDef.meta?.onClick;
+
+  const { children, ...restButtonProps } = buttonProps;
+
+  return (
+    <Button type="button" onClick={() => metaOnClick?.(cell)} size="sm" {...restButtonProps}>
+      {children}
+    </Button>
+  );
+};

package/src/cell-types/button-group-cell.tsx

@@ -0,0 +1,54 @@
+import React, { ReactElement } from "react";
+import { Button, ButtonVariant } from "@purpurds/button";
+import { IconProps } from "@purpurds/icon";
+import { Cell, RowData } from "@tanstack/react-table";
+import c from "classnames/bind";
+
+import styles from "../table.module.scss";
+import { EmptyCell } from "./empty-cell";
+const cx = c.bind(styles);
+
+export type ButtonGroupButtonProp = {
+  id: string;
+  ariaLabel: string;
+  variant: ButtonVariant;
+  icon: ReactElement<IconProps>;
+};
+
+export type ButtonGroupCellProps<TData> = {
+  cell: Cell<TData, unknown>;
+};
+
+export const ButtonGroupCell = <TData extends RowData>({ cell }: ButtonGroupCellProps<TData>) => {
+  const buttons = (cell.row.original as Record<string, ButtonGroupButtonProp[]>)[cell.column.id];
+
+  if (!buttons || !Array.isArray(buttons) || buttons.length === 0) {
+    return <EmptyCell />;
+  }
+
+  return (
+    <div className={cx("purpur-table-row-cell__button-group")}>
+      {buttons.map((props, index) => {
+        const { icon, ariaLabel, variant, ...restProps } = props;
+        return (
+          <Button
+            key={props.id || `button-${index}`}
+            iconOnly
+            aria-label={ariaLabel}
+            variant={variant}
+            type="button"
+            onClick={() => {
+              cell.column.columnDef.meta?.onClick?.({
+                ...cell,
+                buttonId: `${cell.id}_${props.id}`,
+              });
+            }}
+            {...restProps}
+          >
+            {icon}
+          </Button>
+        );
+      })}
+    </div>
+  );
+};

package/src/cell-types/cta-link-cell.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { CtaLink, CtaLinkProps } from "@purpurds/cta-link";
+import { Cell, RowData } from "@tanstack/react-table";
+
+import { EmptyCell } from "./empty-cell";
+
+export type CtaLinkCellProps<TData> = {
+  cell: Cell<TData, unknown>;
+};
+
+export const CtaLinkCell = <TData extends RowData>({ cell }: CtaLinkCellProps<TData>) => {
+  const value = cell.getValue<CtaLinkProps>();
+
+  if (!value) {
+    return <EmptyCell />;
+  }
+
+  const { variant, children, ...props } = value;
+
+  return (
+    <CtaLink variant={variant} {...props}>
+      {children}
+    </CtaLink>
+  );
+};

package/src/cell-types/date-cell.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Paragraph } from "@purpurds/paragraph";
+import { Cell, RowData } from "@tanstack/react-table";
+import c from "classnames/bind";
+
+import styles from "../table.module.scss";
+import { EmptyCell } from "./empty-cell";
+const cx = c.bind(styles);
+
+export type DateCellProps<TData> = {
+  cell: Cell<TData, unknown>;
+};
+
+export const DateCell = <TData extends RowData>({ cell }: DateCellProps<TData>) => {
+  const dateString = cell.getValue<string>();
+
+  if (!dateString) {
+    return <EmptyCell />;
+  }
+
+  const showTime = cell.column.columnDef.meta?.showTime || true;
+
+  const dateObj = new Date(dateString);
+  const date = dateObj.toLocaleDateString("sv-SE");
+  const time = dateObj.toLocaleTimeString("sv-SE", { hour: "2-digit", minute: "2-digit" });
+
+  return (
+    <Paragraph className={cx("purpur-table-row-cell__date")}>
+      {date}
+      <span>{showTime ? ` ${time}` : null}</span>
+    </Paragraph>
+  );
+};

package/src/cell-types/empty-cell.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+import { Paragraph } from "@purpurds/paragraph";
+
+export const EmptyCell = () => {
+  return <Paragraph>-</Paragraph>;
+};

package/src/cell-types/error-message-cell.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { IconError } from "@purpurds/icon/error";
+import { Paragraph } from "@purpurds/paragraph";
+import { Cell, RowData } from "@tanstack/react-table";
+import c from "classnames/bind";
+
+import styles from "../table.module.scss";
+import { EmptyCell } from "./empty-cell";
+const cx = c.bind(styles);
+
+export type ErrorAlertMessageProps<TData> = {
+  cell: Cell<TData, unknown>;
+};
+
+export const ErrorAlertMessageCell = <TData extends RowData>({
+  cell,
+}: ErrorAlertMessageProps<TData>) => {
+  const message = cell.getValue<string>();
+
+  if (!message) {
+    return <EmptyCell />;
+  }
+
+  return (
+    <div className={cx("purpur-table-row-cell__error-message")}>
+      <IconError data-testid="error-icon" />
+      <Paragraph>{message}</Paragraph>
+    </div>
+  );
+};

package/src/cell-types/icon-text-cell.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Cell, RowData } from "@tanstack/react-table";
+import c from "classnames/bind";
+
+import styles from "../table.module.scss";
+import { EmptyCell } from "./empty-cell";
+const cx = c.bind(styles);
+
+export type IconTextCellProps<TData> = {
+  cell: Cell<TData, unknown>;
+};
+
+type CellValue = { icon: React.ReactNode; text?: string };
+
+export const IconTextCell = <TData extends RowData>({ cell }: IconTextCellProps<TData>) => {
+  const value = cell.getValue<CellValue>();
+
+  if (!value) {
+    return <EmptyCell />;
+  }
+
+  const { icon, text } = value;
+
+  return (
+    <div className={cx("purpur-table-row-cell__icon-text")}>
+      {icon}
+      {text && text}
+    </div>
+  );
+};

package/src/cell-types/lead-text-cell.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Paragraph } from "@purpurds/paragraph";
+import { Cell, RowData } from "@tanstack/react-table";
+
+import { EmptyCell } from "./empty-cell";
+
+export type LeadTextCellProps<TData> = {
+  cell: Cell<TData, unknown>;
+};
+
+export const LeadTextCell = <TData extends RowData>({ cell }: LeadTextCellProps<TData>) => {
+  const value = cell.getValue<string>();
+
+  if (!value) {
+    return <EmptyCell />;
+  }
+
+  return <Paragraph variant="paragraph-100-bold">{value}</Paragraph>;
+};

package/src/cell-types/link-cell.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { Link, LinkProps } from "@purpurds/link";
+import { Tooltip } from "@purpurds/tooltip";
+import { Cell, RowData } from "@tanstack/react-table";
+import c from "classnames/bind";
+
+import styles from "../table.module.scss";
+import useTruncatedTooltip from "../use-truncated-hook";
+import { pxToRemString } from "../utils/unit-conversions";
+import { EmptyCell } from "./empty-cell";
+const cx = c.bind(styles);
+
+export type LinkCellProps<TData> = {
+  cell: Cell<TData, unknown>;
+};
+
+export const LinkCell = <TData extends RowData>({ cell }: LinkCellProps<TData>) => {
+  const value = cell.getValue<LinkProps>();
+  const { divRef, showPopover, onMouseLeave, onMouseEnter } = useTruncatedTooltip(cell);
+
+  if (!value) {
+    return <EmptyCell />;
+  }
+
+  const { children, href, variant, ...props } = value;
+
+  const widthInRemString = pxToRemString(cell.column.getSize());
+
+  const content = (
+    <div
+      ref={divRef}
+      className={cx("purpur-table-row-cell__truncate")}
+      style={{
+        minWidth: widthInRemString,
+        maxWidth: widthInRemString,
+      }}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      <Link variant={variant} href={href} {...props}>
+        {children}
+      </Link>
+    </div>
+  );
+
+  return (
+    <Tooltip
+      position="top"
+      align="center"
+      triggerElement={content}
+      // @ts-expect-error open does not exist on tooltip but gets passed down to radix tooltip with ...props
+      open={showPopover}
+      contentClassName={cx("purpur-table-row-cell__tooltip-content")}
+    >
+      {children}
+    </Tooltip>
+  );
+};

package/src/cell-types/number-cell.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Paragraph } from "@purpurds/paragraph";
+import { Cell, RowData } from "@tanstack/react-table";
+import c from "classnames/bind";
+
+import styles from "../table.module.scss";
+import { EmptyCell } from "./empty-cell";
+const cx = c.bind(styles);
+
+export type NumberCellProps<TData> = {
+  cell: Cell<TData, unknown>;
+};
+
+export const NumberCell = <TData extends RowData>({ cell }: NumberCellProps<TData>) => {
+  const text = cell.getValue<string>();
+  const rightAlignCell = cell.column.columnDef.meta?.numberCellAlignment === "right";
+
+  if (!text) {
+    return <EmptyCell />;
+  }
+
+  return (
+    <Paragraph className={cx({ "purpur-table-row-cell__right-align": rightAlignCell })}>
+      {text}
+    </Paragraph>
+  );
+};

package/src/cell-types/row-selection-cell.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Checkbox } from "@purpurds/checkbox";
+import { Cell, RowData } from "@tanstack/react-table";
+import c from "classnames/bind";
+
+import styles from "../table.module.scss";
+const cx = c.bind(styles);
+
+export type RowSelectionCellProps<TData extends RowData> = {
+  cell: Cell<TData, unknown>;
+};
+
+export const RowSelectionCell = <TData extends RowData>({ cell }: RowSelectionCellProps<TData>) => (
+  <Checkbox
+    id={cell.id}
+    className={cx("purpur-table-row-cell__row-selection")}
+    onChange={cell.row.getToggleSelectedHandler()}
+    checked={cell.row.getIsSelected()}
+    disabled={!cell.row.getCanSelect()}
+    aria-label={cell.column.columnDef.meta?.rowSelectionAriaLabels?.row}
+  />
+);

package/src/cell-types/row-toggle-cell.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Cell, RowData } from "@tanstack/react-table";
+import c from "classnames/bind";
+
+import styles from "../table.module.scss";
+const cx = c.bind(styles);
+
+export type RowToggleCellProps<TData extends RowData> = {
+  cell: Cell<TData, unknown>;
+};
+
+export const RowToggleCell = <TData extends RowData>({ cell }: RowToggleCellProps<TData>) => (
+  <input
+    id={cell.id}
+    className={cx("purpur-table-row-cell__row-toggle")}
+    type="radio"
+    onChange={cell.row.getToggleSelectedHandler()}
+    checked={cell.row.getIsSelected()}
+    aria-checked={cell.row.getIsSelected()}
+    disabled={!cell.row.getCanSelect()}
+    aria-label={cell.column.columnDef.meta?.rowSelectionAriaLabels?.row}
+  />
+);

package/src/cell-types/toggle-cell.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Toggle, ToggleProps } from "@purpurds/toggle";
+import { Cell, RowData } from "@tanstack/react-table";
+
+import { EmptyCell } from "./empty-cell";
+
+export type ToggleCellProps<TData> = {
+  cell: Cell<TData, unknown>;
+};
+
+export const ToggleCell = <TData extends RowData>({ cell }: ToggleCellProps<TData>) => {
+  const toggleProps = cell.getValue<ToggleProps>();
+
+  if (!toggleProps) {
+    return <EmptyCell />;
+  }
+
+  return <Toggle {...toggleProps} />;
+};

package/src/cell-types/warning-message-cell.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { IconAlert } from "@purpurds/icon/alert";
+import { Paragraph } from "@purpurds/paragraph";
+import { Cell, RowData } from "@tanstack/react-table";
+import c from "classnames/bind";
+
+import styles from "../table.module.scss";
+import { EmptyCell } from "./empty-cell";
+const cx = c.bind(styles);
+
+export type WarningAlertMessageProps<TData> = {
+  cell: Cell<TData, unknown>;
+};
+
+export const WarningAlertMessageCell = <TData extends RowData>({
+  cell,
+}: WarningAlertMessageProps<TData>) => {
+  const message = cell.getValue<string>();
+
+  if (!message) {
+    return <EmptyCell />;
+  }
+
+  return (
+    <div className={cx("purpur-table-row-cell__warning-message")}>
+      <IconAlert data-testid="alert-icon" />
+      <Paragraph>{message}</Paragraph>
+    </div>
+  );
+};

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export default styles;
+}