Check styles and export augmentation mui

README.md

@@ -2,7 +2,22 @@
 
 Library for sharing GridSuite apps commons components
 
-#### For developers
+
+## Use and integration
+### MUI & Emotion styles
+Some components of commons-ui define custom rules in Mui styling system that need
+to be initialized.  
+To have TypeScript helping (through module augmentation), you can in a `.d.ts`
+file at the root of your project source folder (like `globals.d.ts`):
+```ts
+/// <reference types="@gridsuite/commons-ui/module-mui" />
+/// <reference types="@gridsuite/commons-ui/module-emotion" />
+```
+Typescript will check the new options with function related to `Theme` interface.
+
+
+## Build & deploy
+### For developers
 
 The commons-ui library have a demo app in which you can call your components to test them.
 The `npm start` command install the library's dependencies then launches the demo app.
@@ -13,10 +28,9 @@ to build commons-ui via
 - `npm run build:pack`
 
 Then in the my-app project :
-- Change the commons-ui dependency in my-app's package.json from    
-`@gridsuite/commons-ui:"^x.x.x"`    
-to     
-`@gridsuite/commons-ui:"file:{PATH_TO_LIBRARY}/gridsuite-commons-ui-{LIBRARY_VERSION}.tgz"` 
+- Change the commons-ui dependency in my-app's `package.json`
+    from`@gridsuite/commons-ui:"^x.x.x"`
+    to `@gridsuite/commons-ui:"file:{PATH_TO_LIBRARY}/gridsuite-commons-ui-{LIBRARY_VERSION}.tgz"` 
 - `npm install`
 - `npm start`
 
@@ -25,11 +39,10 @@ To fix this, run this command from the app **after** running "npm install"
 - rm -Rf node_modules/.cache
 
 
-#### For integrators
+### For integrators
 
 If you want to deploy a new version of commons-ui in the [NPM package registry](https://www.npmjs.com/package/@gridsuite/commons-ui),
 you need to follow the steps below:
-
 -   Update to the new version in [package.json](https://github.com/gridsuite/commons-ui/blob/main/package.json) (example `0.6.0`)
 -   Build it: `npm install`
 -   Commit the package.json and package-lock.json files, push to a branch, make a PR, have it reviewed and merged to main.
@@ -40,14 +53,13 @@ you need to follow the steps below:
     - Click on "Publish release"
 -   It will trigger a job that will publish the release on NPM
 
-#### License Headers and dependencies checking
+### License Headers and dependencies checking
 
 To check dependencies license compatibility with this project one locally, please run the following command :
-
-```
+```shell
 npm run licenses-check
 ```
 
-Notes : 
-* Check [license-checker-config.json](license-checker-config.json) for license white list and exclusion.
+Notes:  
+Check [license-checker-config.json](license-checker-config.json) for license white list and exclusion.
 If you need to update this list, please inform organization's owners.

package.json

@@ -1,16 +1,30 @@
 {
     "name": "@gridsuite/commons-ui",
     "version": "0.65.1",
-    "description": "common react components for gridsuite applications",
+    "description": "Common React components for GridSuite applications",
     "engines": {
         "npm": ">=9",
         "node": ">=18"
     },
-    "exports": "./dist/index.js",
     "module": "./dist/index.js",
     "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/index.js",
+            "types": "./dist/index.d.ts"
+        },
+        "./module-mui": {
+            "types": "./src/module-mui.d.ts"
+        },
+        "./module-emotion": {
+            "types": "./src/module-emotion.d.ts"
+        },
+        "./package.json": "./package.json"
+    },
     "files": [
-        "dist"
+        "dist",
+        "src/module-mui.d.ts",
+        "src/module-emotion.d.ts"
     ],
     "sideEffects": [
         "**/*.css"
@@ -46,18 +60,18 @@
         "uuid": "^9.0.1"
     },
     "peerDependencies": {
-        "@mui/system": "^5.15.15",
-        "@mui/x-tree-view": "^6.17.0",
-        "papaparse": "^5.4.1",
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.0",
         "@hookform/resolvers": "^3.3.4",
         "@mui/icons-material": "^5.15.14",
         "@mui/lab": "5.0.0-alpha.169",
         "@mui/material": "^5.15.14",
+        "@mui/system": "^5.15.15",
+        "@mui/x-tree-view": "^6.17.0",
         "ag-grid-community": "^31.0.0",
         "ag-grid-react": "^31.2.0",
         "notistack": "^3.0.1",
+        "papaparse": "^5.4.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.51.2",

src/components/authentication/Login.tsx

@@ -4,37 +4,38 @@
  * 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 { 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;
     disabled: boolean;
 }
 
-function Login({ onLoginClick, disabled }: LoginProps) {
+function Login({ onLoginClick, disabled }: Readonly<LoginProps>) {
     return (
         <Container component="main" maxWidth="xs">
             <Box sx={styles.paper}>

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 { 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

@@ -19,9 +19,8 @@ import {
     Collapse,
     IconButton,
     IconButtonProps,
-    Theme,
-    Typography,
     styled,
+    Typography,
 } from '@mui/material';
 import { Component, ErrorInfo, ReactNode } from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -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/DraggableClickableCheckBoxItem.tsx

@@ -9,15 +9,16 @@ import { Checkbox, IconButton, ListItemIcon, ListItemText } from '@mui/material'
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import OverflowableText from '../overflowableText';
 import { DraggableClickableItemProps } from './checkBoxList.type';
+import { MuiStyles } from '../../utils/styles';
 
 const styles = {
-    dragIcon: (theme: any) => ({
+    dragIcon: (theme) => ({
         padding: 'unset',
         border: theme.spacing(0),
         borderRadius: theme.spacing(0),
         zIndex: 90,
     }),
-};
+} as const satisfies MuiStyles;
 
 export function DraggableClickableCheckBoxItem({
     sx,

src/components/checkBoxList/DraggableClickableRowItem.tsx

@@ -9,15 +9,16 @@ import { Checkbox, IconButton, ListItemButton, ListItemIcon, ListItemText } from
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import OverflowableText from '../overflowableText';
 import { DraggableClickableItemProps } from './checkBoxList.type';
+import { MuiStyles } from '../../utils/styles';
 
 const styles = {
-    dragIcon: (theme: any) => ({
+    dragIcon: (theme) => ({
         padding: 'unset',
         border: theme.spacing(0),
         borderRadius: theme.spacing(0),
         zIndex: 90,
     }),
-};
+} as const satisfies MuiStyles;
 
 export function DraggableClickableRowItem({
     sx,

src/components/checkBoxList/checkBoxList.type.ts

@@ -5,26 +5,26 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import React from 'react';
+import { ReactElement } from 'react';
 import { DraggableProvided, DragStart, DropResult } from 'react-beautiful-dnd';
-import { SxProps } from '@mui/system';
+import { MuiStyle } from '../../utils/styles';
 
 export interface CheckBoxListItemSxProps {
-    checkBoxIcon?: SxProps;
-    label?: SxProps;
-    checkboxListItem?: SxProps;
-    checkboxButton?: SxProps;
-    checkbox?: SxProps;
-    dragAndDropContainer?: SxProps;
-    checkboxList?: SxProps;
+    checkBoxIcon?: MuiStyle;
+    label?: MuiStyle;
+    checkboxListItem?: MuiStyle;
+    checkboxButton?: MuiStyle;
+    checkbox?: MuiStyle;
+    dragAndDropContainer?: MuiStyle;
+    checkboxList?: MuiStyle;
 }
 
 export interface CheckBoxListItemProps<T> {
     item: T;
     sx?: CheckBoxListItemSxProps;
     label: string;
     onClick: () => void;
-    secondaryAction?: (item: T, hover: string) => React.ReactElement | null;
+    secondaryAction?: (item: T, hover: string) => ReactElement | null;
     getItemId: (item: T) => string;
     disabled?: boolean;
     divider?: boolean;
@@ -43,7 +43,7 @@ export interface CheckBoxListItemsProps<T> {
     onSelectionChange?: (selectedItems: T[]) => void;
     getItemId: (item: T) => string;
     getItemLabel?: (item: T) => string;
-    secondaryAction?: (item: T) => React.ReactElement | null;
+    secondaryAction?: (item: T) => ReactElement | null;
     enableSecondaryActionOnHover?: boolean;
     isDisabled?: (item: T) => boolean;
     addSelectAllCheckbox?: boolean;

src/components/customAGGrid/customAggrid.style.ts

@@ -4,13 +4,13 @@
  * 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 { Theme } from '@mui/material/styles/createTheme';
-import { SystemStyleObject } from '@mui/system/styleFunctionSx/styleFunctionSx';
+
+import { MuiStyles } from '../../utils/styles';
 
 export const CUSTOM_AGGRID_THEME = 'custom-aggrid-theme';
 
 export const styles = {
-    grid: (theme: Theme): SystemStyleObject<Theme> => ({
+    grid: (theme) => ({
         width: 'auto',
         height: '100%',
         position: 'relative',
@@ -49,12 +49,12 @@ export const styles = {
             borderRight: 'none',
         },
     },
-    overlayBackground: (theme: Theme) => ({
+    overlayBackground: (theme) => ({
         '& .ag-overlay-loading-wrapper': {
             background: theme.aggrid.overlay.background,
         },
         '& .ag-overlay-no-rows-wrapper': {
             background: 'none',
         },
     }),
-};
+} as const satisfies MuiStyles;

src/components/customAGGrid/customAggrid.tsx

@@ -5,17 +5,15 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import React, { useCallback } from 'react';
-import { Theme } from '@mui/material/styles/createTheme';
+import { forwardRef, useCallback } from 'react';
+import { Box, useTheme } from '@mui/material';
 import { AgGridReact, AgGridReactProps } from 'ag-grid-react';
 import { useIntl } from 'react-intl';
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
 import { ColumnResizedEvent, GetLocaleTextParams } from 'ag-grid-community';
-import { Box } from '@mui/system';
-import { SxProps, useTheme } from '@mui/material';
 import { mergeSx } from '../../utils/styles';
-import { styles, CUSTOM_AGGRID_THEME } from './customAggrid.style';
+import { CUSTOM_AGGRID_THEME, styles } from './customAggrid.style';
 
 interface CustomAGGGridStyleProps {
     shouldHidePinnedHeaderRightBorder?: boolean;
@@ -36,15 +34,15 @@ const onColumnResized = (params: ColumnResizedEvent) => {
     }
 };
 
-const CustomAGGrid = React.forwardRef<AgGridReact, CustomAGGridProps>((props, ref) => {
+const CustomAGGrid = forwardRef<AgGridReact, CustomAGGridProps>((props, ref) => {
     const {
         shouldHidePinnedHeaderRightBorder = false,
         overlayNoRowsTemplate,
         loadingOverlayComponent,
         loadingOverlayComponentParams,
         showOverlay = false,
     } = props;
-    const theme = useTheme<Theme>();
+    const theme = useTheme();
     const intl = useIntl();
 
     const GRID_PREFIX = 'grid.';
@@ -63,9 +61,9 @@ const CustomAGGrid = React.forwardRef<AgGridReact, CustomAGGridProps>((props, re
     return (
         <Box
             sx={mergeSx(
-                styles.grid as SxProps | undefined,
+                styles.grid,
                 shouldHidePinnedHeaderRightBorder ? styles.noBorderRight : undefined,
-                showOverlay ? (styles.overlayBackground as SxProps | undefined) : undefined
+                showOverlay ? styles.overlayBackground : undefined
             )}
             className={`${theme.aggrid.theme} ${CUSTOM_AGGRID_THEME}`}
         >