diff --git a/.eslintignore b/.eslintignore index 5ae1504b1a3235..8941546b34343e 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 +# TODO +/packages/typescript-to-proptypes/ +/framer/ # Ignore fixtures /packages/typescript-to-proptypes/test/**/*.js /tmp diff --git a/.eslintrc.js b/.eslintrc.js index 68a9f0e6a2981b..8e9fb5b5a6e3a3 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,4 +1,3 @@ -const confusingBrowserGlobals = require('confusing-browser-globals'); const path = require('path'); module.exports = { @@ -11,13 +10,19 @@ module.exports = { browser: true, node: true, }, - extends: ['plugin:import/recommended', 'airbnb', 'prettier', 'prettier/react'], - parser: 'babel-eslint', + extends: [ + 'plugin:import/recommended', + 'plugin:import/typescript', + 'airbnb-typescript', + 'prettier', + 'prettier/react', + 'prettier/@typescript-eslint', + ], + parser: '@typescript-eslint/parser', parserOptions: { ecmaVersion: 7, - sourceType: 'module', }, - plugins: ['babel', 'material-ui', 'react-hooks'], + plugins: ['material-ui', 'react-hooks', '@typescript-eslint'], settings: { 'import/resolver': { webpack: { @@ -31,16 +36,11 @@ module.exports = { */ rules: { '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', - // Strict, airbnb is using warn; allow warn and error for dev environments - 'no-console': ['error', { allow: ['warn', 'error'] }], - 'no-constant-condition': 'error', - // Airbnb use error - 'no-param-reassign': 'off', - 'no-prototype-builtins': 'off', + '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', { @@ -51,64 +51,38 @@ module.exports = { ], }, ], - '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-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. - - '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. - + '@typescript-eslint/dot-notation': 'off', // TODO performance consideration + '@typescript-eslint/no-implied-eval': 'off', // TODO performance consideration + '@typescript-eslint/no-throw-literal': 'off', // TODO performance consideration + 'import/named': 'off', // Not sure why it doesn't work + '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 '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', - 'react/destructuring-assignment': 'off', - // It's buggy - 'react/forbid-prop-types': 'off', - 'react/jsx-curly-brace-presence': 'off', - // prefer over <>. The former allows `key` while the latter doesn't - 'react/jsx-fragments': ['error', 'element'], - 'react/jsx-filename-extension': ['error', { extensions: ['.js'] }], // airbnb is using .jsx - '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/jsx-props-no-spreading': 'off', + '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 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', - // 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/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', // 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/no-extraneous-dependencies': 'off', // It would be better to enable this rule. - '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: [ { @@ -124,7 +98,6 @@ module.exports = { rules: { // does not work with wildcard imports. Mistakes will throw at runtime anyway 'import/named': 'off', - // 'no-restricted-imports': [ 'error', { @@ -191,5 +164,53 @@ module.exports = { 'react/prop-types': 'off', }, }, + { + files: ['*.d.ts'], + rules: { + 'import/export': 'off', // Not sure why it doesn't work + }, + }, + { + 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', + 'import/export': 'off', // Not sure why it doesn't work + 'import/prefer-default-export': 'off', + 'jsx-a11y/anchor-has-content': 'off', + 'jsx-a11y/anchor-is-valid': 'off', + 'jsx-a11y/tabindex-no-positive': '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..e3444694af1a61 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 }), [], )} @@ -158,6 +158,7 @@ function AppDrawer(props) { href={`https://material-ui.com${languagePrefix}/versions/`} onClick={onClose} > + {/* eslint-disable-next-line material-ui/no-hardcoded-labels -- version string is untranslatable */} {`v${process.env.LIB_VERSION}`} ) : null} diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js index c9ae3453455466..a089d0415ecf3c 100644 --- a/docs/src/modules/components/AppFrame.js +++ b/docs/src/modules/components/AppFrame.js @@ -273,7 +273,7 @@ function AppFrame(props) { hrefLang="en" onClick={handleLanguageMenuClose} > - {`${t('helpToTranslate')}`} + {t('helpToTranslate')} 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/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js index 4f696c37860dee..e16c81225ead3d 100644 --- a/docs/src/modules/components/TopLayoutBlog.js +++ b/docs/src/modules/components/TopLayoutBlog.js @@ -58,6 +58,7 @@ function TopLayoutBlog(props) { color="textSecondary" className={classes.back} > + {/* eslint-disable-next-line material-ui/no-hardcoded-labels */} {'< Back to blog'} {rendered.map((chunk, index) => { 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/tables/EnhancedTable.js b/docs/src/pages/components/tables/EnhancedTable.js index 85e3c8901246e5..250b60213bc258 100644 --- a/docs/src/pages/components/tables/EnhancedTable.js +++ b/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'); diff --git a/docs/src/pages/components/tables/EnhancedTable.tsx b/docs/src/pages/components/tables/EnhancedTable.tsx index a116b80a64cc2d..796f2572324f5b 100644 --- a/docs/src/pages/components/tables/EnhancedTable.tsx +++ b/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; 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('asc'); 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 aee3e3e159d243..3d8df099c8181a 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/onepirate/ForgotPassword.js b/docs/src/pages/premium-themes/onepirate/ForgotPassword.js index fad04f2fcf7de2..33ff4052a91a5e 100644 --- a/docs/src/pages/premium-themes/onepirate/ForgotPassword.js +++ b/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'; diff --git a/docs/src/pages/premium-themes/onepirate/Home.js b/docs/src/pages/premium-themes/onepirate/Home.js index 613f0416e87f8f..2ac798c88371d4 100644 --- a/docs/src/pages/premium-themes/onepirate/Home.js +++ b/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'; diff --git a/docs/src/pages/premium-themes/onepirate/Privacy.js b/docs/src/pages/premium-themes/onepirate/Privacy.js index 9636759dea6864..06432365e0adfc 100644 --- a/docs/src/pages/premium-themes/onepirate/Privacy.js +++ b/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'; diff --git a/docs/src/pages/premium-themes/onepirate/SignIn.js b/docs/src/pages/premium-themes/onepirate/SignIn.js index 89c4c41e988e6a..477fabffc7725a 100644 --- a/docs/src/pages/premium-themes/onepirate/SignIn.js +++ b/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'; diff --git a/docs/src/pages/premium-themes/onepirate/SignUp.js b/docs/src/pages/premium-themes/onepirate/SignUp.js index 11f4ce8b88e202..5f9b2db3204814 100644 --- a/docs/src/pages/premium-themes/onepirate/SignUp.js +++ b/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'; diff --git a/docs/src/pages/premium-themes/onepirate/Terms.js b/docs/src/pages/premium-themes/onepirate/Terms.js index 4792365078220c..a7c29f4d19a9f8 100644 --- a/docs/src/pages/premium-themes/onepirate/Terms.js +++ b/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'; 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 fdfe2cc131d421..10d03dea827cba 100644 --- a/docs/webpackBaseConfig.js +++ b/docs/webpackBaseConfig.js @@ -16,7 +16,7 @@ module.exports = { '@material-ui/utils': path.resolve(__dirname, '../packages/material-ui-utils/src'), docs: path.resolve(__dirname, '../docs'), }, - extensions: ['.js', '.ts'], + extensions: ['.js', '.ts', '.tsx', '.d.ts'], }, output: { path: path.join(__dirname, 'build'), @@ -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 6623a3d48c7e58..861714ff283703 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", - "lint:ci": "eslint . --report-unused-disable-directives", - "lint:fix": "eslint . --cache --fix", + "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,9 +71,9 @@ "@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-core": "^7.0.0-bridge.0", - "babel-eslint": "^10.0.3", "babel-loader": "^8.0.0", "babel-plugin-istanbul": "^6.0.0", "babel-plugin-macros": "^2.8.0", @@ -83,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", @@ -93,31 +93,31 @@ "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", - "eslint-config-airbnb": "^18.2.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", "eslint-plugin-babel": "^5.3.1", "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", @@ -127,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", @@ -147,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" }, diff --git a/packages/eslint-plugin-material-ui/package.json b/packages/eslint-plugin-material-ui/package.json index b3f17ed045ca4e..634594cbcfea53 100644 --- a/packages/eslint-plugin-material-ui/package.json +++ b/packages/eslint-plugin-material-ui/package.json @@ -9,7 +9,7 @@ }, "devDependencies": { "@types/eslint": "^7.2.0", - "babel-eslint": "^10.1.0" + "@typescript-eslint/parser": "^3.6.0" }, "scripts": { "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/eslint-plugin-material-ui/**/*.test.js' --exclude '**/node_modules/**'" diff --git a/packages/eslint-plugin-material-ui/src/rules/disallow-active-elements-as-key-event-target.test.js b/packages/eslint-plugin-material-ui/src/rules/disallow-active-elements-as-key-event-target.test.js index 0967f3f95d6280..4dfdd54aae764d 100644 --- a/packages/eslint-plugin-material-ui/src/rules/disallow-active-elements-as-key-event-target.test.js +++ b/packages/eslint-plugin-material-ui/src/rules/disallow-active-elements-as-key-event-target.test.js @@ -1,7 +1,10 @@ const eslint = require('eslint'); const rule = require('./disallow-active-element-as-key-event-target'); -const ruleTester = new eslint.RuleTester({ parser: require.resolve('babel-eslint') }); +const ruleTester = new eslint.RuleTester({ + parser: require.resolve('@typescript-eslint/parser'), + parserOptions: { sourceType: 'module' }, +}); ruleTester.run('disallow-active-element-as-key-event-target', rule, { valid: [ "import { fireEvent } from 'test/utils/createClientRender';\nfireEvent.keyDown(getByRole('button'), { key: ' ' })", diff --git a/packages/eslint-plugin-material-ui/src/rules/docgen-ignore-before-comment.test.js b/packages/eslint-plugin-material-ui/src/rules/docgen-ignore-before-comment.test.js index 7c087d07106599..65fd1360ff4594 100644 --- a/packages/eslint-plugin-material-ui/src/rules/docgen-ignore-before-comment.test.js +++ b/packages/eslint-plugin-material-ui/src/rules/docgen-ignore-before-comment.test.js @@ -1,7 +1,7 @@ const eslint = require('eslint'); const rule = require('./docgen-ignore-before-comment'); -const ruleTester = new eslint.RuleTester(); +const ruleTester = new eslint.RuleTester({ parser: require.resolve('@typescript-eslint/parser') }); ruleTester.run('ignore-before-comment', rule, { valid: [ '\n/**\n * @ignore\n */\n', diff --git a/packages/eslint-plugin-material-ui/src/rules/no-hardcoded-labels.js b/packages/eslint-plugin-material-ui/src/rules/no-hardcoded-labels.js index 7d2cf50be87141..46e257cb993bcc 100644 --- a/packages/eslint-plugin-material-ui/src/rules/no-hardcoded-labels.js +++ b/packages/eslint-plugin-material-ui/src/rules/no-hardcoded-labels.js @@ -11,16 +11,38 @@ module.exports = { const { allow = [] } = context.options[0] || {}; const emojiRegex = createEmojiRegex(); + function valueViolatesRule(value) { + const sanitizedValue = typeof value === 'string' ? value.trim() : value; + const hasTranslateableContent = sanitizedValue !== '' && !emojiRegex.test(sanitizedValue); + + return hasTranslateableContent && !allow.includes(sanitizedValue); + } + return { + JSXExpressionContainer(node) { + if (node.parent.type === 'JSXElement') { + const isTemplateLiteral = node.expression.type === 'TemplateLiteral'; + const isStringLiteral = + node.expression.type === 'Literal' && typeof node.expression.value === 'string'; + + if ((isStringLiteral && valueViolatesRule(node.expression.value)) || isTemplateLiteral) { + context.report({ messageId: 'literal-label', node }); + } + } + }, + JSXText(node) { + if (node.parent.type === 'JSXElement') { + if (valueViolatesRule(node.value)) { + context.report({ messageId: 'literal-label', node }); + } + } + }, Literal(node) { const canLabelComponent = node.parent.type === 'JSXElement' || (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)) { + if (canLabelComponent && valueViolatesRule(node.value)) { context.report({ messageId: 'literal-label', node }); } }, diff --git a/packages/eslint-plugin-material-ui/src/rules/no-hardcoded-labels.test.js b/packages/eslint-plugin-material-ui/src/rules/no-hardcoded-labels.test.js index b7972261af250e..bf437844932875 100644 --- a/packages/eslint-plugin-material-ui/src/rules/no-hardcoded-labels.test.js +++ b/packages/eslint-plugin-material-ui/src/rules/no-hardcoded-labels.test.js @@ -1,7 +1,12 @@ const eslint = require('eslint'); const rule = require('./no-hardcoded-labels'); -const ruleTester = new eslint.RuleTester({ parser: require.resolve('babel-eslint') }); +const ruleTester = new eslint.RuleTester({ + parser: require.resolve('@typescript-eslint/parser'), + parserOptions: { + ecmaFeatures: { jsx: true }, + }, +}); ruleTester.run('no-hardcoded-labels', rule, { valid: [ '', @@ -12,10 +17,13 @@ ruleTester.run('no-hardcoded-labels', rule, { '', { code: 'Material-UI', options: [{ allow: 'Material-UI' }] }, ' ❤️', + ``, ], invalid: [ { code: '', errors: [{ messageId: 'literal-label' }] }, { code: '', errors: [{ messageId: 'literal-label' }] }, + { code: "", errors: [{ messageId: 'literal-label' }] }, + { code: '', errors: [{ messageId: 'literal-label' }] }, ], }); diff --git a/packages/material-ui-codemod/src/util/getJSExports.js b/packages/material-ui-codemod/src/util/getJSExports.js index 2f050f05174334..5ede8f49231f02 100644 --- a/packages/material-ui-codemod/src/util/getJSExports.js +++ b/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(); diff --git a/packages/material-ui-codemod/src/v4.0.0/optimal-imports.js b/packages/material-ui-codemod/src/v4.0.0/optimal-imports.js index 5cdc1bf1a65ad3..59a92776b6e56b 100644 --- a/packages/material-ui-codemod/src/v4.0.0/optimal-imports.js +++ b/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') { diff --git a/packages/material-ui-lab/src/Alert/Alert.js b/packages/material-ui-lab/src/Alert/Alert.js index e7eaf1c048fe17..8681b08634b003 100644 --- a/packages/material-ui-lab/src/Alert/Alert.js +++ b/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; diff --git a/packages/material-ui-lab/src/Alert/Alert.test.js b/packages/material-ui-lab/src/Alert/Alert.test.js index c4de7927fd63bc..20f50ebc618414 100644 --- a/packages/material-ui-lab/src/Alert/Alert.test.js +++ b/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('', () => { const mount = createMount(); diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts index b9dc3e3b57a5dc..ceb8339cf886b4 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.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js index 75787b43080430..7071a73d49aaf7 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js +++ b/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; 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/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js index 4f7f6fcaf3945c..6c2bad8c97d73e 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js +++ b/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('', () => { const mount = createMount(); diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.test.js b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.test.js index 94ce0c4dc63796..9c33fc4f38e1c5 100644 --- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.test.js +++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.test.js @@ -4,8 +4,8 @@ import { getClasses } from '@material-ui/core/test-utils'; import createMount from 'test/utils/createMount'; import describeConformance from '@material-ui/core/test-utils/describeConformance'; import { createClientRender } from 'test/utils/createClientRender'; +import Avatar from '@material-ui/core/Avatar'; import AvatarGroup from './AvatarGroup'; -import { Avatar } from '@material-ui/core'; describe('', () => { const mount = createMount(); diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js b/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js index 9833dc0c7e6acb..6a03c8b88d9e02 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.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 LoadingButton from './LoadingButton'; import Button from '@material-ui/core/Button'; +import LoadingButton from './LoadingButton'; describe('', () => { const mount = createMount(); diff --git a/packages/material-ui-lab/src/Pagination/Pagination.test.js b/packages/material-ui-lab/src/Pagination/Pagination.test.js index 4d182897a87763..76a1f61a98d98a 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.test.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.test.js @@ -5,8 +5,8 @@ import { getClasses } from '@material-ui/core/test-utils'; import createMount from 'test/utils/createMount'; import describeConformance from '@material-ui/core/test-utils/describeConformance'; import { createClientRender } from 'test/utils/createClientRender'; -import Pagination from './Pagination'; import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import Pagination from './Pagination'; describe('', () => { let classes; diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js index a47c2a5cbae4d1..710f51135d2696 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js @@ -3,11 +3,11 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import { fade, useTheme, withStyles } from '@material-ui/core/styles'; import ButtonBase from '@material-ui/core/ButtonBase'; +import { capitalize } from '@material-ui/core/utils'; import FirstPageIcon from '../internal/svg-icons/FirstPage'; import LastPageIcon from '../internal/svg-icons/LastPage'; import NavigateBeforeIcon from '../internal/svg-icons/NavigateBefore'; import NavigateNextIcon from '../internal/svg-icons/NavigateNext'; -import { capitalize } from '@material-ui/core/utils'; export const styles = (theme) => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.test.js b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.test.js index e6b07d3f4d3c42..e25a2c73107f71 100644 --- a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.test.js +++ b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.test.js @@ -7,8 +7,8 @@ import { act, createClientRender, fireEvent } from 'test/utils/createClientRende import Icon from '@material-ui/core/Icon'; import Tooltip from '@material-ui/core/Tooltip'; import Fab from '@material-ui/core/Fab'; -import SpeedDialAction from './SpeedDialAction'; import describeConformance from '@material-ui/core/test-utils/describeConformance'; +import SpeedDialAction from './SpeedDialAction'; describe('', () => { let clock; diff --git a/packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.test.js b/packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.test.js index 1284eaa284f0ca..94ef870eea6ea3 100644 --- a/packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.test.js +++ b/packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.test.js @@ -3,8 +3,8 @@ import { expect } from 'chai'; import { getClasses, findOutermostIntrinsic } from '@material-ui/core/test-utils'; import createMount from 'test/utils/createMount'; import Icon from '@material-ui/core/Icon'; -import SpeedDialIcon from './SpeedDialIcon'; import describeConformance from '@material-ui/core/test-utils/describeConformance'; +import SpeedDialIcon from './SpeedDialIcon'; describe('', () => { const mount = createMount(); 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-lab/src/useAutocomplete/useAutocomplete.spec.ts b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.spec.ts index 3608b57dea60c2..3650a117eb9e76 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.spec.ts +++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.spec.ts @@ -13,146 +13,146 @@ const persons: Person[] = [ { id: '4', name: 'Matt' }, ]; -// Single selection mode - -// value type is inferred correctly when multiple is undefined -useAutocomplete({ - options: ['1', '2', '3'], - onChange(event, value) { - expectType(value); - }, -}); - -// value type is inferred correctly when multiple is false -useAutocomplete({ - options: ['1', '2', '3'], - multiple: false, - onChange(event, value) { - expectType(value); - }, -}); - -// value type is inferred correctly for type unions -useAutocomplete({ - options: ['1', '2', '3', 4, true], - onChange(event, value) { - expectType(value); - }, -}); - -// value type is inferred correctly for interface -useAutocomplete({ - options: persons, - onChange(event, value) { - expectType(value); - }, -}); - -// value type is inferred correctly when value is set -useAutocomplete({ - options: ['1', '2', '3'], - onChange(event, value) { - expectType(value); - value; - }, - filterOptions(options, state) { - expectType, typeof state>(state); - expectType(options); - return options; - }, - getOptionLabel(option) { - expectType(option); - return option; - }, - value: null, -}); - -// Multiple selection mode - -// value type is inferred correctly for simple type -useAutocomplete({ - options: ['1', '2', '3'], - multiple: true, - onChange(event, value) { - expectType(value); - value; - }, -}); - -// value type is inferred correctly for union type -useAutocomplete({ - options: ['1', '2', '3', 4, true], - multiple: true, - onChange(event, value) { - expectType, typeof value>(value); - }, -}); - -// value type is inferred correctly for interface -useAutocomplete({ - options: persons, - multiple: true, - onChange(event, value) { - expectType(value); - value; - }, -}); - -// no type inference conflict when value type is set explicitly -useAutocomplete({ - options: persons, - multiple: true, - onChange(event, value: Person[]) {}, -}); - -// Disable clearable - -useAutocomplete({ - options: ['1', '2', '3'], - disableClearable: true, - onChange(event, value) { - expectType(value); - }, -}); - -useAutocomplete({ - options: ['1', '2', '3'], - disableClearable: false, - onChange(event, value) { - expectType(value); - }, -}); - -useAutocomplete({ - options: ['1', '2', '3'], - onChange(event, value) { - expectType(value); - }, -}); - -// Free solo -useAutocomplete({ - options: persons, - onChange(event, value) { - expectType(value); - }, - freeSolo: true, -}); - -useAutocomplete({ - options: persons, - disableClearable: true, - onChange(event, value) { - expectType(value); - }, - freeSolo: true, -}); - -useAutocomplete({ - options: persons, - multiple: true, - onChange(event, value) { - expectType, typeof value>(value); - }, - freeSolo: true, -}); +function Component() { + // value type is inferred correctly when multiple is undefined + useAutocomplete({ + options: ['1', '2', '3'], + onChange(event, value) { + expectType(value); + }, + }); + + // value type is inferred correctly when multiple is false + useAutocomplete({ + options: ['1', '2', '3'], + multiple: false, + onChange(event, value) { + expectType(value); + }, + }); + + // value type is inferred correctly for type unions + useAutocomplete({ + options: ['1', '2', '3', 4, true], + onChange(event, value) { + expectType(value); + }, + }); + + // value type is inferred correctly for interface + useAutocomplete({ + options: persons, + onChange(event, value) { + expectType(value); + }, + }); + + // value type is inferred correctly when value is set + useAutocomplete({ + options: ['1', '2', '3'], + onChange(event, value) { + expectType(value); + value; + }, + filterOptions(options, state) { + expectType, typeof state>(state); + expectType(options); + return options; + }, + getOptionLabel(option) { + expectType(option); + return option; + }, + value: null, + }); + + // Multiple selection mode + + // value type is inferred correctly for simple type + useAutocomplete({ + options: ['1', '2', '3'], + multiple: true, + onChange(event, value) { + expectType(value); + value; + }, + }); + + // value type is inferred correctly for union type + useAutocomplete({ + options: ['1', '2', '3', 4, true], + multiple: true, + onChange(event, value) { + expectType, typeof value>(value); + }, + }); + + // value type is inferred correctly for interface + useAutocomplete({ + options: persons, + multiple: true, + onChange(event, value) { + expectType(value); + value; + }, + }); + + // no type inference conflict when value type is set explicitly + useAutocomplete({ + options: persons, + multiple: true, + onChange(event, value: Person[]) {}, + }); + + // Disable clearable + + useAutocomplete({ + options: ['1', '2', '3'], + disableClearable: true, + onChange(event, value) { + expectType(value); + }, + }); + + useAutocomplete({ + options: ['1', '2', '3'], + disableClearable: false, + onChange(event, value) { + expectType(value); + }, + }); + + useAutocomplete({ + options: ['1', '2', '3'], + onChange(event, value) { + expectType(value); + }, + }); + + // Free solo + useAutocomplete({ + options: persons, + onChange(event, value) { + expectType(value); + }, + freeSolo: true, + }); + + useAutocomplete({ + options: persons, + disableClearable: true, + onChange(event, value) { + expectType(value); + }, + freeSolo: true, + }); + + useAutocomplete({ + options: persons, + multiple: true, + onChange(event, value) { + expectType, typeof value>(value); + }, + freeSolo: true, + }); +} 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/defaultTheme/defaultTheme.spec.ts b/packages/material-ui-styles/src/defaultTheme/defaultTheme.spec.ts index adcb41a92d255c..9a6368de187328 100644 --- a/packages/material-ui-styles/src/defaultTheme/defaultTheme.spec.ts +++ b/packages/material-ui-styles/src/defaultTheme/defaultTheme.spec.ts @@ -8,7 +8,7 @@ declare module '@material-ui/styles' { } } -{ +function MyComponent() { const value = useTheme().myProperty; expectType(value); } diff --git a/packages/material-ui-styles/src/makeStyles/makeStyles.d.ts b/packages/material-ui-styles/src/makeStyles/makeStyles.d.ts index f1ffc3d4b23055..a0ce04b43fcde1 100644 --- a/packages/material-ui-styles/src/makeStyles/makeStyles.d.ts +++ b/packages/material-ui-styles/src/makeStyles/makeStyles.d.ts @@ -1,9 +1,4 @@ -import { - ClassNameMap, - PropsOfStyles, - 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'; @@ -14,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/makeStyles/makeStyles.spec.tsx b/packages/material-ui-styles/src/makeStyles/makeStyles.spec.tsx index 3e254c40713795..0f5a50ca7b0b74 100644 --- a/packages/material-ui-styles/src/makeStyles/makeStyles.spec.tsx +++ b/packages/material-ui-styles/src/makeStyles/makeStyles.spec.tsx @@ -119,19 +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) => ({ - 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) => ({ + root: { + background: 'blue', + }, + })); - 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; } 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/test/styles.spec.tsx b/packages/material-ui-styles/test/styles.spec.tsx index 49fc999245cc7c..3b1bf2b5d7446a 100644 --- a/packages/material-ui-styles/test/styles.spec.tsx +++ b/packages/material-ui-styles/test/styles.spec.tsx @@ -402,7 +402,7 @@ withStyles((theme) => } } -function forwardRefTest() { +function ForwardRefTest() { const styles = createStyles({ root: { color: 'red' }, }); @@ -439,19 +439,20 @@ 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, }), })); + // eslint-disable-next-line react-hooks/rules-of-hooks const styles = useStyles({ foo: true }); expectType, typeof styles>(styles); } @@ -480,12 +481,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 +494,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 19e9ea13740f21..d0922b057a0711 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 { act, 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 75fe08132c1b74..b24c16550da0bc 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 { act, 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 3e07bd4e15479d..20b614959d27de 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 { act, createClientRender, screen } from 'test/utils/createClientRender'; import describeConformance from '../test-utils/describeConformance'; import Breadcrumbs from './Breadcrumbs'; -import { act, 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..84a04b94849dcb 100644 --- a/packages/material-ui/src/Button/Button.spec.tsx +++ b/packages/material-ui/src/Button/Button.spec.tsx @@ -35,7 +35,7 @@ const ButtonTest = () => ( Link - // By default the underlying component is a button element: + {/* By default the underlying component is a button element */} - // If an href is provided, an anchor is used: + {/* If an href is provided, an anchor is used */} - // If a component prop is specified, use that: + {/* 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('