[core] Revert lint for useThemeProps (#42817)

mui · Jul 3, 2024 · 48cac39 · 48cac39
1 parent 2938126
commit 48cac39
Show file tree

Hide file tree

Showing 2 changed files with 117 additions and 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
@@ -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
@@ -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<TDate>(
+        inProps: StaticDateRangePickerProps<TDate>,
+        ref: React.Ref<HTMLDivElement>,
+      ) {
+        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<Grid2TypeMap>;
+    `,
+    {
+      code: `
+        function useDatePickerDefaultizedProps(props, name) {
+          useThemeProps({ props, name });
+        }
+      `,
+      options: [{ customHooks: ['useDatePickerDefaultizedProps'] }],
+    },
+    // ================
+    // useDefaultProps
     `
       const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker<TDate>(
         inProps: StaticDateRangePickerProps<TDate>,
@@ -66,6 +118,67 @@ ruleTester.run('mui-name-matches-component-name', rule, {
     },
   ],
   invalid: [
+    // useThemeProps
+    {
+      code: `
+        const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker<TDate>(
+          inProps: StaticDateRangePickerProps<TDate>,
+          ref: React.Ref<HTMLDivElement>,
+        ) {
+          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<TDate>(
+          inProps: StaticDateRangePickerProps<TDate>,
+          ref: React.Ref<HTMLDivElement>,
+        ) {
+          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<TDate>(
@@ -124,6 +237,8 @@ ruleTester.run('mui-name-matches-component-name', rule, {
         },
       ],
     },
+    // ================
+    // customHooks
     {
       code: `
         const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker<TDate>(