Merge branch 'react-jsx' into 'main'

tsconfig: switch to react-jsx transform, update code to not import React directly

See merge request soapbox-pub/soapbox!3222

src/actions/moderation.tsx

@@ -2,7 +2,6 @@ import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
 import trashIcon from '@tabler/icons/outline/trash.svg';
 import userMinusIcon from '@tabler/icons/outline/user-minus.svg';
 import userOffIcon from '@tabler/icons/outline/user-off.svg';
-import React from 'react';
 import { defineMessages, IntlShape } from 'react-intl';
 
 import { fetchAccountByUsername } from 'soapbox/actions/accounts';

src/components/__mocks__/react-inlinesvg.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 
 interface IInlineSVG {
   loader?: JSX.Element;

src/components/account-search.tsx

@@ -1,7 +1,7 @@
 import searchIcon from '@tabler/icons/outline/search.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import AutosuggestAccountInput from 'soapbox/components/autosuggest-account-input';

src/components/account.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { buildAccount } from 'soapbox/jest/factory';

src/components/account.tsx

@@ -1,5 +1,5 @@
 import pencilIcon from '@tabler/icons/outline/pencil.svg';
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 

src/components/animated-number.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FormattedNumber } from 'react-intl';
 import { TransitionMotion, spring } from 'react-motion';
 

src/components/announcements/announcement-content.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { getTextDirection } from 'soapbox/utils/rtl';

src/components/announcements/announcement.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedDate } from 'react-intl';
 
 import { Stack, Text } from 'soapbox/components/ui';

src/components/announcements/announcements-panel.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import ReactSwipeableViews from 'react-swipeable-views';
 import { createSelector } from 'reselect';

src/components/announcements/emoji.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 
 import unicodeMapping from 'soapbox/features/emoji/mapping';
 import { useSettings } from 'soapbox/hooks';

src/components/announcements/reaction.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import { useAnnouncements } from 'soapbox/api/hooks/announcements';
 import AnimatedNumber from 'soapbox/components/animated-number';

src/components/announcements/reactions-bar.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 import { TransitionMotion, spring } from 'react-motion';
 
 import { useAnnouncements } from 'soapbox/api/hooks/announcements';

src/components/attachment-thumbs.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import { Suspense } from 'react';
 
 import { openModal } from 'soapbox/actions/modals';
 import { MediaGallery } from 'soapbox/features/ui/util/async-components';

src/components/authorize-reject-buttons.tsx

@@ -2,7 +2,7 @@ import playerStopFilledIcon from '@tabler/icons/filled/player-stop.svg';
 import checkIcon from '@tabler/icons/outline/check.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { HStack, IconButton, Text } from 'soapbox/components/ui';

src/components/autosuggest-account-input.tsx

@@ -1,6 +1,6 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import throttle from 'lodash/throttle';
-import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 
 import { accountSearch } from 'soapbox/actions/accounts';
 import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input';

src/components/autosuggest-emoji.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';

src/components/autosuggest-emoji.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { isCustomEmoji } from 'soapbox/features/emoji';
 import unicodeMapping from 'soapbox/features/emoji/mapping';

src/components/autosuggest-input.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 
 import AutosuggestEmoji from 'soapbox/components/autosuggest-emoji';
 import Icon from 'soapbox/components/icon';

src/components/autosuggest-location.tsx

@@ -2,7 +2,6 @@ import buildingCommunityIcon from '@tabler/icons/outline/building-community.svg'
 import homeIcon from '@tabler/icons/outline/home-2.svg';
 import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
 import roadIcon from '@tabler/icons/outline/road.svg';
-import React from 'react';
 
 import { useAppSelector } from 'soapbox/hooks';
 

src/components/avatar-stack.tsx

@@ -1,6 +1,5 @@
 import clsx from 'clsx';
 import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
-import React from 'react';
 
 import { Avatar, HStack } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';

src/components/badge.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';

src/components/badge.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { hexToHsl } from 'soapbox/utils/theme';
 

src/components/big-card.tsx

@@ -1,5 +1,4 @@
 import xIcon from '@tabler/icons/outline/x.svg';
-import React from 'react';
 
 import { Card, CardBody, Stack, Text } from 'soapbox/components/ui';
 import IconButton from 'soapbox/components/ui/icon-button/icon-button';

src/components/birthday-input.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { useInstance, useFeatures } from 'soapbox/hooks';

src/components/birthday-panel.tsx

@@ -1,5 +1,5 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
-import React, { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { fetchBirthdayReminders } from 'soapbox/actions/accounts';
@@ -37,7 +37,7 @@ const BirthdayPanel = ({ limit }: IBirthdayPanel) => {
     });
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     handleFetchBirthdayReminders();
 
     return () => {

src/components/blurhash.tsx

@@ -1,5 +1,5 @@
 import { decode } from 'blurhash';
-import React, { useRef, useEffect } from 'react';
+import { useRef, useEffect, memo } from 'react';
 
 interface IBlurhash {
   /** Hash to render */
@@ -56,4 +56,4 @@ const Blurhash: React.FC<IBlurhash> = ({
   );
 };
 
-export default React.memo(Blurhash);
+export default memo(Blurhash);

src/components/copyable-input.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Button, HStack, Input } from './ui';

src/components/display-name-inline.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { useSoapboxConfig } from 'soapbox/hooks';
 

src/components/display-name.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { buildAccount } from 'soapbox/jest/factory';

src/components/display-name.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 
 import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
 import { useSoapboxConfig } from 'soapbox/hooks';

src/components/domain.tsx

@@ -1,5 +1,4 @@
 import lockOpenIcon from '@tabler/icons/outline/lock-open.svg';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { unblockDomain } from 'soapbox/actions/domain-blocks';

src/components/dropdown-menu/dropdown-menu-item.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { Counter, Icon } from '../ui';

src/components/dropdown-menu/dropdown-menu.tsx

@@ -2,7 +2,7 @@ import { offset, Placement, useFloating, flip, arrow, shift } from '@floating-ui
 import dotsIcon from '@tabler/icons/outline/dots.svg';
 import clsx from 'clsx';
 import { supportsPassiveEvents } from 'detect-passive-events';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { cloneElement, useEffect, useMemo, useRef, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { closeDropdownMenu as closeDropdownMenuRedux, openDropdownMenu } from 'soapbox/actions/dropdown-menu';
@@ -269,7 +269,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
   return (
     <>
       {children ? (
-        React.cloneElement(children, {
+        cloneElement(children, {
           disabled,
           onClick: handleClick,
           onKeyPress: handleKeyPress,

src/components/emoji-graphic.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 
 import Emoji from 'soapbox/components/ui/emoji/emoji';
 

src/components/event-preview.tsx

@@ -1,7 +1,6 @@
 import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
 import userIcon from '@tabler/icons/outline/user.svg';
 import clsx from 'clsx';
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import EventActionButton from 'soapbox/features/event/components/event-action-button';

src/components/extended-video-player.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { isIOS } from 'soapbox/is-mobile';
 

src/components/fork-awesome-icon.tsx

@@ -6,7 +6,6 @@
  */
 
 import clsx from 'clsx';
-import React from 'react';
 
 export interface IForkAwesomeIcon extends React.HTMLAttributes<HTMLLIElement> {
   id: string;

src/components/gdpr-banner.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Banner, Button, HStack, Stack, Text } from 'soapbox/components/ui';

src/components/group-card.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 
 import GroupHeaderImage from 'soapbox/features/group/components/group-header-image';
 import GroupMemberCount from 'soapbox/features/group/components/group-member-count';

src/components/groups/group-avatar.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 
 import { GroupRoles } from 'soapbox/schemas/group-member';
 

src/components/groups/popover/group-popover.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link, matchPath, useHistory } from 'react-router-dom';
 

src/components/hashtag-link.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 
 import Link from './link';
 

src/components/hashtag.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { Sparklines, SparklinesCurve } from 'react-sparklines';

src/components/helmet.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useMemo, useEffect } from 'react';
 import { Helmet as ReactHelmet } from 'react-helmet';
 
 import { useStatContext } from 'soapbox/contexts/stat-context';
@@ -25,7 +25,7 @@ const Helmet: React.FC<IHelmet> = ({ children }) => {
   const unreadCount = useAppSelector((state) => getNotifTotals(state) + unreadChatsCount);
   const { demetricator } = useSettings();
 
-  const hasUnreadNotifications = React.useMemo(() => !(unreadCount < 1 || demetricator), [unreadCount, demetricator]);
+  const hasUnreadNotifications = useMemo(() => !(unreadCount < 1 || demetricator), [unreadCount, demetricator]);
 
   const addCounter = (string: string) => {
     return hasUnreadNotifications ? `(${unreadCount}) ${string}` : string;
@@ -39,7 +39,7 @@ const Helmet: React.FC<IHelmet> = ({ children }) => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     updateFaviconBadge();
   }, [unreadCount, demetricator]);
 

src/components/hover-ref-wrapper.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 
 import { fetchAccount } from 'soapbox/actions/accounts';
 import {

src/components/hover-status-wrapper.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { useDispatch } from 'react-redux';
 
 import {

src/components/icon-button.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 
 import Icon from 'soapbox/components/icon';
 

src/components/icon-with-counter.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 
 import Icon, { IIcon } from 'soapbox/components/icon';
 import { Counter } from 'soapbox/components/ui';

src/components/icon.tsx

@@ -4,7 +4,6 @@
  */
 
 import clsx from 'clsx';
-import React from 'react';
 import InlineSVG from 'react-inlinesvg'; // eslint-disable-line no-restricted-imports
 
 export interface IIcon extends React.HTMLAttributes<HTMLDivElement> {

src/components/landing-gradient.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 
 /** Fullscreen gradient used as a backdrop to public pages. */
 const LandingGradient: React.FC = () => (

src/components/link.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link as Comp, LinkProps } from 'react-router-dom';
 
 const Link = (props: LinkProps) => (

src/components/list.tsx

@@ -1,7 +1,7 @@
 import checkIcon from '@tabler/icons/outline/check.svg';
 import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
 import clsx from 'clsx';
-import React from 'react';
+import { Children, cloneElement, isValidElement, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 
 import { SelectDropdown } from '../features/forms';
@@ -38,12 +38,12 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, to, onClick, onS
 
   const LabelComp = to || onClick || onSelect ? 'span' : 'label';
 
-  const renderChildren = React.useCallback(() => {
+  const renderChildren = useCallback(() => {
-    return React.Children.map(children, (child) => {
+    return Children.map(children, (child) => {
-      if (React.isValidElement(child)) {
+      if (isValidElement(child)) {
         const isSelect = child.type === SelectDropdown || child.type === Select;
 
-        return React.cloneElement(child, {
+        return cloneElement(child, {
           // @ts-ignore
           id: domId,
           className: clsx({

src/components/load-gap.tsx

@@ -1,5 +1,4 @@
 import dotsIcon from '@tabler/icons/outline/dots.svg';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import Icon from 'soapbox/components/icon';

src/components/load-more.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Button } from 'soapbox/components/ui';

src/components/loading-screen.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 
 import LandingGradient from 'soapbox/components/landing-gradient';
 import { Spinner } from 'soapbox/components/ui';

src/components/location-search.tsx

@@ -3,7 +3,7 @@ import searchIcon from '@tabler/icons/outline/search.svg';
 import clsx from 'clsx';
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import throttle from 'lodash/throttle';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { locationSearch } from 'soapbox/actions/events';

src/components/markup.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import Text, { IText } from './ui/text/text';
 import './markup.css';
@@ -7,7 +7,7 @@ interface IMarkup extends IText {
 }
 
 /** Styles HTML markup returned by the API, such as in account bios and statuses. */
-const Markup = React.forwardRef<any, IMarkup>((props, ref) => {
+const Markup = forwardRef<any, IMarkup>((props, ref) => {
   return (
     <Text ref={ref} {...props} data-markup />
   );

src/components/media-gallery.tsx

@@ -1,7 +1,7 @@
 import paperclipIcon from '@tabler/icons/outline/paperclip.svg';
 import volumeIcon from '@tabler/icons/outline/volume.svg';
 import clsx from 'clsx';
-import React, { useState, useRef, useLayoutEffect, CSSProperties } from 'react';
+import { useState, useRef, useLayoutEffect, CSSProperties } from 'react';
 
 import Blurhash from 'soapbox/components/blurhash';
 import StillImage from 'soapbox/components/still-image';
@@ -17,7 +17,7 @@ import SvgIcon from './ui/icon/svg-icon';
 
 import type { List as ImmutableList } from 'immutable';
 
-// const Gameboy = React.lazy(() => import('./gameboy'));
+// const Gameboy = lazy(() => import('./gameboy'));
 
 const ATTACHMENT_LIMIT = 4;
 const MAX_FILENAME_LENGTH = 45;

src/components/mention.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link } from 'react-router-dom';
 
 import { shortenNostr } from 'soapbox/utils/nostr';

src/components/missing-indicator.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Card, CardBody, Stack, Text } from './ui';

src/components/modal-root.tsx

@@ -1,6 +1,6 @@
 import trashIcon from '@tabler/icons/outline/trash.svg';
 import clsx from 'clsx';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 

src/components/navlinks.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link } from 'react-router-dom';
 
 import { Text } from 'soapbox/components/ui';

src/components/outline-box.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 
 interface IOutlineBox extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;

src/components/pending-items-row.tsx

@@ -1,7 +1,6 @@
 import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
 import exclamationCircleIcon from '@tabler/icons/outline/exclamation-circle.svg';
 import clsx from 'clsx';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 

src/components/polls/poll-footer.test.tsx

@@ -1,6 +1,5 @@
 
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';
 import { beforeEach, describe, expect, it } from 'vitest';

src/components/polls/poll-footer.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { fetchPoll, vote } from 'soapbox/actions/polls';

src/components/polls/poll-option.tsx

@@ -1,7 +1,6 @@
 import checkIcon from '@tabler/icons/outline/check.svg';
 import circleCheckIcon from '@tabler/icons/outline/circle-check.svg';
 import clsx from 'clsx';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Motion, presets, spring } from 'react-motion';
 

src/components/polls/poll.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';

src/components/preview-card.tsx

@@ -4,7 +4,7 @@ import playerPlayIcon from '@tabler/icons/outline/player-play.svg';
 import zoomInIcon from '@tabler/icons/outline/zoom-in.svg';
 import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 
 import Blurhash from 'soapbox/components/blurhash';
 import { HStack, Stack, Text, Icon } from 'soapbox/components/ui';

src/components/profile-hover-card.tsx

@@ -1,7 +1,7 @@
 import { useFloating } from '@floating-ui/react';
 import calendarIcon from '@tabler/icons/outline/calendar.svg';
 import clsx from 'clsx';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 

src/components/progress-circle.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 
 interface IProgressCircle {
   progress: number;

src/components/pull-to-refresh.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import PTRComponent from 'react-simple-pull-to-refresh';
 
 import { Spinner } from 'soapbox/components/ui';

src/components/pullable.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 
 import PullToRefresh from './pull-to-refresh';
 

src/components/quoted-status-indicator.tsx

@@ -1,5 +1,5 @@
 import quoteIcon from '@tabler/icons/outline/quote.svg';
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 
 import { HStack, Icon, Text } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';

src/components/quoted-status.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { render, screen, rootState } from 'soapbox/jest/test-helpers';

src/components/quoted-status.tsx

@@ -1,6 +1,6 @@
 import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
-import React, { MouseEventHandler, useEffect, useRef, useState } from 'react';
+import { MouseEventHandler, useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 

src/components/radio.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+
+import { Children, cloneElement } from 'react';
 
 import List, { ListItem } from './list';
 
@@ -8,8 +9,8 @@ interface IRadioGroup {
 }
 
 const RadioGroup = ({ onChange, children }: IRadioGroup) => {
-  const childrenWithProps = React.Children.map(children, child =>
+  const childrenWithProps = Children.map(children, child =>
-    React.cloneElement(child, { onChange }),
+    cloneElement(child, { onChange }),
   );
 
   return <List>{childrenWithProps}</List>;

src/components/relative-timestamp.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component } from 'react';
 import { injectIntl, defineMessages, IntlShape, FormatDateOptions } from 'react-intl';
 
 import Text, { IText } from './ui/text/text';
@@ -124,7 +124,7 @@ interface RelativeTimestampState {
 }
 
 /** Displays a timestamp compared to the current time, eg "1m" for one minute ago. */
-class RelativeTimestamp extends React.Component<RelativeTimestampProps, RelativeTimestampState> {
+class RelativeTimestamp extends Component<RelativeTimestampProps, RelativeTimestampState> {
 
   _timer: NodeJS.Timeout | undefined;
 

src/components/safe-embed.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 interface ISafeEmbed {
   /** Styles for the outer frame element. */

src/components/scroll-context.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 
 interface IScrollContext {

src/components/scroll-top-button.test.tsx

@@ -1,5 +1,4 @@
 
-import React from 'react';
 import { defineMessages } from 'react-intl';
 import { describe, expect, it } from 'vitest';
 

src/components/scroll-top-button.tsx

@@ -1,6 +1,6 @@
 import arrowBarToUpIcon from '@tabler/icons/outline/arrow-bar-to-up.svg';
 import throttle from 'lodash/throttle';
-import React, { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useIntl, MessageDescriptor } from 'react-intl';
 
 import { Icon, Text } from 'soapbox/components/ui';

src/components/scrollable-list.tsx

@@ -1,5 +1,5 @@
 import debounce from 'lodash/debounce';
-import React, { useEffect, useRef, useMemo, useCallback } from 'react';
+import { useEffect, useRef, useMemo, useCallback, forwardRef } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Virtuoso, Components, VirtuosoProps, VirtuosoHandle, ListRange, IndexLocationWithAlign } from 'react-virtuoso';
 
@@ -30,7 +30,7 @@ const Item: Components<JSX.Element, Context>['Item'] = ({ context, ...rest }) =>
 
 /** Custom Virtuoso List component for the outer container. */
 // Ensure the className winds up here
-const List: Components<JSX.Element, Context>['List'] = React.forwardRef((props, ref) => {
+const List: Components<JSX.Element, Context>['List'] = forwardRef((props, ref) => {
   const { context, ...rest } = props;
   return <div ref={ref} className={context?.listClassName} {...rest} />;
 });
@@ -84,7 +84,7 @@ interface IScrollableList extends VirtuosoProps<any, any> {
 }
 
 /** Legacy ScrollableList with Virtuoso for backwards-compatibility. */
-const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
+const ScrollableList = forwardRef<VirtuosoHandle, IScrollableList>(({
   scrollKey,
   prepend = null,
   alwaysPrepend,

src/components/sentry-feedback-form.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Textarea, Form, Button, FormGroup, FormActions, Text } from 'soapbox/components/ui';

src/components/sidebar-menu.tsx

@@ -16,9 +16,8 @@ import userPlusIcon from '@tabler/icons/outline/user-plus.svg';
 import userIcon from '@tabler/icons/outline/user.svg';
 import worldIcon from '@tabler/icons/outline/world.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
-/* eslint-disable jsx-a11y/interactive-supports-focus */
 import clsx from 'clsx';
-import React, { useCallback } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link, NavLink } from 'react-router-dom';
 
@@ -110,9 +109,9 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
   const { instance } = useInstance();
   const settingsNotifications = useSettingsNotifications();
 
-  const closeButtonRef = React.useRef(null);
+  const closeButtonRef = useRef(null);
 
-  const [switcher, setSwitcher] = React.useState(false);
+  const [switcher, setSwitcher] = useState(false);
 
   const onClose = () => dispatch(closeSidebar());
 
@@ -147,7 +146,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
     </a>
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     dispatch(fetchOwnAccounts());
   }, []);
 

src/components/sidebar-navigation-link.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import { forwardRef } from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
 
 import { Icon, Text } from './ui';
@@ -22,7 +22,7 @@ interface ISidebarNavigationLink {
 }
 
 /** Desktop sidebar navigation link. */
-const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, ref: React.ForwardedRef<HTMLAnchorElement>): JSX.Element => {
+const SidebarNavigationLink = forwardRef((props: ISidebarNavigationLink, ref: React.ForwardedRef<HTMLAnchorElement>): JSX.Element => {
   const { icon, activeIcon, text, to = '', count, countMax, onClick } = props;
   const { pathname } = useLocation();
 

src/components/sidebar-navigation.tsx

@@ -20,7 +20,6 @@ import settingsIcon from '@tabler/icons/outline/settings.svg';
 import userPlusIcon from '@tabler/icons/outline/user-plus.svg';
 import userIcon from '@tabler/icons/outline/user.svg';
 import worldIcon from '@tabler/icons/outline/world.svg';
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { Stack } from 'soapbox/components/ui';

src/components/site-error-boundary.tsx

@@ -1,4 +1,4 @@
-import React, { type ErrorInfo, useRef, useState } from 'react';
+import { type ErrorInfo, useRef, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { FormattedMessage } from 'react-intl';
 

src/components/site-logo.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 
 import soapboxLogoWhiteSrc from 'soapbox/assets/images/soapbox-logo-white.svg';
 import soapboxLogoSrc from 'soapbox/assets/images/soapbox-logo.svg';

src/components/status-action-bar.tsx

@@ -30,7 +30,6 @@ import thumbUpIcon from '@tabler/icons/outline/thumb-up.svg';
 import trashIcon from '@tabler/icons/outline/trash.svg';
 import uploadIcon from '@tabler/icons/outline/upload.svg';
 import volume3Icon from '@tabler/icons/outline/volume-3.svg';
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 

src/components/status-action-button.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Text, Icon, Emoji } from 'soapbox/components/ui';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
@@ -38,7 +38,7 @@ interface IStatusActionButton extends React.ButtonHTMLAttributes<HTMLButtonEleme
   theme?: 'default' | 'inverse';
 }
 
-const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButton>((props, ref): JSX.Element => {
+const StatusActionButton = forwardRef<HTMLButtonElement, IStatusActionButton>((props, ref): JSX.Element => {
   const { icon, className, iconClassName, active, color, filled = false, count = 0, emoji, text, theme = 'default', ...filteredProps } = props;
 
   const renderIcon = () => {

src/components/status-content.tsx

@@ -1,7 +1,7 @@
 import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
 import clsx from 'clsx';
 import parse, { Element, type HTMLReactParserOptions, domToReact, type DOMNode } from 'html-react-parser';
-import React, { useState, useRef, useLayoutEffect, useMemo } from 'react';
+import { useState, useRef, useLayoutEffect, useMemo, memo } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import Icon from 'soapbox/components/icon';
@@ -202,4 +202,4 @@ const StatusContent: React.FC<IStatusContent> = ({
   }
 };
 
-export default React.memo(StatusContent);
+export default memo(StatusContent);

src/components/status-hover-card.tsx

@@ -1,6 +1,6 @@
 import { useFloating } from '@floating-ui/react';
 import clsx from 'clsx';
-import React, { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import {

src/components/status-list.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
-import React, { useRef, useCallback } from 'react';
+import { useRef, useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import LoadGap from 'soapbox/components/load-gap';

src/components/status-media.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import { Suspense } from 'react';
 
 import { openModal } from 'soapbox/actions/modals';
 import AttachmentThumbs from 'soapbox/components/attachment-thumbs';

src/components/status-reaction-wrapper.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, cloneElement } from 'react';
 
 import { simpleEmojiReact } from 'soapbox/actions/emoji-reacts';
 import { openModal } from 'soapbox/actions/modals';
@@ -100,7 +100,7 @@ const StatusReactionWrapper: React.FC<IStatusReactionWrapper> = ({ statusId, chi
 
   return (
     <div className='relative' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
-      {React.cloneElement(children, {
+      {cloneElement(children, {
         onClick: handleClick,
         ref: setReferenceElement,
       })}

src/components/status-reply-mentions.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedList, FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 

src/components/status.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { buildAccount } from 'soapbox/jest/factory';

src/components/status.tsx

@@ -2,7 +2,7 @@ import circlesIcon from '@tabler/icons/outline/circles.svg';
 import pinnedIcon from '@tabler/icons/outline/pinned.svg';
 import repeatIcon from '@tabler/icons/outline/repeat.svg';
 import clsx from 'clsx';
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 

src/components/statuses/sensitive-content-overlay.test.tsx

@@ -1,6 +1,5 @@
 
 import { Map as ImmutableMap } from 'immutable';
-import React from 'react';
 import { beforeEach, describe, expect, it } from 'vitest';
 
 import { fireEvent, render, rootState, screen } from 'soapbox/jest/test-helpers';