create css styleguide

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`, 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,
+}}
+```

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"
   }
 }

packages/mantine-react-table/package.json

@@ -115,9 +115,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"

packages/mantine-react-table/src/body/MRT_TableBody.module.css

@@ -0,0 +1,6 @@
+.root {
+  display: var(--mrt-table-body-display);
+  height: var(--mrt-table-body-height);
+  minheight: var(--mrt-table-body-minHeight);
+  position: relative;
+}

packages/mantine-react-table/src/body/MRT_TableBody.tsx

@@ -10,7 +10,9 @@ import {
   type MRT_VirtualItem,
   type MRT_Virtualizer,
 } from '../types';
-import { funcValue, styleValue } from '../funcValue';
+import { funcValue } 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>;
@@ -133,15 +135,16 @@ export const MRT_TableBody = <TData extends Record<string, any> = {}>({
     <Box
       component="tbody"
       {...tableBodyProps}
-      style={(theme) => ({
-        display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
-        height: rowVirtualizer
+      className={clsx('mrt-table-body', classes.root)}
+      __vars={{
+        '--mrt-table-body-display':
+          layoutMode === 'grid' ? 'grid' : undefined,
+        '--mrt-table-body-height': rowVirtualizer
           ? `${rowVirtualizer.getTotalSize()}px`
-          : 'inherit',
-        minHeight: !rows.length ? '100px' : undefined,
-        position: 'relative',
-        ...styleValue(tableBodyProps, theme),
-      })}
+          : '',
+        '--mrt-table-body-min-height': !rows.length ? '100px' : undefined,
+        ...tableBodyProps?.__vars,
+      }}
     >
       {creatingRow && createDisplayMode === 'row' && (
         <MRT_TableBodyRow table={table} row={creatingRow} rowIndex={-1} />

packages/mantine-react-table/src/typings.d.ts

@@ -0,0 +1 @@
+declare module "*.module.css";