Skip to content

Commit a6285dd

Browse files
jaaydenhclaude
jaaydenh
and
claude
authored
chore(site): mark MUI components and Stack as deprecated (#20973)
Adds deprecation markers for MUI components and the custom Stack component to guide migration to shadcn/ui and Tailwind CSS. Changes: - Added JSDoc @deprecated tags to Stack component and type definitions - Added deprecation comments to MUI imports in theme files - Expanded Biome noRestrictedImports rules to flag all MUI component imports --------- Co-authored-by: Claude <noreply@anthropic.com>
1 parent ac1d51a commit a6285dd

File tree

10 files changed

+98
-21
lines changed

10 files changed

+98
-21
lines changed

‎biome.jsonc‎

Lines changed: 69 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,12 @@
1717
"useSemanticElements": "off",
1818
"noStaticElementInteractions": "off"
1919
},
20-
"correctness": {
21-
"noUnusedImports": "warn",
20+
"correctness": {
21+
"noUnusedImports": "warn",
2222
"useUniqueElementIds": "off", // TODO: This is new but we want to fix it
2323
"noNestedComponentDefinitions": "off", // TODO: Investigate, since it is used by shadcn components
24-
"noUnusedVariables": {
25-
"level": "warn",
24+
"noUnusedVariables": {
25+
"level": "warn",
2626
"options": {
2727
"ignoreRestSiblings": true
2828
}
@@ -40,19 +40,76 @@
4040
"useNumberNamespace": "error",
4141
"noInferrableTypes": "error",
4242
"noUselessElse": "error",
43-
"noRestrictedImports": {
44-
"level": "error",
43+
"noRestrictedImports": {
44+
"level": "error",
4545
"options": {
4646
"paths": {
47-
"@mui/material": "Use @mui/material/<name> instead. See: https://material-ui.com/guides/minimizing-bundle-size/.",
47+
// "@mui/material/Alert": "Use components/Alert/Alert instead.",
48+
// "@mui/material/AlertTitle": "Use components/Alert/Alert instead.",
49+
// "@mui/material/Autocomplete": "Use shadcn/ui Combobox instead.",
4850
"@mui/material/Avatar": "Use components/Avatar/Avatar instead.",
49-
"@mui/material/Alert": "Use components/Alert/Alert instead.",
51+
"@mui/material/Box": "Use a <div> with Tailwind classes instead.",
52+
"@mui/material/Button": "Use components/Button/Button instead.",
53+
// "@mui/material/Card": "Use shadcn/ui Card component instead.",
54+
// "@mui/material/CardActionArea": "Use shadcn/ui Card component instead.",
55+
// "@mui/material/CardContent": "Use shadcn/ui Card component instead.",
56+
// "@mui/material/Checkbox": "Use shadcn/ui Checkbox component instead.",
57+
// "@mui/material/Chip": "Use components/Badge or Tailwind styles instead.",
58+
// "@mui/material/CircularProgress": "Use components/Spinner/Spinner instead.",
59+
// "@mui/material/Collapse": "Use shadcn/ui Collapsible instead.",
60+
// "@mui/material/CssBaseline": "Use Tailwind CSS base styles instead.",
61+
// "@mui/material/Dialog": "Use shadcn/ui Dialog component instead.",
62+
// "@mui/material/DialogActions": "Use shadcn/ui Dialog component instead.",
63+
// "@mui/material/DialogContent": "Use shadcn/ui Dialog component instead.",
64+
// "@mui/material/DialogContentText": "Use shadcn/ui Dialog component instead.",
65+
// "@mui/material/DialogTitle": "Use shadcn/ui Dialog component instead.",
66+
// "@mui/material/Divider": "Use shadcn/ui Separator or <hr> with Tailwind instead.",
67+
// "@mui/material/Drawer": "Use shadcn/ui Sheet component instead.",
68+
// "@mui/material/FormControl": "Use native form elements with Tailwind instead.",
69+
// "@mui/material/FormControlLabel": "Use shadcn/ui Label with form components instead.",
70+
// "@mui/material/FormGroup": "Use a <div> with Tailwind classes instead.",
71+
// "@mui/material/FormHelperText": "Use a <p> with Tailwind classes instead.",
72+
// "@mui/material/FormLabel": "Use shadcn/ui Label component instead.",
73+
// "@mui/material/Grid": "Use Tailwind grid utilities instead.",
74+
// "@mui/material/IconButton": "Use components/Button/Button with variant='icon' instead.",
75+
// "@mui/material/InputAdornment": "Use Tailwind positioning in input wrapper instead.",
76+
// "@mui/material/InputBase": "Use shadcn/ui Input component instead.",
77+
// "@mui/material/LinearProgress": "Use a progress bar with Tailwind instead.",
78+
// "@mui/material/Link": "Use React Router Link or native <a> tags instead.",
79+
// "@mui/material/List": "Use native <ul> with Tailwind instead.",
80+
// "@mui/material/ListItem": "Use native <li> with Tailwind instead.",
81+
// "@mui/material/ListItemIcon": "Use lucide-react icons in list items instead.",
82+
// "@mui/material/ListItemText": "Use native elements with Tailwind instead.",
83+
// "@mui/material/Menu": "Use shadcn/ui DropdownMenu instead.",
84+
// "@mui/material/MenuItem": "Use shadcn/ui DropdownMenu components instead.",
85+
// "@mui/material/MenuList": "Use shadcn/ui DropdownMenu components instead.",
86+
// "@mui/material/Paper": "Use a <div> with Tailwind shadow/border classes instead.",
5087
"@mui/material/Popover": "Use components/Popover/Popover instead.",
88+
// "@mui/material/Radio": "Use shadcn/ui RadioGroup instead.",
89+
// "@mui/material/RadioGroup": "Use shadcn/ui RadioGroup instead.",
90+
// "@mui/material/Select": "Use shadcn/ui Select component instead.",
91+
// "@mui/material/Skeleton": "Use shadcn/ui Skeleton component instead.",
92+
// "@mui/material/Snackbar": "Use components/GlobalSnackbar instead.",
93+
// "@mui/material/Stack": "Use Tailwind flex utilities instead (e.g., <div className='flex flex-col gap-4'>).",
94+
// "@mui/material/styles": "Use Tailwind CSS instead.",
95+
// "@mui/material/SvgIcon": "Use lucide-react icons instead.",
96+
// "@mui/material/Switch": "Use shadcn/ui Switch component instead.",
97+
"@mui/material/Table": "Import from components/Table/Table instead.",
98+
// "@mui/material/TableRow": "Import from components/Table/Table instead.",
99+
// "@mui/material/TextField": "Use shadcn/ui Input component instead.",
100+
// "@mui/material/ToggleButton": "Use shadcn/ui Toggle or custom component instead.",
101+
// "@mui/material/ToggleButtonGroup": "Use shadcn/ui Toggle or custom component instead.",
102+
// "@mui/material/Tooltip": "Use shadcn/ui Tooltip component instead.",
51103
"@mui/material/Typography": "Use native HTML elements instead. Eg: <span>, <p>, <h1>, etc.",
52-
"@mui/material/Box": "Use a <div> instead.",
53-
"@mui/material/Button": "Use a components/Button/Button instead.",
54-
"@mui/material/styles": "Import from @emotion/react instead.",
55-
"@mui/material/Table*": "Import from components/Table/Table instead.",
104+
// "@mui/material/useMediaQuery": "Use Tailwind responsive classes or custom hook instead.",
105+
// "@mui/system": "Use Tailwind CSS instead.",
106+
// "@mui/utils": "Use native alternatives or utility libraries instead.",
107+
// "@mui/x-tree-view": "Use a Tailwind-compatible alternative.",
108+
// "@emotion/css": "Use Tailwind CSS instead.",
109+
// "@emotion/react": "Use Tailwind CSS instead.",
110+
"@emotion/styled": "Use Tailwind CSS instead.",
111+
// "@emotion/cache": "Use Tailwind CSS instead.",
112+
// "components/Stack/Stack": "Use Tailwind flex utilities instead (e.g., <div className='flex flex-col gap-4'>).",
56113
"lodash": "Use lodash/<name> instead."
57114
}
58115
}

‎site/.storybook/preview.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import CssBaseline from "@mui/material/CssBaseline";
44
import {
55
ThemeProvider as MuiThemeProvider,
66
StyledEngineProvider,
7-
// biome-ignore lint/style/noRestrictedImports: we extend the MUI theme
87
} from "@mui/material/styles";
98
import { DecoratorHelpers } from "@storybook/addon-themes";
109
import isChromatic from "chromatic/isChromatic";

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
// biome-ignore lint/style/noRestrictedImports: base theme types
21
import type { PaletteColor, PaletteColorOptions } from "@mui/material/styles";
32

43
declare module "@mui/material/styles" {

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import MuiAlert, {
22
type AlertColor as MuiAlertColor,
33
type AlertProps as MuiAlertProps,
4-
// biome-ignore lint/style/noRestrictedImports: Used as base component
54
} from "@mui/material/Alert";
65
import Collapse from "@mui/material/Collapse";
76
import { Button } from "components/Button/Button";

‎site/src/components/Stack/Stack.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import type { CSSObject } from "@emotion/react";
22
import { forwardRef } from "react";
33

4+
/**
5+
* @deprecated Stack component is deprecated. Use Tailwind flex utilities instead.
6+
*/
47
type StackProps = {
58
className?: string;
69
direction?: "column" | "row";
@@ -10,6 +13,9 @@ type StackProps = {
1013
wrap?: CSSObject["flexWrap"];
1114
} & React.HTMLProps<HTMLDivElement>;
1215

16+
/**
17+
* @deprecated Stack component is deprecated. Use Tailwind flex utilities instead.
18+
*/
1319
export const Stack = forwardRef<HTMLDivElement, StackProps>((props, ref) => {
1420
const {
1521
children,

‎site/src/contexts/ThemeProvider.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import createCache from "@emotion/cache";
2+
/** @deprecated Emotion is deprecated. Migrate to Tailwind CSS. */
23
import {
34
CacheProvider,
45
ThemeProvider as EmotionThemeProvider,
56
} from "@emotion/react";
7+
/** @deprecated MUI CssBaseline is deprecated. Migrate to shadcn/ui components and Tailwind CSS. */
68
import CssBaseline from "@mui/material/CssBaseline";
9+
/** @deprecated MUI components are deprecated. Migrate to shadcn/ui components and Tailwind CSS. */
710
import {
811
ThemeProvider as MuiThemeProvider,
912
StyledEngineProvider,
10-
// biome-ignore lint/style/noRestrictedImports: we extend the MUI theme
1113
} from "@mui/material/styles";
1214
import { appearanceSettings } from "api/queries/users";
1315
import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";

‎site/src/theme/dark/mui.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
// biome-ignore lint/style/noRestrictedImports: createTheme
1+
/**
2+
* @deprecated MUI dark theme is deprecated. Migrate to Tailwind CSS theme system.
3+
* This file provides MUI theme configuration for legacy compatibility only.
4+
*/
5+
6+
/** @deprecated MUI createTheme is deprecated. Migrate to Tailwind CSS theme system. */
27
import { createTheme } from "@mui/material/styles";
38
import { BODY_FONT_FAMILY, borderRadius } from "../constants";
49
import { components } from "../mui";

‎site/src/theme/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// biome-ignore lint/style/noRestrictedImports: We still use `Theme` as a basis for our actual theme, for now.
1+
/** @deprecated MUI Theme type is deprecated. Migrate to Tailwind CSS theme system. */
22
import type { Theme as MuiTheme } from "@mui/material/styles";
33
import type * as monaco from "monaco-editor";
44
import type { Branding } from "./branding";

‎site/src/theme/light/mui.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
// biome-ignore lint/style/noRestrictedImports: createTheme
1+
/**
2+
* @deprecated MUI light theme is deprecated. Migrate to Tailwind CSS theme system.
3+
* This file provides MUI theme configuration for legacy compatibility only.
4+
*/
5+
6+
/** @deprecated MUI createTheme is deprecated. Migrate to Tailwind CSS theme system. */
27
import { createTheme } from "@mui/material/styles";
38
import { BODY_FONT_FAMILY, borderRadius } from "../constants";
49
import { components } from "../mui";

‎site/src/theme/mui.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
1-
// biome-ignore lint/style/noRestrictedImports: we use the classes for customization
1+
/**
2+
* @deprecated MUI theme configuration is deprecated. Migrate to Tailwind CSS theme system.
3+
* This file provides MUI theme overrides for legacy compatibility only.
4+
*/
5+
6+
/** @deprecated MUI Alert classes are deprecated. Use shadcn/ui Alert component instead. */
27
import { alertClasses } from "@mui/material/Alert";
3-
// biome-ignore lint/style/noRestrictedImports: we use the MUI theme as a base
8+
/** @deprecated MUI ThemeOptions is deprecated. Migrate to Tailwind CSS theme system. */
49
import type { ThemeOptions } from "@mui/material/styles";
510
import {
611
BODY_FONT_FAMILY,

0 commit comments

Comments
 (0)