Skip to content

Commit 3325fa1

Browse files
mkleszczmkleszcz
committed
feat: Update Mantine
1 parent 903829f commit 3325fa1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+1145
-679
lines changed

‎.stylelintignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.next
2+
out

‎.stylelintrc.json

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"extends": ["stylelint-config-standard-scss"],
3+
"rules": {
4+
"custom-property-pattern": null,
5+
"selector-class-pattern": null,
6+
"scss/no-duplicate-mixins": null,
7+
"declaration-empty-line-before": null,
8+
"declaration-block-no-redundant-longhand-properties": null,
9+
"alpha-value-notation": null,
10+
"custom-property-empty-line-before": null,
11+
"property-no-vendor-prefix": null,
12+
"color-function-notation": null,
13+
"length-zero-no-unit": null,
14+
"selector-not-notation": null,
15+
"no-descending-specificity": null,
16+
"comment-empty-line-before": null,
17+
"scss/at-mixin-pattern": null,
18+
"scss/at-rule-no-unknown": null,
19+
"value-keyword-case": null,
20+
"media-feature-range-notation": null,
21+
"selector-pseudo-class-no-unknown": [
22+
true,
23+
{
24+
"ignorePseudoClasses": ["global"]
25+
}
26+
]
27+
}
28+
}

‎apps/app/.eslintrc.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"extends": ["plugin:react/recommended", "plugin:@next/next/recommended", "../../.eslintrc.json"],
2+
"extends": ["mantine", "plugin:react/recommended", "plugin:@next/next/recommended", "../../.eslintrc.json"],
33
"ignorePatterns": ["!**/*", "node_modules/**/*"],
44
"plugins": ["react-hooks", "formatjs", "testing-library"],
55
"rules": {
@@ -29,6 +29,10 @@
2929
},
3030
{
3131
"files": "*.{ts,tsx}",
32+
"parser": "@typescript-eslint/parser",
33+
"parserOptions": {
34+
"project": "./tsconfig.base.json"
35+
},
3236
"rules": {
3337
"@typescript-eslint/no-var-requires": "off",
3438
"@typescript-eslint/ban-ts-comment": "off",

‎apps/app/.stylelintignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.next
2+
out

‎apps/app/.stylelintrc.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": ["../../.stylelintrc.json"]
3+
}

‎apps/app/next.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const nextConfig = {
66
transpilePackages: ['@alp/graphql-api', '@alp/api-client', '@alp/core', 'ramda'],
77
experimental: {
88
serverComponentsExternalPackages: ['typeorm'],
9+
optimizePackageImports: ['@mantine/core', '@mantine/hooks'],
910
},
1011
webpack: (config, { isServer }) => {
1112
// fix for: Can't resolve 'pg-native' issue

‎apps/app/package.json

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
"dev": "pnpm nx serve:app",
77
"build": "next build",
88
"start": "next start",
9-
"lint": "next lint",
9+
"lint": "next lint && npm run lint:stylelint",
10+
"lint:stylelint": "stylelint '**/*.css' --cache",
1011
"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/**",
1112
"test": "jest",
1213
"test:watch": "jest --watch",
@@ -25,8 +26,8 @@
2526
"@emotion/server": "^11.11.0",
2627
"@formatjs/intl-localematcher": "^0.4.2",
2728
"@heroicons/react": "^2.0.17",
28-
"@mantine/next": "^6.0.11",
29-
"@mantine/notifications": "^6.0.19",
29+
"@mantine/next": "^6.0.21",
30+
"@mantine/notifications": "^7.10.1",
3031
"negotiator": "^0.6.3",
3132
"react-hook-form": "^7.43.9",
3233
"sharp": "^0.32.6"
@@ -36,6 +37,9 @@
3637
"@next/eslint-plugin-next": "^13.4.19",
3738
"@storybook/cli": "^7.4.5",
3839
"@types/negotiator": "^0.6.1",
39-
"eslint-config-next": "13.4.19"
40+
"eslint-config-next": "13.4.19",
41+
"postcss": "^8.4.38",
42+
"postcss-preset-mantine": "^1.15.0",
43+
"postcss-simple-vars": "^7.0.1"
4044
}
4145
}

‎apps/app/postcss.config.cjs

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
const main = require('../../postcss.config.cjs');
2+
3+
module.exports = main;

‎apps/app/src/app/[lang]/app/dashboard.module.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.text {
2+
color: var(--mantine-colors-gray-7);
3+
}

‎apps/app/src/app/[lang]/app/dashboard.styles.ts

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎apps/app/src/app/[lang]/app/dashboard.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@
33
import { Text } from '@mantine/core';
44
import { FormattedMessage } from 'react-intl';
55

6-
import { useStyles } from './dashboard.styles';
6+
import classes from './dashboard.module.css';
77

88
export function Dashboard() {
9-
const { classes } = useStyles();
109
return (
1110
<div>
1211
<Text className={classes.text}>

‎apps/app/src/app/[lang]/app/layout.tsx

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,29 @@
11
'use client';
22

3-
import { AppShell } from '@mantine/core';
3+
import { AppShell, rem } from '@mantine/core';
44
import { ReactNode, useState } from 'react';
55

66
import { Header, Navbar } from '@app/components';
77

8+
const HEADER_HEIGHT = rem(60);
9+
810
export default function AppLayout({ children }: { children: ReactNode }) {
911
const [opened, setOpened] = useState(false);
1012

1113
return (
1214
<AppShell
13-
navbar={<Navbar opened={opened} />}
14-
navbarOffsetBreakpoint="sm"
15-
header={<Header opened={opened} toggleOpen={() => setOpened(!opened)} />}
16-
styles={(theme) => ({
17-
main: { backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.white },
18-
})}
15+
header={{
16+
height: HEADER_HEIGHT,
17+
}}
18+
navbar={{
19+
width: 300,
20+
breakpoint: 'sm',
21+
collapsed: { mobile: !opened },
22+
}}
1923
>
20-
{children}
24+
<Header opened={opened} toggleOpen={() => setOpened(!opened)} />
25+
<Navbar opened={opened} />
26+
<AppShell.Main>{children}</AppShell.Main>
2127
</AppShell>
2228
);
2329
}

‎apps/app/src/app/[lang]/layout.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { ColorScheme } from '@mantine/core';
1+
import { ColorSchemeScript } from '@mantine/core';
2+
import '@mantine/core/styles.css';
23
import { Metadata, Viewport } from 'next';
34
import { getServerSession } from 'next-auth';
4-
import { cookies, headers } from 'next/headers';
5+
import { headers } from 'next/headers';
56

67
import { Locale, i18n } from '@alp/core/config/i18n';
7-
import { COLOR_SCHEME_COOKIE_NAME } from '@alp/core/providers/mantineProvider/MantineProvider.const';
88

99
import { authOptions } from '@app/config/auth';
1010
import { AppProviders } from '@app/providers/appProviders';
@@ -29,18 +29,19 @@ export default async function Root({ children, params }: { children: React.React
2929
const authHeaders = {
3030
COOKIE: headers().get('COOKIE') || '',
3131
};
32-
const cookieStore = cookies();
33-
const colorSchemeValue = cookieStore.get(COLOR_SCHEME_COOKIE_NAME);
3432
return (
3533
<html lang={params.lang}>
34+
<head>
35+
<ColorSchemeScript />
36+
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no" />
37+
</head>
3638
<body>
3739
<AppProviders
3840
session={session}
3941
apolloClientOpts={{
4042
authHeaders,
4143
}}
4244
lang={params.lang}
43-
defaultColorScheme={colorSchemeValue ? (colorSchemeValue.value as ColorScheme) : undefined}
4445
>
4546
{children}
4647
</AppProviders>

‎apps/app/src/components/header/header.component.tsx

Lines changed: 14 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,4 @@
1-
import {
2-
Burger,
3-
Flex,
4-
Header as HeaderBase,
5-
MediaQuery,
6-
rem,
7-
useMantineColorScheme,
8-
useMantineTheme,
9-
} from '@mantine/core';
1+
import { AppShell, Burger, Flex, Image as MantineImage, useMantineTheme } from '@mantine/core';
102
import Image from 'next/image';
113

124
import { LanguageSwitch, ThemeToggler } from '@alp/core/components';
@@ -19,32 +11,29 @@ export interface MobileHeaderProps {
1911
toggleOpen: () => void;
2012
}
2113

22-
export const HEADER_HEIGHT = rem(60);
23-
2414
export function Header({ opened, toggleOpen }: MobileHeaderProps) {
2515
const theme = useMantineTheme();
26-
const { colorScheme } = useMantineColorScheme();
2716
return (
28-
<HeaderBase w="100%" height={HEADER_HEIGHT} p="md">
17+
<AppShell.Header w="100%" p="md">
2918
<Flex align="center" h="100%" w="100%" justify="space-between">
3019
<>
31-
<MediaQuery largerThan="sm" styles={{ display: 'none' }}>
32-
<Burger
33-
opened={opened}
34-
onClick={toggleOpen}
35-
size="sm"
36-
color={theme.colors.gray[6]}
37-
mr="xl"
38-
data-testid="toggle-button"
39-
/>
40-
</MediaQuery>
41-
<Image src={colorScheme === 'dark' ? LogoDark : LogoLight} alt="Apptension" height={28} />
20+
<Burger
21+
hiddenFrom="sm"
22+
opened={opened}
23+
onClick={toggleOpen}
24+
size="sm"
25+
color={theme.colors.gray[6]}
26+
mr="xl"
27+
data-testid="toggle-button"
28+
/>
29+
<MantineImage component={Image} src={LogoLight} alt="Apptension" height={28} darkHidden />
30+
<MantineImage component={Image} src={LogoDark} alt="Apptension" height={28} lightHidden />
4231
</>
4332
<Flex align="center" h="100%" gap="md">
4433
<ThemeToggler />
4534
<LanguageSwitch />
4635
</Flex>
4736
</Flex>
48-
</HeaderBase>
37+
</AppShell.Header>
4938
);
5039
}

‎apps/app/src/components/homepage/features/features.component.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { Container, SimpleGrid, Text, Title } from '@mantine/core';
44

55
import { Feature, FeatureProps } from './feature.component';
6-
import { useStyles } from './features.styles';
6+
import classes from './features.module.css';
77

88
export const FEATURES_ANCHOR_ID = 'features';
99

@@ -14,7 +14,6 @@ interface FeaturesGridProps {
1414
}
1515

1616
export function Features({ title, description, data }: FeaturesGridProps) {
17-
const { classes } = useStyles();
1817
const features = data.map((feature, index) => <Feature {...feature} key={index} />);
1918

2019
return (

‎apps/app/src/components/homepage/features/features.module.css

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.wrapper {
2+
padding-top: calc(var(--mantine-spacing-xl) * 4);
3+
padding-bottom: calc(var(--mantine-spacing-xl) * 4);
4+
}
5+
6+
.title {
7+
font-family: "Greycliff CF", var(--mantine-font-family);
8+
font-weight: 900;
9+
margin-bottom: var(--mantine-spacing-md);
10+
text-align: center;
11+
12+
@media (max-width: $mantine-breakpoint-sm) {
13+
font-size: rem(28px);
14+
text-align: left;
15+
}
16+
}
17+
18+
19+
.description {
20+
font-family: "Greycliff CF", var(--mantine-font-family);
21+
text-align: center;
22+
23+
@media (max-width: $mantine-breakpoint-sm) {
24+
text-align: left;
25+
}
26+
}
27+

‎apps/app/src/components/homepage/features/features.styles.tsx

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎apps/app/src/components/homepage/footer/footer.component.tsx

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Image from 'next/image';
66

77
import LogoDark from '../../../../public/logo-dark.png';
88
import LogoLight from '../../../../public/logo-light.png';
9-
import { useStyles } from './footer.styles';
9+
import classes from './footer.module.css';
1010

1111
interface FooterLinksProps {
1212
data: {
@@ -16,7 +16,6 @@ interface FooterLinksProps {
1616
}
1717

1818
export function Footer({ data }: FooterLinksProps) {
19-
const { classes } = useStyles();
2019
const { colorScheme } = useMantineColorScheme();
2120

2221
const groups = data.map((group) => {
@@ -50,17 +49,29 @@ export function Footer({ data }: FooterLinksProps) {
5049
© {new Date().getFullYear()} apptension.com. All rights reserved.
5150
</Text>
5251

53-
<Group spacing={0} className={classes.social} position="right" noWrap>
54-
<ActionIcon size="lg" component="a" href="https://github.com/apptension/alpack" target="_blank">
52+
<Group gap={0} className={classes.social} justify="flex-end" wrap="nowrap">
53+
<ActionIcon
54+
size="lg"
55+
variant="subtle"
56+
component="a"
57+
href="https://github.com/apptension/alpack"
58+
target="_blank"
59+
>
5560
<IconBrandGithub size="1.05rem" stroke={1.5} />
5661
</ActionIcon>
57-
<ActionIcon size="lg" component="a" href="https://discord.apptension.com" target="_blank">
62+
<ActionIcon size="lg" variant="subtle" component="a" href="https://discord.apptension.com" target="_blank">
5863
<IconBrandDiscord size="1.05rem" stroke={1.5} />
5964
</ActionIcon>
60-
<ActionIcon size="lg" component="a" href="https://twitter.com/apptension" target="_blank">
65+
<ActionIcon size="lg" variant="subtle" component="a" href="https://twitter.com/apptension" target="_blank">
6166
<IconBrandX size="1.05rem" stroke={1.5} />
6267
</ActionIcon>
63-
<ActionIcon size="lg" component="a" href="https://www.instagram.com/apptension" target="_blank">
68+
<ActionIcon
69+
size="lg"
70+
variant="subtle"
71+
component="a"
72+
href="https://www.instagram.com/apptension"
73+
target="_blank"
74+
>
6475
<IconBrandInstagram size="1.05rem" stroke={1.5} />
6576
</ActionIcon>
6677
</Group>

0 commit comments

Comments
 (0)