diff --git a/.changeset/modern-radios-guess.md b/.changeset/modern-radios-guess.md new file mode 100644 index 0000000000..8b68ebcdf4 --- /dev/null +++ b/.changeset/modern-radios-guess.md @@ -0,0 +1,5 @@ +--- +'@backstage/eslint-plugin': patch +--- + +add some `pickers` fixes diff --git a/packages/eslint-plugin/docs/rules/no-top-level-material-ui-4-imports.md b/packages/eslint-plugin/docs/rules/no-top-level-material-ui-4-imports.md index a105014abc..e2143354d2 100644 --- a/packages/eslint-plugin/docs/rules/no-top-level-material-ui-4-imports.md +++ b/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 +``` diff --git a/packages/eslint-plugin/rules/no-top-level-material-ui-4-imports.js b/packages/eslint-plugin/rules/no-top-level-material-ui-4-imports.js index 77adcad215..78fd3d63e9 100644 --- a/packages/eslint-plugin/rules/no-top-level-material-ui-4-imports.js +++ b/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}';`, ); } } diff --git a/packages/eslint-plugin/src/no-top-level-material-ui-4-imports.test.ts b/packages/eslint-plugin/src/no-top-level-material-ui-4-imports.test.ts index 2d29c2f9e9..4b675bd038 100644 --- a/packages/eslint-plugin/src/no-top-level-material-ui-4-imports.test.ts +++ b/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';`, + }, ], });