[code-infra] Add "use client" directive to files with React APIs (#45036

)

.eslintrc.js

@@ -408,6 +408,21 @@ module.exports = /** @type {Config} */ ({
         'react/prop-types': 'off',
       },
     },
+    {
+      files: ['packages/*/src/*/*.?(c|m)[jt]s?(x)'],
+      excludedFiles: [
+        '*.spec.*',
+        '*.test.*',
+        // deprecated library
+        '**/mui-base/**/*',
+        '**/mui-joy/**/*',
+        // used internally, not used on app router yet
+        '**/mui-docs/**/*',
+      ],
+      rules: {
+        'material-ui/disallow-react-api-in-server-components': 'error',
+      },
+    },
     {
       files: ['packages/*/src/**/*.?(c|m)[jt]s?(x)'],
       excludedFiles: '*.spec.*',

packages/eslint-plugin-material-ui/src/index.js

@@ -8,4 +8,5 @@ module.exports.rules = {
   'no-empty-box': require('./rules/no-empty-box'),
   'no-styled-box': require('./rules/no-styled-box'),
   'straight-quotes': require('./rules/straight-quotes'),
+  'disallow-react-api-in-server-components': require('./rules/disallow-react-api-in-server-components'),
 };

packages/eslint-plugin-material-ui/src/rules/disallow-react-api-in-server-components.js

@@ -0,0 +1,51 @@
+module.exports = {
+  create(context) {
+    let hasUseClientDirective = false;
+    const apis = new Set([
+      'useState',
+      'useEffect',
+      'useLayoutEffect',
+      'useReducer',
+      'useTransition',
+      'createContext',
+    ]);
+    return {
+      Program(node) {
+        hasUseClientDirective = node.body.some(
+          (statement) =>
+            statement.type === 'ExpressionStatement' &&
+            statement.expression.type === 'Literal' &&
+            statement.expression.value === 'use client',
+        );
+      },
+      CallExpression(node) {
+        if (
+          !hasUseClientDirective &&
+          node.callee.type === 'MemberExpression' &&
+          node.callee.object.name === 'React' &&
+          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) {
+              const sourceCode = context.getSourceCode();
+              if (
+                sourceCode.text.includes('"use server"') ||
+                sourceCode.text.includes("'use server'")
+              ) {
+                return null;
+              }
+
+              const firstToken = sourceCode.ast.body[0];
+              return fixer.insertTextBefore(firstToken, "'use client';\n");
+            },
+          });
+        }
+      },
+    };
+  },
+  meta: {
+    fixable: 'code',
+  },
+};

packages/mui-lab/src/Timeline/TimelineContext.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 /**

packages/mui-material/src/ButtonGroup/ButtonGroupButtonContext.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 type ButtonPositionClassName = string;

packages/mui-material/src/ButtonGroup/ButtonGroupContext.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import type { ButtonGroupProps } from './ButtonGroup';
 

packages/mui-material/src/Dialog/DialogContext.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 interface DialogContextValue {

packages/mui-material/src/FormControl/FormControlContext.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import type { FormControlProps } from './FormControl';
 

packages/mui-material/src/Hidden/withWidth.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import getDisplayName from '@mui/utils/getDisplayName';

packages/mui-material/src/RadioGroup/RadioGroupContext.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 export interface RadioGroupContextValue {

packages/mui-material/src/Step/StepContext.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 export interface StepContextType {

packages/mui-material/src/Stepper/StepperContext.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 export interface StepperContextType {

packages/mui-material/src/Table/Tablelvl2Context.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 /**

packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroupButtonContext.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 type ToggleButtonPositionClassName = string;

packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroupContext.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import type { ToggleButtonGroupProps } from './ToggleButtonGroup';
 

packages/mui-private-theming/src/useTheme/ThemeContext.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 const ThemeContext = React.createContext(null);

packages/mui-styles/src/StylesProvider/StylesProvider.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { exactProp } from '@mui/utils';

packages/mui-styles/src/makeStyles/makeStyles.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { getDynamicStyles } from 'jss';
 import mergeClasses from '../mergeClasses';

packages/mui-system/src/RtlProvider/index.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 

packages/mui-system/src/cssVars/createCssVarsProvider.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles } from '@mui/styled-engine';