second iteration

.eslintignore

@@ -16,6 +16,9 @@
 /packages/material-ui-icons/legacy
 /packages/material-ui-icons/src
 /packages/material-ui-icons/templateSvgIcon.js
+# Not important?
+/packages/typescript-to-proptypes/
+/framer/
 # Ignore fixtures
 /packages/typescript-to-proptypes/test/**/*.js
 /tmp

.eslintrc.js

@@ -11,10 +11,17 @@ module.exports = {
  browser: true,
  node: true,
  },
- extends: ['plugin:import/recommended', 'airbnb-typescript', 'prettier', 'prettier/react', 'prettier/@typescript-eslint'],
+ extends: [
+ 'plugin:import/recommended',
+ 'plugin:import/typescript',
+ 'airbnb-typescript',
+ 'prettier',
+ 'prettier/react',
+ 'prettier/@typescript-eslint',
+ ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
- project: './tsconfig.json',
+ // project: './tsconfig.json',
  },
  plugins: ['material-ui', 'react-hooks', '@typescript-eslint'],
  settings: {
@@ -26,31 +33,43 @@ module.exports = {
  },
  // Sorted alphanumerically
  rules: {
+ '@typescript-eslint/dot-notation': 'off', // Too slow
+ '@typescript-eslint/no-implied-eval': 'off', // Too slow
+ '@typescript-eslint/no-throw-literal': 'off', // Too slow
+ 'consistent-this': ['error', 'self'],
+ 'import/export': 'off', // Not sure why it doesn't work
+ 'import/named': 'off', // Not sure why it doesn't work
+ 'import/no-cycle': 'off', // Too slow
  'import/no-extraneous-dependencies': 'off', // Missing yarn workspace support
- 'no-console': ['error', { allow: ['warn', 'error'] }], // More strict than airbnb. Allow warn and error for production events
- 'no-param-reassign': 'off', // Less strict than airbnb. It's fine.
- 'react/destructuring-assignment': 'off', // Less strict than airbnb. It's fine.
+ 'jsx-a11y/label-has-associated-control': 'off', // doesn't work?
+ '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
+ 'no-param-reassign': 'off', // It's fine.
+ 'no-restricted-imports': [
+ 'error',
+ {
+ patterns: [
+ '@material-ui/*/*/*',
+ '!@material-ui/core/test-utils/*',
+ '!@material-ui/utils/macros/*.macro',
+ ],
+ },
+ ],
+ 'prefer-destructuring': 'off', // Destructuring harm grep potential.
+ 'react/destructuring-assignment': 'off', // It's fine.
+ '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', // Less strict than airbnb. We are a UI library.
+ '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/require-default-props': 'off', // Not always relevant
+ 'react/static-property-placement': 'off', // No needed
 
- // 'consistent-this': ['error', 'self'],
  // 'linebreak-style': 'off', // Doesn't play nicely with Windows
- // // just as bad as "max components per file"
- // 'max-classes-per-file': 'off',
- // 'no-alert': 'error',
  // 'no-constant-condition': 'error',
  // // Airbnb use error
  // 'no-prototype-builtins': 'off',
- // 'no-restricted-imports': [
- // 'error',
- // {
- // patterns: [
- // '@material-ui/*/*/*',
- // '!@material-ui/core/test-utils/*',
- // '!@material-ui/utils/macros/*.macro',
- // ],
- // },
- // ],
  // '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
@@ -60,18 +79,13 @@ module.exports = {
  // 'prefer-arrow-callback': ['error', { allowNamedFunctions: true }],
  // 'prefer-destructuring': 'off', // Destructuring harm grep potential.
 
- // 'jsx-a11y/label-has-associated-control': 'off',
  // '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',
 
- // // This rule is great for raising people awareness of what a key is and how it works.
- // 'react/no-array-index-key': 'off',
  // // It's buggy
  // 'react/forbid-prop-types': 'off',
- // 'react/jsx-curly-brace-presence': 'off',
- // 'react/jsx-filename-extension': ['error', { extensions: ['.js'] }], // airbnb is using .jsx
  // 'react/jsx-handler-names': [
  // 'error',
  // {
@@ -86,12 +100,9 @@ module.exports = {
  // 'react/no-direct-mutation-state': 'error',
  // 'react/no-find-dom-node': 'off',
  // 'react/no-multi-comp': 'off',
- // 'react/require-default-props': 'off',
  // 'react/sort-prop-types': 'error',
  // // This depends entirely on what you're doing. There's no universal pattern
- // 'react/state-in-constructor': 'off',
  // // stylistic opinion. For conditional assignment we want it outside, otherwise as static
- // 'react/static-property-placement': 'off',
  // 'import/namespace': ['error', { allowComputed: true }],
  // 'import/order': [
  // 'error',
@@ -186,14 +197,33 @@ module.exports = {
  },
  },
  {
- files: ['*.spec.tsx'],
+ files: ['*.tsx'],
+ rules: {
+ 'react/prop-types': 'off',
+ },
+ },
+ {
+ files: ['*.spec.tsx', '*.spec.ts'],
  rules: {
  '@typescript-eslint/no-unused-expressions': 'off',
  '@typescript-eslint/no-unused-vars': 'off',
- 'max-classes-per-file': 'off',
+ '@typescript-eslint/no-use-before-define': 'off',
+ 'import/prefer-default-export': 'off',
+ 'jsx-a11y/anchor-has-content': 'off',
+ 'jsx-a11y/anchor-is-valid': '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',
  'react/prefer-stateless-function': 'off',
  'react/prop-types': 'off',
+ 'react/require-default-props': 'off',
+ 'react/state-in-constructor': 'off',
+ 'react/static-property-placement': 'off',
  },
  },
  ],

docs/src/pages/components/autocomplete/CheckboxesTags.js

@@ -1,5 +1,4 @@
-/* eslint-disable no-use-before-define */
-
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import Checkbox from '@material-ui/core/Checkbox';
 import TextField from '@material-ui/core/TextField';

docs/src/pages/components/autocomplete/CheckboxesTags.tsx

@@ -1,5 +1,4 @@
-/* eslint-disable no-use-before-define */
-
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import Checkbox from '@material-ui/core/Checkbox';
 import TextField from '@material-ui/core/TextField';

docs/src/pages/components/autocomplete/ComboBox.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';

docs/src/pages/components/autocomplete/ComboBox.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';

docs/src/pages/components/autocomplete/CountrySelect.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';

docs/src/pages/components/autocomplete/CountrySelect.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';

docs/src/pages/components/autocomplete/CustomizedHook.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import useAutocomplete from '@material-ui/lab/useAutocomplete';
 import NoSsr from '@material-ui/core/NoSsr';

docs/src/pages/components/autocomplete/CustomizedHook.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import useAutocomplete from '@material-ui/lab/useAutocomplete';
 import NoSsr from '@material-ui/core/NoSsr';

docs/src/pages/components/autocomplete/DisabledOptions.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';

docs/src/pages/components/autocomplete/DisabledOptions.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';

docs/src/pages/components/autocomplete/Filter.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete, {

docs/src/pages/components/autocomplete/Filter.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete, {

docs/src/pages/components/autocomplete/FixedTags.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import Chip from '@material-ui/core/Chip';
 import TextField from '@material-ui/core/TextField';

docs/src/pages/components/autocomplete/FixedTags.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import Chip from '@material-ui/core/Chip';
 import TextField from '@material-ui/core/TextField';

docs/src/pages/components/autocomplete/FreeSolo.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';

docs/src/pages/components/autocomplete/FreeSolo.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';

docs/src/pages/components/autocomplete/FreeSoloCreateOption.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete, {

docs/src/pages/components/autocomplete/FreeSoloCreateOption.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete, {

docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import TextField from '@material-ui/core/TextField';
 import Dialog from '@material-ui/core/Dialog';

docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import TextField from '@material-ui/core/TextField';
 import Dialog from '@material-ui/core/Dialog';

docs/src/pages/components/autocomplete/GitHubLabel.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import { useTheme, fade, makeStyles } from '@material-ui/core/styles';
 import Popper from '@material-ui/core/Popper';

docs/src/pages/components/autocomplete/GitHubLabel.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import {
  useTheme,

docs/src/pages/components/autocomplete/Grouped.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';

docs/src/pages/components/autocomplete/Grouped.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';

docs/src/pages/components/autocomplete/Highlights.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';

docs/src/pages/components/autocomplete/Highlights.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';

docs/src/pages/components/autocomplete/LimitTags.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import { makeStyles } from '@material-ui/core/styles';

docs/src/pages/components/autocomplete/LimitTags.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';

docs/src/pages/components/autocomplete/Playground.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';

docs/src/pages/components/autocomplete/Playground.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';

docs/src/pages/components/autocomplete/Sizes.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import Chip from '@material-ui/core/Chip';
 import Autocomplete from '@material-ui/lab/Autocomplete';

docs/src/pages/components/autocomplete/Sizes.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import Chip from '@material-ui/core/Chip';
 import Autocomplete from '@material-ui/lab/Autocomplete';

docs/src/pages/components/autocomplete/Tags.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import Chip from '@material-ui/core/Chip';
 import Autocomplete from '@material-ui/lab/Autocomplete';

docs/src/pages/components/autocomplete/Tags.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import Chip from '@material-ui/core/Chip';
 import Autocomplete from '@material-ui/lab/Autocomplete';

docs/src/pages/components/autocomplete/UseAutocomplete.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import useAutocomplete from '@material-ui/lab/useAutocomplete';
 import { makeStyles } from '@material-ui/core/styles';

docs/src/pages/components/autocomplete/UseAutocomplete.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from 'react';
 import useAutocomplete from '@material-ui/lab/useAutocomplete';
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';

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

@@ -16,7 +16,6 @@ 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

@@ -20,7 +20,6 @@ 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'