feat: mantine

.prettierrc.json

@@ -8,22 +8,5 @@
   "semi": false,
   "bracketSpacing": true,
   "arrowParens": "always",
-  "endOfLine": "lf",
-  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
-  "importOrderParserPlugins": ["typescript", "jsx", "classProperties", "decorators-legacy"],
-  "importOrder": [
-    "^react$",
-    "",
-    "<BUILTIN_MODULES>",
-    "<THIRD_PARTY_MODULES>",
-    "",
-    "^@/[^/]+(/.*)?$",
-    "",
-    "^(?!.*[.](css|less)$)[./].*$",
-    "",
-    ".*\\.(css|less)$"
-  ],
-  "importOrderSeparation": true,
-  "importOrderSortSpecifiers": true,
-  "importOrderCombineTypeAndValueImports": true
+  "endOfLine": "lf"
 }

eslint.config.js

@@ -1,5 +1,6 @@
 import js from '@eslint/js'
 import prettierConfig from 'eslint-config-prettier'
+import importPlugin from 'eslint-plugin-import'
 import prettierPlugin from 'eslint-plugin-prettier'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
@@ -19,6 +20,7 @@ export default [
       'react-hooks': reactHooks,
       'react-refresh': reactRefresh,
       prettier: prettierPlugin,
+      import: importPlugin,
     },
     languageOptions: {
       ecmaVersion: 2020,
@@ -29,7 +31,18 @@ export default [
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      'prettier/prettier': ['error'],
+      'prettier/prettier': ['error', { endOfLine: 'auto' }],
+      'import/order': [
+        'error',
+        {
+          groups: [['builtin', 'external'], 'internal', ['parent', 'sibling', 'index']],
+          'newlines-between': 'always',
+          alphabetize: {
+            order: 'asc',
+            caseInsensitive: true,
+          },
+        },
+      ],
     },
   },
   prettierConfig,

package.json

@@ -14,23 +14,28 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
+    "@mantine/core": "^8.3.1",
+    "@mantine/hooks": "^8.3.1",
     "react": "^19.1.1",
     "react-dom": "^19.1.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",
-    "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
-    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react-swc": "^4.0.0",
     "eslint": "^9.33.0",
     "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",
+    "less": "^4.4.1",
+    "postcss": "^8.5.6",
+    "postcss-preset-mantine": "^1.18.0",
+    "postcss-simple-vars": "^7.0.1",
     "prettier": "^3.6.2",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.39.1",

postcss.config.mjs

@@ -0,0 +1,14 @@
+export default {
+  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',
+      },
+    },
+  },
+};

src/index.css

@@ -0,0 +1 @@
+@import "@mantine/core/styles.css";

src/main.tsx

@@ -1,13 +1,24 @@
+import { createTheme, MantineProvider } from '@mantine/core'
 import { StrictMode } from 'react'
-
 import { createRoot } from 'react-dom/client'
 
 import Home from '@/pages/home/index'
 
 import './index.css'
 
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <Home />
-  </StrictMode>,
-)
+const theme = createTheme({
+  /** Put your mantine theme override here */
+})
+
+function App() {
+  return (
+    <StrictMode>
+      <MantineProvider theme={theme}>
+        <Home />
+      </MantineProvider>
+    </StrictMode>
+  )
+}
+
+const root = createRoot(document.getElementById('root')!)
+root.render(<App />)

src/pages/home/index.tsx

@@ -1,3 +1,4 @@
+import { Button } from '@mantine/core'
 import { useEffect, useState } from 'react'
 
 export default function Home() {
@@ -8,5 +9,9 @@ export default function Home() {
   }, [])
   console.log(num)
 
-  return <div>home</div>
+  return (
+    <div>
+      <Button variant='filled'>Button</Button>;
+    </div>
+  )
 }