start mantine v7 upgrades

KevinVandy · Sep 18, 2023 · a0616fb · a0616fb
1 parent 076bab8
commit a0616fb
Show file tree

Hide file tree

Showing 9 changed files with 486 additions and 907 deletions.
diff --git a/apps/mantine-react-table-docs/components/mdx/SampleCodeSnippet.tsx b/apps/mantine-react-table-docs/components/mdx/SampleCodeSnippet.tsx
@@ -1,8 +1,7 @@
-import { Prism, type PrismProps } from '@mantine/prism';
+import { CodeHighlight, type CodeHighlightProps } from '@mantine/code-highlight';
 import { Code, Paper, useMantineTheme } from '@mantine/core';
-import { type Language } from 'prism-react-renderer';
 
-interface Props extends Partial<PrismProps> {
+interface Props extends CodeHighlightProps {
   children: string;
 }
 
@@ -13,31 +12,18 @@ export const SampleCodeSnippet = (props: Props) => {
     return <Code color={primaryColor} fz="0.9em" {...props} />;
   }
 
-  if (props.noCopy) {
-    return (
-      <Prism
-        {...props}
-        language={
-          props.language ??
-          (props?.className?.replace(/language-/, '') as Language)
-        }
-        styles={{
-          code: {
-            backgroundColor: 'transparent !important',
-            padding: 0,
-          },
-        }}
-      />
-    );
+  if (!props.withCopyButton) {
+    return <CodeHighlight code={props.children} />;
   }
 
   return (
-    <Paper radius="sm" shadow="sm" withBorder={!props.noCopy}>
-      <Prism
+    <Paper radius="sm" shadow="sm" withBorder={props.withCopyButton}>
+      <CodeHighlight
         {...props}
+        code={props.children}
         language={
           props.language ??
-          (props?.className?.replace(/language-/, '') as Language)
+          (props?.className?.replace(/language-/, ''))
         }
       />
     </Paper>

diff --git a/apps/mantine-react-table-docs/components/mdx/SourceCodeSnippet.tsx b/apps/mantine-react-table-docs/components/mdx/SourceCodeSnippet.tsx
@@ -1,6 +1,8 @@
 import { useState, useEffect } from 'react';
-import { Box, Flex, Divider, Button, Select, Tooltip } from '@mantine/core';
-import { Prism } from '@mantine/prism';
+import { Box, Flex, Button, Select, Tooltip } from '@mantine/core';
+import {
+  CodeHighlightTabs,
+} from '@mantine/code-highlight';
 import {
   IconBrandTypescript,
   IconBrandJavascript,
@@ -207,46 +209,34 @@ export const SourceCodeSnippet = ({
           <Component />
         </>
       )}
-      <Prism.Tabs defaultValue={defaultTS ? 'ts' : 'js'}>
-        <Prism.TabsList>
-          <Prism.Tab value="ts" icon={<IconBrandTypescript />}>
-            TypeScript
-          </Prism.Tab>
-          {javaScriptCode && (
-            <Prism.Tab value="js" icon={<IconBrandJavascript />}>
-              JavaScript
-            </Prism.Tab>
-          )}
-          {legacyCode && (
-            <Prism.Tab value="legacy" icon={<IconCode />}>
-              Legacy Props API
-            </Prism.Tab>
-          )}
-          {apiCode && (
-            <Prism.Tab value="api" icon={<IconApi />}>
-              Back-end API
-            </Prism.Tab>
-          )}
-        </Prism.TabsList>
-        <Prism.Panel withLineNumbers language="tsx" value="ts">
-          {typeScriptCode}
-        </Prism.Panel>
-        {javaScriptCode && (
-          <Prism.Panel withLineNumbers language="jsx" value="js">
-            {javaScriptCode}
-          </Prism.Panel>
-        )}
-        {legacyCode && (
-          <Prism.Panel withLineNumbers language="tsx" value="legacy">
-            {legacyCode}
-          </Prism.Panel>
-        )}
-        {apiCode && (
-          <Prism.Panel withLineNumbers language="typescript" value="api">
-            {apiCode}
-          </Prism.Panel>
-        )}
-      </Prism.Tabs>
+      <CodeHighlightTabs
+        code={[
+          {
+            fileName: 'TS',
+            code: typeScriptCode,
+            language: 'tsx',
+            icon: <IconBrandTypescript />,
+          },
+          javaScriptCode && {
+            fileName: 'JS',
+            code: javaScriptCode,
+            language: 'jsx',
+            icon: <IconBrandJavascript />,
+          },
+          legacyCode && {
+            fileName: 'Legacy',
+            code: legacyCode,
+            language: 'tsx',
+            icon: <IconCode />,
+          },
+          apiCode && {
+            fileName: 'API',
+            code: apiCode,
+            language: 'typescript',
+            icon: <IconApi />,
+          },
+        ].filter(Boolean)}
+      />
     </Box>
   );
 };
diff --git a/apps/mantine-react-table-docs/package.json b/apps/mantine-react-table-docs/package.json
@@ -14,18 +14,15 @@
   },
   "dependencies": {
     "@docsearch/js": "3.5.2",
-    "@emotion/react": "^11.11.1",
-    "@emotion/server": "^11.11.0",
     "@faker-js/faker": "^8.0.2",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@mantine/core": "^6.0.20",
-    "@mantine/dates": "^6.0.20",
-    "@mantine/hooks": "^6.0.20",
-    "@mantine/modals": "^6.0.20",
-    "@mantine/next": "^6.0.20",
-    "@mantine/prism": "6.0.20",
+    "@mantine/code-highlight": "^7.0.0",
+    "@mantine/core": "^7.0.0",
+    "@mantine/dates": "^7.0.0",
+    "@mantine/hooks": "^7.0.0",
+    "@mantine/modals": "^7.0.0",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@next/mdx": "^13.4.19",
@@ -44,10 +41,10 @@
   },
   "devDependencies": {
     "@types/node": "^20.6.2",
-    "@types/react": "^18.2.21",
+    "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.7.0",
-    "@typescript-eslint/parser": "^6.7.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.2",
+    "@typescript-eslint/parser": "^6.7.2",
     "eslint": "8.49.0",
     "eslint-config-next": "13.4.19",
     "next-plausible": "^3.11.1",

diff --git a/apps/mantine-react-table-docs/pages/_app.tsx b/apps/mantine-react-table-docs/pages/_app.tsx
@@ -1,4 +1,7 @@
 import '../styles/globals.css';
+import '@mantine/code-highlight/styles.css';
+import '@mantine/core/styles.css';
+import '@mantine/dates/styles.css';
 import { useState } from 'react';
 import { type AppProps } from 'next/app';
 import Head from 'next/head';
@@ -27,9 +30,9 @@ function App({ Component, pageProps }: AppProps) {
     pathname === '/about' ||
     pathname === '/changelog';
 
-  const isMobile = useMediaQuery('(max-width: 900px)');
-  const isDesktop = useMediaQuery('(min-width: 1500px)');
-  const isXLDesktop = useMediaQuery('(min-width: 1800px)');
+  const isMobile = !!useMediaQuery('(max-width: 900px)');
+  const isDesktop = !!useMediaQuery('(min-width: 1500px)');
+  const isXLDesktop = !!useMediaQuery('(min-width: 1800px)');
 
   const [navOpen, setNavOpen] = useState(false);
 

diff --git a/apps/mantine-react-table-docs/pages/_document.tsx b/apps/mantine-react-table-docs/pages/_document.tsx
@@ -1,15 +1,13 @@
 import Document, { Head, Html, Main, NextScript } from 'next/document';
-import { createGetInitialProps } from '@mantine/next';
-
-const getInitialProps = createGetInitialProps();
+import { ColorSchemeScript } from '@mantine/core';
 
 export default class _Document extends Document {
-  static getInitialProps = getInitialProps;
-
   render() {
     return (
       <Html>
-        <Head />
+        <Head>
+          <ColorSchemeScript defaultColorScheme="auto" />
+        </Head>
         <body>
           <Main />
           <NextScript />

diff --git a/apps/mantine-react-table-docs/postcss.config.cjs b/apps/mantine-react-table-docs/postcss.config.cjs
@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: {
+    'postcss-preset-mantine': {},
+    'postcss-simple-vars': {
+      variables: {
+        'mantine-breakpoint-xs': '36em',
+        'mantine-breakpoint-sm': '48em',
+        'mantine-breakpoint-md': '62em',
+        'mantine-breakpoint-lg': '75em',
+        'mantine-breakpoint-xl': '88em',
+      },
+    },
+  },
+};
diff --git a/package.json b/package.json
@@ -31,5 +31,5 @@
   "engines": {
     "node": ">=14.0.0"
   },
-  "packageManager": "pnpm@8.5.1"
+  "packageManager": "pnpm@8.7.6"
 }
diff --git a/packages/mantine-react-table/package.json b/packages/mantine-react-table/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0",
+  "version": "2.0.0-alpha.0",
   "license": "MIT",
   "name": "mantine-react-table",
   "description": "A fully featured Mantine implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -62,11 +62,10 @@
   "devDependencies": {
     "@babel/core": "^7.22.20",
     "@babel/preset-react": "^7.22.15",
-    "@emotion/react": "^11.11.1",
     "@faker-js/faker": "^8.0.2",
-    "@mantine/core": "^6.0.20",
-    "@mantine/dates": "^6.0.20",
-    "@mantine/hooks": "^6.0.20",
+    "@mantine/core": "^7.0.0",
+    "@mantine/dates": "^7.0.0",
+    "@mantine/hooks": "^7.0.0",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-node-resolve": "^15.2.1",
     "@rollup/plugin-typescript": "^11.1.3",
@@ -82,10 +81,10 @@
     "@storybook/testing-library": "^0.2.1",
     "@tabler/icons-react": "2.34.0",
     "@types/node": "^20.6.2",
-    "@types/react": "^18.2.21",
+    "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.7.0",
-    "@typescript-eslint/parser": "^6.7.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.2",
+    "@typescript-eslint/parser": "^6.7.2",
     "@vitejs/plugin-react": "^4.0.4",
     "dayjs": "^1.11.9",
     "eslint": "^8.49.0",
@@ -107,13 +106,12 @@
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.8.4",
     "@tanstack/react-table": "8.10.0",
-    "@tanstack/react-virtual": "3.0.0-beta.60"
+    "@tanstack/react-virtual": "3.0.0-alpha.0"
   },
   "peerDependencies": {
-    "@emotion/react": ">=11",
-    "@mantine/core": "^6.0",
-    "@mantine/dates": "^6.0",
-    "@mantine/hooks": "^6.0",
+    "@mantine/core": "^7",
+    "@mantine/dates": "^7",
+    "@mantine/hooks": "^7",
     "@tabler/icons-react": ">=2.23.0",
     "react": ">=18.0",
     "react-dom": ">=18.0"