From 764faaf1ed158402c17ead5498defedd73dd317d Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Thu, 17 Nov 2022 13:01:58 -0800 Subject: [PATCH] [core] Upgrade eslint-config-airbnb-typescript (#34642) Signed-off-by: Jan Potoms <2109932+Janpot@users.noreply.github.com> --- .eslintrc.js | 14 +++- .../dark-mode/IdentifySystemMode.js | 4 +- .../dark-mode/IdentifySystemMode.tsx | 4 +- package.json | 3 +- .../src/Autocomplete/Autocomplete.test.tsx | 60 +++++++------- .../mui-joy/src/styles/ColorInversion.test.js | 16 ++-- .../mui-joy/src/styles/ColorInversion.tsx | 4 +- .../src/styles/CssVarsProvider.test.tsx | 4 +- packages/mui-joy/src/utils/useSlot.test.tsx | 12 +-- packages/mui-lab/src/TreeView/TreeView.js | 4 +- .../src/Accordion/Accordion.test.js | 1 + packages/mui-material/src/Menu/Menu.test.js | 1 + .../src/elementAcceptingRef.test.tsx | 1 + yarn.lock | 79 ++++--------------- 14 files changed, 91 insertions(+), 116 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 69c22f8dab78b4..c41f51e1185310 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -22,6 +22,7 @@ module.exports = { extends: [ 'plugin:eslint-plugin-import/recommended', 'plugin:eslint-plugin-import/typescript', + 'eslint-config-airbnb', 'eslint-config-airbnb-typescript', 'eslint-config-prettier', ], @@ -160,8 +161,7 @@ module.exports = { 'react/state-in-constructor': 'off', // stylistic opinion. For conditional assignment we want it outside, otherwise as static 'react/static-property-placement': 'off', - // Currently not in recommended ruleset but catches real bugs. - 'react/no-unstable-nested-components': 'error', + 'no-restricted-syntax': [ // See https://github.com/eslint/eslint/issues/9192 for why it's needed ...baseStyleRules['no-restricted-syntax'], @@ -171,6 +171,15 @@ module.exports = { selector: 'ImportDeclaration[source.value="react"] ImportDefaultSpecifier', }, ], + + // We re-export default in many places, remove when https://github.com/airbnb/javascript/issues/2500 gets resolved + 'no-restricted-exports': 'off', + // Some of these occurences are deliberate and fixing them will break things in repos that use @monorepo dependency + 'import/no-relative-packages': 'off', + // Avoid accidental auto-"fixes" https://github.com/jsx-eslint/eslint-plugin-react/issues/3458 + 'react/no-invalid-html-attribute': 'off', + + 'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }], }, overrides: [ { @@ -355,6 +364,7 @@ module.exports = { 'react/require-default-props': 'off', 'react/state-in-constructor': 'off', 'react/static-property-placement': 'off', + 'react/function-component-definition': 'off', }, }, { diff --git a/docs/data/joy/customization/dark-mode/IdentifySystemMode.js b/docs/data/joy/customization/dark-mode/IdentifySystemMode.js index c7dc70ca688797..ae398f48ee45bd 100644 --- a/docs/data/joy/customization/dark-mode/IdentifySystemMode.js +++ b/docs/data/joy/customization/dark-mode/IdentifySystemMode.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { CssVarsProvider, useColorScheme } from '@mui/joy/styles'; import Typography from '@mui/joy/Typography'; -const Identifier = () => { +function Identifier() { const { systemMode } = useColorScheme(); const [mounted, setMounted] = React.useState(false); React.useEffect(() => { @@ -32,7 +32,7 @@ const Identifier = () => { mode. ); -}; +} export default function IdentifySystemMode() { return ( diff --git a/docs/data/joy/customization/dark-mode/IdentifySystemMode.tsx b/docs/data/joy/customization/dark-mode/IdentifySystemMode.tsx index c7dc70ca688797..ae398f48ee45bd 100644 --- a/docs/data/joy/customization/dark-mode/IdentifySystemMode.tsx +++ b/docs/data/joy/customization/dark-mode/IdentifySystemMode.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { CssVarsProvider, useColorScheme } from '@mui/joy/styles'; import Typography from '@mui/joy/Typography'; -const Identifier = () => { +function Identifier() { const { systemMode } = useColorScheme(); const [mounted, setMounted] = React.useState(false); React.useEffect(() => { @@ -32,7 +32,7 @@ const Identifier = () => { mode. ); -}; +} export default function IdentifySystemMode() { return ( diff --git a/package.json b/package.json index 6c801c764fd894..6c787f19b7474a 100644 --- a/package.json +++ b/package.json @@ -131,7 +131,8 @@ "dtslint": "^4.2.1", "enzyme": "^3.11.0", "eslint": "^8.27.0", - "eslint-config-airbnb-typescript": "^12.3.1", + "eslint-config-airbnb": "^19.0.4", + "eslint-config-airbnb-typescript": "^17.0.0", "eslint-config-prettier": "^8.5.0", "eslint-import-resolver-webpack": "^0.13.2", "eslint-plugin-babel": "^5.3.1", diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx index 44dfe3673f1d49..80be88419afb23 100644 --- a/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx +++ b/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx @@ -547,17 +547,19 @@ describe('Joy ', () => { it('should trigger a form expectedly', () => { const handleSubmit = spy(); - const Test = (props: any) => ( -
{ - if (!event.defaultPrevented && event.key === 'Enter') { - handleSubmit(); - } - }} - > - -
- ); + function Test(props: any) { + return ( +
{ + if (!event.defaultPrevented && event.key === 'Enter') { + handleSubmit(); + } + }} + > + +
+ ); + } const { setProps } = render(); let textbox = screen.getByRole('combobox'); @@ -2031,26 +2033,28 @@ describe('Joy ', () => { it('should prevent the default event handlers', () => { const handleChange = spy(); const handleSubmit = spy(); - const Test = () => ( -
{ - if (!event.defaultPrevented && event.key === 'Enter') { - handleSubmit(); - } - }} - > - { - if (event.key === 'Enter') { - event.defaultMuiPrevented = true; + if (!event.defaultPrevented && event.key === 'Enter') { + handleSubmit(); } }} - /> -
- ); + > + { + if (event.key === 'Enter') { + event.defaultMuiPrevented = true; + } + }} + /> + + ); + } render(); const textbox = screen.getByRole('combobox'); fireEvent.keyDown(textbox, { key: 'ArrowDown' }); diff --git a/packages/mui-joy/src/styles/ColorInversion.test.js b/packages/mui-joy/src/styles/ColorInversion.test.js index 2e80d465f97b5d..6da281dde59606 100644 --- a/packages/mui-joy/src/styles/ColorInversion.test.js +++ b/packages/mui-joy/src/styles/ColorInversion.test.js @@ -7,13 +7,15 @@ import ThemeProvider from './ThemeProvider'; import ColorInversion, { useColorInversion } from './ColorInversion'; import { createSolidInversion } from './variantUtils'; -const Parent = ({ children, invertedColors }) => ( - - {children} - -); +const OVERRIDABLE_VARIANT = ['plain', 'outlined', 'soft', 'solid']; + +function Parent({ children, invertedColors }) { + return ( + + {children} + + ); +} const Child = (inProps) => { const props = useThemeProps({ name: 'Child', props: inProps }); diff --git a/packages/mui-joy/src/styles/ColorInversion.tsx b/packages/mui-joy/src/styles/ColorInversion.tsx index 4162d1247ec3ba..cc5fa33a922b49 100644 --- a/packages/mui-joy/src/styles/ColorInversion.tsx +++ b/packages/mui-joy/src/styles/ColorInversion.tsx @@ -29,13 +29,13 @@ interface ColorInversionProviderProps { variant?: VariantProp; } -export const ColorInversionProvider = ({ children, variant }: ColorInversionProviderProps) => { +export function ColorInversionProvider({ children, variant }: ColorInversionProviderProps) { const theme = useSystemTheme(defaultTheme); return ( {children} ); -}; +} export default VariantOverride; diff --git a/packages/mui-joy/src/styles/CssVarsProvider.test.tsx b/packages/mui-joy/src/styles/CssVarsProvider.test.tsx index b5cfd03ba47e80..87879610f54b5e 100644 --- a/packages/mui-joy/src/styles/CssVarsProvider.test.tsx +++ b/packages/mui-joy/src/styles/CssVarsProvider.test.tsx @@ -537,10 +537,10 @@ describe('[Joy] CssVarsProvider', () => { }); it('contain expected colorInversion', function test() { - const Text = () => { + function Text() { const theme = useTheme(); return
{Object.keys(theme.colorInversion).join(',')}
; - }; + } const { container } = render( diff --git a/packages/mui-joy/src/utils/useSlot.test.tsx b/packages/mui-joy/src/utils/useSlot.test.tsx index c3378938daf0f1..e65cd1a9c599a3 100644 --- a/packages/mui-joy/src/utils/useSlot.test.tsx +++ b/packages/mui-joy/src/utils/useSlot.test.tsx @@ -142,7 +142,7 @@ describe('useSlot', () => { }); const ItemOption = styled('div')({}); - const Item = (props: { + function Item(props: { component?: React.ElementType; components?: { root?: React.ElementType; @@ -154,7 +154,7 @@ describe('useSlot', () => { listbox?: SlotComponentProps<'span', Record, {}>; option?: SlotComponentProps<'div', Record, {}>; }; - }) => { + }) { const ref = React.useRef(null); const [SlotRoot, rootProps] = useSlot('root', { ref, @@ -194,7 +194,7 @@ describe('useSlot', () => { ); - }; + } it('should render popper with styled-component', () => { const { getByRole } = render(); @@ -205,9 +205,9 @@ describe('useSlot', () => { }); it('the listbox slot should be replaceable', () => { - const Listbox = ({ component }: { component?: React.ElementType }) => ( -
    - ); + function Listbox({ component }: { component?: React.ElementType }) { + return
      ; + } const { getByRole } = render(); expect(getByRole('list')).toBeVisible(); expect(getByRole('list')).not.to.have.attribute('class'); diff --git a/packages/mui-lab/src/TreeView/TreeView.js b/packages/mui-lab/src/TreeView/TreeView.js index 68d796b1782d79..37017852292bac 100644 --- a/packages/mui-lab/src/TreeView/TreeView.js +++ b/packages/mui-lab/src/TreeView/TreeView.js @@ -792,8 +792,8 @@ const TreeView = React.forwardRef(function TreeView(inProps, ref) { return ( ', () => { Accordion.propTypes, { classes: {}, + // eslint-disable-next-line react/jsx-no-useless-fragment children: , }, 'prop', diff --git a/packages/mui-material/src/Menu/Menu.test.js b/packages/mui-material/src/Menu/Menu.test.js index 90b23467e24f04..d9c9c0b0f91ac6 100644 --- a/packages/mui-material/src/Menu/Menu.test.js +++ b/packages/mui-material/src/Menu/Menu.test.js @@ -249,6 +249,7 @@ describe('', () => { expect(() => { render( + {/* eslint-disable-next-line react/jsx-no-useless-fragment */} , ); diff --git a/packages/mui-utils/src/elementAcceptingRef.test.tsx b/packages/mui-utils/src/elementAcceptingRef.test.tsx index b8cd665a826eda..465721411cebfa 100644 --- a/packages/mui-utils/src/elementAcceptingRef.test.tsx +++ b/packages/mui-utils/src/elementAcceptingRef.test.tsx @@ -103,6 +103,7 @@ describe('elementAcceptingRef', () => { // undesired behavior it('accepts Fragment', () => { + // eslint-disable-next-line react/jsx-no-useless-fragment assertPass(); }); }); diff --git a/yarn.lock b/yarn.lock index 3b8f68a4a9b25e..da9fe07789368c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3916,16 +3916,6 @@ semver "^7.3.7" tsutils "^3.21.0" -"@typescript-eslint/parser@^4.4.1": - version "4.33.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.33.0.tgz#dfe797570d9694e560528d18eecad86c8c744899" - integrity sha512-ZohdsbXadjGBSK0/r+d87X0SBmKzOq4/S5nzK6SBgJspFo9/CUDJ7hjayuze+JK7CZQLDMroqytp7pOcFKTxZA== - dependencies: - "@typescript-eslint/scope-manager" "4.33.0" - "@typescript-eslint/types" "4.33.0" - "@typescript-eslint/typescript-estree" "4.33.0" - debug "^4.3.1" - "@typescript-eslint/parser@^5.41.0": version "5.41.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.41.0.tgz#0414a6405007e463dc527b459af1f19430382d67" @@ -3936,14 +3926,6 @@ "@typescript-eslint/typescript-estree" "5.41.0" debug "^4.3.4" -"@typescript-eslint/scope-manager@4.33.0": - version "4.33.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.33.0.tgz#d38e49280d983e8772e29121cf8c6e9221f280a3" - integrity sha512-5IfJHpgTsTZuONKbODctL4kKuQje/bzBRkwHE8UOZ4f89Zeddg+EGZs8PD8NcN4LdM3ygHWYB3ukPAYjvl/qbQ== - dependencies: - "@typescript-eslint/types" "4.33.0" - "@typescript-eslint/visitor-keys" "4.33.0" - "@typescript-eslint/scope-manager@5.41.0": version "5.41.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.41.0.tgz#28e3a41d626288d0628be14cf9de8d49fc30fadf" @@ -3962,29 +3944,11 @@ debug "^4.3.4" tsutils "^3.21.0" -"@typescript-eslint/types@4.33.0": - version "4.33.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.33.0.tgz#a1e59036a3b53ae8430ceebf2a919dc7f9af6d72" - integrity sha512-zKp7CjQzLQImXEpLt2BUw1tvOMPfNoTAfb8l51evhYbOEEzdWyQNmHWWGPR6hwKJDAi+1VXSBmnhL9kyVTTOuQ== - "@typescript-eslint/types@5.41.0": version "5.41.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.41.0.tgz#6800abebc4e6abaf24cdf220fb4ce28f4ab09a85" integrity sha512-5BejraMXMC+2UjefDvrH0Fo/eLwZRV6859SXRg+FgbhA0R0l6lDqDGAQYhKbXhPN2ofk2kY5sgGyLNL907UXpA== -"@typescript-eslint/typescript-estree@4.33.0": - version "4.33.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.33.0.tgz#0dfb51c2908f68c5c08d82aefeaf166a17c24609" - integrity sha512-rkWRY1MPFzjwnEVHsxGemDzqqddw2QbTJlICPD9p9I9LfsO8fdmfQPOX3uKfUaGRDFJbfrtm/sXhVXN4E+bzCA== - dependencies: - "@typescript-eslint/types" "4.33.0" - "@typescript-eslint/visitor-keys" "4.33.0" - debug "^4.3.1" - globby "^11.0.3" - is-glob "^4.0.1" - semver "^7.3.5" - tsutils "^3.21.0" - "@typescript-eslint/typescript-estree@5.41.0": version "5.41.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.41.0.tgz#bf5c6b3138adbdc73ba4871d060ae12c59366c61" @@ -4012,14 +3976,6 @@ eslint-utils "^3.0.0" semver "^7.3.7" -"@typescript-eslint/visitor-keys@4.33.0": - version "4.33.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.33.0.tgz#2a22f77a41604289b7a186586e9ec48ca92ef1dd" - integrity sha512-uqi/2aSz9g2ftcHWf8uLPJA70rUv6yuMW5Bohw+bwcuzaxQIHaKFZCKGoGXIrc9vkTJ3+0txM73K0Hq3d5wgIg== - dependencies: - "@typescript-eslint/types" "4.33.0" - eslint-visitor-keys "^2.0.0" - "@typescript-eslint/visitor-keys@5.41.0": version "5.41.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.41.0.tgz#d3510712bc07d5540160ed3c0f8f213b73e3bcd9" @@ -7432,32 +7388,31 @@ escodegen@^2.0.0: optionalDependencies: source-map "~0.6.1" -eslint-config-airbnb-base@^14.2.0, eslint-config-airbnb-base@^14.2.1: - version "14.2.1" - resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-14.2.1.tgz#8a2eb38455dc5a312550193b319cdaeef042cd1e" - integrity sha512-GOrQyDtVEc1Xy20U7vsB2yAoB4nBlfH5HZJeatRXHleO+OS5Ot+MWij4Dpltw4/DyIkqUfqz1epfhVR5XWWQPA== +eslint-config-airbnb-base@^15.0.0: + version "15.0.0" + resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-15.0.0.tgz#6b09add90ac79c2f8d723a2580e07f3925afd236" + integrity sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig== dependencies: confusing-browser-globals "^1.0.10" object.assign "^4.1.2" - object.entries "^1.1.2" + object.entries "^1.1.5" + semver "^6.3.0" -eslint-config-airbnb-typescript@^12.3.1: - version "12.3.1" - resolved "https://registry.yarnpkg.com/eslint-config-airbnb-typescript/-/eslint-config-airbnb-typescript-12.3.1.tgz#83ab40d76402c208eb08516260d1d6fac8f8acbc" - integrity sha512-ql/Pe6/hppYuRp4m3iPaHJqkBB7dgeEmGPQ6X0UNmrQOfTF+dXw29/ZjU2kQ6RDoLxaxOA+Xqv07Vbef6oVTWw== +eslint-config-airbnb-typescript@^17.0.0: + version "17.0.0" + resolved "https://registry.yarnpkg.com/eslint-config-airbnb-typescript/-/eslint-config-airbnb-typescript-17.0.0.tgz#360dbcf810b26bbcf2ff716198465775f1c49a07" + integrity sha512-elNiuzD0kPAPTXjFWg+lE24nMdHMtuxgYoD30OyMD6yrW1AhFZPAg27VX7d3tzOErw+dgJTNWfRSDqEcXb4V0g== dependencies: - "@typescript-eslint/parser" "^4.4.1" - eslint-config-airbnb "^18.2.0" - eslint-config-airbnb-base "^14.2.0" + eslint-config-airbnb-base "^15.0.0" -eslint-config-airbnb@^18.2.0: - version "18.2.1" - resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-18.2.1.tgz#b7fe2b42f9f8173e825b73c8014b592e449c98d9" - integrity sha512-glZNDEZ36VdlZWoxn/bUR1r/sdFKPd1mHPbqUtkctgNG4yT2DLLtJ3D+yCV+jzZCc2V1nBVkmdknOJBZ5Hc0fg== +eslint-config-airbnb@^19.0.4: + version "19.0.4" + resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-19.0.4.tgz#84d4c3490ad70a0ffa571138ebcdea6ab085fdc3" + integrity sha512-T75QYQVQX57jiNgpF9r1KegMICE94VYwoFQyMGhrvc+lB8YF2E/M/PYDaQe1AJcWaEgqLE+ErXV1Og/+6Vyzew== dependencies: - eslint-config-airbnb-base "^14.2.1" + eslint-config-airbnb-base "^15.0.0" object.assign "^4.1.2" - object.entries "^1.1.2" + object.entries "^1.1.5" eslint-config-prettier@^8.5.0: version "8.5.0"