Sebastian's review

.eslintrc.js

@@ -171,12 +171,27 @@ module.exports = {
     {
       files: ['*.tsx'],
       rules: {
+        'no-restricted-imports': [
+          'error',
+          {
+            patterns: [
+              '@material-ui/*/*/*/*',
+              '!@material-ui/core/test-utils/*',
+              '!@material-ui/utils/macros/*.macro',
+            ],
+          },
+        ], // Allow deeper imports for TypeScript types. TODO?
         'react/prop-types': 'off',
       },
     },
     {
       files: ['*.spec.tsx', '*.spec.ts'],
       rules: {
+        'no-alert': 'off',
+        'no-console': 'off',
+        'no-empty-pattern': 'off',
+        'no-lone-blocks': 'off',
+        'no-shadow': 'off',
         '@typescript-eslint/no-unused-expressions': 'off',
         '@typescript-eslint/no-unused-vars': 'off',
         '@typescript-eslint/no-use-before-define': 'off',
@@ -185,11 +200,6 @@ module.exports = {
         'jsx-a11y/anchor-has-content': 'off',
         'jsx-a11y/anchor-is-valid': 'off',
         'jsx-a11y/tabindex-no-positive': 'off',
-        'no-alert': 'off',
-        'no-console': 'off',
-        'no-empty-pattern': 'off',
-        'no-lone-blocks': 'off',
-        'no-shadow': 'off',
         'react/default-props-match-prop-types': 'off',
         'react/no-access-state-in-setstate': 'off',
         'react/no-unused-prop-types': 'off',
@@ -200,12 +210,5 @@ 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/AdDisplay.js

@@ -49,7 +49,7 @@ export default function AdDisplay(props) {
       <span className={classes.poweredby}>ad by {ad.poweredby}</span>
     </span>
   );
-  /* eslint-enable react/no-danger */
+  /* eslint-enable material-ui/no-hardcoded-labels, react/no-danger */
 }
 
 AdDisplay.propTypes = {

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

@@ -1,4 +1,3 @@
-/* eslint-disable material-ui/no-hardcoded-labels */
 import React from 'react';
 import * as PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -156,9 +155,8 @@ function MarkdownDocs(props) {
                 );
                 return (
                   <div key={index}>
-                    {warnIcon}
-                    {' Missing demo '}
-                    {name} {warnIcon}
+                    {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
+                    {warnIcon} Missing demo `{name}` {warnIcon}
                   </div>
                 );
               }

docs/src/modules/components/TopLayoutBlog.js

@@ -58,7 +58,7 @@ function TopLayoutBlog(props) {
             color="textSecondary"
             className={classes.back}
           >
-            {/* eslint-disable-next-line material-ui/no-hardcoded-labels -- TODO: should be translated */}
+            {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
             {'< Back to blog'}
           </Link>
           {rendered.map((chunk, index) => {

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;
 
 /**

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 = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type TagName = 'em' | 'u' | 'del';
 
 const components: Partial<Record<Breakpoint, TagName>> = {

packages/material-ui-icons/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  rules: {
+    // needed for mustache and temp
+    'import/no-unresolved': 'off',
+    'import/extensions': 'off',
+  },
+};

packages/material-ui-styles/src/defaultTheme/defaultTheme.spec.ts

@@ -8,7 +8,7 @@ declare module '@material-ui/styles' {
   }
 }
 
-function Component() {
+function MyComponent() {
   const value = useTheme().myProperty;
   expectType<string, typeof value>(value);
 }

packages/material-ui-styles/src/makeStyles/makeStyles.spec.tsx

@@ -119,20 +119,19 @@ import { createStyles, makeStyles } from '@material-ui/styles';
       color: theme.palette.primary.main,
     }),
   }));
+}
 
-  {
-    // If any generic is provided, inferrence breaks.
-    // If the proposal https://github.com/Microsoft/TypeScript/issues/26242 goes through, we can fix this.
-    const useStyles = makeStyles<Theme>((theme) => ({
-      root: {
-        background: 'blue',
-      },
-    }));
+function MyComponent() {
+  // If any generic is provided, inferrence breaks.
+  // If the proposal https://github.com/Microsoft/TypeScript/issues/26242 goes through, we can fix this.
+  const useStyles = makeStyles<Theme>((theme) => ({
+    root: {
+      background: 'blue',
+    },
+  }));
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const classes = useStyles();
+  const classes = useStyles();
 
-    // This doesn't fail, because inferrence is broken
-    classes.other;
-  }
+  // This doesn't fail, because inferrence is broken
+  classes.other;
 }

packages/material-ui-styles/src/makeStyles/makeStyles.test.js

@@ -389,13 +389,13 @@ describe('makeStyles', () => {
 
       const StyledComponent = () => {
         // Simulate react-hot-loader behavior
+        /* eslint-disable react-hooks/rules-of-hooks */
         if (hmr) {
-          // eslint-disable-next-line react-hooks/rules-of-hooks
           useStyles2();
         } else {
-          // eslint-disable-next-line react-hooks/rules-of-hooks
           useStyles1();
         }
+        /* eslint-enable react-hooks/rules-of-hooks */
 
         return <div />;
       };