chore: updating all React imports from default to namespace (#1358)

* chore: updating all React imports from default to namespace

* Create afraid-days-poke.md

Author: zchenwei

Diff for: .changeset/afraid-days-poke.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+chore: updating all React imports from default to namespace

Diff for: canary/react/cra-ts/src/App.test.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
+
 import App from './App';
 
 test('renders learn react link', () => {

Diff for: canary/react/cra-ts/src/index.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import * as React from 'react';
 import ReactDOM from 'react-dom';
+
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';

Diff for: canary/react/cra/src/index.js

@@ -1,5 +1,6 @@
-import React from 'react';
+import * as React from 'react';
 import ReactDOM from 'react-dom';
+
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';

Diff for: docs/src/components/DemoBox.tsx

@@ -4,7 +4,7 @@ import {
   IconKeyboardArrowUp,
 } from '@aws-amplify/ui-react';
 import classNames from 'classnames';
-import React from 'react';
+import * as React from 'react';
 
 interface DemoBoxProps {
   primitiveName: string;

Diff for: docs/src/components/Feature.tsx

@@ -12,7 +12,6 @@ import {
 } from '@heroicons/react/solid';
 import { useRouter } from 'next/router';
 import * as React from 'react';
-import { useEffect } from 'react';
 import * as runtime from 'react/jsx-runtime';
 import remarkGfm from 'remark-gfm';
 import { evaluateSync } from 'xdm';
@@ -61,7 +60,7 @@ export function Feature({ name = required('Missing feature name') }) {
 
   const port = getPortForPlatform(platform);
 
-  useEffect(() => {
+  React.useEffect(() => {
     import(`../../../packages/e2e/features${pathname}/${name}.feature`).then(
       (exports) => setSource(exports.default)
     );

Diff for: docs/src/components/FieldLabeler.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 export const FieldLabeler: React.FC<{
   alignItems?: string;

Diff for: docs/src/components/LinkPropControls.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import * as React from 'react';
 import { LinkProps, BaseStyleProps } from '@aws-amplify/ui-react';
+
 import { FieldLabeler } from './FieldLabeler';
 import { DemoBox } from './DemoBox';
 

Diff for: docs/src/components/RadioGroupFieldPropControls.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import * as React from 'react';
 import { RadioGroupFieldProps, SelectField } from '@aws-amplify/ui-react';
+
 import { FieldLabeler } from './FieldLabeler';
 import { DemoBox } from './DemoBox';
 

Diff for: docs/src/components/TableOfContents.tsx

@@ -1,9 +1,9 @@
-import { useEffect, useState } from 'react';
+import * as React from 'react';
 import debounce from 'lodash/debounce';
 import { Text, ScrollView } from '@aws-amplify/ui-react';
 
 export const TableOfContents = ({ title, headings }) => {
-  const [activeHeading, setActiveHeading] = useState(-1);
+  const [activeHeading, setActiveHeading] = React.useState(-1);
 
   let offsets = [...headings].map((heading) => {
     return heading.top;
@@ -23,7 +23,7 @@ export const TableOfContents = ({ title, headings }) => {
     setActiveHeading(index);
   });
 
-  useEffect(() => {
+  React.useEffect(() => {
     // if the URL has a hash, set the active heading
     // so the right ToC link is active on page load
     if (document.location.hash) {
@@ -36,7 +36,7 @@ export const TableOfContents = ({ title, headings }) => {
     return function cleanup() {
       document.removeEventListener('scroll', scrollHandler);
     };
-  }, [headings]);
+  }, [headings, scrollHandler]);
 
   return (
     <aside className="docs-toc" id="toc">

Diff for: docs/src/components/TabsPropControls.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import * as React from 'react';
 import { TabsProps } from '@aws-amplify/ui-react';
+
 import { FieldLabeler } from './FieldLabeler';
 import { DemoBox } from './DemoBox';
 

Diff for: docs/src/components/ToggleButtonPropControls.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
-
+import * as React from 'react';
 import {
   CheckboxField,
   ToggleButtonProps,
   SelectField,
 } from '@aws-amplify/ui-react';
-import { FieldLabeler } from './FieldLabeler';
+
 import { DemoBox } from './DemoBox';
 
 export interface ToggleButtonPropControlsProps extends ToggleButtonProps {

Diff for: docs/src/components/useGridContainerProps.tsx

@@ -1,5 +1,5 @@
 import { GridContainerStyleProps } from '@aws-amplify/ui-react';
-import { useState } from 'react';
+import * as React from 'react';
 
 import { GridContainerPropControlsProps } from './GridContainerPropControls';
 
@@ -8,22 +8,28 @@ interface UseGridContainerProps {
 }
 
 export const useGridContainerProps: UseGridContainerProps = (initialValues) => {
-  const [autoColumns, setAutoColumns] = useState(initialValues.autoColumns);
-  const [autoFlow, setAutoFlow] = useState(initialValues.autoFlow);
-  const [autoRows, setAutoRows] = useState(initialValues.autoRows);
-  const [columnGap, setColumnGap] = useState(initialValues.columnGap);
-  const [gap, setGap] = useState(initialValues.gap);
-  const [rowGap, setRowGap] = useState(initialValues.rowGap);
-  const [templateAreas, setTemplateAreas] = useState(
+  const [autoColumns, setAutoColumns] = React.useState(
+    initialValues.autoColumns
+  );
+  const [autoFlow, setAutoFlow] = React.useState(initialValues.autoFlow);
+  const [autoRows, setAutoRows] = React.useState(initialValues.autoRows);
+  const [columnGap, setColumnGap] = React.useState(initialValues.columnGap);
+  const [gap, setGap] = React.useState(initialValues.gap);
+  const [rowGap, setRowGap] = React.useState(initialValues.rowGap);
+  const [templateAreas, setTemplateAreas] = React.useState(
     initialValues.templateAreas
   );
-  const [templateColumns, setTemplateColumns] = useState(
+  const [templateColumns, setTemplateColumns] = React.useState(
     initialValues.templateColumns
   );
-  const [templateRows, setTemplateRows] = useState(initialValues.templateRows);
-  const [alignItems, setAlignItems] = useState(initialValues.alignItems);
-  const [alignContent, setAlignContent] = useState(initialValues.alignContent);
-  const [justifyContent, setJustifyContent] = useState(
+  const [templateRows, setTemplateRows] = React.useState(
+    initialValues.templateRows
+  );
+  const [alignItems, setAlignItems] = React.useState(initialValues.alignItems);
+  const [alignContent, setAlignContent] = React.useState(
+    initialValues.alignContent
+  );
+  const [justifyContent, setJustifyContent] = React.useState(
     initialValues.justifyContent
   );
 

Diff for: docs/src/components/useGridItemProps.tsx

@@ -1,21 +1,24 @@
 import { GridItemStyleProps } from '@aws-amplify/ui-react';
-import { useState } from 'react';
+import * as React from 'react';
+
 import { GridItemPropControlsProps } from './GridItemPropControls';
 
 interface UseGridItemProps {
   (initialValues: GridItemStyleProps): GridItemPropControlsProps;
 }
 
 export const useGridItemProps: UseGridItemProps = (initialValues) => {
-  const [area, setArea] = useState(initialValues.area);
-  const [column, setColumn] = useState(initialValues.column);
-  const [columnEnd, setColumnEnd] = useState(initialValues.columnEnd);
-  const [columnSpan, setColumnSpan] = useState(initialValues.columnSpan);
-  const [columnStart, setColumnStart] = useState(initialValues.columnStart);
-  const [row, setRow] = useState(initialValues.row);
-  const [rowEnd, setRowEnd] = useState(initialValues.rowEnd);
-  const [rowSpan, setRowSpan] = useState(initialValues.rowSpan);
-  const [rowStart, setRowStart] = useState(initialValues.rowStart);
+  const [area, setArea] = React.useState(initialValues.area);
+  const [column, setColumn] = React.useState(initialValues.column);
+  const [columnEnd, setColumnEnd] = React.useState(initialValues.columnEnd);
+  const [columnSpan, setColumnSpan] = React.useState(initialValues.columnSpan);
+  const [columnStart, setColumnStart] = React.useState(
+    initialValues.columnStart
+  );
+  const [row, setRow] = React.useState(initialValues.row);
+  const [rowEnd, setRowEnd] = React.useState(initialValues.rowEnd);
+  const [rowSpan, setRowSpan] = React.useState(initialValues.rowSpan);
+  const [rowStart, setRowStart] = React.useState(initialValues.rowStart);
 
   return {
     area,

Diff for: docs/src/components/useLinkProps.tsx

@@ -1,17 +1,20 @@
 import { LinkProps } from '@aws-amplify/ui-react';
-import { useState } from 'react';
+import * as React from 'react';
+
 import { LinkPropControlsProps } from './LinkPropControls';
 
 interface UseLinkProps {
   (initialValues: LinkProps): LinkPropControlsProps;
 }
 
 export const useLinkProps: UseLinkProps = (initialValues) => {
-  const [isExternal, setIsExternal] = useState<LinkProps['isExternal']>(
+  const [isExternal, setIsExternal] = React.useState<LinkProps['isExternal']>(
     initialValues.isExternal
   );
-  const [color, setColor] = useState<LinkProps['color']>(initialValues.color);
-  const [textDecoration, setTextDecoration] = useState<
+  const [color, setColor] = React.useState<LinkProps['color']>(
+    initialValues.color
+  );
+  const [textDecoration, setTextDecoration] = React.useState<
     LinkProps['textDecoration']
   >(initialValues.textDecoration);
 

Diff for: docs/src/components/useMenuProps.tsx

@@ -1,16 +1,17 @@
 import { MenuProps } from '@aws-amplify/ui-react';
-import { useState } from 'react';
+import * as React from 'react';
+
 import { MenuPropControlsProps } from './MenuPropControls';
 
 interface UseMenuProps {
   (initialValues?: MenuProps): MenuPropControlsProps;
 }
 
 export const useMenuProps: UseMenuProps = (initialValues) => {
-  const [menuAlign, setMenuAlign] = useState<MenuProps['menuAlign']>(
+  const [menuAlign, setMenuAlign] = React.useState<MenuProps['menuAlign']>(
     initialValues.align
   );
-  const [size, setSize] = useState<MenuProps['size']>(initialValues.size);
+  const [size, setSize] = React.useState<MenuProps['size']>(initialValues.size);
 
   return {
     ...initialValues,

Diff for: docs/src/components/useRadioGroupFieldProps.tsx

@@ -1,5 +1,5 @@
 import { RadioGroupFieldProps } from '@aws-amplify/ui-react';
-import { useState } from 'react';
+import * as React from 'react';
 
 import { RadioGroupFieldPropControlsProps } from './RadioGroupFieldPropControls';
 
@@ -10,19 +10,19 @@ interface UseRadioGroupFieldProps {
 export const useRadioGroupFieldProps: UseRadioGroupFieldProps = (
   initialValues
 ) => {
-  const [direction, setDirection] = useState<RadioGroupFieldProps['direction']>(
-    initialValues.direction
-  );
-  const [isDisabled, setIsDisabled] = useState<
+  const [direction, setDirection] = React.useState<
+    RadioGroupFieldProps['direction']
+  >(initialValues.direction);
+  const [isDisabled, setIsDisabled] = React.useState<
     RadioGroupFieldProps['isDisabled']
   >(initialValues.isDisabled);
-  const [label, setLabel] = useState<RadioGroupFieldProps['label']>(
+  const [label, setLabel] = React.useState<RadioGroupFieldProps['label']>(
     initialValues.label
   );
-  const [name, setName] = useState<RadioGroupFieldProps['name']>(
+  const [name, setName] = React.useState<RadioGroupFieldProps['name']>(
     initialValues.name
   );
-  const [size, setSize] = useState<RadioGroupFieldProps['size']>(
+  const [size, setSize] = React.useState<RadioGroupFieldProps['size']>(
     initialValues.size
   );
 

Diff for: docs/src/components/useTableProps.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import * as React from 'react';
 
 import { TableProps } from '@aws-amplify/ui-react';
 
@@ -9,17 +9,19 @@ interface UseTableProps {
 }
 
 export const useTableProps: UseTableProps = (initialValues) => {
-  const [caption, setCaption] = useState<TableProps['caption']>(
+  const [caption, setCaption] = React.useState<TableProps['caption']>(
     initialValues.caption
   );
 
-  const [highlightOnHover, setHighlightOnHover] = useState<
+  const [highlightOnHover, setHighlightOnHover] = React.useState<
     TableProps['highlightOnHover']
   >(initialValues.highlightOnHover);
 
-  const [size, setSize] = useState<TableProps['size']>(initialValues.size);
+  const [size, setSize] = React.useState<TableProps['size']>(
+    initialValues.size
+  );
 
-  const [variation, setVariation] = useState<TableProps['variation']>(
+  const [variation, setVariation] = React.useState<TableProps['variation']>(
     initialValues.variation
   );
 

Diff for: docs/src/components/useTabsProps.tsx

@@ -1,22 +1,23 @@
-import { TabsProps, TabItem, Button } from '@aws-amplify/ui-react';
-import { useState } from 'react';
+import { TabsProps } from '@aws-amplify/ui-react';
+import * as React from 'react';
+
 import { TabsPropControlsProps } from './TabsPropControls';
 
 interface UseTabsProps {
   (initialValues: TabsProps): TabsPropControlsProps;
 }
 
 export const useTabsProps: UseTabsProps = (initialValues) => {
-  const [currentIndex, setCurrentIndex] = useState<TabsProps['currentIndex']>(
-    initialValues.currentIndex
-  );
-  const [spacing, setSpacing] = useState<TabsProps['spacing']>(
+  const [currentIndex, setCurrentIndex] = React.useState<
+    TabsProps['currentIndex']
+  >(initialValues.currentIndex);
+  const [spacing, setSpacing] = React.useState<TabsProps['spacing']>(
     initialValues.spacing
   );
-  const [justifyContent, setJustifyContent] = useState<
+  const [justifyContent, setJustifyContent] = React.useState<
     TabsProps['justifyContent']
   >(initialValues.justifyContent);
-  const [indicatorPosition, setIndicatorPosition] = useState<
+  const [indicatorPosition, setIndicatorPosition] = React.useState<
     TabsProps['indicatorPosition']
   >(initialValues.indicatorPosition);
   const children = initialValues.children;

Diff for: docs/src/components/useToggleButtonProps.ts

@@ -1,5 +1,4 @@
-import { useState } from 'react';
-
+import * as React from 'react';
 import { ToggleButtonProps } from '@aws-amplify/ui-react';
 
 import { ToggleButtonPropControlsProps } from './ToggleButtonPropControls';
@@ -9,15 +8,15 @@ interface UseToggleButtonProps {
 }
 
 export const useToggleButtonProps: UseToggleButtonProps = (initialValues) => {
-  const [isDisabled, setIsDisabled] = useState<ToggleButtonProps['isDisabled']>(
-    initialValues.isDisabled
-  );
-  const [size, setSize] = useState<ToggleButtonProps['size']>(
+  const [isDisabled, setIsDisabled] = React.useState<
+    ToggleButtonProps['isDisabled']
+  >(initialValues.isDisabled);
+  const [size, setSize] = React.useState<ToggleButtonProps['size']>(
     initialValues.size
   );
-  const [variation, setVariation] = useState<ToggleButtonProps['variation']>(
-    initialValues.variation
-  );
+  const [variation, setVariation] = React.useState<
+    ToggleButtonProps['variation']
+  >(initialValues.variation);
 
   return {
     isDisabled,

Diff for: docs/src/pages/components/badge/BadgePropControls.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import {
   BadgeProps,
   SelectField,