Skip to content

Commit

Permalink
chore: Upgrade to Mantine@7 (#306)
Browse files Browse the repository at this point in the history
really like the fact they moved away from css-in-js haha

```
Stack/Group spacing => gap
Stack/Group position => justify
Button compact prop => size
Button, Input, etc icon/leftIcon prop => leftSection
sx prop => style
Table thead/tbody/tr/td => <Table.Thead> / <Table.Tbody> / <Table.Tr> / <Table.Td>
Badge - set variant="light" prop
```

To do:

- [x] Tables
- [x] Update all Badge variant to light

more testing won't hurt :D
svc-shorpo authored Feb 25, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent edd69c4 commit c09342f
Showing 23 changed files with 429 additions and 722 deletions.
3 changes: 3 additions & 0 deletions .vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"recommendations": ["vunguyentuan.vscode-css-variables"]
}
9 changes: 8 additions & 1 deletion .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -5,5 +5,12 @@
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
},
"cssVariables.lookupFiles": [
"**/*.css",
"**/*.scss",
"**/*.sass",
"**/*.less",
"node_modules/@mantine/core/styles.css"
]
}
10 changes: 4 additions & 6 deletions packages/app/package.json
Original file line number Diff line number Diff line change
@@ -16,14 +16,11 @@
"ci:unit": "jest --ci --coverage"
},
"dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/server": "^11.11.0",
"@hyperdx/browser": "^0.18.4",
"@hyperdx/lucene": "^3.1.1",
"@mantine/core": "6.0.21",
"@mantine/hooks": "6.0.21",
"@mantine/next": "6.0.21",
"@mantine/spotlight": "6",
"@mantine/core": "7.5.2",
"@mantine/hooks": "7.5.2",
"@mantine/spotlight": "7.5.2",
"@microsoft/fetch-event-source": "^2.0.1",
"@monaco-editor/react": "^4.3.1",
"@tanstack/react-table": "^8.7.9",
@@ -122,6 +119,7 @@
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-simple-import-sort": "^10.0.0",
"jest": "^28.1.3",
"postcss": "^8.4.35",
"ts-jest": "^28.0.7",
"typescript": "^4.9.5"
},
32 changes: 16 additions & 16 deletions packages/app/pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -9,7 +9,7 @@ import { ReactQueryDevtools } from 'react-query/devtools';
import { ToastContainer } from 'react-toastify';
import { QueryParamProvider } from 'use-query-params';
import {
createEmotionCache,
ColorSchemeScript,
MantineProvider,
MantineThemeOverride,
} from '@mantine/core';
@@ -19,6 +19,7 @@ import { useConfirmModal } from '../src/useConfirm';
import { QueryParamProvider as HDXQueryParamProvider } from '../src/useQueryParam';
import { UserPreferencesProvider } from '../src/useUserPreferences';

import '@mantine/core/styles.css';
import 'react-toastify/dist/ReactToastify.css';
import '../styles/globals.css';
import '../styles/app.scss';
@@ -27,10 +28,7 @@ import '../src/LandingPage.scss';
const queryClient = new QueryClient();
import HyperDX from '@hyperdx/browser';

const mantineCache = createEmotionCache({ key: 'mantine', prepend: true });

const mantineTheme: MantineThemeOverride = {
colorScheme: 'dark',
fontFamily: 'IBM Plex Mono, sans-serif',
primaryColor: 'green',
primaryShade: 8,
@@ -55,6 +53,18 @@ const mantineTheme: MantineThemeOverride = {
'#00c531',
'#00aa23',
],
dark: [
'#C1C2C5',
'#A6A7AB',
'#909296',
'#5C5F66',
'#373A40',
'#2C2E33',
'#25262B',
'#1A1B1E',
'#141517',
'#101113',
],
},
headings: {
fontFamily: 'IBM Plex Mono, sans-serif',
@@ -86,14 +96,6 @@ const mantineTheme: MantineThemeOverride = {
},
},
},
Table: {
styles: theme => ({
td: {
color: theme.colors.dark[3],
fontWeight: 'normal',
},
}),
},
Checkbox: {
styles: {
input: {
@@ -174,6 +176,7 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
content="width=device-width, initial-scale=0.75"
/>
<meta name="theme-color" content="#25292e"></meta>
<ColorSchemeScript forceColorScheme="dark" />
</Head>

<SSRProvider>
@@ -182,10 +185,7 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
<QueryClientProvider client={queryClient}>
<UserPreferencesProvider>
<ToastContainer position="bottom-right" theme="dark" />
<MantineProvider
emotionCache={mantineCache}
theme={mantineTheme}
>
<MantineProvider forceColorScheme="dark" theme={mantineTheme}>
{getLayout(<Component {...pageProps} />)}
</MantineProvider>
<ReactQueryDevtools initialIsOpen={false} />
14 changes: 14 additions & 0 deletions packages/app/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',
},
},
},
};
17 changes: 10 additions & 7 deletions packages/app/src/AlertsPage.tsx
Original file line number Diff line number Diff line change
@@ -134,18 +134,22 @@ function AlertDetails({ alert }: { alert: AlertData }) {
<div className={styles.alertRow}>
<Group>
{alert.state === AlertState.ALERT && (
<Badge color="red" size="sm">
<Badge variant="light" color="red" size="sm">
Alert
</Badge>
)}
{alert.state === AlertState.OK && <Badge size="sm">Ok</Badge>}
{alert.state === AlertState.OK && (
<Badge variant="light" size="sm">
Ok
</Badge>
)}
{alert.state === AlertState.DISABLED && (
<Badge color="gray" size="sm">
<Badge variant="light" color="gray" size="sm">
Disabled
</Badge>
)}

<Stack spacing={2}>
<Stack gap={2}>
<div>
<Link
href={alertUrl}
@@ -182,8 +186,7 @@ function AlertDetails({ alert }: { alert: AlertData }) {
{/* also, will make the alert jump from under the cursor to the disabled area */}
{DISABLE_ALERTS_ENABLED ? (
<Button
size="xs"
compact
size="compact-xs"
color="gray"
onClick={() => {
disableAlert(alert._id);
@@ -310,7 +313,7 @@ export default function AlertsPage() {
<Button
size="xs"
variant="default"
leftIcon={
leftSection={
<i
className={cx(
'bi bi-funnel-fill',
16 changes: 3 additions & 13 deletions packages/app/src/AppNav.tsx
Original file line number Diff line number Diff line change
@@ -480,7 +480,7 @@ function SearchInput({
placeholder={placeholder}
value={value}
onChange={e => onChange(e.currentTarget.value)}
icon={<i className="bi bi-search fs-8 ps-1 text-slate-400" />}
leftSection={<i className="bi bi-search fs-8 ps-1" text-slate-400 />}
onKeyDown={handleKeyDown}
rightSection={
value ? (
@@ -499,13 +499,7 @@ function SearchInput({
size="xs"
variant="filled"
radius="xl"
sx={{
input: {
minHeight: 28,
height: 28,
lineHeight: 28,
},
}}
className={styles.searchInput}
/>
);
}
@@ -1339,11 +1333,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
variant="light"
size="xs"
component="a"
sx={{
':hover': {
color: 'white',
},
}}
className="hover-color-white"
>
Get Started for Free
</MButton>
10 changes: 5 additions & 5 deletions packages/app/src/AuthPage.tsx
Original file line number Diff line number Diff line change
@@ -133,16 +133,16 @@ export default function AuthPage({ action }: { action: 'register' | 'login' }) {
</div>
)}
<form className="text-start mt-4" {...form.controller}>
<Stack spacing="xl">
<Stack gap="xl">
<Paper p={34} shadow="md" radius="md">
<Stack spacing="lg">
<Stack gap="lg">
<TextInput
label="Email"
size="md"
withAsterisk={false}
placeholder="[email protected]"
type="email"
icon={<i className="bi bi-at fs-5" />}
leftSection={<i className="bi bi-at fs-5" />}
error={errors.email?.message}
required
{...form.email}
@@ -151,7 +151,7 @@ export default function AuthPage({ action }: { action: 'register' | 'login' }) {
size="md"
label="Password"
withAsterisk={false}
icon={<i className="bi bi-lock-fill" />}
leftSection={<i className="bi bi-lock-fill" />}
error={errors.password?.message}
required
placeholder="Password"
@@ -171,7 +171,7 @@ export default function AuthPage({ action }: { action: 'register' | 'login' }) {
size="md"
required
withAsterisk={false}
icon={<i className="bi bi-lock-fill" />}
leftSection={<i className="bi bi-lock-fill" />}
error={errors.confirmPassword?.message}
placeholder="Confirm Password"
{...form.confirmPassword}
11 changes: 5 additions & 6 deletions packages/app/src/DashboardPage.tsx
Original file line number Diff line number Diff line change
@@ -507,7 +507,7 @@ function DashboardFilter({
<MButton
variant="default"
type="submit"
leftIcon={<i className="bi bi-funnel-fill text-slate-300"></i>}
leftSection={<i className="bi bi-funnel-fill text-slate-300"></i>}
>
Filter
</MButton>
@@ -884,13 +884,12 @@ export default function DashboardPage() {
}}
>
<MButton
compact
color="blue"
radius="xl"
variant={tagsCount > 0 ? 'light' : 'default'}
size="xs"
size="compact-xs"
mx="sm"
leftIcon={<i className="bi bi-tags-fill" />}
leftSection={<i className="bi bi-tags-fill" />}
>
{!tagsCount
? 'Add Tag'
@@ -902,7 +901,7 @@ export default function DashboardPage() {
)}
<Transition mounted={isSavedNow} transition="skew-down">
{style => (
<Badge fw="normal" tt="none" style={style}>
<Badge variant="light" fw="normal" tt="none" style={style}>
Saved now
</Badge>
)}
@@ -963,7 +962,7 @@ export default function DashboardPage() {
</Tooltip>
</Popover.Target>
<Popover.Dropdown>
<Badge size="xs" mb="sm">
<Badge variant="light" size="xs" mb="sm">
Beta
</Badge>
{dashboard?._id != null && (
4 changes: 2 additions & 2 deletions packages/app/src/HDXListBarChart.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { memo } from 'react';
import Link from 'next/link';
import { Box, Flex, HoverCard, Text } from '@mantine/core';
import { FloatingPosition } from '@mantine/core/lib/Floating';
import { FloatingPosition } from '@mantine/core/lib/components/Floating';

import api from './api';
import { Granularity, MS_NUMBER_FORMAT, seriesColumns } from './ChartUtils';
@@ -114,7 +114,7 @@ function ListBar({
const value = row[column.dataKey];
return (
<Box key={column.displayName}>
<Text size="xs" weight={500} span>
<Text size="xs" fw={500} span>
{column.displayName}:{' '}
</Text>
<Text size="xs" span>
Loading

0 comments on commit c09342f

Please sign in to comment.