Added Analytics to inspection-capture-web and demo-app

apps/demo-app/package.json

@@ -24,11 +24,13 @@
   },
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
+    "@monkvision/analytics": "4.0.0",
     "@monkvision/common": "4.0.0",
     "@monkvision/common-ui-web": "4.0.0",
     "@monkvision/inspection-capture-web": "4.0.0",
     "@monkvision/monitoring": "4.0.0",
     "@monkvision/network": "4.0.0",
+    "@monkvision/posthog": "4.0.0",
     "@monkvision/sentry": "4.0.0",
     "@monkvision/sights": "4.0.0",
     "@monkvision/types": "4.0.0",

apps/demo-app/src/index.tsx

@@ -1,28 +1,31 @@
-import React from 'react';
 import ReactDOM from 'react-dom';
 import { MonitoringProvider } from '@monkvision/monitoring';
+import { AnalyticsProvider } from '@monkvision/analytics';
 import { Auth0Provider } from '@auth0/auth0-react';
 import { getEnvOrThrow, MonkThemeProvider } from '@monkvision/common';
 import { sentryMonitoringAdapter } from './sentry';
+import { posthogAnalyticsAdapter } from './posthog';
 import { AppRouter } from './components';
 import './index.css';
 import './i18n';
 
 ReactDOM.render(
   <MonitoringProvider adapter={sentryMonitoringAdapter}>
-    <Auth0Provider
-      domain={getEnvOrThrow('REACT_APP_AUTH_DOMAIN')}
-      clientId={getEnvOrThrow('REACT_APP_AUTH_CLIENT_ID')}
-      authorizationParams={{
-        redirect_uri: window.location.origin,
-        audience: getEnvOrThrow('REACT_APP_AUTH_AUDIENCE'),
-        prompt: 'login',
-      }}
-    >
-      <MonkThemeProvider>
-        <AppRouter />
-      </MonkThemeProvider>
-    </Auth0Provider>
+    <AnalyticsProvider adapter={posthogAnalyticsAdapter}>
+      <Auth0Provider
+        domain={getEnvOrThrow('REACT_APP_AUTH_DOMAIN')}
+        clientId={getEnvOrThrow('REACT_APP_AUTH_CLIENT_ID')}
+        authorizationParams={{
+          redirect_uri: window.location.origin,
+          audience: getEnvOrThrow('REACT_APP_AUTH_AUDIENCE'),
+          prompt: 'login',
+        }}
+      >
+        <MonkThemeProvider>
+          <AppRouter />
+        </MonkThemeProvider>
+      </Auth0Provider>
+    </AnalyticsProvider>
   </MonitoringProvider>,
   document.getElementById('root'),
 );

apps/demo-app/src/posthog.ts

@@ -0,0 +1,9 @@
+import { PosthogAnalyticsAdapter } from '@monkvision/posthog';
+
+export const posthogAnalyticsAdapter = new PosthogAnalyticsAdapter({
+  token: 'phc_iNzK7jyK2bLtRi9vNWnzQqy74rIPlXPdgGs0qgJrSfL',
+  api_host: 'https://eu.posthog.com',
+  environnement: 'development',
+  projectName: 'test',
+  release: '1.0.0',
+});

documentation/docs/packages/analytics.md

@@ -0,0 +1,23 @@
+---
+sidebar_position: 1
+---
+
+# analytics
+
+Monk analytics abstraction package.
+
+![npm latest package](https://img.shields.io/npm/v/@monkvision/analytics/latest.svg)
+
+## Overview
+
+This package provides an abstraction layer for the analytics features in the MonkJs ecosystem. If you plan on using any
+of these features, you can use this package to properly set up the analytics inside your application.
+
+In the MonkJs SDK, we use this "abstraction" package as a way of offering the possibility to developers to choose their
+own Analytics tools and platform if they don't want to use Posthog (the platform used internally by Monk).
+
+## Complete Documentation
+
+As every other package in the SDK, please refer to
+[its README file](https://github.com/monkvision/monkjs/blob/main/packages/analytics/README.md) for a complete
+documentation on how this package works.

documentation/docs/packages/camera-web.md

@@ -1,13 +1,15 @@
 ---
-sidebar_position: 1
+sidebar_position: 2
 ---
 
 # camera-web
+
 Camera implementation for taking pictures and recording videos in web.
 
 ![npm latest package](https://img.shields.io/npm/v/@monkvision/camera-web/latest.svg)
 
 ## Overview
+
 This package provides tools used to handle the Camera in MonkJs web projects in React for Web. It exports a component
 called Camera, that lets you display a camera preview on your app as well as an HUD on top of it, and provides methods
 to take pictures, compress images, etc.
@@ -17,6 +19,7 @@ want to use higher level components such as the ones available in the
 [inspection-capture-web](docs/packages/inspection-capture-web.md) package.
 
 ## Complete Documentation
+
 As every other package in the SDK, please refer to
 [its README file](https://github.com/monkvision/monkjs/blob/main/packages/camera-web/README.md) for a complete
 documentation on how this package works.

documentation/docs/packages/common-ui-web.md

@@ -1,13 +1,15 @@
 ---
-sidebar_position: 3
+sidebar_position: 4
 ---
 
 # common-ui-web
+
 Shared ReactJs components used in the MonkJs SDK and web applications.
 
 ![npm latest package](https://img.shields.io/npm/v/@monkvision/common-ui-web/latest.svg)
 
 ## Overview
+
 This package exports reusable UI components for React web application. These components are used throughout the
 different MonkJs SDK and web application.
 
@@ -18,6 +20,7 @@ you probably want to use higher level components such as the
 use these components in your React apps if you need them.
 
 ## Complete Documentation
+
 As every other package in the SDK, please refer to
 [its README file](https://github.com/monkvision/monkjs/blob/main/packages/common-ui-web/README.md) for a complete
 documentation on how this package works.

documentation/docs/packages/common.md

@@ -1,18 +1,21 @@
 ---
-sidebar_position: 2
+sidebar_position: 3
 ---
 
 # common
+
 Shared logic accross the MonkJs SDK and applications.
 
 ![npm latest package](https://img.shields.io/npm/v/@monkvision/common/latest.svg)
 
 ## Overview
+
 This package contains logic and bits of code shared accross the MonkJs project. It is used both internally as a way to
 store shared logic accross our packages, as well as externally, by exposing useful interfaces and methods for developers
 using our SDK.
 
 ## Complete Documentation
+
 As every other package in the SDK, please refer to
 [its README file](https://github.com/monkvision/monkjs/blob/main/packages/common/README.md) for a complete documentation
 on how this package works.

documentation/docs/packages/inspection-capture-web.md

@@ -1,18 +1,21 @@
 ---
-sidebar_position: 4
+sidebar_position: 5
 ---
 
 # inspection-capture-web
+
 Single page components to help you integrate the Monk inspection capture workflows.
 
 ![npm latest package](https://img.shields.io/npm/v/@monkvision/inspection-capture-web/latest.svg)
 
 ## Overview
+
 This package exports single page components for React (Web) that implements different capture workflows in the Monk SDK.
 The capture process allows the user to take pictures of its vehicle, automatically send them to our API, start the tasks
 and check the quality of the images using our compliance features.
 
 ## Complete Documentation
+
 As every other package in the SDK, please refer to
 [its README file](https://github.com/monkvision/monkjs/blob/main/packages/inspection-capture-web/README.md) for a
 complete documentation on how this package works.

documentation/docs/packages/inspection-report-web.md

@@ -1,19 +1,22 @@
 ---
-sidebar_position: 5
+sidebar_position: 6
 ---
 
 # inspection-report-web
+
 Single page components to help you visualize and edit Monk inspection reports.
 
 ![npm latest package](https://img.shields.io/npm/v/@monkvision/inspection-report-web/latest.svg)
 
 ## Overview
+
 This package exports a single page component for React (Web) called InspectionReport that displays the results of an
 inspection that was previously done by Monk. It allows the user to preview the results (see the damage severities, the
 inspection pictures...) and edit these results (add, remove and edit damages). It also offers the possibility to
 validate the report and download it as a PDF file.
 
 ## Complete Documentation
+
 As every other package in the SDK, please refer to
 [its README file](https://github.com/monkvision/monkjs/blob/main/packages/inspection-report-web/README.md) for a
 complete documentation on how this package works.

documentation/docs/packages/monitoring.md

@@ -1,20 +1,23 @@
 ---
-sidebar_position: 6
+sidebar_position: 7
 ---
 
 # monitoring
+
 Monk monitoring abstraction package.
 
 ![npm latest package](https://img.shields.io/npm/v/@monkvision/monitoring/latest.svg)
 
 ## Overview
+
 This package provides an abstraction layer for the monitoring features in the MonkJs ecosystem. If you plan on using any
 of these features, you can use this package to properly set up the monitoring inside your application.
 
 In the MonkJs SDK, we use this "abstraction" package as a way of offering the possibility to developers to choose their
 own Monitoring tools and platform if they don't want to use Sentry (the platform used internally by Monk).
 
 ## Complete Documentation
+
 As every other package in the SDK, please refer to
 [its README file](https://github.com/monkvision/monkjs/blob/main/packages/monitoring/README.md) for a complete
 documentation on how this package works.

documentation/docs/packages/network.md

@@ -1,18 +1,21 @@
 ---
-sidebar_position: 7
+sidebar_position: 8
 ---
 
 # network
+
 Authentication, API and other network utilities used in the MonkJs SDK and applications.
 
 ![npm latest package](https://img.shields.io/npm/v/@monkvision/network/latest.svg)
 
 ## Overview
+
 This package provides tools utilities used to communicate with the Monk back-end API. It is used both internally in the
 MonkJs SDK, and externally by allowing developers using our SDK to easily communicate with our API and synchronize the
 local Monk state with the distant state.
 
 ## Complete Documentation
+
 As every other package in the SDK, please refer to
 [its README file](https://github.com/monkvision/monkjs/blob/main/packages/network/README.md) for a complete
 documentation on how this package works.

documentation/docs/packages/posthog.md

@@ -0,0 +1,23 @@
+---
+sidebar_position: 9
+---
+
+# posthog
+
+Posthog implementation used to analyze MonkJs SDK and applications.
+
+![npm latest package](https://img.shields.io/npm/v/@monkvision/posthog/latest.svg)
+
+## Overview
+
+This package provides an implementation of the analytics abstraction layers exposed by the
+[analytics package](docs/packages/analytics.md) using the [Posthog](https://posthog.com/) analytics platform. Posthog is
+the platform used internally by Monk to analyze the user's behaviour in our applications. Unless you already have your own analytics
+platform, and you really don't want to add Posthog as a dependency in your app, we highly recommend installing this
+analytics adapter in your app.
+
+## Complete Documentation
+
+As every other package in the SDK, please refer to
+[its README file](https://github.com/monkvision/monkjs/blob/main/packages/posthog/README.md) for a complete
+documentation on how this package works.

documentation/docs/packages/sentry.md

@@ -1,20 +1,23 @@
 ---
-sidebar_position: 8
+sidebar_position: 10
 ---
 
 # sentry
+
 Sentry implementation used to monitor MonkJs SDK and applications.
 
 ![npm latest package](https://img.shields.io/npm/v/@monkvision/sentry/latest.svg)
 
 ## Overview
+
 This package provides an implementation of the monitoring abstraction layers exposed by the
 [monitoring package](docs/packages/monitoring.md) using the [Sentry](https://sentry.io/) monitoring platform. Sentry is
 the platform used internally by Monk to monitor and debug our applications. Unless you already have your own monitoring
 platform, and you really don't want to add Sentry as a dependency in your app, we highly recommend installing this
 monitoring adapter in your app.
 
 ## Complete Documentation
+
 As every other package in the SDK, please refer to
 [its README file](https://github.com/monkvision/monkjs/blob/main/packages/sentry/README.md) for a complete
 documentation on how this package works.

documentation/docs/packages/sights.md

@@ -1,13 +1,15 @@
 ---
-sidebar_position: 9
+sidebar_position: 11
 ---
 
 # sights
+
 Shared data for the capture Sights.
 
 ![npm latest package](https://img.shields.io/npm/v/@monkvision/sights/latest.svg)
 
 ## Overview
+
 A "Sight" in the MonkJs SDK corresponds to a point of view at which the user can take a photo of its vehicle during an
 inspection. Sights are crucial in the proper functionning of the SDK, because taking good pictures of the vehicle will
 result in better results from the damage detection AI. This is why our R&D has spent a lot of time carefully designing
@@ -18,6 +20,7 @@ info, sight overlays (SVG) as well as miscellaneous sight details. This package
 the standard Monkvision Capture workflow, of simply if you ar planning on using sights at all.
 
 ## Complete Documentation
+
 As every other package in the SDK, please refer to
 [its README file](https://github.com/monkvision/monkjs/blob/main/packages/sights/README.md) for a complete
 documentation on how this package works.

documentation/docs/packages/types.md

@@ -1,17 +1,20 @@
 ---
-sidebar_position: 10
+sidebar_position: 12
 ---
 
 # types
+
 Shared TypeScript types for the MonkJs SDK.
 
 ![npm latest package](https://img.shields.io/npm/v/@monkvision/types/latest.svg)
 
 ## Overview
+
 This package provides type definitions for the MonkJs TypeScript project. Since all the packages in this project are
 supposed to be used with the same version number, please only install this package with the proper version.
 
 ## Complete Documentation
+
 As every other package in the SDK, please refer to
 [its README file](https://github.com/monkvision/monkjs/blob/main/packages/types/README.md) for a complete documentation
 on how this package works.

packages/analytics/src/adapters/emptyAdapter.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { AnalyticsAdapter, Primitive } from './adapter';
 
 /**

packages/inspection-capture-web/package.json

@@ -25,6 +25,7 @@
     "lint:fix": "yarn run prettier:fix && yarn run eslint:fix"
   },
   "dependencies": {
+    "@monkvision/analytics": "4.0.0",
     "@monkvision/camera-web": "4.0.0",
     "@monkvision/common": "4.0.0",
     "@monkvision/common-ui-web": "4.0.0",

packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx

@@ -2,6 +2,7 @@ import { Camera, CameraHUDProps, CompressionOptions, CameraProps } from '@monkvi
 import { Sight, TaskName } from '@monkvision/types';
 import { useI18nSync, useLoadingState } from '@monkvision/common';
 import { ComplianceOptions, MonkAPIConfig } from '@monkvision/network';
+import { useAnalytics } from '@monkvision/analytics';
 import { useMonitoring } from '@monkvision/monitoring';
 import { PhotoCaptureHUD, PhotoCaptureHUDProps } from './PhotoCaptureHUD';
 import { styles } from './PhotoCapture.styles';
@@ -90,6 +91,7 @@ export function PhotoCapture({
 }: PhotoCaptureProps) {
   useI18nSync(lang);
   const { handleError } = useMonitoring();
+  const analytics = useAnalytics();
   const loading = useLoadingState();
   const addDamageHandle = useAddDamageMode();
   const startTasks = useStartTasksOnComplete({
@@ -103,6 +105,11 @@ export function PhotoCapture({
   const onLastSightTaken = () => {
     startTasks()
       .then(() => {
+        analytics.trackEvent('Inspection completed', {
+          inspectionId,
+          category: 'inspection_completed',
+        });
+        analytics.resetUser();
         onComplete?.();
       })
       .catch((err) => {