From 5f39f8b19c156c39193dafb1b4daa464ad607cb9 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 12 Jul 2020 01:01:48 +0200 Subject: [PATCH] second iteration --- .eslintignore | 3 + .eslintrc.js | 90 ++++++++++++------- .../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 - .../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 +- .../src/makeStyles/makeStyles.d.ts | 7 +- .../src/styled/styled.spec.tsx | 1 + .../material-ui-styles/test/styles.spec.tsx | 16 ++-- .../material-ui-system/src/index.spec.tsx | 18 ++-- packages/material-ui/src/Button/Button.d.ts | 1 - .../material-ui/src/Button/Button.spec.tsx | 5 +- .../src/ButtonGroup/ButtonGroup.d.ts | 1 - packages/material-ui/src/Card/Card.d.ts | 1 - .../material-ui/src/Collapse/Collapse.d.ts | 1 - packages/material-ui/src/Drawer/Drawer.d.ts | 1 - .../src/FormControl/useFormControl.d.ts | 1 - packages/material-ui/src/Grow/Grow.d.ts | 1 - packages/material-ui/src/Input/Input.d.ts | 1 - packages/material-ui/src/Link/Link.d.ts | 2 +- .../src/ListSubheader/ListSubheader.d.ts | 1 - packages/material-ui/src/Menu/Menu.d.ts | 1 - .../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 +- .../material-ui/src/styles/makeStyles.d.ts | 3 +- 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 + 105 files changed, 231 insertions(+), 235 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..2342d47b33bf1d 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,43 @@ module.exports = { }, // Sorted alphanumerically rules: { + '@typescript-eslint/dot-notation': 'off', // Too slow + '@typescript-eslint/no-implied-eval': 'off', // Too slow + '@typescript-eslint/no-throw-literal': 'off', // Too slow + 'consistent-this': ['error', 'self'], + 'import/export': 'off', // Not sure why it doesn't work + 'import/named': 'off', // Not sure why it doesn't work + 'import/no-cycle': 'off', // Too slow 'import/no-extraneous-dependencies': 'off', // Missing yarn workspace support - 'no-console': ['error', { allow: ['warn', 'error'] }], // More strict than airbnb. Allow warn and error for production events - 'no-param-reassign': 'off', // Less strict than airbnb. It's fine. - 'react/destructuring-assignment': 'off', // Less strict than airbnb. It's fine. + 'jsx-a11y/label-has-associated-control': 'off', // doesn't work? + 'max-classes-per-file': 'off', // just as bad as "max components per file" + 'no-alert': 'error', // Too much interruptive + 'no-console': ['error', { allow: ['warn', 'error'] }], // Allow warn and error for production events + 'no-param-reassign': 'off', // It's fine. + 'no-restricted-imports': [ + 'error', + { + patterns: [ + '@material-ui/*/*/*', + '!@material-ui/core/test-utils/*', + '!@material-ui/utils/macros/*.macro', + ], + }, + ], + 'prefer-destructuring': 'off', // Destructuring harm grep potential. + 'react/destructuring-assignment': 'off', // It's fine. + 'react/jsx-curly-brace-presence': 'off', // broken + 'react/jsx-filename-extension': ['error', { extensions: ['.js', '.tsx'] }], // airbnb is using .jsx 'react/jsx-fragments': ['error', 'element'], // Prefer over <>. - 'react/jsx-props-no-spreading': 'off', // Less strict than airbnb. We are a UI library. + 'react/jsx-props-no-spreading': 'off', // We are a UI library. + 'react/no-array-index-key': 'off', // This rule is great for raising people awareness of what a key is and how it works. + 'react/require-default-props': 'off', // Not always relevant + 'react/static-property-placement': 'off', // No needed - // 'consistent-this': ['error', 'self'], // 'linebreak-style': 'off', // Doesn't play nicely with Windows - // // just as bad as "max components per file" - // 'max-classes-per-file': 'off', - // 'no-alert': 'error', // 'no-constant-condition': 'error', // // Airbnb use error // 'no-prototype-builtins': 'off', - // 'no-restricted-imports': [ - // 'error', - // { - // patterns: [ - // '@material-ui/*/*/*', - // '!@material-ui/core/test-utils/*', - // '!@material-ui/utils/macros/*.macro', - // ], - // }, - // ], // 'nonblock-statement-body-position': 'error', // // Airbnb restricts isNaN and isFinite which are necessary for IE 11 // // we have to be disciplined about the usage and ensure the Number type for its @@ -60,18 +79,13 @@ module.exports = { // 'prefer-arrow-callback': ['error', { allowNamedFunctions: true }], // 'prefer-destructuring': 'off', // Destructuring harm grep potential. - // 'jsx-a11y/label-has-associated-control': 'off', // 'jsx-a11y/label-has-for': 'off', // deprecated // 'jsx-a11y/no-autofocus': 'off', // We are a library, people do what they want. // 'material-ui/docgen-ignore-before-comment': 'error', - // // This rule is great for raising people awareness of what a key is and how it works. - // 'react/no-array-index-key': 'off', // // It's buggy // 'react/forbid-prop-types': 'off', - // 'react/jsx-curly-brace-presence': 'off', - // 'react/jsx-filename-extension': ['error', { extensions: ['.js'] }], // airbnb is using .jsx // 'react/jsx-handler-names': [ // 'error', // { @@ -86,12 +100,9 @@ module.exports = { // 'react/no-direct-mutation-state': 'error', // 'react/no-find-dom-node': 'off', // 'react/no-multi-comp': 'off', - // 'react/require-default-props': 'off', // 'react/sort-prop-types': 'error', // // This depends entirely on what you're doing. There's no universal pattern - // 'react/state-in-constructor': 'off', // // stylistic opinion. For conditional assignment we want it outside, otherwise as static - // 'react/static-property-placement': 'off', // 'import/namespace': ['error', { allowComputed: true }], // 'import/order': [ // 'error', @@ -186,14 +197,33 @@ module.exports = { }, }, { - files: ['*.spec.tsx'], + files: ['*.tsx'], + rules: { + 'react/prop-types': 'off', + }, + }, + { + files: ['*.spec.tsx', '*.spec.ts'], rules: { '@typescript-eslint/no-unused-expressions': 'off', '@typescript-eslint/no-unused-vars': 'off', - 'max-classes-per-file': 'off', + '@typescript-eslint/no-use-before-define': 'off', + 'import/prefer-default-export': 'off', + 'jsx-a11y/anchor-has-content': 'off', + 'jsx-a11y/anchor-is-valid': 'off', + 'no-alert': 'off', + 'no-console': 'off', + 'no-empty-pattern': 'off', 'no-lone-blocks': 'off', + 'no-shadow': 'off', + 'react/default-props-match-prop-types': 'off', + 'react/no-access-state-in-setstate': 'off', + 'react/no-unused-prop-types': 'off', 'react/prefer-stateless-function': 'off', 'react/prop-types': 'off', + 'react/require-default-props': 'off', + 'react/state-in-constructor': 'off', + 'react/static-property-placement': 'off', }, }, ], 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/components/ClassNames.tsx b/docs/src/pages/customization/components/ClassNames.tsx index d356efde74b96f..972139f876647b 100644 --- a/docs/src/pages/customization/components/ClassNames.tsx +++ b/docs/src/pages/customization/components/ClassNames.tsx @@ -3,11 +3,6 @@ import clsx from 'clsx'; import Button from '@material-ui/core/Button'; import { withStyles, WithStyles } from '@material-ui/core/styles'; -interface Props extends WithStyles { - children?: React.ReactNode; - className?: string; -} - // We can inject some CSS into the DOM. const styles = { root: { @@ -21,6 +16,11 @@ const styles = { }, }; +interface Props extends WithStyles { + children?: React.ReactNode; + className?: string; +} + function ClassNames(props: Props) { const { classes, children, className, ...other } = props; diff --git a/docs/src/pages/customization/components/DynamicCSS.tsx b/docs/src/pages/customization/components/DynamicCSS.tsx index 4a3720b5270cae..3ad728f2c09779 100644 --- a/docs/src/pages/customization/components/DynamicCSS.tsx +++ b/docs/src/pages/customization/components/DynamicCSS.tsx @@ -16,10 +16,6 @@ interface ColorsMapping { [key: string]: any; } -interface ButtonStyles extends WithStyles { - color: string; -} - // Like https://github.com/brunobertolini/styled-by const styledBy = (property: string, mapping: ColorsMapping) => ( props: Styles, @@ -43,6 +39,10 @@ const styles = { }, }; +interface ButtonStyles extends WithStyles { + color: string; +} + const StyledButton = withStyles( styles, )(({ classes, color, ...other }: ButtonStyles) => ( diff --git a/docs/src/pages/customization/components/DynamicCSSVariables.js b/docs/src/pages/customization/components/DynamicCSSVariables.js index e15d0b73b7ff54..e9d65d6b1981c6 100644 --- a/docs/src/pages/customization/components/DynamicCSSVariables.js +++ b/docs/src/pages/customization/components/DynamicCSSVariables.js @@ -51,7 +51,7 @@ export default function DynamicCSSVariables() { label="Blue" /> ); diff --git a/docs/src/pages/customization/components/DynamicCSSVariables.tsx b/docs/src/pages/customization/components/DynamicCSSVariables.tsx index d239dd21fb0ec3..537017d0e557b8 100644 --- a/docs/src/pages/customization/components/DynamicCSSVariables.tsx +++ b/docs/src/pages/customization/components/DynamicCSSVariables.tsx @@ -51,7 +51,7 @@ export default function DynamicCSSVariables() { label="Blue" /> ); diff --git a/docs/src/pages/customization/components/DynamicClassName.js b/docs/src/pages/customization/components/DynamicClassName.js index 57c55e5d179edf..54a93a2d6a1389 100644 --- a/docs/src/pages/customization/components/DynamicClassName.js +++ b/docs/src/pages/customization/components/DynamicClassName.js @@ -47,7 +47,7 @@ export default function DynamicClassName() { [classes.buttonBlue]: color === 'blue', })} > - {'Class name branch'} + Class name branch ); diff --git a/docs/src/pages/customization/components/DynamicClassName.tsx b/docs/src/pages/customization/components/DynamicClassName.tsx index f2d3f83f42c512..6fd37835af69d0 100644 --- a/docs/src/pages/customization/components/DynamicClassName.tsx +++ b/docs/src/pages/customization/components/DynamicClassName.tsx @@ -47,7 +47,7 @@ export default function DynamicClassName() { [classes.buttonBlue]: color === 'blue', })} > - {'Class name branch'} + Class name branch ); diff --git a/docs/src/pages/customization/components/DynamicInlineStyle.js b/docs/src/pages/customization/components/DynamicInlineStyle.js index f382e3bf8dcf2b..b8f6214b59ffc0 100644 --- a/docs/src/pages/customization/components/DynamicInlineStyle.js +++ b/docs/src/pages/customization/components/DynamicInlineStyle.js @@ -45,7 +45,7 @@ export default function DynamicInlineStyle() { ...(color === 'blue' ? styles.buttonBlue : {}), }} > - {'dynamic inline-style'} + dynamic inline-style ); diff --git a/docs/src/pages/customization/components/DynamicInlineStyle.tsx b/docs/src/pages/customization/components/DynamicInlineStyle.tsx index 11478d48c4dbad..9584bc297dcb7c 100644 --- a/docs/src/pages/customization/components/DynamicInlineStyle.tsx +++ b/docs/src/pages/customization/components/DynamicInlineStyle.tsx @@ -45,7 +45,7 @@ export default function DynamicInlineStyle() { ...(color === 'blue' ? styles.buttonBlue : {}), }} > - {'dynamic inline-style'} + dynamic inline-style ); diff --git a/docs/src/pages/customization/components/DynamicThemeNesting.js b/docs/src/pages/customization/components/DynamicThemeNesting.js index 2e8b35070ddb71..41c3fc6ebdf872 100644 --- a/docs/src/pages/customization/components/DynamicThemeNesting.js +++ b/docs/src/pages/customization/components/DynamicThemeNesting.js @@ -41,7 +41,7 @@ export default function DynamicThemeNesting() { /> diff --git a/docs/src/pages/customization/components/DynamicThemeNesting.tsx b/docs/src/pages/customization/components/DynamicThemeNesting.tsx index a7de6b26c8820b..1dc7c8a81926c0 100644 --- a/docs/src/pages/customization/components/DynamicThemeNesting.tsx +++ b/docs/src/pages/customization/components/DynamicThemeNesting.tsx @@ -41,7 +41,7 @@ export default function DynamicThemeNesting() { /> theme={theme}> diff --git a/docs/src/pages/guides/composition/ListRouter.tsx b/docs/src/pages/guides/composition/ListRouter.tsx index 8587398dab15d3..0dcf0a488c90a1 100644 --- a/docs/src/pages/guides/composition/ListRouter.tsx +++ b/docs/src/pages/guides/composition/ListRouter.tsx @@ -17,9 +17,9 @@ import { import { Omit } from '@material-ui/types'; interface ListItemLinkProps { - icon?: React.ReactElement; - primary: string; to: string; + primary: string; + icon?: React.ReactElement; } function ListItemLink(props: ListItemLinkProps) { diff --git a/docs/src/pages/premium-themes/paperbase/Paperbase.js b/docs/src/pages/premium-themes/paperbase/Paperbase.js index 2b28c6551419ae..a453d15b91a7d3 100644 --- a/docs/src/pages/premium-themes/paperbase/Paperbase.js +++ b/docs/src/pages/premium-themes/paperbase/Paperbase.js @@ -20,8 +20,7 @@ function Copyright() { Your Website {' '} - {new Date().getFullYear()} - {'.'} + {new Date().getFullYear()}. ); } diff --git a/docs/src/pages/premium-themes/paperbase/Paperbase.tsx b/docs/src/pages/premium-themes/paperbase/Paperbase.tsx index e165251f021189..c4875022b49c6f 100644 --- a/docs/src/pages/premium-themes/paperbase/Paperbase.tsx +++ b/docs/src/pages/premium-themes/paperbase/Paperbase.tsx @@ -21,8 +21,7 @@ function Copyright() { Your Website {' '} - {new Date().getFullYear()} - {'.'} + {new Date().getFullYear()}. ); } diff --git a/docs/src/pages/styles/advanced/Theming.js b/docs/src/pages/styles/advanced/Theming.js index fa10da8dfd0fb7..155773186263dc 100644 --- a/docs/src/pages/styles/advanced/Theming.js +++ b/docs/src/pages/styles/advanced/Theming.js @@ -1,6 +1,10 @@ import React from 'react'; import { ThemeProvider, makeStyles } from '@material-ui/core/styles'; +const themeInstance = { + background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', +}; + const useStyles = makeStyles((theme) => ({ root: { background: theme.background, @@ -24,10 +28,6 @@ function DeepChild() { ); } -const themeInstance = { - background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', -}; - export default function Theming() { return ( diff --git a/docs/src/pages/styles/advanced/Theming.tsx b/docs/src/pages/styles/advanced/Theming.tsx index bc5e7ab1e604a0..3914898745e460 100644 --- a/docs/src/pages/styles/advanced/Theming.tsx +++ b/docs/src/pages/styles/advanced/Theming.tsx @@ -1,6 +1,10 @@ import React from 'react'; import { ThemeProvider, makeStyles } from '@material-ui/core/styles'; +const themeInstance = { + background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', +}; + const useStyles = makeStyles((theme: typeof themeInstance) => ({ root: { background: theme.background, @@ -24,10 +28,6 @@ function DeepChild() { ); } -const themeInstance = { - background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', -}; - export default function Theming() { return ( diff --git a/docs/webpackBaseConfig.js b/docs/webpackBaseConfig.js index 898479a3799091..10d03dea827cba 100644 --- a/docs/webpackBaseConfig.js +++ b/docs/webpackBaseConfig.js @@ -26,7 +26,7 @@ module.exports = { module: { rules: [ { - test: /\.(js|ts)$/, + test: /\.(js|ts|tsx)$/, exclude: /node_modules/, loader: 'babel-loader', query: { diff --git a/examples/create-react-app-with-typescript/src/App.tsx b/examples/create-react-app-with-typescript/src/App.tsx index cbce51d807ae7f..39b764a0e348c0 100644 --- a/examples/create-react-app-with-typescript/src/App.tsx +++ b/examples/create-react-app-with-typescript/src/App.tsx @@ -12,8 +12,7 @@ function Copyright() { Your Website {' '} - {new Date().getFullYear()} - {'.'} + {new Date().getFullYear()}. ); } diff --git a/examples/create-react-app-with-typescript/src/theme.tsx b/examples/create-react-app-with-typescript/src/theme.tsx index f9c08b49759c16..405e84b54e976a 100644 --- a/examples/create-react-app-with-typescript/src/theme.tsx +++ b/examples/create-react-app-with-typescript/src/theme.tsx @@ -1,5 +1,5 @@ -import red from '@material-ui/core/colors/red'; import { createMuiTheme } from '@material-ui/core/styles'; +import { red } from '@material-ui/core/colors'; // A custom theme for this app const theme = createMuiTheme({ diff --git a/examples/nextjs-with-typescript/src/Copyright.tsx b/examples/nextjs-with-typescript/src/Copyright.tsx index 5d4e8f33e91f0b..62cc86fe418ed9 100644 --- a/examples/nextjs-with-typescript/src/Copyright.tsx +++ b/examples/nextjs-with-typescript/src/Copyright.tsx @@ -9,8 +9,7 @@ export default function Copyright() { Your Website {' '} - {new Date().getFullYear()} - {'.'} + {new Date().getFullYear()}. ); } diff --git a/examples/nextjs-with-typescript/src/theme.tsx b/examples/nextjs-with-typescript/src/theme.tsx index f9e8c47d322cfc..21af17c750d59c 100644 --- a/examples/nextjs-with-typescript/src/theme.tsx +++ b/examples/nextjs-with-typescript/src/theme.tsx @@ -1,5 +1,5 @@ import { createMuiTheme } from '@material-ui/core/styles'; -import red from '@material-ui/core/colors/red'; +import { red } from '@material-ui/core/colors'; // Create a theme instance. const theme = createMuiTheme({ diff --git a/examples/nextjs/src/Copyright.js b/examples/nextjs/src/Copyright.js index 5d4e8f33e91f0b..62cc86fe418ed9 100644 --- a/examples/nextjs/src/Copyright.js +++ b/examples/nextjs/src/Copyright.js @@ -9,8 +9,7 @@ export default function Copyright() { Your Website {' '} - {new Date().getFullYear()} - {'.'} + {new Date().getFullYear()}. ); } diff --git a/package.json b/package.json index c896a8535107af..1064aea9b6056c 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": "^6.8.0", + "enzyme": "^3.9.0", "eslint-config-airbnb-typescript": "^8.0.2", "eslint-config-prettier": "^6.2.0", "eslint-import-resolver-webpack": "^0.12.0", @@ -101,21 +102,22 @@ "eslint-plugin-import": "^2.18.2", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-mocha": "^6.1.1", - "eslint-plugin-react": "^7.14.3", "eslint-plugin-react-hooks": "^4.0.5", + "eslint-plugin-react": "^7.14.3", + "eslint": "^6.8.0", "expect-puppeteer": "^4.3.0", "format-util": "^1.0.5", "fs-extra": "^9.0.0", - "glob": "^7.1.2", "glob-gitignore": "^1.0.11", + "glob": "^7.1.2", "jsdom": "^16.0.0", - "karma": "^5.0.1", "karma-browserstack-launcher": "~1.4.0", "karma-chrome-launcher": "^3.0.0", - "karma-mocha": "^2.0.0", "karma-mocha-reporter": "^2.2.5", + "karma-mocha": "^2.0.0", "karma-sourcemap-loader": "^0.3.7", "karma-webpack": "^4.0.2", + "karma": "^5.0.1", "lerna": "^3.16.4", "lodash": "^4.17.15", "mocha": "^8.0.1", @@ -125,18 +127,18 @@ "pretty-format-v24": "npm:pretty-format@24", "prop-types": "^15.7.2", "puppeteer": "^5.0.0", - "react": "^16.13.0", "react-dom": "^16.13.0", "react-test-renderer": "^16.13.0", + "react": "^16.13.0", "remark": "^12.0.0", "rimraf": "^3.0.0", - "rollup": "^2.10.8", "rollup-plugin-babel": "^4.3.3", "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-node-globals": "^1.4.0", "rollup-plugin-node-resolve": "^5.2.0", "rollup-plugin-size-snapshot": "^0.12.0", "rollup-plugin-terser": "^6.1.0", + "rollup": "^2.10.8", "sinon": "^9.0.0", "size-limit": "^0.21.0", "ts-node": "^8.3.0", @@ -145,8 +147,8 @@ "unist-util-visit": "^2.0.2", "url-loader": "^4.1.0", "vrtest-mui": "^0.3.3", - "webpack": "^4.41.0", "webpack-cli": "^3.3.9", + "webpack": "^4.41.0", "yargs": "^15.2.0", "yarn-deduplicate": "^2.0.0" }, @@ -184,9 +186,5 @@ "packages/*", "docs", "framer" - ], - "dependencies": { - "@typescript-eslint/eslint-plugin": "^3.6.0", - "@typescript-eslint/parser": "^3.6.0" - } + ] } diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts index 24ec4447b109d3..3b83e9b2aa3a3e 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts @@ -9,6 +9,7 @@ import { createFilterOptions, UseAutocompleteProps, } from '../useAutocomplete'; + export { AutocompleteChangeDetails, AutocompleteChangeReason, diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.spec.tsx b/packages/material-ui-lab/src/Autocomplete/Autocomplete.spec.tsx index d6610afd7bd3bc..510b4dfdfc72c1 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.spec.tsx +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.spec.tsx @@ -1,3 +1,4 @@ +import * as React from 'react'; import { Autocomplete, AutocompleteProps } from '@material-ui/lab'; import { expectType } from '@material-ui/types'; diff --git a/packages/material-ui-lab/src/ToggleButton/ToggleButton.d.ts b/packages/material-ui-lab/src/ToggleButton/ToggleButton.d.ts index ba3f052a65ba9e..cc68b0a89cfbd2 100644 --- a/packages/material-ui-lab/src/ToggleButton/ToggleButton.d.ts +++ b/packages/material-ui-lab/src/ToggleButton/ToggleButton.d.ts @@ -1,8 +1,4 @@ -import { - ButtonBaseClassKey, - ExtendButtonBase, - ExtendButtonBaseTypeMap, -} from '@material-ui/core/ButtonBase'; +import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '@material-ui/core/ButtonBase'; import { OverrideProps } from '@material-ui/core/OverridableComponent'; export type ToggleButtonTypeMap< diff --git a/packages/material-ui-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/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..a8ab23a5584afa 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'; @@ -53,15 +45,15 @@ function cssRequiredTest() { return {}; } - const style = css(styleRequiredFunction); - style({ + const style2 = css(styleRequiredFunction); + style2({ color: 'red', // @ts-expect-error css: {}, }); // @ts-expect-error - style({ css: { color: 'red' } }); - style({ color: 'blue', css: { color: 'red' } }); + style2({ css: { color: 'red' } }); + style2({ color: 'blue', css: { color: 'red' } }); } /** 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/ButtonGroup/ButtonGroup.d.ts b/packages/material-ui/src/ButtonGroup/ButtonGroup.d.ts index 1d6d4d82391508..e8ea8b541ae70b 100644 --- a/packages/material-ui/src/ButtonGroup/ButtonGroup.d.ts +++ b/packages/material-ui/src/ButtonGroup/ButtonGroup.d.ts @@ -1,5 +1,4 @@ import * as React from 'react'; -import { PropTypes } from '..'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; export interface ButtonGroupTypeMap

{ diff --git a/packages/material-ui/src/Card/Card.d.ts b/packages/material-ui/src/Card/Card.d.ts index 684339eab7cda0..03d0a3d638c4c9 100644 --- a/packages/material-ui/src/Card/Card.d.ts +++ b/packages/material-ui/src/Card/Card.d.ts @@ -1,4 +1,3 @@ -import * as React from 'react'; import { StandardProps } from '..'; import { PaperProps } from '../Paper'; diff --git a/packages/material-ui/src/Collapse/Collapse.d.ts b/packages/material-ui/src/Collapse/Collapse.d.ts index d3f4cccab1cfe3..78cc242030306c 100644 --- a/packages/material-ui/src/Collapse/Collapse.d.ts +++ b/packages/material-ui/src/Collapse/Collapse.d.ts @@ -1,6 +1,5 @@ import * as React from 'react'; import { StandardProps } from '..'; -import { Theme } from '../styles/createMuiTheme'; import { TransitionProps } from '../transitions/transition'; export interface CollapseProps extends StandardProps { diff --git a/packages/material-ui/src/Drawer/Drawer.d.ts b/packages/material-ui/src/Drawer/Drawer.d.ts index e647049b5f42a4..7782dab4a69a25 100644 --- a/packages/material-ui/src/Drawer/Drawer.d.ts +++ b/packages/material-ui/src/Drawer/Drawer.d.ts @@ -3,7 +3,6 @@ import { StandardProps } from '..'; import { ModalProps } from '../Modal'; import { SlideProps } from '../Slide'; import { PaperProps } from '../Paper'; -import { Theme } from '../styles/createMuiTheme'; import { TransitionHandlerProps, TransitionProps } from '../transitions/transition'; export interface DrawerProps diff --git a/packages/material-ui/src/FormControl/useFormControl.d.ts b/packages/material-ui/src/FormControl/useFormControl.d.ts index ab0e95221880f3..17b7806ebd0191 100644 --- a/packages/material-ui/src/FormControl/useFormControl.d.ts +++ b/packages/material-ui/src/FormControl/useFormControl.d.ts @@ -1,4 +1,3 @@ -import { Context } from 'react'; import { FormControlProps } from './FormControl'; // shut off automatic exporting diff --git a/packages/material-ui/src/Grow/Grow.d.ts b/packages/material-ui/src/Grow/Grow.d.ts index 2f18a9fe238fb6..5060672218f34e 100644 --- a/packages/material-ui/src/Grow/Grow.d.ts +++ b/packages/material-ui/src/Grow/Grow.d.ts @@ -1,6 +1,5 @@ import * as React from 'react'; import { Omit } from '@material-ui/types'; -import { Theme } from '../styles/createMuiTheme'; import { TransitionProps } from '../transitions/transition'; export interface GrowProps extends Omit { diff --git a/packages/material-ui/src/Input/Input.d.ts b/packages/material-ui/src/Input/Input.d.ts index ef2269ce42a5ee..21dae1565a3f9d 100644 --- a/packages/material-ui/src/Input/Input.d.ts +++ b/packages/material-ui/src/Input/Input.d.ts @@ -1,4 +1,3 @@ -import * as React from 'react'; import { StandardProps } from '..'; import { InputBaseProps } from '../InputBase'; diff --git a/packages/material-ui/src/Link/Link.d.ts b/packages/material-ui/src/Link/Link.d.ts index 2800915e13019a..bf4512947a0a2e 100644 --- a/packages/material-ui/src/Link/Link.d.ts +++ b/packages/material-ui/src/Link/Link.d.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { Omit } from '@material-ui/types'; +import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { TypographyProps } from '../Typography'; export interface LinkTypeMap

{ diff --git a/packages/material-ui/src/ListSubheader/ListSubheader.d.ts b/packages/material-ui/src/ListSubheader/ListSubheader.d.ts index a896fbcdfc11fb..126855bd0653bf 100644 --- a/packages/material-ui/src/ListSubheader/ListSubheader.d.ts +++ b/packages/material-ui/src/ListSubheader/ListSubheader.d.ts @@ -1,5 +1,4 @@ import * as React from 'react'; -import { StandardProps } from '..'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; export interface ListSubheaderTypeMap

{ diff --git a/packages/material-ui/src/Menu/Menu.d.ts b/packages/material-ui/src/Menu/Menu.d.ts index e84e379ee45130..df62c39be1c159 100644 --- a/packages/material-ui/src/Menu/Menu.d.ts +++ b/packages/material-ui/src/Menu/Menu.d.ts @@ -1,7 +1,6 @@ import * as React from 'react'; import { PopoverProps } from '../Popover'; import { MenuListProps } from '../MenuList'; -import { PaperProps } from '../Paper'; import { StandardProps } from '..'; import { TransitionHandlerProps, TransitionProps } from '../transitions/transition'; diff --git a/packages/material-ui/src/MenuItem/MenuItem.d.ts b/packages/material-ui/src/MenuItem/MenuItem.d.ts index ab44e0f48d820b..750d2f3263c725 100644 --- a/packages/material-ui/src/MenuItem/MenuItem.d.ts +++ b/packages/material-ui/src/MenuItem/MenuItem.d.ts @@ -1,7 +1,7 @@ +import { Omit } from '@material-ui/types'; import { ListItemTypeMap, ListItemProps } from '../ListItem'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { ExtendButtonBase } from '../ButtonBase'; -import { Omit } from '@material-ui/types'; export type MenuItemClassKey = 'root' | 'gutters' | 'selected' | 'dense'; diff --git a/packages/material-ui/src/Modal/Modal.d.ts b/packages/material-ui/src/Modal/Modal.d.ts index 00fb27885619fa..7ee24693098d76 100644 --- a/packages/material-ui/src/Modal/Modal.d.ts +++ b/packages/material-ui/src/Modal/Modal.d.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { StandardProps, ModalManager } from '..'; +import { StandardProps } from '..'; import { BackdropProps } from '../Backdrop'; import { PortalProps } from '../Portal'; diff --git a/packages/material-ui/src/RadioGroup/useRadioGroup.d.ts b/packages/material-ui/src/RadioGroup/useRadioGroup.d.ts index ae3fa093db4b42..f4eb93c9c18113 100644 --- a/packages/material-ui/src/RadioGroup/useRadioGroup.d.ts +++ b/packages/material-ui/src/RadioGroup/useRadioGroup.d.ts @@ -1,4 +1,3 @@ -import { Context } from 'react'; import { RadioGroupProps } from './RadioGroup'; export interface RadioGroupState extends Pick {} diff --git a/packages/material-ui/src/Slide/Slide.d.ts b/packages/material-ui/src/Slide/Slide.d.ts index 1f25d0931037b8..fddc05aa073417 100644 --- a/packages/material-ui/src/Slide/Slide.d.ts +++ b/packages/material-ui/src/Slide/Slide.d.ts @@ -1,5 +1,4 @@ import * as React from 'react'; -import { Theme } from '../styles/createMuiTheme'; import { TransitionProps } from '../transitions/transition'; export interface SlideProps extends TransitionProps { diff --git a/packages/material-ui/src/Step/Step.d.ts b/packages/material-ui/src/Step/Step.d.ts index 5127771a2aa4ea..5857f48db1c4f0 100644 --- a/packages/material-ui/src/Step/Step.d.ts +++ b/packages/material-ui/src/Step/Step.d.ts @@ -1,6 +1,5 @@ import * as React from 'react'; import { StandardProps } from '..'; -import { Orientation } from '../Stepper'; export interface StepProps extends StandardProps, StepClasskey> { diff --git a/packages/material-ui/src/StepButton/StepButton.d.ts b/packages/material-ui/src/StepButton/StepButton.d.ts index 1ac021c4ec77fc..e1b59cb7d98220 100644 --- a/packages/material-ui/src/StepButton/StepButton.d.ts +++ b/packages/material-ui/src/StepButton/StepButton.d.ts @@ -1,5 +1,4 @@ import * as React from 'react'; -import { Orientation } from '../Stepper'; import { ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; import { OverrideProps } from '../OverridableComponent'; diff --git a/packages/material-ui/src/StepContent/StepContent.d.ts b/packages/material-ui/src/StepContent/StepContent.d.ts index 596eeb5bf262c5..1b956ab7118cd4 100644 --- a/packages/material-ui/src/StepContent/StepContent.d.ts +++ b/packages/material-ui/src/StepContent/StepContent.d.ts @@ -1,6 +1,5 @@ import * as React from 'react'; import { StandardProps } from '..'; -import { Orientation } from '../Stepper'; import { TransitionProps } from '../transitions/transition'; export interface StepContentProps diff --git a/packages/material-ui/src/TablePagination/TablePagination.d.ts b/packages/material-ui/src/TablePagination/TablePagination.d.ts index 4fbdab95b7dfd6..b192123b31f4b1 100644 --- a/packages/material-ui/src/TablePagination/TablePagination.d.ts +++ b/packages/material-ui/src/TablePagination/TablePagination.d.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { Omit } from '@material-ui/types'; +import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { TablePaginationActionsProps } from './TablePaginationActions'; import { TableCellProps } from '../TableCell'; import { IconButtonProps } from '../IconButton'; diff --git a/packages/material-ui/src/TableSortLabel/TableSortLabel.d.ts b/packages/material-ui/src/TableSortLabel/TableSortLabel.d.ts index b61c24e936ad4d..b8680d9fa15ce6 100644 --- a/packages/material-ui/src/TableSortLabel/TableSortLabel.d.ts +++ b/packages/material-ui/src/TableSortLabel/TableSortLabel.d.ts @@ -1,6 +1,5 @@ import * as React from 'react'; import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; -import { SvgIconProps } from '../SvgIcon'; import { OverrideProps } from '../OverridableComponent'; export type TableSortLabelTypeMap< diff --git a/packages/material-ui/src/Typography/Typography.d.ts b/packages/material-ui/src/Typography/Typography.d.ts index 3d71c929242923..c965102f68324b 100644 --- a/packages/material-ui/src/Typography/Typography.d.ts +++ b/packages/material-ui/src/Typography/Typography.d.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { StandardProps, PropTypes } from '..'; -import { OverrideProps, OverridableTypeMap, OverridableComponent } from '../OverridableComponent'; +import { PropTypes } from '..'; +import { OverrideProps, OverridableComponent } from '../OverridableComponent'; import { Variant } from '../styles/createTypography'; export interface TypographyTypeMap

{ diff --git a/packages/material-ui/src/Unstable_TrapFocus/Unstable_TrapFocus.d.ts b/packages/material-ui/src/Unstable_TrapFocus/Unstable_TrapFocus.d.ts index 8fd097e6d08c0c..4ace848027e703 100644 --- a/packages/material-ui/src/Unstable_TrapFocus/Unstable_TrapFocus.d.ts +++ b/packages/material-ui/src/Unstable_TrapFocus/Unstable_TrapFocus.d.ts @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/naming-convention */ import * as React from 'react'; export interface TrapFocusProps { diff --git a/packages/material-ui/src/Zoom/Zoom.d.ts b/packages/material-ui/src/Zoom/Zoom.d.ts index ca1a5e1d5ce279..09b89ac4c3032d 100644 --- a/packages/material-ui/src/Zoom/Zoom.d.ts +++ b/packages/material-ui/src/Zoom/Zoom.d.ts @@ -1,5 +1,4 @@ import * as React from 'react'; -import { Theme } from '../styles/createMuiTheme'; import { TransitionProps } from '../transitions/transition'; export interface ZoomProps extends TransitionProps { diff --git a/packages/material-ui/src/index.d.ts b/packages/material-ui/src/index.d.ts index d43649def02d15..481e8a58b7cd19 100644 --- a/packages/material-ui/src/index.d.ts +++ b/packages/material-ui/src/index.d.ts @@ -1,6 +1,8 @@ +/* eslint-disable import/first */ import * as React from 'react'; import { Omit } from '@material-ui/types'; import { StyledComponentProps } from './styles'; + export { StyledComponentProps }; /** diff --git a/packages/material-ui/src/styles/createTypography.d.ts b/packages/material-ui/src/styles/createTypography.d.ts index 42243fb6b03155..27edadb55f37b1 100644 --- a/packages/material-ui/src/styles/createTypography.d.ts +++ b/packages/material-ui/src/styles/createTypography.d.ts @@ -1,5 +1,5 @@ -import { Palette } from './createPalette'; import * as React from 'react'; +import { Palette } from './createPalette'; import { CSSProperties } from './withStyles'; export type Variant = diff --git a/packages/material-ui/src/styles/makeStyles.d.ts b/packages/material-ui/src/styles/makeStyles.d.ts index 0581923403e100..07908af194078f 100644 --- a/packages/material-ui/src/styles/makeStyles.d.ts +++ b/packages/material-ui/src/styles/makeStyles.d.ts @@ -1,7 +1,6 @@ -import { Theme as DefaultTheme } from './createMuiTheme'; import { ClassNameMap, Styles, WithStylesOptions } from '@material-ui/styles/withStyles'; - import { Omit } from '@material-ui/types'; +import { Theme as DefaultTheme } from './createMuiTheme'; /** * `makeStyles` where the passed `styles` do not depend on props diff --git a/packages/material-ui/src/styles/styled.d.ts b/packages/material-ui/src/styles/styled.d.ts index 0414fde1bfd65c..6ed2805893d232 100644 --- a/packages/material-ui/src/styles/styled.d.ts +++ b/packages/material-ui/src/styles/styled.d.ts @@ -1,3 +1,4 @@ +import * as React from 'react'; import { Omit } from '@material-ui/types'; import { CreateCSSProperties, @@ -5,7 +6,6 @@ import { WithStylesOptions, } from '@material-ui/styles/withStyles'; import { Theme as DefaultTheme } from './createMuiTheme'; -import * as React from 'react'; // These definitions are almost identical to the ones in @material-ui/styles/styled // Only difference is that ComponentCreator has a default theme type diff --git a/packages/material-ui/src/styles/withStyles.d.ts b/packages/material-ui/src/styles/withStyles.d.ts index 6b0b2ed5879eae..6b68913f544c09 100644 --- a/packages/material-ui/src/styles/withStyles.d.ts +++ b/packages/material-ui/src/styles/withStyles.d.ts @@ -1,5 +1,4 @@ import { PropInjector } from '@material-ui/types'; -import { Theme } from './createMuiTheme'; import { CreateCSSProperties, CSSProperties, @@ -12,6 +11,7 @@ import { ClassKeyOfStyles, BaseCSSProperties, } from '@material-ui/styles/withStyles'; +import { Theme } from './createMuiTheme'; export { CreateCSSProperties, diff --git a/packages/material-ui/src/styles/withTheme.d.ts b/packages/material-ui/src/styles/withTheme.d.ts index 70025c9a048c54..8d07025e82ca75 100644 --- a/packages/material-ui/src/styles/withTheme.d.ts +++ b/packages/material-ui/src/styles/withTheme.d.ts @@ -1,5 +1,5 @@ -import { Theme } from './createMuiTheme'; import { PropInjector } from '@material-ui/types'; +import { Theme } from './createMuiTheme'; export interface WithTheme { theme: Theme; diff --git a/packages/material-ui/src/utils/isMuiElement.d.ts b/packages/material-ui/src/utils/isMuiElement.d.ts index bfb5df3b456eef..ffca03d9a690c2 100644 --- a/packages/material-ui/src/utils/isMuiElement.d.ts +++ b/packages/material-ui/src/utils/isMuiElement.d.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { StandardProps } from '../'; +import { StandardProps } from '..'; export type NamedMuiComponent = React.ComponentType & { muiName: string }; diff --git a/packages/material-ui/src/withMobileDialog/withMobileDialog.d.ts b/packages/material-ui/src/withMobileDialog/withMobileDialog.d.ts index fed68f6668aa72..2bbe60bcff0f62 100644 --- a/packages/material-ui/src/withMobileDialog/withMobileDialog.d.ts +++ b/packages/material-ui/src/withMobileDialog/withMobileDialog.d.ts @@ -1,6 +1,6 @@ +import { PropInjector } from '@material-ui/types'; import { Breakpoint } from '../styles/createBreakpoints'; import { WithWidth } from '../withWidth'; -import { PropInjector } from '@material-ui/types'; export interface WithMobileDialogOptions { breakpoint: Breakpoint; diff --git a/packages/material-ui/src/withWidth/withWidth.d.ts b/packages/material-ui/src/withWidth/withWidth.d.ts index 64669acfd1abc0..7d76ce474a7509 100644 --- a/packages/material-ui/src/withWidth/withWidth.d.ts +++ b/packages/material-ui/src/withWidth/withWidth.d.ts @@ -1,5 +1,5 @@ -import { Breakpoint } from '../styles/createBreakpoints'; import { PropInjector } from '@material-ui/types'; +import { Breakpoint } from '../styles/createBreakpoints'; export interface WithWidthOptions { withTheme?: boolean; diff --git a/packages/material-ui/test/typescript/components.spec.tsx b/packages/material-ui/test/typescript/components.spec.tsx index c21de4c070605e..636b042a9df8cb 100644 --- a/packages/material-ui/test/typescript/components.spec.tsx +++ b/packages/material-ui/test/typescript/components.spec.tsx @@ -215,8 +215,7 @@ const CardTest = () => ( adjective well meaning and kindly. -
- {'"a benevolent smile"'} +
a benevolent smile @@ -233,7 +232,7 @@ const CardMediaTest = () => ( subheader="September 14, 2016" /> - Contemplative Reptile + Contemplative Reptile @@ -252,7 +251,7 @@ const CardMediaTest = () => ( - + Method: @@ -399,7 +398,12 @@ const DrawerTest = () => { }; return (

- log(event)} onClick={(e) => log(e)}> + log(event)} + onClick={(e) => log(e)} + > List { label="Indeterminate" /> - } + control={} label="Custom color" /> @@ -942,9 +944,9 @@ const TabsTest = () => { - {this.state.value === 0 && {'Item One'}} - {this.state.value === 1 && {'Item Two'}} - {this.state.value === 2 && {'Item Three'}} + {this.state.value === 0 && Item One} + {this.state.value === 1 && Item Two} + {this.state.value === 2 && Item Three}
); } @@ -955,15 +957,15 @@ const TabsTest = () => { const TextFieldTest = () => (
- - Name} value={'Alice'} /> + + Name} value="Alice" /> log({ name: event.currentTarget.value })} /> - + ( ); const LinkTest = () => { - const dudUrl = 'javascript:;'; + const dudUrl = 'javascript'; return ( Link - {'color="inherit"'} + inherit - {'variant="body1"'} + body1 ); diff --git a/packages/material-ui/test/typescript/styles.spec.tsx b/packages/material-ui/test/typescript/styles.spec.tsx index 6be0f6dd690aa1..952c06b95ae178 100644 --- a/packages/material-ui/test/typescript/styles.spec.tsx +++ b/packages/material-ui/test/typescript/styles.spec.tsx @@ -164,7 +164,7 @@ const t5 = createMuiTheme().spacing(1, 2, 3, 4, 5); function OverridesTheme() { return ( - + ); } @@ -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'));