Check styles declaration against MUI Theme with TypeScript (#855)

* Add type
* Check styles with TypeScript

Author: Tristan-WorkGH

src/components/announcement/AnnouncementBanner.tsx

@@ -6,20 +6,11 @@
  */
 import type { UUID } from 'crypto';
 import { type PropsWithChildren, type ReactNode, useCallback, useEffect, useState } from 'react';
-import {
-    Alert,
-    type AlertColor,
-    type AlertProps,
-    AlertTitle,
-    Collapse,
-    type SxProps,
-    type Theme,
-    Tooltip,
-    useTheme,
-} from '@mui/material';
+import { Alert, type AlertColor, type AlertProps, AlertTitle, Collapse, Tooltip, useTheme } from '@mui/material';
 import { Campaign as CampaignIcon } from '@mui/icons-material';
 import type { User } from 'oidc-client';
 import { AnnouncementSeverity } from '../../utils/types';
+import type { MuiStyles } from '../../utils/styles';
 
 // Pick the same color than Snackbar
 const snackbarInfo = '#2196f3';
@@ -37,7 +28,7 @@ const styles = {
             backgroundColor: snackbarInfo,
         },
     }),
-} as const satisfies Record<string, SxProps<Theme>>;
+} as const satisfies MuiStyles;
 
 export type AnnouncementBannerProps = PropsWithChildren<{
     // message only visible if user logged

src/components/authentication/Login.tsx

@@ -4,30 +4,31 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { Avatar, Box, Button, Container, Link, Theme, Typography } from '@mui/material';
+import { Avatar, Box, Button, Container, Link, Typography } from '@mui/material';
 import { LockOutlined as LockOutlinedIcon } from '@mui/icons-material';
 import { FormattedMessage } from 'react-intl';
+import type { MuiStyles } from '../../utils/styles';
 
 const styles = {
-    paper: (theme: Theme) => ({
+    paper: (theme) => ({
         marginTop: theme.spacing(8),
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
     }),
-    avatar: (theme: Theme) => ({
+    avatar: (theme) => ({
         margin: theme.spacing(1),
         backgroundColor: theme.palette.secondary.main,
     }),
-    submit: (theme: Theme) => ({
+    submit: (theme) => ({
         margin: theme.spacing(3, 0, 2),
         borderRadius: '30px',
     }),
     logo: {
         width: 64,
         height: 64,
     },
-};
+} as const satisfies MuiStyles;
 
 export interface LoginProps {
     onLoginClick: () => void;

src/components/authentication/Logout.tsx

@@ -5,26 +5,27 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Avatar, Box, Button, Container, Link, Theme, Typography } from '@mui/material';
+import { Avatar, Box, Button, Container, Link, Typography } from '@mui/material';
 import { LogoutOutlined as LogoutOutlinedIcon } from '@mui/icons-material';
 import { FormattedMessage } from 'react-intl';
+import type { MuiStyles } from '../../utils/styles';
 
 const styles = {
-    paper: (theme: Theme) => ({
+    paper: (theme) => ({
         marginTop: theme.spacing(8),
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
     }),
-    avatar: (theme: Theme) => ({
+    avatar: (theme) => ({
         margin: theme.spacing(1),
         backgroundColor: theme.palette.error.main,
     }),
-    submit: (theme: Theme) => ({
+    submit: (theme) => ({
         margin: theme.spacing(3, 0, 2),
         borderRadius: '30px',
     }),
-};
+} as const satisfies MuiStyles;
 
 export interface LogoutProps {
     onLogoutClick: () => void;

src/components/cardErrorBoundary/CardErrorBoundary.tsx

@@ -20,7 +20,6 @@ import {
     IconButton,
     type IconButtonProps,
     styled,
-    Theme,
     Typography,
 } from '@mui/material';
 import { Component, type ErrorInfo, type PropsWithChildren } from 'react';
@@ -33,7 +32,7 @@ export interface ExpandMoreProps extends IconButtonProps {
 const ExpandMore = styled((props: ExpandMoreProps) => {
     const { expand, ...other } = props;
     return <IconButton {...other} />;
-})(({ theme, expand }: { theme: Theme; expand: boolean }) => ({
+})(({ theme, expand }) => ({
     transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
     marginLeft: 'auto',
     transition: theme.transitions.create('transform', {

src/components/checkBoxList/CheckBoxListItem.tsx

@@ -10,6 +10,7 @@ import { ListItem, ListItemButton } from '@mui/material';
 import { CheckBoxListItemProps } from './checkBoxList.type';
 import { CheckBoxListItemContent } from './CheckBoxListItemContent';
 import { mergeSx } from '../../utils';
+import type { MuiStyles } from '../../utils/styles';
 
 const styles = {
     checkboxListItem: {
@@ -27,7 +28,7 @@ const styles = {
             paddingRight: '0px',
         },
     },
-};
+} as const satisfies MuiStyles;
 
 export function CheckBoxListItem<T>({
     item,

src/components/checkBoxList/DraggableCheckBoxListItem.tsx

@@ -10,6 +10,7 @@ import { ListItem, ListItemButton } from '@mui/material';
 import { DraggableCheckBoxListItemProps } from './checkBoxList.type';
 import { DraggableCheckBoxListItemContent } from './DraggableCheckBoxListItemContent';
 import { mergeSx } from '../../utils';
+import type { MuiStyles } from '../../utils/styles';
 
 const styles = {
     checkboxListItem: {
@@ -28,7 +29,7 @@ const styles = {
             paddingRight: '0px',
         },
     },
-};
+} as const satisfies MuiStyles;
 
 export function DraggableCheckBoxListItem<T>({
     item,

src/components/checkBoxList/checkBoxList.type.ts

@@ -7,21 +7,21 @@
 
 import type { ReactElement, ReactNode } from 'react';
 import type { DraggableProvided, DragStart, DropResult } from '@hello-pangea/dnd';
-import type { SxProps, Theme } from '@mui/material';
+import type { SxStyle } from '../../utils/styles';
 
 export type CheckBoxListItemSx = {
-    checkBoxIcon?: SxProps<Theme>;
-    listItemText?: SxProps<Theme>;
-    label?: SxProps<Theme>;
-    checkboxListItem?: SxProps<Theme>;
-    checkboxButton?: SxProps<Theme>;
-    checkbox?: SxProps<Theme>;
-    dragButton?: SxProps<Theme>;
+    checkBoxIcon?: SxStyle;
+    listItemText?: SxStyle;
+    label?: SxStyle;
+    checkboxListItem?: SxStyle;
+    checkboxButton?: SxStyle;
+    checkbox?: SxStyle;
+    dragButton?: SxStyle;
 };
 
 export type CheckBoxListSx = {
-    dragAndDropContainer?: SxProps<Theme>;
-    checkboxList?: SxProps<Theme>;
+    dragAndDropContainer?: SxStyle;
+    checkboxList?: SxStyle;
 };
 
 export type CheckBoxListItemSxMethod<T> = (item: T) => CheckBoxListItemSx;

src/components/customAGGrid/customAggrid.style.ts

@@ -4,7 +4,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import type { SxProps, Theme } from '@mui/material';
+import type { MuiStyles } from '../../utils/styles';
 
 export const CUSTOM_AGGRID_THEME = 'custom-aggrid-theme';
 
@@ -42,4 +42,4 @@ export const styles = {
             border: 'none !important',
         },
     }),
-} as const satisfies Record<string, SxProps<Theme>>;
+} as const satisfies MuiStyles;

src/components/customAGGrid/customAggrid.tsx

@@ -12,7 +12,7 @@ import 'ag-grid-community/styles/ag-theme-alpine.css';
 import type { ColumnResizedEvent } from 'ag-grid-community';
 import { AG_GRID_LOCALE_EN, AG_GRID_LOCALE_FR } from '@ag-grid-community/locale';
 import { useIntl } from 'react-intl';
-import { Box, type BoxProps, type Theme, useTheme } from '@mui/material';
+import { Box, type BoxProps, useTheme } from '@mui/material';
 import { mergeSx } from '../../utils/styles';
 import { CUSTOM_AGGRID_THEME, styles } from './customAggrid.style';
 import { type GsLangUser, LANG_ENGLISH, LANG_FRENCH } from '../../utils/langs';
@@ -55,7 +55,7 @@ function onColumnResized({ api, column, finished, source }: ColumnResizedEvent)
 
 export const CustomAGGrid = forwardRef<AgGridReact, CustomAGGridProps>(
     ({ overrideLocales, sx, ...agGridReactProps }, ref) => {
-        const theme = useTheme<Theme>();
+        const theme = useTheme();
 
         return (
             <Box

src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx

@@ -15,6 +15,7 @@ import { CancelButton } from '../../inputs/reactHookForm/utils/CancelButton';
 import { CustomFormProvider } from '../../inputs/reactHookForm/provider/CustomFormProvider';
 import { PopupConfirmationDialog } from '../popupConfirmationDialog/PopupConfirmationDialog';
 import { GsLang } from '../../../utils';
+import type { MuiStyles } from '../../../utils/styles';
 
 export type CustomMuiDialogProps<T extends FieldValues = FieldValues> = DialogProps & {
     open: boolean;
@@ -42,7 +43,7 @@ const styles = {
             margin: 'auto',
         },
     },
-};
+} as const satisfies MuiStyles;
 
 /**
  * all those styles are made to work with each other in order to control the scroll behavior:
@@ -75,7 +76,7 @@ export const unscrollableDialogStyles = {
         overflowY: 'auto',
         padding: 1,
     },
-};
+} as const satisfies MuiStyles;
 
 export function CustomMuiDialog<T extends FieldValues = FieldValues>({
     open,