feat(typescript-migration): Rewriting to typescript, improving handle…

.eslintignore

@@ -1,2 +1,2 @@
 node_modules/
-.eslintrc.js
+.eslintrc

.eslintrc.js

@@ -3,10 +3,50 @@ module.exports = {
   extends: '@react-native-community',
   parser: '@typescript-eslint/parser',
   plugins: ['@typescript-eslint'],
+  parserOptions: {
+    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
+    sourceType: 'module', // Allows for the use of imports
+    ecmaFeatures: {
+      jsx: true, // Allows for the parsing of JSX
+    },
+  },
   rules: {
     'react/no-unstable-nested-components': [
       'off' | 'warn' | 'error',
       { allowAsProps: true | false },
     ],
+    'prettier/prettier': [
+      'error',
+      {
+        bracketSpacing: true,
+        jsxBracketSameLine: true,
+        singleQuote: true,
+        trailingComma: 'all',
+        arrowParens: 'avoid',
+      },
+    ],
+    quotes: ['error', 'single'],
+    indent: ['error', 2, { SwitchCase: 1 }],
+    'comma-dangle': [2, 'always-multiline'],
+    'react/prop-types': 'off',
+    '@typescript-eslint/no-namespace': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/interface-name-prefix': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      2,
+      { args: 'none', ignoreRestSiblings: true },
+    ],
+    '@typescript-eslint/no-use-before-define': ['error', { variables: false }],
+    'react/jsx-first-prop-new-line': [1, 'multiline'],
+    'react/jsx-max-props-per-line': [
+      1,
+      {
+        maximum: 1,
+      },
+    ],
+    'no-unused-vars': 'off',
+    'object-curly-spacing': ['error', 'always'],
   },
 };

.github/workflows/CI.yaml

@@ -121,7 +121,7 @@ jobs:
         run: |
           yarn start &
           METRO_BUNDLER_PID=$!
-          yarn detox test --configuration ${{ env.DETOX_CONFIGURATION }} --cleanup --headless --record-logs all
+          yarn detox test --configuration ${{ env.DETOX_CONFIGURATION }} e2e/ios --cleanup --headless --record-logs all
           DETOX_EXIT_CODE=$?
           kill $METRO_BUNDLER_PID
           exit $DETOX_EXIT_CODE
@@ -267,8 +267,8 @@ jobs:
           arch: x86
           channel: canary
           profile: pixel
-          avd-name: Pixel_3a_API_30_AOSP
-          script: yarn detox test --configuration ${{ env.DETOX_CONFIGURATION }} --headless --record-logs all
+          avd-name: Pixel_4_API_30_AOSP
+          script: yarn detox test --configuration ${{ env.DETOX_CONFIGURATION }} e2e/android --headless --record-logs all
           working-directory: source/examples/Basic
 
       - name: Upload artifacts

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+    bracketSpacing: true,
+    jsxBracketSameLine: true,
+    singleQuote: true,
+    trailingComma: 'all',
+    arrowParens: 'avoid',
+};

examples/Basic/.detoxrc.js

@@ -54,7 +54,13 @@ module.exports = {
     emulator: {
       type: 'android.emulator',
       device: {
-        avdName: 'Pixel_3a_API_30_AOSP',
+        avdName: 'Pixel_4_API_30_AOSP',
+      },
+    },
+    emulatorLocal: {
+      type: 'android.emulator',
+      device: {
+        avdName: 'Pixel_4_API_30',
       },
     },
   },
@@ -83,5 +89,13 @@ module.exports = {
       device: 'emulator',
       app: 'production.android.release',
     },
+    'android.emu.debug.local': {
+      device: 'emulatorLocal',
+      app: 'staging.android.debug',
+    },
+    'android.emu.release.local': {
+      device: 'emulatorLocal',
+      app: 'production.android.release',
+    },
   },
 };

examples/Basic/.eslintrc.js

@@ -1,12 +1,49 @@
 module.exports = {
   root: true,
-  extends: '@react-native-community',
-  parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint'],
+  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
+  extends: [
+    'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
+    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    'plugin:react-hooks/recommended',
+  ],
+  parserOptions: {
+    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
+    sourceType: 'module', // Allows for the use of imports
+    ecmaFeatures: {
+      jsx: true, // Allows for the parsing of JSX
+    },
+  },
+  plugins: [
+    '@typescript-eslint',
+  ],
   rules: {
-    'react/no-unstable-nested-components': [
-      'off' | 'warn' | 'error',
-      {allowAsProps: true | false},
+    'prettier/prettier': 0,
+    quotes: ['error', 'single'],
+    indent: ['error', 2, { SwitchCase: 1 }],
+    'react/prop-types': 'off',
+    '@typescript-eslint/no-namespace': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/interface-name-prefix': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off', //it makes sense to enable this rule
+    '@typescript-eslint/no-unused-vars': [2, { 'args': 'none', 'ignoreRestSiblings': true }],
+    '@typescript-eslint/explicit-function-return-type': 'off', //it makes sense to enable this rule
+    '@typescript-eslint/no-use-before-define': ['error', { 'variables': false }],
+    'react/jsx-first-prop-new-line': [1, 'multiline'],
+    'react/jsx-max-props-per-line': [1,
+      {
+        'maximum': 1,
+      },
     ],
+    'no-unused-vars': 'off',
+    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
+    'object-curly-spacing': ['error', 'always'],
+  },
+  settings: {
+    react: {
+      version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
+    },
   },
 };

examples/Basic/.prettierrc.js

@@ -3,4 +3,5 @@ module.exports = {
   jsxBracketSameLine: true,
   singleQuote: true,
   trailingComma: 'all',
+  arrowParens: 'avoid',
 };

examples/Basic/App.tsx

@@ -1,22 +1,21 @@
-import React, {useEffect} from 'react';
-import {Linking, Platform} from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
-import {NativeStackNavigationProp} from '@react-navigation/native-stack';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import {NamiCustomerManager} from 'react-native-nami-sdk';
-import {NamiPaywallManager} from 'react-native-nami-sdk';
+import React, { useEffect } from 'react';
+import { Linking, Platform } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { NamiCustomerManager, NamiPaywallManager } from 'react-native-nami-sdk';
 
 import CampaignScreen from './containers/CampaignScreen';
 import ProfileScreen from './containers/ProfileScreen';
 import EntitlementsScreen from './containers/EntitlementsScreen';
 import CustomerManagerScreen from './containers/CustomerManagerScreen';
-import {handleDeepLink} from './services/deeplinking';
+import { handleDeepLink } from './services/deeplinking';
 
 export const UNTITLED_HEADER_OPTIONS = {
   title: '',
   headerBackTitleVisible: false,
   headerShadowVisible: false,
-  headerStyle: {backgroundColor: 'transparent'},
+  headerStyle: { backgroundColor: 'transparent' },
 };
 
 type ViewerTabNavigatorParams = {
@@ -36,14 +35,14 @@ const Tab = createBottomTabNavigator<ViewerTabNavigatorParams>();
 
 const App = () => {
   useEffect(() => {
-    const linkingEvent = Linking.addEventListener('url', handleDeepLink);
+    Linking.addEventListener('url', handleDeepLink);
     Linking.getInitialURL().then((url) => {
       if (url) {
-        handleDeepLink({url});
+        handleDeepLink({ url });
       }
     });
     return () => {
-      linkingEvent.remove();
+      Linking.removeAllListeners('url');
     };
   }, []);
 
@@ -104,22 +103,22 @@ const App = () => {
     <NavigationContainer>
       <Tab.Navigator screenOptions={UNTITLED_HEADER_OPTIONS}>
         <Tab.Screen
-          options={{tabBarTestID: 'campaign_screen'}}
+          options={{ tabBarTestID: 'campaign_screen' }}
           name="Campaign"
           component={CampaignScreen}
         />
         <Tab.Screen
-          options={{tabBarTestID: 'profile_screen'}}
+          options={{ tabBarTestID: 'profile_screen' }}
           name="Profile"
           component={ProfileScreen}
         />
         <Tab.Screen
-          options={{tabBarTestID: 'entitlements_screen'}}
+          options={{ tabBarTestID: 'entitlements_screen' }}
           name="Entitlements"
           component={EntitlementsScreen}
         />
         <Tab.Screen
-          options={{tabBarTestID: 'customer_manager_screen'}}
+          options={{ tabBarTestID: 'customer_manager_screen' }}
           name="CustomerManager"
           component={CustomerManagerScreen}
         />

examples/Basic/building.sh

@@ -0,0 +1,56 @@
+#!/bin/bash
+
+function run_ios() {
+    if [ -z "$2" ]; then
+        echo "Starting iOS app..."
+        react-native run-ios
+    elif [ "$2" == "device" ]; then
+        echo "Starting iOS app on connected device..."
+        react-native run-ios --device
+    else
+        echo "Starting iOS app on simulator $2..."
+        react-native run-ios --simulator="$2"
+    fi
+}
+
+# For production debug flavor on an emulator: yarn b android prod debug
+# For staging release flavor on an emulator: yarn b android staging release
+function run_android() {
+    if [ "$2" == "prod" ]; then
+        variant="production"
+    elif [ "$2" == "staging" ]; then
+        variant="staging"
+    else
+        echo "Invalid environment. Choose either prod or staging."
+        exit 1
+    fi
+
+    if [ "$3" == "debug" ]; then
+        variant="${variant}Debug"
+    elif [ "$3" == "release" ]; then
+        variant="${variant}Release"
+    else
+        echo "Invalid type. Choose either debug or release."
+        exit 1
+    fi
+
+    if [ -z "$4" ]; then
+        echo "Starting Android app..."
+        react-native run-android --variant=$variant
+    elif [ "$4" == "d" ]; then
+        echo "Starting Android app on device..."
+        react-native run-android --deviceId="$5" --variant=$variant
+    else
+        echo "Invalid command. To run on a device, use the 'd' command."
+        exit 1
+    fi
+}
+
+if [ "$1" == "ios" ]; then
+    run_ios "$@"
+elif [ "$1" == "android" ]; then
+    run_android "$@"
+else
+    echo "Unknown command: $1"
+    echo "Usage: $0 {ios [simulatorName|device]|android [prod|staging] [debug|release] [d deviceId]}"
+fi

examples/Basic/config/getInitialConfig.ts

@@ -1,12 +1,12 @@
-import {NativeModules, Platform} from 'react-native';
+import { NativeModules, Platform } from 'react-native';
 
 import initAppleStageConfig from '../nami_initial_config_apple_stg.json';
 import initAndroidStageConfig from '../nami_initial_config_android_stg.json';
 import initAppleProductionConfig from '../nami_initial_config_apple_prod.json';
 import initAndroidProductionConfig from '../nami_initial_config_android_prod.json';
 
 export const getInitialConfig = () => {
-  let flavor = NativeModules.RNConfig.FLAVOR;
+  const flavor = NativeModules.RNConfig.FLAVOR;
 
   switch (Platform.OS) {
     case 'android':

examples/Basic/config/index.ts

@@ -1,22 +1,24 @@
-import {NativeModules} from 'react-native';
-import {getInitialConfig} from './getInitialConfig';
+import { NativeModules } from 'react-native';
+import { getInitialConfig } from './getInitialConfig';
 
 export function getConfigObject() {
   const flavor = NativeModules.RNConfig.FLAVOR;
   console.log('flavor', flavor);
   switch (flavor) {
     case 'staging':
+      // https://app-staging.namiml.com/integrations/
       return {
-        'appPlatformID-apple': 'APPLE_STG_APP_PLATFORM_ID',
-        'appPlatformID-android': 'ANDROID_STG_APP_PLATFORM_ID',
+        'appPlatformID-apple': '4a2f6dbf-e684-4d65-a4df-0488771c577d',
+        'appPlatformID-android': 'b7232eba-ff1d-4b7f-b8d0-55593b66c1d5',
         logLevel: 'DEBUG',
         namiCommands: ['useStagingAPI', 'useNamiWindow'],
         initialConfig: getInitialConfig(),
       };
     default:
+      // https://app.namiml.com/integrations/
       return {
-        'appPlatformID-apple': 'APPLE_PROD_APP_PLATFORM_ID',
-        'appPlatformID-android': 'ANDROID_PROD_APP_PLATFORM_ID',
+        'appPlatformID-apple': 'e1e51d49-5bda-41b2-9367-8408bb374b07',
+        'appPlatformID-android': '9cdda53d-fcb1-4d5b-b8b7-575437b6fe34',
         logLevel: 'DEBUG',
         initialConfig: getInitialConfig(),
       };