Convert React imports to use the recommended import syntax

Doing so prevents any named imports leaking into the output type
definitions (.d.ts files) and follows with what seems to be the React
official recommendations [1].

The more 'correct' fix would be only import those components that are
needed by each component, but that's a bigger change.

[1] facebook/react#18102

Fixes stripe#569

Author: bagedevimo

src/components/CheckoutProvider.test.tsx

@@ -1,4 +1,5 @@
-import React, {StrictMode} from 'react';
+import * as React from 'react';
+import {StrictMode} from 'react';
 import {render, act, waitFor} from '@testing-library/react';
 import {renderHook} from '@testing-library/react-hooks';
 

src/components/CheckoutProvider.tsx

@@ -1,7 +1,7 @@
 import {FunctionComponent, PropsWithChildren, ReactNode} from 'react';
 import * as stripeJs from '@stripe/stripe-js';
 
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 
 import {parseStripeProp} from '../utils/parseStripeProp';

src/components/Elements.test.tsx

@@ -1,4 +1,5 @@
-import React, {StrictMode} from 'react';
+import * as React from 'react';
+import {StrictMode} from 'react';
 import {render, act} from '@testing-library/react';
 import {renderHook} from '@testing-library/react-hooks';
 

src/components/Elements.tsx

@@ -7,7 +7,7 @@ import {
 } from 'react';
 import * as stripeJs from '@stripe/stripe-js';
 
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 
 import {usePrevious} from '../utils/usePrevious';

src/components/EmbeddedCheckout.client.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import {render, act} from '@testing-library/react';
 
 import * as EmbeddedCheckoutProviderModule from './EmbeddedCheckoutProvider';

src/components/EmbeddedCheckout.server.test.tsx

@@ -2,7 +2,7 @@
  * @jest-environment node
  */
 
-import React from 'react';
+import * as React from 'react';
 import {renderToString} from 'react-dom/server';
 
 import * as EmbeddedCheckoutProviderModule from './EmbeddedCheckoutProvider';

src/components/EmbeddedCheckout.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import {useEmbeddedCheckoutContext} from './EmbeddedCheckoutProvider';
 import {isServer} from '../utils/isServer';
 

src/components/EmbeddedCheckoutProvider.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import {render, act} from '@testing-library/react';
 import {renderHook} from '@testing-library/react-hooks';
 

src/components/EmbeddedCheckoutProvider.tsx

@@ -1,5 +1,5 @@
 import {FunctionComponent, PropsWithChildren, ReactNode} from 'react';
-import React from 'react';
+import * as React from 'react';
 
 import {usePrevious} from '../utils/usePrevious';
 import {UnknownOptions} from '../utils/extractAllowedOptionsUpdates';

src/components/createElementComponent.test.tsx

@@ -1,4 +1,5 @@
-import React, {StrictMode} from 'react';
+import * as React from 'react';
+import {StrictMode} from 'react';
 import {render, act, waitFor} from '@testing-library/react';
 
 import * as ElementsModule from './Elements';

src/components/createElementComponent.tsx

@@ -2,7 +2,7 @@
 import {FunctionComponent} from 'react';
 import * as stripeJs from '@stripe/stripe-js';
 
-import React from 'react';
+import * as React from 'react';
 
 import PropTypes from 'prop-types';