mantine8 migration

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -48,7 +48,7 @@ body:
     attributes:
       label: Minimal, Reproducible Example - (Optional, but Recommended)
       description: |
-        Please add a link to a minimal reproduction. This can really speed up the diagnosis of the problem! A Code Sandbox is preferable, but simple code snippets are also acceptable here. Feel free to fork any of the official CodeSandbox examples: https://github.com/KevinVandy/mantine-react-table/tree/main/apps/mantine-react-table-docs/examples
+        Please add a link to a minimal reproduction. This can really speed up the diagnosis of the problem! A Code Sandbox is preferable, but simple code snippets are also acceptable here. Feel free to fork any of the official CodeSandbox examples: https://github.com/KevinVandy/mantine-react-table/tree/v2/apps/mantine-react-table-docs/examples
       placeholder: |
         e.g. Code Sandbox, Stackblitz, or relevant code snippets.
     validations:

.npmrc

@@ -1 +1,2 @@
+prefer-workspace-packages=true
 @fortawesome:registry=https://registry.npmjs.org

.vscode/settings.json

@@ -0,0 +1,7 @@
+{"cssVariables.lookupFiles": [
+  "**/*.css",
+  "**/*.scss",
+  "**/*.sass",
+  "**/*.less",
+  "node_modules/@mantine/core/esm/index.css"
+]}

CONTRIBUTING.md

@@ -33,18 +33,30 @@ pnpm i
 pnpm storybook
 ```
 
-The Storybook site will open on `port 6006` by default.
+The Storybook site will open on `port 6007` by default.
 
 #### Run the Docs for Local Development
 
 ```bash
 pnpm docs:dev
 ```
 
-The Docs site will open on `port 3000` by default.
+The Docs site will open on `port 3001` by default.
 
 > Note: If you are contributing a new locale and are trying to test it in the docs site, you will need to run `pnpm lib:build-locales` and then `pnpm docs:dev` before it can be imported.
 
+#### See Library Live Changes While Running Docs
+
+If you are just using Storybook for local development you don't need to do this, but if you want to see library code changes while running the docs you'll need to have the library run in watch mode:
+
+In a 2nd terminal, run:
+
+```bash
+pnpm lib:dev
+```
+
+Alternatively, you can just run `pnpm dev` in just 1 terminal and both the library and docs will run in dev mode for development
+
 #### Fully Build the Library
 
 ```bash

README.md

@@ -18,7 +18,7 @@ V1 released July 18, 2023
 <a href="https://star-history.com/#kevinvandy/mantine-react-table&Date" target="_blank">
   <img alt="" src="https://badgen.net/github/stars/KevinVandy/mantine-react-table?color=blue" />
 </a>
-<a href="https://github.com/KevinVandy/mantine-react-table/blob/main/LICENSE" target="_blank">
+<a href="https://github.com/KevinVandy/mantine-react-table/blob/v2/LICENSE" target="_blank">
   <img alt="" src="https://badgen.net/github/license/KevinVandy/mantine-react-table?color=blue" />
 </a>
 <a href="http://makeapullrequest.com" target="_blank">
@@ -185,6 +185,6 @@ _Open in [Code Sandbox](https://codesandbox.io/s/simple-mantine-react-table-exam
 
 PRs are Welcome, but please discuss in [GitHub Discussions](https://github.com/KevinVandy/mantine-react-table/discussions) or the [Discord Server](https://discord.gg/5wqyRx6fnm) first if it is a large change!
 
-Read the [Contributing Guide](https://github.com/KevinVandy/mantine-react-table/blob/main/CONTRIBUTING.md) to learn how to run this project locally.
+Read the [Contributing Guide](https://github.com/KevinVandy/mantine-react-table/blob/v2/CONTRIBUTING.md) to learn how to run this project locally.
 
 <!-- Use the FORCE Luke! -->

apps/mantine-react-table-docs/components/mdx/Blockquote.module.css

@@ -1,7 +1,7 @@
 .blockquote {
-  border-left: solid 8px var(--TODO);
+  border-left: solid 8px var(--mantine-primary-color-filled);
   padding: 8px 16px;
-  background-color: var(--TODO);
+  background-color: var(--mantine-primary-color-light);
   border-radius: 4px;
   margin: 3rem;
   @media (max-width: 720px) {

apps/mantine-react-table-docs/components/mdx/Contributors.module.css

@@ -38,7 +38,7 @@
 
     & img {
       transform: scale(1.01);
-      transition: transform 100ms ease-in-out;
+      transition: transform 150ms ease-in-out;
     }
   }
 }

apps/mantine-react-table-docs/components/mdx/FeatureTable.tsx

@@ -54,12 +54,12 @@ const data = [
   {
     feature: 'Column Hiding',
     mrt: true,
-    mdt: false,
+    mdt: true,
   },
   {
     feature: 'Column Ordering (DnD)',
     mrt: true,
-    mdt: false,
+    mdt: true,
   },
   {
     feature: 'Column Pinning (Freezing)',
@@ -69,7 +69,7 @@ const data = [
   {
     feature: 'Column Resizing',
     mrt: true,
-    mdt: false,
+    mdt: true,
   },
   {
     feature: 'Column Spanning',
@@ -129,7 +129,7 @@ const data = [
   {
     feature: 'Header Groups and Footers',
     mrt: true,
-    mdt: false,
+    mdt: true,
   },
   {
     feature: 'Localization (i18n)',
@@ -215,7 +215,7 @@ export const FeatureTable = () => {
       enableColumnActions={false}
       enableBottomToolbar={false}
       enableTopToolbar={false}
-      enablePinning
+      enableColumnPinning
       initialState={{
         sorting: [{ id: 'feature', desc: false }],
         density: 'xs',

apps/mantine-react-table-docs/components/mdx/InstallCommand.tsx

@@ -2,10 +2,10 @@ import { useState } from 'react';
 import { Tabs } from '@mantine/core';
 import { SampleCodeSnippet } from './SampleCodeSnippet';
 
-const packagesString =
-  'mantine-react-table @mantine/core@6.0.21 @mantine/hooks@6.0.21 @mantine/dates@6.0.21 @emotion/react @tabler/icons-react dayjs';
+const defaultPackageString =
+  'mantine-react-table@beta @mantine/core @mantine/hooks @mantine/dates @tabler/icons-react clsx dayjs';
 
-export function InstallCommand() {
+export function InstallCommand({ packagesString = defaultPackageString }) {
   const tabValues = [
     {
       value: 'npm',
@@ -31,7 +31,7 @@ export function InstallCommand() {
 
   return (
     <>
-      <Tabs defaultValue="npm">
+      <Tabs defaultValue="npm" p="0" mt="-2rem">
         <Tabs.List>
           {tabValues.map((tabValue) => (
             <Tabs.Tab key={tabValue.value} value={tabValue.value}>

apps/mantine-react-table-docs/components/mdx/LinkCards.module.css

@@ -36,7 +36,7 @@
 
     & img {
       transform: scale(1.01);
-      transition: transform 100ms ease-in-out;
+      transition: transform 150ms ease-in-out;
     }
   }
 }

apps/mantine-react-table-docs/components/mdx/LinkHeading.module.css

@@ -12,13 +12,12 @@
   gap: 16px;
   align-items: center;
   margin: 2rem auto;
-  justify-content: center;
   font-size: 22px;
 }
 
 .actionIcon {
   opacity: 0.2;
-  transition: all 100ms ease;
+  transition: all 150ms ease;
   color: '#e9ecef';
   background-color: transparent;
 

apps/mantine-react-table-docs/components/mdx/SampleCodeSnippet.tsx

@@ -2,13 +2,17 @@ import {
   CodeHighlight,
   type CodeHighlightProps,
 } from '@mantine/code-highlight';
-import { Code, Paper, useMantineTheme } from '@mantine/core';
+import { Code, Paper, rgba, useMantineTheme } from '@mantine/core';
 
 export function SampleCodeSnippet(props: CodeHighlightProps) {
-  const { primaryColor } = useMantineTheme();
+  const theme = useMantineTheme();
 
   if (!props.language && !props.className) {
-    return <Code color={primaryColor} fz="0.9em" {...props} />;
+    return (
+      <Code color={rgba(theme.colors[theme.primaryColor][7], 0.2)} fz="0.9em">
+        {props.code}
+      </Code>
+    );
   }
 
   return (

apps/mantine-react-table-docs/components/mdx/SourceCodeSnippet.module.css

@@ -9,6 +9,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
+  align-items: center;
 }
 
 .wrapper2 {
@@ -38,5 +39,5 @@
 }
 
 .colorSchemeSelect {
-  max-width: 90px;
+  max-width: 110px;
 }