add some known issues and pickers fix

Signed-off-by: Juan Pablo Garcia Ripa <sarabadu@gmail.com>

.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

@@ -155,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;

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

@@ -161,5 +161,10 @@ import { styled, withStyles, alpha, duration } from '@material-ui/core/styles';`
 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';`,
+    },
   ],
 });