@backstage/eslint-plugin 0.1.7-next.0 → 0.1.8

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @backstage/eslint-plugin
 
+## 0.1.8
+
+### Patch Changes
+
+- 65ec043: add some `pickers` fixes
+
+## 0.1.7
+
+### Patch Changes
+
+- 9ef572d: fix lint rule fixer for more than one `Component + Prop`
+- 3a7eee7: eslint autofix for mui ThemeProvider
+- d55828d: add fixer logic for import aliases
+
 ## 0.1.7-next.0
 
 ### Patch Changes

package/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
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/eslint-plugin",
-  "version": "0.1.7-next.0",
+  "version": "0.1.8",
   "description": "Backstage ESLint plugin",
   "publishConfig": {
     "access": "public"
@@ -22,7 +22,8 @@
     "minimatch": "^9.0.0"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.26.3-next.1",
+    "@backstage/cli": "^0.26.5",
+    "@types/estree": "^1.0.5",
     "eslint": "^8.33.0"
   }
 }

package/rules/no-top-level-material-ui-4-imports.js

@@ -16,16 +16,91 @@
 
 // @ts-check
 
+/**
+ * @typedef {object} FixerValues
+ * @property {string} value
+ * @property {string} [alias]
+ * @property {string} [componentValue]
+ * @property {string} [componentAlias]
+ * @property {boolean} emitComponent
+ * @property {boolean} emitProp
+ */
+
 const KNOWN_STYLES = [
+  // colorManipulator
+  'hexToRgb',
+  'rgbToHex',
+  'hslToRgb',
+  'decomposeColor',
+  'recomposeColor',
+  'getContrastRatio',
+  'getLuminance',
+  'emphasize',
+  'fade',
+  'alpha',
+  'darken',
+  'lighten',
+  // transitions
+  'easing',
+  'duration',
+  // styles
+  'createTheme',
+  'unstable_createMuiStrictModeTheme',
+  'createMuiTheme',
+  'ThemeOptions',
+  'Theme',
+  'Direction',
+  'PaletteColorOptions',
+  'SimplePaletteColorOptions',
+  'createStyles',
+  'TypographyStyle',
+  'TypographyVariant',
   'makeStyles',
+  'responsiveFontSizes',
+  'ComponentsPropsList',
+  'useTheme',
   'withStyles',
-  'createStyles',
+  'WithStyles',
+  'StyleRules',
+  'StyleRulesCallback',
+  'StyledComponentProps',
+  'withTheme',
+  'WithTheme',
   'styled',
-  'useTheme',
-  'Theme',
+  'ComponentCreator',
+  'StyledProps',
+  'createGenerateClassName',
+  'jssPreset',
+  'ServerStyleSheets',
+  'StylesProvider',
+  'MuiThemeProvider',
   'ThemeProvider',
+  'ThemeProviderProps',
 ];
 
+/**
+ * filter function to keep only ImportSpecifier nodes
+ * @param {import('estree').ImportSpecifier | import('estree').ImportDefaultSpecifier| import('estree').ImportNamespaceSpecifier} specifier
+ * @returns {specifier is import('estree').ImportSpecifier}
+ */
+function importSpecifiersFilter(specifier) {
+  return specifier.type === 'ImportSpecifier';
+}
+
+/**
+ * Gets the value of the named import depending on if it has an alias or not
+ * @param {FixerValues} values
+ * @returns {string}
+ * @example
+ * `import { ${getNamedImportValue({ value: 'SvgIcon', alias: 'Icon' })} } from 'x'` // import { Icon as SvgIcon } from 'x'
+ * `import { ${getNamedImportValue({ value: 'SvgIcon' })} } from 'x'` // import { SvgIcon } from 'x'
+ */
+function getNamedImportValue(values) {
+  return values.alias
+    ? `${values.value} as ${values.alias}`
+    : `${values.value}`;
+}
+
 /** @type {import('eslint').Rule.RuleModule} */
 module.exports = {
   meta: {
@@ -69,27 +144,43 @@ module.exports = {
           const replacements = [];
           const styles = [];
 
-          const specifiers = node.specifiers.filter(
-            s => s.type === 'ImportSpecifier',
+          const specifiers = node.specifiers.filter(importSpecifiersFilter);
+
+          const specifiersMap = specifiers.map(
+            /**
+             * transform ImportSpecifier to FixerValues to have a simpler object to work with
+             * @returns {FixerValues}
+             */
+            s => {
+              const value = s.imported.name;
+              const alias = s.local.name === value ? undefined : s.local.name;
+
+              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;
+              const emitComponentAndProp =
+                emitProp &&
+                specifiers.find(s => s.imported.name === propsMatch[1])?.local
+                  .name;
+
+              return {
+                emitComponent: emitComponent || Boolean(emitComponentAndProp),
+                emitProp,
+                value,
+                componentValue: propsMatch ? propsMatch[1] : undefined,
+                componentAlias: emitComponentAndProp
+                  ? emitComponentAndProp
+                  : undefined,
+                alias,
+              };
+            },
           );
 
-          const specifiersMap = specifiers.map(s => {
-            const value = s.local.name;
-            const propsMatch = /^([A-Z]\w+)Props$/.exec(value);
-
-            const emitProp = propsMatch !== null;
-            const emitComponent = !emitProp;
-            const emitComponentAndProp =
-              emitProp && specifiers.some(s => s.local.name === propsMatch[1]);
-
-            return {
-              emitComponent: emitComponent || emitComponentAndProp,
-              emitProp,
-              value,
-              componentValue: propsMatch ? propsMatch[1] : undefined,
-            };
-          });
-
           // Filter out duplicates where we have both component and component+prop
           const filteredMap = specifiersMap.filter(
             f => !specifiersMap.some(s => f.value === s.componentValue),
@@ -104,27 +195,36 @@ module.exports = {
             // Just Component
             if (specifier.emitComponent && !specifier.emitProp) {
               if (KNOWN_STYLES.includes(specifier.value)) {
-                styles.push(specifier.value);
+                styles.push(getNamedImportValue(specifier));
               } else {
-                const replacement = `import ${specifier.value} from '${node.source.value}/${specifier.value}';`;
+                const replacement = `import ${
+                  specifier.alias ?? specifier.value
+                } from '${node.source.value}/${specifier.value}';`;
                 replacements.push(replacement);
               }
             }
 
             // Just Prop
             if (specifier.emitProp && !specifier.emitComponent) {
-              const replacement = `import { ${specifier.value} } from '@material-ui/core/${specifier.componentValue}';`;
+              const replacement = `import { ${getNamedImportValue(
+                specifier,
+              )} } from '${node.source.value}/${specifier.componentValue}';`;
               replacements.push(replacement);
             }
 
             // Component and Prop
             if (specifier.emitComponent && specifier.emitProp) {
               replacements.push(
-                `import ${specifier.componentValue}, { ${specifier.value} } from '@material-ui/core/${specifier.componentValue}';`,
+                `import ${
+                  specifier.componentAlias ?? specifier.componentValue
+                }, { ${getNamedImportValue(specifier)} } from '${
+                  node.source.value
+                }/${specifier.componentValue}';`,
               );
             }
           }
 
+          // if we imports that should be moved to styles we added them here
           if (styles.length > 0) {
             const stylesReplacement = `import { ${styles.join(
               ', ',

package/src/no-top-level-material-ui-4-imports.test.ts

@@ -35,6 +35,9 @@ ruleTester.run('path-imports-rule', rule, {
     {
       code: `import { styled, withStyles } from '@material-ui/core/styles';`,
     },
+    {
+      code: `import { WithStyles } from '@material-ui/core/styles';`,
+    },
     {
       code: `import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';`,
     },
@@ -62,6 +65,11 @@ import Typography from '@material-ui/core/Typography';`,
       errors: [{ messageId: 'topLevelImport' }],
       output: `import { ThemeProvider } from '@material-ui/core/styles';`,
     },
+    {
+      code: `import { WithStyles } from '@material-ui/core';`,
+      errors: [{ messageId: 'topLevelImport' }],
+      output: `import { WithStyles } from '@material-ui/core/styles';`,
+    },
     {
       code: `import { Grid, GridProps, Theme, makeStyles } from '@material-ui/core';`,
       errors: [{ messageId: 'topLevelImport' }],
@@ -83,6 +91,10 @@ import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';`,
                   Grid,
                   makeStyles,
                   ThemeProvider,
+                  WithStyles,
+                  Tooltip as MaterialTooltip,
+                  alpha,
+                  easing
                 } from '@material-ui/core';`,
       errors: [{ messageId: 'topLevelImport' }],
       output: `import Box from '@material-ui/core/Box';
@@ -90,7 +102,8 @@ import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import Grid from '@material-ui/core/Grid';
-import { makeStyles, ThemeProvider } from '@material-ui/core/styles';`,
+import MaterialTooltip from '@material-ui/core/Tooltip';
+import { makeStyles, ThemeProvider, WithStyles, alpha, easing } from '@material-ui/core/styles';`,
     },
     {
       code: `import { Box, Button, makeStyles } from '@material-ui/core';`,
@@ -100,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';`,
@@ -121,5 +134,37 @@ import { styled, withStyles } from '@material-ui/core/styles';`,
       errors: [{ messageId: 'topLevelImport' }],
       output: `import { TabProps } from '@material-ui/core/Tab';`,
     },
+    {
+      code: `import { Tooltip as MaterialTooltip, } from '@material-ui/core';`,
+      errors: [{ messageId: 'topLevelImport' }],
+      output: `import MaterialTooltip from '@material-ui/core/Tooltip';`,
+    },
+    {
+      code: `import { SvgIcon as Icon, SvgIconProps as IconProps } from '@material-ui/core';`,
+      errors: [{ messageId: 'topLevelImport' }],
+      output: `import Icon, { SvgIconProps as IconProps } from '@material-ui/core/SvgIcon';`,
+    },
+    {
+      code: `import { SvgIconProps as IconProps } from '@material-ui/core';`,
+      errors: [{ messageId: 'topLevelImport' }],
+      output: `import { SvgIconProps as IconProps } from '@material-ui/core/SvgIcon';`,
+    },
+    {
+      code: `import { styled as s } from '@material-ui/core';`,
+      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';`,
+    },
   ],
 });