feat: Precomposed table based on Tanstack table

.eslintrc.js

@@ -1,4 +1,6 @@
 // https://robertcooper.me/post/using-eslint-and-prettier-in-a-typescript-project
+const path = require("path");
+
 module.exports = {
   env: {
     browser: true,
@@ -93,9 +95,15 @@ module.exports = {
     "import/no-extraneous-dependencies": [
       "error",
       {
-        // Dependencies must be specified in `devDependencies` in the monorepo root
+        // Dependencies must be specified in `devDependencies` or `peerDependencies` in the monorepo root or individual packages
         devDependencies: true,
-        packageDir: __dirname,
+        includeInternal: true,
+        packageDir: [
+          __dirname,
+          path.resolve(__dirname, "./packages/components"),
+          path.resolve(__dirname, "./packages/data-viz"),
+        ],
+        peerDependencies: true,
       },
     ],
     "import/prefer-default-export": "off",

SECURITY.md

@@ -1,2 +1,3 @@
 ## Reporting Security Issues
-If you believe you have found a security issue, please responsibly disclose by contacting us at [[email protected]](mailto:[email protected]).
+
+If you believe you have found a security issue, please responsibly disclose by contacting us at [[email protected]](mailto:[email protected]).

lerna.json

@@ -2,7 +2,7 @@
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "useNx": true,
   "version": "independent",
-  "npmClient": "npm",
+  "npmClient": "yarn",
   "stream": true,
   "packages": ["packages/*"],
   "command": {

packages/components/jest.setup.ts

@@ -1,2 +1,13 @@
 import "@testing-library/jest-dom";
 import "../../intersectionObserverMock";
+
+// Mock ResizeObserver
+global.ResizeObserver = class ResizeObserver {
+  constructor(private callback: ResizeObserverCallback) {}
+
+  observe() {}
+
+  unobserve() {}
+
+  disconnect() {}
+};

packages/components/package.json

@@ -70,11 +70,13 @@
     "@mui/icons-material": "^5.15.3",
     "@mui/lab": "^5.0.0-alpha.159",
     "@mui/material": "^5.15.3",
+    "@tanstack/react-table": "^8.21.3",
     "react": ">=17.0.1",
     "react-dom": ">=17.0.1"
   },
   "devDependencies": {
     "@figma/code-connect": "^1.3.4",
+    "@tanstack/react-table": "^8.21.3",
     "@types/node": "^24.3.0",
     "@types/react": "^18.2.46",
     "@types/react-dom": "^18.2.18",

packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap

@@ -39,7 +39,7 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
             <button
               aria-hidden="false"
               aria-label="Search Button"
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-3px3eh-MuiButtonBase-root-MuiIconButton-root"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1b01nn3-MuiButtonBase-root-MuiIconButton-root"
               icon="Search"
               tabindex="0"
               type="button"

packages/components/src/core/Banner/__tests__/__snapshots__/banner.test.tsx.snap

@@ -31,7 +31,7 @@ exports[`<Banner /> Default story renders snapshot 1`] = `
   </div>
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-f0g2hw-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-8w7yl1-MuiButtonBase-root-MuiIconButton-root"
     icon="XMark"
     tabindex="0"
     type="button"

packages/components/src/core/ButtonIcon/style.ts

@@ -123,10 +123,6 @@ const small = (props: ButtonIconExtraProps): SerializedStyles => {
   const spaces = getSpaces(props);
 
   return css`
-    ${sdsType !== "tertiary"
-      ? `margin: 0 ${spaces?.xxs}px ${spaces?.xxs}px 0;`
-      : ""}
-
     .MuiSvgIcon-root {
       height: ${iconSizes?.s.height}px;
       width: ${iconSizes?.s.width}px;

packages/components/src/core/CellBasic/__storybook__/constants.tsx

@@ -5,8 +5,8 @@ import {
   ButtonIconsGroupRight,
   EmptySlotBottom,
   EmptySlotRight,
-  StyledButton,
 } from "./style";
+import Button from "src/core/Button";
 
 export const CELL_BASIC_EXCLUDED_CONTROLS = [
   "icon",
@@ -18,6 +18,7 @@ export const CELL_BASIC_EXCLUDED_CONTROLS = [
   "tertiaryText",
   "tertiaryTextWrapLineCount",
   "shouldShowTooltipOnHover",
+  "shouldShowUndelineOnHover",
   "shouldTextWrap",
   "tooltipProps",
   "horizontalAlign",
@@ -55,28 +56,28 @@ export const CELL_BASIC_PRIMARY_TEXT_COMPONENT_SLOT_RIGHT_OPTIONS = [
     key="componentSlotRight-1"
   />,
   <ButtonIconsGroupRight key="componentSlotRight-2">
-    <StyledButton
+    <Button
       aria-label="Bar Chart Vertical 4"
       icon="BarChartVertical4"
       sdsSize="small"
       sdsType="primary"
       sdsStyle="icon"
     />
-    <StyledButton
+    <Button
       aria-label="Copy"
       icon="Copy"
       sdsSize="small"
       sdsType="primary"
       sdsStyle="icon"
     />
-    <StyledButton
+    <Button
       aria-label="Search Lines Horizontal 3"
       icon="SearchLinesHorizontal3"
       sdsSize="small"
       sdsType="primary"
       sdsStyle="icon"
     />
-    <StyledButton
+    <Button
       aria-label="Download"
       icon="Download"
       sdsSize="small"
@@ -112,35 +113,35 @@ export const CELL_BASIC_PRIMARY_TEXT_COMPONENT_SLOT_BOTTOM_OPTIONS = [
     />
   </div>,
   <ButtonIconsGroupBottom key="componentSlotBottom-2">
-    <StyledButton
+    <Button
       aria-label="Bar Chart Vertical 4"
       icon="BarChartVertical4"
       sdsSize="small"
       sdsType="tertiary"
       sdsStyle="icon"
     />
-    <StyledButton
+    <Button
       aria-label="Copy"
       icon="Copy"
       sdsSize="small"
       sdsType="tertiary"
       sdsStyle="icon"
     />
-    <StyledButton
+    <Button
       aria-label="Search Lines Horizontal 3"
       icon="SearchLinesHorizontal3"
       sdsSize="small"
       sdsType="tertiary"
       sdsStyle="icon"
     />
-    <StyledButton
+    <Button
       aria-label="Tree Horizontal"
       icon="TreeHorizontal"
       sdsSize="small"
       sdsType="tertiary"
       sdsStyle="icon"
     />
-    <StyledButton
+    <Button
       aria-label="Download"
       icon="Download"
       sdsSize="small"

packages/components/src/core/CellBasic/__storybook__/index.stories.tsx

@@ -14,6 +14,12 @@ import { TestDemo } from "./stories/test";
 
 export default {
   argTypes: {
+    component: {
+      control: { type: "select" },
+      defaultValue: { summary: "td" },
+      description: "The HTML element to render as (defaults to 'td')",
+      options: ["td", "div", "th", "span"],
+    },
     horizontalAlign: {
       control: { type: "select" },
       defaultValue: { summary: "left" },
@@ -85,6 +91,11 @@ export default {
       defaultValue: { summary: "true" },
       description: "Show tooltip on hover",
     },
+    shouldShowUndelineOnHover: {
+      control: { type: "boolean" },
+      defaultValue: { summary: "false" },
+      description: "Show underline for the primary text on hover",
+    },
     shouldTextWrap: {
       control: { type: "boolean" },
       defaultValue: { summary: "true" },
@@ -124,6 +135,17 @@ export default {
   },
   component: CellBasic,
   parameters: {
+    axe: {
+      disabledRules: [
+        "aria-input-field-name",
+        "aria-required-children",
+        "aria-required-parent",
+        "button-name",
+        "color-contrast",
+        "list",
+        "listitem",
+      ],
+    },
     controls: {
       expanded: true,
     },
@@ -140,6 +162,7 @@ export const Default = {
     secondaryText: "Secondary Text",
     secondaryTextWrapLineCount: 1,
     shouldShowTooltipOnHover: true,
+    shouldShowUndelineOnHover: false,
     shouldTextWrap: true,
     tabularNums: false,
     tertiaryText: "Tertiary Text",

packages/components/src/core/CellBasic/__storybook__/style.ts

@@ -1,5 +1,4 @@
 import styled from "@emotion/styled";
-import Button from "src/core/Button";
 import {
   CommonThemeProps,
   fontBodyXxxs,
@@ -19,19 +18,23 @@ export const ButtonIconsGroupRight = styled("div")`
       height: 100%;
       border-left: solid 1px ${semanticColors?.base?.divider};
       padding-left: ${spaces?.xs}px;
+
+      button {
+        margin: 0;
+      }
     `;
   }}
 `;
 
 export const ButtonIconsGroupBottom = styled("div")`
-  display: inline-flex;
-`;
+  ${(props: CommonThemeProps) => {
+    const spaces = getSpaces(props);
 
-export const StyledButton = styled(Button)`
-  svg {
-    width: 12px;
-    height: 12px;
-  }
+    return `
+      display: inline-flex;
+      gap: ${spaces?.xs}px;
+    `;
+  }}
 `;
 
 export const EmptySlotRight = styled("div")`

packages/components/src/core/CellBasic/__tests__/__snapshots__/index.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`<CellBasic /> Default story renders snapshot 1`] = `
   <tbody>
     <tr>
       <td
-        class="css-11b4fo2"
+        class="css-1n3e3zg"
         data-mui-internal-clone-element="true"
         data-testid="CellBasic"
         tabindex="0"
@@ -27,7 +27,7 @@ exports[`<CellBasic /> Default story renders snapshot 1`] = `
               </div>
             </div>
             <span
-              class="css-7ykbdx"
+              class="css-96arrn"
             >
               Secondary Text
             </span>