Enforce Path Imports for MUI Icons (#1393)

* enforce-path-imports

* enforce-path-imports-for-mui-icons

* fix-import

* disable-correct-eslint-rule

* move eslint config to package.json

* use @stylistic/quotes in elint rules

Author: Darshan808

package.json

@@ -102,6 +102,7 @@
         "@babel/preset-env": "^7.0.0",
         "@jupyterlab/builder": "^4.0.0",
         "@jupyterlab/testutils": "^4.0.0",
+        "@stylistic/eslint-plugin": "^3.0.1",
         "@testing-library/jest-dom": "^6.1.4",
         "@testing-library/react": "^14.0.0",
         "@testing-library/user-event": "^14.5.1",
@@ -114,11 +115,11 @@
         "@types/react-virtualized-auto-sizer": "^1.0.0",
         "@types/react-window": "^1.8.2",
         "@types/resize-observer-browser": "^0.1.7",
-        "@typescript-eslint/eslint-plugin": "^6.1.0",
-        "@typescript-eslint/parser": "^6.1.0",
+        "@typescript-eslint/eslint-plugin": "^8.0.0",
+        "@typescript-eslint/parser": "^8.0.0",
         "all-contributors-cli": "^6.14.0",
         "css-loader": "^6.7.1",
-        "eslint": "^8.36.0",
+        "eslint": "^8.56.0",
         "eslint-config-prettier": "^8.8.0",
         "eslint-plugin-prettier": "^5.0.0",
         "eslint-plugin-react": "^7.33.0",
@@ -210,6 +211,7 @@
             "sourceType": "module"
         },
         "plugins": [
+            "@stylistic",
             "@typescript-eslint"
         ],
         "rules": {
@@ -235,7 +237,7 @@
             "@typescript-eslint/no-explicit-any": "off",
             "@typescript-eslint/no-namespace": "off",
             "@typescript-eslint/no-use-before-define": "off",
-            "@typescript-eslint/quotes": [
+            "@stylistic/quotes": [
                 "error",
                 "single",
                 {
@@ -248,6 +250,24 @@
                 "all"
             ],
             "eqeqeq": "error",
+            "no-restricted-imports": [
+                "error",
+                {
+                  "paths": [
+                    {
+                      "name": "@mui/icons-material",
+                      "message":
+                        "Please import icons using path imports, e.g. import AddIcon from '@mui/icons-material/Add'"
+                    }
+                  ],
+                  "patterns": [
+                    {
+                      "group": ["@mui/*/*/*"],
+                      "message": "3rd level imports in mui are considered private"
+                    }
+                  ]
+                }
+              ],
             "prefer-arrow-callback": "error"
         }
     },

src/components/GitPanel.tsx

@@ -6,7 +6,7 @@ import { TranslationBundle } from '@jupyterlab/translation';
 import { CommandRegistry } from '@lumino/commands';
 import { JSONObject } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
-import { WarningRounded as WarningRoundedIcon } from '@mui/icons-material';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
 import * as React from 'react';

src/components/StatusWidget.tsx

@@ -2,7 +2,7 @@ import { ReactWidget, UseSignal } from '@jupyterlab/apputils';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { IStatusBar } from '@jupyterlab/statusbar';
 import { TranslationBundle } from '@jupyterlab/translation';
-import { Badge } from '@mui/material';
+import Badge from '@mui/material/Badge';
 import React from 'react';
 import { classes } from 'typestyle';
 import { Operation, showGitOperationDialog } from '../commandsAndMenu';

src/components/SubmoduleMenu.tsx

@@ -39,6 +39,7 @@ export interface ISubmoduleMenuProps {
 /**
  * Interface describing component state.
  */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface ISubmoduleMenuState {}
 
 /**

src/components/Toolbar.tsx

@@ -7,7 +7,9 @@ import {
   refreshIcon
 } from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
-import { Badge, Tab, Tabs } from '@mui/material';
+import Badge from '@mui/material/Badge';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
 import * as React from 'react';
 import { classes } from 'typestyle';
 import { showError } from '../notifications';

src/components/WarningBox.tsx

@@ -1,4 +1,4 @@
-import { CardContent } from '@mui/material';
+import CardContent from '@mui/material/CardContent';
 import Card from '@mui/material/Card';
 import CardHeader from '@mui/material/CardHeader';
 import * as React from 'react';