Merge pull request #24176 from Sarabadu/mui-lint-more-fixes

Mui lint more fixes

.changeset/modern-radios-guess.md

@@ -0,0 +1,5 @@
+---
+'@backstage/eslint-plugin': patch
+---
+
+add some `pickers` fixes

packages/eslint-plugin/docs/rules/no-top-level-material-ui-4-imports.md

@@ -41,3 +41,50 @@ import {
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';
 ```
+
+## --fix known issues
+
+This rule provides automatic fixes for the imports, but it has some known issues:
+
+### Non Props types import
+
+The fix will handle correctly 3 groups of imports:
+
+- Any import from related to styles (i.e `makeStyles`, `styled`, `WithStyles`) will be auto fixed to the `@material-ui/core/styles` import.
+- Any import with `Props` suffix will be auto fixed to actual component for example `DialogProps` will be imported from `@material-ui/core/Dialog`.
+- Any other import will be considered as a component import and will be auto fixed to the actual component import.
+
+This means that some types of imports without `Props` suffix will be wrongly auto fixed to the component import, for example this fix will be wrong:
+
+```diff
+-   import { Alert, Color } from '@material-ui/lab';
++   import Alert from '@material-ui/lab/Alert';
++   import Color  from '@material-ui/lab/Color'; // this import is wrong
+```
+
+The correct import should look like this:
+
+```diff
+-   import { Alert, Color } from '@material-ui/lab';
++   import Alert, {Color} from '@material-ui/lab/Alert';
+```
+
+Because `Color` is a type coming from the Alert component.
+
+### No default export available
+
+Some components do not have a default export, for example `@material-ui/pickers/DateTimePicker` does not have a default export, so the fix will not work for these cases.
+
+The fix will be wrong for this import:
+
+```diff
+- import { DateTimePicker } from '@material-ui/pickers';
++ import DateTimePicker from '@material-ui/pickers/DateTimePicker'; // this default import does not exist
+```
+
+The correct import should look like this:
+
+```diff
+- import { DateTimePicker } from '@material-ui/pickers';
++ import { DateTimePicker } from '@material-ui/pickers/DateTimePicker'; // this is the correct import
+```

packages/eslint-plugin/rules/no-top-level-material-ui-4-imports.js

@@ -27,7 +27,23 @@
  */
 
 const KNOWN_STYLES = [
-  // TODO: add exports from colorManipulator and transitions
+  // colorManipulator
+  'hexToRgb',
+  'rgbToHex',
+  'hslToRgb',
+  'decomposeColor',
+  'recomposeColor',
+  'getContrastRatio',
+  'getLuminance',
+  'emphasize',
+  'fade',
+  'alpha',
+  'darken',
+  'lighten',
+  // transitions
+  'easing',
+  'duration',
+  // styles
   'createTheme',
   'unstable_createMuiStrictModeTheme',
   'createMuiTheme',
@@ -139,7 +155,11 @@ module.exports = {
               const value = s.imported.name;
               const alias = s.local.name === value ? undefined : s.local.name;
 
-              const propsMatch = /^([A-Z]\w+)Props$/.exec(value);
+              const propsMatch =
+                /^([A-Z]\w+)Props$/.exec(value) ??
+                (node.source.value === '@material-ui/pickers'
+                  ? /^Keyboard([A-Z]\w+Picker)$/.exec(value)
+                  : null);
 
               const emitProp = propsMatch !== null;
               const emitComponent = !emitProp;
@@ -188,7 +208,7 @@ module.exports = {
             if (specifier.emitProp && !specifier.emitComponent) {
               const replacement = `import { ${getNamedImportValue(
                 specifier,
-              )} } from '@material-ui/core/${specifier.componentValue}';`;
+              )} } from '${node.source.value}/${specifier.componentValue}';`;
               replacements.push(replacement);
             }
 
@@ -197,9 +217,9 @@ module.exports = {
               replacements.push(
                 `import ${
                   specifier.componentAlias ?? specifier.componentValue
-                }, { ${getNamedImportValue(
-                  specifier,
-                )} } from '@material-ui/core/${specifier.componentValue}';`,
+                }, { ${getNamedImportValue(specifier)} } from '${
+                  node.source.value
+                }/${specifier.componentValue}';`,
               );
             }
           }

packages/eslint-plugin/src/no-top-level-material-ui-4-imports.test.ts

@@ -93,6 +93,8 @@ import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';`,
                   ThemeProvider,
                   WithStyles,
                   Tooltip as MaterialTooltip,
+                  alpha,
+                  easing
                 } from '@material-ui/core';`,
       errors: [{ messageId: 'topLevelImport' }],
       output: `import Box from '@material-ui/core/Box';
@@ -101,7 +103,7 @@ import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import Grid from '@material-ui/core/Grid';
 import MaterialTooltip from '@material-ui/core/Tooltip';
-import { makeStyles, ThemeProvider, WithStyles } from '@material-ui/core/styles';`,
+import { makeStyles, ThemeProvider, WithStyles, alpha, easing } from '@material-ui/core/styles';`,
     },
     {
       code: `import { Box, Button, makeStyles } from '@material-ui/core';`,
@@ -111,11 +113,11 @@ import Button from '@material-ui/core/Button';
 import { makeStyles } from '@material-ui/core/styles';`,
     },
     {
-      code: `import { Paper, Typography, styled, withStyles } from '@material-ui/core';`,
+      code: `import { Paper, Typography, styled, withStyles, alpha, duration} from '@material-ui/core';`,
       errors: [{ messageId: 'topLevelImport' }],
       output: `import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
-import { styled, withStyles } from '@material-ui/core/styles';`,
+import { styled, withStyles, alpha, duration } from '@material-ui/core/styles';`,
     },
     {
       code: `import { styled } from '@material-ui/core';`,
@@ -152,5 +154,17 @@ import { styled, withStyles } from '@material-ui/core/styles';`,
       errors: [{ messageId: 'topLevelImport' }],
       output: `import { styled as s } from '@material-ui/core/styles';`,
     },
+    {
+      code: `import { TreeItem, TreeItemProps, TreeView, AlertProps } from '@material-ui/lab';`,
+      errors: [{ messageId: 'topLevelImport' }],
+      output: `import TreeItem, { TreeItemProps } from '@material-ui/lab/TreeItem';
+import TreeView from '@material-ui/lab/TreeView';
+import { AlertProps } from '@material-ui/lab/Alert';`,
+    },
+    {
+      code: `import { KeyboardDatePicker  } from '@material-ui/pickers';`,
+      errors: [{ messageId: 'topLevelImport' }],
+      output: `import { KeyboardDatePicker } from '@material-ui/pickers/DatePicker';`,
+    },
   ],
 });