[WNMGDS-2690] Use new JSX transform (#2994)

* Updating Babel config to support removing React import on unit tests.

* React import no longer needed, removing increases perf. Updating linting/TS configs to support change.

* Update all the React imports with a codemod

`npx react-codemod update-react-imports`

* The codemod was too eager to add `* as React`

In some cases, it was only used for types, but our compilers were failing to strip out the import

* Fix issue in `examples/react-app` to illustrate a point

We can use our updated library that uses the new JSX transform in a project that doesn't yet use the new JSX transform, but first I had to fix the example so it imported React. Previously it relied on the fact that our library defined `React` globally!

Now that the point has been illustrated, I can actually just update these examples to use the new JSX transform as well

* Update the examples to use the new JSX transform

---------

Co-authored-by: zarahzachz <[email protected]>

Author: pwolfert

.eslintrc.js

@@ -1,5 +1,10 @@
 module.exports = {
-  extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:react-hooks/recommended'],
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:react/jsx-runtime',
+  ],
   env: {
     browser: true,
     es6: true,

.storybook/docs/HtmlElementArgs.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import humanizeList from 'humanize-react';
 import { useOf } from '@storybook/blocks';
 

.storybook/docs/WebComponentArgsTable.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useOf } from '@storybook/blocks';
 
 function optToCodeBlock(opt: undefined | string) {

.storybook/docs/WebComponentEventsTable.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useOf } from '@storybook/blocks';
 
 /**

.storybook/preview.tsx

@@ -1,5 +1,4 @@
 import './storybookStyles.scss';
-import React from 'react';
 import DocumentationTemplate from './docs/DocumentationTemplate.mdx';
 import { config } from '../packages/design-system/src/components/config';
 import { setLanguage } from '../packages/design-system/src/components/i18n';

babel.config.json

@@ -1,7 +1,7 @@
 {
   "presets": [
     "@babel/preset-env",
-    "@babel/preset-react",
+    ["@babel/preset-react", { "runtime": "automatic" }],
     "@babel/preset-typescript"
   ]
-}
+}

examples/astro/src/components/react/AccordionExample.tsx

@@ -1,5 +1,4 @@
 import { Accordion, AccordionItem } from '@cmsgov/design-system';
-import React from 'react';
 
 function AccordionExample() {
   return (

examples/astro/src/components/react/AlertExample.tsx

@@ -1,5 +1,4 @@
 import { Alert } from '@cmsgov/design-system';
-import React from 'react';
 
 function AlertExample() {
   return (

examples/astro/src/components/react/AutocompleteExample.tsx

@@ -1,5 +1,4 @@
 import { Autocomplete, TextField } from '@cmsgov/design-system';
-import React from 'react';
 
 function AutocompleteExample() {
   return (

examples/astro/src/components/react/BadgeExample.tsx

@@ -1,5 +1,4 @@
 import { Badge } from '@cmsgov/design-system';
-import React from 'react';
 
 function BadgeExample() {
   return (

examples/astro/src/components/react/ButtonExample.tsx

@@ -1,5 +1,4 @@
 import { Button } from '@cmsgov/design-system';
-import React from 'react';
 
 function ButtonExample() {
   return (

examples/astro/src/components/react/ChoiceListExample.tsx

@@ -1,5 +1,4 @@
 import { ChoiceList } from '@cmsgov/design-system';
-import React from 'react';
 
 function ChoiceListExample() {
   return (

examples/astro/src/components/react/DropdownExample.tsx

@@ -1,5 +1,4 @@
 import { Dropdown } from '@cmsgov/design-system';
-import React from 'react';
 
 function DropdownExample() {
   const dropdownOptions = [

examples/astro/src/components/react/FilterChipExample.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FilterChip } from '@cmsgov/design-system';
 
 function FilterChipExample() {

examples/astro/src/components/react/HelpDrawerExample.tsx

@@ -1,5 +1,5 @@
 import { HelpDrawer, HelpDrawerToggle } from '@cmsgov/design-system';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 function HelpDrawerExample() {
   const [showHelpDrawer, setShowHelpDrawer] = useState(false);

examples/astro/src/components/react/MaskedFieldExample.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { TextField } from '@cmsgov/design-system';
 
 function MaskedFieldExample() {

examples/astro/src/components/react/ModalDialogExample.tsx

@@ -1,5 +1,5 @@
 import { Button, Dialog } from '@cmsgov/design-system';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 function ModalDialogExample() {
   const [showExampleModal, setShowExampleModal] = useState(false);

examples/astro/src/components/react/MonthPickerExample.tsx

@@ -1,5 +1,4 @@
 import { MonthPicker } from '@cmsgov/design-system';
-import React from 'react';
 
 function MonthPickerExample() {
   return (

examples/astro/src/components/react/MultiInputDateFieldExample.tsx

@@ -1,5 +1,4 @@
 import { MultiInputDateField } from '@cmsgov/design-system';
-import React from 'react';
 
 function MultiInputDateFieldExample() {
   return (

examples/astro/src/components/react/PaginationExample.tsx

@@ -1,5 +1,5 @@
 import { Pagination } from '@cmsgov/design-system';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 function PaginationExample() {
   const [page, setPage] = useState(5);

examples/astro/src/components/react/SingleInputDateFieldExample.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { SingleInputDateField } from '@cmsgov/design-system';
 
 function SingleInputDateFieldExample() {

examples/astro/src/components/react/SpinnerExample.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Spinner } from '@cmsgov/design-system';
 
 function SpinnerExample() {

examples/astro/src/components/react/TableExample.tsx

@@ -6,7 +6,6 @@ import {
   TableHead,
   TableRow,
 } from '@cmsgov/design-system';
-import React from 'react';
 
 function TableExample() {
   return (

examples/astro/src/components/react/TabsExample.tsx

@@ -1,5 +1,4 @@
 import { TabPanel, Tabs } from '@cmsgov/design-system';
-import React from 'react';
 
 function TabsExample() {
   return (

examples/astro/src/components/react/TextFieldExample.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { TextField } from '@cmsgov/design-system';
 
 function TextFieldExample() {

examples/astro/src/components/react/TooltipExample.tsx

@@ -1,5 +1,4 @@
 import { Tooltip, TooltipIcon } from '@cmsgov/design-system';
-import React from 'react';
 
 function TooltipExample() {
   return (

examples/astro/src/components/react/UsaBannerExample.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { UsaBanner } from '@cmsgov/design-system';
 
 function UsaBannerExample() {

examples/astro/src/components/react/VerticalNavigationExample.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { VerticalNav } from '@cmsgov/design-system';
 
 function VerticalNavigationExample() {

examples/astro/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "astro/tsconfigs/strict",
   "compilerOptions": {
-    "jsx": "react",
+    "jsx": "react-jsx",
   }
 }

examples/react-app/babel.config.js

@@ -9,7 +9,7 @@ module.exports = function (api) {
         corejs: '3.0.0',
       },
     ],
-    '@babel/preset-react',
+    ['@babel/preset-react', { runtime: 'automatic' }],
   ];
 
   return {

examples/react-app/src/scripts/index.js

@@ -2,7 +2,7 @@
 // to only bundle imported components. Without this optimization, all components will be imported
 // your build process.
 import { Alert, Button, Drawer, UsaBanner } from '@cmsgov/design-system';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import ReactDOM from 'react-dom';
 
 const Example = function () {

packages/design-system/src/components/Accordion/Accordion.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Accordion } from './Accordion';
 import { AccordionItem } from './AccordionItem';

packages/design-system/src/components/Accordion/Accordion.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Accordion from './Accordion';
 import AccordionItem from './AccordionItem';
 import { render, screen } from '@testing-library/react';

packages/design-system/src/components/Accordion/Accordion.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type * as React from 'react';
 import { FunctionComponent } from 'react';
 import classNames from 'classnames';
 

packages/design-system/src/components/Accordion/AccordionItem.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import AccordionItem from './AccordionItem';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';

packages/design-system/src/components/Accordion/AccordionItem.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import type * as React from 'react';
 import { AddIcon, RemoveIcon } from '../Icons';
 import classNames from 'classnames';
 import useId from '../utilities/useId';

packages/design-system/src/components/Alert/Alert.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from '../Button';
 import Alert from './Alert';

packages/design-system/src/components/Alert/Alert.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Alert, { AlertProps } from './Alert';
 import { UtagContainer } from '../analytics';
 import { config } from '../config';

packages/design-system/src/components/Alert/Alert.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type * as React from 'react';
 import classNames from 'classnames';
 import mergeRefs from '../utilities/mergeRefs';
 import useAutofocus from '../utilities/useAutoFocus';

packages/design-system/src/components/Autocomplete/Autocomplete.stories.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import type * as React from 'react';
 import Autocomplete from './Autocomplete';
 import TextField from '../TextField/TextField';
 import uniqueId from 'lodash/uniqueId';

packages/design-system/src/components/Autocomplete/Autocomplete.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Autocomplete from './Autocomplete';
 import TextField from '../TextField/TextField';
 import { render, screen } from '@testing-library/react';

packages/design-system/src/components/Autocomplete/Autocomplete.tsx

@@ -1,4 +1,5 @@
-import React, { useRef } from 'react';
+import { cloneElement, useRef } from 'react';
+import type * as React from 'react';
 import Button from '../Button/Button';
 import DropdownMenu from '../Dropdown/DropdownMenu';
 import classNames from 'classnames';
@@ -295,7 +296,7 @@ export const Autocomplete = (props: AutocompleteProps) => {
 
   return (
     <div className={rootClassName} ref={wrapperRef}>
-      {React.cloneElement(textField, textFieldProps)}
+      {cloneElement(textField, textFieldProps)}
 
       {((state.isOpen && reactStatelyItems.length > 0) || (state.isFocused && statusMessage)) && (
         <DropdownMenu

packages/design-system/src/components/Autocomplete/utils.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode } from 'react';
+import { isValidElement, Children, ReactElement, ReactNode } from 'react';
 import { AutocompleteProps, AutocompleteItem } from './Autocomplete';
 import { ComboBoxState, Item } from '../react-aria'; // from react-stately
 import { TextField } from '../TextField';
@@ -30,7 +30,7 @@ export function renderStatusMessage(message: ReactNode) {
  * Determine if a React component is a TextField
  */
 function isTextField(child?: ReactNode): child is ReactElement {
-  if (!child || !React.isValidElement(child)) {
+  if (!child || !isValidElement(child)) {
     return false;
   }
 
@@ -41,7 +41,7 @@ function isTextField(child?: ReactNode): child is ReactElement {
 
 export function getTextFieldChild(children: ReactNode): ReactElement | undefined {
   let textField;
-  React.Children.forEach(children, (child) => {
+  Children.forEach(children, (child) => {
     if (isTextField(child)) {
       textField = child;
     }

packages/design-system/src/components/Badge/Badge.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import Badge from './Badge';
 

packages/design-system/src/components/Badge/Badge.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Badge from './Badge';
 import { render, screen } from '@testing-library/react';
 

packages/design-system/src/components/Badge/Badge.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type * as React from 'react';
 import classNames from 'classnames';
 import { t } from '../i18n';
 

packages/design-system/src/components/Button/Button.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Button from './Button';
 import { NextIcon } from '../Icons';
 import Spinner from '../Spinner/Spinner';

packages/design-system/src/components/Button/Button.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Button from './Button';
 import { UtagContainer } from '../analytics';
 import { config } from '../config';

packages/design-system/src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type * as React from 'react';
 import classNames from 'classnames';
 import mergeRefs from '../utilities/mergeRefs';
 import useButtonAnalytics from './useButtonAnalytics';

packages/design-system/src/components/ChoiceList/Choice.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import Choice from './Choice';
 import { Alert } from '../Alert';

packages/design-system/src/components/ChoiceList/Choice.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Choice, { ChoiceProps, ChoiceType } from './Choice';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';

packages/design-system/src/components/ChoiceList/Choice.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import type * as React from 'react';
 import EvEmitter from 'ev-emitter';
 import classNames from 'classnames';
 import useId from '../utilities/useId';

packages/design-system/src/components/ChoiceList/ChoiceList.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Alert } from '../Alert';
 import ChoiceList from './ChoiceList';

packages/design-system/src/components/ChoiceList/ChoiceList.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import ChoiceList, { ChoiceListType } from './ChoiceList';
 import { render, waitFor, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';

packages/design-system/src/components/ChoiceList/ChoiceList.tsx

@@ -1,6 +1,6 @@
 import Choice, { ChoiceProps as ChoiceComponentProps } from './Choice';
 import { Label } from '../Label';
-import React from 'react';
+import type * as React from 'react';
 import classNames from 'classnames';
 import describeField from '../utilities/describeField';
 import useId from '../utilities/useId';

packages/design-system/src/components/CloseButton/CloseButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type * as React from 'react';
 import classNames from 'classnames';
 import useId from '../utilities/useId';
 import { CloseIconThin } from '../Icons';

packages/design-system/src/components/DateField/CustomDayPicker.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import CustomDayPickerCaption from './CustomDayPickerCaption';
 import format from 'date-fns/format';
 import { DayPicker, DayPickerSingleProps } from 'react-day-picker';

packages/design-system/src/components/DateField/CustomDayPickerCaption.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type * as React from 'react';
 import { ArrowIcon } from '../Icons';
 import { CaptionDropdowns, CaptionProps, useDayPicker, useNavigation } from 'react-day-picker';
 

packages/design-system/src/components/DateField/DateInput.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { createRef } from 'react';
 import DateInput, { DateInputProps } from './DateInput';
 import userEvent from '@testing-library/user-event';