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

Author: Tristan-WorkGH

src/components/custom-tree-item.tsx

@@ -7,29 +7,20 @@
 
 import { forwardRef, MouseEvent, MouseEventHandler, useCallback, useEffect } from 'react';
 import { UUID } from 'crypto';
-import {
-    Box,
-    BoxProps,
-    IconButton,
-    PopoverReference,
-    SxProps,
-    Theme,
-    Typography,
-    TypographyProps,
-} from '@mui/material';
+import { Box, BoxProps, IconButton, PopoverReference, Typography, TypographyProps } from '@mui/material';
 import { Add as AddIcon, AddBoxOutlined as AddBoxOutlinedIcon } from '@mui/icons-material';
 import { TreeItem, TreeItemContentProps, TreeItemProps, useTreeItemState } from '@mui/x-tree-view';
-import { mergeSx, useStateBoolean } from '@gridsuite/commons-ui';
+import { mergeSx, type SxStyle, useStateBoolean } from '@gridsuite/commons-ui';
 import { useSelector } from 'react-redux';
 import { AppState } from '../redux/types';
 
 export interface TreeItemCustomContentProps {
     styles?: {
-        root?: SxProps<Theme>;
-        selected?: SxProps<Theme>;
-        hovered?: SxProps<Theme>;
-        label?: SxProps<Theme>;
-        iconContainer?: SxProps<Theme>;
+        root?: SxStyle;
+        selected?: SxStyle;
+        hovered?: SxStyle;
+        label?: SxStyle;
+        iconContainer?: SxStyle;
     };
     onExpand: (itemId: UUID) => void;
     onSelect: (itemId: UUID) => void;

src/components/dialogs/delete-dialog.tsx

@@ -14,9 +14,9 @@ import {
     DialogTitle,
     Grid,
 } from '@mui/material';
-import { FormattedMessage, useIntl } from 'react-intl';
-import { SyntheticEvent, useEffect, useRef, useState } from 'react';
-import { CancelButton, ElementAttributes, OverflowableText } from '@gridsuite/commons-ui';
+import { FormattedMessage } from 'react-intl';
+import { type CSSProperties, type SyntheticEvent, useEffect, useRef, useState } from 'react';
+import { CancelButton, type ElementAttributes, type MuiStyles, OverflowableText } from '@gridsuite/commons-ui';
 
 export interface DeleteDialogProps {
     open: boolean;
@@ -32,7 +32,7 @@ const styles = {
     tooltip: {
         maxWidth: '1000px',
     },
-};
+} as const satisfies MuiStyles;
 
 /**
  * Dialog to delete an element
@@ -53,8 +53,6 @@ export default function DeleteDialog({
     simpleDeleteFormatMessageId,
     error,
 }: Readonly<DeleteDialogProps>) {
-    const intl = useIntl();
-
     const [itemsState, setItemsState] = useState<ElementAttributes[]>([]);
 
     const [loadingState, setLoadingState] = useState(false);
@@ -82,20 +80,20 @@ export default function DeleteDialog({
         onClick();
     };
 
-    const buildTitle = () => intl.formatMessage({ id: 'deleteDialogTitle' });
-
     const renderElement = (renderItems: ElementAttributes[]) => {
         const isBig = renderItems[0].elementName?.length > 72;
 
-        const style = isBig
-            ? { width: '100%', fontWeight: 'bold' }
-            : {
-                  fontWeight: 'bold',
-                  marginLeft: 'initial',
-                  marginRight: 'initial',
-                  verticalAlign: 'middle',
-                  display: 'inline-block',
-              };
+        const style = (
+            isBig
+                ? ({ width: '100%', fontWeight: 'bold' } as const)
+                : ({
+                      fontWeight: 'bold',
+                      marginLeft: 'initial',
+                      marginRight: 'initial',
+                      verticalAlign: 'middle',
+                      display: 'inline-block',
+                  } as const)
+        ) satisfies CSSProperties;
         return <OverflowableText text={renderItems[0].elementName} style={style} tooltipSx={styles.tooltip} />;
     };
 
@@ -108,34 +106,25 @@ export default function DeleteDialog({
         (gridItems.length > 1 ? (
             <Grid>
                 <Grid item>
-                    <span>
-                        {intl.formatMessage({
-                            id: gridMultipleDeleteFormatMessageId,
-                        })}
-                    </span>
+                    <FormattedMessage tagName="span" id={gridMultipleDeleteFormatMessageId} />
                 </Grid>
             </Grid>
         ) : (
             <Grid>
                 <Grid item>
-                    <span>
-                        {intl.formatMessage(
-                            {
-                                id: gridSimpleDeleteFormatMessageId,
-                            },
-                            {
-                                itemName: <span>{gridItems.length === 1 && renderElement(gridItems)}</span>,
-                            }
-                        )}
-                    </span>
+                    <FormattedMessage
+                        tagName="span"
+                        id={gridSimpleDeleteFormatMessageId}
+                        values={{ itemName: <span>{gridItems.length === 1 && renderElement(gridItems)}</span> }}
+                    />
                 </Grid>
             </Grid>
         ));
 
     return (
         <Dialog open={open} onClose={handleClose} aria-labelledby="dialog-title-delete">
             <DialogTitle style={{ display: 'flex' }} data-testid="DialogTitle">
-                {buildTitle()}
+                <FormattedMessage id="deleteDialogTitle" />
             </DialogTitle>
             <DialogContent>
                 {buildItemsToDeleteGrid(itemsState, multipleDeleteFormatMessageId, simpleDeleteFormatMessageId)}

src/components/dialogs/field-hook.tsx

@@ -9,7 +9,7 @@ import { ChangeEvent, ReactNode, useCallback, useEffect, useMemo, useState } fro
 import { FormattedMessage, useIntl } from 'react-intl';
 import { CircularProgress, InputAdornment, TextField, TextFieldProps } from '@mui/material';
 import { Check as CheckIcon } from '@mui/icons-material';
-import { ElementType, useDebounce } from '@gridsuite/commons-ui';
+import { ElementType, type MuiStyles, useDebounce } from '@gridsuite/commons-ui';
 import { UUID } from 'crypto';
 import { elementExists, rootDirectoryExists } from '../../utils/rest-api';
 
@@ -18,7 +18,7 @@ const styles = {
         margin: 0,
         marginTop: 4,
     },
-};
+} as const satisfies MuiStyles;
 
 export interface UseTextValueProps extends Omit<TextFieldProps, 'label' | 'defaultValue'> {
     label: string;

src/components/directory-breadcrumbs.tsx

@@ -6,38 +6,38 @@
  */
 
 import { useDispatch, useSelector } from 'react-redux';
-import { Box, Breadcrumbs, emphasize, Link, SxProps, Theme, Tooltip, Typography } from '@mui/material';
+import { Box, Breadcrumbs, emphasize, Link, Tooltip, Typography } from '@mui/material';
 import { FolderOpen as FolderOpenIcon } from '@mui/icons-material';
-import { ElementAttributes, mergeSx } from '@gridsuite/commons-ui';
+import { type ElementAttributes, mergeSx, type MuiStyles } from '@gridsuite/commons-ui';
 import { MouseEvent } from 'react';
 import { setSelectedDirectory } from '../redux/actions';
 import { AppState } from '../redux/types';
 
 const styles = {
-    link: (theme: Theme) => ({
+    link: (theme) => ({
         display: 'inline-grid',
         alignItems: 'center',
         textAlign: 'center',
         color: theme.link.color,
 
-        backgroundColor: theme.row.primary,
+        backgroundColor: theme.row.primary as string,
         padding: theme.spacing(0.5, 2, 0.5),
         borderRadius: theme.spacing(2),
 
         '&:hover, &:focus': {
-            backgroundColor: theme.row.hover,
+            backgroundColor: theme.row.hover as string,
             textDecoration: 'none',
         },
         '&:active': {
             backgroundColor: emphasize(theme.row.hover as string, 0.15),
         },
     }),
-    directory: (theme: Theme) => ({
+    directory: (theme) => ({
         display: 'inline-grid',
         alignItems: 'center',
         textAlign: 'center',
 
-        backgroundColor: theme.row.hover,
+        backgroundColor: theme.row.hover as string,
         padding: theme.spacing(0.5, 2, 0.5),
         borderRadius: theme.spacing(2),
 
@@ -46,14 +46,14 @@ const styles = {
     selectedLabel: {
         fontWeight: 'bold',
     },
-    icon: (theme: Theme) => ({
+    icon: (theme) => ({
         marginRight: theme.spacing(1),
         width: theme.spacing(2.25),
         height: theme.spacing(2.25),
         position: 'relative',
         top: theme.spacing(0.5),
     }),
-    breadcrumbs: (theme: Theme) => ({
+    breadcrumbs: (theme) => ({
         padding: theme.spacing(0.5, 0, 0.5),
         marginLeft: theme.spacing(1),
     }),
@@ -62,7 +62,7 @@ const styles = {
         whiteSpace: 'nowrap',
         overflow: 'hidden',
     },
-};
+} as const satisfies MuiStyles;
 
 export default function DirectoryBreadcrumbs() {
     const dispatch = useDispatch();
@@ -81,7 +81,7 @@ export default function DirectoryBreadcrumbs() {
         if (selectedDirectory !== null && currentPath !== null && currentPath.length > 1) {
             return currentPath.slice(0, currentPath.length - 1).map((dir, index) => (
                 <Link
-                    sx={styles.link as SxProps}
+                    sx={styles.link}
                     key={dir.elementUuid}
                     href="/"
                     onClick={(event: MouseEvent<HTMLElement>) => handleSelect(event, dir)}
@@ -106,7 +106,7 @@ export default function DirectoryBreadcrumbs() {
         if (selectedDirectory !== null && currentPath !== null && currentPath.length > 0) {
             return (
                 <Tooltip title={currentPath[currentPath.length - 1].elementName}>
-                    <Box sx={styles.directory as SxProps}>
+                    <Box sx={styles.directory}>
                         <Typography sx={mergeSx(styles.selectedLabel, styles.limitTextSize)} color="textPrimary">
                             {currentPath.length === 1 && <FolderOpenIcon sx={styles.icon} />}
                             {currentPath[currentPath.length - 1].elementName}

src/components/directory-content-table.tsx

@@ -7,13 +7,14 @@
 
 import { CustomAGGrid, ElementAttributes, ElementType } from '@gridsuite/commons-ui';
 import { AgGridReact, AgGridReactProps } from 'ag-grid-react';
-import {
+import type {
     AgGridEvent,
     CellClickedEvent,
     CellContextMenuEvent,
     ColDef,
     GetRowIdParams,
     RowClassParams,
+    RowStyle,
 } from 'ag-grid-community';
 import { RefObject, useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -40,7 +41,7 @@ const recomputeOverFlowableCells = ({ api }: AgGridEvent) =>
 export const CUSTOM_ROW_CLASS = 'custom-row-class';
 
 const getClickableRowStyle = (cellData: RowClassParams<ElementAttributes>) => {
-    const style: Record<string, string> = { fontSize: '1rem' };
+    const style: RowStyle = { fontSize: '1rem' };
     if (
         cellData.data &&
         ![

src/components/directory-content.tsx

@@ -8,16 +8,13 @@
 import { type MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { FormattedMessage, useIntl } from 'react-intl';
+import { Box, type BoxProps, Button, type ButtonProps, CircularProgress } from '@mui/material';
 import {
-    Box,
-    type BoxProps,
-    Button,
-    type ButtonProps,
-    CircularProgress,
-    type SxProps,
-    type Theme,
-} from '@mui/material';
-import { type ElementAttributes, type ItemSelectionForCopy, NO_ITEM_SELECTION_FOR_COPY } from '@gridsuite/commons-ui';
+    type ElementAttributes,
+    type ItemSelectionForCopy,
+    type MuiStyles,
+    NO_ITEM_SELECTION_FOR_COPY,
+} from '@gridsuite/commons-ui';
 import { Add as AddIcon } from '@mui/icons-material';
 import { AgGridReact } from 'ag-grid-react';
 import * as constants from '../utils/UIconstants';
@@ -43,7 +40,7 @@ import { AnchorStatesType, defaultAnchorStates } from './menus/anchor-utils';
 const circularProgressSize = '70px';
 
 const styles = {
-    link: (theme: Theme) => ({
+    link: (theme) => ({
         color: theme.link.color,
         textDecoration: 'none',
     }),
@@ -59,17 +56,17 @@ const styles = {
     centeredCircularProgress: {
         alignSelf: 'center',
     },
-    highlightedElementAnimation: (theme: Theme) => ({
+    highlightedElementAnimation: (theme) => ({
         '@keyframes highlighted-element': {
             'from, 24%': {
                 backgroundColor: 'inherit',
             },
             '12%, 36%, to': {
-                backgroundColor: theme.row.hover,
+                backgroundColor: theme.row.hover as string,
             },
         },
     }),
-    button: (theme: Theme) => ({
+    button: (theme) => ({
         marginRight: theme.spacing(9),
         borderRadius: '20px',
     }),
@@ -79,12 +76,12 @@ const styles = {
         justifyContent: 'space-between',
         alignItems: 'center',
     },
-};
+} as const satisfies MuiStyles;
 
 export default function DirectoryContent() {
     const treeData = useSelector((state: AppState) => state.treeData);
     const dispatch = useDispatch();
-    const gridRef = useRef<AgGridReact | null>(null);
+    const gridRef = useRef<AgGridReact<ElementAttributes> | null>(null);
     const [onGridReady, getRowStyle] = useHighlightSearchedElement(gridRef?.current?.api ?? null);
 
     const [broadcastChannel] = useState(() => {
@@ -285,7 +282,7 @@ export default function DirectoryContent() {
                 flexGrow={1}
                 minHeight={0}
                 overflow="auto"
-                sx={styles.highlightedElementAnimation as SxProps}
+                sx={styles.highlightedElementAnimation}
                 onContextMenu={onContextMenu}
                 data-testid="DirectoryContent"
             >

src/components/directory-tree-view.tsx

@@ -7,10 +7,10 @@
 
 import { MouseEvent as ReactMouseEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { ChevronRight as ChevronRightIcon, ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
-import { Box, PopoverReference, SxProps, Theme, Tooltip, Typography, Zoom } from '@mui/material';
+import { Box, type PopoverReference, Tooltip, Typography, Zoom } from '@mui/material';
 import { useDispatch, useSelector } from 'react-redux';
 import { SimpleTreeView } from '@mui/x-tree-view';
-import { ElementAttributes } from '@gridsuite/commons-ui';
+import { type ElementAttributes, type MuiStyles } from '@gridsuite/commons-ui';
 import { UUID } from 'crypto';
 // eslint-disable-next-line import/no-extraneous-dependencies -- lib from MUI
 import CustomTreeItem from './custom-tree-item';
@@ -71,7 +71,7 @@ const styles = {
         width: '18px',
         height: '18px',
     }),
-} satisfies Record<string, SxProps<Theme>>;
+} as const satisfies MuiStyles;
 
 function CustomEndIcon() {
     return <ChevronRightIcon sx={styles.icon} />;