Create codemod for addressing ESLint warnings (#10032)

src/components/Button.tsx

@@ -1,4 +1,11 @@
-import React from 'react'
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react'
 import {
   type AccessibilityProps,
   type GestureResponderEvent,
@@ -108,7 +115,7 @@ export type ButtonProps = Pick<
 export type ButtonTextProps = TextProps &
   VariantProps & {disabled?: boolean; emoji?: boolean}
 
-const Context = React.createContext<VariantProps & ButtonState>({
+const Context = createContext<VariantProps & ButtonState>({
   hovered: false,
   focused: false,
   pressed: false,
@@ -117,10 +124,10 @@ const Context = React.createContext<VariantProps & ButtonState>({
 Context.displayName = 'ButtonContext'
 
 export function useButtonContext() {
-  return React.useContext(Context)
+  return useContext(Context)
 }
 
-export const Button = React.forwardRef<View, ButtonProps>(
+export const Button = forwardRef<View, ButtonProps>(
   (
     {
       children,
@@ -153,13 +160,13 @@ export const Button = React.forwardRef<View, ButtonProps>(
     }
 
     const t = useTheme()
-    const [state, setState] = React.useState({
+    const [state, setState] = useState({
       pressed: false,
       hovered: false,
       focused: false,
     })
 
-    const onPressIn = React.useCallback(
+    const onPressIn = useCallback(
       (e: GestureResponderEvent) => {
         setState(s => ({
           ...s,
@@ -169,7 +176,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
       },
       [setState, onPressInOuter],
     )
-    const onPressOut = React.useCallback(
+    const onPressOut = useCallback(
       (e: GestureResponderEvent) => {
         setState(s => ({
           ...s,
@@ -179,7 +186,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
       },
       [setState, onPressOutOuter],
     )
-    const onHoverIn = React.useCallback(
+    const onHoverIn = useCallback(
       (e: MouseEvent) => {
         setState(s => ({
           ...s,
@@ -189,7 +196,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
       },
       [setState, onHoverInOuter],
     )
-    const onHoverOut = React.useCallback(
+    const onHoverOut = useCallback(
       (e: MouseEvent) => {
         setState(s => ({
           ...s,
@@ -199,7 +206,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
       },
       [setState, onHoverOutOuter],
     )
-    const onFocus = React.useCallback(
+    const onFocus = useCallback(
       (e: NativeSyntheticEvent<TargetedEvent>) => {
         setState(s => ({
           ...s,
@@ -209,7 +216,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
       },
       [setState, onFocusOuter],
     )
-    const onBlur = React.useCallback(
+    const onBlur = useCallback(
       (e: NativeSyntheticEvent<TargetedEvent>) => {
         setState(s => ({
           ...s,
@@ -220,7 +227,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
       [setState, onBlurOuter],
     )
 
-    const {baseStyles, hoverStyles} = React.useMemo(() => {
+    const {baseStyles, hoverStyles} = useMemo(() => {
       const baseStyles: ViewStyle[] = []
       const hoverStyles: ViewStyle[] = []
 
@@ -526,7 +533,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
       }
     }, [t, variant, color, size, shape, disabled])
 
-    const context = React.useMemo<ButtonContext>(
+    const context = useMemo<ButtonContext>(
       () => ({
         ...state,
         variant,
@@ -581,7 +588,7 @@ Button.displayName = 'Button'
 export function useSharedButtonTextStyles() {
   const t = useTheme()
   const {color, variant, disabled, size} = useButtonContext()
-  return React.useMemo(() => {
+  return useMemo(() => {
     const baseStyles: TextStyle[] = []
 
     /*
@@ -778,67 +785,66 @@ export function ButtonIcon({
 }) {
   const {size: buttonSize, shape: buttonShape} = useButtonContext()
   const textStyles = useSharedButtonTextStyles()
-  const {iconSize, iconContainerSize, iconNegativeMargin} =
-    React.useMemo(() => {
-      /**
-       * Pre-set icon sizes for different button sizes
-       */
-      const iconSizeShorthand =
-        size ??
-        (({
-          large: 'md',
-          small: 'sm',
-          tiny: 'xs',
-        }[buttonSize || 'small'] || 'sm') as Exclude<
-          SVGIconProps['size'],
-          undefined
-        >)
+  const {iconSize, iconContainerSize, iconNegativeMargin} = useMemo(() => {
+    /**
+     * Pre-set icon sizes for different button sizes
+     */
+    const iconSizeShorthand =
+      size ??
+      (({
+        large: 'md',
+        small: 'sm',
+        tiny: 'xs',
+      }[buttonSize || 'small'] || 'sm') as Exclude<
+        SVGIconProps['size'],
+        undefined
+      >)
 
-      /*
-       * Copied here from icons/common.tsx so we can tweak if we need to, but
-       * also so that we can calculate transforms.
-       */
-      const iconSize = {
-        xs: 12,
-        sm: 16,
-        md: 18,
-        lg: 24,
-        xl: 28,
-        '2xs': 8,
-        '2xl': 32,
-        '3xl': 40,
-      }[iconSizeShorthand]
+    /*
+     * Copied here from icons/common.tsx so we can tweak if we need to, but
+     * also so that we can calculate transforms.
+     */
+    const iconSize = {
+      xs: 12,
+      sm: 16,
+      md: 18,
+      lg: 24,
+      xl: 28,
+      '2xs': 8,
+      '2xl': 32,
+      '3xl': 40,
+    }[iconSizeShorthand]
 
-      /*
-       * Goal here is to match rendered text size so that different size icons
-       * don't increase button size
-       */
-      const iconContainerSize = {
-        large: 20,
-        small: 17,
-        tiny: 15,
+    /*
+     * Goal here is to match rendered text size so that different size icons
+     * don't increase button size
+     */
+    const iconContainerSize = {
+      large: 20,
+      small: 17,
+      tiny: 15,
+    }[buttonSize || 'small']
+
+    /*
+     * The icon needs to be closer to the edge of the button than the text. Therefore
+     * we make the gap slightly too large, and then pull in the sides using negative margins.
+     */
+    let iconNegativeMargin = 0
+
+    if (buttonShape === 'default') {
+      iconNegativeMargin = {
+        large: -2,
+        small: -2,
+        tiny: -1,
       }[buttonSize || 'small']
+    }
 
-      /*
-       * The icon needs to be closer to the edge of the button than the text. Therefore
-       * we make the gap slightly too large, and then pull in the sides using negative margins.
-       */
-      let iconNegativeMargin = 0
-
-      if (buttonShape === 'default') {
-        iconNegativeMargin = {
-          large: -2,
-          small: -2,
-          tiny: -1,
-        }[buttonSize || 'small']
-      }
-
-      return {
-        iconSize,
-        iconContainerSize,
-        iconNegativeMargin,
-      }
-    }, [buttonSize, buttonShape, size])
+    return {
+      iconSize,
+      iconContainerSize,
+      iconNegativeMargin,
+    }
+  }, [buttonSize, buttonShape, size])
 
   return (
     <View