Code Quality: Restrict usage of direct React imports (#28278)

.eslintrc.js

@@ -63,6 +63,11 @@ module.exports = {
 						importNames: [ 'memoize' ],
 						message: 'Please use `memize` instead.',
 					},
+					{
+						name: 'react',
+						message:
+							'Please use React API through `@wordpress/element` instead.',
+					},
 					{
 						name: 'reakit',
 						message:

packages/block-editor/src/components/block-media-update-progress/index.native.js

@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import { View } from 'react-native';
 
 /**
  * WordPress dependencies
  */
+import { Component } from '@wordpress/element';
 import { Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
@@ -31,7 +31,7 @@ export const MEDIA_SAVE_STATE_RESET = 8;
 export const MEDIA_SAVE_FINAL_STATE_RESULT = 9;
 export const MEDIA_SAVE_MEDIAID_CHANGED = 10;
 
-export class BlockMediaUpdateProgress extends React.Component {
+export class BlockMediaUpdateProgress extends Component {
 	constructor( props ) {
 		super( props );
 

packages/block-editor/src/components/inspector-controls/index.native.js

@@ -1,12 +1,14 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import { View } from 'react-native';
+
 /**
  * WordPress dependencies
  */
+import { Children } from '@wordpress/element';
 import { createSlotFill, BottomSheetConsumer } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
@@ -30,7 +32,7 @@ const FillWithSettingsButton = ( { children, ...props } ) => {
 					</BottomSheetConsumer>
 				}
 			</Fill>
-			{ React.Children.count( children ) > 0 && <BlockSettingsButton /> }
+			{ Children.count( children ) > 0 && <BlockSettingsButton /> }
 		</>
 	);
 };

packages/block-editor/src/components/media-upload-progress/index.native.js

@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import { View } from 'react-native';
 
 /**
  * WordPress dependencies
  */
+import { Component } from '@wordpress/element';
 import { Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { subscribeMediaUpload } from '@wordpress/react-native-bridge';
@@ -21,7 +21,7 @@ export const MEDIA_UPLOAD_STATE_SUCCEEDED = 2;
 export const MEDIA_UPLOAD_STATE_FAILED = 3;
 export const MEDIA_UPLOAD_STATE_RESET = 4;
 
-export class MediaUploadProgress extends React.Component {
+export class MediaUploadProgress extends Component {
 	constructor( props ) {
 		super( props );
 

packages/block-editor/src/components/media-upload/index.native.js

@@ -1,11 +1,7 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * WordPress dependencies
  */
+import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Picker } from '@wordpress/components';
 import {
@@ -29,7 +25,7 @@ export const OPTION_TAKE_VIDEO = __( 'Take a Video' );
 export const OPTION_TAKE_PHOTO = __( 'Take a Photo' );
 export const OPTION_TAKE_PHOTO_OR_VIDEO = __( 'Take a Photo or Video' );
 
-export class MediaUpload extends React.Component {
+export class MediaUpload extends Component {
 	constructor( props ) {
 		super( props );
 		this.onPickerPresent = this.onPickerPresent.bind( this );

packages/block-library/src/file/edit.native.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { View, Clipboard, TouchableWithoutFeedback, Text } from 'react-native';
-import React from 'react';
 
 /**
  * WordPress dependencies

packages/block-library/src/image/edit.native.js

@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import { View, TouchableWithoutFeedback } from 'react-native';
 import { isEmpty, get, find, map } from 'lodash';
 
 /**
  * WordPress dependencies
  */
+import { Component } from '@wordpress/element';
 import {
 	requestMediaImport,
 	mediaUploadSync,
@@ -61,7 +61,7 @@ const getUrlForSlug = ( image, { sizeSlug } ) => {
 	return get( image, [ 'media_details', 'sizes', sizeSlug, 'source_url' ] );
 };
 
-export class ImageEdit extends React.Component {
+export class ImageEdit extends Component {
 	constructor( props ) {
 		super( props );
 

packages/block-library/src/video/edit.native.js

@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import { View, TouchableWithoutFeedback, Text } from 'react-native';
 import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
  */
+import { Component } from '@wordpress/element';
 import {
 	mediaUploadSync,
 	requestImageFailedRetryDialog,
@@ -49,7 +49,7 @@ const ICON_TYPE = {
 	UPLOAD: 'upload',
 };
 
-class VideoEdit extends React.Component {
+class VideoEdit extends Component {
 	constructor( props ) {
 		super( props );
 

packages/components/src/color-picker/index.native.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { View, Text, TouchableWithoutFeedback, Platform } from 'react-native';
-import React from 'react';
 import HsvColorPicker from 'react-native-hsv-color-picker';
 import tinycolor from 'tinycolor2';
 /**

packages/components/src/mobile/bottom-sheet/keyboard-avoiding-view.native.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import {
 	Keyboard,
 	LayoutAnimation,
@@ -11,14 +10,19 @@ import {
 	Dimensions,
 } from 'react-native';
 
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+
 /**
  * This is a simplified version of Facebook's KeyboardAvoidingView.
  * It's meant to work specifically with BottomSheets.
  * This fixes an issue in the bottom padding calculation, when the
  * BottomSheet was presented on Landscape, with the keyboard already present,
  * and a TextField on Autofocus (situation present on Links UI)
  */
-class KeyboardAvoidingView extends React.Component {
+class KeyboardAvoidingView extends Component {
 	constructor() {
 		super( ...arguments );
 

packages/components/src/mobile/color-settings/index.native.js

@@ -1,14 +1,13 @@
 /**
  * External dependencies
  */
-import React from 'react';
+import { useRoute } from '@react-navigation/native';
 
 /**
  * WordPress dependencies
  */
-import { useEffect, useContext } from '@wordpress/element';
+import { memo, useEffect, useContext } from '@wordpress/element';
 import { BottomSheetContext, BottomSheet } from '@wordpress/components';
-import { useRoute } from '@react-navigation/native';
 
 /**
  * Internal dependencies
@@ -19,7 +18,7 @@ import PaletteScreen from './palette.screen';
 
 import { colorsUtils } from './utils';
 
-const ColorSettingsMemo = React.memo(
+const ColorSettingsMemo = memo(
 	( {
 		defaultSettings,
 		onHandleClosingBottomSheet,

packages/components/src/mobile/color-settings/picker-screen.native.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { useRoute, useNavigation } from '@react-navigation/native';
-import React from 'react';
 
 /**
  * WordPress dependencies

packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js

@@ -1,15 +1,16 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import { FlatList } from 'react-native';
 import { isEqual } from 'lodash';
+
 /**
  * WordPress dependencies
  */
+import { memo } from '@wordpress/element';
 
-const List = React.memo( FlatList, isEqual );
+const List = memo( FlatList, isEqual );
 
 export const KeyboardAwareFlatList = ( {
 	extraScrollHeight,

packages/components/src/mobile/link-picker/index.native.js

@@ -1,14 +1,13 @@
 /**
  * External dependencies
  */
-import { useState } from 'react';
 import { SafeAreaView, TouchableOpacity, View } from 'react-native';
 import { lowerCase, startsWith } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { BottomSheet, Icon } from '@wordpress/components';
 import { getProtocol, prependHTTP } from '@wordpress/url';

packages/components/src/mobile/link-picker/link-picker-screen.native.js

@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import { useNavigation, useRoute } from '@react-navigation/native';
+
 /**
  * WordPress dependencies
  */

packages/components/src/mobile/link-settings/link-settings-screen.native.js

@@ -1,12 +1,13 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import { useNavigation, useRoute } from '@react-navigation/native';
+
 /**
  * WordPress dependencies
  */
 import { useMemo } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */

packages/components/src/mobile/media-edit/index.native.js

@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import { compact } from 'lodash';
 
 /**
  * WordPress dependencies
  */
+import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Picker } from '@wordpress/components';
 import {
@@ -32,7 +32,7 @@ const replaceOption = {
 	types: [ MEDIA_TYPE_IMAGE ],
 };
 
-export class MediaEdit extends React.Component {
+export class MediaEdit extends Component {
 	constructor( props ) {
 		super( props );
 		this.onPickerPresent = this.onPickerPresent.bind( this );

packages/components/src/mobile/picker/index.android.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import { View } from 'react-native';
 
 /**

packages/edit-post/src/components/header/header-toolbar/index.native.js

@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import { useRef } from 'react';
 import { ScrollView, View } from 'react-native';
 
 /**
  * WordPress dependencies
  */
+import { useRef } from '@wordpress/element';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { withViewportMatch } from '@wordpress/viewport';

packages/edit-post/src/components/visual-editor/header.native.js

@@ -1,10 +1,7 @@
-/**
- * External dependencies
- */
-import React from 'react';
 /**
  * WordPress dependencies
  */
+import { memo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
@@ -16,7 +13,7 @@ import { ReadableContentView } from '@wordpress/components';
  */
 import styles from './style.scss';
 
-const Header = React.memo(
+const Header = memo(
 	function EditorHeader( {
 		editTitle,
 		setTitleRef,

packages/element/src/create-interpolate-element.js

@@ -1,7 +1,7 @@
 /**
- * External dependencies
+ * Internal dependencies
  */
-import { createElement, cloneElement, Fragment, isValidElement } from 'react';
+import { createElement, cloneElement, Fragment, isValidElement } from './react';
 
 /** @typedef {import('./react').WPElement} WPElement */
 

packages/element/src/react.js

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+// eslint-disable-next-line no-restricted-imports
 import {
 	Children,
 	cloneElement,

packages/format-library/src/link/modal-screens/link-picker-screen.native.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import { Platform, Keyboard } from 'react-native';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import { delay } from 'lodash';

packages/format-library/src/link/modal-screens/link-settings-screen.native.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import { useNavigation, useRoute } from '@react-navigation/native';
 /**
  * WordPress dependencies