Mantine v7 migration (#236)

* feat: update packages version * feat: postcss plugins setup * feat: update theme object and globalStyles * feat: change basic Mantine NextJS configuration * feat: update Header in pageConfig * fix: replace export with module.exports for postcss.config * feat: update Footer and MainLayout in PageConfig * feat: update UnauthorizedLayout in PageConfig * refactor: use display style prop instead of css * refactor: reorder style properties * feat: update MainLayout * feat: update page 404 * feat: update expire-token page * feat: update forgot-password page * feat: update home page * feat: update sign-in page * feat: update sign-up page * feat: add variablesResolver for custom CSS variables creation * feat: update profile page * feat: update reset-password page * feat: update Table * feat: update Link * refactor: code style, use postcss features * refactor: move components styling from theme to separate files * refactor: extract theme components styles to css modules * feat: update button in table heading cell * fix: typo in unauthorized layout image styles * fix: Password and Text input invalid styles * fix: table styles by using Mantine table tags * feat: update Unauthorized layout to use Mantine component * refactor: code style * refactor: code style * refactor: remove comments * refactor: fix typo * refactor: code style * refactor: replace default export with named export, reorder alphabetically * refactor: rename components css files * refactor: rename css files for pages * refactor: remove variablesResolver and global css styles as useless * refactor: use hiddenFrom instead of media query in Unauthorized layout * feat: update PhotoUpload
paralect · Nov 4, 2023 · f42664b · f42664b
1 parent e88f48f
commit f42664b
Show file tree

Hide file tree

Showing 53 changed files with 818 additions and 753 deletions.
diff --git a/template/apps/web/package.json b/template/apps/web/package.json
@@ -15,18 +15,19 @@
   },
   "dependencies": {
     "@hookform/resolvers": "2.9.11",
-    "@mantine/core": "6.0.1",
-    "@mantine/dates": "6.0.1",
-    "@mantine/dropzone": "6.0.1",
-    "@mantine/hooks": "6.0.1",
-    "@mantine/modals": "6.0.1",
-    "@mantine/next": "6.0.1",
-    "@mantine/notifications": "6.0.1",
+    "@mantine/core": "7.1.3",
+    "@mantine/dates": "7.1.3",
+    "@mantine/dropzone": "7.1.3",
+    "@mantine/hooks": "7.1.3",
+    "@mantine/modals": "7.1.3",
+    "@mantine/next": "6.0.21",
+    "@mantine/notifications": "7.1.3",
     "@svgr/webpack": "6.5.1",
     "@tabler/icons-react": "2.10.0",
     "@tanstack/react-table": "8.7.9",
     "app-constants": "workspace:*",
     "axios": "1.3.4",
+    "clsx": "2.0.0",
     "dayjs": "1.11.7",
     "dotenv-flow": "3.2.0",
     "lodash": "4.17.21",
@@ -65,6 +66,9 @@
     "eslint-config-airbnb-typescript": "17.0.0",
     "eslint-config-next": "13.2.4",
     "lint-staged": "13.2.0",
+    "postcss": "8.4.19",
+    "postcss-preset-mantine": "1.9.0",
+    "postcss-simple-vars": "7.0.1",
     "style-loader": "3.3.1",
     "typescript": "4.9.5"
   },

diff --git a/template/apps/web/postcss.config.js b/template/apps/web/postcss.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+  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',
+      },
+    },
+  },
+};
diff --git a/template/apps/web/src/components/Link/Link.module.css b/template/apps/web/src/components/Link/Link.module.css
@@ -0,0 +1,26 @@
+.link {
+  display: flex;
+  gap: 5px;
+
+  color: var(--mantine-color-blue-5);
+
+  pointer-events: initial;
+
+  &:hover {
+    color: var(--mantine-color-blue-2);
+  }
+}
+
+.disabled {
+  color: var(--mantine-color-gray-2);
+
+  pointer-events: none;
+
+  &:hover {
+    color: var(--mantine-color-gray-2);
+  }
+}
+
+.nextLinkUnderlineNone {
+  text-decoration: none;
+}
diff --git a/template/apps/web/src/components/Link/index.tsx b/template/apps/web/src/components/Link/index.tsx
@@ -1,8 +1,9 @@
 import { FC, memo, ReactNode } from 'react';
 import NextLink from 'next/link';
 import { Anchor } from '@mantine/core';
+import cx from 'clsx';
 
-import styles from './styles';
+import classes from './Link.module.css';
 
 interface LinkProps {
   children: ReactNode;
@@ -32,13 +33,19 @@ const Link: FC<LinkProps> = ({
   switch (type) {
     case 'router':
       return (
-        <NextLink href={href} passHref style={{ textDecoration: underline ? 'underline' : 'none' }}>
+        <NextLink
+          className={cx({ [classes.nextLinkUnderlineNone]: !underline })}
+          href={href}
+          passHref
+        >
           <Anchor
+            className={cx(classes.link, {
+              [classes.disabled]: disabled,
+            })}
             size={size}
             inherit={inherit}
-            underline={underline}
-            sx={(theme) => styles(theme, disabled)}
-            align={align}
+            underline={underline ? 'always' : 'never'}
+            ta={align}
           >
             {icon}
             {children}
@@ -49,14 +56,16 @@ const Link: FC<LinkProps> = ({
     case 'url':
       return (
         <Anchor
+          className={cx(classes.link, {
+            [classes.disabled]: disabled,
+          })}
           href={href}
           target={inNewTab ? '_blank' : '_self'}
           rel="noreferrer"
           size={size}
           inherit={inherit}
-          underline={underline}
-          sx={(theme) => styles(theme, disabled)}
-          align={align}
+          underline={underline ? 'always' : 'never'}
+          ta={align}
         >
           {icon}
           {children}

diff --git a/template/apps/web/src/components/Link/styles.ts b/template/apps/web/src/components/Link/styles.ts
diff --git a/template/apps/web/src/components/Table/index.tsx b/template/apps/web/src/components/Table/index.tsx
@@ -68,15 +68,6 @@ const Table: FC<TableProps> = ({
         checked={table.getIsAllRowsSelected()}
         indeterminate={table.getIsSomeRowsSelected()}
         onChange={table.getToggleAllRowsSelectedHandler()}
-        sx={(theme) => ({
-          ...(table.getIsSomeRowsSelected() && {
-            '& .mantine-Checkbox-input': {
-              backgroundColor: theme.colors.blue[6],
-              border: 'none',
-            },
-          }),
-          color: theme.white,
-        })}
       />
     ),
     cell: ({ row }) => (
@@ -151,9 +142,10 @@ const Table: FC<TableProps> = ({
           />
         </TableContainer>
       </Paper>
-      <Group position="right">
+
+      <Group justify="flex-end">
         {dataCount && (
-          <Text size="sm" color="dimmed">
+          <Text size="sm" c="gray.6">
             Showing
             {' '}
             <b>{table.getRowModel().rows.length}</b>

diff --git a/template/apps/web/src/components/Table/styles.ts b/template/apps/web/src/components/Table/styles.ts
diff --git a/template/apps/web/src/components/Table/tbody/index.tsx b/template/apps/web/src/components/Table/tbody/index.tsx
@@ -1,6 +1,6 @@
 import { FC, ReactNode } from 'react';
 import { CellContext, ColumnDefTemplate, Row } from '@tanstack/react-table';
-import { useMantineTheme } from '@mantine/core';
+import { Table, useMantineTheme } from '@mantine/core';
 
 type RowData = {
   [key: string]: string | number | boolean | Record<string, any>;
@@ -19,9 +19,9 @@ const Tbody: FC<TbodyProps> = ({ isSelectable, rows, flexRender }) => {
   const { colors } = useMantineTheme();
 
   return (
-    <tbody>
+    <Table.Tbody>
       {rows.map((row) => (
-        <tr
+        <Table.Tr
           key={row.id}
           style={{
             ...(isSelectable && row.getIsSelected() && {
@@ -31,13 +31,13 @@ const Tbody: FC<TbodyProps> = ({ isSelectable, rows, flexRender }) => {
           }}
         >
           {row.getVisibleCells().map((cell) => (
-            <td key={cell.id}>
+            <Table.Td key={cell.id}>
               {flexRender(cell.column.columnDef.cell, cell.getContext())}
-            </td>
+            </Table.Td>
           ))}
-        </tr>
+        </Table.Tr>
       ))}
-    </tbody>
+    </Table.Tbody>
   );
 };
 

diff --git a/template/apps/web/src/components/Table/thead/index.tsx b/template/apps/web/src/components/Table/thead/index.tsx
@@ -1,12 +1,14 @@
 import { FC, ReactNode } from 'react';
-import { UnstyledButton } from '@mantine/core';
+import { Table, UnstyledButton } from '@mantine/core';
 import {
   IconSortAscending,
   IconSortDescending,
   IconArrowsSort,
 } from '@tabler/icons-react';
 import { ColumnDefTemplate, HeaderContext, HeaderGroup } from '@tanstack/react-table';
 
+import classes from './thead.module.css';
+
 type CellData = {
   [key: string]: string | Function | boolean | Record<string, any>;
 };
@@ -21,11 +23,11 @@ interface TheadProps {
 }
 
 const Thead: FC<TheadProps> = ({ isSortable, headerGroups, flexRender }) => (
-  <thead>
+  <Table.Thead>
     {headerGroups.map((headerGroup) => (
-      <tr key={headerGroup.id}>
+      <Table.Tr key={headerGroup.id}>
         {headerGroup.headers.map((header) => (
-          <th
+          <Table.Th
             key={header.id}
             colSpan={header.colSpan}
             style={{
@@ -34,15 +36,13 @@ const Thead: FC<TheadProps> = ({ isSortable, headerGroups, flexRender }) => (
           >
             {!header.isPlaceholder && (
               <UnstyledButton
+                className={classes.headerButton}
+                w="100%"
+                display="flex"
+                lh="16px"
+                fw={600}
+                fz={14}
                 onClick={header.column.getToggleSortingHandler()}
-                style={{
-                  width: '100%',
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  lineHeight: '16px',
-                  fontWeight: '600',
-                  fontSize: '14px',
-                }}
               >
                 {
                   flexRender(
@@ -57,11 +57,11 @@ const Thead: FC<TheadProps> = ({ isSortable, headerGroups, flexRender }) => (
                 }[String(header.column.getIsSorted())] ?? null)}
               </UnstyledButton>
             )}
-          </th>
+          </Table.Th>
         ))}
-      </tr>
+      </Table.Tr>
     ))}
-  </thead>
+  </Table.Thead>
 );
 
 export default Thead;
diff --git a/template/apps/web/src/components/Table/thead/thead.module.css b/template/apps/web/src/components/Table/thead/thead.module.css
@@ -0,0 +1,3 @@
+.headerButton {
+  justify-content: space-between;
+}
diff --git a/template/apps/web/src/pages/404/index.page.tsx b/template/apps/web/src/pages/404/index.page.tsx
@@ -16,25 +16,20 @@ const NotFound: NextPage = () => {
       <Head>
         <title>Page not found</title>
       </Head>
-      <Stack sx={{
-        width: '328px',
-        height: '100vh',
-        display: 'flex',
-        margin: 'auto',
-        justifyContent: 'center',
-      }}
+      <Stack
+        m="auto"
+        w={328}
+        h="100vh"
+        justify="center"
+        display="flex"
       >
         <Title order={2}>Oops! The page is not found.</Title>
-        <Text
-          component="p"
-          sx={(theme) => ({
-            color: theme.colors.gray[5],
-            margin: '20px 0 24px',
-          })}
-        >
+
+        <Text mx={0} mt={20} mb={24} c="gray.6">
           The page you are looking for may have been removed,
           or the link you followed may be broken.
         </Text>
+
         <Button
           type="submit"
           onClick={handleClick}

diff --git a/template/apps/web/src/pages/_app/PageConfig/MainLayout/Footer/index.module.css b/template/apps/web/src/pages/_app/PageConfig/MainLayout/Footer/index.module.css
@@ -0,0 +1,5 @@
+.footer {
+  border: none;
+
+  flex: 0 1 auto;
+}
diff --git a/template/apps/web/src/pages/_app/PageConfig/MainLayout/Footer/index.tsx b/template/apps/web/src/pages/_app/PageConfig/MainLayout/Footer/index.tsx
@@ -1,21 +1,20 @@
 import { FC } from 'react';
-import { Footer as LayoutFooter } from '@mantine/core';
+import { AppShellFooter as LayoutFooter } from '@mantine/core';
+
+import classes from './index.module.css';
 
 const Footer: FC = () => {
   const year = new Date().getFullYear();
 
   return (
     <LayoutFooter
-      height="40px"
-      sx={(theme) => ({
-        marginTop: 'auto',
-        padding: '12px 0',
-        textAlign: 'center',
-        flex: '0 1 auto',
-        backgroundColor: theme.colors.gray[0],
-        border: 'none',
-        fontSize: '12px',
-      })}
+      className={classes.footer}
+      mt="auto"
+      px={0}
+      py={12}
+      bg="gray.0"
+      ta="center"
+      fz={12}
     >
       {`Ship ${year} © All rights reserved`}
     </LayoutFooter>

diff --git a/...src/pages/_app/PageConfig/MainLayout/Header/components/ShadowLoginBanner/index.module.css b/...src/pages/_app/PageConfig/MainLayout/Header/components/ShadowLoginBanner/index.module.css
@@ -0,0 +1,6 @@
+.banner {
+  border-radius: 0;
+
+  justify-content: center;
+  align-items: center;
+}