[Part 1] Replace Mantine with MUI

.eslintrc.js

@@ -1,10 +1,10 @@
 module.exports = {
-  extends: ['plugin:prettier/recommended', 'mantine'],
+  extends: ['plugin:prettier/recommended', 'plugin:@typescript-eslint/recommended'],
   env: {
     browser: true,
     es2021: true,
   },
-  plugins: ['react', 'testing-library'],
+  plugins: ['react', 'testing-library', '@typescript-eslint'],
   overrides: [
     {
       files: ['**/?(*.)+(spec|test).[jt]s?(x)'],
@@ -53,5 +53,11 @@ module.exports = {
         modifiers: ['unused'],
       },
     ],
+    'no-restricted-imports': [
+      'error',
+      {
+        patterns: ['@mui/*/*/*'],
+      },
+    ],
   },
 };

docs/next.config.mjs

@@ -29,7 +29,7 @@ const nextConfig = {
     ignoreDuringBuilds: true,
   },
   experimental: {
-    optimizePackageImports: ['@mantine/core', '@mantine/hooks'],
+    optimizePackageImports: ['@mui/material', '@mui/icons-material', '@mui/lab'],
     mdxRs: false,
   },
 };

docs/package.json

@@ -11,16 +11,18 @@
   "dependencies": {
     "@ai-form-toolkit/client": "file:../packages/client",
     "@ai-form-toolkit/server": "file:../packages/server",
-    "@mantine/code-highlight": "^7.3.2",
-    "@mantine/core": "^7.3.2",
-    "@mantine/dates": "^7.3.2",
-    "@mantine/form": "^7.3.2",
-    "@mantine/hooks": "^7.3.2",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
     "@mdx-js/react": "^3.0.0",
+    "@mui/icons-material": "^5.15.4",
+    "@mui/lab": "^5.0.0-alpha.160",
+    "@mui/material": "^5.15.4",
     "@next/bundle-analyzer": "^14.0.4",
     "@next/mdx": "^14.0.4",
     "@rjsf/core": "^5.15.1",
+    "@rjsf/mui": "^5.15.1",
     "@rjsf/utils": "^5.15.1",
+    "@rjsf/validator-ajv6": "^5.15.1",
     "@rjsf/validator-ajv8": "^5.15.1",
     "@tabler/icons-react": "^2.44.0",
     "@types/mdx": "^2.0.10",
@@ -30,6 +32,7 @@
     "next": "14.0.4",
     "openai": "^4.23.0",
     "react": "18.2.0",
+    "react-code-blocks": "^0.1.5",
     "react-dom": "18.2.0",
     "rehype-image-size": "^1.0.0",
     "rehype-img-size": "^1.0.1",
@@ -46,9 +49,6 @@
     "@types/node": "^20.10.4",
     "@types/react": "18.2.45",
     "babel-loader": "^9.1.3",
-    "postcss": "^8.4.32",
-    "postcss-preset-mantine": "1.11.1",
-    "postcss-simple-vars": "^7.0.1",
     "typescript": "5.3.3"
   }
 }

docs/src/MDXProviderWrapper.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { HTMLAttributes, ReactNode } from 'react';
+import { MDXProvider } from '@mdx-js/react';
+import { Typography } from '@mui/material';
+
+const MDXProviderWrapper = ({ children }: { children: ReactNode }) => {
+  const components = {
+    h1: (props: HTMLAttributes<HTMLElement>) => <Typography component="h1" variant="h4" marginY={2} {...props} />,
+    h2: (props: HTMLAttributes<HTMLElement>) => <Typography component="h2" variant="h5" marginY={2} {...props} />,
+    h3: (props: HTMLAttributes<HTMLElement>) => <Typography component="h3" variant="h6" marginY={2} {...props} />,
+    p: (props: HTMLAttributes<HTMLElement>) => <Typography component="p" variant="body1" marginY={2} {...props} />,
+  };
+
+  return <MDXProvider components={components}>{children}</MDXProvider>;
+};
+
+export default MDXProviderWrapper;

docs/src/MuiThemeWrapper.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { CssBaseline } from '@mui/material';
+
+const MuiThemeWrapper = ({ children }: { children: ReactNode }) => {
+  const theme = createTheme({
+    components: {
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            minWidth: 0, // Disable minimum width for buttons
+            textTransform: 'none', // Disable auto-capitalization of button text
+          },
+        },
+      },
+      MuiTab: {
+        styleOverrides: {
+          root: {
+            textTransform: 'none', // Disable auto-capitalization of tab text
+          },
+        },
+      },
+    },
+  });
+
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      {children}
+    </ThemeProvider>
+  );
+};
+
+export default MuiThemeWrapper;

docs/src/app/docs-layout.tsx

@@ -1,22 +1,67 @@
 'use client';
 
 import { ReactNode } from 'react';
-import { Box, rem } from '@mantine/core';
+import { Box } from '@mui/material';
+import { GlobalStyles } from '@mui/system';
+import { Theme } from '@mui/material/styles';
 
 import Layout from '@/layout';
 
-import './docs-styles.css';
-
 type Props = {
   children: ReactNode;
 };
 
 export default function DocsLayout({ children }: Props) {
+  const docsMarkdownStyles = (theme: Theme) => ({
+    figure: {
+      margin: 0,
+    },
+    pre: {
+      overflowX: 'auto',
+      borderRadius: theme.shape.borderRadius,
+      padding: `${theme.spacing(1)} ${theme.spacing(0.5)}`,
+    },
+    'span[data-highlighted-line]': {
+      borderBottomColor: '#9333EA',
+      backgroundColor: '#6B21A880',
+      fontWeight: 700,
+      color: '#E9D5FF',
+    },
+    // TODO: Use CodeBlock component instead. Configure it on MDXProviderWrapper.
+    code: {
+      counterReset: 'line',
+      fontSize: '0.8125rem',
+    },
+    'code > [data-line]::before': {
+      counterIncrement: 'line',
+      content: 'counter(line)',
+      display: 'inline-block',
+      width: theme.spacing(1),
+      marginRight: theme.spacing(1.5),
+      textAlign: 'right',
+      color: 'gray',
+    },
+    'code[data-line-numbers-max-digits="2"] > [data-line]::before': {
+      width: theme.spacing(2),
+    },
+    'code[data-line-numbers-max-digits="3"] > [data-line]::before': {
+      width: theme.spacing(3),
+    },
+    img: {
+      width: '100%',
+      height: 'auto',
+      border: `2px solid ${theme.palette.grey[200]}`,
+    },
+  });
+
   return (
-    <Layout>
-      <Box maw={600} mx="auto" pb={rem(30)} px={rem(20)}>
-        {children}
-      </Box>
-    </Layout>
+    <>
+      <GlobalStyles styles={docsMarkdownStyles} />
+      <Layout>
+        <Box maxWidth={600} mx="auto" paddingTop={1} paddingBottom={4} paddingX={2.5}>
+          {children}
+        </Box>
+      </Layout>
+    </>
   );
 }