chore: move Table to new package

packages/components/table/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@vibe/table",
+  "version": "3.0.0",
+  "description": "Vibe sub-package for table components",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mondaycom/vibe.git",
+    "directory": "packages/components/table"
+  },
+  "bugs": {
+    "url": "https://github.com/mondaycom/vibe/issues"
+  },
+  "homepage": "https://github.com/mondaycom/vibe#readme",
+  "author": "monday.com",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./mockedClassNames": {
+      "import": "./dist/mocked_classnames/index.js",
+      "default": "./dist/mocked_classnames/index.js"
+    }
+  },
+  "scripts": {
+    "build": "rollup -c && mock_classnames=on rollup -c",
+    "test": "vitest run",
+    "lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\""
+  },
+  "dependencies": {
+    "@vibe/core": "3.82.4",
+    "@vibe/icon": "3.0.9",
+    "@vibe/icon-button": "3.0.0",
+    "@vibe/icons": "1.15.0",
+    "@vibe/layout": "3.0.2",
+    "@vibe/shared": "3.0.8",
+    "@vibe/tooltip": "3.0.0",
+    "@vibe/typography": "3.0.0",
+    "classnames": "^2.5.1",
+    "es-toolkit": "^1.39.10",
+    "react-virtualized-auto-sizer": "^1.0.24",
+    "react-window": "^1.8.11"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.1.2",
+    "@types/react-window": "^1.8.8",
+    "@vibe/config": "3.0.5",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "typescript": "^4.7.3",
+    "vitest": "^1.6.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  },
+  "sideEffects": [
+    "*.scss",
+    "*.css",
+    "*.scss.js",
+    "*.css.js"
+  ],
+  "eslintConfig": {
+    "extends": [
+      "../../../node_modules/@vibe/config/.eslintrc.cjs"
+    ]
+  }
+}

packages/components/table/rollup.config.mjs

@@ -0,0 +1,4 @@
+import config from "@vibe/config/rollup.config";
+
+export default config;
+

packages/core/src/components/Table/Table/Table.module.scss → packages/components/table/src/Table/Table.module.scss

@@ -41,3 +41,4 @@
     --sticky-cell-box-shadow: 3px 0 4px rgba(0, 0, 0, 0.1);
   }
 }
+

packages/core/src/components/Table/Table/Table.tsx → packages/components/table/src/Table/Table.tsx

@@ -8,18 +8,16 @@ import React, {
   useState
 } from "react";
 import cx from "classnames";
-import { type VibeComponentProps, withStaticProps } from "../../../types";
+import { type VibeComponentProps, withStaticProps, getTestId, ComponentDefaultTestId, ComponentVibeId } from "@vibe/shared";
 import { type TableHeaderProps } from "../TableHeader/TableHeader";
 import { type TableBodyProps } from "../TableBody/TableBody";
 import { getTableRowLayoutStyles } from "./tableHelpers";
-import { getTestId } from "../../../tests/test-ids-utils";
-import { ComponentDefaultTestId, ComponentVibeId } from "../../../tests/constants";
 import { RowHeights, RowSizes as RowSizesEnum } from "./TableConsts";
 import { type RowSizes } from "./Table.types";
 import styles from "./Table.module.scss";
 import { TableProvider } from "../context/TableContext/TableContext";
 import { TableRowMenuProvider } from "../context/TableRowMenuContext/TableRowMenuContext";
-import useMergeRef from "../../../hooks/useMergeRef";
+import { useMergeRef } from "@vibe/shared";
 import { type TableProviderValue } from "../context/TableContext/TableContext.types";
 import { type TableRowMenuProviderValue } from "../context/TableRowMenuContext/TableRowMenuContext.types";
 import { type SubIcon } from "@vibe/icon";
@@ -217,3 +215,4 @@ interface TableStaticProps {
 }
 
 export default withStaticProps<TableProps, TableStaticProps>(Table, { sizes: RowSizesEnum });
+

packages/core/src/components/Table/Table/Table.types.ts → packages/components/table/src/Table/Table.types.ts

@@ -1 +1,2 @@
 export type RowSizes = "small" | "medium" | "large";
+

packages/core/src/components/Table/Table/TableConsts.ts → packages/components/table/src/Table/TableConsts.ts

@@ -14,3 +14,4 @@ export const RowHeights = {
   [RowSizes.MEDIUM]: 40,
   [RowSizes.LARGE]: 48
 };
+

packages/core/src/components/Table/Table/__tests__/Table.test.tsx → packages/components/table/src/Table/__tests__/Table.test.tsx

@@ -270,3 +270,4 @@ describe("Table", () => {
     });
   });
 });
+

packages/core/src/components/Table/Table/__tests__/TableHelpers.test.tsx → packages/components/table/src/Table/__tests__/TableHelpers.test.tsx

@@ -40,3 +40,4 @@ describe("tableHelpers", () => {
     });
   });
 });
+

packages/core/src/components/Table/Table/__tests__/tableTestUtils.tsx → packages/components/table/src/Table/__tests__/tableTestUtils.tsx

@@ -47,3 +47,4 @@ export function mockUseTableRowMenu() {
 
   return mockUseTableRowMenu;
 }
+

packages/components/table/src/Table/index.ts

@@ -0,0 +1,4 @@
+export { default as Table, type TableProps, type TableColumn, type TableLoadingStateType } from "./Table";
+export * from "./Table.types";
+export { RowSizes, RowHeights, SKELETON_ROWS_AMOUNT } from "./TableConsts";
+

packages/core/src/components/Table/Table/tableHelpers.ts → packages/components/table/src/Table/tableHelpers.ts

@@ -1,10 +1,10 @@
 import { type AriaAttributes } from "react";
 import type React from "react";
 import { type TableColumn, type TableLoadingStateType } from "./Table";
-import { Sort } from "@vibe/icons";
+import { Sort, SortAscending, SortDescending } from "@vibe/icons";
 import { type TableHeaderCellProps } from "../TableHeaderCell/TableHeaderCell";
-import { SortAscending, SortDescending } from "@vibe/icons";
-import { SkeletonType } from "../../Skeleton/SkeletonConstants";
+
+export type SkeletonType = "circle" | "rectangle" | "text";
 
 export function generateWidth(width: TableColumn["width"]): string {
   if (typeof width === "number") {
@@ -58,12 +58,12 @@ export function getAriaSort(sortState: TableHeaderCellProps["sortState"]): AriaA
 
 export function getSkeletonType(loadingStateType: TableLoadingStateType): SkeletonType {
   if (loadingStateType === "circle") {
-    return SkeletonType.CIRCLE;
+    return "circle";
   }
   if (loadingStateType === "rectangle") {
-    return SkeletonType.RECTANGLE;
+    return "rectangle";
   }
-  return SkeletonType.TEXT;
+  return "text";
 }
 
 export function getLoadingTypeForCell(
@@ -74,3 +74,4 @@ export function getLoadingTypeForCell(
     ? (["long-text", "medium-text"] as TableLoadingStateType[])[rowIndex % 2]
     : loadingStateType;
 }
+

packages/core/src/components/Table/TableBody/TableBody.module.scss → packages/components/table/src/TableBody/TableBody.module.scss

@@ -1,3 +1,4 @@
 .tableBody {
   height: 100%;
 }
+

packages/core/src/components/Table/TableBody/TableBody.tsx → packages/components/table/src/TableBody/TableBody.tsx

@@ -1,15 +1,13 @@
 import React, { type ReactElement, type ComponentProps, forwardRef } from "react";
 import cx from "classnames";
-import { type VibeComponentProps } from "../../../types";
+import { type VibeComponentProps, getTestId, ComponentDefaultTestId } from "@vibe/shared";
 import TableRow, { type TableRowProps } from "../TableRow/TableRow";
-import type VirtualizedList from "../../VirtualizedList/VirtualizedList";
+import type VirtualizedList from "../VirtualizedList/VirtualizedList";
 import styles from "./TableBody.module.scss";
 import { useTable } from "../context/TableContext/TableContext";
 import TableCellSkeleton from "../TableCellSkeleton/TableCellSkeleton";
 import { SKELETON_ROWS_AMOUNT } from "../Table/TableConsts";
 import { getLoadingTypeForCell } from "../Table/tableHelpers";
-import { getTestId } from "../../../tests/test-ids-utils";
-import { ComponentDefaultTestId } from "../../../tests/constants";
 
 export interface TableBodyProps extends VibeComponentProps {
   /**
@@ -58,3 +56,4 @@ const TableBody = forwardRef(
 );
 
 export default TableBody;
+

packages/core/src/components/Table/TableCell/TableCell.module.scss → packages/components/table/src/TableCell/TableCell.module.scss

@@ -11,3 +11,4 @@
     box-shadow: var(--sticky-cell-box-shadow);
   }
 }
+

packages/core/src/components/Table/TableCell/TableCell.tsx → packages/components/table/src/TableCell/TableCell.tsx

@@ -1,10 +1,8 @@
 import React, { forwardRef } from "react";
-import { type VibeComponentProps } from "../../../types";
+import { type VibeComponentProps, getTestId, ComponentDefaultTestId } from "@vibe/shared";
 import { Text } from "@vibe/typography";
 import styles from "./TableCell.module.scss";
 import cx from "classnames";
-import { getTestId } from "../../../tests/test-ids-utils";
-import { ComponentDefaultTestId } from "../../../tests/constants";
 
 export interface TableCellProps extends VibeComponentProps {
   /**
@@ -47,3 +45,4 @@ const TableCell = forwardRef(
 );
 
 export default TableCell;
+

packages/core/src/components/Table/TableCellSkeleton/TableCellSkeleton.module.scss → packages/components/table/src/TableCellSkeleton/TableCellSkeleton.module.scss

@@ -25,3 +25,4 @@
     }
   }
 }
+

packages/core/src/components/Table/TableCellSkeleton/TableCellSkeleton.tsx → packages/components/table/src/TableCellSkeleton/TableCellSkeleton.tsx

@@ -1,10 +1,9 @@
 import React from "react";
 import cx from "classnames";
 import TableCell from "../TableCell/TableCell";
-import Skeleton from "../../Skeleton/Skeleton";
+import { Skeleton } from "@vibe/core";
 import styles from "./TableCellSkeleton.module.scss";
-import { type VibeComponentProps } from "../../../types";
-import { getStyle } from "../../../helpers/typesciptCssModulesHelper";
+import { type VibeComponentProps, getStyle } from "@vibe/shared";
 import { type TableLoadingStateType } from "../Table/Table";
 import { getSkeletonType } from "../Table/tableHelpers";
 import { camelCase } from "es-toolkit";
@@ -35,3 +34,4 @@ const TableCellSkeleton: React.FC<TableCellSkeletonProps> = ({ type = "long-text
 };
 
 export default TableCellSkeleton;
+

packages/core/src/components/Table/TableContainer/TableContainer.module.scss → packages/components/table/src/TableContainer/TableContainer.module.scss

@@ -12,3 +12,4 @@
     height: 100%;
   }
 }
+

packages/core/src/components/Table/TableContainer/TableContainer.tsx → packages/components/table/src/TableContainer/TableContainer.tsx

@@ -1,8 +1,7 @@
 import React, { forwardRef, useRef } from "react";
 import { TableContainerProvider } from "../context/TableContainerContext/TableContainerContext";
 import { type TableContainerProps } from "./TableContainer.types";
-import { getTestId } from "../../../tests/test-ids-utils";
-import { ComponentDefaultTestId } from "../../../tests/constants";
+import { getTestId, ComponentDefaultTestId } from "@vibe/shared";
 import cx from "classnames";
 import styles from "./TableContainer.module.scss";
 
@@ -31,3 +30,4 @@ const TableContainer = forwardRef(
 );
 
 export default TableContainer;
+

packages/core/src/components/Table/TableContainer/TableContainer.types.ts → packages/components/table/src/TableContainer/TableContainer.types.ts

@@ -1,5 +1,5 @@
 import type React from "react";
-import { type VibeComponentProps } from "../../../types";
+import { type VibeComponentProps } from "@vibe/shared";
 
 export interface TableContainerProps extends VibeComponentProps {
   /**
@@ -11,3 +11,4 @@ export interface TableContainerProps extends VibeComponentProps {
    */
   children: React.ReactNode;
 }
+

packages/core/src/components/Table/TableHeader/TableHeader.module.scss → packages/components/table/src/TableHeader/TableHeader.module.scss

@@ -22,3 +22,4 @@
     }
   }
 }
+

packages/core/src/components/Table/TableHeader/TableHeader.tsx → packages/components/table/src/TableHeader/TableHeader.tsx

@@ -1,12 +1,9 @@
 import React, { forwardRef } from "react";
-import { type VibeComponentProps } from "../../../types";
+import { type VibeComponentProps, getTestId, ComponentDefaultTestId, useMergeRef } from "@vibe/shared";
 import styles from "./TableHeader.module.scss";
 import { type TableHeaderCellProps } from "../TableHeaderCell/TableHeaderCell";
 import cx from "classnames";
-import { getTestId } from "../../../tests/test-ids-utils";
-import { ComponentDefaultTestId } from "../../../tests/constants";
 import { useTable } from "../context/TableContext/TableContext";
-import useMergeRef from "../../../hooks/useMergeRef";
 
 export interface TableHeaderProps extends VibeComponentProps {
   /**
@@ -39,3 +36,4 @@ const TableHeader = forwardRef(
 );
 
 export default TableHeader;
+

packages/core/src/components/Table/TableHeaderCell/TableHeaderCell.module.scss → packages/components/table/src/TableHeaderCell/TableHeaderCell.module.scss

@@ -60,3 +60,4 @@
     }
   }
 }
+

packages/core/src/components/Table/TableHeaderCell/TableHeaderCell.tsx → packages/components/table/src/TableHeaderCell/TableHeaderCell.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useState } from "react";
 import cx from "classnames";
-import { type VibeComponentProps } from "../../../types";
+import { type VibeComponentProps, getTestId, ComponentDefaultTestId, getStyle } from "@vibe/shared";
 import styles from "./TableHeaderCell.module.scss";
 import { Icon, type SubIcon } from "@vibe/icon";
 import { IconButton } from "@vibe/icon-button";
@@ -9,9 +9,6 @@ import { Text } from "@vibe/typography";
 import { Flex } from "@vibe/layout";
 import { getAriaSort, getNextSortState, getSortIcon } from "../Table/tableHelpers";
 import { Tooltip } from "@vibe/tooltip";
-import { getTestId } from "../../../tests/test-ids-utils";
-import { ComponentDefaultTestId } from "../../../tests/constants";
-import { getStyle } from "../../../helpers/typesciptCssModulesHelper";
 
 export interface TableHeaderCellProps extends VibeComponentProps {
   /**
@@ -119,3 +116,4 @@ const TableHeaderCell = forwardRef(
 );
 
 export default TableHeaderCell;
+

packages/core/src/components/Table/TableRow/TableRow.module.scss → packages/components/table/src/TableRow/TableRow.module.scss

@@ -1,5 +1,3 @@
-@import "../../../styles/states";
-
 .tableRow {
   height: var(--table-row-size);
   display: grid;
@@ -25,3 +23,4 @@
     }
   }
 }
+

packages/core/src/components/Table/TableRow/TableRow.tsx → packages/components/table/src/TableRow/TableRow.tsx

@@ -1,9 +1,6 @@
 import React, { forwardRef, useCallback, useRef } from "react";
-import { type VibeComponentProps } from "../../../types";
+import { type VibeComponentProps, getTestId, ComponentDefaultTestId, useMergeRef } from "@vibe/shared";
 import { type TableCellProps } from "../TableCell/TableCell";
-import useMergeRef from "../../../hooks/useMergeRef";
-import { getTestId } from "../../../tests/test-ids-utils";
-import { ComponentDefaultTestId } from "../../../tests/constants";
 import cx from "classnames";
 import styles from "./TableRow.module.scss";
 import { useTableRowMenu } from "../context/TableRowMenuContext/TableRowMenuContext";
@@ -56,3 +53,4 @@ const TableRow = forwardRef(
 );
 
 export default TableRow;
+

packages/core/src/components/Table/TableRowMenu/TableRowMenu.module.scss → packages/components/table/src/TableRowMenu/TableRowMenu.module.scss

@@ -17,3 +17,4 @@
     padding-block: 12px;
   }
 }
+

packages/core/src/components/Table/TableRowMenu/TableRowMenu.tsx → packages/components/table/src/TableRowMenu/TableRowMenu.tsx

@@ -1,13 +1,10 @@
 import React, { forwardRef, useCallback } from "react";
 import cx from "classnames";
-import { getTestId } from "../../../tests/test-ids-utils";
-import { ComponentDefaultTestId } from "../../../tests/constants";
+import { getTestId, ComponentDefaultTestId, getStyle } from "@vibe/shared";
 import styles from "./TableRowMenu.module.scss";
-import MenuButton from "../../MenuButton/MenuButton";
-import { Menu } from "../../Menu";
+import { MenuButton, Menu } from "@vibe/core";
 import { createPortal } from "react-dom";
 import { useTable } from "../context/TableContext/TableContext";
-import { getStyle } from "../../../helpers/typesciptCssModulesHelper";
 import { useTableRowMenu } from "../context/TableRowMenuContext/TableRowMenuContext";
 import { useTableContainer } from "../context/TableContainerContext/TableContainerContext";
 import { type TableMenuProps } from "./TableRowMenu.types";
@@ -68,3 +65,4 @@ const TableRowMenu = forwardRef(
 );
 
 export default TableRowMenu;
+

packages/core/src/components/Table/TableRowMenu/TableRowMenu.types.ts → packages/components/table/src/TableRowMenu/TableRowMenu.types.ts

@@ -1,4 +1,4 @@
-import { type VibeComponentProps } from "../../../types";
+import { type VibeComponentProps } from "@vibe/shared";
 import type React from "react";
 
 export interface TableMenuProps extends VibeComponentProps {
@@ -11,3 +11,4 @@ export interface TableMenuProps extends VibeComponentProps {
    */
   children?: React.ReactNode;
 }
+