From 7e6c839617ee1eae5fa56f2c8178715a38ed807e Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Mon, 18 Jan 2021 12:02:17 +0100 Subject: [PATCH] Code Quality: Restrict usage of direct React imports --- .eslintrc.js | 5 ++ .../index.native.js | 4 +- .../inspector-controls/index.native.js | 6 +- .../media-upload-progress/index.native.js | 4 +- .../components/media-upload/index.native.js | 8 +- .../block-library/src/file/edit.native.js | 1 - .../block-library/src/image/edit.native.js | 4 +- .../block-library/src/video/edit.native.js | 4 +- .../src/color-picker/index.native.js | 1 - .../keyboard-avoiding-view.native.js | 8 +- .../src/mobile/color-settings/index.native.js | 7 +- .../color-settings/picker-screen.native.js | 1 - .../keyboard-aware-flat-list/index.ios.js | 5 +- .../src/mobile/link-picker/index.native.js | 3 +- .../link-picker/link-picker-screen.native.js | 2 +- .../link-settings-screen.native.js | 3 +- .../src/mobile/media-edit/index.native.js | 4 +- .../src/mobile/picker/index.android.js | 1 - .../header/header-toolbar/index.native.js | 2 +- .../components/visual-editor/header.native.js | 7 +- .../element/src/create-interpolate-element.js | 4 +- packages/element/src/react.js | 1 + .../link-picker-screen.native.js | 1 - .../link-settings-screen.native.js | 1 - .../format-library/src/link/modal.native.js | 4 - packages/react-native-aztec/package.json | 81 ++++++++++--------- packages/react-native-aztec/src/AztecView.js | 4 +- .../__mocks__/react-native-aztec/index.js | 6 +- 28 files changed, 89 insertions(+), 93 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 5e20681906c42..37a4ede7f353c 100644 --- a/.eslintrc.js +++ b/.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: diff --git a/packages/block-editor/src/components/block-media-update-progress/index.native.js b/packages/block-editor/src/components/block-media-update-progress/index.native.js index 279ef17d6e998..c3f05ddd29349 100644 --- a/packages/block-editor/src/components/block-media-update-progress/index.native.js +++ b/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 ); diff --git a/packages/block-editor/src/components/inspector-controls/index.native.js b/packages/block-editor/src/components/inspector-controls/index.native.js index 6c3e2026ddb80..4385ca69bce4d 100644 --- a/packages/block-editor/src/components/inspector-controls/index.native.js +++ b/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 } ) => { } - { React.Children.count( children ) > 0 && } + { Children.count( children ) > 0 && } ); }; diff --git a/packages/block-editor/src/components/media-upload-progress/index.native.js b/packages/block-editor/src/components/media-upload-progress/index.native.js index b0890e95df583..97c9bef5ef951 100644 --- a/packages/block-editor/src/components/media-upload-progress/index.native.js +++ b/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 ); diff --git a/packages/block-editor/src/components/media-upload/index.native.js b/packages/block-editor/src/components/media-upload/index.native.js index 1147289c8d6b1..dd3896cfdcbb8 100644 --- a/packages/block-editor/src/components/media-upload/index.native.js +++ b/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 ); diff --git a/packages/block-library/src/file/edit.native.js b/packages/block-library/src/file/edit.native.js index 062270b322a58..f40720f9a96bb 100644 --- a/packages/block-library/src/file/edit.native.js +++ b/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 diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index eb398aba372ee..0f19daa830d30 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/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 ); diff --git a/packages/block-library/src/video/edit.native.js b/packages/block-library/src/video/edit.native.js index b1638fcdc70de..5ceb727040470 100644 --- a/packages/block-library/src/video/edit.native.js +++ b/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 ); diff --git a/packages/components/src/color-picker/index.native.js b/packages/components/src/color-picker/index.native.js index 27682f7ff2542..f41ae88cbba9f 100644 --- a/packages/components/src/color-picker/index.native.js +++ b/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'; /** diff --git a/packages/components/src/mobile/bottom-sheet/keyboard-avoiding-view.native.js b/packages/components/src/mobile/bottom-sheet/keyboard-avoiding-view.native.js index 644c449fbd4b5..df75c5d78e9c2 100644 --- a/packages/components/src/mobile/bottom-sheet/keyboard-avoiding-view.native.js +++ b/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,6 +10,11 @@ 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. @@ -18,7 +22,7 @@ import { * 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 ); diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index ec8be2ac573c6..2b898b7c63f90 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/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, diff --git a/packages/components/src/mobile/color-settings/picker-screen.native.js b/packages/components/src/mobile/color-settings/picker-screen.native.js index 3d11cbae38a82..edb7d260e86d9 100644 --- a/packages/components/src/mobile/color-settings/picker-screen.native.js +++ b/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 diff --git a/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js b/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js index 755ef5453ef86..a37edf9fdd009 100644 --- a/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js +++ b/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, diff --git a/packages/components/src/mobile/link-picker/index.native.js b/packages/components/src/mobile/link-picker/index.native.js index 1374cd0483cbd..a007795a37450 100644 --- a/packages/components/src/mobile/link-picker/index.native.js +++ b/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'; diff --git a/packages/components/src/mobile/link-picker/link-picker-screen.native.js b/packages/components/src/mobile/link-picker/link-picker-screen.native.js index 3301779646c01..7119fbfe0c322 100644 --- a/packages/components/src/mobile/link-picker/link-picker-screen.native.js +++ b/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 */ diff --git a/packages/components/src/mobile/link-settings/link-settings-screen.native.js b/packages/components/src/mobile/link-settings/link-settings-screen.native.js index c66892c9926c4..105bf553ea70c 100644 --- a/packages/components/src/mobile/link-settings/link-settings-screen.native.js +++ b/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 */ diff --git a/packages/components/src/mobile/media-edit/index.native.js b/packages/components/src/mobile/media-edit/index.native.js index c098a9e3bcc1a..1e2ab90cd0b9e 100644 --- a/packages/components/src/mobile/media-edit/index.native.js +++ b/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 ); diff --git a/packages/components/src/mobile/picker/index.android.js b/packages/components/src/mobile/picker/index.android.js index 2f727b2b92a9b..b536dc2aed9c0 100644 --- a/packages/components/src/mobile/picker/index.android.js +++ b/packages/components/src/mobile/picker/index.android.js @@ -1,7 +1,6 @@ /** * External dependencies */ -import React from 'react'; import { View } from 'react-native'; /** diff --git a/packages/edit-post/src/components/header/header-toolbar/index.native.js b/packages/edit-post/src/components/header/header-toolbar/index.native.js index 26c0717b4f05f..450ec38d48adc 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.native.js +++ b/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'; diff --git a/packages/edit-post/src/components/visual-editor/header.native.js b/packages/edit-post/src/components/visual-editor/header.native.js index de04e09b4fca6..36995825499ff 100644 --- a/packages/edit-post/src/components/visual-editor/header.native.js +++ b/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, diff --git a/packages/element/src/create-interpolate-element.js b/packages/element/src/create-interpolate-element.js index d3da32354bb11..8eb6d73cbd2e3 100644 --- a/packages/element/src/create-interpolate-element.js +++ b/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 */ diff --git a/packages/element/src/react.js b/packages/element/src/react.js index 78752a1b5a179..f21fe4574c24f 100644 --- a/packages/element/src/react.js +++ b/packages/element/src/react.js @@ -1,6 +1,7 @@ /** * External dependencies */ +// eslint-disable-next-line no-restricted-imports import { Children, cloneElement, diff --git a/packages/format-library/src/link/modal-screens/link-picker-screen.native.js b/packages/format-library/src/link/modal-screens/link-picker-screen.native.js index 30d0894281992..21fc37563fbc6 100644 --- a/packages/format-library/src/link/modal-screens/link-picker-screen.native.js +++ b/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'; diff --git a/packages/format-library/src/link/modal-screens/link-settings-screen.native.js b/packages/format-library/src/link/modal-screens/link-settings-screen.native.js index b4bba800d69fe..70c51e326665b 100644 --- a/packages/format-library/src/link/modal-screens/link-settings-screen.native.js +++ b/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 diff --git a/packages/format-library/src/link/modal.native.js b/packages/format-library/src/link/modal.native.js index 666547090bf05..e3a52bb5a29ba 100644 --- a/packages/format-library/src/link/modal.native.js +++ b/packages/format-library/src/link/modal.native.js @@ -1,7 +1,3 @@ -/** - * External dependencies - */ -import React from 'react'; /** * WordPress dependencies */ diff --git a/packages/react-native-aztec/package.json b/packages/react-native-aztec/package.json index a865fce0f7872..640bd587fd789 100644 --- a/packages/react-native-aztec/package.json +++ b/packages/react-native-aztec/package.json @@ -1,42 +1,43 @@ { - "name": "@wordpress/react-native-aztec", - "version": "1.44.0", - "description": "Aztec view for react-native.", - "private": true, - "author": "The WordPress Contributors", - "license": "GPL-2.0-or-later", - "keywords": [ - "wordpress", - "react-native" - ], - "homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/react-native-aztec/README.md", - "repository": { - "type": "git", - "url": "https://github.com/WordPress/gutenberg.git", - "directory": "packages/react-native-aztec" - }, - "bugs": { - "url": "https://github.com/WordPress/gutenberg/issues" - }, - "dependencies": { - "@wordpress/keycodes": "file:../keycodes" - }, - "peerDependencies": { - "react": "*", - "react-native": "*" - }, - "publishConfig": { - "access": "public" - }, - "scripts": { - "install-aztec-ios": "cd ./ios && carthage bootstrap --platform iOS --cache-builds", - "update-aztec-ios": "cd ./ios && carthage update --platform iOS --cache-builds", - "clean": "npm run clean-watchman; npm run clean-node; npm run clean-react; npm run clean-metro; npm run clean-jest;", - "clean-jest": "rm -rf $TMPDIR/jest_*;", - "clean-metro": "rm -rf $TMPDIR/metro-cache-*; rm -rf $TMPDIR/metro-bundler-cache-*;", - "clean-node": "rm -rf node_modules/;", - "clean-react": "rm -rf $TMPDIR/react-*; rm -rf $TMPDIR/react-native-packager-cache-*;", - "clean-watchman": "command -v watchman >/dev/null 2>&1 && watchman watch-del-all;", - "clean:install": "npm run clean && npm install" - } + "name": "@wordpress/react-native-aztec", + "version": "1.44.0", + "description": "Aztec view for react-native.", + "private": true, + "author": "The WordPress Contributors", + "license": "GPL-2.0-or-later", + "keywords": [ + "wordpress", + "react-native" + ], + "homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/react-native-aztec/README.md", + "repository": { + "type": "git", + "url": "https://github.com/WordPress/gutenberg.git", + "directory": "packages/react-native-aztec" + }, + "bugs": { + "url": "https://github.com/WordPress/gutenberg/issues" + }, + "dependencies": { + "@wordpress/element": "file:../element", + "@wordpress/keycodes": "file:../keycodes" + }, + "peerDependencies": { + "react": "*", + "react-native": "*" + }, + "publishConfig": { + "access": "public" + }, + "scripts": { + "install-aztec-ios": "cd ./ios && carthage bootstrap --platform iOS --cache-builds", + "update-aztec-ios": "cd ./ios && carthage update --platform iOS --cache-builds", + "clean": "npm run clean-watchman; npm run clean-node; npm run clean-react; npm run clean-metro; npm run clean-jest;", + "clean-jest": "rm -rf $TMPDIR/jest_*;", + "clean-metro": "rm -rf $TMPDIR/metro-cache-*; rm -rf $TMPDIR/metro-bundler-cache-*;", + "clean-node": "rm -rf node_modules/;", + "clean-react": "rm -rf $TMPDIR/react-*; rm -rf $TMPDIR/react-native-packager-cache-*;", + "clean-watchman": "command -v watchman >/dev/null 2>&1 && watchman watch-del-all;", + "clean:install": "npm run clean && npm install" + } } diff --git a/packages/react-native-aztec/src/AztecView.js b/packages/react-native-aztec/src/AztecView.js index 2e6686ce222bb..9e92034710e11 100644 --- a/packages/react-native-aztec/src/AztecView.js +++ b/packages/react-native-aztec/src/AztecView.js @@ -1,7 +1,6 @@ /** * External dependencies */ -import React from 'react'; import ReactNative, { requireNativeComponent, UIManager, @@ -12,11 +11,12 @@ import TextInputState from 'react-native/Libraries/Components/TextInput/TextInpu /** * WordPress dependencies */ +import { Component } from '@wordpress/element'; import { ENTER, BACKSPACE } from '@wordpress/keycodes'; const AztecManager = UIManager.getViewManagerConfig( 'RCTAztecView' ); -class AztecView extends React.Component { +class AztecView extends Component { constructor() { super( ...arguments ); this._onContentSizeChange = this._onContentSizeChange.bind( this ); diff --git a/test/native/__mocks__/react-native-aztec/index.js b/test/native/__mocks__/react-native-aztec/index.js index 4d963f6ff8064..6f0797e23d820 100644 --- a/test/native/__mocks__/react-native-aztec/index.js +++ b/test/native/__mocks__/react-native-aztec/index.js @@ -1,9 +1,9 @@ /** - * External dependencies + * WordPress dependencies */ -import React from 'react'; +import { Component } from '@wordpress/element'; -class AztecView extends React.Component { +class AztecView extends Component { blur = () => {}; focus = () => {};