Make react-native package ESM only (#300)

* Update react-native package to ESM only and setup Detox

* Add changeset

.changeset/real-dolls-turn.md

@@ -0,0 +1,7 @@
+---
+"@quiltt/react-native": patch
+"@quiltt/react": patch
+"@quiltt/core": patch
+---
+
+Make @quiltt/react-native ESM only

.github/workflows/tests-e2e.yml

@@ -13,51 +13,70 @@ permissions:
 
 jobs:
   test:
-    runs-on: ubuntu-latest
+    runs-on: macos-latest # Run on MacOS so that iPhone simulator works
     strategy:
       matrix:
         include:
           - name: 'Test Next App'
             directory: './examples/react-nextjs'
-          # - name: 'Test Expo App' # Weird issue with dependencies in CI. Test locally to validate.
+          # - name: 'Test Expo App' # Figure out how to run Detox tests on Expo
           #   directory: './examples/react-native-expo'
 
     steps:
       - name: Checkout branch
         uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
 
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
+          cache: 'pnpm'
 
       - name: Install Sharp CLI
         run: npm install -g sharp-cli
 
-      - name: Enable Corepack
-        run: corepack enable
-
-      - name: Install Package Manager Version for Root
-        run: corepack prepare pnpm --activate
-
       - name: Install Root Dependencies
         run: pnpm install --frozen-lockfile
 
       - name: Build packages
         run: pnpm run build:packages
 
-      - name: Install Package Manager Version
-        run: corepack prepare pnpm --activate
-        working-directory: ${{ matrix.directory }}
-
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
         working-directory: ${{ matrix.directory }}
 
+      # - name: Cache Pods # Enable this when running Detox tests on Expo
+      #   if: ${{ matrix.name == 'Test Expo App' }}
+      #   uses: actions/cache@v3
+      #   with:
+      #     path: ${{ matrix.directory }}/ios/Pods
+      #     key: ${{ runner.os }}-pods-${{ hashFiles('**/Podfile.lock') }}
+
+      # - name: Cache Derived Data # Enable this when running Detox tests on Expo
+      #   if: ${{ matrix.name == 'Test Expo App' }}
+      #   uses: actions/cache@v3
+      #   with:
+      #     path: ${{ matrix.directory }}/ios/build
+      #     key: ${{ runner.os }}-derived-data-${{ github.sha }}
+
+      # - name: Install Detox dependencies # Enable this when running Detox tests on Expo
+      #   if: ${{ matrix.name == 'Test Expo App' }}
+      #   run: |
+      #     brew tap wix/brew
+      #     brew install applesimutils
+
       - name: Build app
         run: pnpm run build
         working-directory: ${{ matrix.directory }}
 
+      # - name: Build for testing # Enable this when running Detox tests on Expo
+      #   if: ${{ matrix.name == 'Test Expo App' }}
+      #   run: pnpm run test:ios:build
+      #   working-directory: ${{ matrix.directory }}
+
       - name: Run tests
         run: pnpm run test
         working-directory: ${{ matrix.directory }}
@@ -71,3 +90,13 @@ jobs:
             ${{github.workspace}}/**/cypress/screenshots
             ${{github.workspace}}/**/cypress/videos
           retention-days: 3
+
+      # - if: ${{ failure() }} && ${{ matrix.name == 'Test Expo App' }}
+      #   name: Upload iOS Test Artifacts # Enable this when running Detox tests on Expo
+      #   uses: actions/upload-artifact@v3
+      #   with:
+      #     name: ios_test_artifacts
+      #     path: |
+      #       ${{ matrix.directory }}/artifacts
+      #       ${{ matrix.directory }}/ios/build/logs
+      #     retention-days: 3

examples/react-native-expo/.gitignore

@@ -40,4 +40,7 @@ app-example
 
 # App builds
 android/
-ios/
+ios/
+
+# Test artifacts
+artifacts/

examples/react-native-expo/app.json

@@ -7,7 +7,7 @@
     "icon": "./assets/images/icon.png",
     "scheme": "myapp",
     "userInterfaceStyle": "automatic",
-    "newArchEnabled": true,
+    "newArchEnabled": false,
     "ios": {
       "bundleIdentifier": "com.example",
       "supportsTablet": true
@@ -34,7 +34,8 @@
           "resizeMode": "contain",
           "backgroundColor": "#ffffff"
         }
-      ]
+      ],
+      "@config-plugins/detox"
     ],
     "experiments": {
       "typedRoutes": true

examples/react-native-expo/app/(tabs)/connector.tsx

@@ -11,13 +11,13 @@ const CONNECTOR_ID = process.env.EXPO_PUBLIC_CONNECTOR_ID
 const HTTPS_APP_LINK = process.env.EXPO_PUBLIC_HTTPS_APP_LINK
 const INSTITUTION_SEARCH_TERM = process.env.EXPO_PUBLIC_INSTITUTION_SEARCH_TERM
 
-export default function ExplorerScreen() {
+export default function ConnectorScreen() {
   const navigateBack = () => {
     router.canGoBack() ? router.back() : router.push('/(tabs)')
   }
 
   return (
-    <ThemedView style={styles.container}>
+    <ThemedView style={styles.container} testID="quiltt-connector">
       <QuilttConnector
         connectorId={CONNECTOR_ID!}
         oauthRedirectUrl={HTTPS_APP_LINK!}

examples/react-native-expo/app/(tabs)/data.tsx

@@ -43,7 +43,9 @@ export default function DataScreen() {
       ) : (
         <ThemedView style={styles.container}>
           <ThemedView style={styles.container}>
-            <ThemedText style={styles.title}>Profile</ThemedText>
+            <ThemedText style={styles.title} testID="profile-section">
+              Profile
+            </ThemedText>
             <ThemedText>ID: {data?.profile?.id}</ThemedText>
             <ThemedText>Name: {data?.profile?.name}</ThemedText>
             <ThemedText>Email: {data?.profile?.email}</ThemedText>

examples/react-native-expo/app/(tabs)/index.tsx

@@ -17,7 +17,9 @@ export default function HomeScreen() {
       }
     >
       <ThemedView style={styles.titleContainer}>
-        <ThemedText type="title">Welcome!</ThemedText>
+        <ThemedText type="title" testID="welcome-title">
+          Welcome!
+        </ThemedText>
         <HelloWave />
       </ThemedView>
       <ThemedView style={styles.stepContainer}>

examples/react-native-expo/detox.config.js

@@ -0,0 +1,39 @@
+/** @type {Detox.DetoxConfig} */
+module.exports = {
+  testRunner: {
+    args: {
+      $0: 'jest',
+      config: 'e2e/jest.config.js',
+    },
+    jest: {
+      setupTimeout: 50000,
+    },
+  },
+  apps: {
+    'ios.debug': {
+      type: 'ios.app',
+      build:
+        'xcodebuild -workspace ios/reactnativeexpo.xcworkspace -scheme reactnativeexpo -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build SWIFT_VERSION=5.0 -quiet COMPILER_INDEX_STORE_ENABLE=NO',
+      binaryPath: 'ios/build/Build/Products/Debug-iphonesimulator/reactnativeexpo.app',
+    },
+  },
+  behavior: {
+    init: {
+      exposeGlobals: true,
+    },
+  },
+  devices: {
+    simulator: {
+      type: 'ios.simulator',
+      device: {
+        type: 'iPhone 16 Pro',
+      },
+    },
+  },
+  configurations: {
+    'ios.sim.debug': {
+      device: 'simulator',
+      app: 'ios.debug',
+    },
+  },
+}

examples/react-native-expo/e2e/jest.config.js

@@ -0,0 +1,12 @@
+/** @type {import('@jest/types').Config.InitialOptions} */
+module.exports = {
+  rootDir: '..',
+  testMatch: ['<rootDir>/e2e/**/*.test.js'],
+  testTimeout: 60000,
+  maxWorkers: 1,
+  globalSetup: 'detox/runners/jest/globalSetup',
+  globalTeardown: 'detox/runners/jest/globalTeardown',
+  reporters: ['detox/runners/jest/reporter'],
+  testEnvironment: 'detox/runners/jest/testEnvironment',
+  verbose: true,
+}

examples/react-native-expo/e2e/starter.test.js

@@ -0,0 +1,16 @@
+const { device, element, by, expect, waitFor } = require('detox')
+
+describe('App Navigation and Basic Features', () => {
+  beforeAll(async () => {
+    await device.launchApp({
+      newInstance: true,
+      launchArgs: { detoxURLBlacklistRegex: '(".*127.0.0.1.*")' },
+    })
+  }, 120000)
+
+  it('should show home tab', async () => {
+    await waitFor(element(by.text('Home')))
+      .toBeVisible()
+      .withTimeout(10000)
+  }, 45000)
+})

examples/react-native-expo/package.json

@@ -9,35 +9,39 @@
     "android": "expo run:android",
     "ios": "expo run:ios",
     "web": "expo start --web",
-    "test": "node ./scripts/test.js",
+    "test:ios:build": "detox build --configuration ios.sim.debug",
+    "test:ios:run": "detox test -c ios.sim.debug",
+    "test:ios:run:ci": "detox test --configuration ios.sim.debug --cleanup --headless --record-logs all",
+    "test": "node scripts/test.js",
     "lint": "TIMING=1 biome check app/ --fix",
     "typecheck": "tsc --project tsconfig.json --noEmit"
   },
   "dependencies": {
+    "@config-plugins/detox": "^8.0.0",
     "@expo/vector-icons": "^14.0.2",
     "@quiltt/react-native": "workspace:*",
     "@react-navigation/bottom-tabs": "^7.0.0",
-    "@react-navigation/native": "^7.0.0",
     "@react-navigation/elements": "^2.0.2",
-    "expo": "~52.0.6",
+    "@react-navigation/native": "^7.0.0",
+    "expo": "52.0.7",
     "expo-blur": "~14.0.1",
     "expo-constants": "~17.0.3",
     "expo-font": "~13.0.1",
     "expo-haptics": "~14.0.0",
     "expo-linking": "~7.0.2",
-    "expo-router": "~4.0.5",
-    "expo-splash-screen": "~0.29.9",
+    "expo-router": "~4.0.6",
+    "expo-splash-screen": "~0.29.11",
     "expo-status-bar": "~2.0.0",
     "expo-symbols": "~0.2.0",
-    "expo-system-ui": "~4.0.2",
+    "expo-system-ui": "~4.0.3",
     "expo-web-browser": "~14.0.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-native": "0.76.1",
+    "react-native": "0.76.2",
     "react-native-gesture-handler": "~2.20.2",
     "react-native-reanimated": "~3.16.1",
     "react-native-safe-area-context": "4.12.0",
-    "react-native-screens": "~4.0.0",
+    "react-native-screens": "~4.1.0",
     "react-native-web": "~0.19.13",
     "react-native-webview": "13.12.2"
   },
@@ -46,6 +50,8 @@
     "@biomejs/biome": "1.9.4",
     "@types/react": "18.3.12",
     "@types/react-test-renderer": "18.3.0",
+    "detox": "20.28.0",
+    "jest": "29.7.0",
     "react-test-renderer": "18.3.1",
     "typescript": "5.6.3"
   },

package.json

@@ -34,11 +34,11 @@
     "check-dependency-version-consistency": "4.1.0",
     "genversion": "3.2.0",
     "happy-dom": "15.10.2",
-    "turbo": "2.2.3",
+    "turbo": "2.3.0",
     "vite": "5.4.6",
     "vite-tsconfig-paths": "5.0.1",
     "vitest": "2.0.5",
     "vitest-react-native": "0.1.5"
   },
-  "packageManager": "[email protected].0"
+  "packageManager": "[email protected].2"
 }

packages/core/package.json

@@ -2,21 +2,15 @@
   "name": "@quiltt/core",
   "version": "3.8.0",
   "description": "Javascript API client and utilities for Quiltt",
-  "keywords": [
-    "quiltt",
-    "typescript"
-  ],
+  "keywords": ["quiltt", "typescript"],
   "homepage": "https://github.com/quiltt/quiltt-js/tree/main/packages/core#readme",
   "repository": {
     "type": "git",
     "url": "https://github.com/quiltt/quiltt-js.git",
     "directory": "packages/core"
   },
   "license": "MIT",
-  "sideEffects": [
-    "./src/Storage/Local.ts",
-    "./src/api/graphql/links/SubscriptionLink.ts"
-  ],
+  "sideEffects": ["./src/Storage/Local.ts", "./src/api/graphql/links/SubscriptionLink.ts"],
   "type": "module",
   "exports": {
     ".": {
@@ -25,11 +19,7 @@
     }
   },
   "types": "./dist/index.d.ts",
-  "files": [
-    "dist/**",
-    "src/**",
-    "CHANGELOG.md"
-  ],
+  "files": ["dist/**", "src/**", "CHANGELOG.md"],
   "scripts": {
     "build": "bunchee",
     "clean": "rimraf .turbo dist",
@@ -50,7 +40,7 @@
     "@types/node": "22.9.0",
     "@types/rails__actioncable": "6.1.11",
     "@types/react": "18.3.12",
-    "bunchee": "5.3.2",
+    "bunchee": "5.6.1",
     "rimraf": "6.0.1",
     "typescript": "5.6.3"
   },