@mui/internal-code-infra 0.0.1 → 0.0.2-canary.0

package/src/eslint/material-ui/rules/disallow-active-elements-as-key-event-target.test.mjs

@@ -0,0 +1,71 @@
+import eslint from 'eslint';
+import parser from '@typescript-eslint/parser';
+import rule from './disallow-active-element-as-key-event-target.mjs';
+
+const ruleTester = new eslint.RuleTester({
+  languageOptions: {
+    parser,
+    parserOptions: { sourceType: 'module' },
+  },
+});
+
+ruleTester.run('disallow-active-element-as-key-event-target', rule, {
+  valid: [
+    "import { fireEvent } from '@mui/internal-test-utils';\nfireEvent.keyDown(getByRole('button'), { key: ' ' })",
+    "import { fireEvent } from '@mui/internal-test-utils';\nfireEvent.keyDown(document.body, { key: 'Escape' })",
+    "import { fireEvent } from '@mui/internal-test-utils';\nfireEvent.keyUp(document.body, { key: 'Tab' })",
+  ],
+  invalid: [
+    {
+      code: "import { fireEvent } from '@mui/internal-test-utils';\nfireEvent.keyUp(document.activeElement, { key: 'LeftArrow' })",
+      errors: [
+        {
+          message:
+            "Don't use document.activeElement as a target for keyboard events. Prefer the actual element.",
+          type: 'MemberExpression',
+        },
+      ],
+    },
+    {
+      code: "import { fireEvent } from '@mui/internal-test-utils';\nfireEvent.keyDown(document.activeElement, { key: 'DownArrow' })",
+      errors: [
+        {
+          message:
+            "Don't use document.activeElement as a target for keyboard events. Prefer the actual element.",
+          type: 'MemberExpression',
+        },
+      ],
+    },
+    {
+      code: "import { fireEvent } from 'any-path';\nfireEvent.keyDown(document.activeElement, { key: 'DownArrow' })",
+      errors: [
+        {
+          message:
+            "Don't use document.activeElement as a target for keyboard events. Prefer the actual element.",
+          type: 'MemberExpression',
+        },
+      ],
+    },
+    {
+      code: "fireEvent.keyDown(document.activeElement, { key: 'DownArrow' })",
+      errors: [
+        {
+          message:
+            "Don't use document.activeElement as a target for keyboard events. Prefer the actual element.",
+          type: 'MemberExpression',
+        },
+      ],
+    },
+    {
+      // test non-null assertion operator
+      code: "import { fireEvent } from '@mui/internal-test-utils';\nfireEvent.keyUp(document.activeElement!, { key: 'LeftArrow' })",
+      errors: [
+        {
+          message:
+            "Don't use document.activeElement as a target for keyboard events. Prefer the actual element.",
+          type: 'TSNonNullExpression',
+        },
+      ],
+    },
+  ],
+});

package/src/eslint/material-ui/rules/disallow-react-api-in-server-components.mjs

@@ -0,0 +1,64 @@
+/// @ts-check
+
+const REACT_CLIENT_APIS = new Set([
+  'useState',
+  'useEffect',
+  'useLayoutEffect',
+  'useReducer',
+  'useTransition',
+  'createContext',
+]);
+
+/**
+ * @param {import('eslint').AST.Program} ast
+ * @param {string} directive
+ * @returns
+ */
+function hasDirective(ast, directive) {
+  return ast.body.some(
+    (statement) =>
+      statement.type === 'ExpressionStatement' &&
+      statement.expression.type === 'Literal' &&
+      statement.expression.value === directive,
+  );
+}
+
+export default /** @type {import('eslint').Rule.RuleModule} */ ({
+  create(context) {
+    let hasUseClientDirective = false;
+    let hasUseServerDirective = false;
+    return {
+      /** @param {import('eslint').AST.Program} node */
+      Program(node) {
+        hasUseServerDirective = hasDirective(node, 'use server');
+        hasUseClientDirective = hasDirective(node, 'use client');
+      },
+      CallExpression(node) {
+        if (
+          !hasUseClientDirective &&
+          node.callee.type === 'MemberExpression' &&
+          node.callee.object.type === 'Identifier' &&
+          node.callee.object.name === 'React' &&
+          node.callee.property.type === 'Identifier' &&
+          REACT_CLIENT_APIS.has(node.callee.property.name)
+        ) {
+          context.report({
+            node,
+            message: `Using 'React.${node.callee.property.name}' is forbidden if the file doesn't have a 'use client' directive.`,
+            fix(fixer) {
+              if (hasUseServerDirective) {
+                return null;
+              }
+
+              const firstToken = context.sourceCode.ast.body[0];
+              return fixer.insertTextBefore(firstToken, "'use client';\n");
+            },
+          });
+        }
+      },
+    };
+  },
+  meta: {
+    fixable: 'code',
+  },
+});

package/src/eslint/material-ui/rules/docgen-ignore-before-comment.mjs

@@ -0,0 +1,34 @@
+export default /** @type {import('eslint').Rule.RuleModule} */ ({
+  meta: {
+    messages: {
+      ignoreBeforeComment: '@ignore should be at the beginning of a block comment.',
+    },
+  },
+  create: (context) => {
+    const { sourceCode } = context;
+    sourceCode.getAllComments().forEach((comment) => {
+      if (comment.type !== 'Block') {
+        return;
+      }
+
+      /**
+       * The regex has 5 groups (mostly for readability) that match:
+       *   1. '/**',
+       *   2. One or more comment lines beginning with '*',
+       *   3. '* @ignore',
+       *   4. Any number of comment lines beginning with '*',
+       *   5. '* /' (without the space).
+       *
+       *   All lines can begin with any number of spaces.
+       */
+      if (comment.value.match(/( *\*\n)( *\*.*\n)+( *\* @ignore\n)( *\*.*\n)*( )/)) {
+        context.report({
+          node: comment,
+          messageId: 'ignoreBeforeComment',
+        });
+      }
+    });
+
+    return {};
+  },
+});

package/src/eslint/material-ui/rules/docgen-ignore-before-comment.test.mjs

@@ -0,0 +1,56 @@
+import eslint from 'eslint';
+import parser from '@typescript-eslint/parser';
+import rule from './docgen-ignore-before-comment.mjs';
+
+const ruleTester = new eslint.RuleTester({
+  languageOptions: {
+    parser,
+  },
+});
+
+ruleTester.run('ignore-before-comment', rule, {
+  valid: [
+    '\n/**\n * @ignore\n */\n',
+    '\n/**\n * @ignore\n * Comment.\n */\n',
+    '\n/**\n * @ignore\n * Multi-line\n * comment.\n */\n',
+    '\n  /**\n   * @ignore\n   * Indented\n   * multi-line\n   * comment.\n   */\n',
+  ],
+  invalid: [
+    {
+      code: '\n/**\n * Comment.\n * @ignore\n */\n',
+      errors: [
+        {
+          message: '@ignore should be at the beginning of a block comment.',
+          type: 'Block',
+        },
+      ],
+    },
+    {
+      code: '\n  /**\n   * Multi-line\n   * comment.\n   * @ignore\n   */\n',
+      errors: [
+        {
+          message: '@ignore should be at the beginning of a block comment.',
+          type: 'Block',
+        },
+      ],
+    },
+    {
+      code: '\n  /**\n   * Multi-line\n   * @ignore\n   * comment.\n   */\n',
+      errors: [
+        {
+          message: '@ignore should be at the beginning of a block comment.',
+          type: 'Block',
+        },
+      ],
+    },
+    {
+      code: '\n  /**\n   * Indented\n   * multi-line\n   * comment.\n   * @ignore\n   */\n',
+      errors: [
+        {
+          message: '@ignore should be at the beginning of a block comment.',
+          type: 'Block',
+        },
+      ],
+    },
+  ],
+});

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

@@ -0,0 +1,161 @@
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
+const rule = {
+  meta: {
+    messages: {
+      nameMismatch: "Expected `name` to be 'Mui{{ componentName }}' but instead got '{{ name }}'.",
+      noComponent: 'Unable to find component for this call.',
+      noNameProperty: 'Unable to find `name` property. Did you forget to pass `name`?',
+      noNameSecondArgument:
+        "Unable to find name argument. Expected `{{ customHook }}(firstParameter, 'MuiComponent')`.",
+      noNameValue:
+        'Unable to resolve `name`. Please hardcode the `name` i.e. use a string literal.',
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          customHooks: {
+            type: 'array',
+            items: {
+              type: 'string',
+            },
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+  },
+  create(context) {
+    const [options = {}] = context.options;
+    const { customHooks = [] } = options;
+
+    /**
+     * Resolves the name literal from the useThemeProps call.
+     * @param {import('estree').CallExpression & import('eslint').Rule.NodeParentExtension} node
+     */
+    function resolveUseThemePropsNameLiteral(node) {
+      const firstArg = /** @type {import('estree').ObjectExpression} */ (node.arguments[0]);
+      if (!firstArg.properties) {
+        return null;
+      }
+      const nameProperty = firstArg.properties.find(
+        (property) =>
+          property.type === 'Property' &&
+          /** @type {import('estree').Identifier} */ (property.key).name === 'name',
+      );
+      if (nameProperty === undefined) {
+        context.report({
+          node: firstArg,
+          messageId: 'noNameProperty',
+        });
+        return null;
+      }
+      if (nameProperty.type === 'Property' && nameProperty.value.type !== 'Literal') {
+        context.report({ node: nameProperty.value, messageId: 'noNameValue' });
+        return null;
+      }
+      return /** @type {import('estree').Property} */ (nameProperty).value;
+    }
+
+    /**
+     * Resolves the name literal from the useThemeProps call.
+     * @param {import('estree').CallExpression & import('eslint').Rule.NodeParentExtension} node
+     */
+    function resolveCustomHookNameLiteral(node) {
+      const secondArgument = node.arguments[1];
+      if (secondArgument === undefined) {
+        context.report({
+          node: node.arguments[0],
+          messageId: 'noNameSecondArgument',
+          data: { customHook: /** @type {import('estree').Identifier} */ (node.callee).name },
+        });
+        return null;
+      }
+      if (secondArgument.type !== 'Literal') {
+        context.report({ node: secondArgument, messageId: 'noNameValue' });
+        return null;
+      }
+      return secondArgument;
+    }
+
+    return {
+      CallExpression(node) {
+        let nameLiteral = null;
+        const callee = /** @type {import('estree').Identifier} */ (node.callee);
+        const isUseDefaultPropsCall =
+          callee.name === 'useDefaultProps' || callee.name === 'useThemeProps';
+        if (isUseDefaultPropsCall) {
+          let isCalledFromCustomHook = false;
+          let { parent } = node;
+          while (parent != null) {
+            if (parent.type === 'FunctionExpression' || parent.type === 'FunctionDeclaration') {
+              if (
+                customHooks.includes(/** @type {import('estree').Identifier} */ (parent.id).name)
+              ) {
+                isCalledFromCustomHook = true;
+              }
+              break;
+            }
+
+            parent = parent.parent;
+          }
+          if (!isCalledFromCustomHook) {
+            nameLiteral = resolveUseThemePropsNameLiteral(node);
+          }
+        } else if (
+          customHooks.includes(/** @type {import('estree').Identifier} */ (node.callee).name)
+        ) {
+          nameLiteral = resolveCustomHookNameLiteral(node);
+        }
+
+        if (nameLiteral !== null) {
+          let componentName = null;
+          let { parent } = node;
+          while (parent != null && componentName === null) {
+            if (parent.type === 'FunctionExpression' || parent.type === 'FunctionDeclaration') {
+              componentName = /** @type {import('estree').Identifier} */ (parent.id).name;
+            }
+
+            if (
+              parent.type === 'VariableDeclarator' &&
+              parent.init &&
+              (parent.init.type === 'CallExpression' || parent.init.type === 'TSAsExpression')
+            ) {
+              const parentCallee =
+                parent.init.type === 'TSAsExpression'
+                  ? /** @type {import('estree').CallExpression} */ (parent.init.expression).callee
+                  : parent.init.callee;
+              if (
+                /** @type {import('estree').Identifier} */ (parentCallee).name.includes(
+                  /** @type {import('estree').Identifier} */ (parent.id).name,
+                )
+              ) {
+                // For component factory, for example const Container = createContainer({ ... })
+                componentName = /** @type {import('estree').Identifier} */ (parent.id).name;
+              }
+            }
+
+            parent = parent.parent;
+          }
+
+          const name = /** @type {string} */ (
+            /** @type {import('estree').Literal} */ (nameLiteral).value
+          );
+          if (componentName === null) {
+            context.report({ node, messageId: 'noComponent' });
+          } else if (name !== `Mui${componentName}`) {
+            context.report({
+              node: nameLiteral,
+              messageId: `nameMismatch`,
+              data: { componentName, name },
+            });
+          }
+        }
+      },
+    };
+  },
+};
+
+export default rule;

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

@@ -0,0 +1,257 @@
+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'.",
+          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>(
+          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'.",
+          type: 'Literal',
+        },
+      ],
+    },
+    {
+      code: 'useDefaultProps({ props: inProps })',
+      errors: [
+        {
+          message: 'Unable to find `name` property. Did you forget to pass `name`?',
+          type: 'ObjectExpression',
+        },
+      ],
+    },
+    {
+      code: 'useDefaultProps({ props: inProps, name })',
+      errors: [
+        {
+          message:
+            'Unable to resolve `name`. Please hardcode the `name` i.e. use a string literal.',
+          type: 'Identifier',
+        },
+      ],
+    },
+    {
+      code: "useDefaultProps({ 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);
+        });
+      `,
+      options: [{ customHooks: ['useDatePickerDefaultizedProps'] }],
+      errors: [
+        {
+          message:
+            "Unable to find name argument. Expected `useDatePickerDefaultizedProps(firstParameter, 'MuiComponent')`.",
+          type: 'Identifier',
+        },
+      ],
+    },
+  ],
+});