third iteration

.eslintrc.js

@@ -1,4 +1,4 @@
-const confusingBrowserGlobals = require('confusing-browser-globals');
+
 const path = require('path');
 
 module.exports = {
@@ -42,6 +42,7 @@ module.exports = {
     'import/no-cycle': 'off', // Too slow
     'import/no-extraneous-dependencies': 'off', // Missing yarn workspace support
     'jsx-a11y/label-has-associated-control': 'off', // doesn't work?
+    'jsx-a11y/no-autofocus': 'off', // We are a library, we need to support it too
     'max-classes-per-file': 'off', // just as bad as "max components per file"
     'no-alert': 'error', // Too much interruptive
     'no-console': ['error', { allow: ['warn', 'error'] }], // Allow warn and error for production events
@@ -56,64 +57,29 @@ module.exports = {
         ],
       },
     ],
+    'material-ui/docgen-ignore-before-comment': 'error',
+    'no-constant-condition': 'error',
+    'no-prototype-builtins': 'off', // Use the proptype inheritance chain
+    'no-underscore-dangle': 'error',
+    'nonblock-statement-body-position': 'error',
+    'prefer-arrow-callback': ['error', { allowNamedFunctions: true }],
     'prefer-destructuring': 'off', // Destructuring harm grep potential.
+    'react-hooks/exhaustive-deps': ['error', { additionalHooks: 'useEnhancedEffect' }],
+    'react-hooks/rules-of-hooks': 'error',
     'react/destructuring-assignment': 'off', // It's fine.
+    'react/forbid-prop-types': 'off', // Too strict, no time for that
     'react/jsx-curly-brace-presence': 'off', // broken
     'react/jsx-filename-extension': ['error', { extensions: ['.js', '.tsx'] }], // airbnb is using .jsx
     'react/jsx-fragments': ['error', 'element'], // Prefer <React.Fragment> over <>.
     'react/jsx-props-no-spreading': 'off', // We are a UI library.
     'react/no-array-index-key': 'off', // This rule is great for raising people awareness of what a key is and how it works.
+    'react/no-danger': 'error',
+    'react/no-direct-mutation-state': 'error',
+    'react/no-find-dom-node': 'off', // Required for backward compatibility. TODO v5, drop
     'react/require-default-props': 'off', // Not always relevant
+    'react/sort-prop-types': 'error',
+    'react/state-in-constructor': 'off', // Too strict, no time for that
     'react/static-property-placement': 'off', // No needed
-    'react/forbid-prop-types': 'off', // Too strict, no time for that
-    'react/no-find-dom-node': 'off', // Required for backward compatibility. TODO v5, drop
-
-    // 'linebreak-style': 'off', // Doesn't play nicely with Windows
-    // 'no-constant-condition': 'error',
-    // // Airbnb use error
-    // 'no-prototype-builtins': 'off',
-    // 'nonblock-statement-body-position': 'error',
-    // // Airbnb restricts isNaN and isFinite which are necessary for IE 11
-    // // we have to be disciplined about the usage and ensure the Number type for its
-    // // arguments
-    // 'no-restricted-globals': ['error'].concat(confusingBrowserGlobals),
-    // 'no-underscore-dangle': 'error',
-    // 'prefer-arrow-callback': ['error', { allowNamedFunctions: true }],
-    // 'prefer-destructuring': 'off', // Destructuring harm grep potential.
-
-    // 'jsx-a11y/label-has-for': 'off', // deprecated
-    // 'jsx-a11y/no-autofocus': 'off', // We are a library, people do what they want.
-
-    // 'material-ui/docgen-ignore-before-comment': 'error',
-
-    // // It's buggy
-    // 'react/jsx-handler-names': [
-    //   'error',
-    //   {
-    //     // airbnb is disabling this rule
-    //     eventHandlerPrefix: 'handle',
-    //     eventHandlerPropPrefix: 'on',
-    //   },
-    // ],
-    // // not a good rule for components close to the DOM
-    // 'react/no-danger': 'error',
-    // // Strict, airbnb is using off
-    // 'react/no-direct-mutation-state': 'error',
-    // 'react/no-multi-comp': 'off',
-    // 'react/sort-prop-types': 'error',
-    // // This depends entirely on what you're doing. There's no universal pattern
-    // // stylistic opinion. For conditional assignment we want it outside, otherwise as static
-    // 'import/namespace': ['error', { allowComputed: true }],
-    // 'import/order': [
-    //   'error',
-    //   {
-    //     groups: [['index', 'sibling', 'parent', 'internal', 'external', 'builtin']],
-    //     'newlines-between': 'never',
-    //   },
-    // ],
-
-    // 'react-hooks/rules-of-hooks': 'error',
-    'react-hooks/exhaustive-deps': ['error', { additionalHooks: 'useEnhancedEffect' }],
   },
   overrides: [
     {
@@ -226,5 +192,12 @@ module.exports = {
         'react/static-property-placement': 'off',
       },
     },
+    {
+      files: ['packages/material-ui-icons/custom/**/*.js'],
+      rules: {
+          'import/no-unresolved': 'off',
+          'import/extensions': 'off',
+      },
+    },
   ],
 };

docs/src/modules/components/AdInHouse.js

@@ -41,7 +41,7 @@ export default function AdInHouse(props) {
           dangerouslySetInnerHTML={{ __html: ad.description }}
         />
       </a>
-      <span className={classes.poweredby}>ad by Material-UI</span>
+      <span className={classes.poweredby}>{'ad by Material-UI'}</span>
     </span>
   );
   /* eslint-enable material-ui/no-hardcoded-labels, react/no-danger */

docs/src/modules/components/DemoErrorBoundary.js

@@ -22,7 +22,7 @@ export default class DemoErrorBoundary extends React.Component {
       return (
         <div>
           <Typography color="error" component="p" variant="h5" gutterBottom>
-            This demo had a runtime error!
+            {'This demo had a runtime error!'}
           </Typography>
           <Typography>
             We would appreciate it if you report this error directly to our{' '}

docs/src/modules/components/MarkdownDocs.js

@@ -156,7 +156,7 @@ function MarkdownDocs(props) {
                 return (
                   <div key={index}>
                     {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
-                    {warnIcon} Missing demo `{name}` {warnIcon}
+                    {warnIcon}{' Missing demo '}{name}{' '}{warnIcon}
                   </div>
                 );
               }

docs/src/modules/components/TopLayoutBlog.js

@@ -1,3 +1,4 @@
+/* eslint-disable material-ui/no-hardcoded-labels */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';

docs/src/pages/components/tables/EnhancedTable.js

@@ -107,6 +107,21 @@ const headCells = [
   },
 ];
 
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: '100%',
+  },
+  paper: {
+    width: '100%',
+    marginBottom: theme.spacing(2),
+  },
+  table: {
+    minWidth: 750,
+  },
+  // TODO fix #20379.
+  sortSpan: visuallyHidden,
+}));
+
 function EnhancedTableHead(props) {
   const {
     classes,
@@ -241,21 +256,6 @@ EnhancedTableToolbar.propTypes = {
   numSelected: PropTypes.number.isRequired,
 };
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-  },
-  paper: {
-    width: '100%',
-    marginBottom: theme.spacing(2),
-  },
-  table: {
-    minWidth: 750,
-  },
-  // TODO fix #20379.
-  sortSpan: visuallyHidden,
-}));
-
 export default function EnhancedTable() {
   const classes = useStyles();
   const [order, setOrder] = React.useState('asc');

docs/src/pages/components/tables/EnhancedTable.tsx

@@ -141,6 +141,23 @@ const headCells: HeadCell[] = [
   },
 ];
 
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+    },
+    paper: {
+      width: '100%',
+      marginBottom: theme.spacing(2),
+    },
+    table: {
+      minWidth: 750,
+    },
+    // TODO fix #20379.
+    sortSpan: visuallyHidden as CSSProperties,
+  }),
+);
+
 interface EnhancedTableProps {
   classes: ReturnType<typeof useStyles>;
   numSelected: number;
@@ -281,23 +298,6 @@ const EnhancedTableToolbar = (props: EnhancedTableToolbarProps) => {
   );
 };
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-    },
-    paper: {
-      width: '100%',
-      marginBottom: theme.spacing(2),
-    },
-    table: {
-      minWidth: 750,
-    },
-    // TODO fix #20379.
-    sortSpan: visuallyHidden as CSSProperties,
-  }),
-);
-
 export default function EnhancedTable() {
   const classes = useStyles();
   const [order, setOrder] = React.useState<Order>('asc');

docs/src/pages/components/use-media-query/UseWidth.js

@@ -16,6 +16,7 @@ function useWidth() {
   const keys = [...theme.breakpoints.keys].reverse();
   return (
     keys.reduce((output, key) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
       const matches = useMediaQuery(theme.breakpoints.up(key));
       return !output && matches ? key : output;
     }, null) || 'xs'

docs/src/pages/components/use-media-query/UseWidth.tsx

@@ -6,8 +6,8 @@ import {
   createMuiTheme,
 } from '@material-ui/core/styles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
-import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
 
+type Breakpoint = number | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type BreakpointOrNull = Breakpoint | null;
 
 /**
@@ -20,6 +20,7 @@ function useWidth() {
   const keys: Breakpoint[] = [...theme.breakpoints.keys].reverse();
   return (
     keys.reduce((output: BreakpointOrNull, key: Breakpoint) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
       const matches = useMediaQuery(theme.breakpoints.up(key));
       return !output && matches ? key : output;
     }, null) || 'xs'

docs/src/pages/customization/breakpoints/WithWidth.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import withWidth from '@material-ui/core/withWidth';
 import Typography from '@material-ui/core/Typography';
-import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
 
+type Breakpoint = number | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type TagName = 'em' | 'u' | 'del';
 
 const components: Partial<Record<Breakpoint, TagName>> = {

docs/src/pages/premium-themes/onepirate/ForgotPassword.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/order */
 import withRoot from './modules/withRoot';
 // --- Post bootstrap -----
 import React from 'react';

docs/src/pages/premium-themes/onepirate/Home.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/order */
 import withRoot from './modules/withRoot';
 // --- Post bootstrap -----
 import React from 'react';

docs/src/pages/premium-themes/onepirate/Privacy.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/order */
 import withRoot from './modules/withRoot';
 // --- Post bootstrap -----
 import React from 'react';

docs/src/pages/premium-themes/onepirate/SignIn.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/order */
 import withRoot from './modules/withRoot';
 // --- Post bootstrap -----
 import React from 'react';

docs/src/pages/premium-themes/onepirate/SignUp.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/order */
 import withRoot from './modules/withRoot';
 // --- Post bootstrap -----
 import React from 'react';

docs/src/pages/premium-themes/onepirate/Terms.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/order */
 import withRoot from './modules/withRoot';
 // --- Post bootstrap -----
 import React from 'react';

packages/eslint-plugin-material-ui/src/rules/no-hardcoded-labels.js

@@ -15,13 +15,14 @@ module.exports = {
       Literal(node) {
         const canLabelComponent =
           node.parent.type === 'JSXElement' ||
+          node.parent.type === 'JSXExpressionContainer' ||
           (node.parent.type === 'JSXAttribute' && ['aria-label'].includes(node.parent.name.name));
 
         const sanitizedValue = typeof node.value === 'string' ? node.value.trim() : node.value;
         const hasTranslateableContent = sanitizedValue !== '' && !emojiRegex.test(sanitizedValue);
 
-        if (canLabelComponent && hasTranslateableContent && !allow.includes(sanitizedValue)) {
-          context.report({ messageId: 'literal-label', node });
+        if (canLabelComponent && hasTranslateableContent && !allow.includes(sanitizedValue) && typeof sanitizedValue === 'string') {
+          context.report({ messageId: 'literal-label', node: node.parent });
         }
       },
     };

packages/material-ui-codemod/src/util/getJSExports.js

@@ -1,7 +1,7 @@
-import memoize from './memoize';
 import { readFileSync } from 'fs';
 import { parseSync } from '@babel/core';
 import traverse from '@babel/traverse';
+import memoize from './memoize';
 
 const getJSExports = memoize((file) => {
   const result = new Set();

packages/material-ui-codemod/src/v4.0.0/optimal-imports.js

@@ -1,6 +1,6 @@
 import { dirname } from 'path';
-import getJSExports from '../util/getJSExports';
 import addImports from 'jscodeshift-add-imports';
+import getJSExports from '../util/getJSExports';
 
 // istanbul ignore next
 if (process.env.NODE_ENV === 'test') {

packages/material-ui-lab/src/Alert/Alert.js

@@ -3,13 +3,13 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { withStyles, lighten, darken } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
+import IconButton from '@material-ui/core/IconButton';
+import { capitalize } from '@material-ui/core/utils';
 import SuccessOutlinedIcon from '../internal/svg-icons/SuccessOutlined';
 import ReportProblemOutlinedIcon from '../internal/svg-icons/ReportProblemOutlined';
 import ErrorOutlineIcon from '../internal/svg-icons/ErrorOutline';
 import InfoOutlinedIcon from '../internal/svg-icons/InfoOutlined';
 import CloseIcon from '../internal/svg-icons/Close';
-import IconButton from '@material-ui/core/IconButton';
-import { capitalize } from '@material-ui/core/utils';
 
 export const styles = (theme) => {
   const getColor = theme.palette.type === 'light' ? darken : lighten;

packages/material-ui-lab/src/Alert/Alert.test.js

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { getClasses } from '@material-ui/core/test-utils';
 import createMount from 'test/utils/createMount';
 import describeConformance from '@material-ui/core/test-utils/describeConformance';
-import Alert from './Alert';
 import Paper from '@material-ui/core/Paper';
+import Alert from './Alert';
 
 describe('<Alert />', () => {
   const mount = createMount();

packages/material-ui-lab/src/Autocomplete/Autocomplete.js

@@ -241,7 +241,7 @@ function DisablePortal(props) {
 }
 
 const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
-  /* eslint-disable no-unused-vars */
+  /* eslint-disable @typescript-eslint/no-unused-vars */
   const {
     autoComplete = false,
     autoHighlight = false,
@@ -305,7 +305,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
     value: valueProp,
     ...other
   } = props;
-  /* eslint-enable no-unused-vars */
+  /* eslint-enable @typescript-eslint/no-unused-vars */
 
   const PopperComponent = disablePortal ? DisablePortal : PopperComponentProp;
 

packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js

@@ -5,10 +5,10 @@ import createMount from 'test/utils/createMount';
 import describeConformance from '@material-ui/core/test-utils/describeConformance';
 import { spy } from 'sinon';
 import { act, createClientRender, fireEvent, screen } from 'test/utils/createClientRender';
-import { createFilterOptions } from '../useAutocomplete/useAutocomplete';
-import Autocomplete from './Autocomplete';
 import TextField from '@material-ui/core/TextField';
 import Chip from '@material-ui/core/Chip';
+import { createFilterOptions } from '../useAutocomplete/useAutocomplete';
+import Autocomplete from './Autocomplete';
 
 describe('<Autocomplete />', () => {
   const mount = createMount();