feat: Update Mantine

apptension · Aug 28, 2024 · 3325fa1 · 3325fa1
1 parent 903829f
commit 3325fa1
Show file tree

Hide file tree

Showing 43 changed files with 1,145 additions and 679 deletions.
diff --git a/.stylelintignore b/.stylelintignore
@@ -0,0 +1,2 @@
+.next
+out
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -0,0 +1,28 @@
+{
+  "extends": ["stylelint-config-standard-scss"],
+  "rules": {
+    "custom-property-pattern": null,
+    "selector-class-pattern": null,
+    "scss/no-duplicate-mixins": null,
+    "declaration-empty-line-before": null,
+    "declaration-block-no-redundant-longhand-properties": null,
+    "alpha-value-notation": null,
+    "custom-property-empty-line-before": null,
+    "property-no-vendor-prefix": null,
+    "color-function-notation": null,
+    "length-zero-no-unit": null,
+    "selector-not-notation": null,
+    "no-descending-specificity": null,
+    "comment-empty-line-before": null,
+    "scss/at-mixin-pattern": null,
+    "scss/at-rule-no-unknown": null,
+    "value-keyword-case": null,
+    "media-feature-range-notation": null,
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": ["global"]
+      }
+    ]
+  }
+}
diff --git a/apps/app/.eslintrc.json b/apps/app/.eslintrc.json
@@ -1,5 +1,5 @@
 {
-  "extends": ["plugin:react/recommended", "plugin:@next/next/recommended", "../../.eslintrc.json"],
+  "extends": ["mantine", "plugin:react/recommended", "plugin:@next/next/recommended", "../../.eslintrc.json"],
   "ignorePatterns": ["!**/*", "node_modules/**/*"],
   "plugins": ["react-hooks", "formatjs", "testing-library"],
   "rules": {
@@ -29,6 +29,10 @@
     },
     {
       "files": "*.{ts,tsx}",
+      "parser": "@typescript-eslint/parser",
+      "parserOptions": {
+        "project": "./tsconfig.base.json"
+      },
       "rules": {
         "@typescript-eslint/no-var-requires": "off",
         "@typescript-eslint/ban-ts-comment": "off",

diff --git a/apps/app/.stylelintignore b/apps/app/.stylelintignore
@@ -0,0 +1,2 @@
+.next
+out
diff --git a/apps/app/.stylelintrc.json b/apps/app/.stylelintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["../../.stylelintrc.json"]
+}
diff --git a/apps/app/next.config.js b/apps/app/next.config.js
@@ -6,6 +6,7 @@ const nextConfig = {
   transpilePackages: ['@alp/graphql-api', '@alp/api-client', '@alp/core', 'ramda'],
   experimental: {
     serverComponentsExternalPackages: ['typeorm'],
+    optimizePackageImports: ['@mantine/core', '@mantine/hooks'],
   },
   webpack: (config, { isServer }) => {
     // fix for: Can't resolve 'pg-native' issue

diff --git a/apps/app/package.json b/apps/app/package.json
@@ -6,7 +6,8 @@
     "dev": "pnpm nx serve:app",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "next lint && npm run lint:stylelint",
+    "lint:stylelint": "stylelint '**/*.css' --cache",
     "extract-intl": "formatjs extract 'src/**/!(*.d).(js|jsx|ts|tsx)' '../../packages/core/src/**/!(*.d).(js|jsx|ts|tsx)' --id-interpolation-pattern '[sha512:contenthash:base64:6]' --out-file ../../packages/core/src/translations/en.json --ignore src/tests/mocks/**",
     "test": "jest",
     "test:watch": "jest --watch",
@@ -25,8 +26,8 @@
     "@emotion/server": "^11.11.0",
     "@formatjs/intl-localematcher": "^0.4.2",
     "@heroicons/react": "^2.0.17",
-    "@mantine/next": "^6.0.11",
-    "@mantine/notifications": "^6.0.19",
+    "@mantine/next": "^6.0.21",
+    "@mantine/notifications": "^7.10.1",
     "negotiator": "^0.6.3",
     "react-hook-form": "^7.43.9",
     "sharp": "^0.32.6"
@@ -36,6 +37,9 @@
     "@next/eslint-plugin-next": "^13.4.19",
     "@storybook/cli": "^7.4.5",
     "@types/negotiator": "^0.6.1",
-    "eslint-config-next": "13.4.19"
+    "eslint-config-next": "13.4.19",
+    "postcss": "^8.4.38",
+    "postcss-preset-mantine": "^1.15.0",
+    "postcss-simple-vars": "^7.0.1"
   }
 }
diff --git a/apps/app/postcss.config.cjs b/apps/app/postcss.config.cjs
@@ -0,0 +1,3 @@
+const main = require('../../postcss.config.cjs');
+
+module.exports = main;
diff --git a/apps/app/src/app/[lang]/app/dashboard.module.css b/apps/app/src/app/[lang]/app/dashboard.module.css
@@ -0,0 +1,3 @@
+.text {
+  color: var(--mantine-colors-gray-7);
+}
diff --git a/apps/app/src/app/[lang]/app/dashboard.styles.ts b/apps/app/src/app/[lang]/app/dashboard.styles.ts
diff --git a/apps/app/src/app/[lang]/app/dashboard.tsx b/apps/app/src/app/[lang]/app/dashboard.tsx
@@ -3,10 +3,9 @@
 import { Text } from '@mantine/core';
 import { FormattedMessage } from 'react-intl';
 
-import { useStyles } from './dashboard.styles';
+import classes from './dashboard.module.css';
 
 export function Dashboard() {
-  const { classes } = useStyles();
   return (
     <div>
       <Text className={classes.text}>

diff --git a/apps/app/src/app/[lang]/app/layout.tsx b/apps/app/src/app/[lang]/app/layout.tsx
@@ -1,23 +1,29 @@
 'use client';
 
-import { AppShell } from '@mantine/core';
+import { AppShell, rem } from '@mantine/core';
 import { ReactNode, useState } from 'react';
 
 import { Header, Navbar } from '@app/components';
 
+const HEADER_HEIGHT = rem(60);
+
 export default function AppLayout({ children }: { children: ReactNode }) {
   const [opened, setOpened] = useState(false);
 
   return (
     <AppShell
-      navbar={<Navbar opened={opened} />}
-      navbarOffsetBreakpoint="sm"
-      header={<Header opened={opened} toggleOpen={() => setOpened(!opened)} />}
-      styles={(theme) => ({
-        main: { backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.white },
-      })}
+      header={{
+        height: HEADER_HEIGHT,
+      }}
+      navbar={{
+        width: 300,
+        breakpoint: 'sm',
+        collapsed: { mobile: !opened },
+      }}
     >
-      {children}
+      <Header opened={opened} toggleOpen={() => setOpened(!opened)} />
+      <Navbar opened={opened} />
+      <AppShell.Main>{children}</AppShell.Main>
     </AppShell>
   );
 }
diff --git a/apps/app/src/app/[lang]/layout.tsx b/apps/app/src/app/[lang]/layout.tsx
@@ -1,10 +1,10 @@
-import { ColorScheme } from '@mantine/core';
+import { ColorSchemeScript } from '@mantine/core';
+import '@mantine/core/styles.css';
 import { Metadata, Viewport } from 'next';
 import { getServerSession } from 'next-auth';
-import { cookies, headers } from 'next/headers';
+import { headers } from 'next/headers';
 
 import { Locale, i18n } from '@alp/core/config/i18n';
-import { COLOR_SCHEME_COOKIE_NAME } from '@alp/core/providers/mantineProvider/MantineProvider.const';
 
 import { authOptions } from '@app/config/auth';
 import { AppProviders } from '@app/providers/appProviders';
@@ -29,18 +29,19 @@ export default async function Root({ children, params }: { children: React.React
   const authHeaders = {
     COOKIE: headers().get('COOKIE') || '',
   };
-  const cookieStore = cookies();
-  const colorSchemeValue = cookieStore.get(COLOR_SCHEME_COOKIE_NAME);
   return (
     <html lang={params.lang}>
+      <head>
+        <ColorSchemeScript />
+        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no" />
+      </head>
       <body>
         <AppProviders
           session={session}
           apolloClientOpts={{
             authHeaders,
           }}
           lang={params.lang}
-          defaultColorScheme={colorSchemeValue ? (colorSchemeValue.value as ColorScheme) : undefined}
         >
           {children}
         </AppProviders>

diff --git a/apps/app/src/components/header/header.component.tsx b/apps/app/src/components/header/header.component.tsx
@@ -1,12 +1,4 @@
-import {
-  Burger,
-  Flex,
-  Header as HeaderBase,
-  MediaQuery,
-  rem,
-  useMantineColorScheme,
-  useMantineTheme,
-} from '@mantine/core';
+import { AppShell, Burger, Flex, Image as MantineImage, useMantineTheme } from '@mantine/core';
 import Image from 'next/image';
 
 import { LanguageSwitch, ThemeToggler } from '@alp/core/components';
@@ -19,32 +11,29 @@ export interface MobileHeaderProps {
   toggleOpen: () => void;
 }
 
-export const HEADER_HEIGHT = rem(60);
-
 export function Header({ opened, toggleOpen }: MobileHeaderProps) {
   const theme = useMantineTheme();
-  const { colorScheme } = useMantineColorScheme();
   return (
-    <HeaderBase w="100%" height={HEADER_HEIGHT} p="md">
+    <AppShell.Header w="100%" p="md">
       <Flex align="center" h="100%" w="100%" justify="space-between">
         <>
-          <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
-            <Burger
-              opened={opened}
-              onClick={toggleOpen}
-              size="sm"
-              color={theme.colors.gray[6]}
-              mr="xl"
-              data-testid="toggle-button"
-            />
-          </MediaQuery>
-          <Image src={colorScheme === 'dark' ? LogoDark : LogoLight} alt="Apptension" height={28} />
+          <Burger
+            hiddenFrom="sm"
+            opened={opened}
+            onClick={toggleOpen}
+            size="sm"
+            color={theme.colors.gray[6]}
+            mr="xl"
+            data-testid="toggle-button"
+          />
+          <MantineImage component={Image} src={LogoLight} alt="Apptension" height={28} darkHidden />
+          <MantineImage component={Image} src={LogoDark} alt="Apptension" height={28} lightHidden />
         </>
         <Flex align="center" h="100%" gap="md">
           <ThemeToggler />
           <LanguageSwitch />
         </Flex>
       </Flex>
-    </HeaderBase>
+    </AppShell.Header>
   );
 }
diff --git a/apps/app/src/components/homepage/features/features.component.tsx b/apps/app/src/components/homepage/features/features.component.tsx
@@ -3,7 +3,7 @@
 import { Container, SimpleGrid, Text, Title } from '@mantine/core';
 
 import { Feature, FeatureProps } from './feature.component';
-import { useStyles } from './features.styles';
+import classes from './features.module.css';
 
 export const FEATURES_ANCHOR_ID = 'features';
 
@@ -14,7 +14,6 @@ interface FeaturesGridProps {
 }
 
 export function Features({ title, description, data }: FeaturesGridProps) {
-  const { classes } = useStyles();
   const features = data.map((feature, index) => <Feature {...feature} key={index} />);
 
   return (

diff --git a/apps/app/src/components/homepage/features/features.module.css b/apps/app/src/components/homepage/features/features.module.css
@@ -0,0 +1,27 @@
+.wrapper {
+  padding-top: calc(var(--mantine-spacing-xl) * 4);
+  padding-bottom: calc(var(--mantine-spacing-xl) * 4);
+}
+
+.title {
+    font-family: "Greycliff CF", var(--mantine-font-family);
+    font-weight: 900;
+    margin-bottom: var(--mantine-spacing-md);
+    text-align: center;
+
+    @media (max-width: $mantine-breakpoint-sm) {
+        font-size: rem(28px);
+        text-align: left;
+    }
+}
+
+
+.description {
+  font-family: "Greycliff CF", var(--mantine-font-family);
+  text-align: center;
+
+    @media (max-width: $mantine-breakpoint-sm) {
+        text-align: left;
+    }
+}
+
diff --git a/apps/app/src/components/homepage/features/features.styles.tsx b/apps/app/src/components/homepage/features/features.styles.tsx
diff --git a/apps/app/src/components/homepage/footer/footer.component.tsx b/apps/app/src/components/homepage/footer/footer.component.tsx
@@ -6,7 +6,7 @@ import Image from 'next/image';
 
 import LogoDark from '../../../../public/logo-dark.png';
 import LogoLight from '../../../../public/logo-light.png';
-import { useStyles } from './footer.styles';
+import classes from './footer.module.css';
 
 interface FooterLinksProps {
   data: {
@@ -16,7 +16,6 @@ interface FooterLinksProps {
 }
 
 export function Footer({ data }: FooterLinksProps) {
-  const { classes } = useStyles();
   const { colorScheme } = useMantineColorScheme();
 
   const groups = data.map((group) => {
@@ -50,17 +49,29 @@ export function Footer({ data }: FooterLinksProps) {
           © {new Date().getFullYear()} apptension.com. All rights reserved.
         </Text>
 
-        <Group spacing={0} className={classes.social} position="right" noWrap>
-          <ActionIcon size="lg" component="a" href="https://github.com/apptension/alpack" target="_blank">
+        <Group gap={0} className={classes.social} justify="flex-end" wrap="nowrap">
+          <ActionIcon
+            size="lg"
+            variant="subtle"
+            component="a"
+            href="https://github.com/apptension/alpack"
+            target="_blank"
+          >
             <IconBrandGithub size="1.05rem" stroke={1.5} />
           </ActionIcon>
-          <ActionIcon size="lg" component="a" href="https://discord.apptension.com" target="_blank">
+          <ActionIcon size="lg" variant="subtle" component="a" href="https://discord.apptension.com" target="_blank">
             <IconBrandDiscord size="1.05rem" stroke={1.5} />
           </ActionIcon>
-          <ActionIcon size="lg" component="a" href="https://twitter.com/apptension" target="_blank">
+          <ActionIcon size="lg" variant="subtle" component="a" href="https://twitter.com/apptension" target="_blank">
             <IconBrandX size="1.05rem" stroke={1.5} />
           </ActionIcon>
-          <ActionIcon size="lg" component="a" href="https://www.instagram.com/apptension" target="_blank">
+          <ActionIcon
+            size="lg"
+            variant="subtle"
+            component="a"
+            href="https://www.instagram.com/apptension"
+            target="_blank"
+          >
             <IconBrandInstagram size="1.05rem" stroke={1.5} />
           </ActionIcon>
         </Group>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		const main = require('../../postcss.config.cjs');

		module.exports = main;