Create codemod for addressing ESLint warnings (#10032)

src/view/com/util/BottomSheetCustomBackdrop.tsx

@@ -8,7 +8,6 @@ import Animated, {
 import {type BottomSheetBackdropProps} from '@discord/bottom-sheet/src'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
-import type React from 'react'
 
 export function createCustomBackdrop(
   onClose?: () => void,

src/view/com/util/EmptyState.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {isValidElement} from 'react'
 import {type StyleProp, type TextStyle, type ViewStyle} from 'react-native'
 import {View} from 'react-native'
 
@@ -45,7 +45,7 @@ export function EmptyState({
       return placeholderIcon
     }
 
-    if (React.isValidElement(icon)) {
+    if (isValidElement(icon)) {
       return icon
     }
 
@@ -77,7 +77,7 @@ export function EmptyState({
           a.rounded_full,
           a.mt_5xl,
           {height: 64, width: 64},
-          React.isValidElement(icon)
+          isValidElement(icon)
             ? a.bg_transparent
             : [isTabletOrDesktop && {marginTop: 50}],
         ]}>

src/view/com/util/MainScrollProvider.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect} from 'react'
+import {useCallback, useEffect} from 'react'
 import {type NativeScrollEvent} from 'react-native'
 import {
   clamp,
@@ -25,7 +25,7 @@ export function MainScrollProvider({children}: {children: React.ReactNode}) {
   const startMode = useSharedValue<number | null>(null)
   const didJustRestoreScroll = useSharedValue<boolean>(false)
 
-  const setMode = React.useCallback(
+  const setMode = useCallback(
     (v: boolean) => {
       'worklet'
       headerMode.set(() =>

src/view/com/util/ViewSelector.tsx

@@ -1,4 +1,13 @@
-import React, {type JSX, useEffect, useState} from 'react'
+import {
+  forwardRef,
+  type JSX,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import {
   type NativeScrollEvent,
   type NativeSyntheticEvent,
@@ -25,7 +34,7 @@ export type ViewSelectorHandle = {
   scrollToTop: () => void
 }
 
-export const ViewSelector = React.forwardRef<
+export const ViewSelector = forwardRef<
   ViewSelectorHandle,
   {
     sections: string[]
@@ -61,14 +70,14 @@ export const ViewSelector = React.forwardRef<
 ) {
   const pal = usePalette('default')
   const [selectedIndex, setSelectedIndex] = useState<number>(0)
-  const flatListRef = React.useRef<FlatList_INTERNAL>(null)
+  const flatListRef = useRef<FlatList_INTERNAL>(null)
 
   // events
   // =
 
-  const keyExtractor = React.useCallback((item: any) => item._reactKey, [])
+  const keyExtractor = useCallback((item: any) => item._reactKey, [])
 
-  const onPressSelection = React.useCallback(
+  const onPressSelection = useCallback(
     (index: number) => setSelectedIndex(clamp(index, 0, sections.length)),
     [setSelectedIndex, sections],
   )
@@ -76,7 +85,7 @@ export const ViewSelector = React.forwardRef<
     onSelectView?.(selectedIndex)
   }, [selectedIndex, onSelectView])
 
-  React.useImperativeHandle(ref, () => ({
+  useImperativeHandle(ref, () => ({
     scrollToTop: () => {
       flatListRef.current?.scrollToOffset({offset: 0})
     },
@@ -85,7 +94,7 @@ export const ViewSelector = React.forwardRef<
   // rendering
   // =
 
-  const renderItemInternal = React.useCallback(
+  const renderItemInternal = useCallback(
     ({item}: {item: any}) => {
       if (item === HEADER_ITEM) {
         if (renderHeader) {
@@ -107,10 +116,7 @@ export const ViewSelector = React.forwardRef<
     [sections, selectedIndex, onPressSelection, renderHeader, renderItem],
   )
 
-  const data = React.useMemo(
-    () => [HEADER_ITEM, SELECTOR_ITEM, ...items],
-    [items],
-  )
+  const data = useMemo(() => [HEADER_ITEM, SELECTOR_ITEM, ...items], [items])
   return (
     <FlatList_INTERNAL
       // @ts-expect-error FlatList_INTERNAL ref type is wrong -sfn

src/view/com/util/Views.web.tsx

@@ -12,7 +12,7 @@
  * need to match layout but which aren't scrolled.
  */
 
-import React from 'react'
+import {forwardRef} from 'react'
 import {
   type FlatList,
   type FlatListProps,
@@ -37,7 +37,7 @@ interface AddedProps {
 /**
  * @deprecated use `Layout` components
  */
-export const CenteredView = React.forwardRef(function CenteredView(
+export const CenteredView = forwardRef(function CenteredView(
   {
     style,
     topBorder,
@@ -66,7 +66,7 @@ export const CenteredView = React.forwardRef(function CenteredView(
   return <View ref={ref} style={style} {...props} />
 })
 
-export const FlatList_INTERNAL = React.forwardRef(function FlatListImpl<ItemT>(
+export const FlatList_INTERNAL = forwardRef(function FlatListImpl<ItemT>(
   {
     contentContainerStyle,
     style,
@@ -141,7 +141,7 @@ export const FlatList_INTERNAL = React.forwardRef(function FlatListImpl<ItemT>(
 /**
  * @deprecated use `Layout` components
  */
-export const ScrollView = React.forwardRef(function ScrollViewImpl(
+export const ScrollView = forwardRef(function ScrollViewImpl(
   {contentContainerStyle, ...props}: React.PropsWithChildren<ScrollViewProps>,
   ref: React.Ref<Animated.ScrollView>,
 ) {

src/view/com/util/WebAuxClickWrapper.tsx

@@ -1,5 +1,4 @@
 import {Platform} from 'react-native'
-import type React from 'react'
 
 const onMouseUp = (e: React.MouseEvent & {target: HTMLElement}) => {
   // Only handle whenever it is the middle button

src/view/com/util/forms/Button.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useState} from 'react'
 import {
   ActivityIndicator,
   type GestureResponderEvent,
@@ -148,8 +148,8 @@ export function Button({
     },
   )
 
-  const [isLoading, setIsLoading] = React.useState(false)
-  const onPressWrapped = React.useCallback(
+  const [isLoading, setIsLoading] = useState(false)
+  const onPressWrapped = useCallback(
     async (event: GestureResponderEvent) => {
       event.stopPropagation()
       event.preventDefault()
@@ -160,7 +160,7 @@ export function Button({
     [onPress, withLoading],
   )
 
-  const getStyle = React.useCallback(
+  const getStyle = useCallback(
     (state: PressableStateCallbackType) => {
       const arr = [typeOuterStyle, styles.outer, style]
       if (state.pressed) {
@@ -173,7 +173,7 @@ export function Button({
     [typeOuterStyle, style],
   )
 
-  const renderChildern = React.useCallback(() => {
+  const renderChildern = useCallback(() => {
     if (!label) {
       return children
     }

src/view/com/util/layouts/LoggedOutLayout.tsx

@@ -1,5 +1,4 @@
 import {ScrollView, StyleSheet, View} from 'react-native'
-import type React from 'react'
 
 import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle'
 import {useIsKeyboardVisible} from '#/lib/hooks/useIsKeyboardVisible'

src/view/com/util/text/Text.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {useMemo} from 'react'
 import {StyleSheet, type TextProps} from 'react-native'
 import {UITextView} from 'react-native-uitextview'
 
@@ -57,7 +57,7 @@ function Text_DEPRECATED({
     }
   }
 
-  const textProps = React.useMemo(() => {
+  const textProps = useMemo(() => {
     const typography = theme.typography[type]
     const lineHeightStyle = lineHeight ? lh(theme, type, lineHeight) : undefined