Skip to content

Commit 185400d

Browse files
aslilacaslilac
authored
refactor: remove usage of <Box> and sx (#10702)
1 parent 1e6ea61 commit 185400d

File tree

84 files changed

+1436
-1517
lines changed

Some content is hidden

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

84 files changed

+1436
-1517
lines changed

‎site/.eslintrc.yaml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,8 @@ rules:
142142
- name: "@mui/material/Typography"
143143
message:
144144
"You should use the native HTML elements as span, p, h1, h2, h3..."
145+
- name: "@mui/material/Box"
146+
message: "You should use a <div> instead"
145147
no-unused-vars: "off"
146148
"object-curly-spacing": "off"
147149
react-hooks/exhaustive-deps: warn

‎site/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@
4040
"@mui/icons-material": "5.14.0",
4141
"@mui/lab": "5.0.0-alpha.129",
4242
"@mui/material": "5.14.0",
43-
"@mui/styles": "5.14.0",
4443
"@mui/system": "5.14.0",
4544
"@mui/utils": "5.14.11",
4645
"@vitejs/plugin-react": "4.1.0",

‎site/pnpm-lock.yaml

Lines changed: 1 addition & 108 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/src/@types/emotion.d.ts

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
1-
import type { DefaultTheme as MuiTheme } from "@mui/system";
2-
import type { NewTheme } from "theme/experimental";
1+
import type { Theme as MuiTheme } from "@mui/material/styles";
32

43
declare module "@emotion/react" {
5-
interface Theme extends MuiTheme {
6-
experimental: NewTheme;
7-
}
4+
interface Theme extends MuiTheme {}
85
}

‎site/src/@types/mui.d.ts

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,6 @@
1-
import type {
2-
PaletteColor,
3-
PaletteColorOptions,
4-
Theme,
5-
} from "@mui/material/styles";
1+
import type { PaletteColor, PaletteColorOptions } from "@mui/material/styles";
62
import type { NewTheme } from "theme/experimental";
73

8-
declare module "@mui/styles/defaultTheme" {
9-
interface DefaultTheme extends Theme {}
10-
}
11-
124
declare module "@mui/material/styles" {
135
interface Theme {
146
experimental: NewTheme;

‎site/src/App.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,14 @@ export const ThemeProviders: FC<PropsWithChildren> = ({ children }) => {
4848
);
4949
};
5050

51-
export const AppProviders = ({
52-
children,
53-
queryClient = defaultQueryClient,
54-
}: {
51+
interface AppProvidersProps {
5552
children: ReactNode;
5653
queryClient?: QueryClient;
54+
}
55+
56+
export const AppProviders: FC<AppProvidersProps> = ({
57+
children,
58+
queryClient = defaultQueryClient,
5759
}) => {
5860
return (
5961
<HelmetProvider>

‎site/src/components/ActiveUserChart/ActiveUserChart.tsx

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
import Box from "@mui/material/Box";
2-
import { Theme } from "@mui/material/styles";
3-
import useTheme from "@mui/styles/useTheme";
41
import {
52
CategoryScale,
63
Chart as ChartJS,
@@ -22,7 +19,8 @@ import {
2219
HelpTooltipText,
2320
} from "components/HelpTooltip/HelpTooltip";
2421
import dayjs from "dayjs";
25-
import { FC } from "react";
22+
import { useTheme } from "@emotion/react";
23+
import { type FC } from "react";
2624
import { Line } from "react-chartjs-2";
2725
import annotationPlugin from "chartjs-plugin-annotation";
2826

@@ -42,7 +40,7 @@ ChartJS.register(
4240
const USER_LIMIT_DISPLAY_THRESHOLD = 60;
4341

4442
export interface ActiveUserChartProps {
45-
data: { date: string; amount: number }[];
43+
data: Array<{ date: string; amount: number }>;
4644
interval: "day" | "week";
4745
userLimit: number | undefined;
4846
}
@@ -52,7 +50,7 @@ export const ActiveUserChart: FC<ActiveUserChartProps> = ({
5250
interval,
5351
userLimit,
5452
}) => {
55-
const theme: Theme = useTheme();
53+
const theme = useTheme();
5654

5755
const labels = data.map((val) => dayjs(val.date).format("YYYY-MM-DD"));
5856
const chartData = data.map((val) => val.amount);
@@ -137,9 +135,9 @@ export const ActiveUserChart: FC<ActiveUserChartProps> = ({
137135
);
138136
};
139137

140-
export const ActiveUsersTitle = () => {
138+
export const ActiveUsersTitle: FC = () => {
141139
return (
142-
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
140+
<div css={{ display: "flex", alignItems: "center", gap: 8 }}>
143141
Active Users
144142
<HelpTooltip size="small">
145143
<HelpTooltipTitle>How do we calculate active users?</HelpTooltipTitle>
@@ -148,7 +146,7 @@ export const ActiveUsersTitle = () => {
148146
considered an active user. e.g. apps, web terminal, SSH
149147
</HelpTooltipText>
150148
</HelpTooltip>
151-
</Box>
149+
</div>
152150
);
153151
};
154152

‎site/src/components/Alert/Alert.tsx

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
1-
import { useState, FC, ReactNode } from "react";
1+
import {
2+
useState,
3+
type FC,
4+
type ReactNode,
5+
type PropsWithChildren,
6+
} from "react";
27
import Collapse from "@mui/material/Collapse";
38
// eslint-disable-next-line no-restricted-imports -- It is the base component
4-
import MuiAlert, { AlertProps as MuiAlertProps } from "@mui/material/Alert";
9+
import MuiAlert, {
10+
type AlertProps as MuiAlertProps,
11+
} from "@mui/material/Alert";
512
import Button from "@mui/material/Button";
6-
import Box from "@mui/material/Box";
713

814
export type AlertProps = MuiAlertProps & {
915
actions?: ReactNode;
@@ -32,7 +38,7 @@ export const Alert: FC<AlertProps> = ({
3238
<Collapse in>
3339
<MuiAlert
3440
{...alertProps}
35-
sx={{ textAlign: "left", ...alertProps.sx }}
41+
css={{ textAlign: "left" }}
3642
severity={severity}
3743
action={
3844
<>
@@ -62,15 +68,13 @@ export const Alert: FC<AlertProps> = ({
6268
);
6369
};
6470

65-
export const AlertDetail = ({ children }: { children: ReactNode }) => {
71+
export const AlertDetail: FC<PropsWithChildren> = ({ children }) => {
6672
return (
67-
<Box
68-
component="span"
69-
color={(theme) => theme.palette.text.secondary}
70-
fontSize={13}
73+
<span
74+
css={(theme) => ({ color: theme.palette.text.secondary, fontSize: 13 })}
7175
data-chromatic="ignore"
7276
>
7377
{children}
74-
</Box>
78+
</span>
7579
);
7680
};

‎site/src/components/Avatar/Avatar.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
// This is the only place MuiAvatar can be used
22
// eslint-disable-next-line no-restricted-imports -- Read above
3-
import MuiAvatar, { AvatarProps as MuiAvatarProps } from "@mui/material/Avatar";
4-
import { FC, useId } from "react";
3+
import MuiAvatar, {
4+
type AvatarProps as MuiAvatarProps,
5+
} from "@mui/material/Avatar";
6+
import { type FC, useId } from "react";
57
import { css, type Interpolation, type Theme } from "@emotion/react";
6-
import { Box } from "@mui/system";
78
import { visuallyHidden } from "@mui/utils";
89

910
export type AvatarProps = MuiAvatarProps & {
@@ -78,6 +79,8 @@ export const AvatarIcon: FC<AvatarIconProps> = ({ src, alt }) => {
7879
const hookId = useId();
7980
const avatarId = `${hookId}-avatar`;
8081

82+
// We use a `visuallyHidden` element instead of setting `alt` to avoid
83+
// splatting the text out on the screen if the image fails to load.
8184
return (
8285
<>
8386
<img
@@ -86,9 +89,9 @@ export const AvatarIcon: FC<AvatarIconProps> = ({ src, alt }) => {
8689
css={{ maxWidth: "50%" }}
8790
aria-labelledby={avatarId}
8891
/>
89-
<Box id={avatarId} sx={visuallyHidden}>
92+
<div id={avatarId} css={{ ...visuallyHidden }}>
9093
{alt}
91-
</Box>
94+
</div>
9295
</>
9396
);
9497
};

0 commit comments

Comments
 (0)