chore: bump ESLint and migrate to new config format

package.json

@@ -6,10 +6,10 @@
   ],
   "packageManager": "yarn@3.4.1",
   "devDependencies": {
-    "@react-native-community/eslint-config": "3.2.0",
-    "eslint": "8.26.0",
-    "prettier": "2.8.8",
-    "typescript": "4.9.5"
+    "@rnx-kit/eslint-plugin": "^0.5.0",
+    "eslint": "^8.54.0",
+    "prettier": "^2.8.8",
+    "typescript": "^5.3.0"
   },
   "resolutions": {
     "@react-native-community/cli": "^10.2.5",

packages/api/eslint.config.js

@@ -0,0 +1 @@
+module.exports = require("@react-native-async-storage/eslint-config");

packages/api/package.json

@@ -32,11 +32,11 @@
   "license": "MIT",
   "devDependencies": {
     "@types/jest": "29.5.4",
-    "eslint": "8.26.0",
+    "eslint": "^8.54.0",
     "jest": "29.5.0",
     "react-native-builder-bob": "0.20.0",
     "ts-jest": "29.1.1",
-    "typescript": "4.9.5"
+    "typescript": "^5.3.0"
   },
   "react-native-builder-bob": {
     "source": "src",

packages/api/src/StorageExtension.ts

@@ -3,4 +3,5 @@
  * core interface beyond its operations. It acts as a placeholder for implementing
  * additional methods.
  */
+// eslint-disable-next-line @typescript-eslint/ban-types
 export type StorageExtension = {};

packages/default-storage/babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
+  presets: ["module:metro-react-native-babel-preset"],
 };

packages/default-storage/eslint.config.js

@@ -0,0 +1 @@
+module.exports = require("@react-native-async-storage/eslint-config/recommended-wdio");

packages/default-storage/example/App.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from "react";
 import {
   Button,
   Keyboard,
@@ -14,11 +14,11 @@ import {
   Text,
   TouchableOpacity,
   View,
-} from 'react-native';
-import Basic from './examples/Basic';
-import Functional from './examples/Functional';
-import GetSetClear from './examples/GetSetClear';
-import MergeItem from './examples/MergeItem';
+} from "react-native";
+import Basic from "./examples/Basic";
+import Functional from "./examples/Functional";
+import GetSetClear from "./examples/GetSetClear";
+import MergeItem from "./examples/MergeItem";
 
 const SCREENS = {
   Functional,
@@ -86,13 +86,13 @@ export default function App(): JSX.Element {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#F5FCFF',
+    backgroundColor: "#F5FCFF",
     padding: 8,
   },
   exampleContainer: {
     padding: 4,
-    backgroundColor: '#FFF',
-    borderColor: '#EEE',
+    backgroundColor: "#FFF",
+    borderColor: "#EEE",
     borderTopWidth: 1,
     borderBottomWidth: 1,
     flex: 1,
@@ -101,29 +101,29 @@ const styles = StyleSheet.create({
     fontSize: 18,
   },
   exampleDescription: {
-    color: '#333333',
+    color: "#333333",
     marginBottom: 16,
   },
   exampleInnerContainer: {
-    borderColor: '#EEE',
+    borderColor: "#EEE",
     borderTopWidth: 1,
     paddingTop: 10,
     flex: 1,
   },
   restartButton: {
     padding: 6,
     borderRadius: 5,
-    backgroundColor: '#F3F3F3',
-    alignItems: 'center',
-    justifyContent: 'center',
-    alignSelf: 'flex-end',
+    backgroundColor: "#F3F3F3",
+    alignItems: "center",
+    justifyContent: "center",
+    alignSelf: "flex-end",
   },
   closeKeyboardView: {
     width: 5,
     height: 5,
   },
   testPickerContainer: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
+    flexDirection: "row",
+    flexWrap: "wrap",
   },
 });

packages/default-storage/example/examples/Basic.tsx

@@ -1,14 +1,14 @@
 // @ts-ignore
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import React from 'react';
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import React from "react";
 import {
   Button,
   ScrollView,
   StyleSheet,
   Text,
   TextInput,
   View,
-} from 'react-native';
+} from "react-native";
 
 type DataType = {
   deeper?: DataType;
@@ -17,45 +17,45 @@ type DataType = {
 };
 
 const mergeInitialValue = {
-  initial: 'keep',
-  override1: 'override',
+  initial: "keep",
+  override1: "override",
   nested: {
-    nestedValue: 'keep',
-    override2: 'override',
+    nestedValue: "keep",
+    override2: "override",
     deeper: {
-      deeperValue: 'keep',
-      override3: 'override',
+      deeperValue: "keep",
+      override3: "override",
     },
   },
 };
 
 function hasMessage(e: unknown): e is { message: string } {
-  return Boolean(typeof e === 'object' && e && 'message' in e);
+  return Boolean(typeof e === "object" && e && "message" in e);
 }
 
 function NextExample() {
   const [keys, setKeys] = React.useState([]);
-  const [error, setError] = React.useState('');
-  const [inputKey, setInputKey] = React.useState('');
-  const [inputValue, setInputValue] = React.useState('');
+  const [error, setError] = React.useState("");
+  const [inputKey, setInputKey] = React.useState("");
+  const [inputValue, setInputValue] = React.useState("");
   const [value, setValue] = React.useState();
   const [mergedValue, setMergedValue] = React.useState();
   const [overrideValue, setOverrideValue] = React.useState({
-    override1: '',
-    override2: '',
-    override3: '',
+    override1: "",
+    override2: "",
+    override3: "",
   });
 
   function runWithCatch(block: () => Promise<void>) {
     return async () => {
       try {
-        setError('');
+        setError("");
         await block();
       } catch (e) {
         if (hasMessage(e)) {
-          setError('Caught error: ' + (e.message || e));
+          setError("Caught error: " + (e.message || e));
         } else {
-          setError('Unknown error: ' + e);
+          setError("Unknown error: " + e);
         }
       }
     };
@@ -76,15 +76,15 @@ function NextExample() {
   }
 
   async function crashValueType() {
-    await AsyncStorage.setItem('CRASH', 435345);
+    await AsyncStorage.setItem("CRASH", 435345);
   }
 
   async function crashKeyNull() {
-    await AsyncStorage.setItem(null, '435345');
+    await AsyncStorage.setItem(null, "435345");
   }
 
   async function crashKeyNotString() {
-    await AsyncStorage.setItem(432, '435345');
+    await AsyncStorage.setItem(432, "435345");
   }
 
   async function removeValue() {
@@ -96,13 +96,13 @@ function NextExample() {
   }
 
   async function resetMergedValue() {
-    await AsyncStorage.setItem('MERGER', JSON.stringify(mergeInitialValue));
-    const saved = await AsyncStorage.getItem('MERGER');
+    await AsyncStorage.setItem("MERGER", JSON.stringify(mergeInitialValue));
+    const saved = await AsyncStorage.getItem("MERGER");
     setMergedValue(JSON.parse(saved));
   }
 
   async function readMergedValue() {
-    const saved = await AsyncStorage.getItem('MERGER');
+    const saved = await AsyncStorage.getItem("MERGER");
     setMergedValue(saved ? JSON.parse(saved) : {});
   }
 
@@ -112,7 +112,7 @@ function NextExample() {
     // leave out empty inputs
     const toMerge: DataType = {};
     if (override1) {
-      toMerge['override1'] = override1;
+      toMerge["override1"] = override1;
     }
     if (override2) {
       toMerge.nested = {
@@ -132,7 +132,7 @@ function NextExample() {
         };
       }
     }
-    await AsyncStorage.mergeItem('MERGER', JSON.stringify(toMerge));
+    await AsyncStorage.mergeItem("MERGER", JSON.stringify(toMerge));
   }
 
   return (
@@ -226,7 +226,7 @@ function NextExample() {
         <View style={styles.row}>
           <Button title="Get all keys" onPress={runWithCatch(getAllKeys)} />
         </View>
-        <Text>{keys.join(', ')}</Text>
+        <Text>{keys.join(", ")}</Text>
       </View>
 
       <View style={styles.example}>
@@ -242,34 +242,34 @@ const styles = StyleSheet.create({
     paddingBottom: 24,
     paddingTop: 8,
     borderBottomWidth: 1,
-    borderBottomColor: '#e3e3e3',
-    borderStyle: 'solid',
-    justifyContent: 'space-between',
+    borderBottomColor: "#e3e3e3",
+    borderStyle: "solid",
+    justifyContent: "space-between",
   },
   input: {
     borderWidth: 1,
-    borderColor: '#eee',
-    borderStyle: 'solid',
+    borderColor: "#eee",
+    borderStyle: "solid",
   },
   error: {
     fontSize: 18,
-    color: 'red',
+    color: "red",
   },
   row: {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
+    flexDirection: "row",
+    justifyContent: "space-around",
   },
   title: {
     fontSize: 16,
-    fontWeight: '700',
+    fontWeight: "700",
     paddingBottom: 12,
   },
 });
 
 export default {
-  title: 'Basic',
-  testId: 'basic',
-  description: 'Basic functionality test',
+  title: "Basic",
+  testId: "basic",
+  description: "Basic functionality test",
   render() {
     return <NextExample />;
   },