From 4eaa47ecac5049174570fe3a3473097f4a3ec250 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Richard=20Trembeck=C3=BD?= Date: Sun, 15 Dec 2024 11:37:56 +0100 Subject: [PATCH] Remove index.scss in favor of CssBaseline and some theme overrides (#540) * remove index.scss in favor of CssBaseline and some theme overrides * clean-up - old unused queryClient * remove now-redundant global font style * more _app cleanup - redundant dynamic import * supress warning about :first-child in SSR --- src/components/PageLayout/PageLayout.tsx | 5 +- src/index.scss | 89 ------------------------ src/index.scss.d.ts | 10 --- src/pages/_app.tsx | 73 +------------------ src/theme.ts | 31 +++++++++ 5 files changed, 38 insertions(+), 170 deletions(-) delete mode 100644 src/index.scss delete mode 100644 src/index.scss.d.ts diff --git a/src/components/PageLayout/PageLayout.tsx b/src/components/PageLayout/PageLayout.tsx index d2ba2375..56b2858f 100644 --- a/src/components/PageLayout/PageLayout.tsx +++ b/src/components/PageLayout/PageLayout.tsx @@ -52,7 +52,10 @@ export const PageLayout: FC = ({contentWidth = 2, title = '', c py: {xs: 4, md: 8, lg: 12}, px: 2, ...sx, - '> :first-child': {mt: 0, pt: 0}, + // v server-renderi bol v consoli warning, ale first-child je tu asi uplne v pohode selector :D + // https://github.com/emotion-js/emotion/issues/1105#issuecomment-557726922 + '> :first-child /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */': + {mt: 0, pt: 0}, }} > {children} diff --git a/src/index.scss b/src/index.scss deleted file mode 100644 index 71cf3318..00000000 --- a/src/index.scss +++ /dev/null @@ -1,89 +0,0 @@ -/* start of Josh Comeau's global CSS reset - source: https://www.joshwcomeau.com/css/custom-css-reset/ */ - -/* - 1. Use a more-intuitive box-sizing model. -*/ -*, -*::before, -*::after { - box-sizing: border-box; -} - -/* - 2. Remove default margin -*/ -* { - margin: 0; -} - -/* - 3. Allow percentage-based heights in the application -*/ -html, -body { - height: 100%; -} - -/* - Typographic tweaks! - 4. Add accessible line-height - 5. Improve text rendering -*/ -body { - line-height: 1.5; - -webkit-font-smoothing: antialiased; -} - -/* - 6. Improve media defaults -*/ -img, -picture, -video, -canvas, -svg { - display: block; - max-width: 100%; -} - -/* - 7. Remove built-in form typography styles -*/ -input, -button, -textarea, -select { - font: inherit; -} - -/* - 8. Avoid text overflows -*/ -p, -h1, -h2, -h3, -h4, -h5, -h6 { - overflow-wrap: break-word; -} - -/* - 9. Create a root stacking context -*/ -#root, -#__next { - isolation: isolate; -} - -/* end of Josh Comeau's global CSS reset */ - -body { - -moz-osx-font-smoothing: grayscale; -} - -a { - text-decoration: none; -} diff --git a/src/index.scss.d.ts b/src/index.scss.d.ts deleted file mode 100644 index ad024c32..00000000 --- a/src/index.scss.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -export type Styles = { - next: string - root: string -} - -export type ClassNames = keyof Styles - -declare const styles: Styles - -export default styles diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 24a5eeb4..0a79ccab 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,10 +1,9 @@ -import '../index.scss' - +import {CssBaseline} from '@mui/material' import {ThemeProvider} from '@mui/material/styles' import {QueryClient, QueryClientProvider} from '@tanstack/react-query' +import {ReactQueryDevtools} from '@tanstack/react-query-devtools' import {isAxiosError} from 'axios' import {AppProps} from 'next/app' -import dynamic from 'next/dynamic' import Head from 'next/head' import {FC, PropsWithChildren, useMemo} from 'react' import {CookiesProvider} from 'react-cookie' @@ -15,65 +14,6 @@ import {AlertContainer} from '@/utils/AlertContainer' import {AuthContainer} from '@/utils/AuthContainer' import {useAlert} from '@/utils/useAlert' -const ReactQueryDevtools = dynamic( - () => import('@tanstack/react-query-devtools').then(({ReactQueryDevtools}) => ReactQueryDevtools), - { - ssr: false, - }, -) - -const queryClient = new QueryClient({ - defaultOptions: { - queries: { - retry: (failureCount, error) => { - if (isAxiosError(error)) { - // nechceme retryovat 403 (Forbidden) - const status = error.response?.status - if (status === 403 || status === 404) return false - } - // klasika - retryuj len 3x - if (failureCount >= 3) return false - return true - }, - }, - mutations: { - // globalny error handler requestov cez useMutation - // notes: - // - useMutation vzdy sam loguje error do konzoly, my nemusime - // - specifikovanim `onError` na nejakej `useMutation` sa tento handler prepise, tak sa tomu vyhybajme - onError: (error) => { - if (isAxiosError(error)) { - const data = error.response?.data as unknown - if (typeof data === 'object' && data) { - // ak mame vlastny message v `.detail`, ukazeme userovi ten - const detail = 'detail' in data && data.detail - if (typeof detail === 'string') { - alert(detail) - return - } - - // ak nie, ale mame message v `.non_field_errors`, ukazeme ten - const nonFieldErrors = 'non_field_errors' in data && data.non_field_errors - const nonFieldError = Array.isArray(nonFieldErrors) && (nonFieldErrors as unknown[])[0] - if (typeof nonFieldError === 'string') { - alert(nonFieldError) - return - } - - // TODO: handle field errors (napr. na password) - nealertovat usera, ale zobrazit v UI? alebo alert s prvym field errorom - - // ak nie, ukazeme kludne original anglicku hlasku z `error`u - alert(error) - return - } - } else { - alert(error) - } - }, - }, - }, -}) - const ReactQueryProvider: FC = ({children}) => { const {alert} = useAlert() @@ -146,20 +86,13 @@ const MyApp: FC = ({Component, pageProps}) => { STROM - {/* ak pouzijeme vsade , nemuseli by sme mat takyto globalny styl... ale je to teda - safe a krajsie, nech kazdy maly (aj debug) textik je aspon nasim fontom a ne v Times :D - source: https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#apply-the-font-in-head */} - + diff --git a/src/theme.ts b/src/theme.ts index 940172df..0f9cadd6 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -200,6 +200,37 @@ const _theme = createTheme({ }, }, components: { + // default: https://github.com/mui/material-ui/blob/68e3b40bc5d21a446e48a5ab651f713ea6337a52/packages/mui-material/src/CssBaseline/CssBaseline.js#L56 + MuiCssBaseline: { + styleOverrides: { + /* stuff from Josh Comeau's global CSS reset: https://www.joshwcomeau.com/css/custom-css-reset/ */ + // 3. Allow percentage-based heights in the application + 'html,body': { + height: '100%', + }, + // 6. Improve media defaults + 'img,picture,video,canvas,svg': { + display: 'block', + maxWidth: '100%', + }, + // 7. Remove built-in form typography styles + 'input,button,textarea,select': { + font: 'inherit', + }, + // 8. Avoid text overflows + 'p,h1,h2,h3,h4,h5,h6': { + overflowWrap: 'break-word', + }, + // 9. Create a root stacking context + '#root,#__next': { + isolation: 'isolate', + }, + /* our stuff */ + a: { + textDecoration: 'none', + }, + }, + }, MuiTypography: { defaultProps: { variantMapping: {