diff --git a/.eslintignore b/.eslintignore index 5ae1504b1a3235..1ff9ed0a37f934 100644 --- a/.eslintignore +++ b/.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 diff --git a/.eslintrc.js b/.eslintrc.js index 402925ff1ad7f8..872d16f664c2b2 100644 --- a/.eslintrc.js +++ b/.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,45 @@ 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 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 + 'react/forbid-prop-types': 'off', // Too strict, no time for that + 'react/no-find-dom-node': 'off', // Required for backward compatibility. TODO v5, drop - // '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 +81,12 @@ 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', // { @@ -84,14 +99,10 @@ module.exports = { // 'react/no-danger': 'error', // // Strict, airbnb is using off // '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', }, }, ], diff --git a/docs/scripts/buildApi.js b/docs/scripts/buildApi.js index 96dc7dc22ab569..e6e982e2038c3c 100644 --- a/docs/scripts/buildApi.js +++ b/docs/scripts/buildApi.js @@ -2,7 +2,6 @@ import * as babel from '@babel/core'; import traverse from '@babel/traverse'; import { mkdirSync, readFileSync, writeFileSync } from 'fs'; -import { getLineFeed } from './helpers'; import { rewriteUrlForNextExport } from 'next/dist/next-server/lib/router/rewrite-url-for-export'; import path from 'path'; import kebabCase from 'lodash/kebabCase'; @@ -11,6 +10,7 @@ import { defaultHandlers, parse as docgenParse } from 'react-docgen'; import remark from 'remark'; import remarkVisit from 'unist-util-visit'; import * as yargs from 'yargs'; +import { getLineFeed } from './helpers'; import muiDefaultPropsHandler from '../src/modules/utils/defaultPropsHandler'; import generateMarkdown from '../src/modules/utils/generateMarkdown'; import { findPagesMarkdown, findComponents } from '../src/modules/utils/find'; diff --git a/docs/src/modules/components/AppDrawer.js b/docs/src/modules/components/AppDrawer.js index d63d9629470f0b..efd7a9c4e460ee 100644 --- a/docs/src/modules/components/AppDrawer.js +++ b/docs/src/modules/components/AppDrawer.js @@ -84,7 +84,7 @@ function renderNavItems(options) { return ( {pages.reduce( - // eslint-disable-next-line no-use-before-define + // eslint-disable-next-line @typescript-eslint/no-use-before-define (items, page) => reduceChildRoutes({ items, page, ...params }), [], )} diff --git a/docs/src/modules/components/HighlightedCode.js b/docs/src/modules/components/HighlightedCode.js index ef360cec17e5e9..900ceb15d91c67 100644 --- a/docs/src/modules/components/HighlightedCode.js +++ b/docs/src/modules/components/HighlightedCode.js @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import MarkdownElement from './MarkdownElement'; import prism from 'docs/src/modules/utils/prism'; +import MarkdownElement from './MarkdownElement'; const HighlightedCode = React.forwardRef(function HighlightedCode(props, ref) { const { code, language, ...other } = props; diff --git a/docs/src/modules/utils/generateMarkdown.js b/docs/src/modules/utils/generateMarkdown.js index e4fe4a949653fd..b60dcb32e0a6af 100644 --- a/docs/src/modules/utils/generateMarkdown.js +++ b/docs/src/modules/utils/generateMarkdown.js @@ -2,8 +2,8 @@ import { parse as parseDoctrine } from 'doctrine'; import * as recast from 'recast'; import { parse as docgenParse } from 'react-docgen'; import { rewriteUrlForNextExport } from 'next/dist/next-server/lib/router/rewrite-url-for-export'; -import { pageToTitle } from './helpers'; import { SOURCE_CODE_ROOT_URL, LANGUAGES_IN_PROGRESS } from 'docs/src/modules/constants'; +import { pageToTitle } from './helpers'; const PATH_REPLACE_REGEX = /\\/g; const PATH_SEPARATOR = '/'; diff --git a/docs/src/modules/utils/getDemoConfig.js b/docs/src/modules/utils/getDemoConfig.js index b4db506d3500e7..a159fc156cdaeb 100644 --- a/docs/src/modules/utils/getDemoConfig.js +++ b/docs/src/modules/utils/getDemoConfig.js @@ -1,5 +1,5 @@ -import { getDependencies } from './helpers'; import { CODE_VARIANTS } from 'docs/src/modules/constants'; +import { getDependencies } from './helpers'; function jsDemo(demoData) { return { diff --git a/docs/src/pages/components/autocomplete/CheckboxesTags.js b/docs/src/pages/components/autocomplete/CheckboxesTags.js index 4c02234e785b5f..f02980c9a2bc3e 100644 --- a/docs/src/pages/components/autocomplete/CheckboxesTags.js +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/CheckboxesTags.tsx b/docs/src/pages/components/autocomplete/CheckboxesTags.tsx index 4c02234e785b5f..f02980c9a2bc3e 100644 --- a/docs/src/pages/components/autocomplete/CheckboxesTags.tsx +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/ComboBox.js b/docs/src/pages/components/autocomplete/ComboBox.js index beaed886add60a..50a6dc5cc03194 100644 --- a/docs/src/pages/components/autocomplete/ComboBox.js +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/ComboBox.tsx b/docs/src/pages/components/autocomplete/ComboBox.tsx index beaed886add60a..50a6dc5cc03194 100644 --- a/docs/src/pages/components/autocomplete/ComboBox.tsx +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/CountrySelect.js b/docs/src/pages/components/autocomplete/CountrySelect.js index 2ec63bb3cd2e35..b2fe8317808e60 100644 --- a/docs/src/pages/components/autocomplete/CountrySelect.js +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/CountrySelect.tsx b/docs/src/pages/components/autocomplete/CountrySelect.tsx index 99a4445254b4ba..a93ab362fe9739 100644 --- a/docs/src/pages/components/autocomplete/CountrySelect.tsx +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/CustomizedHook.js b/docs/src/pages/components/autocomplete/CustomizedHook.js index 017010dc52e5b1..e4d12ba5686f3c 100644 --- a/docs/src/pages/components/autocomplete/CustomizedHook.js +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/CustomizedHook.tsx b/docs/src/pages/components/autocomplete/CustomizedHook.tsx index c8f376f67a3210..52eedc7b40185b 100644 --- a/docs/src/pages/components/autocomplete/CustomizedHook.tsx +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/DisabledOptions.js b/docs/src/pages/components/autocomplete/DisabledOptions.js index 0eac30c783d45b..01e172f2e9ac27 100644 --- a/docs/src/pages/components/autocomplete/DisabledOptions.js +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/DisabledOptions.tsx b/docs/src/pages/components/autocomplete/DisabledOptions.tsx index 0eac30c783d45b..01e172f2e9ac27 100644 --- a/docs/src/pages/components/autocomplete/DisabledOptions.tsx +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/Filter.js b/docs/src/pages/components/autocomplete/Filter.js index 794dd8fd126fbd..cb4495b8029f86 100644 --- a/docs/src/pages/components/autocomplete/Filter.js +++ b/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, { diff --git a/docs/src/pages/components/autocomplete/Filter.tsx b/docs/src/pages/components/autocomplete/Filter.tsx index 57d2eaa2590df1..44775b6927cda0 100644 --- a/docs/src/pages/components/autocomplete/Filter.tsx +++ b/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, { diff --git a/docs/src/pages/components/autocomplete/FixedTags.js b/docs/src/pages/components/autocomplete/FixedTags.js index 3f96ea41c26083..17b932a4a60756 100644 --- a/docs/src/pages/components/autocomplete/FixedTags.js +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/FixedTags.tsx b/docs/src/pages/components/autocomplete/FixedTags.tsx index 3f96ea41c26083..17b932a4a60756 100644 --- a/docs/src/pages/components/autocomplete/FixedTags.tsx +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/FreeSolo.js b/docs/src/pages/components/autocomplete/FreeSolo.js index de47418746880f..6c846ecc569688 100644 --- a/docs/src/pages/components/autocomplete/FreeSolo.js +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/FreeSolo.tsx b/docs/src/pages/components/autocomplete/FreeSolo.tsx index de47418746880f..6c846ecc569688 100644 --- a/docs/src/pages/components/autocomplete/FreeSolo.tsx +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/FreeSoloCreateOption.js b/docs/src/pages/components/autocomplete/FreeSoloCreateOption.js index 31c5ac67457f24..438a1458ecb789 100644 --- a/docs/src/pages/components/autocomplete/FreeSoloCreateOption.js +++ b/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, { diff --git a/docs/src/pages/components/autocomplete/FreeSoloCreateOption.tsx b/docs/src/pages/components/autocomplete/FreeSoloCreateOption.tsx index 28bcbabebbbea7..af094d6402c3bd 100644 --- a/docs/src/pages/components/autocomplete/FreeSoloCreateOption.tsx +++ b/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, { diff --git a/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.js b/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.js index 161f81e4ed475d..aa22f2b45be5f3 100644 --- a/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.js +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.tsx b/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.tsx index e6aaf17a02849a..e094e269987927 100644 --- a/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.tsx +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/GitHubLabel.js b/docs/src/pages/components/autocomplete/GitHubLabel.js index 6ff1b29598f3fb..22f26611845ba3 100644 --- a/docs/src/pages/components/autocomplete/GitHubLabel.js +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/GitHubLabel.tsx b/docs/src/pages/components/autocomplete/GitHubLabel.tsx index 17b042bd1c8394..81472c1f6f2972 100644 --- a/docs/src/pages/components/autocomplete/GitHubLabel.tsx +++ b/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, diff --git a/docs/src/pages/components/autocomplete/Grouped.js b/docs/src/pages/components/autocomplete/Grouped.js index eefb2c02d19b55..a22f0e88eede9f 100644 --- a/docs/src/pages/components/autocomplete/Grouped.js +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/Grouped.tsx b/docs/src/pages/components/autocomplete/Grouped.tsx index eefb2c02d19b55..a22f0e88eede9f 100644 --- a/docs/src/pages/components/autocomplete/Grouped.tsx +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/Highlights.js b/docs/src/pages/components/autocomplete/Highlights.js index b790db6b07178b..380c38bf2ab4b7 100644 --- a/docs/src/pages/components/autocomplete/Highlights.js +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/Highlights.tsx b/docs/src/pages/components/autocomplete/Highlights.tsx index b790db6b07178b..380c38bf2ab4b7 100644 --- a/docs/src/pages/components/autocomplete/Highlights.tsx +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/LimitTags.js b/docs/src/pages/components/autocomplete/LimitTags.js index 854b10c1ef52f4..5b9563ff472991 100644 --- a/docs/src/pages/components/autocomplete/LimitTags.js +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/LimitTags.tsx b/docs/src/pages/components/autocomplete/LimitTags.tsx index c50853e6521130..4a81f89da07ca7 100644 --- a/docs/src/pages/components/autocomplete/LimitTags.tsx +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/Playground.js b/docs/src/pages/components/autocomplete/Playground.js index fb00fc177621d7..55945369d8bfc6 100644 --- a/docs/src/pages/components/autocomplete/Playground.js +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/Playground.tsx b/docs/src/pages/components/autocomplete/Playground.tsx index 9b68011e07738c..411248bddcdfb1 100644 --- a/docs/src/pages/components/autocomplete/Playground.tsx +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/Sizes.js b/docs/src/pages/components/autocomplete/Sizes.js index 51efce97819471..0c620d5f07090e 100644 --- a/docs/src/pages/components/autocomplete/Sizes.js +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/Sizes.tsx b/docs/src/pages/components/autocomplete/Sizes.tsx index e1d949e69340f6..494df6bee76fe8 100644 --- a/docs/src/pages/components/autocomplete/Sizes.tsx +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/Tags.js b/docs/src/pages/components/autocomplete/Tags.js index 134f26487defe2..a92b9b240b906a 100644 --- a/docs/src/pages/components/autocomplete/Tags.js +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/Tags.tsx b/docs/src/pages/components/autocomplete/Tags.tsx index 542bf94d3aa12c..6a82dcd793b598 100644 --- a/docs/src/pages/components/autocomplete/Tags.tsx +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/UseAutocomplete.js b/docs/src/pages/components/autocomplete/UseAutocomplete.js index f120d603555dfb..ffc0821a55a295 100644 --- a/docs/src/pages/components/autocomplete/UseAutocomplete.js +++ b/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'; diff --git a/docs/src/pages/components/autocomplete/UseAutocomplete.tsx b/docs/src/pages/components/autocomplete/UseAutocomplete.tsx index 913da9a6cd0d8a..3c41ae7195adb3 100644 --- a/docs/src/pages/components/autocomplete/UseAutocomplete.tsx +++ b/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'; diff --git a/docs/src/pages/components/use-media-query/UseWidth.js b/docs/src/pages/components/use-media-query/UseWidth.js index 393c83a27f882c..d5a06d02db07b2 100644 --- a/docs/src/pages/components/use-media-query/UseWidth.js +++ b/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' diff --git a/docs/src/pages/components/use-media-query/UseWidth.tsx b/docs/src/pages/components/use-media-query/UseWidth.tsx index df881e6608ba36..740046f01224f1 100644 --- a/docs/src/pages/components/use-media-query/UseWidth.tsx +++ b/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' diff --git a/docs/src/pages/customization/color/ColorTool.js b/docs/src/pages/customization/color/ColorTool.js index caea9818f95ca1..e67b48d20f9b30 100644 --- a/docs/src/pages/customization/color/ColorTool.js +++ b/docs/src/pages/customization/color/ColorTool.js @@ -11,8 +11,8 @@ import Button from '@material-ui/core/Button'; import CheckIcon from '@material-ui/icons/Check'; import Slider from '@material-ui/core/Slider'; import { capitalize } from '@material-ui/core/utils'; -import ColorDemo from './ColorDemo'; import { DispatchContext } from 'docs/src/modules/components/ThemeContext'; +import ColorDemo from './ColorDemo'; const defaults = { primary: '#2196f3', diff --git a/docs/src/pages/customization/components/ClassNames.tsx b/docs/src/pages/customization/components/ClassNames.tsx index d356efde74b96f..972139f876647b 100644 --- a/docs/src/pages/customization/components/ClassNames.tsx +++ b/docs/src/pages/customization/components/ClassNames.tsx @@ -3,11 +3,6 @@ import clsx from 'clsx'; import Button from '@material-ui/core/Button'; import { withStyles, WithStyles } from '@material-ui/core/styles'; -interface Props extends WithStyles { - children?: React.ReactNode; - className?: string; -} - // We can inject some CSS into the DOM. const styles = { root: { @@ -21,6 +16,11 @@ const styles = { }, }; +interface Props extends WithStyles { + children?: React.ReactNode; + className?: string; +} + function ClassNames(props: Props) { const { classes, children, className, ...other } = props; diff --git a/docs/src/pages/customization/components/DynamicCSS.tsx b/docs/src/pages/customization/components/DynamicCSS.tsx index 4a3720b5270cae..3ad728f2c09779 100644 --- a/docs/src/pages/customization/components/DynamicCSS.tsx +++ b/docs/src/pages/customization/components/DynamicCSS.tsx @@ -16,10 +16,6 @@ interface ColorsMapping { [key: string]: any; } -interface ButtonStyles extends WithStyles { - color: string; -} - // Like https://github.com/brunobertolini/styled-by const styledBy = (property: string, mapping: ColorsMapping) => ( props: Styles, @@ -43,6 +39,10 @@ const styles = { }, }; +interface ButtonStyles extends WithStyles { + color: string; +} + const StyledButton = withStyles( styles, )(({ classes, color, ...other }: ButtonStyles) => ( diff --git a/docs/src/pages/customization/components/DynamicCSSVariables.js b/docs/src/pages/customization/components/DynamicCSSVariables.js index e15d0b73b7ff54..e9d65d6b1981c6 100644 --- a/docs/src/pages/customization/components/DynamicCSSVariables.js +++ b/docs/src/pages/customization/components/DynamicCSSVariables.js @@ -51,7 +51,7 @@ export default function DynamicCSSVariables() { label="Blue" /> ); diff --git a/docs/src/pages/customization/components/DynamicCSSVariables.tsx b/docs/src/pages/customization/components/DynamicCSSVariables.tsx index d239dd21fb0ec3..537017d0e557b8 100644 --- a/docs/src/pages/customization/components/DynamicCSSVariables.tsx +++ b/docs/src/pages/customization/components/DynamicCSSVariables.tsx @@ -51,7 +51,7 @@ export default function DynamicCSSVariables() { label="Blue" /> ); diff --git a/docs/src/pages/customization/components/DynamicClassName.js b/docs/src/pages/customization/components/DynamicClassName.js index 57c55e5d179edf..54a93a2d6a1389 100644 --- a/docs/src/pages/customization/components/DynamicClassName.js +++ b/docs/src/pages/customization/components/DynamicClassName.js @@ -47,7 +47,7 @@ export default function DynamicClassName() { [classes.buttonBlue]: color === 'blue', })} > - {'Class name branch'} + Class name branch ); diff --git a/docs/src/pages/customization/components/DynamicClassName.tsx b/docs/src/pages/customization/components/DynamicClassName.tsx index f2d3f83f42c512..6fd37835af69d0 100644 --- a/docs/src/pages/customization/components/DynamicClassName.tsx +++ b/docs/src/pages/customization/components/DynamicClassName.tsx @@ -47,7 +47,7 @@ export default function DynamicClassName() { [classes.buttonBlue]: color === 'blue', })} > - {'Class name branch'} + Class name branch ); diff --git a/docs/src/pages/customization/components/DynamicInlineStyle.js b/docs/src/pages/customization/components/DynamicInlineStyle.js index f382e3bf8dcf2b..b8f6214b59ffc0 100644 --- a/docs/src/pages/customization/components/DynamicInlineStyle.js +++ b/docs/src/pages/customization/components/DynamicInlineStyle.js @@ -45,7 +45,7 @@ export default function DynamicInlineStyle() { ...(color === 'blue' ? styles.buttonBlue : {}), }} > - {'dynamic inline-style'} + dynamic inline-style ); diff --git a/docs/src/pages/customization/components/DynamicInlineStyle.tsx b/docs/src/pages/customization/components/DynamicInlineStyle.tsx index 11478d48c4dbad..9584bc297dcb7c 100644 --- a/docs/src/pages/customization/components/DynamicInlineStyle.tsx +++ b/docs/src/pages/customization/components/DynamicInlineStyle.tsx @@ -45,7 +45,7 @@ export default function DynamicInlineStyle() { ...(color === 'blue' ? styles.buttonBlue : {}), }} > - {'dynamic inline-style'} + dynamic inline-style ); diff --git a/docs/src/pages/customization/components/DynamicThemeNesting.js b/docs/src/pages/customization/components/DynamicThemeNesting.js index 2e8b35070ddb71..41c3fc6ebdf872 100644 --- a/docs/src/pages/customization/components/DynamicThemeNesting.js +++ b/docs/src/pages/customization/components/DynamicThemeNesting.js @@ -41,7 +41,7 @@ export default function DynamicThemeNesting() { /> diff --git a/docs/src/pages/customization/components/DynamicThemeNesting.tsx b/docs/src/pages/customization/components/DynamicThemeNesting.tsx index a7de6b26c8820b..1dc7c8a81926c0 100644 --- a/docs/src/pages/customization/components/DynamicThemeNesting.tsx +++ b/docs/src/pages/customization/components/DynamicThemeNesting.tsx @@ -41,7 +41,7 @@ export default function DynamicThemeNesting() { /> theme={theme}> diff --git a/docs/src/pages/guides/composition/ListRouter.tsx b/docs/src/pages/guides/composition/ListRouter.tsx index 8587398dab15d3..0dcf0a488c90a1 100644 --- a/docs/src/pages/guides/composition/ListRouter.tsx +++ b/docs/src/pages/guides/composition/ListRouter.tsx @@ -17,9 +17,9 @@ import { import { Omit } from '@material-ui/types'; interface ListItemLinkProps { - icon?: React.ReactElement; - primary: string; to: string; + primary: string; + icon?: React.ReactElement; } function ListItemLink(props: ListItemLinkProps) { diff --git a/docs/src/pages/premium-themes/paperbase/Paperbase.js b/docs/src/pages/premium-themes/paperbase/Paperbase.js index 2b28c6551419ae..a453d15b91a7d3 100644 --- a/docs/src/pages/premium-themes/paperbase/Paperbase.js +++ b/docs/src/pages/premium-themes/paperbase/Paperbase.js @@ -20,8 +20,7 @@ function Copyright() { Your Website {' '} - {new Date().getFullYear()} - {'.'} + {new Date().getFullYear()}. ); } diff --git a/docs/src/pages/premium-themes/paperbase/Paperbase.tsx b/docs/src/pages/premium-themes/paperbase/Paperbase.tsx index e165251f021189..c4875022b49c6f 100644 --- a/docs/src/pages/premium-themes/paperbase/Paperbase.tsx +++ b/docs/src/pages/premium-themes/paperbase/Paperbase.tsx @@ -21,8 +21,7 @@ function Copyright() { Your Website {' '} - {new Date().getFullYear()} - {'.'} + {new Date().getFullYear()}. ); } diff --git a/docs/src/pages/styles/advanced/Theming.js b/docs/src/pages/styles/advanced/Theming.js index fa10da8dfd0fb7..155773186263dc 100644 --- a/docs/src/pages/styles/advanced/Theming.js +++ b/docs/src/pages/styles/advanced/Theming.js @@ -1,6 +1,10 @@ import React from 'react'; import { ThemeProvider, makeStyles } from '@material-ui/core/styles'; +const themeInstance = { + background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', +}; + const useStyles = makeStyles((theme) => ({ root: { background: theme.background, @@ -24,10 +28,6 @@ function DeepChild() { ); } -const themeInstance = { - background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', -}; - export default function Theming() { return ( diff --git a/docs/src/pages/styles/advanced/Theming.tsx b/docs/src/pages/styles/advanced/Theming.tsx index bc5e7ab1e604a0..3914898745e460 100644 --- a/docs/src/pages/styles/advanced/Theming.tsx +++ b/docs/src/pages/styles/advanced/Theming.tsx @@ -1,6 +1,10 @@ import React from 'react'; import { ThemeProvider, makeStyles } from '@material-ui/core/styles'; +const themeInstance = { + background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', +}; + const useStyles = makeStyles((theme: typeof themeInstance) => ({ root: { background: theme.background, @@ -24,10 +28,6 @@ function DeepChild() { ); } -const themeInstance = { - background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', -}; - export default function Theming() { return ( diff --git a/docs/webpackBaseConfig.js b/docs/webpackBaseConfig.js index 898479a3799091..10d03dea827cba 100644 --- a/docs/webpackBaseConfig.js +++ b/docs/webpackBaseConfig.js @@ -26,7 +26,7 @@ module.exports = { module: { rules: [ { - test: /\.(js|ts)$/, + test: /\.(js|ts|tsx)$/, exclude: /node_modules/, loader: 'babel-loader', query: { diff --git a/examples/create-react-app-with-typescript/src/App.tsx b/examples/create-react-app-with-typescript/src/App.tsx index cbce51d807ae7f..39b764a0e348c0 100644 --- a/examples/create-react-app-with-typescript/src/App.tsx +++ b/examples/create-react-app-with-typescript/src/App.tsx @@ -12,8 +12,7 @@ function Copyright() { Your Website {' '} - {new Date().getFullYear()} - {'.'} + {new Date().getFullYear()}. ); } diff --git a/examples/create-react-app-with-typescript/src/theme.tsx b/examples/create-react-app-with-typescript/src/theme.tsx index f9c08b49759c16..405e84b54e976a 100644 --- a/examples/create-react-app-with-typescript/src/theme.tsx +++ b/examples/create-react-app-with-typescript/src/theme.tsx @@ -1,5 +1,5 @@ -import red from '@material-ui/core/colors/red'; import { createMuiTheme } from '@material-ui/core/styles'; +import { red } from '@material-ui/core/colors'; // A custom theme for this app const theme = createMuiTheme({ diff --git a/examples/nextjs-with-typescript/src/Copyright.tsx b/examples/nextjs-with-typescript/src/Copyright.tsx index 5d4e8f33e91f0b..62cc86fe418ed9 100644 --- a/examples/nextjs-with-typescript/src/Copyright.tsx +++ b/examples/nextjs-with-typescript/src/Copyright.tsx @@ -9,8 +9,7 @@ export default function Copyright() { Your Website {' '} - {new Date().getFullYear()} - {'.'} + {new Date().getFullYear()}. ); } diff --git a/examples/nextjs-with-typescript/src/theme.tsx b/examples/nextjs-with-typescript/src/theme.tsx index f9e8c47d322cfc..21af17c750d59c 100644 --- a/examples/nextjs-with-typescript/src/theme.tsx +++ b/examples/nextjs-with-typescript/src/theme.tsx @@ -1,5 +1,5 @@ import { createMuiTheme } from '@material-ui/core/styles'; -import red from '@material-ui/core/colors/red'; +import { red } from '@material-ui/core/colors'; // Create a theme instance. const theme = createMuiTheme({ diff --git a/examples/nextjs/src/Copyright.js b/examples/nextjs/src/Copyright.js index 5d4e8f33e91f0b..62cc86fe418ed9 100644 --- a/examples/nextjs/src/Copyright.js +++ b/examples/nextjs/src/Copyright.js @@ -9,8 +9,7 @@ export default function Copyright() { Your Website {' '} - {new Date().getFullYear()} - {'.'} + {new Date().getFullYear()}. ); } diff --git a/package.json b/package.json index 014b8c11bead93..1c96efce3f5479 100644 --- a/package.json +++ b/package.json @@ -25,9 +25,9 @@ "extract-error-codes": "lerna run --parallel extract-error-codes", "framer:build": "yarn workspace framer build", "jsonlint": "node scripts/jsonlint.js", - "lint": "eslint . --cache --report-unused-disable-directives --ext .ts,.tsx", - "lint:ci": "eslint . --report-unused-disable-directives --ext .ts,.tsx", - "lint:fix": "eslint . --cache --fix --ext .ts,.tsx", + "lint": "eslint . --cache --report-unused-disable-directives --ext .js,.ts,.tsx", + "lint:ci": "eslint . --report-unused-disable-directives --ext .js,.ts,.tsx", + "lint:fix": "eslint . --cache --fix --ext .js,.ts,.tsx", "prettier": "node ./scripts/prettier.js", "prettier:all": "node ./scripts/prettier.js write", "size:snapshot": "node scripts/sizeSnapshot/create", @@ -58,10 +58,10 @@ "@babel/register": "^7.10.1", "@rollup/plugin-replace": "^2.3.1", "@testing-library/dom": "^7.0.3", - "@testing-library/react": "^10.0.1", "@testing-library/react-hooks": "3.3.0", - "@types/chai": "^4.2.3", + "@testing-library/react": "^10.0.1", "@types/chai-dom": "^0.0.10", + "@types/chai": "^4.2.3", "@types/enzyme": "^3.10.3", "@types/fs-extra": "^9.0.0", "@types/glob": "^7.1.1", @@ -71,6 +71,8 @@ "@types/prettier": "^2.0.0", "@types/react": "^16.9.3", "@types/sinon": "^9.0.0", + "@typescript-eslint/eslint-plugin": "^3.6.0", + "@typescript-eslint/parser": "^3.6.0", "argos-cli": "^0.3.0", "babel-loader": "^8.0.0", "babel-plugin-istanbul": "^6.0.0", @@ -81,8 +83,8 @@ "babel-plugin-tester": "^9.0.0", "babel-plugin-transform-dev-warning": "^0.1.0", "babel-plugin-transform-react-remove-prop-types": "^0.4.21", - "chai": "^4.1.2", "chai-dom": "^1.8.1", + "chai": "^4.1.2", "chalk": "^4.0.0", "compression-webpack-plugin": "^4.0.0", "confusing-browser-globals": "^1.0.9", @@ -91,9 +93,8 @@ "danger": "^10.0.0", "dom-accessibility-api": "^0.4.3", "dtslint": "^3.2.0", - "enzyme": "^3.9.0", "enzyme-adapter-react-16": "^1.14.0", - "eslint": "^7.4.0", + "enzyme": "^3.9.0", "eslint-config-airbnb-typescript": "^8.0.2", "eslint-config-prettier": "^6.11.0", "eslint-import-resolver-webpack": "^0.12.2", @@ -101,21 +102,22 @@ "eslint-plugin-import": "^2.22.0", "eslint-plugin-jsx-a11y": "^6.3.1", "eslint-plugin-mocha": "^6.1.1", - "eslint-plugin-react": "^7.20.3", "eslint-plugin-react-hooks": "^4.0.7", + "eslint-plugin-react": "^7.20.3", + "eslint": "^7.4.0", "expect-puppeteer": "^4.3.0", "format-util": "^1.0.5", "fs-extra": "^9.0.0", - "glob": "^7.1.2", "glob-gitignore": "^1.0.11", + "glob": "^7.1.2", "jsdom": "^16.0.0", - "karma": "^5.0.1", "karma-browserstack-launcher": "~1.4.0", "karma-chrome-launcher": "^3.0.0", - "karma-mocha": "^2.0.0", "karma-mocha-reporter": "^2.2.5", + "karma-mocha": "^2.0.0", "karma-sourcemap-loader": "^0.3.7", "karma-webpack": "^4.0.2", + "karma": "^5.0.1", "lerna": "^3.16.4", "lodash": "^4.17.15", "mocha": "^8.0.1", @@ -125,18 +127,18 @@ "pretty-format-v24": "npm:pretty-format@24", "prop-types": "^15.7.2", "puppeteer": "^5.0.0", - "react": "^16.13.0", "react-dom": "^16.13.0", "react-test-renderer": "^16.13.0", + "react": "^16.13.0", "remark": "^12.0.0", "rimraf": "^3.0.0", - "rollup": "^2.10.8", "rollup-plugin-babel": "^4.3.3", "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-node-globals": "^1.4.0", "rollup-plugin-node-resolve": "^5.2.0", "rollup-plugin-size-snapshot": "^0.12.0", "rollup-plugin-terser": "^6.1.0", + "rollup": "^2.10.8", "sinon": "^9.0.0", "size-limit": "^0.21.0", "ts-node": "^8.3.0", @@ -145,8 +147,8 @@ "unist-util-visit": "^2.0.2", "url-loader": "^4.1.0", "vrtest-mui": "^0.3.3", - "webpack": "^4.41.0", "webpack-cli": "^3.3.9", + "webpack": "^4.41.0", "yargs": "^15.2.0", "yarn-deduplicate": "^2.0.0" }, @@ -184,9 +186,5 @@ "packages/*", "docs", "framer" - ], - "dependencies": { - "@typescript-eslint/eslint-plugin": "^3.6.0", - "@typescript-eslint/parser": "^3.6.0" - } + ] } diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts index 24ec4447b109d3..3b83e9b2aa3a3e 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts @@ -9,6 +9,7 @@ import { createFilterOptions, UseAutocompleteProps, } from '../useAutocomplete'; + export { AutocompleteChangeDetails, AutocompleteChangeReason, diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.spec.tsx b/packages/material-ui-lab/src/Autocomplete/Autocomplete.spec.tsx index d6610afd7bd3bc..510b4dfdfc72c1 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.spec.tsx +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.spec.tsx @@ -1,3 +1,4 @@ +import * as React from 'react'; import { Autocomplete, AutocompleteProps } from '@material-ui/lab'; import { expectType } from '@material-ui/types'; diff --git a/packages/material-ui-lab/src/ToggleButton/ToggleButton.d.ts b/packages/material-ui-lab/src/ToggleButton/ToggleButton.d.ts index ba3f052a65ba9e..cc68b0a89cfbd2 100644 --- a/packages/material-ui-lab/src/ToggleButton/ToggleButton.d.ts +++ b/packages/material-ui-lab/src/ToggleButton/ToggleButton.d.ts @@ -1,8 +1,4 @@ -import { - ButtonBaseClassKey, - ExtendButtonBase, - ExtendButtonBaseTypeMap, -} from '@material-ui/core/ButtonBase'; +import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '@material-ui/core/ButtonBase'; import { OverrideProps } from '@material-ui/core/OverridableComponent'; export type ToggleButtonTypeMap< diff --git a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js index 33e2e3adb52fd8..56cdb05069df49 100644 --- a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js +++ b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js @@ -2,9 +2,9 @@ import * as React from 'react'; import { isFragment } from 'react-is'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import isValueSelected from './isValueSelected'; import { withStyles } from '@material-ui/core/styles'; import { capitalize } from '@material-ui/core/utils'; +import isValueSelected from './isValueSelected'; export const styles = (theme) => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui-styles/src/StylesProvider/StylesProvider.js b/packages/material-ui-styles/src/StylesProvider/StylesProvider.js index 2ea7e6c76c0afa..3ec3a425f98750 100644 --- a/packages/material-ui-styles/src/StylesProvider/StylesProvider.js +++ b/packages/material-ui-styles/src/StylesProvider/StylesProvider.js @@ -1,8 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import { exactProp } from '@material-ui/utils'; -import createGenerateClassName from '../createGenerateClassName'; import { create } from 'jss'; +import createGenerateClassName from '../createGenerateClassName'; import jssPreset from '../jssPreset'; // Default JSS instance. diff --git a/packages/material-ui-styles/src/makeStyles/makeStyles.d.ts b/packages/material-ui-styles/src/makeStyles/makeStyles.d.ts index 3c8cb55056819a..a0ce04b43fcde1 100644 --- a/packages/material-ui-styles/src/makeStyles/makeStyles.d.ts +++ b/packages/material-ui-styles/src/makeStyles/makeStyles.d.ts @@ -1,8 +1,4 @@ -import { - ClassNameMap, - Styles, - WithStylesOptions, -} from '@material-ui/styles/withStyles'; +import { ClassNameMap, Styles, WithStylesOptions } from '@material-ui/styles/withStyles'; import { Omit } from '@material-ui/types'; import { DefaultTheme } from '../defaultTheme'; @@ -13,6 +9,7 @@ export default function makeStyles, options?: Omit, 'withTheme'> ): (props?: any) => ClassNameMap; + /** * `makeStyles` where the passed `styles` do depend on props */ diff --git a/packages/material-ui-styles/src/styled/styled.spec.tsx b/packages/material-ui-styles/src/styled/styled.spec.tsx index 4ee389dece1cd7..135cda0ec689b3 100644 --- a/packages/material-ui-styles/src/styled/styled.spec.tsx +++ b/packages/material-ui-styles/src/styled/styled.spec.tsx @@ -75,6 +75,7 @@ function acceptanceTest() { static defaultProps = { defaulted: 'Hello, World!', }; + render() { const { className, defaulted } = this.props; return
Greeted?: {defaulted.startsWith('Hello')}
; diff --git a/packages/material-ui-styles/src/styled/styled.test.js b/packages/material-ui-styles/src/styled/styled.test.js index 18c244abe7bd35..a87919b9b40879 100644 --- a/packages/material-ui-styles/src/styled/styled.test.js +++ b/packages/material-ui-styles/src/styled/styled.test.js @@ -1,10 +1,10 @@ import React from 'react'; import { expect } from 'chai'; import PropTypes from 'prop-types'; -import styled from './styled'; import { SheetsRegistry } from 'jss'; import createMount from 'test/utils/createMount'; import { createGenerateClassName } from '@material-ui/styles'; +import styled from './styled'; import StylesProvider from '../StylesProvider'; describe('styled', () => { diff --git a/packages/material-ui-styles/src/useTheme/useTheme.js b/packages/material-ui-styles/src/useTheme/useTheme.js index 6f7c8fa0bfde32..0f966fc439ad75 100644 --- a/packages/material-ui-styles/src/useTheme/useTheme.js +++ b/packages/material-ui-styles/src/useTheme/useTheme.js @@ -5,7 +5,6 @@ export default function useTheme() { const theme = React.useContext(ThemeContext); if (process.env.NODE_ENV !== 'production') { - // eslint-disable-next-line react-hooks/rules-of-hooks React.useDebugValue(theme); } diff --git a/packages/material-ui-styles/test/styles.spec.tsx b/packages/material-ui-styles/test/styles.spec.tsx index 49fc999245cc7c..f6b411c143a52e 100644 --- a/packages/material-ui-styles/test/styles.spec.tsx +++ b/packages/material-ui-styles/test/styles.spec.tsx @@ -439,15 +439,15 @@ function forwardRefTest() { { // https://github.com/mui-org/material-ui/pull/15546 // Update type definition to let CSS properties be functions - interface testProps { + interface TestProps { foo: boolean; } const useStyles = makeStyles((theme: Theme) => ({ root: { - width: (prop: testProps) => (prop.foo ? 100 : 0), + width: (prop: TestProps) => (prop.foo ? 100 : 0), }, - root2: (prop2: testProps) => ({ - width: (prop: testProps) => (prop.foo && prop2.foo ? 100 : 0), + root2: (prop2: TestProps) => ({ + width: (prop: TestProps) => (prop.foo && prop2.foo ? 100 : 0), height: 100, }), })); @@ -480,12 +480,12 @@ function forwardRefTest() { typeof styles2 >(styles2); - interface testProps { + interface TestProps { foo: boolean; } const styles3 = createStyles({ - root: (props: testProps) => ({ + root: (props: TestProps) => ({ width: 1, }), }); @@ -493,8 +493,8 @@ function forwardRefTest() { Record< 'root', | CSSProperties - | CreateCSSProperties - | PropsFunc> + | CreateCSSProperties + | PropsFunc> >, typeof styles3 >(styles3); diff --git a/packages/material-ui-system/src/index.spec.tsx b/packages/material-ui-system/src/index.spec.tsx index 4c68b1dafe58fe..e6b97c41ecf2b2 100644 --- a/packages/material-ui-system/src/index.spec.tsx +++ b/packages/material-ui-system/src/index.spec.tsx @@ -1,12 +1,4 @@ -import { - compose, - css, - palette, - StyleFunction, - spacing, - style, - breakpoints, -} from '@material-ui/system'; +import { compose, css, palette, spacing, style, breakpoints } from '@material-ui/system'; import * as React from 'react'; import styled from 'styled-components'; diff --git a/packages/material-ui-utils/src/deepmerge.test.js b/packages/material-ui-utils/src/deepmerge.test.js index 4c5b68e1a5aa4c..4fa400bc6b5707 100644 --- a/packages/material-ui-utils/src/deepmerge.test.js +++ b/packages/material-ui-utils/src/deepmerge.test.js @@ -1,5 +1,5 @@ -import deepmerge from './deepmerge'; import { expect } from 'chai'; +import deepmerge from './deepmerge'; describe('deepmerge', () => { // https://snyk.io/blog/after-three-years-of-silence-a-new-jquery-prototype-pollution-vulnerability-emerges-once-again/ diff --git a/packages/material-ui/src/AccordionSummary/AccordionSummary.test.js b/packages/material-ui/src/AccordionSummary/AccordionSummary.test.js index 5822e517a41f55..a41e2459dfea1f 100644 --- a/packages/material-ui/src/AccordionSummary/AccordionSummary.test.js +++ b/packages/material-ui/src/AccordionSummary/AccordionSummary.test.js @@ -3,8 +3,8 @@ import { expect } from 'chai'; import { spy } from 'sinon'; import { getClasses } from '@material-ui/core/test-utils'; import createMount from 'test/utils/createMount'; -import describeConformance from '../test-utils/describeConformance'; import { createClientRender, fireEvent } from 'test/utils/createClientRender'; +import describeConformance from '../test-utils/describeConformance'; import Accordion from '../Accordion'; import AccordionSummary from './AccordionSummary'; import ButtonBase from '../ButtonBase'; diff --git a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.test.js b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.test.js index a20e733af4d6f2..a1284b2892fb83 100644 --- a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.test.js +++ b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.test.js @@ -3,8 +3,8 @@ import { expect } from 'chai'; import { spy } from 'sinon'; import { getClasses } from '@material-ui/core/test-utils'; import createMount from 'test/utils/createMount'; -import describeConformance from '../test-utils/describeConformance'; import { createClientRender, within } from 'test/utils/createClientRender'; +import describeConformance from '../test-utils/describeConformance'; import ButtonBase from '../ButtonBase'; import BottomNavigationAction from './BottomNavigationAction'; diff --git a/packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.test.js b/packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.test.js index 36cebf131dc76e..00ef0fd3f025d1 100644 --- a/packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.test.js +++ b/packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.test.js @@ -2,8 +2,8 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; import { getClasses } from '@material-ui/core/test-utils'; -import BreadcrumbCollapsed from './BreadcrumbCollapsed'; import { fireEvent, createClientRender } from 'test/utils/createClientRender'; +import BreadcrumbCollapsed from './BreadcrumbCollapsed'; describe('', () => { let classes; diff --git a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js index f5c603b4563d48..763c10fdbf6f78 100644 --- a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js +++ b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js @@ -2,9 +2,9 @@ import * as React from 'react'; import { expect } from 'chai'; import { getClasses } from '@material-ui/core/test-utils'; import createMount from 'test/utils/createMount'; +import { createClientRender, screen } from 'test/utils/createClientRender'; import describeConformance from '../test-utils/describeConformance'; import Breadcrumbs from './Breadcrumbs'; -import { createClientRender, screen } from 'test/utils/createClientRender'; describe('', () => { const mount = createMount(); diff --git a/packages/material-ui/src/Button/Button.d.ts b/packages/material-ui/src/Button/Button.d.ts index 6964b39237f9cb..7287d5bc4242a5 100644 --- a/packages/material-ui/src/Button/Button.d.ts +++ b/packages/material-ui/src/Button/Button.d.ts @@ -1,4 +1,3 @@ -import { PropTypes } from '..'; import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; import { OverrideProps, OverridableComponent, OverridableTypeMap } from '../OverridableComponent'; diff --git a/packages/material-ui/src/Button/Button.spec.tsx b/packages/material-ui/src/Button/Button.spec.tsx index 08e454105327ae..5026b73358983c 100644 --- a/packages/material-ui/src/Button/Button.spec.tsx +++ b/packages/material-ui/src/Button/Button.spec.tsx @@ -22,7 +22,7 @@ const ButtonTest = () => ( - @@ -35,7 +35,6 @@ const ButtonTest = () => ( Link - // By default the underlying component is a button element: - // If an href is provided, an anchor is used: - // If a component prop is specified, use that: component="div" ref={(elem) => { diff --git a/packages/material-ui/src/Button/Button.test.js b/packages/material-ui/src/Button/Button.test.js index ac5065049e256e..542a63a55fe7d8 100644 --- a/packages/material-ui/src/Button/Button.test.js +++ b/packages/material-ui/src/Button/Button.test.js @@ -2,10 +2,10 @@ import * as React from 'react'; import { expect } from 'chai'; import { getClasses } from '@material-ui/core/test-utils'; import createMount from 'test/utils/createMount'; -import describeConformance from '../test-utils/describeConformance'; import { act, createClientRender, fireEvent } from 'test/utils/createClientRender'; import createServerRender from 'test/utils/createServerRender'; import Button from './Button'; +import describeConformance from '../test-utils/describeConformance'; import ButtonBase from '../ButtonBase'; describe(' + ); } @@ -488,7 +488,7 @@ withStyles((theme) => { // https://github.com/mui-org/material-ui/pull/15546 // Update type definition to let CSS properties be functions - interface testProps { + interface TestProps { foo: boolean; } @@ -496,10 +496,10 @@ withStyles((theme) => { const useStyles = makeStyles({ root: { - width: (prop: testProps) => (prop.foo ? 100 : 0), + width: (prop: TestProps) => (prop.foo ? 100 : 0), }, - root2: (prop2: testProps) => ({ - width: (prop: testProps) => (prop.foo && prop2.foo ? 100 : 0), + root2: (prop2: TestProps) => ({ + width: (prop: TestProps) => (prop.foo && prop2.foo ? 100 : 0), }), }); @@ -511,10 +511,10 @@ withStyles((theme) => { const useStyles = makeStyles((theme) => ({ root: { - width: (prop: testProps) => (prop.foo ? 100 : 0), + width: (prop: TestProps) => (prop.foo ? 100 : 0), }, - root2: (prop2: testProps) => ({ - width: (prop: testProps) => (prop.foo && prop2.foo ? 100 : 0), + root2: (prop2: TestProps) => ({ + width: (prop: TestProps) => (prop.foo && prop2.foo ? 100 : 0), margin: theme.spacing(1), }), })); @@ -527,10 +527,10 @@ withStyles((theme) => { const styles = createStyles({ root: { - width: (prop: testProps) => (prop.foo ? 100 : 0), + width: (prop: TestProps) => (prop.foo ? 100 : 0), }, - root2: (prop2: testProps) => ({ - width: (prop: testProps) => (prop.foo && prop2.foo ? 100 : 0), + root2: (prop2: TestProps) => ({ + width: (prop: TestProps) => (prop.foo && prop2.foo ? 100 : 0), }), }); @@ -542,10 +542,10 @@ withStyles((theme) => { withStyles({ root: { - width: (prop: testProps) => (prop.foo ? 100 : 0), + width: (prop: TestProps) => (prop.foo ? 100 : 0), }, - root2: (prop2: testProps) => ({ - width: (prop: testProps) => (prop.foo && prop2.foo ? 100 : 0), + root2: (prop2: TestProps) => ({ + width: (prop: TestProps) => (prop.foo && prop2.foo ? 100 : 0), margin: 8, }), }); @@ -555,10 +555,10 @@ withStyles((theme) => { withStyles((theme) => ({ root: { - width: (prop: testProps) => (prop.foo ? 100 : 0), + width: (prop: TestProps) => (prop.foo ? 100 : 0), }, - root2: (prop2: testProps) => ({ - width: (prop: testProps) => (prop.foo && prop2.foo ? 100 : 0), + root2: (prop2: TestProps) => ({ + width: (prop: TestProps) => (prop.foo && prop2.foo ? 100 : 0), height: theme.spacing(1), }), })); @@ -618,18 +618,18 @@ withStyles((theme) => return { padding: theme.spacing(1) }; }); - interface myProps { + interface MyProps { testValue: boolean; } // Type of props follow all the way to css properties - styled(Button)(({ theme, testValue }) => { + styled(Button)(({ theme, testValue }) => { expectType(theme); expectType(testValue); return { padding: (props) => { - expectType(props); + expectType(props); expectType(props.testValue); return theme.spacing(1); diff --git a/scripts/generateProptypes.ts b/scripts/generateProptypes.ts index 512fb42f0faaff..e4033148770ada 100644 --- a/scripts/generateProptypes.ts +++ b/scripts/generateProptypes.ts @@ -140,6 +140,8 @@ const getSortLiteralUnions: ttp.InjectOptions['getSortLiteralUnions'] = (compone ) { return sortBreakpointsLiteralByViewportAscending; } + + return undefined; }; const tsconfig = ttp.loadConfig(path.resolve(__dirname, '../tsconfig.json')); diff --git a/scripts/listChangedFiles.test.js b/scripts/listChangedFiles.test.js index 24a18d0240856e..5c1360a6e61fdb 100644 --- a/scripts/listChangedFiles.test.js +++ b/scripts/listChangedFiles.test.js @@ -1,8 +1,8 @@ -const listChangedFiles = require('./listChangedFiles'); const fs = require('fs'); const rimraf = require('rimraf'); const { promisify } = require('util'); const { expect } = require('chai'); +const listChangedFiles = require('./listChangedFiles'); const writeFileAsync = promisify(fs.writeFile); const rimrafAsync = promisify(rimraf);