Skip to content

Commit 8e1348f

Browse files
mkleszczmkleszcz
committed
feat: Update Mantine
1 parent 903829f commit 8e1348f

File tree

63 files changed

+1214
-833
lines changed

Some content is hidden

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

63 files changed

+1214
-833
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/crud/[id]/crudDetails.tsx

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,11 @@ import { CrudItem as CrudItemType } from '@alp/api-client';
88
export interface CrudDetailsProps {
99
crudItem: CrudItemType;
1010
}
11-
export const CrudDetails = ({ crudItem }: CrudDetailsProps) => {
12-
return (
13-
<Box>
14-
<Text weight="bold">
15-
<FormattedMessage defaultMessage="Name" id="CrudDetails / Label / Name" />
16-
</Text>
17-
<Text>{crudItem.name}</Text>
18-
</Box>
19-
);
20-
};
11+
export const CrudDetails = ({ crudItem }: CrudDetailsProps) => (
12+
<Box>
13+
<Text fw="bold">
14+
<FormattedMessage defaultMessage="Name" id="CrudDetails / Label / Name" />
15+
</Text>
16+
<Text>{crudItem.name}</Text>
17+
</Box>
18+
);

‎apps/app/src/app/[lang]/app/crud/crudList.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const CrudList = () => {
2727
return (
2828
<>
2929
<Tooltip label={notAdmin ? addMessage : ''} opened={notAdmin} position="bottom" withArrow>
30-
<Link href={RoutesConfig.crudAdd} mb="md" leftIcon={<IconPlus />} disabled={notAdmin}>
30+
<Link href={RoutesConfig.crudAdd} mb="md" leftSection={<IconPlus />} disabled={notAdmin}>
3131
<FormattedMessage defaultMessage="Add new CRUD item" id="CrudList / Add New Item / Link" />
3232
</Link>
3333
</Tooltip>

‎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/crudItem/crudItem.component.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export const CrudItem = ({ crudItem }: CrudItemProps) => {
5959
<Card shadow="sm" padding="lg" radius="md" withBorder>
6060
<Flex w="100%" justify="center" align="center">
6161
<Link href={`/app/crud/${crudItem.id}`}>
62-
<Text weight={500}>{crudItem.name}</Text>
62+
<Text fw={500}>{crudItem.name}</Text>
6363
</Link>
6464
<ActionIcon onClick={handleUpdateRedirect} variant="subtle">
6565
<IconEdit />

‎apps/app/src/components/crudItem/crudItem.stories.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,7 @@ const meta: Meta<typeof CrudItem> = {
1515

1616
export default meta;
1717

18-
const Template: StoryFn<CrudItemProps> = (args) => {
19-
return <CrudItem crudItem={args.crudItem} />;
20-
};
18+
const Template: StoryFn<CrudItemProps> = (args) => <CrudItem crudItem={args.crudItem} />;
2119

2220
export const Default: Story = {
2321
render: Template,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export type CrudItemFormProps = {
1616
};
1717

1818
export const CrudItemForm = ({ loading, onSubmit, initialData }: CrudItemFormProps) => {
19-
const initialForm = initialData ? initialData : { name: '' };
19+
const initialForm = initialData || { name: '' };
2020
const form = useForm({
2121
initialValues: initialForm,
2222
validate: {
@@ -28,7 +28,7 @@ export const CrudItemForm = ({ loading, onSubmit, initialData }: CrudItemFormPro
2828
<Box maw={300}>
2929
<form onSubmit={form.onSubmit(onSubmit)}>
3030
<TextInput withAsterisk label="Name" placeholder="Name" {...form.getInputProps('name')} />
31-
<Group position="right" mt="md">
31+
<Group justify="flex-end" mt="md">
3232
<Button loading={loading} type="submit">
3333
<FormattedMessage defaultMessage="Submit" id="CrudItemForm / Submit Button" />
3434
</Button>

‎apps/app/src/components/crudItemForm/crudItemForm.stories.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,7 @@ const meta: Meta<typeof CrudItemForm> = {
1212

1313
export default meta;
1414

15-
const Template: StoryFn<CrudItemFormProps> = (args) => {
16-
return <CrudItemForm {...args} />;
17-
};
15+
const Template: StoryFn<CrudItemFormProps> = (args) => <CrudItemForm {...args} />;
1816

1917
export const Default: Story = {
2018
render: Template,

‎apps/app/src/components/header/__tests__/header.spec.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { AppShell } from '@mantine/core';
12
import '@testing-library/jest-dom';
23
import { screen } from '@testing-library/react';
34
import userEvent from '@testing-library/user-event';
@@ -8,7 +9,11 @@ import { Header } from '../header.component';
89
describe('App: Header', () => {
910
it('renders `Features` button', async () => {
1011
const toggleOpen = jest.fn();
11-
render(<Header opened toggleOpen={toggleOpen} />);
12+
render(
13+
<AppShell>
14+
<Header opened toggleOpen={toggleOpen} />
15+
</AppShell>
16+
);
1217

1318
await userEvent.click(screen.getByTestId('toggle-button'));
1419
expect(toggleOpen).toHaveBeenCalled();

‎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/feature.component.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export function Feature({ icon: Icon, title, description }: FeatureProps) {
1717
<Text mt="sm" mb={7}>
1818
{title}
1919
</Text>
20-
<Text size="sm" color="dimmed" sx={{ lineHeight: 1.6 }}>
20+
<Text size="sm" c="dimmed" style={{ lineHeight: 1.6 }}>
2121
{description}
2222
</Text>
2323
</div>

0 commit comments

Comments
 (0)