Merge branch 'v2' into toolbars

KevinVandy · Sep 29, 2023 · 66d6858 · 66d6858
2 parents 31e5be3 + 42aa8da
commit 66d6858
Show file tree

Hide file tree

Showing 69 changed files with 786 additions and 555 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "pakwoon.css-modules-intellisense",
+    "henriiik.vscode-sort",
+    "csstools.postcss",
+    "unifiedjs.vscode-mdx",
+    "dbaeumer.vscode-eslint"
+  ]
+}
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -51,4 +51,23 @@ The Docs site will open on `port 3000` by default.
 pnpm lib:build
 ```
 
-> Note: After building the library, if you are running the docs site locally, it will use the compiled output of the dist folder. This can be annoying if you are trying to test changes to the library in the docs site itself. Just delete the `/dist` folder to test lib changes in the docs site.
+> Note: After building the library, if you are running the docs site locally, it will use the compiled output of the dist folder. This can be annoying if you are trying to test changes to the library in the docs site itself. Just delete the `/dist` folder to test lib changes in the docs site.
+
+## Library Code Style Guide
+
+1. All styles should be written in `.module.css` files with a file name that matches the `component.tsx` file name.
+2. All dynamic styles should be handed with CSS variables (`__vars` prop)
+3. CSS variables should be named `--mrt-<component/element-name>-<property-name>` (e.g. `--mrt-tbody-display`) in order to avoid name collisions with elements down the tree.
+4. Class names in `.module.css` files don't really matter since they get compiled away, but just use all lowercase and hyphenated (e.g. `table-cell`). Just use `.root` for the root element, and use other names that make sense for sub-elements.
+5. All major elements in internal MRT components should have an `mrt-<component/element-name>` class name (e.g. `mrt-table-body-cell`).
+6. Always use the `clsx` utility to assign class names to elements. Always allow for `mantine*Props.className` to be passed in and merged with the internal class names. For example 
+```tsx
+className={clsx('mrt-table-body', classes.root, tableBodyProps.className)}`
+```
+7. When assigning `__vars` or `styles`, don't forget to spread `...mantine*Props.__vars` in order to allow for external variables to be passed in and merged with internal variables. For example
+```tsx
+__vars={{
+  '--mrt-table-body-cell-padding': '10px',
+  ...tableBodyProps?.__vars,
+}}
+```
diff --git a/apps/mantine-react-table-docs/components/navigation/TopBar.tsx b/apps/mantine-react-table-docs/components/navigation/TopBar.tsx
@@ -131,9 +131,9 @@ export const TopBar = ({ navOpen, setNavOpen }: Props) => {
             display: 'flex',
             alignItems: 'center',
             gap: '8px',
-            '@media (max-width: 480px)': {
-              gap: '4px',
-            },
+            // '@media (max-width: 480px)': {
+            //   gap: '4px',
+            // },
           }}
         >
           <Tooltip label="Github">
@@ -172,7 +172,7 @@ export const TopBar = ({ navOpen, setNavOpen }: Props) => {
               onClick={toggleColorScheme}
               size={isMobile ? 'sm' : 'lg'}
             >
-              {true ? <IconSun /> : <IconMoonStars />}
+              {/* {true ? <IconSun /> : <IconMoonStars />} */}
             </ActionIcon>
           </Tooltip>
         </Box>

diff --git a/apps/mantine-react-table-docs/package.json b/apps/mantine-react-table-docs/package.json
@@ -53,9 +53,6 @@
     "postcss-preset-mantine": "^1.7.0",
     "postcss-simple-vars": "^7.0.1",
     "raw-loader": "^4.0.2",
-    "postcss": "^8.4.30",
-    "postcss-preset-mantine": "^1.7.0",
-    "postcss-simple-vars": "^7.0.1",
     "typescript": "5.2.2"
   }
 }
diff --git a/packages/mantine-react-table/.eslintrc b/packages/mantine-react-table/.eslintrc
@@ -1,13 +1,16 @@
 {
   "extends": [
     "eslint:recommended",
-    "plugin:@typescript-eslint/recommended"
+    "plugin:@typescript-eslint/recommended",
+    // "plugin:perfectionist/recommended-natural"
   ],
   "parser": "@typescript-eslint/parser",
   "plugins": [
-    "@typescript-eslint"
+    "@typescript-eslint",
+    // "perfectionist"
   ],
   "rules": {
+    "no-duplicate-imports": "warn",
     "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/ban-types": "off",
     "@typescript-eslint/no-explicit-any": "off",
@@ -19,7 +22,40 @@
         "disallowTypeAnnotations": true,
         "fixStyle": "inline-type-imports"
       }
-    ]
+    ],
+    // "perfectionist/sort-imports": [
+    //   "error",
+    //   {
+    //     "type": "natural",
+    //     "order": "asc",
+    //     "groups": [
+    //       "react",
+    //       "clsx",
+    //       "tanstack",
+    //       "mantine",
+    //       "siblings",
+    //       "sibling-type",
+    //       "parent",
+    //       "parent-type",
+    //       "style"
+    //     ],
+    //     "custom-groups": {
+    //       "value": {
+    //         "react": [
+    //           "react",
+    //           "react-*"
+    //         ],
+    //         "clsx": "clsx",
+    //         "tanstack": "@tanstack/**",
+    //         "mantine": "@mantine/**"
+    //       },
+    //       "type": {
+    //         "react": "react"
+    //       }
+    //     },
+    //     "newlines-between": "never"
+    //   }
+    // ]
   },
   "root": true,
   "ignorePatterns": [

diff --git a/packages/mantine-react-table/package.json b/packages/mantine-react-table/package.json
@@ -88,6 +88,7 @@
     "@vitejs/plugin-react": "^4.1.0",
     "dayjs": "^1.11.10",
     "eslint": "^8.50.0",
+    "eslint-plugin-perfectionist": "^2.1.0",
     "postcss": "^8.4.30",
     "postcss-preset-mantine": "^1.7.0",
     "postcss-simple-vars": "^7.0.1",
@@ -115,9 +116,9 @@
     "clsx": "^2.0.0"
   },
   "peerDependencies": {
-    "@mantine/core": "^7",
-    "@mantine/dates": "^7",
-    "@mantine/hooks": "^7",
+    "@mantine/core": "^7.1",
+    "@mantine/dates": "^7.1",
+    "@mantine/hooks": "^7.1",
     "@tabler/icons-react": ">=2.23.0",
     "react": ">=18.0",
     "react-dom": ">=18.0"

diff --git a/packages/mantine-react-table/src/body/MRT_TableBody.module.css b/packages/mantine-react-table/src/body/MRT_TableBody.module.css
@@ -0,0 +1,33 @@
+.root {
+  position: relative;
+}
+
+.root-grid {
+  display: grid;
+}
+
+.root-no-rows {
+  min-height: 100px;
+}
+
+.root-virtualized {
+  height: calc(var(--mrt-table-body-height) * 1px);
+}
+
+.empty-row-tr-grid {
+  display: grid;
+}
+
+.empty-row-td-grid {
+  display: grid;
+}
+
+.empty-row-td-content {
+  color: var(--mantine-color-gray-3);
+  font-style: italic;
+  max-width: min(100vw, calc(var(--mrt-paper-width) * 1px));
+  padding-bottom: 2rem;
+  padding-top: 2rem;
+  text-align: center;
+  width: 100%;
+}
diff --git a/packages/mantine-react-table/src/body/MRT_TableBody.tsx b/packages/mantine-react-table/src/body/MRT_TableBody.tsx
@@ -3,14 +3,15 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import { Box, Text } from '@mantine/core';
 import { Memo_MRT_TableBodyRow, MRT_TableBodyRow } from './MRT_TableBodyRow';
 import { rankGlobalFuzzy } from '../sortingFns';
-import { getCanRankRows } from '../column.utils';
+import { getCanRankRows, parseFromValuesOrFunc } from '../column.utils';
 import {
   type MRT_Row,
   type MRT_TableInstance,
   type MRT_VirtualItem,
   type MRT_Virtualizer,
 } from '../types';
-import { funcValue, styleValue } from '../funcValue';
+import classes from './MRT_TableBody.module.css';
+import clsx from 'clsx';
 
 interface Props<TData extends Record<string, any> = {}> {
   columnVirtualizer?: MRT_Virtualizer<HTMLDivElement, HTMLTableCellElement>;
@@ -65,9 +66,11 @@ export const MRT_TableBody = <TData extends Record<string, any> = {}>({
     sorting,
   } = getState();
 
-  const tableBodyProps = funcValue(mantineTableBodyProps, { table });
+  const tableBodyProps = parseFromValuesOrFunc(mantineTableBodyProps, {
+    table,
+  });
 
-  const vProps = funcValue(rowVirtualizerProps, { table });
+  const vProps = parseFromValuesOrFunc(rowVirtualizerProps, { table });
 
   const shouldRankRows = useMemo(
     () =>
@@ -133,37 +136,43 @@ export const MRT_TableBody = <TData extends Record<string, any> = {}>({
     <Box
       component="tbody"
       {...tableBodyProps}
-      style={(theme) => ({
-        display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
-        height: rowVirtualizer
-          ? `${rowVirtualizer.getTotalSize()}px`
-          : 'inherit',
-        minHeight: !rows.length ? '100px' : undefined,
-        position: 'relative',
-        ...styleValue(tableBodyProps, theme),
-      })}
+      className={clsx(
+        'mrt-table-body',
+        classes.root,
+        layoutMode === 'grid' && classes['root-grid'],
+        !rows.length && classes['root-no-rows'],
+        rowVirtualizer && classes['root-virtualized'],
+        tableBodyProps?.className,
+      )}
+      __vars={{
+        '--mrt-table-body-height': rowVirtualizer
+          ? `${rowVirtualizer.getTotalSize()}`
+          : undefined,
+        ...tableBodyProps?.__vars,
+      }}
     >
       {creatingRow && createDisplayMode === 'row' && (
         <MRT_TableBodyRow table={table} row={creatingRow} rowIndex={-1} />
       )}
       {!rows.length ? (
-        <tr style={{ display: layoutMode === 'grid' ? 'grid' : 'table-row' }}>
+        <tr
+          className={clsx(
+            'mrt-table-body-row',
+            layoutMode === 'grid' && classes['empty-row-tr-grid'],
+          )}
+        >
           <td
             colSpan={table.getVisibleLeafColumns().length}
-            style={{ display: layoutMode === 'grid' ? 'grid' : 'table-cell' }}
+            className={clsx(
+              'mrt-table-body-cell',
+              layoutMode === 'grid' && classes['empty-row-td-grid'],
+            )}
           >
             {renderEmptyRowsFallback?.({ table }) ?? (
               <Text
-                style={{
-                  color: 'gray',
-                  fontStyle: 'italic',
-                  maxWidth: `min(100vw, ${
-                    tablePaperRef.current?.clientWidth ?? 360
-                  }px)`,
-                  paddingTop: '2rem',
-                  paddingBottom: '2rem',
-                  textAlign: 'center',
-                  width: '100%',
+                className={clsx(classes['empty-row-td-content'])}
+                __vars={{
+                  '--mrt-paper-width': `${tablePaperRef.current?.clientWidth}`,
                 }}
               >
                 {globalFilter || columnFilters.length

diff --git a/packages/mantine-react-table/src/body/MRT_TableBodyCell.tsx b/packages/mantine-react-table/src/body/MRT_TableBodyCell.tsx
@@ -16,13 +16,13 @@ import {
   getCommonCellStyles,
   getIsFirstColumn,
   getIsLastColumn,
+  parseFromValuesOrFunc,
 } from '../column.utils';
 import {
   type MRT_Cell,
   type MRT_TableInstance,
   type MRT_VirtualItem,
 } from '../types';
-import { funcValue } from '../funcValue';
 
 import classes from './MRT_TableBodyCell.module.css';
 
@@ -85,11 +85,11 @@ export const MRT_TableBodyCell = <TData extends Record<string, any> = {}>({
 
   const arg = { cell, column, row, table };
   const tableCellProps = {
-    ...funcValue(mantineTableBodyCellProps, arg),
-    ...funcValue(columnDef.mantineTableBodyCellProps, arg),
+    ...parseFromValuesOrFunc(mantineTableBodyCellProps, arg),
+    ...parseFromValuesOrFunc(columnDef.mantineTableBodyCellProps, arg),
   };
 
-  const skeletonProps = funcValue(mantineSkeletonProps, arg);
+  const skeletonProps = parseFromValuesOrFunc(mantineSkeletonProps, arg);
 
   const [skeletonWidth, setSkeletonWidth] = useState(100);
   useEffect(() => {
@@ -142,8 +142,8 @@ export const MRT_TableBodyCell = <TData extends Record<string, any> = {}>({
   }, [draggingColumn, draggingRow, hoveredColumn, hoveredRow, rowIndex]);
 
   const isEditable =
-    (funcValue(enableEditing, row) &&
-      funcValue(columnDef.enableEditing, row)) !== false;
+    (parseFromValuesOrFunc(enableEditing, row) &&
+      parseFromValuesOrFunc(columnDef.enableEditing, row)) !== false;
 
   const isEditing =
     isEditable &&

diff --git a/packages/mantine-react-table/src/body/MRT_TableBodyCellValue.tsx b/packages/mantine-react-table/src/body/MRT_TableBodyCellValue.tsx
@@ -1,6 +1,6 @@
 import { Highlight, type HighlightProps } from '@mantine/core';
 import { type MRT_Cell, type MRT_TableInstance } from '../types';
-import { funcValue } from '../funcValue';
+import { parseFromValuesOrFunc } from '../column.utils';
 
 const allowedTypes = ['string', 'number'];
 const allowedFilterVariants = ['text', 'autocomplete'];
@@ -23,7 +23,7 @@ export const MRT_TableBodyCellValue = <TData extends Record<string, any> = {}>({
   const { globalFilter, globalFilterFn } = getState();
   const filterValue = column.getFilterValue();
 
-  const highlightProps = funcValue(mantineHighlightProps, {
+  const highlightProps = parseFromValuesOrFunc(mantineHighlightProps, {
     cell,
     column,
     row,

diff --git a/packages/mantine-react-table/src/body/MRT_TableBodyRow.module.css b/packages/mantine-react-table/src/body/MRT_TableBodyRow.module.css
@@ -1,28 +1,41 @@
-.MRT_TableBodyRow {
+.root {
   box-sizing: border-box;
   width: 100%;
   transition: all 100ms ease-in-out;
   display: var(--display);
 }
 
-.MRT_TableBodyRowHover {
-  @mixin hover {
-    &[data-selected="true"] > td {
-      background-color: var(--mantine-primary-color-filled)
+  &[data-selected='true'] {
+    background-color: var(--mantine-primary-color-light);
+  }
+}
+
+.root-grid {
+  display: flex;
+}
+
+.root-hover {
+  &:hover td {
+    &[data-selected='true'] {
+      background-color: var(--mantine-primary-color-light-hover);
     }
-    &[data-selected="false"] > td {
-        @mixin dark {
-          background-color: var(--dark-bg-color);
-        }
-        @mixin light {
-          background-color: var(--light-bg-color);
-        }
+    &[data-selected='false'] {
+      @mixin dark {
+        background-color: var(--mantine-color-gray-light-hover);
+      }
+      @mixin light {
+        background-color: var(--mantine-color-dark-light-hover);
+      }
     }
   }
 }
 
-.MRT_TableBodyRowVirtual {
+.root-virtualized {
   position: absolute;
   top: 0;
   transition: none !important;
 }
+
+.root-dragging {
+  opacity: 0.5;
+}