[MOB-10141] make lint rules stricter

.eslintignore

@@ -0,0 +1,3 @@
+integration-testing/
+lib/
+node_modules/

.eslintrc.js

@@ -0,0 +1,50 @@
+module.exports = {
+  root: true,
+  extends: [
+    '@react-native',
+    'plugin:react/recommended',
+    'plugin:react-native/all',
+    'prettier', // Disables ESLint rules that conflict with Prettier
+  ],
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+  },
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      plugins: ['@typescript-eslint/eslint-plugin'],
+      extends: [
+        'plugin:@typescript-eslint/recommended',
+        // We need more verbose typing to enable the below rule, but we should
+        // do this in the future
+        // 'plugin:@typescript-eslint/recommended-requiring-type-checking',
+      ],
+      parser: '@typescript-eslint/parser',
+      parserOptions: {
+        project: true,
+        tsconfigRootDir: __dirname,
+      },
+      rules: {
+        '@typescript-eslint/no-var-requires': [
+          'error',
+          { allow: ['/package\\.json$'] },
+        ],
+        '@typescript-eslint/no-require-imports': [
+          'error',
+          { allow: ['/package\\.json$'] },
+        ],
+      },
+    },
+    {
+      files: ['**/*.test.{js,ts,tsx}', '**/__mocks__/*', '**/__tests__/*'],
+      plugins: ['jest'],
+      env: {
+        jest: true,
+      },
+      rules: {
+        '@typescript-eslint/no-var-requires': 'off',
+        '@typescript-eslint/no-require-imports': 'off',
+      },
+    },
+  ],
+};

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "quoteProps": "consistent",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false
+}

example/src/components/App/App.utils.tsx

@@ -1,5 +1,5 @@
 import Icon from 'react-native-vector-icons/Ionicons';
 
-export const getIcon = (name: string, props: Record<string, any>) => (
+export const getIcon = (name: string, props: Record<string, unknown>) => (
   <Icon name={name} {...props} />
 );

example/src/components/App/Main.tsx

@@ -29,9 +29,10 @@ export const Main = () => {
   useEffect(() => {
     if (loginInProgress) return;
     if (isLoggedIn) {
-      Iterable.inAppManager.getMessages().then((messages) => {
-        setUnreadMessageCount(messages.length);
-      });
+      Iterable.inAppManager
+        .getMessages()
+        .then((messages) => setUnreadMessageCount(messages.length))
+        .catch((error) => console.error('Failed to get messages:', error));
     } else {
       // Reset unread message count when user logs out
       setUnreadMessageCount(0);
@@ -42,9 +43,9 @@ export const Main = () => {
     <>
       <Tab.Navigator
         screenOptions={({ route }) => {
-          const iconName = routeIcon[route.name as keyof typeof routeIcon];
+          const iconName = routeIcon[route.name];
           return {
-            tabBarIcon: (props) => getIcon(iconName as string, props),
+            tabBarIcon: (props) => getIcon(iconName, props),
             tabBarActiveTintColor: colors.brandPurple,
             tabBarInactiveTintColor: colors.textSecondary,
             headerShown: false,

example/src/components/Commerce/Commerce.constants.ts

@@ -1,7 +1,9 @@
+import type { ImageProps } from 'react-native';
+
 export type CommerceItem = {
   id: string;
   name: string;
-  icon: any;
+  icon: ImageProps['source'];
   subtitle: string;
   price: number;
 };
@@ -10,20 +12,23 @@ export const items: CommerceItem[] = [
   {
     id: 'black',
     name: 'Black Coffee',
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
     icon: require('./img/black-coffee.png'),
     subtitle: 'Maximize health benefits',
     price: 2.53,
   },
   {
     id: 'cappuccino',
     name: 'Cappuccino',
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
     icon: require('./img/cappuccino.png'),
     subtitle: 'Tasty and creamy',
     price: 3.56,
   },
   {
     id: 'mocha',
     name: 'Mocha',
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
     icon: require('./img/mocha.png'),
     subtitle: 'Indulge yourself',
     price: 4.98,

example/src/components/Commerce/Commerce.styles.ts

@@ -6,62 +6,63 @@ import {
   container,
   title,
   subtitle,
+  shadows,
 } from '../../constants';
 
 const styles = StyleSheet.create({
-  container,
-  title: { ...title, textAlign: 'center' },
-  subtitle: { ...subtitle, textAlign: 'center' },
+  button: { ...button, marginTop: 10, paddingVertical: 5, width: 100 },
+  buttonText,
   cardContainer: {
     backgroundColor: colors?.white,
-    borderWidth: 1,
-    padding: 15,
     borderColor: colors?.grey5,
-    shadowColor: 'rgba(0,0,0, .2)',
-    shadowOffset: { height: 0, width: 0 },
-    shadowOpacity: 1,
-    shadowRadius: 1,
-    elevation: 10, // Required for Android
-    width: '100%',
+    borderWidth: 1,
+    elevation: shadows.card.elevation, // Required for Android
     height: 150,
     marginBottom: 10,
-  },
-  infoContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: 10,
-    alignItems: 'center',
-  },
-  imageContainer: {
-    width: 120,
-    height: 100,
-    flex: 0,
-  },
-  textContainer: {
-    paddingTop: 10,
-    flex: 1,
-    marginLeft: 10,
+    padding: 15,
+    shadowColor: shadows.card.color,
+    shadowOffset: shadows.card.offset,
+    shadowOpacity: shadows.card.opacity,
+    shadowRadius: shadows.card.radius,
+    width: '100%',
   },
   cardImage: {
     height: '100%',
-    width: '100%',
     resizeMode: 'contain',
+    width: '100%',
+  },
+  cardSubtitle: {
+    color: colors.textSecondary,
+    fontSize: 14,
   },
   cardTitle: {
     fontSize: 18,
     fontWeight: 'bold',
   },
-  cardSubtitle: {
-    fontSize: 14,
-    color: colors.textSecondary,
+  container,
+  imageContainer: {
+    flex: 0,
+    height: 100,
+    width: 120,
+  },
+  infoContainer: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 10,
   },
   price: {
-    marginVertical: 5,
-    fontWeight: 'bold',
     color: colors.salmon50,
+    fontWeight: 'bold',
+    marginVertical: 5,
   },
-  button: { ...button, width: 100, marginTop: 10, paddingVertical: 5 },
-  buttonText,
+  subtitle: { ...subtitle, textAlign: 'center' },
+  textContainer: {
+    flex: 1,
+    marginLeft: 10,
+    paddingTop: 10,
+  },
+  title: { ...title, textAlign: 'center' },
 });
 
 export default styles;

example/src/components/Commerce/Commerce.tsx

@@ -36,7 +36,8 @@ export const Commerce = () => {
       <View style={styles.container}>
         <Text style={styles.title}>Commerce</Text>
         <Text style={styles.subtitle}>
-          Purchase will be tracked when "Buy" is clicked. See logs for output.
+          Purchase will be tracked when &quot;Buy&quot; is clicked. See logs for
+          output.
         </Text>
         {items.map((item) => (
           <View key={item.id} style={styles.cardContainer}>

example/src/components/Login/Login.styles.ts

@@ -1,10 +1,12 @@
 import { StyleSheet, type ViewStyle } from 'react-native';
+
 import {
   appName,
   buttonBlock,
   buttonDisabled,
   buttonText,
   buttonTextDisabled,
+  colors,
   container,
   input,
   label,
@@ -19,22 +21,22 @@ const setButton = (buttonToSet: ViewStyle = {}) => ({
 });
 
 export const styles = StyleSheet.create({
-  loginScreenContainer: {
-    ...container,
-    backgroundColor: 'white',
-  },
-  loadingContainer: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  formContainer: { marginTop: 24 },
   appName,
-  title,
-  subtitle,
-  input: { ...input, marginBottom: 15 },
   button: setButton(),
   buttonDisabled: setButton(buttonDisabled),
   buttonText,
   buttonTextDisabled,
+  formContainer: { marginTop: 24 },
+  input: { ...input, marginBottom: 15 },
   label,
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  loginScreenContainer: {
+    ...container,
+    backgroundColor: colors.white,
+  },
+  subtitle,
+  title,
 });

example/src/components/User/User.styles.ts

@@ -7,14 +7,10 @@ const text: TextStyle = {
 };
 
 const styles = StyleSheet.create({
-  container,
   appName: appNameSmall,
   button,
   buttonText,
-  secondaryButton: {
-    ...button,
-    backgroundColor: 'gray',
-  },
+  container,
   text,
 });
 

example/src/components/User/User.tsx

@@ -21,7 +21,7 @@ export const User = () => {
     <View style={styles.container}>
       <Text style={styles.appName}>Welcome Iterator</Text>
       <Text style={styles.text}>Logged in as {loggedInAs}</Text>
-      <TouchableOpacity style={styles.secondaryButton} onPress={logout}>
+      <TouchableOpacity style={styles.button} onPress={logout}>
         <Text style={styles.buttonText}>Logout</Text>
       </TouchableOpacity>
     </View>

example/src/constants/styles/index.ts

@@ -1,4 +1,5 @@
 export * from './colors';
 export * from './containers';
 export * from './formElements';
+export * from './shadows';
 export * from './typography';

example/src/constants/styles/shadows.ts

@@ -0,0 +1,9 @@
+export const shadows = {
+  card: {
+    color: 'rgba(0,0,0, .2)',
+    offset: { height: 0, width: 0 },
+    opacity: 1,
+    radius: 1,
+    elevation: 10, // Required for Android
+  },
+};

example/src/hooks/useIterableApp.tsx

@@ -129,6 +129,7 @@ export const IterableAppProvider: FunctionComponent<
         for (const route of routeNames) {
           if (url.includes(route.toLowerCase())) {
             // TODO: Figure out typing for this
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             navigation.navigate(route);
             return true;
@@ -158,7 +159,7 @@ export const IterableAppProvider: FunctionComponent<
       }
 
       // Initialize app
-      return Iterable.initialize(key as string, config)
+      return Iterable.initialize(key, config)
         .then((isSuccessful) => {
           setIsInitialized(isSuccessful);
 

example/src/types/navigation.ts

@@ -27,8 +27,4 @@ export type MainScreenProps<T extends keyof MainScreenParamList> =
 export type RootStackScreenProps<T extends keyof RootStackParamList> =
   StackScreenProps<RootStackParamList, T>;
 
-declare global {
-  namespace ReactNavigation {
-    interface RootParamList extends RootStackParamList {}
-  }
-}
+export type { RootStackParamList as RootParamList };