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,37 +28,38 @@ 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`
 
-*Warning* : with Create React App, we realised the library was not updating correctly if you try to install the library multiple times.
-To fix this, run this command from the app **after** running "npm install"
-- rm -Rf node_modules/.cache
-
+> [!WARNING]
+> with Create React App, we realised the library was not updating correctly if you try to install the library multiple times.  
+> To fix this, run this command from the app **after** running "npm install"
+> ```shell
+> 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:
-
--   [Make a release action](https://github.com/gridsuite/commons-ui/actions/workflows/release.yml)
+  - [Make a release action](https://github.com/gridsuite/commons-ui/actions/workflows/release.yml)
   - In the 'run workflow' combobox select, let the branch on main
   - Enter the type of evolution (major | minor | patch)
   - Enter your NPM access token (it must be an **automation** access token to bypass 2FA, see the [access token documentation](https://docs.npmjs.com/creating-and-viewing-access-tokens) for details)
   - Click 'run workflow'
 
-#### License Headers and dependencies checking
 
-To check dependencies license compatibility with this project one locally, please run the following command :
+### 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.
-If you need to update this list, please inform organization's owners.
+> [!NOTE]  
+> Check [license-checker-config.json](license-checker-config.json) for license whitelist and exclusion.
+> If you need to update this list, please inform organization's owners.

demo/src/TableTab.jsx

@@ -6,8 +6,7 @@
  */
 
 import { useCallback, useMemo, useState } from 'react';
-import { styled } from '@mui/system';
-import { Box, Button, FormControlLabel, Stack, Switch, TextField } from '@mui/material';
+import { Box, Button, FormControlLabel, Stack, styled, Switch, TextField } from '@mui/material';
 import { DEFAULT_CELL_PADDING } from '../../src';
 import {
     ChangeWays,
@@ -37,7 +36,7 @@ const evenThenOddOrderingKey = (n) => {
 };
 
 /**
- * @param {import('@mui/material/styles').Theme} theme Theme from ThemeProvider
+ * @param {import('@mui/material').Theme} theme Theme from ThemeProvider
  */
 const stylesVirtualizedTable = (theme) => ({
     '& .table': {

demo/src/app.jsx

@@ -44,8 +44,6 @@ import {
     testDataTree,
 } from '../data/TreeViewFinder';
 
-import LOGS_JSON from '../data/ReportViewer';
-
 import searchEquipments from '../data/EquipmentSearchBar';
 
 import TableTab from './TableTab';
@@ -55,60 +53,60 @@ import InputsTab from './InputsTab';
 import { EquipmentSearchDialog } from './equipment-search';
 import { InlineSearch } from './inline-search';
 import {
-    MultipleSelectionDialog,
-    OverflowableText,
-    SnackbarProvider,
-    TopBar,
-    TreeViewFinder,
-    CardErrorBoundary,
-    EquipmentItem,
     AuthenticationRouter,
-    reportViewerEn,
-    loginEn,
-    topBarEn,
-    tableEn,
-    treeviewFinderEn,
+    CardErrorBoundary,
+    cardErrorBoundaryEn,
+    cardErrorBoundaryFr,
+    commonButtonEn,
+    commonButtonFr,
+    csvEn,
+    csvFr,
+    descriptionEn,
+    descriptionFr,
     elementSearchEn,
+    elementSearchFr,
+    ElementType,
+    EquipmentItem,
     equipmentSearchEn,
+    equipmentSearchFr,
+    equipmentsEn,
+    equipmentsFr,
     filterEn,
     filterExpertEn,
-    descriptionEn,
-    equipmentsEn,
-    csvEn,
-    cardErrorBoundaryEn,
+    filterExpertFr,
+    filterFr,
     flatParametersEn,
-    multipleSelectionDialogEn,
+    flatParametersFr,
+    generateTreeViewFinderClass,
+    getFileIcon,
+    initializeAuthenticationDev,
     inputsEn,
     inputsFr,
-    multipleSelectionDialogFr,
-    flatParametersFr,
-    cardErrorBoundaryFr,
-    filterExpertFr,
-    csvFr,
-    equipmentsFr,
-    descriptionFr,
-    filterFr,
-    equipmentSearchFr,
-    elementSearchFr,
-    treeviewFinderFr,
-    tableFr,
-    topBarFr,
-    loginFr,
-    reportViewerFr,
-    LIGHT_THEME,
     LANG_ENGLISH,
-    LANG_SYSTEM,
     LANG_FRENCH,
-    ElementType,
-    getFileIcon,
-    initializeAuthenticationDev,
-    toNestedGlobalSelectors,
-    generateTreeViewFinderClass,
-    useSnackMessage,
-    commonButtonEn,
-    commonButtonFr,
+    LANG_SYSTEM,
+    LIGHT_THEME,
+    loginEn,
+    loginFr,
+    MultipleSelectionDialog,
+    multipleSelectionDialogEn,
+    multipleSelectionDialogFr,
     networkModificationsEn,
     networkModificationsFr,
+    OverflowableText,
+    reportViewerEn,
+    reportViewerFr,
+    SnackbarProvider,
+    tableEn,
+    tableFr,
+    toNestedGlobalSelectors,
+    TopBar,
+    topBarEn,
+    topBarFr,
+    TreeViewFinder,
+    treeviewFinderEn,
+    treeviewFinderFr,
+    useSnackMessage,
 } from '../../src';
 
 const messages = {
@@ -175,15 +173,15 @@ const getMuiTheme = (theme) => {
     return darkTheme;
 };
 
-const style = {
+const styles = {
     button: {
         float: 'left',
         margin: '5px',
     },
 };
 
 /**
- * @param {import('@mui/material/styles').Theme} theme Theme from ThemeProvider
+ * @param {import('@mui/material').Theme} theme Theme from ThemeProvider
  */
 const TreeViewFinderCustomStyles = (theme) => ({
     icon: {
@@ -196,6 +194,9 @@ const TreeViewFinderCustomStyles = (theme) => ({
     },
 });
 
+/**
+ * @param {import('@mui/material').Theme} theme Theme from ThemeProvider
+ */
 const TreeViewFinderCustomStylesEmotion = ({ theme }) =>
     toNestedGlobalSelectors(TreeViewFinderCustomStyles(theme), generateTreeViewFinderClass);
 const CustomTreeViewFinder = styled(TreeViewFinder)(TreeViewFinderCustomStylesEmotion);
@@ -215,7 +216,7 @@ function SnackErrorButton() {
         <Button
             variant="contained"
             color="error"
-            style={style.button}
+            style={styles.button}
             onClick={() => {
                 snackError({
                     messageTxt: 'Snack error message',
@@ -234,7 +235,7 @@ function SnackWarningButton() {
         <Button
             variant="contained"
             color="warning"
-            style={style.button}
+            style={styles.button}
             onClick={() => {
                 snackWarning({
                     messageTxt: 'Snack warning message',
@@ -253,7 +254,7 @@ function SnackInfoButton() {
         <Button
             variant="contained"
             color="info"
-            style={style.button}
+            style={styles.button}
             onClick={() => {
                 snackInfo({
                     messageTxt: 'Snack info message',
@@ -274,7 +275,7 @@ function PermanentSnackButton() {
             <Button
                 variant="contained"
                 color="info"
-                style={style.button}
+                style={styles.button}
                 onClick={() => {
                     const key = snackInfo({
                         messageTxt: 'Permanent Snack info message',
@@ -289,7 +290,7 @@ function PermanentSnackButton() {
             <Button
                 variant="contained"
                 color="info"
-                style={style.button}
+                style={styles.button}
                 onClick={() => {
                     closeSnackbar(snackKey);
                     setSnackKey(undefined);

package.json

@@ -1,16 +1,30 @@
 {
     "name": "@gridsuite/commons-ui",
     "version": "0.76.2",
-    "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"
@@ -53,7 +67,6 @@
         "@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",

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;