[core] Enforce import * as React (#34878)

mui · Oct 31, 2022 · 2a77a33 · 2a77a33
1 parent a0606ca
commit 2a77a33
Show file tree

Hide file tree

Showing 38 changed files with 52 additions and 42 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,4 +1,5 @@
 const path = require('path');
+const { rules: baseStyleRules } = require('eslint-config-airbnb-base/rules/style');
 
 const forbidTopLevelMessage = [
   'Prefer one level nested imports to avoid bundling everything in dev mode',
@@ -19,10 +20,10 @@ module.exports = {
     node: true,
   },
   extends: [
-    'plugin:import/recommended',
-    'plugin:import/typescript',
-    'airbnb-typescript',
-    'prettier',
+    'plugin:eslint-plugin-import/recommended',
+    'plugin:eslint-plugin-import/typescript',
+    'eslint-config-airbnb-typescript',
+    'eslint-config-prettier',
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
@@ -161,6 +162,15 @@ module.exports = {
     'react/static-property-placement': 'off',
     // Currently not in recommended ruleset but catches real bugs.
     'react/no-unstable-nested-components': 'error',
+    'no-restricted-syntax': [
+      // See https://github.com/eslint/eslint/issues/9192 for why it's needed
+      ...baseStyleRules['no-restricted-syntax'],
+      {
+        message:
+          "Do not import default from React. Use a namespace import (import * as React from 'react';) instead.",
+        selector: 'ImportDeclaration[source.value="react"] ImportDefaultSpecifier',
+      },
+    ],
   },
   overrides: [
     {

diff --git a/docs/data/material/components/snackbars/IntegrationNotistack.js b/docs/data/material/components/snackbars/IntegrationNotistack.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import Button from '@mui/material/Button';
 import { SnackbarProvider, useSnackbar } from 'notistack';
 

diff --git a/docs/data/material/components/snackbars/IntegrationNotistack.tsx b/docs/data/material/components/snackbars/IntegrationNotistack.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import Button from '@mui/material/Button';
 import { SnackbarProvider, VariantType, useSnackbar } from 'notistack';
 

diff --git a/examples/gatsby/plugins/gatsby-plugin-mui-emotion/gatsby-browser.js b/examples/gatsby/plugins/gatsby-plugin-mui-emotion/gatsby-browser.js
@@ -1,5 +1,5 @@
 /* eslint-disable import/prefer-default-export */
-import React from 'react';
+import * as React from 'react';
 import { CacheProvider } from '@emotion/react';
 import getEmotionCache from './getEmotionCache';
 

diff --git a/examples/mui-base-with-tailwind-css/src/index.tsx b/examples/mui-base-with-tailwind-css/src/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';

diff --git a/examples/tailwind-css/src/index.tsx b/examples/tailwind-css/src/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { createTheme, StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
 import { CssBaseline } from '@mui/material';

diff --git a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.types.ts b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.types.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { OverrideProps, Simplify } from '@mui/types';
 import { UseButtonParameters, UseButtonRootSlotProps } from './useButton.types';
 import { SlotComponentProps } from '../utils';

diff --git a/packages/mui-base/src/InputUnstyled/InputUnstyled.types.ts b/packages/mui-base/src/InputUnstyled/InputUnstyled.types.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { OverrideProps, Simplify } from '@mui/types';
 import { FormControlUnstyledState } from '../FormControlUnstyled';
 import { UseInputParameters, UseInputRootSlotProps } from './useInput.types';

diff --git a/packages/mui-base/src/ListboxUnstyled/defaultListboxReducer.ts b/packages/mui-base/src/ListboxUnstyled/defaultListboxReducer.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import {
   ListboxState,
   UseListboxPropsWithDefaults,

diff --git a/packages/mui-base/src/MenuUnstyled/MenuUnstyled.types.ts b/packages/mui-base/src/MenuUnstyled/MenuUnstyled.types.ts
@@ -1,5 +1,5 @@
 import { OverrideProps } from '@mui/types';
-import React from 'react';
+import * as React from 'react';
 import PopperUnstyled, { PopperUnstyledProps } from '../PopperUnstyled';
 import { SlotComponentProps } from '../utils';
 import { UseMenuListboxSlotProps } from './useMenu.types';

diff --git a/packages/mui-base/src/ModalUnstyled/ModalUnstyled.types.ts b/packages/mui-base/src/ModalUnstyled/ModalUnstyled.types.ts
@@ -1,5 +1,5 @@
 import { OverridableComponent, OverridableTypeMap, OverrideProps } from '@mui/types';
-import React from 'react';
+import * as React from 'react';
 import { PortalProps } from '../Portal';
 import { SlotComponentProps } from '../utils';
 import { ModalUnstyledClasses } from './modalUnstyledClasses';

diff --git a/packages/mui-base/src/OptionGroupUnstyled/OptionGroupUnstyled.tsx b/packages/mui-base/src/OptionGroupUnstyled/OptionGroupUnstyled.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import { OverridableComponent } from '@mui/types';
 import composeClasses from '../composeClasses';

diff --git a/packages/mui-base/src/OptionGroupUnstyled/OptionGroupUnstyled.types.ts b/packages/mui-base/src/OptionGroupUnstyled/OptionGroupUnstyled.types.ts
@@ -1,5 +1,5 @@
 import { OverrideProps } from '@mui/types';
-import React from 'react';
+import * as React from 'react';
 import { SlotComponentProps } from '../utils';
 
 export interface OptionGroupUnstyledComponentsPropsOverrides {}

diff --git a/packages/mui-base/src/OptionUnstyled/OptionUnstyled.tsx b/packages/mui-base/src/OptionUnstyled/OptionUnstyled.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import { OptionState } from '../ListboxUnstyled';

diff --git a/packages/mui-base/src/OptionUnstyled/OptionUnstyled.types.ts b/packages/mui-base/src/OptionUnstyled/OptionUnstyled.types.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { DefaultComponentProps, OverrideProps, Simplify } from '@mui/types';
 import { OptionState } from '../ListboxUnstyled';
 import { UseSelectOptionSlotProps } from '../SelectUnstyled/useSelect.types';

diff --git a/packages/mui-base/src/SelectUnstyled/useSelect.types.ts b/packages/mui-base/src/SelectUnstyled/useSelect.types.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { UseButtonRootSlotProps } from '../ButtonUnstyled';
 import {
   OptionState,

diff --git a/packages/mui-base/src/SelectUnstyled/utils.tsx b/packages/mui-base/src/SelectUnstyled/utils.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { OptionUnstyledProps } from '../OptionUnstyled';
 import { OptionGroupUnstyledProps } from '../OptionGroupUnstyled';
 import { isOptionGroup, SelectChild, SelectOption, SelectOptionGroup } from './useSelect.types';

diff --git a/packages/mui-base/src/SliderUnstyled/SliderUnstyled.types.ts b/packages/mui-base/src/SliderUnstyled/SliderUnstyled.types.ts
@@ -1,5 +1,5 @@
 import { OverridableComponent, OverridableTypeMap, OverrideProps } from '@mui/types';
-import React from 'react';
+import * as React from 'react';
 import { SlotComponentProps } from '../utils';
 import { SliderUnstyledClasses } from './sliderUnstyledClasses';
 import SliderValueLabelUnstyled from './SliderValueLabelUnstyled';

diff --git a/packages/mui-base/src/SliderUnstyled/useSlider.types.ts b/packages/mui-base/src/SliderUnstyled/useSlider.types.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 export interface UseSliderParameters {
   'aria-labelledby'?: string;

diff --git a/packages/mui-base/src/SnackbarUnstyled/SnackbarUnstyled.types.ts b/packages/mui-base/src/SnackbarUnstyled/SnackbarUnstyled.types.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { OverrideProps } from '@mui/types';
 import ClickAwayListener, { ClickAwayListenerProps } from '../ClickAwayListener';
 import { UseSnackbarParameters } from './useSnackbar.types';

diff --git a/packages/mui-base/src/SwitchUnstyled/useSwitch.test.tsx b/packages/mui-base/src/SwitchUnstyled/useSwitch.test.tsx
@@ -1,5 +1,5 @@
 import { expect } from 'chai';
-import React from 'react';
+import * as React from 'react';
 import { spy } from 'sinon';
 import {
   act,

diff --git a/packages/mui-base/src/SwitchUnstyled/useSwitch.types.ts b/packages/mui-base/src/SwitchUnstyled/useSwitch.types.ts
@@ -1,4 +1,4 @@
-import React, { HTMLInputTypeAttribute } from 'react';
+import * as React from 'react';
 
 export interface UseSwitchParameters {
   /**
@@ -44,7 +44,7 @@ interface UseSwitchInputSlotOwnProps {
   readOnly?: boolean;
   ref: React.Ref<any>;
   required?: boolean;
-  type: HTMLInputTypeAttribute;
+  type: React.HTMLInputTypeAttribute;
 }
 
 export type UseSwitchInputSlotProps<TOther = {}> = Omit<TOther, keyof UseSwitchInputSlotOwnProps> &

diff --git a/packages/mui-base/src/TabUnstyled/TabUnstyled.types.ts b/packages/mui-base/src/TabUnstyled/TabUnstyled.types.ts
@@ -1,5 +1,5 @@
 import { OverrideProps, Simplify } from '@mui/types';
-import React from 'react';
+import * as React from 'react';
 import { ButtonUnstyledOwnProps } from '../ButtonUnstyled';
 import { SlotComponentProps } from '../utils';
 import { UseTabRootSlotProps } from './useTab.types';

diff --git a/packages/mui-base/src/TabUnstyled/useTab.types.ts b/packages/mui-base/src/TabUnstyled/useTab.types.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { UseButtonRootSlotProps } from '../ButtonUnstyled';
 
 export interface UseTabParameters {

diff --git a/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.types.ts b/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.types.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { OverrideProps } from '@mui/types';
 import { UseTabsListRootSlotProps } from './useTabsList.types';
 import { SlotComponentProps } from '../utils';

diff --git a/packages/mui-base/src/TabsUnstyled/TabsUnstyled.types.ts b/packages/mui-base/src/TabsUnstyled/TabsUnstyled.types.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { OverrideProps } from '@mui/types';
 import { SlotComponentProps } from '../utils';
 

diff --git a/packages/mui-base/src/utils/isHostComponent.ts b/packages/mui-base/src/utils/isHostComponent.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 /**
  * Determines if a given element is a DOM element name (i.e. not a React component).

diff --git a/packages/mui-base/src/utils/useSlotProps.test.tsx b/packages/mui-base/src/utils/useSlotProps.test.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { EventHandlers } from '@mui/base';

diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/actual-todo-comments.js b/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/actual-todo-comments.js
@@ -6,7 +6,7 @@ import clsx from "clsx";
 /*
 Comments that should not be lost when the clsx import comments are preserved.
  */
-import React from "react";
+import * as React from "react";
 import { makeStyles } from "@material-ui/core";
 
 const useStyles = makeStyles(() => ({

diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-todo-comments.js b/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-todo-comments.js
@@ -5,7 +5,7 @@ any comments that they get combined with.
 /*
 Comments that should not be lost when the clsx import comments are preserved.
  */
-import React from "react";
+import * as React from "react";
 import { makeStyles } from 'tss-react/mui';
 
 // TODO jss-to-tss-react codemod: Unable to handle style definition reliably. ArrowFunctionExpression in CSS prop.

diff --git a/packages/mui-joy/src/Button/ButtonProps.ts b/packages/mui-joy/src/Button/ButtonProps.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import {
   OverridableComponent,
   OverridableStringUnion,

diff --git a/packages/mui-joy/src/Grid/GridProps.ts b/packages/mui-joy/src/Grid/GridProps.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { OverrideProps } from '@mui/types';
 import { GridBaseProps } from '@mui/system/Unstable_Grid';
 import { SxProps, SystemProps } from '../styles/types';

diff --git a/packages/mui-joy/src/IconButton/IconButtonProps.ts b/packages/mui-joy/src/IconButton/IconButtonProps.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import {
   OverridableComponent,
   OverridableStringUnion,

diff --git a/packages/mui-joy/src/Input/InputProps.ts b/packages/mui-joy/src/Input/InputProps.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { OverridableStringUnion, OverrideProps } from '@mui/types';
 import { SlotComponentProps } from '@mui/base/utils';
 import { ColorPaletteProp, VariantProp, SxProps, ApplyColorInversion } from '../styles/types';

diff --git a/packages/mui-joy/src/Link/LinkProps.ts b/packages/mui-joy/src/Link/LinkProps.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { OverridableStringUnion, OverrideProps } from '@mui/types';
 import { SlotComponentProps } from '@mui/base/utils';
 import {

diff --git a/packages/mui-joy/src/Select/SelectProps.ts b/packages/mui-joy/src/Select/SelectProps.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { OverridableStringUnion, OverrideProps } from '@mui/types';
 import { SelectUnstyledCommonProps, SelectOption } from '@mui/base/SelectUnstyled';
 import { PopperUnstyledOwnProps } from '@mui/base/PopperUnstyled';

diff --git a/packages/mui-joy/src/Textarea/TextareaProps.ts b/packages/mui-joy/src/Textarea/TextareaProps.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { OverridableStringUnion, OverrideProps } from '@mui/types';
 import { SlotComponentProps } from '@mui/base/utils';
 import { ColorPaletteProp, VariantProp, SxProps, ApplyColorInversion } from '../styles/types';

diff --git a/packages/mui-material/src/Unstable_Grid2/Grid2Props.ts b/packages/mui-material/src/Unstable_Grid2/Grid2Props.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { OverrideProps } from '@mui/types';
 import { SxProps, SystemProps } from '@mui/system';
 import { GridBaseProps } from '@mui/system/Unstable_Grid';