@purpurds/table 0.0.1

package/src/utils/unit-conversions.spec.ts

@@ -0,0 +1,92 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { pxToRem, pxToRemString } from "./unit-conversions";
+
+describe("unit-conversions", () => {
+  // Store the original getComputedStyle
+  const originalGetComputedStyle = window.getComputedStyle;
+
+  // Mock for getComputedStyle
+  let mockGetPropertyValue: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    // Setup the mock for getComputedStyle
+    mockGetPropertyValue = vi.fn().mockImplementation((prop) => {
+      // Default mock behavior - return empty string for unknown properties
+      if (prop === "--purpur-rescale") {
+        return "1"; // Default to 1 for 16px rem base
+      }
+      return "";
+    });
+
+    window.getComputedStyle = vi.fn().mockImplementation(
+      () =>
+        ({
+          getPropertyValue: mockGetPropertyValue,
+        } as unknown as CSSStyleDeclaration)
+    );
+  });
+
+  afterEach(() => {
+    // Restore original getComputedStyle
+    window.getComputedStyle = originalGetComputedStyle;
+    vi.resetAllMocks();
+  });
+
+  describe("pxToRem", () => {
+    it("should convert px to rem with rescale factor 1 (16px base)", () => {
+      // Mock 16px base (--purpur-rescale: 1)
+      mockGetPropertyValue.mockImplementation((prop) => (prop === "--purpur-rescale" ? "1" : ""));
+
+      expect(pxToRem(16)).toBe(1);
+      expect(pxToRem(32)).toBe(2);
+      expect(pxToRem(8)).toBe(0.5);
+    });
+
+    it("should convert px to rem with rescale factor 1.6 (10px base)", () => {
+      // Mock 10px base (--purpur-rescale: 1.6)
+      mockGetPropertyValue.mockImplementation((prop) => (prop === "--purpur-rescale" ? "1.6" : ""));
+
+      expect(pxToRem(16)).toBeCloseTo(1.6);
+      expect(pxToRem(10)).toBeCloseTo(1);
+      expect(pxToRem(20)).toBeCloseTo(2);
+    });
+
+    it("should handle empty CSS variable value and default to 1", () => {
+      // Mock missing CSS variable
+      mockGetPropertyValue.mockImplementation(() => "");
+
+      expect(pxToRem(16)).toBe(1);
+      expect(pxToRem(32)).toBe(2);
+    });
+
+    it("should handle non-numeric CSS variable value and default to 1", () => {
+      // Mock invalid CSS variable value
+      mockGetPropertyValue.mockImplementation((prop) =>
+        prop === "--purpur-rescale" ? "invalid" : ""
+      );
+
+      expect(pxToRem(16)).toBe(1);
+    });
+  });
+
+  describe("pxToRemString", () => {
+    it("should return a string with 'rem' unit for rescale factor 1", () => {
+      // Mock 16px base (--purpur-rescale: 1)
+      mockGetPropertyValue.mockImplementation((prop) => (prop === "--purpur-rescale" ? "1" : ""));
+
+      expect(pxToRemString(16)).toBe("1rem");
+      expect(pxToRemString(32)).toBe("2rem");
+      expect(pxToRemString(8)).toBe("0.5rem");
+    });
+
+    it("should return a string with 'rem' unit for rescale factor 1.6", () => {
+      // Mock 10px base (--purpur-rescale: 1.6)
+      mockGetPropertyValue.mockImplementation((prop) => (prop === "--purpur-rescale" ? "1.6" : ""));
+
+      // For 10px base, 16px should be 1.6rem
+      expect(pxToRemString(16)).toBe("1.6rem");
+      expect(pxToRemString(10)).toBe("1rem");
+    });
+  });
+});

package/src/utils/unit-conversions.ts

@@ -0,0 +1,30 @@
+/**
+ * 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 const pxToRem = (pxValue: number): number => {
+  const purpurRescale = Number(
+    getComputedStyle(document.documentElement).getPropertyValue("--purpur-rescale") || "1"
+  );
+
+  // For 16px base (rescale=1): divide by 16
+  // For 10px base (rescale=1.6): divide by 16 and then multiply by 1.6 = divide by 10
+  const conversionFactor = 16 / (purpurRescale || 1);
+  return pxValue / conversionFactor;
+};
+
+/**
+ * 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 const pxToRemString = (pxValue: number): string => {
+  return `${pxToRem(pxValue)}rem`;
+};

package/vitest.setup.ts

@@ -0,0 +1,60 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup } from "@testing-library/react";
+import { afterEach, expect, vi } from "vitest";
+import * as axeMatchers from "vitest-axe/matchers";
+
+import "vitest-axe/extend-expect";
+import "vitest-canvas-mock";
+
+process.env.TZ = "CET";
+
+expect.extend(matchers);
+expect.extend(axeMatchers);
+
+afterEach(() => {
+  cleanup();
+});
+
+// Mock TableRowCellSkeleton to fix "unsupported style property" warning
+vi.mock("./src/table-row-cell-skeleton.tsx", () => ({
+  default: () => {
+    return React.createElement(
+      "td",
+      { className: "mocked-skeleton-cell", style: { padding: "1rem" } },
+      [
+        // Add a div with the correct test ID that the test is looking for
+        React.createElement("div", {
+          "data-testid": "purpur-table-cell-skeleton",
+          key: "skeleton",
+        }),
+      ]
+    );
+  },
+}));
+
+const ResizeObserverMock = vi.fn(() => ({
+  disconnect: vi.fn(),
+  observe: vi.fn(),
+  takeRecords: vi.fn(),
+  unobserve: vi.fn(),
+}));
+vi.stubGlobal("ResizeObserver", ResizeObserverMock);
+
+const IntersectionObserverMock = vi.fn(() => ({
+  disconnect: vi.fn(),
+  observe: vi.fn(),
+  takeRecords: vi.fn(),
+  unobserve: vi.fn(),
+}));
+vi.stubGlobal("IntersectionObserver", IntersectionObserverMock);
+
+const matchMedia = vi.fn((query) => ({
+  matches: true,
+  media: query,
+  onchange: null,
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn(),
+}));
+
+vi.stubGlobal("matchMedia", matchMedia);