From e0da6235f30095645b8aa65fadbd77ba0599102c Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 11 Jul 2020 21:28:42 +0200 Subject: [PATCH 01/16] [core] Lint source in TypeScript --- .eslintrc.js | 169 +++++++++--------- docs/webpackBaseConfig.js | 2 +- package.json | 16 +- .../src/makeStyles/makeStyles.d.ts | 1 - .../test/typescript/components.spec.tsx | 32 ++-- .../test/options-test/options.ts | 1 + .../overloaded-function-component/input.d.ts | 1 + .../test/sort-unions/input.d.ts | 2 - .../test/union-props/input.d.ts | 2 - scripts/generateProptypes.ts | 1 + yarn.lock | 93 +++++++++- 11 files changed, 203 insertions(+), 117 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 68a9f0e6a2981b..402925ff1ad7f8 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -11,13 +11,12 @@ module.exports = { browser: true, node: true, }, - extends: ['plugin:import/recommended', 'airbnb', 'prettier', 'prettier/react'], - parser: 'babel-eslint', + extends: ['plugin:import/recommended', 'airbnb-typescript', 'prettier', 'prettier/react', 'prettier/@typescript-eslint'], + parser: '@typescript-eslint/parser', parserOptions: { - ecmaVersion: 7, - sourceType: 'module', + project: './tsconfig.json', }, - plugins: ['babel', 'material-ui', 'react-hooks'], + plugins: ['material-ui', 'react-hooks', '@typescript-eslint'], settings: { 'import/resolver': { webpack: { @@ -25,89 +24,84 @@ module.exports = { }, }, }, - /** - * Sorted alphanumerically within each group. built-in and each plugin form - * their own groups. - */ + // Sorted alphanumerically 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-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 - // arguments - 'no-restricted-globals': ['error'].concat(confusingBrowserGlobals), - 'no-underscore-dangle': 'error', - 'prefer-arrow-callback': ['error', { allowNamedFunctions: true }], - 'prefer-destructuring': 'off', // Destructuring harm grep potential. + '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. + 'react/jsx-fragments': ['error', 'element'], // Prefer over <>. + 'react/jsx-props-no-spreading': 'off', // Less strict than airbnb. We are a UI library. - '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. + // '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 + // // arguments + // 'no-restricted-globals': ['error'].concat(confusingBrowserGlobals), + // 'no-underscore-dangle': 'error', + // 'prefer-arrow-callback': ['error', { allowNamedFunctions: true }], + // 'prefer-destructuring': 'off', // Destructuring harm grep potential. - 'material-ui/docgen-ignore-before-comment': 'error', + // '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. - // 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/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', + // 'material-ui/docgen-ignore-before-comment': 'error', - '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', - }, - ], + // // 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', + // { + // // airbnb is disabling this rule + // eventHandlerPrefix: 'handle', + // eventHandlerPropPrefix: 'on', + // }, + // ], + // // not a good rule for components close to the DOM + // 'react/no-danger': 'error', + // // Strict, airbnb is using off + // 'react/no-direct-mutation-state': 'error', + // 'react/no-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', + // { + // groups: [['index', 'sibling', 'parent', 'internal', 'external', 'builtin']], + // 'newlines-between': 'never', + // }, + // ], - 'react-hooks/rules-of-hooks': 'error', + // 'react-hooks/rules-of-hooks': 'error', 'react-hooks/exhaustive-deps': ['error', { additionalHooks: 'useEnhancedEffect' }], }, overrides: [ @@ -191,5 +185,16 @@ module.exports = { 'react/prop-types': 'off', }, }, + { + files: ['*.spec.tsx'], + rules: { + '@typescript-eslint/no-unused-expressions': 'off', + '@typescript-eslint/no-unused-vars': 'off', + 'max-classes-per-file': 'off', + 'no-lone-blocks': 'off', + 'react/prefer-stateless-function': 'off', + 'react/prop-types': 'off', + }, + }, ], }; diff --git a/docs/webpackBaseConfig.js b/docs/webpackBaseConfig.js index fdfe2cc131d421..898479a3799091 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'), diff --git a/package.json b/package.json index 6623a3d48c7e58..bbfe7972861b2b 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 .ts,.tsx", + "lint:ci": "eslint . --report-unused-disable-directives --ext .ts,.tsx", + "lint:fix": "eslint . --cache --fix --ext .ts,.tsx", "prettier": "node ./scripts/prettier.js", "prettier:all": "node ./scripts/prettier.js write", "size:snapshot": "node scripts/sizeSnapshot/create", @@ -72,8 +72,6 @@ "@types/react": "^16.9.3", "@types/sinon": "^9.0.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", @@ -96,7 +94,7 @@ "enzyme": "^3.9.0", "enzyme-adapter-react-16": "^1.14.0", "eslint": "^7.4.0", - "eslint-config-airbnb": "^18.2.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", @@ -186,5 +184,9 @@ "packages/*", "docs", "framer" - ] + ], + "dependencies": { + "@typescript-eslint/eslint-plugin": "^3.6.0", + "@typescript-eslint/parser": "^3.6.0" + } } diff --git a/packages/material-ui-styles/src/makeStyles/makeStyles.d.ts b/packages/material-ui-styles/src/makeStyles/makeStyles.d.ts index f1ffc3d4b23055..3c8cb55056819a 100644 --- a/packages/material-ui-styles/src/makeStyles/makeStyles.d.ts +++ b/packages/material-ui-styles/src/makeStyles/makeStyles.d.ts @@ -1,6 +1,5 @@ import { ClassNameMap, - PropsOfStyles, Styles, WithStylesOptions, } from '@material-ui/styles/withStyles'; diff --git a/packages/material-ui/test/typescript/components.spec.tsx b/packages/material-ui/test/typescript/components.spec.tsx index e41a804807a67b..c21de4c070605e 100644 --- a/packages/material-ui/test/typescript/components.spec.tsx +++ b/packages/material-ui/test/typescript/components.spec.tsx @@ -288,7 +288,7 @@ const ChipsTest = () => (
M} label="Clickable Chip" onClick={(e) => log(e)} /> - } label="Deletable Chip" onDelete={(e) => log(e)} /> + } label="Deletable Chip" onDelete={(e) => log(e)} /> @@ -305,7 +305,7 @@ const ChipsTest = () => ( const DialogTest = () => { const emails = ['username@gmail.com', 'user02@gmail.com']; return ( - log(e)} open> + log(event)} open> Set backup account
@@ -399,14 +399,14 @@ const DrawerTest = () => { }; return (
- log(e)} onClick={(e) => log(e)}> + log(event)} onClick={(e) => log(e)}> List log(e)} + onClose={(event) => log(event)} onClick={(e) => log(e)} ModalProps={{ hideBackdrop: true, @@ -418,7 +418,7 @@ const DrawerTest = () => { anchor="bottom" variant="temporary" open={open.bottom} - onClose={(e) => log(e)} + onClose={(event) => log(event)} onClick={(e) => log(e)} > List @@ -427,7 +427,7 @@ const DrawerTest = () => { variant="persistent" anchor="right" open={open.right} - onClose={(e) => log(e)} + onClose={(event) => log(event)} onClick={(e) => log(e)} > List @@ -447,7 +447,7 @@ const SwipeableDrawerTest = () => {
log(e)} + onClose={(event) => log(event)} onClick={(e) => log(e)} onOpen={(e) => log(e)} > @@ -456,7 +456,7 @@ const SwipeableDrawerTest = () => { log(e)} + onClose={(event) => log(event)} onClick={(e) => log(e)} onOpen={(e) => log(e)} ModalProps={{ @@ -468,7 +468,7 @@ const SwipeableDrawerTest = () => { log(e)} + onClose={(event) => log(event)} onClick={(e) => log(e)} onOpen={(e) => log(e)} > @@ -478,7 +478,7 @@ const SwipeableDrawerTest = () => { variant="temporary" anchor="right" open={open.right} - onClose={(e) => log(e)} + onClose={(event) => log(event)} onClick={(e) => log(e)} onOpen={(e) => log(e)} > @@ -516,7 +516,7 @@ const GridTest = () => ( ... - + ... @@ -538,7 +538,7 @@ const ListTest = () => ( {[0, 1, 2, 3].map((value) => ( log(e)}> - + @@ -566,8 +566,8 @@ const MenuTest = () => { log(e)} + open + onClose={(event) => log(event)} PopoverClasses={{ paper: 'foo' }} > {options.map((option, index) => ( @@ -744,9 +744,9 @@ const SnackbarTest = () => ( vertical: 'bottom', horizontal: 'left', }} - open={true} + open autoHideDuration={6000} - onClose={(e) => log(e)} + onClose={(event) => log(event)} ContentProps={ { // 'aria-describedby': 'message-id', diff --git a/packages/typescript-to-proptypes/test/options-test/options.ts b/packages/typescript-to-proptypes/test/options-test/options.ts index 85f340a76c7db1..0d76f3064bb9b8 100644 --- a/packages/typescript-to-proptypes/test/options-test/options.ts +++ b/packages/typescript-to-proptypes/test/options-test/options.ts @@ -6,6 +6,7 @@ const options: TestOptions = { if (name.endsWith('Props')) { return false; } + return true; }, }, injector: { diff --git a/packages/typescript-to-proptypes/test/overloaded-function-component/input.d.ts b/packages/typescript-to-proptypes/test/overloaded-function-component/input.d.ts index 5e9d3028d4404d..d9fddc0e5f9303 100644 --- a/packages/typescript-to-proptypes/test/overloaded-function-component/input.d.ts +++ b/packages/typescript-to-proptypes/test/overloaded-function-component/input.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; + interface ButtonProps { variant?: string; } diff --git a/packages/typescript-to-proptypes/test/sort-unions/input.d.ts b/packages/typescript-to-proptypes/test/sort-unions/input.d.ts index 08d90791df5a95..5379600ee91549 100644 --- a/packages/typescript-to-proptypes/test/sort-unions/input.d.ts +++ b/packages/typescript-to-proptypes/test/sort-unions/input.d.ts @@ -1,5 +1,3 @@ -import * as React from 'react'; - type Breakpoint = 'xs' | 'md' | 'xl'; export interface Props { diff --git a/packages/typescript-to-proptypes/test/union-props/input.d.ts b/packages/typescript-to-proptypes/test/union-props/input.d.ts index a4b6a03347078d..551c9bcf1002ff 100644 --- a/packages/typescript-to-proptypes/test/union-props/input.d.ts +++ b/packages/typescript-to-proptypes/test/union-props/input.d.ts @@ -1,5 +1,3 @@ -import * as React from 'react'; - export interface BaseProps { value?: unknown; } diff --git a/scripts/generateProptypes.ts b/scripts/generateProptypes.ts index 37a4728700deae..512fb42f0faaff 100644 --- a/scripts/generateProptypes.ts +++ b/scripts/generateProptypes.ts @@ -1,3 +1,4 @@ +/* eslint-disable no-console */ import * as path from 'path'; import * as fse from 'fs-extra'; import * as ttp from 'typescript-to-proptypes'; diff --git a/yarn.lock b/yarn.lock index d84660f8a7fb30..b2d392ef61ddec 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2495,6 +2495,11 @@ "@types/cheerio" "*" "@types/react" "*" +"@types/eslint-visitor-keys@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d" + integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag== + "@types/eslint@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-7.2.0.tgz#eb5c5b575237334df24c53195e37b53d66478d7b" @@ -2565,7 +2570,7 @@ "@types/parse5" "*" "@types/tough-cookie" "*" -"@types/json-schema@*", "@types/json-schema@^7.0.4": +"@types/json-schema@*", "@types/json-schema@^7.0.3", "@types/json-schema@^7.0.4": version "7.0.5" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.5.tgz#dcce4430e64b443ba8945f0290fb564ad5bac6dd" integrity sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ== @@ -2822,6 +2827,66 @@ dependencies: "@types/node" "*" +"@typescript-eslint/eslint-plugin@^3.6.0": + version "3.6.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.6.0.tgz#ba2b6cae478b8fca3f2e58ff1313e4198eea2d8a" + integrity sha512-ubHlHVt1lsPQB/CZdEov9XuOFhNG9YRC//kuiS1cMQI6Bs1SsqKrEmZnpgRwthGR09/kEDtr9MywlqXyyYd8GA== + dependencies: + "@typescript-eslint/experimental-utils" "3.6.0" + debug "^4.1.1" + functional-red-black-tree "^1.0.1" + regexpp "^3.0.0" + semver "^7.3.2" + tsutils "^3.17.1" + +"@typescript-eslint/experimental-utils@3.6.0": + version "3.6.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-3.6.0.tgz#0138152d66e3e53a6340f606793fb257bf2d76a1" + integrity sha512-4Vdf2hvYMUnTdkCNZu+yYlFtL2v+N2R7JOynIOkFbPjf9o9wQvRwRkzUdWlFd2YiiUwJLbuuLnl5civNg5ykOQ== + dependencies: + "@types/json-schema" "^7.0.3" + "@typescript-eslint/types" "3.6.0" + "@typescript-eslint/typescript-estree" "3.6.0" + eslint-scope "^5.0.0" + eslint-utils "^2.0.0" + +"@typescript-eslint/parser@^3.1.0", "@typescript-eslint/parser@^3.6.0": + version "3.6.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-3.6.0.tgz#79b5232e1a2d06f1fc745942b690cd87aca7b60e" + integrity sha512-taghDxuLhbDAD1U5Fk8vF+MnR0yiFE9Z3v2/bYScFb0N1I9SK8eKHkdJl1DAD48OGFDMFTeOTX0z7g0W6SYUXw== + dependencies: + "@types/eslint-visitor-keys" "^1.0.0" + "@typescript-eslint/experimental-utils" "3.6.0" + "@typescript-eslint/types" "3.6.0" + "@typescript-eslint/typescript-estree" "3.6.0" + eslint-visitor-keys "^1.1.0" + +"@typescript-eslint/types@3.6.0": + version "3.6.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-3.6.0.tgz#4bd6eee55d2f9d35a4b36c4804be1880bf68f7bc" + integrity sha512-JwVj74ohUSt0ZPG+LZ7hb95fW8DFOqBuR6gE7qzq55KDI3BepqsCtHfBIoa0+Xi1AI7fq5nCu2VQL8z4eYftqg== + +"@typescript-eslint/typescript-estree@3.6.0": + version "3.6.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-3.6.0.tgz#9b4cab43f1192b64ff51530815b8919f166ce177" + integrity sha512-G57NDSABHjvob7zVV09ehWyD1K6/YUKjz5+AufObFyjNO4DVmKejj47MHjVHHlZZKgmpJD2yyH9lfCXHrPITFg== + dependencies: + "@typescript-eslint/types" "3.6.0" + "@typescript-eslint/visitor-keys" "3.6.0" + debug "^4.1.1" + glob "^7.1.6" + is-glob "^4.0.1" + lodash "^4.17.15" + semver "^7.3.2" + tsutils "^3.17.1" + +"@typescript-eslint/visitor-keys@3.6.0": + version "3.6.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-3.6.0.tgz#44185eb0cc47651034faa95c5e2e8b314ecebb26" + integrity sha512-p1izllL2Ubwunite0ITjubuMQRBGgjdVYwyG7lXPX8GbrA6qF0uwSRz9MnXZaHMxID4948gX0Ez8v9tUDi/KfQ== + dependencies: + eslint-visitor-keys "^1.1.0" + "@webassemblyjs/ast@1.9.0": version "1.9.0" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964" @@ -3659,7 +3724,7 @@ babel-core@^7.0.0-bridge.0: resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece" integrity sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg== -babel-eslint@^10.0.3, babel-eslint@^10.1.0: +babel-eslint@^10.1.0: version "10.1.0" resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232" integrity sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg== @@ -6787,7 +6852,7 @@ escodegen@^1.14.1: optionalDependencies: source-map "~0.6.1" -eslint-config-airbnb-base@^14.2.0: +eslint-config-airbnb-base@^14.1.0, eslint-config-airbnb-base@^14.2.0: version "14.2.0" resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-14.2.0.tgz#fe89c24b3f9dc8008c9c0d0d88c28f95ed65e9c4" integrity sha512-Snswd5oC6nJaevs3nZoLSTvGJBvzTfnBqOIArkf3cbyTyq9UD79wOk8s+RiL6bhca0p/eRO6veczhf6A/7Jy8Q== @@ -6796,7 +6861,16 @@ eslint-config-airbnb-base@^14.2.0: object.assign "^4.1.0" object.entries "^1.1.2" -eslint-config-airbnb@^18.2.0: +eslint-config-airbnb-typescript@^8.0.2: + version "8.0.2" + resolved "https://registry.yarnpkg.com/eslint-config-airbnb-typescript/-/eslint-config-airbnb-typescript-8.0.2.tgz#465b17b0b1facdcca4fe23a5426bc27ab7b2b2f2" + integrity sha512-TCOftyCoIogJzzLGSg0Qlxd27qvf+1a3MHyN/PqynTqINS4iFy+SlXy/CrAN+6xkleGMSrvmPbm3pyFEku2+IQ== + dependencies: + "@typescript-eslint/parser" "^3.1.0" + eslint-config-airbnb "^18.1.0" + eslint-config-airbnb-base "^14.1.0" + +eslint-config-airbnb@^18.1.0: version "18.2.0" resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-18.2.0.tgz#8a82168713effce8fc08e10896a63f1235499dcd" integrity sha512-Fz4JIUKkrhO0du2cg5opdyPKQXOI2MvF8KUvN2710nJMT6jaRUpRE2swrJftAjVGL7T1otLM5ieo5RqS1v9Udg== @@ -6930,7 +7004,7 @@ eslint-scope@^4.0.3: esrecurse "^4.1.0" estraverse "^4.1.1" -eslint-scope@^5.1.0: +eslint-scope@^5.0.0, eslint-scope@^5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.0.tgz#d0f971dfe59c69e0cada684b23d49dbf82600ce5" integrity sha512-iiGRvtxWqgtx5m8EyQUJihBloE4EnYeGE/bz1wSPwJE6tZuJUtHlhqDM4Xj2ukE8Dyy1+HCZ4hE0fzIVMzb58w== @@ -13653,7 +13727,7 @@ regexp.prototype.flags@^1.3.0: define-properties "^1.1.3" es-abstract "^1.17.0-next.1" -regexpp@^3.1.0: +regexpp@^3.0.0, regexpp@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2" integrity sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q== @@ -15716,6 +15790,13 @@ tsutils@^2.29.0: dependencies: tslib "^1.8.1" +tsutils@^3.17.1: + version "3.17.1" + resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759" + integrity sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g== + dependencies: + tslib "^1.8.1" + tty-browserify@0.0.0: version "0.0.0" resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6" From e9875d9fd2d54802e7299964dadb42e39b0a1b80 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 12 Jul 2020 01:01:48 +0200 Subject: [PATCH 02/16] second iteration --- .eslintignore | 3 + .eslintrc.js | 94 ++++++++++++------- docs/scripts/buildApi.js | 2 +- docs/src/modules/components/AppDrawer.js | 2 +- .../src/modules/components/HighlightedCode.js | 2 +- docs/src/modules/utils/generateMarkdown.js | 2 +- docs/src/modules/utils/getDemoConfig.js | 2 +- .../components/autocomplete/CheckboxesTags.js | 3 +- .../autocomplete/CheckboxesTags.tsx | 3 +- .../pages/components/autocomplete/ComboBox.js | 2 +- .../components/autocomplete/ComboBox.tsx | 2 +- .../components/autocomplete/CountrySelect.js | 2 +- .../components/autocomplete/CountrySelect.tsx | 2 +- .../components/autocomplete/CustomizedHook.js | 2 +- .../autocomplete/CustomizedHook.tsx | 2 +- .../autocomplete/DisabledOptions.js | 2 +- .../autocomplete/DisabledOptions.tsx | 2 +- .../pages/components/autocomplete/Filter.js | 2 +- .../pages/components/autocomplete/Filter.tsx | 2 +- .../components/autocomplete/FixedTags.js | 2 +- .../components/autocomplete/FixedTags.tsx | 2 +- .../pages/components/autocomplete/FreeSolo.js | 2 +- .../components/autocomplete/FreeSolo.tsx | 2 +- .../autocomplete/FreeSoloCreateOption.js | 2 +- .../autocomplete/FreeSoloCreateOption.tsx | 2 +- .../FreeSoloCreateOptionDialog.js | 2 +- .../FreeSoloCreateOptionDialog.tsx | 2 +- .../components/autocomplete/GitHubLabel.js | 2 +- .../components/autocomplete/GitHubLabel.tsx | 2 +- .../pages/components/autocomplete/Grouped.js | 2 +- .../pages/components/autocomplete/Grouped.tsx | 2 +- .../components/autocomplete/Highlights.js | 2 +- .../components/autocomplete/Highlights.tsx | 2 +- .../components/autocomplete/LimitTags.js | 2 +- .../components/autocomplete/LimitTags.tsx | 2 +- .../components/autocomplete/Playground.js | 2 +- .../components/autocomplete/Playground.tsx | 2 +- .../pages/components/autocomplete/Sizes.js | 2 +- .../pages/components/autocomplete/Sizes.tsx | 2 +- .../src/pages/components/autocomplete/Tags.js | 2 +- .../pages/components/autocomplete/Tags.tsx | 2 +- .../autocomplete/UseAutocomplete.js | 2 +- .../autocomplete/UseAutocomplete.tsx | 2 +- .../components/use-media-query/UseWidth.js | 1 - .../components/use-media-query/UseWidth.tsx | 1 - .../pages/customization/color/ColorTool.js | 2 +- .../customization/components/ClassNames.tsx | 10 +- .../customization/components/DynamicCSS.tsx | 8 +- .../components/DynamicCSSVariables.js | 2 +- .../components/DynamicCSSVariables.tsx | 2 +- .../components/DynamicClassName.js | 2 +- .../components/DynamicClassName.tsx | 2 +- .../components/DynamicInlineStyle.js | 2 +- .../components/DynamicInlineStyle.tsx | 2 +- .../components/DynamicThemeNesting.js | 2 +- .../components/DynamicThemeNesting.tsx | 2 +- .../pages/guides/composition/ListRouter.tsx | 4 +- .../premium-themes/paperbase/Paperbase.js | 3 +- .../premium-themes/paperbase/Paperbase.tsx | 3 +- docs/src/pages/styles/advanced/Theming.js | 8 +- docs/src/pages/styles/advanced/Theming.tsx | 8 +- docs/webpackBaseConfig.js | 2 +- .../src/App.tsx | 3 +- .../src/theme.tsx | 2 +- .../nextjs-with-typescript/src/Copyright.tsx | 3 +- examples/nextjs-with-typescript/src/theme.tsx | 2 +- examples/nextjs/src/Copyright.js | 3 +- package.json | 38 ++++---- .../src/Autocomplete/Autocomplete.d.ts | 1 + .../src/Autocomplete/Autocomplete.spec.tsx | 1 + .../src/ToggleButton/ToggleButton.d.ts | 6 +- .../ToggleButtonGroup/ToggleButtonGroup.js | 2 +- .../src/StylesProvider/StylesProvider.js | 2 +- .../src/makeStyles/makeStyles.d.ts | 7 +- .../src/styled/styled.spec.tsx | 1 + .../src/styled/styled.test.js | 2 +- .../src/useTheme/useTheme.js | 1 - .../material-ui-styles/test/styles.spec.tsx | 16 ++-- .../material-ui-system/src/index.spec.tsx | 10 +- .../material-ui-utils/src/deepmerge.test.js | 2 +- .../AccordionSummary/AccordionSummary.test.js | 2 +- .../BottomNavigationAction.test.js | 2 +- .../Breadcrumbs/BreadcrumbCollapsed.test.js | 2 +- .../src/Breadcrumbs/Breadcrumbs.test.js | 3 +- packages/material-ui/src/Button/Button.d.ts | 1 - .../material-ui/src/Button/Button.spec.tsx | 5 +- .../material-ui/src/Button/Button.test.js | 2 +- .../material-ui/src/ButtonBase/ButtonBase.js | 1 - .../src/ButtonBase/ButtonBase.test.js | 4 +- .../src/ButtonGroup/ButtonGroup.d.ts | 1 - .../src/ButtonGroup/ButtonGroup.js | 2 +- packages/material-ui/src/Card/Card.d.ts | 1 - .../material-ui/src/CardMedia/CardMedia.js | 2 +- .../src/CardMedia/CardMedia.test.js | 2 +- .../material-ui/src/Checkbox/Checkbox.test.js | 2 +- packages/material-ui/src/Chip/Chip.test.js | 3 +- .../ClickAwayListener/ClickAwayListener.js | 2 +- .../material-ui/src/Collapse/Collapse.d.ts | 1 - .../material-ui/src/Collapse/Collapse.test.js | 4 +- .../src/CssBaseline/CssBaseline.js | 5 +- .../material-ui/src/Dialog/Dialog.test.js | 2 +- packages/material-ui/src/Drawer/Drawer.d.ts | 1 - .../material-ui/src/Drawer/Drawer.test.js | 2 +- packages/material-ui/src/Fade/Fade.test.js | 2 +- .../src/FilledInput/FilledInput.test.js | 2 +- .../src/FormControl/FormControl.test.js | 2 +- .../src/FormControl/useFormControl.d.ts | 1 - .../FormControlLabel/FormControlLabel.test.js | 2 +- .../src/FormHelperText/FormHelperText.test.js | 2 +- .../src/FormLabel/FormLabel.test.js | 2 +- .../src/GridListTile/GridListTile.js | 4 +- packages/material-ui/src/Grow/Grow.d.ts | 1 - packages/material-ui/src/Grow/Grow.test.js | 2 +- .../src/IconButton/IconButton.test.js | 2 +- packages/material-ui/src/Input/Input.d.ts | 1 - .../src/InputAdornment/InputAdornment.test.js | 2 +- .../src/InputBase/InputBase.test.js | 2 +- .../src/InputLabel/InputLabel.test.js | 2 +- packages/material-ui/src/Link/Link.d.ts | 2 +- packages/material-ui/src/Link/Link.js | 2 +- packages/material-ui/src/ListItem/ListItem.js | 2 +- .../material-ui/src/ListItem/ListItem.test.js | 2 +- .../src/ListSubheader/ListSubheader.d.ts | 1 - packages/material-ui/src/Menu/Menu.d.ts | 1 - packages/material-ui/src/Menu/Menu.js | 2 +- .../material-ui/src/MenuItem/MenuItem.d.ts | 2 +- packages/material-ui/src/Modal/Modal.d.ts | 2 +- .../src/RadioGroup/useRadioGroup.d.ts | 1 - packages/material-ui/src/Slide/Slide.d.ts | 1 - packages/material-ui/src/Step/Step.d.ts | 1 - .../src/StepButton/StepButton.d.ts | 1 - .../src/StepContent/StepContent.d.ts | 1 - .../src/TablePagination/TablePagination.d.ts | 2 +- .../src/TableSortLabel/TableSortLabel.d.ts | 1 - .../src/Typography/Typography.d.ts | 4 +- .../Unstable_TrapFocus.d.ts | 1 + packages/material-ui/src/Zoom/Zoom.d.ts | 1 - packages/material-ui/src/index.d.ts | 2 + .../src/styles/createTypography.d.ts | 2 +- packages/material-ui/src/styles/index.js | 1 - .../material-ui/src/styles/makeStyles.d.ts | 3 +- .../src/styles/responsiveFontSizes.test.js | 2 +- packages/material-ui/src/styles/styled.d.ts | 2 +- .../material-ui/src/styles/withStyles.d.ts | 2 +- .../material-ui/src/styles/withTheme.d.ts | 2 +- .../material-ui/src/utils/isMuiElement.d.ts | 2 +- .../withMobileDialog/withMobileDialog.d.ts | 2 +- .../material-ui/src/withWidth/withWidth.d.ts | 2 +- .../test/typescript/components.spec.tsx | 38 ++++---- .../test/typescript/styles.spec.tsx | 40 ++++---- scripts/generateProptypes.ts | 2 + scripts/listChangedFiles.test.js | 2 +- 152 files changed, 278 insertions(+), 286 deletions(-) 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 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/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 bbfe7972861b2b..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 --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 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.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 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..d804528041cfa0 100644 --- a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js +++ b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js @@ -2,9 +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 { createClientRender, screen } from 'test/utils/createClientRender'; +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..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); From 8550e4d6b77c32d9bba0a2975bab917912261b4a Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 12 Jul 2020 12:22:15 +0200 Subject: [PATCH 03/16] third iteration --- .eslintrc.js | 73 +++----- docs/src/modules/components/AdDisplay.js | 4 +- .../modules/components/DemoErrorBoundary.js | 2 +- docs/src/modules/components/MarkdownDocs.js | 4 +- docs/src/modules/components/TopLayoutBlog.js | 1 + .../pages/components/tables/EnhancedTable.js | 30 ++-- .../pages/components/tables/EnhancedTable.tsx | 34 ++-- .../components/use-media-query/UseWidth.js | 1 + .../components/use-media-query/UseWidth.tsx | 3 +- .../customization/breakpoints/WithWidth.tsx | 2 +- .../onepirate/ForgotPassword.js | 1 + .../pages/premium-themes/onepirate/Home.js | 1 + .../pages/premium-themes/onepirate/Privacy.js | 1 + .../pages/premium-themes/onepirate/SignIn.js | 1 + .../pages/premium-themes/onepirate/SignUp.js | 1 + .../pages/premium-themes/onepirate/Terms.js | 1 + .../src/rules/no-hardcoded-labels.js | 10 +- .../src/util/getJSExports.js | 2 +- .../src/v4.0.0/optimal-imports.js | 2 +- packages/material-ui-icons/.eslintrc.js | 7 - packages/material-ui-lab/src/Alert/Alert.js | 4 +- .../material-ui-lab/src/Alert/Alert.test.js | 2 +- .../src/Autocomplete/Autocomplete.js | 4 +- .../src/Autocomplete/Autocomplete.test.js | 4 +- .../src/AvatarGroup/AvatarGroup.test.js | 2 +- .../src/LoadingButton/LoadingButton.test.js | 2 +- .../src/Pagination/Pagination.test.js | 2 +- .../src/PaginationItem/PaginationItem.js | 2 +- .../SpeedDialAction/SpeedDialAction.test.js | 2 +- .../src/SpeedDialIcon/SpeedDialIcon.test.js | 2 +- packages/material-ui-lab/src/index.js | 1 - .../useAutocomplete/useAutocomplete.spec.ts | 1 + .../src/defaultTheme/defaultTheme.spec.ts | 1 + packages/material-ui-styles/src/index.js | 1 - .../src/makeStyles/makeStyles.spec.tsx | 1 + .../src/makeStyles/makeStyles.test.js | 4 +- .../src/useTheme/useTheme.js | 1 + .../material-ui-styles/test/styles.spec.tsx | 3 +- .../material-ui/src/ButtonBase/ButtonBase.js | 1 + .../src/FormControl/FormControl.js | 4 +- .../src/OutlinedInput/OutlinedInput.test.js | 2 +- packages/material-ui/src/Popover/Popover.js | 2 +- .../src/RadioGroup/RadioGroup.test.js | 2 +- .../material-ui/src/Select/Select.test.js | 2 +- .../material-ui/src/Select/SelectInput.js | 2 +- packages/material-ui/src/Slide/Slide.js | 2 +- packages/material-ui/src/Slide/Slide.test.js | 2 +- packages/material-ui/src/Step/Step.test.js | 2 +- .../src/StepButton/StepButton.test.js | 4 +- .../material-ui/src/Stepper/Stepper.test.js | 2 +- .../material-ui/src/Switch/Switch.test.js | 2 +- packages/material-ui/src/Tab/Tab.test.js | 2 +- packages/material-ui/src/Table/Table.test.js | 2 +- .../src/TableBody/TableBody.test.js | 2 +- .../src/TableFooter/TableFooter.test.js | 2 +- .../src/TableHead/TableHead.test.js | 2 +- .../material-ui/src/TableRow/TableRow.test.js | 2 +- .../src/TableSortLabel/TableSortLabel.test.js | 2 +- .../src/Tabs/ScrollbarSize.test.js | 2 +- packages/material-ui/src/Tabs/Tabs.js | 2 + .../src/TextField/TextField.test.js | 2 +- .../material-ui/src/Toolbar/Toolbar.test.js | 2 +- .../material-ui/src/Tooltip/Tooltip.test.js | 2 +- .../Unstable_TrapFocus/Unstable_TrapFocus.js | 4 +- .../Unstable_TrapFocus.test.js | 2 +- packages/material-ui/src/Zoom/Zoom.test.js | 2 +- packages/material-ui/src/index.js | 2 - .../src/internal/SwitchBase.test.js | 2 +- .../src/styles/colorManipulator.js | 163 +++++++++--------- .../material-ui/src/styles/transitions.js | 2 + .../src/styles/transitions.test.js | 6 +- .../material-ui/src/test-utils/createMount.js | 1 + .../src/test-utils/describeConformance.js | 2 +- packages/material-ui/src/utils/index.js | 1 - .../test/typescript/styles.spec.tsx | 1 + test/utils/components.js | 4 +- test/utils/createMount.js | 1 + test/utils/initMatchers.js | 2 +- 78 files changed, 230 insertions(+), 238 deletions(-) delete mode 100644 packages/material-ui-icons/.eslintrc.js diff --git a/.eslintrc.js b/.eslintrc.js index 872d16f664c2b2..2f343854ba16af 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,4 +1,4 @@ -const confusingBrowserGlobals = require('confusing-browser-globals'); + const path = require('path'); module.exports = { @@ -42,6 +42,7 @@ module.exports = { 'import/no-cycle': 'off', // Too slow 'import/no-extraneous-dependencies': 'off', // Missing yarn workspace support 'jsx-a11y/label-has-associated-control': 'off', // doesn't work? + 'jsx-a11y/no-autofocus': 'off', // We are a library, we need to support it too 'max-classes-per-file': 'off', // just as bad as "max components per file" 'no-alert': 'error', // Too much interruptive 'no-console': ['error', { allow: ['warn', 'error'] }], // Allow warn and error for production events @@ -56,64 +57,29 @@ module.exports = { ], }, ], + 'material-ui/docgen-ignore-before-comment': 'error', + 'no-constant-condition': 'error', + 'no-prototype-builtins': 'off', // Use the proptype inheritance chain + 'no-underscore-dangle': 'error', + 'nonblock-statement-body-position': 'error', + 'prefer-arrow-callback': ['error', { allowNamedFunctions: true }], 'prefer-destructuring': 'off', // Destructuring harm grep potential. + 'react-hooks/exhaustive-deps': ['error', { additionalHooks: 'useEnhancedEffect' }], + 'react-hooks/rules-of-hooks': 'error', 'react/destructuring-assignment': 'off', // It's fine. + 'react/forbid-prop-types': 'off', // Too strict, no time for that 'react/jsx-curly-brace-presence': 'off', // broken 'react/jsx-filename-extension': ['error', { extensions: ['.js', '.tsx'] }], // airbnb is using .jsx 'react/jsx-fragments': ['error', 'element'], // Prefer over <>. 'react/jsx-props-no-spreading': 'off', // We are a UI library. 'react/no-array-index-key': 'off', // This rule is great for raising people awareness of what a key is and how it works. + 'react/no-danger': 'error', + 'react/no-direct-mutation-state': 'error', + 'react/no-find-dom-node': 'off', // Required for backward compatibility. TODO v5, drop 'react/require-default-props': 'off', // Not always relevant + 'react/sort-prop-types': 'error', + 'react/state-in-constructor': 'off', // Too strict, no time for that 'react/static-property-placement': 'off', // No needed - 'react/forbid-prop-types': 'off', // Too strict, no time for that - 'react/no-find-dom-node': 'off', // Required for backward compatibility. TODO v5, drop - - // 'linebreak-style': 'off', // Doesn't play nicely with Windows - // 'no-constant-condition': 'error', - // // Airbnb use error - // 'no-prototype-builtins': 'off', - // 'nonblock-statement-body-position': 'error', - // // Airbnb restricts isNaN and isFinite which are necessary for IE 11 - // // we have to be disciplined about the usage and ensure the Number type for its - // // arguments - // 'no-restricted-globals': ['error'].concat(confusingBrowserGlobals), - // 'no-underscore-dangle': 'error', - // 'prefer-arrow-callback': ['error', { allowNamedFunctions: true }], - // 'prefer-destructuring': 'off', // Destructuring harm grep potential. - - // 'jsx-a11y/label-has-for': 'off', // deprecated - // 'jsx-a11y/no-autofocus': 'off', // We are a library, people do what they want. - - // 'material-ui/docgen-ignore-before-comment': 'error', - - // // It's buggy - // 'react/jsx-handler-names': [ - // 'error', - // { - // // airbnb is disabling this rule - // eventHandlerPrefix: 'handle', - // eventHandlerPropPrefix: 'on', - // }, - // ], - // // not a good rule for components close to the DOM - // 'react/no-danger': 'error', - // // Strict, airbnb is using off - // 'react/no-direct-mutation-state': 'error', - // 'react/no-multi-comp': 'off', - // 'react/sort-prop-types': 'error', - // // This depends entirely on what you're doing. There's no universal pattern - // // stylistic opinion. For conditional assignment we want it outside, otherwise as static - // 'import/namespace': ['error', { allowComputed: true }], - // 'import/order': [ - // 'error', - // { - // groups: [['index', 'sibling', 'parent', 'internal', 'external', 'builtin']], - // 'newlines-between': 'never', - // }, - // ], - - // 'react-hooks/rules-of-hooks': 'error', - 'react-hooks/exhaustive-deps': ['error', { additionalHooks: 'useEnhancedEffect' }], }, overrides: [ { @@ -226,5 +192,12 @@ module.exports = { 'react/static-property-placement': 'off', }, }, + { + files: ['packages/material-ui-icons/custom/**/*.js'], + rules: { + 'import/no-unresolved': 'off', + 'import/extensions': 'off', + }, + }, ], }; diff --git a/docs/src/modules/components/AdDisplay.js b/docs/src/modules/components/AdDisplay.js index 210f532c92b68d..9412379b44abdc 100644 --- a/docs/src/modules/components/AdDisplay.js +++ b/docs/src/modules/components/AdDisplay.js @@ -34,7 +34,7 @@ export default function AdDisplay(props) { classes = autoShapeStyles(); } - /* eslint-disable material-ui/no-hardcoded-labels, react/no-danger */ + /* eslint-disable react/no-danger */ return ( @@ -49,7 +49,7 @@ export default function AdDisplay(props) { ad by {ad.poweredby} ); - /* eslint-enable material-ui/no-hardcoded-labels, react/no-danger */ + /* eslint-enable react/no-danger */ } AdDisplay.propTypes = { diff --git a/docs/src/modules/components/DemoErrorBoundary.js b/docs/src/modules/components/DemoErrorBoundary.js index b37da64680bc4e..e4400d4249ce9f 100644 --- a/docs/src/modules/components/DemoErrorBoundary.js +++ b/docs/src/modules/components/DemoErrorBoundary.js @@ -22,7 +22,7 @@ export default class DemoErrorBoundary extends React.Component { return (
- This demo had a runtime error! + {'This demo had a runtime error!'} We would appreciate it if you report this error directly to our{' '} diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js index 921e35d67c5217..b5b8947dc0f40e 100644 --- a/docs/src/modules/components/MarkdownDocs.js +++ b/docs/src/modules/components/MarkdownDocs.js @@ -156,7 +156,9 @@ function MarkdownDocs(props) { return (
{/* eslint-disable-next-line material-ui/no-hardcoded-labels */} - {warnIcon} Missing demo `{name}` {warnIcon} + {warnIcon} + {' Missing demo '} + {name} {warnIcon}
); } diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js index 4f696c37860dee..76c02e6a8f80a4 100644 --- a/docs/src/modules/components/TopLayoutBlog.js +++ b/docs/src/modules/components/TopLayoutBlog.js @@ -1,3 +1,4 @@ +/* eslint-disable material-ui/no-hardcoded-labels */ import React from 'react'; import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; 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/components/use-media-query/UseWidth.js b/docs/src/pages/components/use-media-query/UseWidth.js index d5a06d02db07b2..393c83a27f882c 100644 --- a/docs/src/pages/components/use-media-query/UseWidth.js +++ b/docs/src/pages/components/use-media-query/UseWidth.js @@ -16,6 +16,7 @@ function useWidth() { const keys = [...theme.breakpoints.keys].reverse(); return ( keys.reduce((output, key) => { + // eslint-disable-next-line react-hooks/rules-of-hooks const matches = useMediaQuery(theme.breakpoints.up(key)); return !output && matches ? key : output; }, null) || 'xs' diff --git a/docs/src/pages/components/use-media-query/UseWidth.tsx b/docs/src/pages/components/use-media-query/UseWidth.tsx index 740046f01224f1..f1669086d2e48c 100644 --- a/docs/src/pages/components/use-media-query/UseWidth.tsx +++ b/docs/src/pages/components/use-media-query/UseWidth.tsx @@ -6,8 +6,8 @@ import { createMuiTheme, } from '@material-ui/core/styles'; import useMediaQuery from '@material-ui/core/useMediaQuery'; -import { Breakpoint } from '@material-ui/core/styles/createBreakpoints'; +type Breakpoint = number | 'xs' | 'sm' | 'md' | 'lg' | 'xl'; type BreakpointOrNull = Breakpoint | null; /** @@ -20,6 +20,7 @@ function useWidth() { const keys: Breakpoint[] = [...theme.breakpoints.keys].reverse(); return ( keys.reduce((output: BreakpointOrNull, key: Breakpoint) => { + // eslint-disable-next-line react-hooks/rules-of-hooks const matches = useMediaQuery(theme.breakpoints.up(key)); return !output && matches ? key : output; }, null) || 'xs' diff --git a/docs/src/pages/customization/breakpoints/WithWidth.tsx b/docs/src/pages/customization/breakpoints/WithWidth.tsx index 2ced8e29f40704..0e3906ba0bf3b0 100644 --- a/docs/src/pages/customization/breakpoints/WithWidth.tsx +++ b/docs/src/pages/customization/breakpoints/WithWidth.tsx @@ -1,8 +1,8 @@ import React from 'react'; import withWidth from '@material-ui/core/withWidth'; import Typography from '@material-ui/core/Typography'; -import { Breakpoint } from '@material-ui/core/styles/createBreakpoints'; +type Breakpoint = number | 'xs' | 'sm' | 'md' | 'lg' | 'xl'; type TagName = 'em' | 'u' | 'del'; const components: Partial> = { 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/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..2ba91ccb627bd6 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 @@ -15,13 +15,19 @@ module.exports = { Literal(node) { const canLabelComponent = node.parent.type === 'JSXElement' || + node.parent.type === 'JSXExpressionContainer' || (node.parent.type === 'JSXAttribute' && ['aria-label'].includes(node.parent.name.name)); const sanitizedValue = typeof node.value === 'string' ? node.value.trim() : node.value; const hasTranslateableContent = sanitizedValue !== '' && !emojiRegex.test(sanitizedValue); - if (canLabelComponent && hasTranslateableContent && !allow.includes(sanitizedValue)) { - context.report({ messageId: 'literal-label', node }); + if ( + canLabelComponent && + hasTranslateableContent && + !allow.includes(sanitizedValue) && + typeof sanitizedValue === 'string' + ) { + context.report({ messageId: 'literal-label', node: node.parent }); } }, }; 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-icons/.eslintrc.js b/packages/material-ui-icons/.eslintrc.js deleted file mode 100644 index de819a4b0f5f80..00000000000000 --- a/packages/material-ui-icons/.eslintrc.js +++ /dev/null @@ -1,7 +0,0 @@ -module.exports = { - rules: { - // needed for mustache and temp - 'import/no-unresolved': 'off', - 'import/extensions': 'off', - }, -}; 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.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.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/index.js b/packages/material-ui-lab/src/index.js index 3038c1de672a3e..87f12c79232a32 100644 --- a/packages/material-ui-lab/src/index.js +++ b/packages/material-ui-lab/src/index.js @@ -1,4 +1,3 @@ -/* eslint-disable import/export */ export { default as Alert } from './Alert'; export * from './Alert'; diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.spec.ts b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.spec.ts index 3608b57dea60c2..b731bc3dfcb518 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.spec.ts +++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.spec.ts @@ -1,3 +1,4 @@ +/* eslint-disable react-hooks/rules-of-hooks */ import { useAutocomplete, FilterOptionsState } from '@material-ui/lab'; import { expectType } from '@material-ui/types'; diff --git a/packages/material-ui-styles/src/defaultTheme/defaultTheme.spec.ts b/packages/material-ui-styles/src/defaultTheme/defaultTheme.spec.ts index adcb41a92d255c..7e0f50e026103e 100644 --- a/packages/material-ui-styles/src/defaultTheme/defaultTheme.spec.ts +++ b/packages/material-ui-styles/src/defaultTheme/defaultTheme.spec.ts @@ -9,6 +9,7 @@ declare module '@material-ui/styles' { } { + // eslint-disable-next-line react-hooks/rules-of-hooks const value = useTheme().myProperty; expectType(value); } diff --git a/packages/material-ui-styles/src/index.js b/packages/material-ui-styles/src/index.js index 55490730c6e870..c748a18b657d28 100644 --- a/packages/material-ui-styles/src/index.js +++ b/packages/material-ui-styles/src/index.js @@ -1,4 +1,3 @@ -/* eslint-disable import/export */ import { ponyfillGlobal } from '@material-ui/utils'; /* Warning if there are several instances of @material-ui/styles */ diff --git a/packages/material-ui-styles/src/makeStyles/makeStyles.spec.tsx b/packages/material-ui-styles/src/makeStyles/makeStyles.spec.tsx index 3e254c40713795..f31fd1a6ad0746 100644 --- a/packages/material-ui-styles/src/makeStyles/makeStyles.spec.tsx +++ b/packages/material-ui-styles/src/makeStyles/makeStyles.spec.tsx @@ -129,6 +129,7 @@ import { createStyles, makeStyles } from '@material-ui/styles'; }, })); + // eslint-disable-next-line react-hooks/rules-of-hooks const classes = useStyles(); // This doesn't fail, because inferrence is broken diff --git a/packages/material-ui-styles/src/makeStyles/makeStyles.test.js b/packages/material-ui-styles/src/makeStyles/makeStyles.test.js index cce608f6bd4c1f..0cad92100f8219 100644 --- a/packages/material-ui-styles/src/makeStyles/makeStyles.test.js +++ b/packages/material-ui-styles/src/makeStyles/makeStyles.test.js @@ -389,13 +389,13 @@ describe('makeStyles', () => { const StyledComponent = () => { // Simulate react-hot-loader behavior - /* eslint-disable react-hooks/rules-of-hooks */ if (hmr) { + // eslint-disable-next-line react-hooks/rules-of-hooks useStyles2(); } else { + // eslint-disable-next-line react-hooks/rules-of-hooks useStyles1(); } - /* eslint-enable react-hooks/rules-of-hooks */ return
; }; diff --git a/packages/material-ui-styles/src/useTheme/useTheme.js b/packages/material-ui-styles/src/useTheme/useTheme.js index 0f966fc439ad75..6f7c8fa0bfde32 100644 --- a/packages/material-ui-styles/src/useTheme/useTheme.js +++ b/packages/material-ui-styles/src/useTheme/useTheme.js @@ -5,6 +5,7 @@ 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 f6b411c143a52e..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' }, }); @@ -452,6 +452,7 @@ function forwardRefTest() { }), })); + // eslint-disable-next-line react-hooks/rules-of-hooks const styles = useStyles({ foo: true }); expectType, typeof styles>(styles); } diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.js b/packages/material-ui/src/ButtonBase/ButtonBase.js index a9f723fa91d793..52f43ad2ab9c77 100644 --- a/packages/material-ui/src/ButtonBase/ButtonBase.js +++ b/packages/material-ui/src/ButtonBase/ButtonBase.js @@ -289,6 +289,7 @@ const ButtonBase = React.forwardRef(function ButtonBase(props, ref) { const enableTouchRipple = mountedState && !disableRipple && !disabled; if (process.env.NODE_ENV !== 'production') { + // eslint-disable-next-line react-hooks/rules-of-hooks React.useEffect(() => { if (enableTouchRipple && !rippleRef.current) { console.error( diff --git a/packages/material-ui/src/FormControl/FormControl.js b/packages/material-ui/src/FormControl/FormControl.js index c327fe1b771ecf..638473c130ca92 100644 --- a/packages/material-ui/src/FormControl/FormControl.js +++ b/packages/material-ui/src/FormControl/FormControl.js @@ -119,8 +119,8 @@ const FormControl = React.forwardRef(function FormControl(props, ref) { return initialFilled; }); - const [_focused, setFocused] = React.useState(false); - const focused = visuallyFocused !== undefined ? visuallyFocused : _focused; + const [focusedState, setFocused] = React.useState(false); + const focused = visuallyFocused !== undefined ? visuallyFocused : focusedState; if (disabled && focused) { setFocused(false); diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.test.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.test.js index dae353bff0cdc8..f85fb34d38916f 100644 --- a/packages/material-ui/src/OutlinedInput/OutlinedInput.test.js +++ b/packages/material-ui/src/OutlinedInput/OutlinedInput.test.js @@ -2,8 +2,8 @@ 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 { createClientRender } from 'test/utils/createClientRender'; +import describeConformance from '../test-utils/describeConformance'; import OutlinedInput from './OutlinedInput'; import InputBase from '../InputBase'; diff --git a/packages/material-ui/src/Popover/Popover.js b/packages/material-ui/src/Popover/Popover.js index d123bd4f501506..115e67444d27f2 100644 --- a/packages/material-ui/src/Popover/Popover.js +++ b/packages/material-ui/src/Popover/Popover.js @@ -7,8 +7,8 @@ import { refType, HTMLElementType, } from '@material-ui/utils'; -import debounce from '../utils/debounce'; import clsx from 'clsx'; +import debounce from '../utils/debounce'; import ownerDocument from '../utils/ownerDocument'; import ownerWindow from '../utils/ownerWindow'; import createChainedFunction from '../utils/createChainedFunction'; diff --git a/packages/material-ui/src/RadioGroup/RadioGroup.test.js b/packages/material-ui/src/RadioGroup/RadioGroup.test.js index 28f34d56fc2db2..6d2785aa0c0e22 100644 --- a/packages/material-ui/src/RadioGroup/RadioGroup.test.js +++ b/packages/material-ui/src/RadioGroup/RadioGroup.test.js @@ -4,8 +4,8 @@ import { spy } from 'sinon'; import * as PropTypes from 'prop-types'; import { findOutermostIntrinsic } from '@material-ui/core/test-utils'; import createMount from 'test/utils/createMount'; -import describeConformance from '../test-utils/describeConformance'; import { act, createClientRender } from 'test/utils/createClientRender'; +import describeConformance from '../test-utils/describeConformance'; import FormGroup from '../FormGroup'; import Radio from '../Radio'; import RadioGroup from './RadioGroup'; diff --git a/packages/material-ui/src/Select/Select.test.js b/packages/material-ui/src/Select/Select.test.js index 669dd7da941b7b..12b558c4352cb8 100644 --- a/packages/material-ui/src/Select/Select.test.js +++ b/packages/material-ui/src/Select/Select.test.js @@ -1,5 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; +import { spy, stub, useFakeTimers } from 'sinon'; import { getClasses } from '@material-ui/core/test-utils'; import createMount from 'test/utils/createMount'; import describeConformance from '@material-ui/core/test-utils/describeConformance'; @@ -9,7 +10,6 @@ import MenuItem from '../MenuItem'; import Input from '../Input'; import InputLabel from '../InputLabel'; import Select from './Select'; -import { spy, stub, useFakeTimers } from 'sinon'; describe('