chore: update dependencies and mantine

package.json

@@ -31,14 +31,14 @@
   },
   "dependencies": {
     "@birdgg/react-github": "0.2.3",
-    "@codemirror/autocomplete": "^6.9.0",
+    "@codemirror/autocomplete": "^6.9.1",
     "@codemirror/commands": "6.2.5",
-    "@codemirror/lang-markdown": "6.2.0",
+    "@codemirror/lang-markdown": "6.2.1",
-    "@codemirror/language": "6.9.0",
+    "@codemirror/language": "6.9.1",
     "@codemirror/language-data": "6.3.1",
     "@codemirror/state": "6.2.1",
     "@codemirror/theme-one-dark": "6.1.2",
-    "@codemirror/view": "6.18.1",
+    "@codemirror/view": "6.20.0",
     "@crossbell/connect-kit": "1.5.14",
     "@crossbell/contract": "1.5.13",
     "@crossbell/indexer": "1.5.13",
@@ -55,16 +55,16 @@
     "@heroicons/react": "2.0.18",
     "@iconify-json/mingcute": "1.1.9",
     "@lezer/highlight": "1.1.6",
-    "@mantine/core": "6.0.20",
+    "@mantine/core": "7.0.0",
-    "@mantine/dates": "6.0.20",
+    "@mantine/dates": "7.0.0",
     "@monaco-editor/react": "4.5.2",
     "@popperjs/core": "2.11.8",
-    "@prisma/client": "5.2.0",
+    "@prisma/client": "5.3.1",
     "@supercharge/request-ip": "1.2.0",
-    "@tanstack/react-query": "4.35.0",
+    "@tanstack/react-query": "4.35.3",
-    "@tanstack/react-query-devtools": "4.35.0",
+    "@tanstack/react-query-devtools": "4.35.3",
-    "@uiw/codemirror-extensions-events": "4.21.13",
+    "@uiw/codemirror-extensions-events": "4.21.15",
-    "@urql/core": "4.1.2",
+    "@urql/core": "4.1.3",
     "ahooks": "3.7.8",
     "aplayer": "^1.10.1",
     "async-lock": "1.4.0",
@@ -73,7 +73,7 @@
     "chroma-js": "2.4.2",
     "clsx": "2.0.0",
     "crossbell": "1.6.4",
-    "dayjs": "1.11.9",
+    "dayjs": "1.11.10",
     "dotenv": "16.3.1",
     "emoji-mart": "5.5.2",
     "fast-average-color": "9.4.0",
@@ -89,13 +89,13 @@
     "jsdom": "22.1.0",
     "jsonfeed-to-rss": "3.0.7",
     "katex": "0.16.8",
-    "langchain": "0.0.150",
+    "langchain": "0.0.153",
     "lottie-react": "2.4.0",
     "mdast-util-to-hast": "12.3.0",
     "mdast-util-toc": "7.0.0",
     "medium-zoom": "1.0.8",
     "mermaid": "10.4.0",
-    "nanoid": "4.0.2",
+    "nanoid": "5.0.1",
     "next": "13.5.2",
     "next-themes": "0.2.1",
     "node-id3": "0.2.6",
@@ -107,18 +107,18 @@
     "prismjs": "1.29.0",
     "qier-progress": "1.0.4",
     "qrcode.react": "3.1.0",
-    "rc-dplayer": "0.1.0",
+    "rc-dplayer": "1.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "7.46.1",
     "react-hot-toast": "2.4.1",
     "react-i18next": "13.2.2",
-    "react-parallax-tilt": "1.7.166",
+    "react-parallax-tilt": "1.7.167",
     "react-popper": "2.3.0",
     "react-sortablejs": "6.1.4",
     "react-string-replace": "1.1.1",
     "react-tweet": "3.1.1",
-    "react-virtuoso": "4.5.1",
+    "react-virtuoso": "4.6.0",
     "refractor": "4.8.1",
     "rehype-autolink-headings": "6.1.1",
     "rehype-infer-description-meta": "1.1.0",
@@ -142,7 +142,7 @@
     "remark-stringify": "10.0.3",
     "remove-markdown": "0.5.0",
     "serialize-javascript": "6.0.1",
-    "sharp": "0.32.5",
+    "sharp": "0.32.6",
     "sortablejs": "1.15.0",
     "swiper": "^10.2.0",
     "tailwind-merge": "1.14.0",
@@ -151,52 +151,55 @@
     "unified": "10.1.2",
     "unist-builder": "4.0.0",
     "unist-util-visit": "5.0.0",
-    "uuid": "9.0.0",
+    "uuid": "9.0.1",
-    "viem": "1.10.9",
+    "viem": "1.11.1",
-    "wagmi": "1.4.1",
+    "wagmi": "1.4.2",
     "zustand": "4.4.1"
   },
   "devDependencies": {
     "@iconify/tailwind": "0.1.3",
-    "@next/bundle-analyzer": "13.4.19",
+    "@next/bundle-analyzer": "13.5.2",
     "@trivago/prettier-plugin-sort-imports": "4.2.0",
     "@types/async-lock": "1.4.0",
     "@types/canvas-confetti": "1.6.1",
     "@types/chroma-js": "2.4.1",
     "@types/cookie": "0.5.2",
-    "@types/hast": "3.0.0",
+    "@types/hast": "3.0.1",
-    "@types/js-yaml": "4.0.5",
+    "@types/js-yaml": "4.0.6",
-    "@types/katex": "0.16.2",
+    "@types/katex": "0.16.3",
     "@types/mdast": "4.0.0",
     "@types/mjml": "4.7.1",
-    "@types/node": "20.6.0",
+    "@types/node": "20.6.3",
     "@types/pangu": "4.0.0",
     "@types/prismjs": "1.26.0",
-    "@types/react": "18.2.21",
+    "@types/react": "18.2.22",
     "@types/react-dom": "18.2.7",
     "@types/react-infinite-scroller": "1.2.3",
     "@types/remove-markdown": "0.3.1",
     "@types/serialize-javascript": "5.0.2",
     "@types/sortablejs": "1.15.2",
     "@types/ua-parser-js": "0.7.37",
-    "@types/uuid": "9.0.3",
+    "@types/uuid": "9.0.4",
-    "autoprefixer": "10.4.15",
+    "autoprefixer": "10.4.16",
     "babel-loader": "9.1.3",
-    "cspell": "7.3.5",
+    "cspell": "7.3.6",
-    "esbuild": "0.19.2",
+    "esbuild": "0.19.3",
-    "esbuild-register": "3.4.2",
+    "esbuild-register": "3.5.0",
     "eslint": "8.49.0",
-    "eslint-config-next": "13.4.19",
+    "eslint-config-next": "13.5.2",
     "eslint-plugin-import": "2.28.1",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-unused-imports": "3.0.0",
     "husky": "8.0.3",
     "lint-staged": "14.0.1",
+    "postcss": "^8.4.30",
     "postcss-import": "15.1.0",
+    "postcss-preset-mantine": "^1.7.0",
     "postcss-prune-var": "1.1.1",
+    "postcss-simple-vars": "^7.0.1",
     "prettier": "3.0.3",
     "prettier-package-json": "2.8.0",
-    "prisma": "5.2.0",
+    "prisma": "5.3.1",
     "tailwindcss": "3.3.3",
     "tailwindcss-variable-colors": "0.0.1",
     "typescript": "5.2.2"

postcss.config.js

@@ -4,5 +4,15 @@ module.exports = {
     tailwindcss: {},
     "postcss-prune-var": { skip: ["node_modules/**"] },
     autoprefixer: {},
+    "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/app/layout.tsx

@@ -6,6 +6,8 @@ import { Toaster } from "react-hot-toast"
 
 import "@crossbell/connect-kit/colors.css"
 import { updateIndexerFetchOptions } from "@crossbell/indexer"
+import { ColorSchemeScript, MantineProvider } from "@mantine/core"
+import "@mantine/core/styles.css"
 
 import "~/css/main.css"
 import { getAcceptLang } from "~/lib/accept-lang"
@@ -20,7 +22,7 @@ import {
 import { getColorScheme } from "~/lib/get-color-scheme"
 
 import { ColorSchemeInjector } from "./ColorSchemeInjector"
-import Providers from "./providers"
+import Providers, { mantineTheme } from "./providers"
 
 export const metadata: Metadata = {
   title: `${APP_NAME} - ${APP_SLOGAN}`,
@@ -113,12 +115,15 @@ export default function RootLayout({
     <html lang={lang} dir={dir(lang)} className={colorScheme}>
       <head>
         <ColorSchemeInjector />
+        <ColorSchemeScript />
       </head>
       <body>
-        <Providers lang={lang}>
+        <MantineProvider theme={mantineTheme}>
-          {modal}
+          <Providers lang={lang}>
-          {children}
+            {modal}
-        </Providers>
+            {children}
+          </Providers>
+        </MantineProvider>
         <Toaster />
         <Script
           id="xlog-umami-analytics"

src/app/providers.tsx

@@ -9,6 +9,7 @@ import {
   NotificationModal,
   NotificationModalColorScheme,
 } from "@crossbell/notification"
+import { createTheme } from "@mantine/core"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 
 import { ModalStackProvider } from "~/components/ui/ModalStack"
@@ -36,6 +37,10 @@ const colorScheme: NotificationModalColorScheme = {
   border: `var(--border-color)`,
 }
 
+export const mantineTheme = createTheme({
+  fontFamily: "var(--font-fans)",
+})
+
 const createQueryClient = () => new QueryClient()
 export default function Providers({
   children,

src/components/common/AchievementItem.tsx

@@ -103,11 +103,11 @@ export const AchievementItem = ({
               position="middle-start"
               color="red"
               className="inline-flex max-w-full justify-center items-center"
-              styles={() => ({
+              styles={{
                 indicator: {
-                  "z-index": "1",
+                  zIndex: "1",
                 },
-              })}
+              }}
             >
               <span className="capitalize text-xs font-medium truncate max-w-full inline-block">
                 {group.info.title}

src/components/common/AchievementModal.tsx

@@ -163,7 +163,7 @@ export const AchievementModal = ({
             color="var(--theme-color)"
             size="sm"
             iconSize={42}
-            styles={(theme) => ({
+            styles={{
               stepLabel: {
                 color: "#fff",
                 textTransform: "capitalize",
@@ -185,7 +185,7 @@ export const AchievementModal = ({
               stepIcon: {
                 border: "none",
               },
-            })}
+            }}
           >
             {group.items.map((item) => {
               const icon = (

src/components/dashboard/editor-properties/EditorPublishAt.tsx

@@ -1,4 +1,5 @@
 import { DateInput } from "@mantine/dates"
+import "@mantine/dates/styles.css"
 
 import { useEditorState } from "~/hooks/useEditorState"
 import { useTranslation } from "~/lib/i18n/client"
@@ -20,7 +21,7 @@ export default function EditorPublishAt({
         {t("Publish at")}
       </label>
       <DateInput
-        className="[&_input]:text-black/90 [&_input]:bg-white"
+        className="[&_input]:text-black/90 [&_input]:bg-white [&_input:focus-within]:!border-accent [&_input]:rounded-lg [&_input]:h-10"
         allowDeselect
         clearable
         valueFormat="YYYY-MM-DD, h:mm a"
@@ -38,16 +39,6 @@ export default function EditorPublishAt({
             })
           }
         }}
-        styles={{
-          input: {
-            borderRadius: "0.5rem",
-            borderColor: "var(--border-color)",
-            height: "2.5rem",
-            "&:focus-within": {
-              borderColor: "var(--theme-color)",
-            },
-          },
-        }}
       />
       {prompt && <div className="text-xs text-gray-400 mt-1">{prompt}</div>}
       {value && value > new Date().toISOString() && (

src/css/tailwind.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 @layer base {
-  html {
+  body {
     @apply text-zinc-800;
     @apply fill-zinc-800;
     font-family: var(--font-fans);