feat(deps): upgrade to mantine v7

.github/workflows/ci.yml

@@ -23,7 +23,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
 
       - name: Get current date time
         id: datetime

src/GZCTF/ClientApp/.eslintrc.json

@@ -12,7 +12,8 @@
     "react-hooks/exhaustive-deps": "off",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-non-null-assertion": "off",
-    "@typescript-eslint/no-non-null-asserted-optional-chain": "off"
+    "@typescript-eslint/no-non-null-asserted-optional-chain": "off",
+    "@typescript-eslint/no-unused-vars": "warn"
   },
   "parser": "@typescript-eslint/parser",
   "parserOptions": {

src/GZCTF/ClientApp/.vscode/settings.json

@@ -11,5 +11,12 @@
   "i18n-ally.extract.keyMaxLength": 20,
   "i18n-ally.extract.keygenStyle": "snake_case",
   "i18n-ally.sortKeys": true,
-  "i18n-ally.sourceLanguage": "zh"
+  "i18n-ally.sourceLanguage": "zh",
+  "cssVariables.lookupFiles": [
+    "**/*.css",
+    "**/*.scss",
+    "**/*.sass",
+    "**/*.less",
+    "node_modules/@mantine/core/styles.css"
+  ]
 }

src/GZCTF/ClientApp/package.json

@@ -14,24 +14,25 @@
   "dependencies": {
     "@babel/core": "^7.24.5",
     "@emotion/react": "^11.11.4",
-    "@mantine/carousel": "^6.0.21",
-    "@mantine/core": "^6.0.21",
-    "@mantine/dates": "^6.0.21",
-    "@mantine/dropzone": "^6.0.21",
-    "@mantine/form": "^6.0.21",
-    "@mantine/hooks": "^6.0.21",
-    "@mantine/modals": "^6.0.21",
-    "@mantine/notifications": "^6.0.21",
+    "@mantine/carousel": "^7.9.1",
+    "@mantine/core": "^7.9.1",
+    "@mantine/dates": "^7.9.1",
+    "@mantine/dropzone": "^7.9.1",
+    "@mantine/emotion": "^7.9.1",
+    "@mantine/form": "^7.9.1",
+    "@mantine/hooks": "^7.9.1",
+    "@mantine/modals": "^7.9.1",
+    "@mantine/notifications": "^7.9.1",
     "@marsidev/react-turnstile": "^0.6.0",
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.6.1",
     "@microsoft/signalr": "^8.0.0",
     "dayjs": "^1.11.11",
     "echarts": "^5.5.0",
     "echarts-for-react": "^3.0.2",
-    "embla-carousel": "^7.0.0",
-    "embla-carousel-autoplay": "^7.0.0",
-    "embla-carousel-react": "^7.0.0",
+    "embla-carousel": "^8.0.4",
+    "embla-carousel-autoplay": "^8.0.4",
+    "embla-carousel-react": "^8.0.4",
     "i18next": "^23.11.3",
     "i18next-browser-languagedetector": "^7.2.1",
     "katex": "^0.16.10",
@@ -69,6 +70,9 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "form-data": "~4.0.0",
     "lodash": "^4.17.21",
+    "postcss": "^8.4.38",
+    "postcss-preset-mantine": "^1.15.0",
+    "postcss-simple-vars": "^7.0.1",
     "prettier": "~3.2.5",
     "rollup": "^4.17.2",
     "swagger-typescript-api": "^13.0.3",

src/GZCTF/ClientApp/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+    plugins: {
+        'postcss-preset-mantine': {},
+    },
+};

src/GZCTF/ClientApp/prettier.config.mjs

@@ -13,6 +13,7 @@ export default {
     '^@Components/(.*)$',
     '^@Utils/(.*)$',
     '^@Api$',
+    '^@(.*).css$',
     '^[./]',
   ],
 }

src/GZCTF/ClientApp/src/App.css

@@ -0,0 +1,29 @@
+body {
+  padding: 0;
+  margin: 0;
+
+  background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-gray-7));
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+
+  @media print {
+    background-color: light-dark(var(--mantine-color-white), var(--mantine-color-gray-7));
+  }
+}
+
+::-webkit-scrollbar {
+  height: 6px;
+  width: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--mantine-color-dark-3);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-corner {
+  background-color: transparent;
+}

src/GZCTF/ClientApp/src/App.tsx

@@ -1,102 +1,63 @@
-import {
-  Center,
-  ColorScheme,
-  ColorSchemeProvider,
-  Global,
-  Loader,
-  MantineProvider,
-} from '@mantine/core'
-import { useLocalStorage } from '@mantine/hooks'
+import { Center, Loader, MantineProvider } from '@mantine/core'
+import { DatesProvider } from '@mantine/dates'
+import { emotionTransform, MantineEmotionProvider } from '@mantine/emotion'
 import { ModalsProvider } from '@mantine/modals'
 import { Notifications } from '@mantine/notifications'
 import { FC, Suspense } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useRoutes } from 'react-router-dom'
 import { SWRConfig } from 'swr'
 import routes from '~react-pages'
-import { ThemeOverride } from '@Utils/ThemeOverride'
+import { useLanguage } from '@Utils/I18n'
+import { CustomTheme } from '@Utils/ThemeOverride'
 import { useBanner, localCacheProvider } from '@Utils/useConfig'
 import { fetcher } from '@Api'
+import '@mantine/carousel/styles.css'
+import '@mantine/core/styles.css'
+import '@mantine/dates/styles.css'
+import '@mantine/dropzone/styles.css'
+import '@mantine/notifications/styles.css'
+import './App.css'
 
 export const App: FC = () => {
-  const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
-    key: 'color-scheme',
-    defaultValue: 'dark',
-    getInitialValueInEffect: true,
-  })
-
-  const toggleColorScheme = (value?: ColorScheme) =>
-    setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'))
-
   useBanner()
 
   const { t } = useTranslation()
+  const { locale } = useLanguage()
 
   return (
-    <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
-      <MantineProvider withGlobalStyles withCSSVariables theme={{ ...ThemeOverride, colorScheme }}>
+    <MantineProvider
+      defaultColorScheme="dark"
+      theme={CustomTheme}
+      stylesTransform={emotionTransform}
+    >
+      <MantineEmotionProvider>
         <Notifications zIndex={5000} />
-        {StyledGlobal}
-        <ModalsProvider
-          labels={{ confirm: t('common.modal.confirm'), cancel: t('common.modal.cancel') }}
-        >
-          <SWRConfig
-            value={{
-              refreshInterval: 10000,
-              provider: localCacheProvider,
-              fetcher,
-            }}
+
+        <DatesProvider settings={{ locale }}>
+          <ModalsProvider
+            labels={{ confirm: t('common.modal.confirm'), cancel: t('common.modal.cancel') }}
           >
-            <Suspense
-              fallback={
-                <Center h="100vh" w="100vw">
-                  <Loader />
-                </Center>
-              }
+            <SWRConfig
+              value={{
+                refreshInterval: 10000,
+                provider: localCacheProvider,
+                fetcher,
+              }}
             >
-              {useRoutes(routes)}
-            </Suspense>
-          </SWRConfig>
-        </ModalsProvider>
-      </MantineProvider>
-    </ColorSchemeProvider>
+              <Suspense
+                fallback={
+                  <Center h="100vh" w="100vw">
+                    <Loader />
+                  </Center>
+                }
+              >
+                {useRoutes(routes)}
+              </Suspense>
+            </SWRConfig>
+          </ModalsProvider>
+        </DatesProvider>
+      </MantineEmotionProvider>
+    </MantineProvider>
   )
 }
-
-const StyledGlobal = (
-  <Global
-    styles={(theme) => ({
-      body: {
-        ...theme.fn.fontStyles(),
-        backgroundColor:
-          theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.white[2],
-        color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
-        lineHeight: theme.lineHeight,
-        padding: 0,
-        margin: 0,
-
-        '@media print': {
-          backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.white,
-        },
-      },
-
-      '::-webkit-scrollbar': {
-        height: 6,
-        width: 6,
-      },
-
-      '::-webkit-scrollbar-thumb': {
-        background: 'var(--mantine-color-dark-3)',
-        borderRadius: 3,
-      },
-
-      '::-webkit-scrollbar-track': {
-        backgroundColor: 'transparent',
-      },
-
-      '::-webkit-scrollbar-corner': {
-        backgroundColor: 'transparent',
-      },
-    })}
-  />
-)

src/GZCTF/ClientApp/src/components/AccountView.tsx

@@ -1,4 +1,5 @@
-import { Center, createStyles, Stack } from '@mantine/core'
+import { Center, Stack } from '@mantine/core'
+import { createStyles } from '@mantine/emotion'
 import { FC } from 'react'
 import { useNavigate } from 'react-router-dom'
 import LogoHeader from '@Components/LogoHeader'
@@ -24,7 +25,7 @@ const AccountView: FC<AccountViewProps> = ({ onSubmit, children }) => {
       <Stack align="center" justify="center">
         <LogoHeader onClick={() => navigate('/')} />
         <form className={classes.input} onSubmit={onSubmit}>
-          <Stack spacing="xs" align="center" justify="center">
+          <Stack gap="xs" align="center" justify="center">
             {children}
           </Stack>
         </form>

src/GZCTF/ClientApp/src/components/ActionIconWithConfirm.tsx

@@ -3,7 +3,7 @@ import {
   Button,
   Group,
   MantineColor,
-  MantineNumberSize,
+  MantineSpacing,
   Popover,
   Stack,
   Text,
@@ -15,7 +15,7 @@ import { useTranslation } from 'react-i18next'
 export interface ActionIconWithConfirmProps {
   iconPath: string
   color?: MantineColor
-  size?: MantineNumberSize
+  size?: MantineSpacing
   message: string
   disabled?: boolean
   onClick: () => Promise<void>
@@ -41,7 +41,7 @@ export const ActionIconWithConfirm: FC<ActionIconWithConfirmProps> = (props) =>
         </ActionIcon>
       </Popover.Target>
       <Popover.Dropdown>
-        <Stack align="center" spacing={6}>
+        <Stack align="center" gap={6}>
           <Text
             size="sm"
             fw="bold"
@@ -54,7 +54,7 @@ export const ActionIconWithConfirm: FC<ActionIconWithConfirmProps> = (props) =>
             {props.message}
           </Text>
 
-          <Group w="100%" position="apart">
+          <Group w="100%" justify="space-between">
             <Button
               size="xs"
               py={2}

src/GZCTF/ClientApp/src/components/AppFooter.tsx

@@ -8,23 +8,23 @@ import { useConfig } from '@Utils/useConfig'
 const AppFooter: FC = () => {
   const { config } = useConfig()
   const isMobile = useIsMobile()
-  const { classes, theme } = useFooterStyles()
+  const { classes } = useFooterStyles()
   const { classes: logoClasses } = useLogoStyles()
 
   const copyright = (
-    <Text size="xs" align="center" fw={500} color="dimmed" ff={theme.fontFamilyMonospace}>
+    <Text size="xs" ta="center" fw={500} c="dimmed" ff="monospace">
       Copyright&nbsp;©&nbsp;2022-now&nbsp;
       {isMobile && <br />}
       <Anchor
         href="https://github.com/GZTimeWalker"
-        color="dimmed"
+        c="dimmed"
         size="sm"
         fw={500}
-        sx={{ lineHeight: 1 }}
+        style={{ lineHeight: 1 }}
       >
         @GZTimeWalker
       </Anchor>
-      &nbsp;All&nbsp;Rights&nbsp;Reserved.
+      ,&nbsp;All&nbsp;Rights&nbsp;Reserved.
     </Text>
   )
 
@@ -33,11 +33,10 @@ const AppFooter: FC = () => {
       <div className={classes.spacer} />
       <div className={classes.wrapper}>
         <Center mx="auto" h="100%">
-          <Stack spacing="sm" w={isMobile ? '100%' : '80%'}>
-            <Stack w="100%" align="center" spacing={2}>
-              <MainIcon style={{ maxWidth: isMobile ? 45 : 50, height: 'auto' }} />
-
-              <Text fw="bold" size={isMobile ? 28 : 36}>
+          <Stack gap="sm" w={isMobile ? '100%' : '80%'}>
+            <Stack w="100%" align="center" gap={2}>
+              <MainIcon style={{ maxWidth: isMobile ? '3rem' : '4rem', height: 'auto' }} />
+              <Text fw="bold" size={isMobile ? '2rem' : '2.5rem'}>
                 GZ<span className={logoClasses.brand}>::</span>CTF
               </Text>
             </Stack>