Add react native, fix commands

Author: rjvim

.gitignore

@@ -37,3 +37,62 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+# React Native
+
+## Xcode
+
+**/ios/**/build/
+**/ios/**/*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+
+## Android
+
+**/android/**/build/
+**/android/**/.gradle
+**/android/**/local.properties
+**/android/**/*.iml
+
+## BUCK
+
+buck-out/
+\.buckd/
+*.keystore
+!debug.keystore
+
+## fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+#
+*/fastlane/report.xml
+*/fastlane/Preview.html
+*/fastlane/screenshots
+
+## Bundle artifact
+*.jsbundle
+
+## CocoaPods
+**/ios/Pods/
+/
+
+## Nested node_modules
+
+node_modules/
+
+apps/mobile-e2e/artifacts

Notes.md

@@ -0,0 +1,40 @@
+- The first thing we did is - npx create-nx-workspace@latest with an empty setup
+
+### Setup React Application - Dashboard
+
+- Add react plugin : `yarn add -D @nrwl/react`
+- Create react application : `yarn nx g @nrwl/react:application dash --js` (With None as CSS Preset)
+- Run Dashboard `yarn nx serve dash`
+- Add styles.css with @tailwind annotations
+- Add tailwind.config.js inside dash
+- Add postcss.config.js at root
+- Edit project.json add tailwind command to compile minified version
+- To build this: `yarn nx build dash`
+
+### Setup Nextjs Application - Landing
+
+- Add plugin: `yarn add @nrwl/next --dev`
+- Create application: `yarn nx g @nrwl/next:app land --js` 
+- Run Dashboard `yarn nx serve land`
+- Add styles.css with @tailwind annotations
+- Add tailwind.config.js inside land
+- Export `yarn nx export land`
+
+
+### Helpers
+
+- To remove an application `npx nx g @nrwl/workspace:remove <app-name>`
+
+### Setup React Native Mobile Application - Landing
+
+
+https://github.com/nrwl/nx-react-native
+
+`yarn nx g @nrwl/react-native:app mobile --js`
+
+
+Bundler: `yarn nx start mobile`
+
+Android: `yarn nx run-android mobile`
+
+iOS: `yarn nx run-ios mobile --install`

apps/dash/project.json

@@ -3,14 +3,14 @@
   "sourceRoot": "apps/dash/src",
   "projectType": "application",
   "targets": {
-    "build": {
+    "build-with-tw": {
       "executor": "@nrwl/workspace:run-commands",
       "outputs": [],
       "options": {
-        "command": "NODE_ENV=production npx tailwindcss-cli@latest build -i ./apps/dash/src/styles.css -c ./apps/dash/tailwind.config.js -o ./apps/dash/src/tailwind.css --minify && npx nx build-app dash --prod"
+        "command": "NODE_ENV=production npx tailwindcss-cli@latest build -i ./apps/dash/src/styles.css -c ./apps/dash/tailwind.config.js -o ./apps/dash/src/tailwind.css --minify && npx nx build dash --prod"
       }
     },
-    "build-app": {
+    "build": {
       "executor": "@nrwl/web:build",
       "outputs": ["{options.outputPath}"],
       "defaultConfiguration": "production",

apps/mobile-e2e/.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic"
+      }
+    ]
+  ],
+  "plugins": []
+}

apps/mobile-e2e/.detoxrc.json

@@ -0,0 +1,58 @@
+{
+  "testRunner": "jest",
+  "runnerConfig": "jest.config.json",
+  "apps": {
+    "ios.debug": {
+      "type": "ios.app",
+      "build": "cd ../mobile/ios && xcodebuild -workspace Mobile.xcworkspace -scheme Mobile -configuration Debug -sdk iphonesimulator -destination 'platform=iOS Simulator,name=iPhone 12' -derivedDataPath ./build -quiet",
+      "binaryPath": "../mobile/ios/build/Build/Products/Debug-iphonesimulator/Mobile.app"
+    },
+    "ios.release": {
+      "type": "ios.app",
+      "build": "cd ../mobile/ios && xcodebuild -workspace Mobile.xcworkspace -scheme Mobile -configuration Release -sdk iphonesimulator -destination 'platform=iOS Simulator,name=iPhone 12' -derivedDataPath ./build -quiet",
+      "binaryPath": "../mobile/ios/build/Build/Products/Release-iphonesimulator/Mobile.app"
+    },
+    "android.debug": {
+      "type": "android.apk",
+      "build": "cd ../mobile/android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug",
+      "binaryPath": "../mobile/android/app/build/outputs/apk/debug/app-debug.apk"
+    },
+    "android.release": {
+      "type": "android.apk",
+      "build": "cd ../mobile/android && ./gradlew assembleRelease assembleAndroidTest -DtestBuildType=release",
+      "binaryPath": "../mobile/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_4a_API_30"
+      }
+    }
+  },
+  "configurations": {
+    "ios.sim.release": {
+      "device": "simulator",
+      "app": "ios.release"
+    },
+    "ios.sim.debug": {
+      "device": "simulator",
+      "app": "ios.debug"
+    },
+    "android.emu.release": {
+      "device": "emulator",
+      "app": "android.release"
+    },
+    "android.emu.debug": {
+      "device": "emulator",
+      "app": "android.debug"
+    }
+  }
+}

apps/mobile-e2e/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

apps/mobile-e2e/environment.js

@@ -0,0 +1,23 @@
+const {
+  DetoxCircusEnvironment,
+  SpecReporter,
+  WorkerAssignReporter,
+} = require('detox/runners/jest-circus');
+
+class CustomDetoxEnvironment extends DetoxCircusEnvironment {
+  constructor(config, context) {
+    super(config, context);
+
+    // Can be safely removed, if you are content with the default value (=300000ms)
+    this.initTimeout = 300000;
+
+    // This takes care of generating status logs on a per-spec basis. By default, Jest only reports at file-level.
+    // This is strictly optional.
+    this.registerListeners({
+      SpecReporter,
+      WorkerAssignReporter,
+    });
+  }
+}
+
+module.exports = CustomDetoxEnvironment;

apps/mobile-e2e/jest.config.json

@@ -0,0 +1,12 @@
+{
+  "preset": "../../jest.preset",
+  "testEnvironment": "./environment",
+  "testRunner": "jest-circus/runner",
+  "testTimeout": 120000,
+  "reporters": ["detox/runners/jest/streamlineReporter"],
+  "setupFilesAfterEnv": ["<rootDir>/test-setup.ts"],
+  "transform": {
+    "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "@nrwl/react/plugins/jest",
+    "^.+\\.[tj]sx?$": "babel-jest"
+  }
+}

apps/mobile-e2e/project.json

@@ -0,0 +1,60 @@
+{
+  "root": "apps/mobile-e2e",
+  "sourceRoot": "apps/mobile-e2e/src",
+  "projectType": "application",
+  "targets": {
+    "build-ios": {
+      "executor": "@nrwl/detox:build",
+      "options": {
+        "detoxConfiguration": "ios.sim.debug"
+      },
+      "configurations": {
+        "production": {
+          "detoxConfiguration": "ios.sim.release"
+        }
+      }
+    },
+    "test-ios": {
+      "executor": "@nrwl/detox:test",
+      "options": {
+        "detoxConfiguration": "ios.sim.debug"
+      },
+      "configurations": {
+        "production": {
+          "detoxConfiguration": "ios.sim.release"
+        }
+      }
+    },
+    "build-android": {
+      "executor": "@nrwl/detox:build",
+      "options": {
+        "detoxConfiguration": "android.emu.debug"
+      },
+      "configurations": {
+        "production": {
+          "detoxConfiguration": "android.emu.release"
+        }
+      }
+    },
+    "test-android": {
+      "executor": "@nrwl/detox:test",
+      "options": {
+        "detoxConfiguration": "android.emu.debug"
+      },
+      "configurations": {
+        "production": {
+          "detoxConfiguration": "android.emu.release"
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/mobile-e2e/**/*.{ts,tsx,js,jsx}"]
+      }
+    }
+  },
+  "tags": [],
+  "implicitDependencies": ["mobile"]
+}

apps/mobile-e2e/src/app.spec.js

@@ -0,0 +1,13 @@
+import { device, element, by, expect } from 'detox';
+describe('Mobile', () => {
+  beforeEach(async () => {
+    await device.reloadReactNative();
+  });
+  it('should display welcome message', async () => {
+    await expect(element(by.id('heading'))).toHaveText('Welcome to Mobile');
+  });
+  it('should open nx link', async () => {
+    await expect(element(by.id('nx-link'))).toBeVisible();
+    element(by.id('nx-link')).tap();
+  });
+});