Update lint-related dependencies and configuration (#2761)

* Remove unnecessary babel deps
* arrow-functions and shorthand-properties are brought in by
  babel-preset-expo
* template-literals is only brought in by babel/preset-env, which
  babel-preset-expo doesn't use, but for now we do
* Configure expo default prettier
* Set up eslintignore
Should primarily use eslintignore, but prettierignore is useful if
running prettier w/o eslint
* Rework package.json commands
Eslint is running prettier now, so just pass that to "--fix". It's a
little weird that "lint" was running format, up for discussion about
what each should do.
* Update config files to match lint rules

Was ignored by linting before.

Ignoring files may be useful if they are part of a template, and we
never plan to customize the file; but if we do, linters may be useful
for catching bugs.
* Disable included array type rule

We weren't using it previously. Causes errors like this:

/Users/lizzi/dev/igniteTests/DepsFixing/app/utils/useSafeAreaInsetsStyle.ts
  21:17  warning  Array type using 'Array<ExtendedEdge>' is forbidden. Use 'ExtendedEdge[]' instead  @typescript-es
lint/array-type
  21:39  warning  Array type using 'Array<ExtendedEdge>' is forbidden. Use 'ExtendedEdge[]' instead  @typescript-es
lint/array-type
  35:17  warning  Array type using 'Array<ExtendedEdge>' is forbidden. Use 'ExtendedEdge[]' instead  @typescript-es
lint/array-type
* Format files according to prettier
These files were previously excluded, but I don't see why they should be
* Fix rules of hooks issues
* useRef for Animated.Value
useRef is more appropriate when we have an Animated.Value and don't want
components/hooks to react to state, and avoids exhaustive-deps issue
* exhaustive-deps fixes
* Importing React is no longer required for TSX/JSX
* Re-add previous lint config
One new addition: use quotes consistently in objects where at least one
key requires quotes.
* Format code after markup removal
* Fix inconsistent indentation in messages
* Add restricted imports rule to ensure consistent importing of React API
* Update cli prettier to match boilerplate
* Update typescript and typescript eslint tree... then leads to updating more eslint
* Match quoteProps configuration of boilerplate
* typescript-estree requires later version of node
update to LTS on CI
* Use consistent spacing on new command
* Re-add react-native linter, PR feedback

.circleci/config.yml

@@ -6,7 +6,7 @@
 defaults: &defaults
   docker:
     # Choose the version of Node you want here
-    - image: cimg/node:18.17.1
+    - image: cimg/node:20.17.0
   working_directory: /mnt/ramdisk/repo
 
 version: 2.1

boilerplate/.eslintignore

@@ -0,0 +1,8 @@
+node_modules
+ios
+android
+.expo
+.vscode
+ignite/ignite.json
+package.json
+.eslintignore

boilerplate/.eslintrc.js

@@ -0,0 +1,54 @@
+// https://docs.expo.dev/guides/using-eslint/
+module.exports = {
+  extends: [
+    "standard",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-native/all",
+    // `expo` must come after `standard` or its globals configuration will be overridden
+    "expo",
+    // `jsx-runtime` must come after `expo` or it will be overridden
+    "plugin:react/jsx-runtime",
+    "prettier",
+  ],
+  plugins: ["reactotron", "prettier"],
+  rules: {
+    "prettier/prettier": "error",
+    // typescript-eslint
+    "@typescript-eslint/array-type": 0,
+    "@typescript-eslint/ban-ts-comment": 0,
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+      },
+    ],
+    "@typescript-eslint/no-var-requires": 0,
+    // eslint
+    "no-use-before-define": 0,
+    "no-restricted-imports": [
+      "error",
+      {
+        paths: [
+          // Prefer named exports from 'react' instead of importing `React`
+          {
+            name: "react",
+            importNames: ["default"],
+            message: "Import named exports from 'react' instead.",
+          },
+        ],
+      },
+    ],
+    //react-native
+    "react-native/no-raw-text": 0,
+    // reactotron
+    "reactotron/no-tron-in-production": "error",
+    // eslint-config-standard overrides
+    "comma-dangle": 0,
+    "no-global-assign": 0,
+    "quotes": 0,
+    "space-before-function-paren": 0,
+  },
+}

boilerplate/.prettierignore

@@ -1,6 +1,8 @@
 node_modules
 ios
 android
+.expo
 .vscode
 ignite/ignite.json
 package.json
+.eslintignore

boilerplate/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "printWidth": 100,
+  "semi": false,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "quoteProps": "consistent"
+}

boilerplate/App.tsx

@@ -1,5 +1,4 @@
 import "@expo/metro-runtime"
-import React from "react"
 import * as SplashScreen from "expo-splash-screen"
 import App from "./app/app"
 

boilerplate/app.config.ts

@@ -8,7 +8,7 @@ require("ts-node/register")
 
 /**
  * @param config ExpoConfig coming from the static config app.json if it exists
- * 
+ *
  * You can read more about Expo's Configuration Resolution Rules here:
  * https://docs.expo.dev/workflow/configuration/#configuration-resolution-rules
  */
@@ -17,9 +17,6 @@ module.exports = ({ config }: ConfigContext): Partial<ExpoConfig> => {
 
   return {
     ...config,
-    plugins: [
-      ...existingPlugins,
-      require("./plugins/withSplashScreen").withSplashScreen,
-    ],
+    plugins: [...existingPlugins, require("./plugins/withSplashScreen").withSplashScreen],
   }
 }

boilerplate/app/app.tsx

@@ -20,7 +20,6 @@ import "./utils/gestureHandler"
 import "./i18n"
 import "./utils/ignoreWarnings"
 import { useFonts } from "expo-font"
-import React from "react"
 import { initialWindowMetrics, SafeAreaProvider } from "react-native-safe-area-context"
 import * as Linking from "expo-linking"
 import { useInitialRootStore } from "./models" // @mst remove-current-line

boilerplate/app/components/AutoImage.tsx

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useState } from "react"
+import { useLayoutEffect, useState } from "react"
 import { Image, ImageProps, ImageURISource, Platform } from "react-native"
 
 export interface AutoImageProps extends ImageProps {

boilerplate/app/components/Button.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentType } from "react"
+import { ComponentType } from "react"
 import {
   Pressable,
   PressableProps,

boilerplate/app/components/Card.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentType, Fragment, ReactElement } from "react"
+import { ComponentType, Fragment, ReactElement } from "react"
 import {
   StyleProp,
   TextStyle,
@@ -271,8 +271,8 @@ const $alignmentWrapper: ViewStyle = {
 }
 
 const $alignmentWrapperFlexOptions = {
-  top: "flex-start",
-  center: "center",
+  "top": "flex-start",
+  "center": "center",
   "space-between": "space-between",
   "force-footer-bottom": "space-between",
 } as const

boilerplate/app/components/EmptyState.tsx

@@ -1,4 +1,3 @@
-import React from "react"
 import { Image, ImageProps, ImageStyle, StyleProp, TextStyle, View, ViewStyle } from "react-native"
 import { translate } from "../i18n"
 import { Button, ButtonProps } from "./Button"

boilerplate/app/components/Header.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from "react"
+import { ReactElement } from "react"
 import {
   StyleProp,
   TextStyle,

boilerplate/app/components/Icon.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { ComponentType } from "react"
 import {
   Image,

boilerplate/app/components/ListItem.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from "react"
+import { forwardRef, ReactElement } from "react"
 import {
   StyleProp,
   TextStyle,
@@ -104,7 +104,7 @@ interface ListItemActionProps {
  * @param {ListItemProps} props - The props for the `ListItem` component.
  * @returns {JSX.Element} The rendered `ListItem` component.
  */
-export const ListItem = React.forwardRef<View, ListItemProps>(function ListItem(
+export const ListItem = forwardRef<View, ListItemProps>(function ListItem(
   props: ListItemProps,
   ref,
 ) {

boilerplate/app/components/ListView.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, PropsWithoutRef } from "react"
+import { ForwardedRef, forwardRef, PropsWithoutRef, ReactElement, RefObject } from "react"
 import { FlatList } from "react-native"
 import { isRTL } from "app/i18n"
 import { FlashList, FlashListProps } from "@shopify/flash-list"
@@ -21,11 +21,11 @@ export type ListViewProps<T> = PropsWithoutRef<FlashListProps<T>>
  * @see {@link https://github.com/Shopify/flash-list/issues/544|RTL Bug Android}
  * @see {@link https://github.com/Shopify/flash-list/issues/840|Flashlist Not Support RTL}
  * @param {FlashListProps | FlatListProps} props - The props for the `ListView` component.
- * @param {React.RefObject<ListViewRef>} forwardRef - An optional forwarded ref.
+ * @param {RefObject<ListViewRef>} forwardRef - An optional forwarded ref.
  * @returns {JSX.Element} The rendered `ListView` component.
  */
 const ListViewComponent = forwardRef(
-  <T,>(props: ListViewProps<T>, ref: React.ForwardedRef<ListViewRef<T>>) => {
+  <T,>(props: ListViewProps<T>, ref: ForwardedRef<ListViewRef<T>>) => {
     const ListComponentWrapper = isRTL ? FlatList : FlashList
 
     return <ListComponentWrapper {...props} ref={ref} />
@@ -36,6 +36,6 @@ ListViewComponent.displayName = "ListView"
 
 export const ListView = ListViewComponent as <T>(
   props: ListViewProps<T> & {
-    ref?: React.RefObject<ListViewRef<T>>
+    ref?: RefObject<ListViewRef<T>>
   },
-) => React.ReactElement
+) => ReactElement

boilerplate/app/components/Screen.tsx

@@ -1,6 +1,6 @@
 import { useScrollToTop } from "@react-navigation/native"
 import { StatusBar, StatusBarProps, StatusBarStyle } from "expo-status-bar"
-import React, { useRef, useState } from "react"
+import { ReactNode, useRef, useState } from "react"
 import {
   KeyboardAvoidingView,
   KeyboardAvoidingViewProps,
@@ -23,7 +23,7 @@ interface BaseScreenProps {
   /**
    * Children components.
    */
-  children?: React.ReactNode
+  children?: ReactNode
   /**
    * Style for the outer content container useful for padding & margin.
    */

boilerplate/app/components/Text.test.tsx

@@ -1,5 +1,4 @@
 import { render } from "@testing-library/react-native"
-import React from "react"
 
 import { Text } from "./Text"
 

boilerplate/app/components/Text.tsx

@@ -1,10 +1,10 @@
 import i18n from "i18n-js"
-import React from "react"
 import { StyleProp, Text as RNText, TextProps as RNTextProps, TextStyle } from "react-native"
 import { isRTL, translate, TxKeyPath } from "../i18n"
 import type { ThemedStyle, ThemedStyleArray } from "app/theme"
 import { useAppTheme } from "app/utils/useAppTheme"
 import { typography } from "app/theme/typography"
+import { ReactNode } from "react"
 
 type Sizes = keyof typeof $sizeStyles
 type Weights = keyof typeof typography.primary
@@ -43,7 +43,7 @@ export interface TextProps extends RNTextProps {
   /**
    * Children components.
    */
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
 /**

boilerplate/app/components/TextField.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentType, forwardRef, Ref, useImperativeHandle, useRef } from "react"
+import { ComponentType, forwardRef, Ref, useImperativeHandle, useRef } from "react"
 import {
   ImageStyle,
   StyleProp,

boilerplate/app/components/Toggle/Checkbox.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react"
+import { useEffect, useRef } from "react"
 import { Image, ImageStyle, Animated, StyleProp, View, ViewStyle } from "react-native"
 import { $styles } from "../../theme"
 import { iconRegistry, IconTypes } from "../Icon"
@@ -42,10 +42,10 @@ function CheckboxInput(props: CheckboxInputProps) {
     theme: { colors },
   } = useAppTheme()
 
-  const [opacity] = useState(new Animated.Value(0))
+  const opacity = useRef(new Animated.Value(0))
 
   useEffect(() => {
-    Animated.timing(opacity, {
+    Animated.timing(opacity.current, {
       toValue: on ? 1 : 0,
       duration: 300,
       useNativeDriver: true,
@@ -90,7 +90,7 @@ function CheckboxInput(props: CheckboxInputProps) {
           $styles.toggleInner,
           { backgroundColor: onBackgroundColor },
           $innerStyleOverride,
-          { opacity },
+          { opacity: opacity.current },
         ]}
       >
         <Image

boilerplate/app/components/Toggle/Radio.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react"
+import { useEffect, useRef } from "react"
 import { StyleProp, View, ViewStyle, Animated } from "react-native"
 import { $styles } from "../../theme"
 import { $inputOuterBase, BaseToggleInputProps, ToggleProps, Toggle } from "./Toggle"
@@ -34,10 +34,11 @@ function RadioInput(props: RadioInputProps) {
   const {
     theme: { colors },
   } = useAppTheme()
-  const [opacity] = useState(new Animated.Value(0))
+
+  const opacity = useRef(new Animated.Value(0))
 
   useEffect(() => {
-    Animated.timing(opacity, {
+    Animated.timing(opacity.current, {
       toValue: on ? 1 : 0,
       duration: 300,
       useNativeDriver: true,
@@ -82,7 +83,7 @@ function RadioInput(props: RadioInputProps) {
           $styles.toggleInner,
           { backgroundColor: onBackgroundColor },
           $innerStyleOverride,
-          { opacity },
+          { opacity: opacity.current },
         ]}
       >
         <View

boilerplate/app/components/Toggle/Switch.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react"
+import { useEffect, useMemo, useRef } from "react"
 import {
   Animated,
   Image,
@@ -56,19 +56,19 @@ function SwitchInput(props: SwitchInputProps) {
     themed,
   } = useAppTheme()
 
-  const animate = useRef(new Animated.Value(on ? 1 : 0)).current // Initial value is set based on isActive
-  const [opacity] = useState(new Animated.Value(0))
+  const animate = useRef(new Animated.Value(on ? 1 : 0)) // Initial value is set based on isActive
+  const opacity = useRef(new Animated.Value(0))
 
   useEffect(() => {
-    Animated.timing(animate, {
+    Animated.timing(animate.current, {
       toValue: on ? 1 : 0,
       duration: 300,
       useNativeDriver: true, // Enable native driver for smoother animations
     }).start()
   }, [on])
 
   useEffect(() => {
-    Animated.timing(opacity, {
+    Animated.timing(opacity.current, {
       toValue: on ? 1 : 0,
       duration: 300,
       useNativeDriver: true,
@@ -116,10 +116,7 @@ function SwitchInput(props: SwitchInputProps) {
   })()
 
   const rtlAdjustment = isRTL ? -1 : 1
-  const $themedSwitchInner = React.useMemo(
-    () => themed([$styles.toggleInner, $switchInner]),
-    [themed],
-  )
+  const $themedSwitchInner = useMemo(() => themed([$styles.toggleInner, $switchInner]), [themed])
 
   const offsetLeft = ($innerStyleOverride?.paddingStart ||
     $innerStyleOverride?.paddingLeft ||
@@ -140,7 +137,7 @@ function SwitchInput(props: SwitchInputProps) {
         : [offsetLeft, +(knobWidth || 0) + offsetRight]
       : [rtlAdjustment * offsetLeft, rtlAdjustment * (+(knobWidth || 0) + offsetRight)]
 
-  const $animatedSwitchKnob = animate.interpolate({
+  const $animatedSwitchKnob = animate.current.interpolate({
     inputRange: [0, 1],
     outputRange,
   })
@@ -152,7 +149,7 @@ function SwitchInput(props: SwitchInputProps) {
           $themedSwitchInner,
           { backgroundColor: onBackgroundColor },
           $innerStyleOverride,
-          { opacity },
+          { opacity: opacity.current },
         ]}
       />
 

boilerplate/app/components/Toggle/Toggle.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentType, FC, useMemo } from "react"
+import { ComponentType, FC, useMemo } from "react"
 import {
   GestureResponderEvent,
   ImageStyle,

boilerplate/app/i18n/i18n.ts

@@ -61,5 +61,5 @@ type RecursiveKeyOfInner<TObj extends object> = {
 type RecursiveKeyOfHandleValue<TValue, Text extends string> = TValue extends any[]
   ? Text
   : TValue extends object
-  ? Text | `${Text}${RecursiveKeyOfInner<TValue>}`
-  : Text
+    ? Text | `${Text}${RecursiveKeyOfInner<TValue>}`
+    : Text