chore: use react 17 jsx transform (#10462)

Signed-off-by: Matt Krick <[email protected]>

package.json

@@ -52,8 +52,8 @@
   "resolutions": {
     "typescript": "^5.6.3",
     "hoist-non-react-statics": "^3.3.0",
-    "@types/react": "16.9.11",
-    "@types/react-dom": "16.9.4",
+    "@types/react": "17.0.2",
+    "@types/react-dom": "17.0.2",
     "immutable": "3.8.2",
     "clean-css": "^5.2.2",
     "node-forge": "^1.2.1",
@@ -120,7 +120,7 @@
     "raw-loader": "^4.0.2",
     "relay-compiler": "^18.0.0",
     "relay-config": "^12.0.1",
-    "sucrase": "^3.32.0",
+    "sucrase": "^3.35.0",
     "tailwindcss": "^3.2.7",
     "terser-webpack-plugin": "^5.3.9",
     "ts-loader": "9.2.6",

packages/client/Root.tsx

@@ -1,5 +1,4 @@
 import * as Tooltip from '@radix-ui/react-tooltip'
-import React from 'react'
 import {BrowserRouter as Router} from 'react-router-dom'
 import Action from './components/Action/Action'
 import AtmosphereProvider from './components/AtmosphereProvider/AtmosphereProvider'

packages/client/client.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {render} from 'react-dom'
 import Root from './Root'
 import './scrollIntoViewIfNeeded'

packages/client/components/Action/Action.tsx

@@ -1,4 +1,4 @@
-import React, {lazy, memo, Suspense} from 'react'
+import {lazy, memo, Suspense} from 'react'
 import 'react-day-picker/dist/style.css'
 import {Route, Switch} from 'react-router'
 import useServiceWorkerUpdater from '../../hooks/useServiceWorkerUpdater'

packages/client/components/ActionMeeting.tsx

@@ -1,5 +1,5 @@
 import graphql from 'babel-plugin-relay/macro'
-import React, {ReactElement, Suspense, useEffect} from 'react'
+import {ReactElement, Suspense, useEffect} from 'react'
 import {useFragment} from 'react-relay'
 import {ActionMeeting_meeting$key} from '~/__generated__/ActionMeeting_meeting.graphql'
 import {NewMeetingPhaseTypeEnum} from '../__generated__/ActionMeeting_meeting.graphql'

packages/client/components/ActionMeetingAgendaItems.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
 import graphql from 'babel-plugin-relay/macro'
-import React, {useRef} from 'react'
+import {useRef} from 'react'
 import {useFragment} from 'react-relay'
 import {ActionMeetingAgendaItems_meeting$key} from '~/__generated__/ActionMeetingAgendaItems_meeting.graphql'
 import useBreakpoint from '~/hooks/useBreakpoint'

packages/client/components/ActionMeetingFirstCall.tsx

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled'
 import graphql from 'babel-plugin-relay/macro'
-import React from 'react'
 import {useFragment} from 'react-relay'
 import {ActionMeetingFirstCall_meeting$key} from '../__generated__/ActionMeetingFirstCall_meeting.graphql'
 import useAtmosphere from '../hooks/useAtmosphere'

packages/client/components/ActionMeetingLastCall.tsx

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled'
 import graphql from 'babel-plugin-relay/macro'
-import React from 'react'
 import {useFragment} from 'react-relay'
 import EndCheckInMutation from '~/mutations/EndCheckInMutation'
 import {ActionMeetingLastCall_meeting$key} from '../__generated__/ActionMeetingLastCall_meeting.graphql'

packages/client/components/ActionMeetingSidebar.tsx

@@ -1,5 +1,5 @@
 import graphql from 'babel-plugin-relay/macro'
-import React, {Fragment} from 'react'
+import {Fragment} from 'react'
 import {useFragment} from 'react-relay'
 import {
   ActionMeetingSidebar_meeting$key,

packages/client/components/ActionMeetingUpdates.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
 import graphql from 'babel-plugin-relay/macro'
-import React, {useMemo} from 'react'
+import {useMemo} from 'react'
 import {useFragment} from 'react-relay'
 import {ActionMeetingUpdates_meeting$key} from '../__generated__/ActionMeetingUpdates_meeting.graphql'
 import useAtmosphere from '../hooks/useAtmosphere'

packages/client/components/ActionMeetingUpdatesPrompt.tsx

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled'
 import graphql from 'babel-plugin-relay/macro'
-import React from 'react'
 import {useFragment} from 'react-relay'
 import {ActionMeetingUpdatesPrompt_meeting$key} from '../__generated__/ActionMeetingUpdatesPrompt_meeting.graphql'
 import ActionMeetingUpdatesPromptTeamHelpText from '../modules/meeting/components/ActionMeetingUpdatesPromptTeamHelpText'

packages/client/components/ActionSidebarAgendaItemsSection.tsx

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled'
 import graphql from 'babel-plugin-relay/macro'
-import React from 'react'
 import {useFragment} from 'react-relay'
 import {ActionSidebarAgendaItemsSection_meeting$key} from '../__generated__/ActionSidebarAgendaItemsSection_meeting.graphql'
 import useGotoStageId from '../hooks/useGotoStageId'

packages/client/components/ActionSidebarPhaseListItemChildren.tsx

@@ -1,5 +1,4 @@
 import graphql from 'babel-plugin-relay/macro'
-import React from 'react'
 import {useFragment} from 'react-relay'
 import {ActionSidebarPhaseListItemChildren_meeting$key} from '~/__generated__/ActionSidebarPhaseListItemChildren_meeting.graphql'
 import {NewMeetingPhaseTypeEnum} from '../__generated__/ActionSidebarAgendaItemsSection_meeting.graphql'

packages/client/components/ActivityLibrary/AISearch.tsx

@@ -1,4 +1,5 @@
-import React, {useState} from 'react'
+import * as React from 'react'
+import {useState} from 'react'
 import {GetTemplateSuggestionMutation$data} from '../../__generated__/GetTemplateSuggestionMutation.graphql'
 import useAtmosphere from '../../hooks/useAtmosphere'
 import useMutationProps from '../../hooks/useMutationProps'

packages/client/components/ActivityLibrary/ActivityBadge.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import React from 'react'
+import * as React from 'react'
 
 interface Props {
   className?: string

packages/client/components/ActivityLibrary/ActivityCard.tsx

@@ -1,6 +1,7 @@
 import graphql from 'babel-plugin-relay/macro'
 import clsx from 'clsx'
-import React, {PropsWithChildren, useEffect, useRef, useState} from 'react'
+import * as React from 'react'
+import {PropsWithChildren, useEffect, useRef, useState} from 'react'
 import {useFragment} from 'react-relay'
 import {twMerge} from 'tailwind-merge'
 import {ActivityCard_template$key} from '../../__generated__/ActivityCard_template.graphql'

packages/client/components/ActivityLibrary/ActivityCardFavorite.tsx

@@ -1,7 +1,7 @@
 import {Favorite} from '@mui/icons-material'
 import graphql from 'babel-plugin-relay/macro'
 import clsx from 'clsx'
-import React from 'react'
+import * as React from 'react'
 import {useFragment} from 'react-relay'
 import {ActivityCardFavorite_user$key} from '../../__generated__/ActivityCardFavorite_user.graphql'
 import useAtmosphere from '../../hooks/useAtmosphere'

packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx

@@ -1,6 +1,6 @@
 import graphql from 'babel-plugin-relay/macro'
 import clsx from 'clsx'
-import React, {useEffect, useState} from 'react'
+import {useEffect, useState} from 'react'
 import {PreloadedQuery, usePreloadedQuery} from 'react-relay'
 import {Redirect, useHistory} from 'react-router'
 import {Link} from 'react-router-dom'

packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetailsBadge.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import React from 'react'
+import * as React from 'react'
 
 interface Props {
   className?: string

packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetailsBadges.tsx

@@ -1,5 +1,4 @@
 import graphql from 'babel-plugin-relay/macro'
-import React from 'react'
 import {useFragment} from 'react-relay'
 import {ActivityDetailsBadges_template$key} from '~/__generated__/ActivityDetailsBadges_template.graphql'
 import ActivityDetailsBadge from './ActivityDetailsBadge'

packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetailsCategoryBadge.tsx

@@ -2,7 +2,6 @@ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import graphql from 'babel-plugin-relay/macro'
 import clsx from 'clsx'
-import React from 'react'
 import {useFragment} from 'react-relay'
 import {ActivityDetailsCategoryBadge_template$key} from '~/__generated__/ActivityDetailsCategoryBadge_template.graphql'
 import useTemplateCategoryMutation from '../../../mutations/UpdateTemplateCategoryMutation'

packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetailsRoute.tsx

@@ -1,4 +1,4 @@
-import React, {Suspense} from 'react'
+import {Suspense} from 'react'
 import {Redirect} from 'react-router'
 import activityDetailsQuery, {
   ActivityDetailsQuery

packages/client/components/ActivityLibrary/ActivityDetails/TemplateDetails.tsx

@@ -1,7 +1,8 @@
 import {ContentCopy} from '@mui/icons-material'
 import graphql from 'babel-plugin-relay/macro'
 import clsx from 'clsx'
-import React, {useCallback, useEffect, useState} from 'react'
+import * as React from 'react'
+import {useCallback, useEffect, useState} from 'react'
 import {useFragment} from 'react-relay'
 import {useHistory} from 'react-router'
 import {MeetingTypeEnum} from '~/__generated__/ActivityDetailsQuery.graphql'

packages/client/components/ActivityLibrary/ActivityDetails/components/DetailsBadge.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import React from 'react'
+import * as React from 'react'
 
 interface DetailsBadgeProps {
   className?: string

packages/client/components/ActivityLibrary/ActivityDetails/components/IntegrationsTip.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import React from 'react'
+import * as React from 'react'
 import AzureDevOpsSVG from '../../../AzureDevOpsSVG'
 import GitHubSVG from '../../../GitHubSVG'
 import GitLabSVG from '../../../GitLabSVG'

packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx

@@ -2,7 +2,7 @@ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'
 import graphql from 'babel-plugin-relay/macro'
 import clsx from 'clsx'
-import React, {useEffect, useRef, useState} from 'react'
+import {useEffect, useRef, useState} from 'react'
 import {useFragment} from 'react-relay'
 import {useHistory} from 'react-router'
 import {RRule} from 'rrule'

packages/client/components/ActivityLibrary/ActivityGrid.tsx

@@ -1,5 +1,4 @@
 import graphql from 'babel-plugin-relay/macro'
-import React from 'react'
 import {useFragment} from 'react-relay'
 import {Link} from 'react-router-dom'
 import {ActivityGrid_user$key} from '../../__generated__/ActivityGrid_user.graphql'

packages/client/components/ActivityLibrary/ActivityLibrary.tsx

@@ -1,7 +1,7 @@
 import * as ScrollArea from '@radix-ui/react-scroll-area'
 import graphql from 'babel-plugin-relay/macro'
 import clsx from 'clsx'
-import React, {Fragment, useEffect, useMemo} from 'react'
+import {Fragment, useEffect, useMemo, useState} from 'react'
 import {
   PreloadedQuery,
   commitLocalUpdate,
@@ -229,7 +229,7 @@ export const ActivityLibrary = (props: Props) => {
   const {availableTemplates, organizations} = viewer
   const hasAITemplateFeatureFlag = organizations.some((org) => org.hasAITemplateFlag)
 
-  const [isSearching, setIsSearching] = React.useState(true)
+  const [isSearching, setIsSearching] = useState(true)
   const [templateSearch, refetchTemplateSearch] = useRefetchableFragment<
     ActivityLibraryTemplateSearchRefetchQuery,
     ActivityLibraryTemplateSearch_query$key

packages/client/components/ActivityLibrary/ActivityLibraryCardDescription.tsx

@@ -1,7 +1,6 @@
 import * as ScrollArea from '@radix-ui/react-scroll-area'
 import graphql from 'babel-plugin-relay/macro'
 import clsx from 'clsx'
-import React from 'react'
 import {
   ActivityLibraryCardDescription_template$data,
   ActivityLibraryCardDescription_template$key

packages/client/components/ActivityLibrary/ActivityLibraryEmptyState.tsx

@@ -1,5 +1,4 @@
 import FavoriteIcon from '@mui/icons-material/Favorite'
-import React from 'react'
 import favoriteImg from '../../../../static/images/illustrations/favorite-empty-state.png'
 import halloweenRetrospectiveTemplate from '../../../../static/images/illustrations/halloweenRetrospectiveTemplate.png'
 import {AllCategoryID, QUICK_START_CATEGORY_ID} from './Categories'

packages/client/components/ActivityLibrary/ActivityLibraryRoute.tsx

@@ -1,4 +1,4 @@
-import React, {Suspense} from 'react'
+import {Suspense} from 'react'
 import activityLibraryQuery, {
   ActivityLibraryQuery
 } from '~/__generated__/ActivityLibraryQuery.graphql'

packages/client/components/ActivityLibrary/ActivityLibraryRoutes.tsx

@@ -1,4 +1,4 @@
-import React, {lazy} from 'react'
+import {lazy} from 'react'
 import {Route, Switch, useRouteMatch} from 'react-router'
 import useSubscription from '../../hooks/useSubscription'
 import NotificationSubscription from '../../subscriptions/NotificationSubscription'

packages/client/components/ActivityLibrary/Categories.tsx

@@ -1,5 +1,4 @@
 import FavoriteIcon from '@mui/icons-material/Favorite'
-import React from 'react'
 import {MeetingTypeEnum} from '../../__generated__/MeetingSelectorQuery.graphql'
 import {CardTheme} from './ActivityCard'
 

packages/client/components/ActivityLibrary/CreateActivityCard.tsx

@@ -1,6 +1,5 @@
 import {Add as AddIcon} from '@mui/icons-material'
 import clsx from 'clsx'
-import React from 'react'
 import {Link} from 'react-router-dom'
 
 import {ActivityCard} from './ActivityCard'

packages/client/components/ActivityLibrary/CreateNewActivity/CreateNewActivity.tsx

@@ -1,7 +1,8 @@
 import * as RadioGroup from '@radix-ui/react-radio-group'
 import graphql from 'babel-plugin-relay/macro'
 import clsx from 'clsx'
-import React, {ComponentPropsWithoutRef, useState} from 'react'
+import * as React from 'react'
+import {ComponentPropsWithoutRef, useState} from 'react'
 import {PreloadedQuery, usePreloadedQuery} from 'react-relay'
 import {useHistory} from 'react-router'
 import {Link} from 'react-router-dom'

packages/client/components/ActivityLibrary/CreateNewActivity/CreateNewActivityRoute.tsx

@@ -1,4 +1,4 @@
-import React, {Suspense} from 'react'
+import {Suspense} from 'react'
 
 import useQueryLoaderNow from '../../../hooks/useQueryLoaderNow'
 import {Loader} from '../../../utils/relay/renderLoader'

packages/client/components/ActivityLibrary/ScheduleMeetingButton.tsx

@@ -1,5 +1,4 @@
 import graphql from 'babel-plugin-relay/macro'
-import React from 'react'
 import {useFragment} from 'react-relay'
 import {RRule} from 'rrule'
 import {ScheduleMeetingButton_team$key} from '~/__generated__/ScheduleMeetingButton_team.graphql'

packages/client/components/ActivityLibrary/SearchBar.tsx

@@ -1,5 +1,5 @@
 import {Search as SearchIcon} from '@mui/icons-material'
-import React, {ChangeEvent} from 'react'
+import {ChangeEvent} from 'react'
 
 interface Props {
   searchQuery: string

packages/client/components/ActivityLibrary/TeamPickerModal.tsx

@@ -1,5 +1,5 @@
 import graphql from 'babel-plugin-relay/macro'
-import React, {useEffect, useState} from 'react'
+import {useEffect, useState} from 'react'
 
 import clsx from 'clsx'
 import {useFragment} from 'react-relay'

packages/client/components/AddPollButton.tsx

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled'
 import {PollOutlined} from '@mui/icons-material'
-import React from 'react'
 import {PALETTE} from '~/styles/paletteV3'
 import PlainButton from './PlainButton/PlainButton'
 

packages/client/components/AddTaskButton.tsx

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled'
 import {TaskAltOutlined} from '@mui/icons-material'
-import React from 'react'
 import {PALETTE} from '~/styles/paletteV3'
 import PlainButton from './PlainButton/PlainButton'
 

packages/client/components/AddTaskButton/AddTaskButton.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled'
-import React, {forwardRef, Ref} from 'react'
+import * as React from 'react'
+import {forwardRef, Ref} from 'react'
 import IconLabel from '../IconLabel'
 import RaisedButton from '../RaisedButton'
 

packages/client/components/AddTeamDialog.tsx

@@ -1,5 +1,5 @@
 import graphql from 'babel-plugin-relay/macro'
-import React, {useState} from 'react'
+import {useState} from 'react'
 import {PreloadedQuery, useFragment, usePreloadedQuery} from 'react-relay'
 import useRouter from '~/hooks/useRouter'
 import AddTeamMutation from '~/mutations/AddTeamMutation'

packages/client/components/AddTeamDialogRoot.tsx

@@ -1,4 +1,4 @@
-import React, {Suspense} from 'react'
+import {Suspense} from 'react'
 import addTeamDialogQuery, {AddTeamDialogQuery} from '../__generated__/AddTeamDialogQuery.graphql'
 import useQueryLoaderNow from '../hooks/useQueryLoaderNow'
 import {Loader} from '../utils/relay/renderLoader'

packages/client/components/AddTeamMemberAvatarButton.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled'
 import {PersonAdd} from '@mui/icons-material'
 import graphql from 'babel-plugin-relay/macro'
-import React from 'react'
 import {useFragment} from 'react-relay'
 import {PALETTE} from '~/styles/paletteV3'
 import {AddTeamMemberAvatarButton_teamMembers$key} from '../__generated__/AddTeamMemberAvatarButton_teamMembers.graphql'

packages/client/components/AddTeamMemberModal.tsx

@@ -1,7 +1,8 @@
 import styled from '@emotion/styled'
 import {Error as ErrorIcon, Warning} from '@mui/icons-material'
 import graphql from 'babel-plugin-relay/macro'
-import React, {useState} from 'react'
+import * as React from 'react'
+import {useState} from 'react'
 import {useFragment} from 'react-relay'
 import useAtmosphere from '~/hooks/useAtmosphere'
 import useMutationProps from '~/hooks/useMutationProps'

packages/client/components/AddTeamMemberModalDemo.tsx

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled'
-import React from 'react'
 import modalTeamInvitePng from '../../../static/images/illustrations/illus-modal-team-invite.png'
 import hasToken from '../utils/hasToken'
 import DemoCreateAccountPrimaryButton from './DemoCreateAccountPrimaryButton'

packages/client/components/AddTeamMemberModalSuccess.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import React, {Component} from 'react'
+import {Component} from 'react'
 import DialogContainer from './DialogContainer'
 import DialogContent from './DialogContent'
 import DialogTitle from './DialogTitle'

packages/client/components/AddToAzureMenuItem.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
 import graphql from 'babel-plugin-relay/macro'
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import {useFragment} from 'react-relay'
 import {AddToAzureMenuItem_AzureIntegration$key} from '../__generated__/AddToAzureMenuItem_AzureIntegration.graphql'
 import useAtmosphere from '../hooks/useAtmosphere'

packages/client/components/AddToGitHubMenuItem.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import useAtmosphere from '../hooks/useAtmosphere'
 import {MenuMutationProps} from '../hooks/useMutationProps'
 import {ICON_SIZE} from '../styles/typographyV2'

packages/client/components/AddToGitLabMenuItem.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
 import graphql from 'babel-plugin-relay/macro'
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import {useFragment} from 'react-relay'
 import GitLabClientManager from '~/utils/GitLabClientManager'
 import {AddToGitLabMenuItem_GitLabIntegration$key} from '../__generated__/AddToGitLabMenuItem_GitLabIntegration.graphql'

packages/client/components/AddToJiraMenuItem.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import useAtmosphere from '../hooks/useAtmosphere'
 import {MenuMutationProps} from '../hooks/useMutationProps'
 import {ICON_SIZE} from '../styles/typographyV2'