feat: setup eslint config (#20)

.eslintrc.js

@@ -0,0 +1,170 @@
+module.exports = {
+  root: true,
+  plugins: [
+    "@typescript-eslint",
+    "eslint-comments",
+    "import",
+    "jest",
+    "jest",
+    "prettier",
+    "react-native",
+    "react-perf",
+    "react",
+  ],
+  extends: [
+    "@react-native",
+    "prettier",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/typescript",
+    "plugin:eslint-comments/recommended",
+    "plugin:react-perf/recommended",
+  ],
+  settings: {
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"],
+    },
+    "import/resolver": {
+      typescript: {
+        alwaysTryTypes: true,
+        project: "<root>/tsconfig.json",
+      },
+    },
+  },
+  rules: {
+    "prettier/prettier": [
+      "error",
+      {
+        quoteProps: "consistent",
+        trailingComma: "all",
+      },
+    ],
+    // react-hooks
+    "react-hooks/exhaustive-deps": "warn",
+    // react
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-sort-props": [
+      "error",
+      {
+        callbacksLast: true,
+        shorthandFirst: true,
+        shorthandLast: false,
+        ignoreCase: true,
+        noSortAlphabetically: false,
+        reservedFirst: ["ref", "key"],
+      },
+    ],
+    "react/jsx-no-bind": [
+      "warn",
+      {
+        // should be an error, but we need to fix a lot of places
+        ignoreDOMComponents: false,
+        ignoreRefs: false,
+        allowArrowFunctions: false,
+        allowFunctions: false,
+        allowBind: false,
+      },
+    ],
+    // react-perf
+    "react-perf/jsx-no-new-function-as-prop": "off", // because we have jsx-no-bind
+    "react-perf/jsx-no-jsx-as-prop": "warn",
+    "react-perf/jsx-no-new-array-as-prop": "warn",
+    "react-perf/jsx-no-new-object-as-prop": "warn",
+    // typescript
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      { prefer: "type-imports" },
+    ],
+    "@typescript-eslint/no-import-type-side-effects": "error",
+    "@typescript-eslint/no-var-requires": "warn",
+    // import
+    "sort-imports": [
+      "error",
+      {
+        // sort destructure imports
+        ignoreCase: false,
+        ignoreDeclarationSort: true,
+        ignoreMemberSort: false,
+        memberSyntaxSortOrder: ["none", "all", "single", "multiple"],
+        allowSeparatedGroups: true,
+      },
+    ],
+    "import/order": [
+      "error",
+      {
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index",
+          "type",
+        ],
+        "alphabetize": {
+          order: "asc",
+          caseInsensitive: true,
+        },
+        "newlines-between": "always",
+      },
+    ],
+    "import/no-cycle": ["error", { maxDepth: "∞" }],
+    // eslint-comments
+    "eslint-comments/no-unused-disable": "error",
+    // eslint
+    "curly": "error",
+    "eqeqeq": ["error", "always"], // check “===”
+    "no-nested-ternary": "error",
+    "padding-line-between-statements": [
+      "error",
+      {
+        blankLine: "always",
+        prev: "*",
+        next: ["return", "try", "throw", "function", "for", "while", "do"],
+      },
+      { blankLine: "always", prev: ["const", "let", "var"], next: "*" },
+      {
+        blankLine: "any",
+        prev: ["const", "let", "var"],
+        next: ["const", "let", "var"],
+      },
+      { blankLine: "always", prev: "*", next: "if" },
+      { blankLine: "any", prev: "if", next: "if" },
+    ],
+    "no-param-reassign": "error",
+    "max-lines": ["warn", { max: 300 }],
+  },
+  overrides: [
+    {
+      files: ["src/specs/**"],
+      rules: {
+        "@typescript-eslint/ban-types": [
+          "error",
+          {
+            extendDefaults: true,
+            types: {
+              "{}": false,
+            },
+          },
+        ],
+      },
+    },
+    {
+      files: [
+        "**/react-native.config.js",
+        "**/metro.config.js",
+        "**/babel.config.js",
+      ],
+      rules: {
+        "import/no-commonjs": "off",
+        "@typescript-eslint/no-require-imports": "off",
+        "@typescript-eslint/no-var-requires": "off",
+      },
+    },
+  ],
+  env: {
+    "react-native/react-native": true,
+    "jest/globals": true,
+  },
+  ignorePatterns: ["node_modules/**", "lib/**", "scripts/**", "docs/build/**"],
+};

babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    ['module:react-native-builder-bob/babel-preset', { modules: 'commonjs' }],
+    ["module:react-native-builder-bob/babel-preset", { modules: "commonjs" }],
   ],
 };

example/babel.config.js

@@ -1,12 +1,14 @@
-const path = require('path');
-const { getConfig } = require('react-native-builder-bob/babel-config');
-const pkg = require('../package.json');
+const path = require("path");
 
-const root = path.resolve(__dirname, '..');
+const { getConfig } = require("react-native-builder-bob/babel-config");
+
+const pkg = require("../package.json");
+
+const root = path.resolve(__dirname, "..");
 
 module.exports = getConfig(
   {
-    presets: ['module:@react-native/babel-preset'],
+    presets: ["module:@react-native/babel-preset"],
   },
-  { root, pkg }
+  { root, pkg },
 );

example/index.js

@@ -1,5 +1,6 @@
-import { AppRegistry } from 'react-native';
-import App from './src/App';
-import { name as appName } from './app.json';
+import { AppRegistry } from "react-native";
+
+import { name as appName } from "./app.json";
+import App from "./src/App";
 
 AppRegistry.registerComponent(appName, () => App);

example/jest.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  preset: 'react-native',
+  preset: "react-native",
 };

example/metro.config.js

@@ -1,9 +1,11 @@
-const path = require('path');
-const { getDefaultConfig } = require('@react-native/metro-config');
-const { getConfig } = require('react-native-builder-bob/metro-config');
-const pkg = require('../package.json');
+const path = require("path");
 
-const root = path.resolve(__dirname, '..');
+const { getDefaultConfig } = require("@react-native/metro-config");
+const { getConfig } = require("react-native-builder-bob/metro-config");
+
+const pkg = require("../package.json");
+
+const root = path.resolve(__dirname, "..");
 
 /**
  * Metro configuration

example/react-native.config.js

@@ -1,5 +1,6 @@
-const path = require('path');
-const pkg = require('../package.json');
+const path = require("path");
+
+const pkg = require("../package.json");
 
 module.exports = {
   project: {
@@ -9,7 +10,7 @@ module.exports = {
   },
   dependencies: {
     [pkg.name]: {
-      root: path.join(__dirname, '..'),
+      root: path.join(__dirname, ".."),
     },
   },
 };

example/src/App.tsx

@@ -1,7 +1,8 @@
-import { useEffect, useState } from 'react';
-import { StyleSheet, Text, Button, ScrollView, TextInput } from 'react-native';
-import SecureStorage, { ACCESSIBLE } from 'react-native-fast-secure-storage';
-import { Rectangle } from './Reactangle';
+import { useEffect, useState } from "react";
+import { Button, ScrollView, StyleSheet, Text, TextInput } from "react-native";
+import SecureStorage, { ACCESSIBLE } from "react-native-fast-secure-storage";
+
+import { Rectangle } from "./Reactangle";
 
 const testItems = new Array(100).fill(0).map((_, index) => {
   return {
@@ -14,26 +15,30 @@ const testItems = new Array(100).fill(0).map((_, index) => {
 export default function App() {
   const [result, setResult] = useState<string | undefined>();
   const [hasItem, setHasItem] = useState(false);
-  const [text, setText] = useState('');
+  const [text, setText] = useState("");
 
   const getTestValue = async () => {
     const startTime = new Date().getTime();
+
     try {
-      const value = await SecureStorage.getItem('test');
+      const value = await SecureStorage.getItem("test");
+
       setResult(value);
     } catch (error) {
       if (error instanceof Error) {
         setResult(error.message);
       }
     }
-    console.log('Time taken:', new Date().getTime() - startTime);
+    console.log("Time taken:", new Date().getTime() - startTime);
   };
 
   const setTestValue = async () => {
     const startTime = new Date().getTime();
-    await SecureStorage.setItem('test', 'test value');
-    console.log('Time taken:', new Date().getTime() - startTime);
-    const value = await SecureStorage.getItem('test');
+
+    await SecureStorage.setItem("test", "test value");
+    console.log("Time taken:", new Date().getTime() - startTime);
+    const value = await SecureStorage.getItem("test");
+
     setResult(value);
   };
 
@@ -45,19 +50,20 @@ export default function App() {
     <ScrollView contentContainerStyle={styles.container}>
       <Rectangle />
       <Text>{result}</Text>
-      <Text>{hasItem ? 'Item exists' : 'Item does not exist'}</Text>
+      <Text>{hasItem ? "Item exists" : "Item does not exist"}</Text>
       <TextInput
-        style={{ height: 50, width: '100%' }}
         defaultValue={text}
+        style={{ height: 50, width: "100%" }}
         onChangeText={setText}
       />
       <Button title="set value" onPress={setTestValue} />
       <Button
         title="set multiple items"
         onPress={async () => {
           const startTime = new Date().getTime();
+
           await SecureStorage.setItems(testItems);
-          console.log('Time taken:', new Date().getTime() - startTime);
+          console.log("Time taken:", new Date().getTime() - startTime);
         }}
       />
       <Button title="get value" onPress={getTestValue} />
@@ -76,14 +82,14 @@ export default function App() {
       <Button
         title="delete value"
         onPress={async () => {
-          await SecureStorage.removeItem('test');
+          await SecureStorage.removeItem("test");
           getTestValue();
         }}
       />
       <Button
         title="has item"
         onPress={async () => {
-          setHasItem(await SecureStorage.hasItem('test'));
+          setHasItem(await SecureStorage.hasItem("test"));
         }}
       />
     </ScrollView>
@@ -93,8 +99,8 @@ export default function App() {
 const styles = StyleSheet.create({
   container: {
     flexGrow: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
   },
   box: {
     width: 60,