Migrate to import * as React from 'react'

Ref facebook/react#18102

__fixtures__/template.js

@@ -1,5 +1,5 @@
 module.exports = () => (code, state) => `
-import React from 'react'
+import * as React from 'react'
 
 export default function ${state.componentName}() {
   return ${code}

packages/babel-plugin-transform-svg-component/src/index.test.js

@@ -66,14 +66,14 @@ describe('plugin', () => {
         { template },
         opts,
         { jsx },
-      ) => template.ast`import React from 'react';
+      ) => template.ast`import * as React from 'react';
   const MyComponent = () => ${jsx}
   export default MyComponent
 `,
       state: { componentName: 'SvgComponent' },
     })
     expect(code).toMatchInlineSnapshot(`
-      "import React from 'react';
+      "import * as React from 'react';
 
       const MyComponent = () => <svg><div /></svg>;
 

website/src/components/playground/CodeFund.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 function useScript(src) {
   React.useEffect(() => {

website/src/components/playground/DropArea.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import styled from '@xstyled/styled-components'
 
 const FullWidth = styled.div`

website/src/components/playground/Editor.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { useColorMode } from '@xstyled/styled-components'
 
 import AceEditor from 'react-ace'

website/src/components/playground/Loading.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import styled, { keyframes } from 'styled-components'
 import { graphql, StaticQuery } from 'gatsby'
 

website/src/components/playground/Playground.js

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/accessible-emoji */
-import React from 'react'
+import * as React from 'react'
 import styled, {
   Box,
   createGlobalStyle,

website/src/components/playground/Query.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import qs from 'query-string'
 import { createBrowserHistory } from 'history'
 

website/src/components/playground/Settings.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import styled, { up, css } from '@xstyled/styled-components'
 import { Form, FormSpy } from 'react-final-form'
 import { SettingsFieldBoolean } from './SettingsFieldBoolean'

website/src/components/playground/SettingsFieldBoolean.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Box } from '@xstyled/styled-components'
 import { FormCheck, FormCheckLabel } from '@smooth-ui/core-sc'
 import { CheckboxControl } from './controls/CheckboxControl'

website/src/components/playground/SettingsFieldEnum.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Box } from '@xstyled/styled-components'
 import { FormField, FormCheck, FormCheckLabel } from '@smooth-ui/core-sc'
 import { RadioControl } from 'components/playground/controls/RadioControl'

website/src/components/playground/SettingsFieldInteger.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Box } from '@xstyled/styled-components'
 import { FormField } from '@smooth-ui/core-sc'
 import { InputControl } from './controls/InputControl'

website/src/components/playground/SettingsFieldString.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Box } from '@xstyled/styled-components'
 import { FormField } from '@smooth-ui/core-sc'
 import { TextareaControl } from 'components/playground/controls/TextareaControl'

website/src/components/playground/SettingsGroup.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import styled, { up, css, Box } from '@xstyled/styled-components'
 import { useHiddenState, Hidden, HiddenDisclosure } from 'reakit/Hidden'
 import { ChevronLeft } from 'components/playground/icons/ChevronLeft'

website/src/components/playground/controls/CheckboxControl.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Field } from 'react-final-form'
 import { Checkbox } from '@smooth-ui/core-sc'
 

website/src/components/playground/controls/InputControl.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Field } from 'react-final-form'
 import { Input } from '@smooth-ui/core-sc'
 

website/src/components/playground/controls/RadioControl.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Field } from 'react-final-form'
 import { Radio } from '@smooth-ui/core-sc'
 

website/src/components/playground/controls/TextareaControl.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Field } from 'react-final-form'
 import { Textarea } from '@smooth-ui/core-sc'
 

website/src/components/playground/icons/ChevronLeft.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 export const ChevronLeft = props => (
   <svg

website/src/pages/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-one-expression-per-line */
 /* eslint-disable jsx-a11y/accessible-emoji */
-import React from 'react'
+import * as React from 'react'
 import { Box } from '@xstyled/styled-components'
 import Helmet from 'react-helmet'
 import { HomeHero, ShowCase, BaseLayout } from 'smooth-doc/components'

website/src/smooth-doc/components/ThemeProvider.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { ThemeProvider as SCThemeProvider } from '@xstyled/styled-components'
 import deepmerge from 'deepmerge'
 import { theme as suiTheme } from '@smooth-ui/core-sc'