Migrate to import * as React from 'react';

Ref facebook/react#18102

Also migrated from `import { type Node } from 'react';` to `React.Node`
as more explicit because `Node` is also DOM type and may conflict when
import is forgotted.

Author: TrySound

csp-server/app.jsx

@@ -2,7 +2,8 @@
 // It matches
 /* eslint-disable flowtype/require-valid-file-annotation */
 
-import React, { Component } from 'react';
+import * as React from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { DragDropContext, Droppable, Draggable } from '../src';
 

csp-server/client.js

@@ -1,7 +1,7 @@
 // @flow
 /* eslint-env browser */
 
-import React from 'react';
+import * as React from 'react';
 import { hydrate } from 'react-dom';
 import Sample from './app';
 

csp-server/server.js

@@ -1,6 +1,6 @@
 // @flow
 import express from 'express';
-import React from 'react';
+import * as React from 'react';
 import { renderToString } from 'react-dom/server';
 import { resolve } from 'path';
 import App from './app';

docs/api/drag-drop-context.md

@@ -43,7 +43,7 @@ type Props = {|
 ### Using a `class` component
 
 ```js
-import React from 'react';
+import * as React from 'react';
 import { DragDropContext } from 'react-beautiful-dnd';
 
 class App extends React.Component {
@@ -84,7 +84,7 @@ class App extends React.Component {
 ### Using a `function` component
 
 ```js
-import React from 'react';
+import * as React from 'react';
 import { DragDropContext } from 'react-beautiful-dnd';
 
 function App() {

docs/api/droppable.md

@@ -220,15 +220,15 @@ When a user drags over, or stops dragging over, a `<Droppable />` we re-render t
 Here is an example of how you could do this using `class` components:
 
 ```js
-import React, { Component } from 'react';
+import * as React from 'react';
 
-class Student extends Component<{ student: Person }> {
+class Student extends React.Component<{ student: Person }> {
   render() {
     // Renders out a draggable student
   }
 }
 
-class InnerList extends Component<{ students: Person[] }> {
+class InnerList extends React.Component<{ students: Person[] }> {
   // do not re-render if the students list has not changed
   shouldComponentUpdate(nextProps: Props) {
     if (this.props.students === nextProps.students) {
@@ -246,7 +246,7 @@ class InnerList extends Component<{ students: Person[] }> {
   }
 }
 
-class Students extends Component<{ students: Person[] }> {
+class Students extends React.Component<{ students: Person[] }> {
   render() {
     return (
       <Droppable droppableId="list">
@@ -271,7 +271,7 @@ class Students extends Component<{ students: Person[] }> {
 Here is an example of how you could do this using `function` components:
 
 ```js
-import React from 'react';
+import * as React from 'react';
 
 function Student (props: { student: Person }) {
   // Renders out a draggable student

src/view/animate-in-out/animate-in-out.jsx

@@ -1,5 +1,5 @@
 // @flow
-import React, { type Node } from 'react';
+import * as React from 'react';
 import type { InOutAnimationMode } from '../../types';
 
 export type AnimateProvided = {|
@@ -11,7 +11,7 @@ export type AnimateProvided = {|
 type Props = {|
   on: mixed,
   shouldAnimate: boolean,
-  children: (provided: AnimateProvided) => Node,
+  children: (provided: AnimateProvided) => React.Node,
 |};
 
 type State = {|

src/view/context/app-context.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import type { DraggableId, ContextId, ElementId } from '../../types';
 import type { DimensionMarshal } from '../../state/dimension-marshal/dimension-marshal-types';
 import type { FocusMarshal } from '../use-focus-marshal/focus-marshal-types';

src/view/context/droppable-context.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import type { DraggableId, DroppableId, TypeId } from '../../types';
 
 export type DroppableContextValue = {|

src/view/context/store-context.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import type { Store } from '../../state/store-types';
 
 export default React.createContext<?Store>(null);

src/view/drag-drop-context/app.jsx

@@ -1,5 +1,6 @@
 // @flow
-import React, { useEffect, useRef, type Node } from 'react';
+import * as React from 'react';
+import { useEffect, useRef } from 'react';
 import { bindActionCreators } from 'redux';
 import { Provider } from 'react-redux';
 import { useMemo, useCallback } from 'use-memo-one';
@@ -55,7 +56,7 @@ export type Props = {|
   setCallbacks: SetAppCallbacks,
   nonce?: string,
   // we do not technically need any children for this component
-  children: Node | null,
+  children: React.Node | null,
 
   // sensors
   sensors?: Sensor[],

src/view/drag-drop-context/drag-drop-context.jsx

@@ -1,5 +1,5 @@
 // @flow
-import React, { type Node } from 'react';
+import * as React from 'react';
 import type { Responders, ContextId, Sensor } from '../../types';
 import ErrorBoundary from './error-boundary';
 import preset from '../../screen-reader-message-preset';
@@ -12,7 +12,7 @@ import { reset as resetUniqueIds } from '../use-unique-id';
 type Props = {|
   ...Responders,
   // We do not technically need any children for this component
-  children: Node | null,
+  children: React.Node | null,
   // Read out by screen readers when focusing on a drag handle
   dragHandleUsageInstructions?: string,
   // Used for strict content security policies

src/view/drag-drop-context/error-boundary.jsx

@@ -1,13 +1,13 @@
 // @flow
-import React, { type Node } from 'react';
+import * as React from 'react';
 import { warning, error } from '../../dev-warning';
 import { noop } from '../../empty';
 import bindEvents from '../event-bindings/bind-events';
 import { RbdInvariant } from '../../invariant';
 import type { AppCallbacks } from './drag-drop-context-types';
 
 type Props = {|
-  children: (setCallbacks: (callbacks: AppCallbacks) => void) => Node,
+  children: (setCallbacks: (callbacks: AppCallbacks) => void) => React.Node,
 |};
 
 // Lame that this is not in flow

src/view/drag-drop-context/use-startup-validation.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { peerDependencies } from '../../../package.json';
 import checkReactVersion from './check-react-version';
 import checkDoctype from './check-doctype';

src/view/draggable/draggable-api.jsx

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import type { DraggableId } from '../../types';
 import type { PublicOwnProps, PrivateOwnProps } from './draggable-types';
 import ConnectedDraggable from './connected-draggable';

src/view/droppable/droppable.jsx

@@ -1,7 +1,8 @@
 // @flow
 import ReactDOM from 'react-dom';
 import { useMemo, useCallback } from 'use-memo-one';
-import React, { useRef, useContext, type Node } from 'react';
+import * as React from 'react';
+import { useRef, useContext } from 'react';
 import { invariant } from '../../invariant';
 import type { DraggableId } from '../../types';
 import type { Props, Provided } from './droppable-types';
@@ -89,7 +90,7 @@ export default function Droppable(props: Props) {
     getDroppableRef,
   });
 
-  const placeholder: Node = (
+  const placeholder: React.Node = (
     <AnimateInOut
       on={props.placeholder}
       shouldAnimate={props.shouldAnimatePlaceholder}
@@ -132,13 +133,13 @@ export default function Droppable(props: Props) {
     [droppableId, isUsingCloneFor, type],
   );
 
-  function getClone(): ?Node {
+  function getClone(): ?React.Node {
     if (!useClone) {
       return null;
     }
     const { dragging, render } = useClone;
 
-    const node: Node = (
+    const node: React.Node = (
       <PrivateDraggable
         draggableId={dragging.draggableId}
         index={dragging.source.index}

src/view/placeholder/placeholder.jsx

@@ -1,5 +1,6 @@
 // @flow
-import React, { useState, useRef, useEffect, type Node } from 'react';
+import * as React from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { useCallback } from 'use-memo-one';
 import type { Spacing } from 'css-box-model';
 import type {
@@ -114,7 +115,7 @@ const getStyle = ({
   };
 };
 
-function Placeholder(props: Props): Node {
+function Placeholder(props: Props): React.Node {
   const animateOpenTimerRef = useRef<?TimeoutID>(null);
 
   const tryClearAnimateOpenTimer = useCallback(() => {

stories/1-single-vertical-list.stories.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import styled from '@emotion/styled';
 import QuoteApp from './src/vertical/quote-app';

stories/10-table.stories.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import WithDimensionLocking from './src/table/with-dimension-locking';
 import WithFixedColumns from './src/table/with-fixed-columns';

stories/11-portal.stories.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import PortalApp from './src/portal/portal-app';
 import { quotes } from './src/data';

stories/12-dynamic.stories.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import WithControls from './src/dynamic/with-controls';
 import LazyLoading from './src/dynamic/lazy-loading';

stories/15-on-before-capture.stories.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import AddingThings from './src/on-before-capture/adding-things';
 

stories/2-single-horizontal.stories.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import styled from '@emotion/styled';
 import AuthorApp from './src/horizontal/author-app';

stories/20-super-simple.stories.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import Simple from './src/simple/simple';
 import SimpleWithScroll from './src/simple/simple-scrollable';

stories/21-change-on-drag-start.stories.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import {
   DragDropContext,

stories/25-fixed-list.stories.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import WithFixedSidebar from './src/fixed-list/fixed-sidebar';
 

stories/3-board.stories.stories.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import Board from './src/board/board';
 import { authorQuoteMap, generateQuoteMap } from './src/data';

stories/30-custom-drop.stories.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import FunnyDrop from './src/custom-drop/funny-drop';
 import NoDrop from './src/custom-drop/no-drop';

stories/35-function-component.stories.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import QuoteApp from './src/function-component/quote-app';
 

stories/4-complex-vertical-list.stories.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import NestedQuoteApp from './src/vertical-nested/quote-app';
 import GroupedQuoteApp from './src/vertical-grouped/quote-app';

stories/40-programmatic.stories.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import WithControls from './src/programmatic/with-controls';
 import Runsheet from './src/programmatic/runsheet';

stories/45-virtual.stories.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import ReactWindowList from './src/virtual/react-window/list';
 import ReactVirtualizedList from './src/virtual/react-virtualized/list';

stories/5-multiple-vertical-lists.stories.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import QuoteApp from './src/multiple-vertical/quote-app';
 import { getQuotes } from './src/data';

stories/50-multiple-contexts.stories.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import MultipleContexts from './src/programmatic/multiple-contexts';
 

stories/55-mixed-sizes.stories.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import MixedSizedItems from './src/mixed-sizes/mixed-size-items';
 import MixedSizedLists from './src/mixed-sizes/mixed-size-lists';

stories/6-multiple-horizontal-lists.stories.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import QuoteApp from './src/multiple-horizontal/quote-app';
 import { getQuotes } from './src/data';

stories/7-interactive-elements.stories.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import InteractiveElementsApp from './src/interactive-elements/interactive-elements-app';
 

stories/8-accessibility.stories.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import TaskApp from './src/accessible/task-app';
 

stories/9-multi-drag.stories.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import TaskApp from './src/multi-drag/task-app';
 

stories/99-debug.stories.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 // import { Draggable, Droppable, DragDropContext } from '../src';