Feat/mn 670/video capture component

.github/workflows/build-demo-app-video.yml

@@ -0,0 +1,25 @@
+name: Build Demo App Video
+run-name: Build Demo App Video On Pull Request
+
+on:
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    steps:
+      - name: 💾 Checking out the repository
+        uses: actions/checkout@v4
+      - name: ⚙️ Setting up the MonkJs project
+        uses: ./.github/actions/monkjs-set-up
+        with:
+          build-env: production
+      - name: 📱 Building the demo app video
+        run: cd apps/demo-app-video && yarn build:staging

.github/workflows/deploy-demo-app-video.yml

@@ -0,0 +1,62 @@
+name: Deploy Demo App Video
+run-name: Deploy Demo App Video To Staging After Merge
+
+on:
+  push:
+    branches: [ main ]
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    steps:
+      - name: 💾 Checking out the repository
+        uses: actions/checkout@v4
+      - name: ⚙️ Setting up the MonkJs project
+        uses: ./.github/actions/monkjs-set-up
+        with:
+          build-env: production
+      - name: 📱 Building the demo app video
+        run: cd apps/demo-app-video && yarn build:staging
+      - name: 📦 Uploading the artifact
+        uses: actions/upload-artifact@v4.3.1
+        with:
+          name: build-demo-app-video-staging
+          path: apps/demo-app-video/build
+          if-no-files-found: error
+
+  deploy:
+    name: Deploy
+    environment: staging
+    needs:
+      - build
+    container:
+      image: dtzar/helm-kubectl:3.14.2
+    runs-on: ubuntu-latest
+    steps:
+      - name: 🔐 Authenticating to Google Cloud
+        uses: google-github-actions/auth@v2.1.2
+        with:
+          credentials_json: "${{ secrets.GKE_SA_KEY }}"
+      - name: 🔐 Obtaining GKE credentials
+        uses: google-github-actions/get-gke-credentials@v2.1.0
+        with:
+          cluster_name: ${{ secrets.GKE_CLUSTER }}
+          location: ${{ secrets.GKE_ZONE }}
+          project_id: ${{ secrets.GKE_PROJECT }}
+      - name: 📦 Downloading the artifact
+        uses: actions/download-artifact@v4.1.4
+        with:
+          name: build-demo-app-video-staging
+          path: demo-video
+      - name: 🧹 Cleaning up previous build
+        run: |-
+          kubectl -n poc exec -it $(kubectl get pods -n poc -l app.kubernetes.io/instance=poc-spa --no-headers | awk '{print $1}') -- rm -rf demo-video
+      - name: 🌐 Deploying app
+        run: |-
+          kubectl -n poc cp demo-video poc/$(kubectl get pods -n poc -l app.kubernetes.io/instance=poc-spa --no-headers | awk '{print $1}'):/app/

apps/demo-app-video/.env-cmdrc.json

@@ -0,0 +1,47 @@
+{
+  "local": {
+    "PORT": "17200",
+    "HTTPS": "true",
+    "ESLINT_NO_DEV_ERRORS": "true",
+    "REACT_APP_ENVIRONMENT": "local",
+    "REACT_APP_LIVE_CONFIG_ID": "demo-app-video-development",
+    "REACT_APP_USE_LOCAL_CONFIG": "true",
+    "REACT_APP_AUTH_DOMAIN": "idp.preview.monk.ai",
+    "REACT_APP_AUTH_AUDIENCE": "https://api.monk.ai/v1/",
+    "REACT_APP_AUTH_CLIENT_ID": "w9MTl518yqWl0dVE8oUbkxc3gnrI0sgH",
+    "REACT_APP_SENTRY_DSN": "https://e0644a77095a58eeab6b0e32cc9d4188@o4505669501648896.ingest.us.sentry.io/4508575240290304",
+    "REACT_APP_SENTRY_DEBUG": "true"
+  },
+  "development": {
+    "REACT_APP_ENVIRONMENT": "development",
+    "REACT_APP_LIVE_CONFIG_ID": "demo-app-video-development",
+    "REACT_APP_AUTH_DOMAIN": "idp.preview.monk.ai",
+    "REACT_APP_AUTH_AUDIENCE": "https://api.monk.ai/v1/",
+    "REACT_APP_AUTH_CLIENT_ID": "w9MTl518yqWl0dVE8oUbkxc3gnrI0sgH",
+    "REACT_APP_SENTRY_DSN": "https://e0644a77095a58eeab6b0e32cc9d4188@o4505669501648896.ingest.us.sentry.io/4508575240290304"
+  },
+  "staging": {
+    "REACT_APP_ENVIRONMENT": "staging",
+    "REACT_APP_LIVE_CONFIG_ID": "demo-app-video-staging",
+    "REACT_APP_AUTH_DOMAIN": "idp.preview.monk.ai",
+    "REACT_APP_AUTH_AUDIENCE": "https://api.monk.ai/v1/",
+    "REACT_APP_AUTH_CLIENT_ID": "w9MTl518yqWl0dVE8oUbkxc3gnrI0sgH",
+    "REACT_APP_SENTRY_DSN": "https://e0644a77095a58eeab6b0e32cc9d4188@o4505669501648896.ingest.us.sentry.io/4508575240290304"
+  },
+  "preview": {
+    "REACT_APP_ENVIRONMENT": "preview",
+    "REACT_APP_LIVE_CONFIG_ID": "demo-app-video-preview",
+    "REACT_APP_AUTH_DOMAIN": "idp.preview.monk.ai",
+    "REACT_APP_AUTH_AUDIENCE": "https://api.monk.ai/v1/",
+    "REACT_APP_AUTH_CLIENT_ID": "w9MTl518yqWl0dVE8oUbkxc3gnrI0sgH",
+    "REACT_APP_SENTRY_DSN": "https://e0644a77095a58eeab6b0e32cc9d4188@o4505669501648896.ingest.us.sentry.io/4508575240290304"
+  },
+  "backend-staging-qa": {
+    "REACT_APP_ENVIRONMENT": "backend-staging-qa",
+    "REACT_APP_LIVE_CONFIG_ID": "demo-app-video-backend-staging-qa",
+    "REACT_APP_AUTH_DOMAIN": "idp.staging.monk.ai",
+    "REACT_APP_AUTH_AUDIENCE": "https://api.monk.ai/v1/",
+    "REACT_APP_AUTH_CLIENT_ID": "PLGfABs0AWNwZaokEg3GeU4m01RhIvyi",
+    "REACT_APP_SENTRY_DSN": "https://e0644a77095a58eeab6b0e32cc9d4188@o4505669501648896.ingest.us.sentry.io/4508575240290304"
+  }
+}

apps/demo-app-video/.eslintignore

@@ -0,0 +1 @@
+node_modules

apps/demo-app-video/.eslintrc.js

@@ -0,0 +1,14 @@
+const OFF = 0;
+const WARN = 1;
+const ERROR = 2;
+
+module.exports = {
+  extends: ['@monkvision/eslint-config-typescript-react'],
+  parserOptions: {
+    project: ['./tsconfig.json'],
+  },
+  rules: {
+    'import/no-extraneous-dependencies': OFF,
+    'no-console': OFF,
+  }
+}

apps/demo-app-video/.gitignore

@@ -0,0 +1,26 @@
+# builds
+build/
+lib/
+dist/
+module/
+commonjs/
+typescript/
+web-build/
+
+# modules
+node_modules/
+coverage/
+.expo/
+.docusaurus/
+
+# logs
+npm-debug.*
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# cache
+.eslintcache
+
+# misc
+.DS_Store

apps/demo-app-video/LICENSE

@@ -0,0 +1,32 @@
+The Clear BSD License
+
+Copyright (c) [2022] [Monk](http://monk.ai)
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted (subject to the limitations in the disclaimer
+below) provided that the following conditions are met:
+
+     * Redistributions of source code must retain the above copyright notice,
+     this list of conditions and the following disclaimer.
+
+     * Redistributions in binary form must reproduce the above copyright
+     notice, this list of conditions and the following disclaimer in the
+     documentation and/or other materials provided with the distribution.
+
+     * Neither the name of the copyright holder nor the names of its
+     contributors may be used to endorse or promote products derived from this
+     software without specific prior written permission.
+
+NO EXPRESS OR IMPLIED LICENSES TO ANY PARTY'S PATENT RIGHTS ARE GRANTED BY
+THIS LICENSE. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND
+CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
+PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
+CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR
+BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
+IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGE.

apps/demo-app-video/README.md

@@ -0,0 +1,74 @@
+# Monk Demo App
+This application is a demo app used to showcase how to implement the Monk workflow (authentication, inspection creation,
+inspection capture and inspection report) using the MonkJs SDK.
+
+# Features
+This app contains the following features :
+- Authentication guards to enforce user log in
+- User log in with browser pop-up using Auth0 and token caching in the local storage
+- Automatic creation of a Monk inspection
+- Inspection capture using the PhotoCapture workflow
+- Redirection to the Monk inspection report app (since the inspection report component is not yet available in MonkJs
+  4.0)
+- Possiblity of passing the following configuration in the URL search params :
+  - Encrypted authentication token using ZLib (the user does not have to log in)
+  - Inspection ID (instead of creating a new one automatically)
+  - Vehicle type used for the Sights (default one is CUV)
+  - Application language (English / French / German / Dutch)
+
+# Running the App
+In order to run the app, you will need to have [NodeJs](https://nodejs.org/en) >= 16 and
+[Yarn 3](https://yarnpkg.com/getting-started/install) installed. Then, you'll need to install the required dependencies
+using the following command :
+
+```bash
+yarn install
+```
+
+You then need to copy the local environment configuration available in the `env.txt` file at the root of the directory
+into an env file called `.env` :
+
+```bash
+cp env.txt .env
+```
+
+You can then start the app by running :
+
+```bash
+yarn start
+```
+
+The application is by default available at `https://localhost:17200/`.
+
+# Building the App
+To build the app, you simply need to run the following command :
+
+```bash
+yarn build
+```
+
+Don't forget to update the environment variables defined in your `.env` file for the target website.
+
+# Testing
+## Running the Tests
+To run the tests of the app, simply run the following command :
+
+```bash
+yarn test
+```
+
+To run the tests as well as collecgt coverage, run the following command :
+
+```bash
+yarn test:coverage
+```
+
+## Analyzing Bundle Size
+After building the app using the `yarn build` command, you can analyze the bundle size using the following command :
+
+```bash
+yarn analyze
+```
+
+This will open a new window on your desktop browser where you'll be able to see the sizes of each module in the final
+app.

apps/demo-app-video/jest.config.js

@@ -0,0 +1,13 @@
+const { react } = require('@monkvision/jest-config');
+
+module.exports = {
+  ...react({ monorepo: true }),
+  coverageThreshold: {
+    global: {
+      branches: 0,
+      functions: 0,
+      lines: 0,
+      statements: 0,
+    },
+  },
+};