⬆️ update code based on upgraded dependencies

Author: Stringsaeed

.eslintignore

@@ -3,3 +3,5 @@ ios
 android
 .expo
 .tamagui
+*.config.js
+theme.d.ts

.eslintrc

@@ -0,0 +1,88 @@
+/* eslint-env node */
+module.exports = {
+  rules: {
+    "import/order": [
+      "error",
+      {
+        groups: [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index",
+        ],
+        alphabetize: {
+          caseInsensitive: true,
+          order: "asc",
+        },
+        "newlines-between": "always",
+      },
+    ],
+    "perfectionist/sort-objects": [
+      "error",
+      {
+        type: "line-length",
+        order: "desc",
+      },
+    ],
+    "react-native/no-raw-text": [
+      "off",
+      {
+        skip: ["Heading", "Body", "Title", "Button"],
+      },
+    ],
+    "import/newline-after-import": ["error", { count: 1 }],
+    "@typescript-eslint/no-unsafe-assignment": "off",
+    "@typescript-eslint/no-misused-promises": "off",
+    "@typescript-eslint/no-unsafe-argument": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "react-native/no-color-literals": "off",
+    "no-console": "error",
+  },
+  overrides: [
+    {
+      files: [
+        "*.stories.tsx",
+        "test/**",
+        "*.config.js",
+        "*.config.ts",
+        "plugins/**",
+      ],
+      rules: {
+        "import/no-extraneous-dependencies": "off",
+        "import/no-default-export": "off",
+      },
+    },
+    {
+      env: {
+        "jest/globals": true,
+        jest: true,
+      },
+      files: ["test/**"],
+    },
+    {
+      rules: {
+        "import/no-extraneous-dependencies": "off",
+        "import/no-default-export": "off",
+      },
+      files: ["theme.ts"],
+    },
+  ],
+  settings: {
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"],
+    },
+    "import/resolver": {
+      typescript: {},
+    },
+  },
+  extends: ["@callstack", "plugin:@typescript-eslint/recommended-type-checked"],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: true,
+  },
+  plugins: ["perfectionist", "prettier", "@typescript-eslint"],
+  parser: "@typescript-eslint/parser",
+  root: true,
+};

.eslintrc.cjs

@@ -13,12 +13,12 @@ name: "CodeQL"
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ["main"]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ "main" ]
+    branches: ["main"]
   schedule:
-    - cron: '36 23 * * 4'
+    - cron: "36 23 * * 4"
 
 jobs:
   analyze:
@@ -38,45 +38,44 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: [ 'java', 'javascript', 'ruby', 'swift' ]
+        language: ["java", "javascript", "ruby", "swift"]
         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby', 'swift' ]
         # Use only 'java-kotlin' to analyze code written in Java, Kotlin or both
         # Use only 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
         # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
 
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v3
+      - name: Checkout repository
+        uses: actions/checkout@v3
 
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v2
+        with:
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
 
-        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
-        # queries: security-extended,security-and-quality
+          # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+          # queries: security-extended,security-and-quality
 
+      # Autobuild attempts to build any compiled languages (C/C++, C#, Go, Java, or Swift).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v2
 
-    # Autobuild attempts to build any compiled languages (C/C++, C#, Go, Java, or Swift).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
 
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+      #   If the Autobuild fails above, remove it and uncomment the following three lines.
+      #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
 
-    #   If the Autobuild fails above, remove it and uncomment the following three lines.
-    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+      # - run: |
+      #     echo "Run, Build Application using script"
+      #     ./location_of_script_within_repo/buildscript.sh
 
-    # - run: |
-    #     echo "Run, Build Application using script"
-    #     ./location_of_script_within_repo/buildscript.sh
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
-      with:
-        category: "/language:${{matrix.language}}"
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v2
+        with:
+          category: "/language:${{matrix.language}}"

.github/workflows/codeql.yml

@@ -0,0 +1,9 @@
+/** @type {import("prettier").Config} */
+const config = {
+  trailingComma: "es5",
+  singleQuote: false,
+  tabWidth: 2,
+  semi: true,
+};
+
+module.exports = config;

.prettierrc.cjs

@@ -15,7 +15,7 @@
       "distribution": "internal",
       "developmentClient": false,
       "env": {
-        "TAMAGUI_TARGET": "native",
+        "TAMAGUI_TARGET": "native"
       },
       "channel": "preview"
     },
@@ -24,7 +24,7 @@
         "buildType": "app-bundle"
       },
       "env": {
-        "TAMAGUI_TARGET": "native",
+        "TAMAGUI_TARGET": "native"
       },
       "distribution": "store",
       "channel": "production"

eas.json

@@ -103,6 +103,7 @@
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
     "eslint": "^8.56.0",
     "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^27.6.3",
     "eslint-plugin-perfectionist": "^2.5.0",

package.json

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable import/no-extraneous-dependencies */
 import {
   SizeVariantSpreadFunction,

src/components/bottom-sheet-input/helpers.ts

@@ -78,8 +78,9 @@ export function useInputProps(props: InputProps, ref: any) {
 
   const placeholderColorProp = props.placeholderTextColor;
   const placeholderTextColor =
-    // @ts-expect-error
-    theme[placeholderColorProp as any]?.get() ??
+    // @ts-expect-error placeholderColor is not in the type
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+    (placeholderColorProp && theme?.[placeholderColorProp]?.get?.()) ??
     placeholderColorProp ??
     theme.placeholderColor?.get();
 

src/components/bottom-sheet-input/index.tsx

@@ -5,7 +5,7 @@ import {
   TapGestureHandlerGestureEvent,
 } from "react-native-gesture-handler";
 import Animated, {
-  Extrapolate,
+  Extrapolation,
   interpolate,
   interpolateColor,
   runOnJS,
@@ -46,7 +46,7 @@ export default function AccentBackdrop({
       animatedIndex.value,
       [-1, 0, 1],
       [0, 0.4, 0.8],
-      Extrapolate.CLAMP
+      Extrapolation.CLAMP
     ),
   }));
 

src/components/bottom-sheet/accent-backdrop/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from "react";
+import React, { ComponentProps, useCallback, useMemo, useState } from "react";
 import { Modal, Platform, StyleSheet, Image } from "react-native";
 import { Button, Circle } from "tamagui";
 
@@ -41,19 +41,21 @@ export default function CountryBottomSheet({
         onPress={handleOnPress}
         scaleIcon={1.4}
         borderRadius="$12"
-        icon={({ color, size }) => (
-          <Circle size={size} overflow="hidden" bg={color}>
-            <Image
-              accessible={Platform.OS !== "web"}
-              tintColor={color}
-              accessibilityIgnoresInvertColors
-              style={StyleSheet.absoluteFill}
-              source={{
-                uri: `https://flagcdn.com/w40/${region.toLowerCase()}.png`,
-              }}
-            />
-          </Circle>
-        )}
+        icon={
+          (({ color, size }: { color: string; size: number }) => (
+            <Circle size={size} overflow="hidden" bg={color}>
+              <Image
+                accessible={Platform.OS !== "web"}
+                tintColor={color}
+                accessibilityIgnoresInvertColors
+                style={StyleSheet.absoluteFill}
+                source={{
+                  uri: `https://flagcdn.com/w40/${region.toLowerCase()}.png`,
+                }}
+              />
+            </Circle>
+          )) as ComponentProps<typeof Button>["icon"]
+        }
       >
         <Button.Text>+{countryCode}</Button.Text>
       </Button>