From 48cac390050585326d9259fc902fc7bc419da419 Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Wed, 3 Jul 2024 15:30:26 +0700 Subject: [PATCH] [core] Revert lint for `useThemeProps` (#42817) --- .../rules/mui-name-matches-component-name.js | 3 +- .../mui-name-matches-component-name.test.js | 115 ++++++++++++++++++ 2 files changed, 117 insertions(+), 1 deletion(-) diff --git a/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.js b/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.js index c42ff49235e974..c4d1f8b5854a4e 100644 --- a/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.js +++ b/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.js @@ -69,7 +69,8 @@ const rule = { return { CallExpression(node) { let nameLiteral = null; - const isUseDefaultPropsCall = node.callee.name === 'useDefaultProps'; + const isUseDefaultPropsCall = + node.callee.name === 'useDefaultProps' || node.callee.name === 'useThemeProps'; if (isUseDefaultPropsCall) { let isCalledFromCustomHook = false; let parent = node.parent; diff --git a/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.test.js b/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.test.js index fc3d04ff919a53..e36aaa5fb36bd3 100644 --- a/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.test.js +++ b/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.test.js @@ -4,6 +4,58 @@ const rule = require('./mui-name-matches-component-name'); const ruleTester = new eslint.RuleTester({ parser: require.resolve('@typescript-eslint/parser') }); ruleTester.run('mui-name-matches-component-name', rule, { valid: [ + // useThemeProps + ` + const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker( + inProps: StaticDateRangePickerProps, + ref: React.Ref, + ) { + const props = useThemeProps({ props: inProps, name: 'MuiStaticDateRangePicker' }); + }); + `, + ` + function CssBaseline(inProps) { + useThemeProps({ props: inProps, name: 'MuiCssBaseline' }); + } + `, + ` + const Container = createContainer({ + createStyledComponent: styled('div', { + name: 'MuiContainer', + slot: 'Root', + overridesResolver: (props, styles) => { + const { ownerState } = props; + + return [ + styles.root, + ownerState.fixed && styles.fixed, + ownerState.disableGutters && styles.disableGutters, + ]; + }, + }), + useThemeProps: (inProps) => useThemeProps({ props: inProps, name: 'MuiContainer' }), + }); + `, + ` + const Grid2 = createGrid2({ + createStyledComponent: styled('div', { + name: 'MuiGrid2', + overridesResolver: (props, styles) => styles.root, + }), + componentName: 'MuiGrid2', + useThemeProps: (inProps) => useThemeProps({ props: inProps, name: 'MuiGrid2' }), + }) as OverridableComponent; + `, + { + code: ` + function useDatePickerDefaultizedProps(props, name) { + useThemeProps({ props, name }); + } + `, + options: [{ customHooks: ['useDatePickerDefaultizedProps'] }], + }, + // ================ + // useDefaultProps ` const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker( inProps: StaticDateRangePickerProps, @@ -66,6 +118,67 @@ ruleTester.run('mui-name-matches-component-name', rule, { }, ], invalid: [ + // useThemeProps + { + code: ` + const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker( + inProps: StaticDateRangePickerProps, + ref: React.Ref, + ) { + const props = useThemeProps({ props: inProps, name: 'MuiPickersDateRangePicker' }); + }); + `, + errors: [ + { + message: + "Expected `name` to be 'MuiStaticDateRangePicker' but instead got 'MuiPickersDateRangePicker'.", + type: 'Literal', + }, + ], + }, + { + code: 'useThemeProps({ props: inProps })', + errors: [ + { + message: 'Unable to find `name` property. Did you forget to pass `name`?', + type: 'ObjectExpression', + }, + ], + }, + { + code: 'useThemeProps({ props: inProps, name })', + errors: [ + { + message: + 'Unable to resolve `name`. Please hardcode the `name` i.e. use a string literal.', + type: 'Identifier', + }, + ], + }, + { + code: "useThemeProps({ props: inProps, name: 'MuiPickersDateRangePicker' })", + errors: [{ message: 'Unable to find component for this call.', type: 'CallExpression' }], + }, + { + code: ` + const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker( + inProps: StaticDateRangePickerProps, + ref: React.Ref, + ) { + const props = useDatePickerDefaultizedProps(inProps, 'MuiPickersDateRangePicker'); + }); + `, + options: [{ customHooks: ['useDatePickerDefaultizedProps'] }], + errors: [ + { + message: + "Expected `name` to be 'MuiStaticDateRangePicker' but instead got 'MuiPickersDateRangePicker'.", + type: 'Literal', + }, + ], + }, + // ================ + // useDefaultProps { code: ` const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker( @@ -124,6 +237,8 @@ ruleTester.run('mui-name-matches-component-name', rule, { }, ], }, + // ================ + // customHooks { code: ` const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker(