@mui/internal-code-infra 0.0.4-canary.10 → 0.0.4-canary.101

package/src/eslint/mui/rules/mui-name-matches-component-name.test.mjs

@@ -1,247 +0,0 @@
-import eslint from 'eslint';
-import parser from '@typescript-eslint/parser';
-import rule from './mui-name-matches-component-name.mjs';
-
-const ruleTester = new eslint.RuleTester({
-  languageOptions: {
-    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 Grid = createGrid({
-      createStyledComponent: styled('div', {
-        name: 'MuiGrid',
-        overridesResolver: (props, styles) => styles.root,
-      }),
-      componentName: 'MuiGrid',
-      useThemeProps: (inProps) => useThemeProps({ props: inProps, name: 'MuiGrid' }),
-    }) as OverridableComponent<GridTypeMap>;
-    `,
-    {
-      code: `
-        function useDatePickerDefaultizedProps(props, name) {
-          useThemeProps({ props, name });
-        }
-      `,
-      options: [{ customHooks: ['useDatePickerDefaultizedProps'] }],
-    },
-    // ================
-    // useDefaultProps
-    `
-      const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker<TDate>(
-        inProps: StaticDateRangePickerProps<TDate>,
-        ref: React.Ref<HTMLDivElement>,
-      ) {
-        const props = useDefaultProps({ props: inProps, name: 'MuiStaticDateRangePicker' });
-      });
-    `,
-    `
-      function CssBaseline(inProps) {
-        useDefaultProps({ 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,
-          ];
-        },
-      }),
-      useDefaultProps: (inProps) => useDefaultProps({ props: inProps, name: 'MuiContainer' }),
-    });
-    `,
-    `
-    const Grid = createGrid({
-      createStyledComponent: styled('div', {
-        name: 'MuiGrid',
-        overridesResolver: (props, styles) => styles.root,
-      }),
-      componentName: 'MuiGrid',
-      useDefaultProps: (inProps) => useDefaultProps({ props: inProps, name: 'MuiGrid' }),
-    }) as OverridableComponent<GridTypeMap>;
-    `,
-    {
-      code: `
-        const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker<TDate>(
-          inProps: StaticDateRangePickerProps<TDate>,
-          ref: React.Ref<HTMLDivElement>,
-        ) {
-          const props = useDatePickerDefaultizedProps(inProps, 'MuiStaticDateRangePicker');
-        });
-      `,
-      options: [{ customHooks: ['useDatePickerDefaultizedProps'] }],
-    },
-    {
-      code: `
-        function useDatePickerDefaultizedProps(props, name) {
-          useDefaultProps({ props, name });
-        }
-      `,
-      options: [{ customHooks: ['useDatePickerDefaultizedProps'] }],
-    },
-  ],
-  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'.",
-        },
-      ],
-    },
-    {
-      code: 'useThemeProps({ props: inProps })',
-      errors: [
-        {
-          message: 'Unable to find `name` property. Did you forget to pass `name`?',
-        },
-      ],
-    },
-    {
-      code: 'useThemeProps({ props: inProps, name })',
-      errors: [
-        {
-          message:
-            'Unable to resolve `name`. Please hardcode the `name` i.e. use a string literal.',
-        },
-      ],
-    },
-    {
-      code: "useThemeProps({ props: inProps, name: 'MuiPickersDateRangePicker' })",
-      errors: [
-        {
-          message: 'Unable to find component for this call.',
-        },
-      ],
-    },
-    {
-      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'.",
-        },
-      ],
-    },
-    // ================
-    // useDefaultProps
-    {
-      code: `
-        const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker<TDate>(
-          inProps: StaticDateRangePickerProps<TDate>,
-          ref: React.Ref<HTMLDivElement>,
-        ) {
-          const props = useDefaultProps({ props: inProps, name: 'MuiPickersDateRangePicker' });
-        });
-      `,
-      errors: [
-        {
-          message:
-            "Expected `name` to be 'MuiStaticDateRangePicker' but instead got 'MuiPickersDateRangePicker'.",
-        },
-      ],
-    },
-    {
-      code: 'useDefaultProps({ props: inProps })',
-      errors: [
-        {
-          message: 'Unable to find `name` property. Did you forget to pass `name`?',
-        },
-      ],
-    },
-    {
-      code: 'useDefaultProps({ props: inProps, name })',
-      errors: [
-        {
-          message:
-            'Unable to resolve `name`. Please hardcode the `name` i.e. use a string literal.',
-        },
-      ],
-    },
-    {
-      code: "useDefaultProps({ props: inProps, name: 'MuiPickersDateRangePicker' })",
-      errors: [
-        {
-          message: 'Unable to find component for this call.',
-        },
-      ],
-    },
-    {
-      code: `
-        const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker<TDate>(
-          inProps: StaticDateRangePickerProps<TDate>,
-          ref: React.Ref<HTMLDivElement>,
-        ) {
-          const props = useDatePickerDefaultizedProps(inProps);
-        });
-      `,
-      options: [{ customHooks: ['useDatePickerDefaultizedProps'] }],
-      errors: [
-        {
-          message:
-            "Unable to find name argument. Expected `useDatePickerDefaultizedProps(firstParameter, 'MuiComponent')`.",
-        },
-      ],
-    },
-  ],
-});

package/src/eslint/mui/rules/no-empty-box.test.mjs

@@ -1,40 +0,0 @@
-import eslint from 'eslint';
-import parser from '@typescript-eslint/parser';
-import rule from './no-empty-box.mjs';
-
-const ruleTester = new eslint.RuleTester({
-  languageOptions: {
-    parser,
-    parserOptions: {
-      ecmaFeatures: { jsx: true },
-    },
-  },
-});
-
-ruleTester.run('no-empty-box', rule, {
-  valid: ['<Box sx={{ width: 1 }}>Foo</Box>', '<Box sx={{ width: 1 }} />', '<Box {...props} />'],
-  invalid: [
-    {
-      code: '<Box>Foo</Box>',
-      errors: [
-        {
-          messageId: 'emptyBox',
-          data: {
-            component: 'div',
-          },
-        },
-      ],
-    },
-    {
-      code: '<Box component="span">Foo</Box>',
-      errors: [
-        {
-          messageId: 'emptyBox',
-          data: {
-            component: 'span',
-          },
-        },
-      ],
-    },
-  ],
-});

package/src/eslint/mui/rules/no-styled-box.test.mjs

@@ -1,73 +0,0 @@
-import eslint from 'eslint';
-import parser from '@typescript-eslint/parser';
-import rule from './no-styled-box.mjs';
-
-const ruleTester = new eslint.RuleTester({
-  languageOptions: {
-    parser,
-    parserOptions: {
-      ecmaFeatures: { jsx: true },
-    },
-  },
-});
-
-ruleTester.run('no-styled-box', rule, {
-  valid: [
-    `
-import { styled } from '@mui/system';
-styled('div');
-`,
-    `
-import { styled } from '@mui/system';
-styled('div', {});
-`,
-  ],
-  invalid: [
-    {
-      code: `
-import { styled } from '@mui/system';
-import Box from '@mui/material/Box';
-
-const foo = styled(Box)({
-  color: 'red',
-});
-`,
-      errors: [
-        {
-          messageId: 'noBox',
-        },
-      ],
-      output: `
-import { styled } from '@mui/system';
-import Box from '@mui/material/Box';
-
-const foo = styled('div')({
-  color: 'red',
-});
-`,
-    },
-    {
-      code: `
-import { styled } from '@mui/system';
-import Box from '@mui/material/Box';
-
-const foo = styled(Box, {})({
-  color: 'red',
-});
-`,
-      errors: [
-        {
-          messageId: 'noBox',
-        },
-      ],
-      output: `
-import { styled } from '@mui/system';
-import Box from '@mui/material/Box';
-
-const foo = styled('div', {})({
-  color: 'red',
-});
-`,
-    },
-  ],
-});

package/src/eslint/mui/rules/require-dev-wrapper.test.mjs

@@ -1,265 +0,0 @@
-import eslint from 'eslint';
-import parser from '@typescript-eslint/parser';
-import rule from './require-dev-wrapper.mjs';
-
-const ruleTester = new eslint.RuleTester({
-  languageOptions: {
-    parser,
-  },
-});
-
-ruleTester.run('require-dev-wrapper', rule, {
-  valid: [
-    // Should pass: Function wrapped with !== production check
-    {
-      code: `
-if (process.env.NODE_ENV !== 'production') {
-  checkSlot(key, overrides[k]);
-}
-      `,
-    },
-    // Should pass: Function wrapped with === 'development' check (tree-shakes in production)
-    {
-      code: `
-if (process.env.NODE_ENV === 'development') {
-  checkSlot(key, overrides[k]);
-}
-      `,
-    },
-    // Should pass: Function wrapped in a for loop inside production check
-    {
-      code: `
-if (process.env.NODE_ENV !== 'production') {
-  for (key in slots) {
-    checkSlot(key, overrides[k]);
-  }
-}
-      `,
-    },
-    // Should pass: Other functions not in the list
-    {
-      code: `
-otherFunction('hello');
-      `,
-    },
-    // Should pass: warnOnce wrapped correctly
-    {
-      code: `
-if (process.env.NODE_ENV !== 'production') {
-  warnOnce('Some warning message');
-}
-      `,
-    },
-    // Should pass: Multiple statements in production check
-    {
-      code: `
-if (process.env.NODE_ENV !== 'production') {
-  const message = 'Warning';
-  warn(message);
-  checkSlot(key, value);
-}
-      `,
-    },
-    // Should pass: Nested blocks
-    {
-      code: `
-if (process.env.NODE_ENV !== 'production') {
-  if (someCondition) {
-    warnOnce('nested warning');
-  }
-}
-      `,
-    },
-    // Should pass: Reversed comparison (literal on left)
-    {
-      code: `
-if ('production' !== process.env.NODE_ENV) {
-  checkSlot(key, value);
-}
-      `,
-    },
-    // Should pass: Function in else block when if checks for production
-    {
-      code: `
-if (process.env.NODE_ENV === 'production') {
-  // production code
-} else {
-  checkSlot(key, value);
-}
-      `,
-    },
-    // Should pass: Nested if statement in else block
-    {
-      code: `
-if (process.env.NODE_ENV === 'production') {
-  // production code
-} else {
-  if (someCondition) {
-    warnOnce('nested warning in else');
-  }
-}
-      `,
-    },
-    // Should pass: else-if chain where inner if is a valid dev guard
-    {
-      code: `
-if (a) {
-} else if (process.env.NODE_ENV !== 'production') {
-  warn('dev only');
-}
-      `,
-    },
-    // Should pass: else-if after production check (call is in the non-production branch)
-    {
-      code: `
-if (process.env.NODE_ENV === 'production') {
-} else if (someCondition) {
-  warn('not production');
-}
-      `,
-    },
-  ],
-  invalid: [
-    // Should fail: checkSlot without production check
-    {
-      code: `
-checkSlot(key, overrides[k]);
-      `,
-      errors: [
-        {
-          messageId: 'missingDevWrapper',
-          data: { functionName: 'checkSlot' },
-        },
-      ],
-    },
-    // Should fail: warnOnce without production check
-    {
-      code: `
-warnOnce('Some warning');
-      `,
-      errors: [
-        {
-          messageId: 'missingDevWrapper',
-          data: { functionName: 'warnOnce' },
-        },
-      ],
-    },
-    // Should fail: warn without production check
-    {
-      code: `
-warn('Some warning');
-      `,
-      errors: [
-        {
-          messageId: 'missingDevWrapper',
-          data: { functionName: 'warn' },
-        },
-      ],
-    },
-    // Should fail: Multiple unwrapped calls
-    {
-      code: `
-checkSlot(key, value);
-warn('Warning message');
-      `,
-      errors: [
-        {
-          messageId: 'missingDevWrapper',
-          data: { functionName: 'checkSlot' },
-        },
-        {
-          messageId: 'missingDevWrapper',
-          data: { functionName: 'warn' },
-        },
-      ],
-    },
-    // Should fail: Inside wrong conditional (no process.env.NODE_ENV)
-    {
-      code: `
-if (someOtherCondition) {
-  checkSlot(key, value);
-}
-      `,
-      errors: [
-        {
-          messageId: 'missingDevWrapper',
-          data: { functionName: 'checkSlot' },
-        },
-      ],
-    },
-    // Should fail: Inside else block of production check (!== 'production')
-    {
-      code: `
-if (process.env.NODE_ENV !== 'production') {
-  // ok
-} else {
-  checkSlot(key, value);
-}
-      `,
-      errors: [
-        {
-          messageId: 'missingDevWrapper',
-          data: { functionName: 'checkSlot' },
-        },
-      ],
-    },
-    // Should fail: In then block of === 'production' (would run in production!)
-    {
-      code: `
-if (process.env.NODE_ENV === 'production') {
-  checkSlot(key, value);
-}
-      `,
-      errors: [
-        {
-          messageId: 'missingDevWrapper',
-          data: { functionName: 'checkSlot' },
-        },
-      ],
-    },
-    // Should fail: !== 'test' doesn't reliably tree-shake
-    {
-      code: `
-if (process.env.NODE_ENV !== 'test') {
-  checkSlot(key, value);
-}
-      `,
-      errors: [
-        {
-          messageId: 'missingDevWrapper',
-          data: { functionName: 'checkSlot' },
-        },
-      ],
-    },
-    // Should fail: Non-static check doesn't tree-shake
-    {
-      code: `
-const env = 'production';
-if (process.env.NODE_ENV !== env) {
-  checkSlot(key, value);
-}
-      `,
-      errors: [
-        {
-          messageId: 'missingDevWrapper',
-          data: { functionName: 'checkSlot' },
-        },
-      ],
-    },
-    // Should fail: else-if after !== 'production' means call runs IN production
-    {
-      code: `
-if (process.env.NODE_ENV !== 'production') {
-} else if (someCondition) {
-  warn('this runs in production');
-}
-      `,
-      errors: [
-        {
-          messageId: 'missingDevWrapper',
-          data: { functionName: 'warn' },
-        },
-      ],
-    },
-  ],
-});