Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Update Mantine
Browse files Browse the repository at this point in the history
mkleszcz committed Aug 28, 2024
1 parent 903829f commit 3325fa1
Showing 43 changed files with 1,145 additions and 679 deletions.
2 changes: 2 additions & 0 deletions .stylelintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
.next
out
28 changes: 28 additions & 0 deletions .stylelintrc.json
Original file line number Diff line number Diff line change
@@ -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"]
}
]
}
}
6 changes: 5 additions & 1 deletion apps/app/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -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",
2 changes: 2 additions & 0 deletions apps/app/.stylelintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
.next
out
3 changes: 3 additions & 0 deletions apps/app/.stylelintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"extends": ["../../.stylelintrc.json"]
}
1 change: 1 addition & 0 deletions apps/app/next.config.js
Original file line number Diff line number Diff line change
@@ -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
12 changes: 8 additions & 4 deletions apps/app/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
3 changes: 3 additions & 0 deletions apps/app/postcss.config.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
const main = require('../../postcss.config.cjs');

module.exports = main;
3 changes: 3 additions & 0 deletions apps/app/src/app/[lang]/app/dashboard.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.text {
color: var(--mantine-colors-gray-7);
}
7 changes: 0 additions & 7 deletions apps/app/src/app/[lang]/app/dashboard.styles.ts

This file was deleted.

3 changes: 1 addition & 2 deletions apps/app/src/app/[lang]/app/dashboard.tsx
Original file line number Diff line number Diff line change
@@ -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}>
22 changes: 14 additions & 8 deletions apps/app/src/app/[lang]/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
13 changes: 7 additions & 6 deletions apps/app/src/app/[lang]/layout.tsx
Original file line number Diff line number Diff line change
@@ -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>
39 changes: 14 additions & 25 deletions apps/app/src/components/header/header.component.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
Original file line number Diff line number Diff line change
@@ -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 (
27 changes: 27 additions & 0 deletions apps/app/src/components/homepage/features/features.module.css
Original file line number Diff line number Diff line change
@@ -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;
}
}

31 changes: 0 additions & 31 deletions apps/app/src/components/homepage/features/features.styles.tsx

This file was deleted.

25 changes: 18 additions & 7 deletions apps/app/src/components/homepage/footer/footer.component.tsx
Original file line number Diff line number Diff line change
@@ -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>
111 changes: 111 additions & 0 deletions apps/app/src/components/homepage/footer/footer.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
.footer {
margin-top: rem(5);
padding-top: calc(var(--mantine-spacing-xl) * 2);
padding-bottom: calc(var(--mantine-spacing-md));
background-color: light-dark(
var(--mantine-color-gray-0),
var(--mantine-color-dark-6)
);
border-top: light-dark(
var(--mantine-color-gray-2),
var(--mantine-color-dark-5)
);
}

.logo {
max-width: rem(200);

@media (max-width: $mantine-breakpoint-sm) {
display: flex;
flex-direction: column;
align-items: center;
}
}


.description {
margin-top: rem(5);

@media (max-width: $mantine-breakpoint-sm) {
margin-top: var(--mantine-spacing-xs);
text-align: center;
}
}


.inner {
display: flex;
justify-content: space-between;

@media (max-width: $mantine-breakpoint-sm) {
flex-direction: column;
align-items: center;
}
}


.groups {
display: flex;
flex-wrap: wrap;
}

@media (max-width: var(--mantine-breakpoint-sm)) {
.groups {
display: none;
}
}

.wrapper {
width: rem(160);
}

.link {
display: block;
color: light-dark(
var(--mantine-color-gray-6),
var(--mantine-color-dark-1)
);
font-size: var(--mantine-font-size-sm);
padding-top: rem(3);
padding-bottom: rem(3);

&:hover {
text-decoration: underline;
}
}

.title {
font-size: var(--mantine-font-size-lg);
font-weight: 700;
font-family: "Greycliff CF", var(--mantine-font-family);
margin-bottom: calc(var(--mantine-spacing-xs) / 2);
color: light-dark(
var(--mantine-color-black),
var(--mantine-color-white)
);
}

.afterFooter {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: var(--mantine-spacing-xl);
padding-top: var(--mantine-spacing-xl);
padding-bottom: var(--mantine-spacing-xl);
border-top: rem(1) solid light-dark(
var(--mantine-color-gray-2),
var(--mantine-color-dark-4)
);
}

@media (max-width: var(--mantine-breakpoint-sm)) {
.afterFooter {
flex-direction: column;
}
}

.social {
@media (max-width: var(--mantine-breakpoint-sm)) {
margin-top: var(--mantine-spacing-xs);
}
}
95 changes: 0 additions & 95 deletions apps/app/src/components/homepage/footer/footer.styles.tsx

This file was deleted.

25 changes: 8 additions & 17 deletions apps/app/src/components/homepage/header/header.component.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,15 @@
'use client';

import {
Burger,
Container,
Divider,
Group,
Header as HeaderBase,
Paper,
Transition,
useMantineColorScheme,
} from '@mantine/core';
import { Burger, Container, Divider, Group, Paper, Transition, useMantineColorScheme } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import cx from 'clsx';
import Image from 'next/image';
import { useState } from 'react';

import LogoDark from '../../../../public/logo-dark.png';
import LogoLight from '../../../../public/logo-light.png';
import { LoginState } from '../loginState';
import { HEADER_HEIGHT, useStyles } from './header.styles';
import classes from './header.module.css';

interface HeaderResponsiveProps {
links: { link: string; label: string }[];
@@ -26,7 +18,6 @@ interface HeaderResponsiveProps {
export function Header({ links }: HeaderResponsiveProps) {
const [opened, { toggle, close }] = useDisclosure(false);
const [active, setActive] = useState(links[0].link);
const { classes, cx } = useStyles();
const { colorScheme } = useMantineColorScheme();

const items = links.map((link) => (
@@ -45,15 +36,15 @@ export function Header({ links }: HeaderResponsiveProps) {
));

return (
<HeaderBase height={HEADER_HEIGHT} className={classes.root}>
<Container className={classes.header}>
<header className={classes.header}>
<Container className={classes.inner}>
<Image src={colorScheme === 'dark' ? LogoDark : LogoLight} height={45} alt="Apptension" />
<Group spacing={5} className={classes.links}>
<Group gap={5} visibleFrom="xs">
{items}
<Divider orientation="vertical" mx={10} />
<LoginState />
</Group>
<Burger opened={opened} onClick={toggle} className={classes.burger} size="sm" />
<Burger opened={opened} onClick={toggle} hiddenFrom="xs" size="sm" />
<Transition transition="pop-top-right" duration={200} mounted={opened}>
{(styles) => (
<Paper className={classes.dropdown} withBorder style={styles}>
@@ -62,6 +53,6 @@ export function Header({ links }: HeaderResponsiveProps) {
)}
</Transition>
</Container>
</HeaderBase>
</header>
);
}
41 changes: 41 additions & 0 deletions apps/app/src/components/homepage/header/header.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
.dropdown {
position: absolute;
top: rem(56px);
left: 0;
right: 0;
z-index: 0;
overflow: hidden;
}

.header {
height: rem(56px);
background-color: var(--mantine-color-body);
border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
}

.inner {
height: rem(56px);
display: flex;
justify-content: space-between;
align-items: center;
}

.link {
display: block;
line-height: 1;
padding: rem(8px) rem(12px);
border-radius: var(--mantine-radius-sm);
text-decoration: none;
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
font-size: var(--mantine-font-size-sm);
font-weight: 500;

@mixin hover {
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
}

[data-mantine-color-scheme] &[data-active] {
background-color: var(--mantine-color-blue-filled);
color: var(--mantine-color-white);
}
}
73 changes: 0 additions & 73 deletions apps/app/src/components/homepage/header/header.styles.tsx

This file was deleted.

4 changes: 1 addition & 3 deletions apps/app/src/components/homepage/hero/hero.component.tsx
Original file line number Diff line number Diff line change
@@ -3,11 +3,9 @@
import { Container, Text, Title } from '@mantine/core';

import { Dots } from './dots.component';
import { useStyles } from './hero.styles';
import classes from './hero.module.css';

export function Hero() {
const { classes } = useStyles();

return (
<Container className={classes.wrapper} size={1400}>
<Dots className={classes.dots} style={{ left: 0, top: 0 }} />
66 changes: 66 additions & 0 deletions apps/app/src/components/homepage/hero/hero.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
.wrapper {
position: relative;
padding-top: rem(120px);
padding-bottom: rem(20px);

@media (max-width: $mantine-breakpoint-sm) {
padding-top: rem(80px);
padding-bottom: rem(60px);
}
}

.inner {
position: relative;
z-index: 1;
}

.dots {
position: absolute;
color: light-dark(
var(--mantine-color-gray-1),
var(--mantine-color-dark-5)
);

@media (max-width: $mantine-breakpoint-sm) {
display: none;
}
}

.dotsLeft {
top: 0;
left: 0;
}

.title {
text-align: center;
font-weight: 800;
font-size: rem(40px);
letter-spacing: -1px;
margin-bottom: 8px;
color: light-dark(
var(--mantine-color-black),
var(--mantine-color-white)
);

@media (max-width: $mantine-breakpoint-xs) {
font-size: rem(28px);
text-align: left;
}
}

.highlight {
color: light-dark(
var(--mantine-color-primary-4),
var(--mantine-color-primary-6)
);
}

.description {
text-align: center;

@media (max-width: $mantine-breakpoint-xs) {
text-align: left;
font-size: 16px;
}
}

63 changes: 0 additions & 63 deletions apps/app/src/components/homepage/hero/hero.styles.tsx

This file was deleted.

18 changes: 9 additions & 9 deletions apps/app/src/components/navbar/navbar.component.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
'use client';

import { Navbar as NavbarBase, ScrollArea } from '@mantine/core';
import { AppShell, ScrollArea } from '@mantine/core';
import { IconDashboard, IconLogout, IconStar, IconUser } from '@tabler/icons-react';
import cx from 'clsx';
import { signOut } from 'next-auth/react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { FormattedMessage } from 'react-intl';

import { useStyles } from './navbar.styles';
import classes from './navbar.module.css';

const data = [
{ link: '/app', label: 'Dashboard', icon: IconDashboard },
@@ -20,7 +21,6 @@ export interface NavbarProps {
}

export function Navbar({ opened }: NavbarProps) {
const { classes, cx } = useStyles();
const pathname = usePathname();

const links = data.map((item) => (
@@ -35,12 +35,12 @@ export function Navbar({ opened }: NavbarProps) {
));

return (
<NavbarBase width={{ sm: 300 }} p="md" hiddenBreakpoint="sm" hidden={!opened}>
<NavbarBase.Section grow component={ScrollArea}>
<AppShell.Navbar p="md" hidden={!opened}>
<AppShell.Section grow component={ScrollArea}>
{links}
</NavbarBase.Section>
</AppShell.Section>

<NavbarBase.Section className={classes.footer}>
<AppShell.Section className={classes.footer}>
<a href="/app/profile" className={classes.link}>
<IconUser className={classes.linkIcon} stroke={1.5} />
<span>
@@ -54,7 +54,7 @@ export function Navbar({ opened }: NavbarProps) {
<FormattedMessage defaultMessage="Logout" id="Navbar / Logout" />
</span>
</a>
</NavbarBase.Section>
</NavbarBase>
</AppShell.Section>
</AppShell.Navbar>
);
}
43 changes: 43 additions & 0 deletions apps/app/src/components/navbar/navbar.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
.footer {
padding-top: var(--mantine-spacing-md);
margin-top: var(--mantine-spacing-md);
border-top: 1px solid light-dark(
var(--mantine-color-gray-2),
var(--mantine-color-dark-4)
);
}

.link {
display: flex;
align-items: center;
text-decoration: none;
font-size: var(--mantine-font-sizes-sm);
color: light-dark(
var(--mantine-color-gray-7),
var(--mantine-color-dark-1)
);
padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
border-radius: var(--mantine-radius-sm);
font-weight: 500;
}

.link:hover {
background-color: light-dark(
var(--mantine-color-gray-0),
var(--mantine-color-dark-6)
);
color: var(--mantine-black);
}

.linkIcon {
color: light-dark(
var(--mantine-color-gray-6),
var(--mantine-color-dark-2)
);
margin-right: var(--mantine-spacing-sm);
}

.linkActive {
background-color: var(--mantine-primary-color);
color: var(--mantine-primary-color);
}
13 changes: 6 additions & 7 deletions apps/app/src/providers/appProviders/appProviders.component.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client';

import { ColorScheme } from '@mantine/core';
import { MantineProvider } from '@mantine/core';
import { Notifications } from '@mantine/notifications';
import { Session } from 'next-auth';
import { SessionProvider } from 'next-auth/react';
@@ -9,22 +9,22 @@ import { ReactNode } from 'react';
import { MakeClientOpts } from '@alp/api-client/client';
import { ApolloProvider } from '@alp/api-client/providers';
import { Locale } from '@alp/core/config/i18n';
import { IntlProvider, LocalesProvider, MantineProvider } from '@alp/core/providers';
import { IntlProvider, LocalesProvider } from '@alp/core/providers';

import { theme } from '../../theme';

interface AppProvidersProps {
children: ReactNode;
session?: Session | null;
apolloClientOpts?: MakeClientOpts;
lang: Locale;
defaultColorScheme?: ColorScheme;
}

export const AppProviders = ({ children, session, apolloClientOpts, lang, defaultColorScheme }: AppProvidersProps) => {
return (
export const AppProviders = ({ children, session, apolloClientOpts, lang }: AppProvidersProps) => (
<SessionProvider session={session}>
<LocalesProvider>
<IntlProvider lang={lang}>
<MantineProvider defaultColorScheme={defaultColorScheme}>
<MantineProvider theme={theme}>
<ApolloProvider clientOpts={apolloClientOpts}>
<Notifications />
{children}
@@ -34,4 +34,3 @@ export const AppProviders = ({ children, session, apolloClientOpts, lang, defaul
</LocalesProvider>
</SessionProvider>
);
};
13 changes: 13 additions & 0 deletions apps/app/src/theme/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
'use client';

import { Button, createTheme } from '@mantine/core';

import classes from './theme.module.css';

export const theme = createTheme({
components: {
Button: Button.extend({
classNames: classes,
}),
},
});
10 changes: 10 additions & 0 deletions apps/app/src/theme/theme.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.root {
&[data-variant='danger'] {
background-color: var(--mantine-color-red-9);
color: var(--mantine-color-red-0);
}

&[data-variant='danger']:hover {
background-color: var(--mantine-color-red-7);
}
}
12 changes: 8 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
@@ -71,18 +71,22 @@
"@apollo/experimental-nextjs-app-support": "^0.8.0",
"@apollo/server": "^4.10.0",
"@emotion/react": "^11.11.1",
"@mantine/core": "^6.0.11",
"@mantine/form": "^6.0.17",
"@mantine/hooks": "^6.0.11",
"@mantine/modals": "^6.0.17",
"@mantine/core": "^7.10.1",
"@mantine/form": "^7.10.1",
"@mantine/hooks": "^7.10.1",
"@mantine/modals": "^7.10.1",
"@tabler/icons-react": "^2.30.0",
"clsx": "^2.1.1",
"eslint-config-mantine": "^3.2.0",
"graphql": "^16.8.1",
"next": "14.1.2",
"next-auth": "^4.24.6",
"ramda": "^0.29.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-intl": "^6.6.2",
"stylelint": "^16.9.0",
"stylelint-config-standard-scss": "^13.1.0",
"typeorm": "^0.3.20",
"zod": "^3.21.4"
},
Original file line number Diff line number Diff line change
@@ -4,25 +4,23 @@ import { Container, Group, Text, Title } from '@mantine/core';
import { FormattedMessage } from 'react-intl';

import { Link } from '../link';
import { useStyles } from './genericError.styles';
import classes from './genericError.module.css';

export function GenericError() {
const { classes } = useStyles();

return (
<Container className={classes.root}>
<div className={classes.inner}>
<div className={classes.content}>
<Title className={classes.title}>
<FormattedMessage defaultMessage="Something went wrong" id="GenericError / Title" />
</Title>
<Text color="dimmed" size="lg" align="center" className={classes.description}>
<Text color="dimmed" size="lg" ta="center" className={classes.description}>
<FormattedMessage
defaultMessage="On the page you are trying to open occured error"
id="GenericError / Description"
/>
</Text>
<Group position="center">
<Group justify="center">
<Link href="/" size="md">
<FormattedMessage defaultMessage="Take me back to home page" id="GenericError / Back Button" />
</Link>
32 changes: 32 additions & 0 deletions packages/core/src/components/genericError/genericError.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
.root {
padding-top: var(--mantine-spacing-xl);
padding-bottom: var(--mantine-spacing-xl);
}

.inner {
position: relative;
}

.image {
opacity: 0.75;
}

.content {
padding-top: var(--mantine-spacing-xl);
position: relative;
z-index: 1;
}

.title {
font-family: "Greycliff CF", var(--mantine-font-family);
text-align: center;
font-weight: 900;
font-size: var(--mantine-font-sizes-xl);
}

.description {
max-width: var(--mantine-spacing-xl);
margin: auto;
margin-top: var(--mantine-spacing-xl);
margin-bottom: calc(var(--mantine-spacing-xl) * 1.5);
}
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
import { ActionIcon, useMantineColorScheme } from '@mantine/core';
import { IconMoonStars, IconSun } from '@tabler/icons-react';

import classes from './themeToggler.module.css';

export const ThemeToggler = () => {
const { colorScheme, toggleColorScheme } = useMantineColorScheme();
const dark = colorScheme === 'dark';
const { toggleColorScheme } = useMantineColorScheme();

return (
<ActionIcon
variant="outline"
color={dark ? 'yellow' : 'blue'}
onClick={() => toggleColorScheme()}
title="Toggle color scheme"
className={classes.root}
>
{dark ? <IconSun data-testid="dark" size="1.1rem" /> : <IconMoonStars data-testid="light" size="1.1rem" />}
<IconMoonStars className={classes.iconLight} data-testid="light" size="1.1rem" />
<IconSun className={classes.iconDark} data-testid="dark" size="1.1rem" />
</ActionIcon>
);
};
18 changes: 18 additions & 0 deletions packages/core/src/components/themeToggler/themeToggler.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
.root {
color: light-dark(
var(--mantine-color-blue-5),
var(--mantine-color-yellow-5)
);
}

.iconDark {
@mixin light {
display: none;
}
}

.iconLight {
@mixin dark {
display: none;
}
}
1 change: 0 additions & 1 deletion packages/core/src/providers/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,2 @@
export * from './mantineProvider';
export * from './intlProvider';
export * from './localesProvider';

This file was deleted.

This file was deleted.

2 changes: 0 additions & 2 deletions packages/core/src/providers/mantineProvider/index.ts

This file was deleted.

2 changes: 1 addition & 1 deletion packages/core/src/tests/utils/rendering.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { MantineProvider, MantineProviderProps } from '@mantine/core';
import { Queries, queries } from '@testing-library/dom';
import { RenderOptions, RenderResult, render, renderHook } from '@testing-library/react';
import { ComponentClass, ComponentType, FC, PropsWithChildren, ReactElement } from 'react';
import { IntlProvider } from 'react-intl';

import { DEFAULT_LOCALE, Locale, TranslationMessages, translationMessages } from '../../config/i18n';
import { LocalesProvider } from '../../providers/localesProvider';
import { MantineProvider, MantineProviderProps } from '../../providers/mantineProvider';
import { AppRouterContextProviderMock, AppRouterContextProviderMockProps } from '../providers';

/**
866 changes: 618 additions & 248 deletions pnpm-lock.yaml

Large diffs are not rendered by default.

14 changes: 14 additions & 0 deletions postcss.config.cjs
Original file line number Diff line number Diff line change
@@ -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',
},
},
},
};

0 comments on commit 3325fa1

Please sign in to comment.