feat: Update Mantine (#5)

apptension · Sep 1, 2024 · 4973580 · 4973580
1 parent 903829f
commit 4973580
Show file tree

Hide file tree

Showing 69 changed files with 1,480 additions and 866 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/crud/[id]/crudDetails.tsx b/apps/app/src/app/[lang]/app/crud/[id]/crudDetails.tsx
@@ -8,13 +8,11 @@ import { CrudItem as CrudItemType } from '@alp/api-client';
 export interface CrudDetailsProps {
   crudItem: CrudItemType;
 }
-export const CrudDetails = ({ crudItem }: CrudDetailsProps) => {
-  return (
-    <Box>
-      <Text weight="bold">
-        <FormattedMessage defaultMessage="Name" id="CrudDetails / Label / Name" />
-      </Text>
-      <Text>{crudItem.name}</Text>
-    </Box>
-  );
-};
+export const CrudDetails = ({ crudItem }: CrudDetailsProps) => (
+  <Box>
+    <Text fw="bold">
+      <FormattedMessage defaultMessage="Name" id="CrudDetails / Label / Name" />
+    </Text>
+    <Text>{crudItem.name}</Text>
+  </Box>
+);
diff --git a/apps/app/src/app/[lang]/app/crud/crudList.tsx b/apps/app/src/app/[lang]/app/crud/crudList.tsx
@@ -27,7 +27,7 @@ export const CrudList = () => {
   return (
     <>
       <Tooltip label={notAdmin ? addMessage : ''} opened={notAdmin} position="bottom" withArrow>
-        <Link href={RoutesConfig.crudAdd} mb="md" leftIcon={<IconPlus />} disabled={notAdmin}>
+        <Link href={RoutesConfig.crudAdd} mb="md" leftSection={<IconPlus />} disabled={notAdmin}>
           <FormattedMessage defaultMessage="Add new CRUD item" id="CrudList / Add New Item / Link" />
         </Link>
       </Tooltip>

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/crudItem/crudItem.component.tsx b/apps/app/src/components/crudItem/crudItem.component.tsx
@@ -59,7 +59,7 @@ export const CrudItem = ({ crudItem }: CrudItemProps) => {
     <Card shadow="sm" padding="lg" radius="md" withBorder>
       <Flex w="100%" justify="center" align="center">
         <Link href={`/app/crud/${crudItem.id}`}>
-          <Text weight={500}>{crudItem.name}</Text>
+          <Text fw={500}>{crudItem.name}</Text>
         </Link>
         <ActionIcon onClick={handleUpdateRedirect} variant="subtle">
           <IconEdit />

diff --git a/apps/app/src/components/crudItem/crudItem.stories.tsx b/apps/app/src/components/crudItem/crudItem.stories.tsx
@@ -15,9 +15,7 @@ const meta: Meta<typeof CrudItem> = {
 
 export default meta;
 
-const Template: StoryFn<CrudItemProps> = (args) => {
-  return <CrudItem crudItem={args.crudItem} />;
-};
+const Template: StoryFn<CrudItemProps> = (args) => <CrudItem crudItem={args.crudItem} />;
 
 export const Default: Story = {
   render: Template,

diff --git a/apps/app/src/components/crudItemForm/crudItemForm.component.tsx b/apps/app/src/components/crudItemForm/crudItemForm.component.tsx
@@ -16,7 +16,7 @@ export type CrudItemFormProps = {
 };
 
 export const CrudItemForm = ({ loading, onSubmit, initialData }: CrudItemFormProps) => {
-  const initialForm = initialData ? initialData : { name: '' };
+  const initialForm = initialData || { name: '' };
   const form = useForm({
     initialValues: initialForm,
     validate: {
@@ -28,7 +28,7 @@ export const CrudItemForm = ({ loading, onSubmit, initialData }: CrudItemFormPro
     <Box maw={300}>
       <form onSubmit={form.onSubmit(onSubmit)}>
         <TextInput withAsterisk label="Name" placeholder="Name" {...form.getInputProps('name')} />
-        <Group position="right" mt="md">
+        <Group justify="flex-end" mt="md">
           <Button loading={loading} type="submit">
             <FormattedMessage defaultMessage="Submit" id="CrudItemForm / Submit Button" />
           </Button>

diff --git a/apps/app/src/components/crudItemForm/crudItemForm.stories.tsx b/apps/app/src/components/crudItemForm/crudItemForm.stories.tsx
@@ -12,9 +12,7 @@ const meta: Meta<typeof CrudItemForm> = {
 
 export default meta;
 
-const Template: StoryFn<CrudItemFormProps> = (args) => {
-  return <CrudItemForm {...args} />;
-};
+const Template: StoryFn<CrudItemFormProps> = (args) => <CrudItemForm {...args} />;
 
 export const Default: Story = {
   render: Template,

diff --git a/apps/app/src/components/header/__tests__/header.spec.tsx b/apps/app/src/components/header/__tests__/header.spec.tsx
@@ -1,3 +1,4 @@
+import { AppShell } from '@mantine/core';
 import '@testing-library/jest-dom';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -8,7 +9,11 @@ import { Header } from '../header.component';
 describe('App: Header', () => {
   it('renders `Features` button', async () => {
     const toggleOpen = jest.fn();
-    render(<Header opened toggleOpen={toggleOpen} />);
+    render(
+      <AppShell>
+        <Header opened toggleOpen={toggleOpen} />
+      </AppShell>
+    );
 
     await userEvent.click(screen.getByTestId('toggle-button'));
     expect(toggleOpen).toHaveBeenCalled();

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/feature.component.tsx b/apps/app/src/components/homepage/features/feature.component.tsx
@@ -17,7 +17,7 @@ export function Feature({ icon: Icon, title, description }: FeatureProps) {
       <Text mt="sm" mb={7}>
         {title}
       </Text>
-      <Text size="sm" color="dimmed" sx={{ lineHeight: 1.6 }}>
+      <Text size="sm" c="dimmed" style={{ lineHeight: 1.6 }}>
         {description}
       </Text>
     </div>