fix(Redux Toolkit): Added patch files to resolve types issues with us…

…ing node16 module resolution

.github/workflows/tests.yml

@@ -139,14 +139,25 @@ jobs:
       fail-fast: false
       matrix:
         node: ['16.x']
-        example: ['cra5']
+        example: ['cra5', 'rn-expo']
     defaults:
       run:
         working-directory: ./examples/publish-ci/${{ matrix.example }}
     steps:
       - name: Checkout repo
         uses: actions/checkout@v2
 
+      - name: Set up JDK
+        if: matrix.example == 'rn-expo'
+        uses: actions/setup-java@v3
+        with:
+          distribution: 'microsoft'
+          java-version: '17'
+
+      - name: Setup Android SDK
+        if: matrix.example == 'rn-expo'
+        uses: android-actions/setup-android@v2
+
       - name: Use node ${{ matrix.node }}
         uses: actions/setup-node@v2
         with:
@@ -173,5 +184,16 @@ jobs:
       - name: Build example
         run: yarn build
 
-      - name: Run Playwright test
+      - name: Run Playwrite test
+        if: matrix.example == 'cra5'
         run: yarn test
+
+      - name: Run Detox test
+        if: matrix.example == 'rn-expo'
+        uses: reactivecircus/android-emulator-runner@v2
+        with:
+          api-level: 30
+          target: default
+          arch: x86_64
+          profile: pixel
+          avd-name: Pixel_3a_API_30_x86

examples/publish-ci/rn-expo/.detoxrc.js

@@ -0,0 +1,44 @@
+/** @type {Detox.DetoxConfig} */
+module.exports = {
+  testRunner: {
+    args: {
+      '$0': 'jest',
+      config: 'tests/detox/jest.config.js'
+    },
+    jest: {
+      setupTimeout: 120000
+    }
+  },
+  apps: {
+    'ios.release': {
+      type: 'ios.app',
+      build: 'xcodebuild -workspace ios/eastestsexample.xcworkspace -scheme eastestsexample -configuration Release -sdk iphonesimulator -arch x86_64 -derivedDataPath ios/build',
+      binaryPath: 'ios/build/Build/Products/Release-iphonesimulator/eastestsexample.app'
+    },
+    'android.release': {
+      type: 'android.apk',
+      build: 'cd android && ./gradlew :app:assembleRelease :app:assembleAndroidTest -DtestBuildType=release && cd ..',
+      binaryPath: 'android/app/build/outputs/apk/release/app-release.apk'
+    }
+  },
+  devices: {
+    simulator: {
+      type: 'ios.simulator',
+      device: {
+        type: 'iPhone 12'
+      }
+    },
+    emulator: {
+      type: 'android.emulator',
+      device: {
+        avdName: 'Pixel_3a_API_30_x86'
+      }
+    }
+  },
+  configurations: {
+    'android.emu.release': {
+      device: 'emulator',
+      app: 'android.release'
+    }
+  }
+};

examples/publish-ci/rn-expo/.eslintrc.js

@@ -0,0 +1,35 @@
+module.exports = {
+  root: true,
+  env: {
+    jest: true,
+  },
+  environments: {
+		detox: {
+			globals: {
+				detox: false,
+			    device: false,
+			    expect: false,
+			    waitFor: false,
+			    element: false,
+			    by: false,
+			}
+		}
+	},
+  extends: [
+    '@react-native-community',
+    'eslint:recommended',
+    'plugin:react/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react', '@typescript-eslint'],
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      rules: {
+        '@typescript-eslint/no-shadow': ['error'],
+        'no-shadow': 'off',
+        'no-undef': 'off',
+      },
+    },
+  ],
+};

examples/publish-ci/rn-expo/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

examples/publish-ci/rn-expo/.gitignore

@@ -0,0 +1,47 @@
+.expo/*
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# Pre-Builds
+/android
+/ios
+
+# Dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+typesversions
+.cache
+.yarnrc
+.yarn/*
+!.yarn/patches
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*
+*.tgz

examples/publish-ci/rn-expo/.npmignore

@@ -0,0 +1,14 @@
+*.jks
+*.key
+*.mobileprovision
+*.p12
+*.p8
+.DS_Store
+.expo
+.npmignore
+.vscode
+package-lock.json
+yarn.lock
+yarn-error.log
+yarn-debug.log*
+npm-debug.log*

examples/publish-ci/rn-expo/.prettierrc.js

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

examples/publish-ci/rn-expo/App.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { store } from './src/app/store';
+import { App } from './src';
+
+const MainApp = () => (
+  <Provider store={store}>
+    <App />
+  </Provider>
+);
+
+export default MainApp;

examples/publish-ci/rn-expo/app.json

@@ -0,0 +1,37 @@
+{
+  "expo": {
+    "name": "HelloWorld",
+    "slug": "expo-template-blank-typescript",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.anonymous.expotemplateblanktypescript"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      },
+      "package": "com.anonymous.expotemplateblanktypescript"
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    },
+    "plugins": [
+      "@config-plugins/detox"
+    ]
+  }
+}

examples/publish-ci/rn-expo/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

examples/publish-ci/rn-expo/index.js

@@ -0,0 +1,8 @@
+import { registerRootComponent } from 'expo';
+
+import App from './App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately.
+registerRootComponent(App);

examples/publish-ci/rn-expo/metro.config.js

@@ -0,0 +1,4 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+const { getDefaultConfig } = require('expo/metro-config');
+
+module.exports = getDefaultConfig(__dirname);

examples/publish-ci/rn-expo/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "expo-template-redux-typescript",
+  "description": "The Blank project template includes typescript and redux.",
+  "version": "47.0.0",
+  "scripts": {
+    "start": "expo start --dev-client",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "web": "expo start --web",
+    "build": "expo prebuild && yarn build:emu",
+    "build:emu": "detox build --configuration android.emu.release",
+    "test": "detox test --configuration android.emu.release --headless"
+  },
+  "dependencies": {
+    "@reduxjs/toolkit": "^1.8.6",
+    "expo": "~47.0.12",
+    "expo-splash-screen": "~0.17.5",
+    "expo-status-bar": "~1.4.1",
+    "react": "18.1.0",
+    "react-dom": "^18.2.0",
+    "react-native": "0.70.5",
+    "react-native-web": "~0.18.9",
+    "react-redux": "^8.0.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9",
+    "@config-plugins/detox": "^4.0.0",
+    "@react-native-community/eslint-config": "^3.1.0",
+    "@types/detox": "^18.1.0",
+    "@types/jest": "^29.4.0",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "@types/react-native": "0.70.4",
+    "@typescript-eslint/eslint-plugin": "^5.41.0",
+    "@typescript-eslint/parser": "^5.41.0",
+    "detox": "^20.3.0",
+    "detox-cli": "^20.0.0",
+    "eslint": "^8.26.0",
+    "eslint-config-universe": "^11.1.0",
+    "jest": "^29.4.3",
+    "prettier": "^2.7.1",
+    "typescript": "^4.8.4"
+  },
+  "private": true
+}

examples/publish-ci/rn-expo/src/app/hooks/index.ts

@@ -0,0 +1,45 @@
+import { useRef, useEffect } from 'react';
+import { useWindowDimensions, Animated } from 'react-native';
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import { RootState, AppDispatch } from '../store';
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
+
+export const useViewportUnits = () => {
+  const { width, height } = useWindowDimensions();
+
+  const vh = height / 100;
+  const vw = width / 100;
+
+  return { vh, vw };
+};
+
+export const useBounceAnimation = (value = 10) => {
+  const bounce = useRef(new Animated.Value(0)).current;
+
+  bounce.interpolate({
+    inputRange: [-300, -100, 0, 100, 101],
+    outputRange: [300, 0, 1, 0, 0],
+  });
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(bounce, {
+          toValue: value,
+          duration: 1500,
+          useNativeDriver: true,
+        }),
+        Animated.timing(bounce, {
+          toValue: 0,
+          duration: 1500,
+          useNativeDriver: true,
+        }),
+      ]),
+    ).start();
+  }, [bounce, value]);
+
+  return bounce;
+};

examples/publish-ci/rn-expo/src/app/store.ts

@@ -0,0 +1,17 @@
+import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
+import counterReducer from '../features/counter/counterSlice';
+
+export const store = configureStore({
+  reducer: {
+    counter: counterReducer,
+  },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+export type AppThunk<ReturnType = void> = ThunkAction<
+  ReturnType,
+  RootState,
+  unknown,
+  Action<string>
+>;