Added compliance logic, InspectionGallery and ImageDetailedView compo…

…nents
monkvision · Apr 24, 2024 · 30b8633 · 30b8633
1 parent 9474a3d
commit 30b8633
Show file tree

Hide file tree

Showing 109 changed files with 4,616 additions and 728 deletions.
diff --git a/apps/demo-app/src/components/App.tsx b/apps/demo-app/src/components/App.tsx
@@ -1,13 +1,18 @@
 import { Outlet, useNavigate } from 'react-router-dom';
 import { MonkAppParamsProvider, MonkProvider, useMonkTheme } from '@monkvision/common';
+import { useTranslation } from 'react-i18next';
 import { Page } from '../pages';
 
 export function App() {
   const navigate = useNavigate();
+  const { i18n } = useTranslation();
   const { rootStyles } = useMonkTheme();
 
   return (
-    <MonkAppParamsProvider onFetchAuthToken={() => navigate(Page.CREATE_INSPECTION)}>
+    <MonkAppParamsProvider
+      onFetchAuthToken={() => navigate(Page.CREATE_INSPECTION)}
+      onUpdateLanguage={(lang) => i18n.changeLanguage(lang)}
+    >
       <MonkProvider>
         <div className='app-container' style={rootStyles}>
           <Outlet />

diff --git a/apps/demo-app/src/pages/PhotoCapturePage/PhotoCapturePage.tsx b/apps/demo-app/src/pages/PhotoCapturePage/PhotoCapturePage.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import { getEnvOrThrow, useMonkAppParams, zlibCompress } from '@monkvision/common';
-import { VehicleType } from '@monkvision/types';
+import { DeviceOrientation, VehicleType } from '@monkvision/types';
 import { PhotoCapture } from '@monkvision/inspection-capture-web';
 import { getSights } from '../../config';
 import styles from './PhotoCapturePage.module.css';
@@ -59,6 +59,8 @@ export function PhotoCapturePage() {
         sights={getSights(vehicleType)}
         onComplete={handleComplete}
         lang={i18n.language}
+        enforceOrientation={DeviceOrientation.LANDSCAPE}
+        allowSkipRetake={true}
       />
     </div>
   );

diff --git a/configs/test-utils/src/__mocks__/@monkvision/common-ui-web.tsx b/configs/test-utils/src/__mocks__/@monkvision/common-ui-web.tsx
@@ -8,9 +8,9 @@ export = {
   BackdropDialog: jest.fn(() => <></>),
   Button: jest.fn(() => <></>),
   DynamicSVG: jest.fn(() => <></>),
-  FullscreenImageModal: jest.fn(() => <></>),
-  FullscreenModal: jest.fn(() => <></>),
   Icon: jest.fn(() => <></>),
+  ImageDetailedView: jest.fn(() => <></>),
+  InspectionGallery: jest.fn(() => <></>),
   SightOverlay: jest.fn(() => <></>),
   Slider: jest.fn(() => <></>),
   Spinner: jest.fn(() => <></>),

diff --git a/configs/test-utils/src/__mocks__/@monkvision/common.tsx b/configs/test-utils/src/__mocks__/@monkvision/common.tsx
@@ -9,7 +9,6 @@ const {
   toCamelCase,
   getRGBAFromString,
   getHexFromRGBA,
-  changeAlpha,
   shadeColor,
   InteractiveVariation,
   getInteractiveVariants,
@@ -21,6 +20,8 @@ const {
   uniq,
   flatMap,
   STORAGE_KEY_AUTH_TOKEN,
+  complianceIssueLabels,
+  imageStatusLabels,
 } = jest.requireActual('@monkvision/common');
 
 export = {
@@ -33,7 +34,6 @@ export = {
   toCamelCase,
   getRGBAFromString,
   getHexFromRGBA,
-  changeAlpha,
   shadeColor,
   InteractiveVariation,
   getInteractiveVariants,
@@ -44,6 +44,9 @@ export = {
   uniq,
   flatMap,
   STORAGE_KEY_AUTH_TOKEN,
+  createEmptyMonkState,
+  complianceIssueLabels,
+  imageStatusLabels,
 
   /* Mocks */
   useMonkTheme: jest.fn(() => createTheme()),
@@ -58,10 +61,11 @@ export = {
   useI18nSync: jest.fn(),
   i18nCreateSDKInstance: jest.fn(),
   i18nWrap: jest.fn((component) => component),
-  useInteractiveStatus: jest.fn(({ componentHandlers }) => ({
+  useInteractiveStatus: jest.fn((props) => ({
     status: InteractiveStatus.DEFAULT,
-    eventHandlers: componentHandlers,
+    eventHandlers: props?.componentHandlers,
   })),
+  changeAlpha: jest.fn((c) => c),
   useQueue: jest.fn(() => ({
     length: 0,
     processingCount: 0,

diff --git a/configs/test-utils/src/__mocks__/@monkvision/network.ts b/configs/test-utils/src/__mocks__/@monkvision/network.ts
@@ -24,4 +24,5 @@ export = {
   })),
   MonkApi,
   useMonkApi: jest.fn(() => MonkApi),
+  useInspectionPoll: jest.fn(),
 };
diff --git a/packages/common-ui-web/README.md b/packages/common-ui-web/README.md
@@ -132,95 +132,95 @@ function App() {
 
 ---
 
-## FullscreenImageModal
+## Icon
 ### Description
-Component used to display a full-screen modal for an image and able the user to zoom on it.
-
+An Icon component that displays an icon based on a given name. The list of icons is available in the official Monk SDK
+documentation.
 
 ### Example
 ```tsx
-import { FullscreenImageModal } from '@monkvision/common-ui-web';
+import { Icon } from '@monkvision/common-ui-web';
 
 function App() {
-  const [showFullscreenImageModal, setShowFullscreenImageModal] = useState(true);
-
-  return (
-    <FullscreenImageModal
-      url={'https://example.com/image.jpg'}
-      show={showFullscreenImageModal}
-      label='Hello World!'
-      onClose={() => setShowFullscreenImageModal(false)}
-    />
-  );
+  return <Icon icon='add' primaryColor='text-white' size={30} />;
 }
 ```
 
 ### Props
-| Prop    | Type         | Description                                                                                   | Required | Default Value |
-|---------|--------------|-----------------------------------------------------------------------------------------------|----------|---------------|
-| url     | string       | The URL of the image to display.                                                              | ✔️       |               |
-| show    | boolean      | Boolean indicating if the fullscreen image modal is displayed on the screen.                  |          | `false`       |
-| label   | string       | Label displayed in the header at the top of the image modal.                                  |          | `''`          |
-| onClose | `() => void` | Callback called when the user presses the close button in the header at the top of the modal. |          |               |
+| Prop         | Type      | Description                                                | Required | Default Value |
+|--------------|-----------|------------------------------------------------------------|----------|---------------|
+| icon         | number    | The name of the icon to display.                           | ✔️       |               |
+| size         | number    | The size (width and height, in pixels) of the icon.        |          | `50`          |
+| primaryColor | ColorProp | The name or the hexcode of the color to apply to the icon. |          | `black`       |
 
 ---
 
-## FullscreenModal
+## ImageDetailedView
 ### Description
-Component used to display a full screen modal on top of the screen. The content of the modal must be passed as children
-to this component.
+This component is used to display the preview of an inspection image, as well as additional data such as its label etc.
+If this component is used mid-capture, set the `captureMode` prop to `true` so that you'll enable features such as
+compliance errors, retakes etc.
 
 ### Example
 
 ```tsx
-import { FullscreenModal } from '@monkvision/common-ui-web';
+import { ImageDetailedView } from '@monkvision/common-ui-web';
+import { useMonkState } from '@monkvision/common';
+import { useMemo } from 'react';
 
-function App() {
-  const [showFullscreenModal, setShowFullscreenModal] = useState(true);
+function ImageViewer({ id }: ImageViewerProps) {
+  const { state } = useMonkState();
+  const image = useMemo(() => state.images.find((i) => i.id === id), [state.images, id]);
 
-  return (
-    <FullscreenModal
-      show={showFullscreenModal}
-      title='Hello World!'
-      onClose={() => setShowFullscreenModal(false)}
-    >
-      <div>
-        This is the content of the modal!
-      </div>
-    </FullscreenModal>
-  );
+  return <ImageDetailedView image={image} />;
 }
 ```
 
 ### Props
-| Prop         | Type         | Description                                                                                   | Required | Default Value |
-|--------------|--------------|-----------------------------------------------------------------------------------------------|----------|---------------|
-| show         | boolean      | Boolean indicating if the fullscreen modal is displayed on the screen.                        |          | `false`       |
-| title        | string       | Title displayed in the header at the top of the modal.                                        |          | `''`          |
-| onClose      | `() => void` | Callback called when the user presses the close button in the header at the top of the modal. |          |               |
+| Prop                | Type       | Description                                                                                                                         | Required | Default Value |
+|---------------------|------------|-------------------------------------------------------------------------------------------------------------------------------------|----------|---------------|
+| image               | Image      | The image to display the details of.                                                                                                | ✔️       |               |
+| captureMode         | boolean    | Boolean indicating if this component is displayed in "capture" mode.                                                                | ✔️       | `false`       |
+| lang                | string     | The language to be used by the component.                                                                                           |          | `en`          |
+| showGalleryButton   | boolean    | Boolean indicating if the gallery button must be displayed or not.                                                                  |          | `true`        |
+| onClose             | () => void | Callback called when the user presses the close button.                                                                             |          |               |
+| onNavigateToGallery | () => void | Callback called when the user presses the gallery button if it is displayed.                                                        |          |               |
+| showCaptureButton   | boolean    | Boolean indicating if the capture button must be displayed or not. This prop can only be specified if `captureMode` is set to true. |          | `true`        |
+| onNavigateToCapture | () => void | Callback called when the user presses the capture button. This prop can only be specified if `captureMode` is set to true.          |          |               |
+| onRetake            | () => void | Callback called when the user presses the retake button. This prop can only be specified if `captureMode` is set to true.           |          |               |
 
 ---
 
-## Icon
+## InspectionGallery
 ### Description
-An Icon component that displays an icon based on a given name. The list of icons is available in the official Monk SDK
-documentation.
+This component is used to display a gallery of pictures taken during an inspection. If this component is used
+mid-capture, set the `captureMode` prop to `true` so that you'll enable features such as compliance errors, retakes etc.
 
 ### Example
 ```tsx
-import { Icon } from '@monkvision/common-ui-web';
+import { InspectionGallery } from '@monkvision/common-ui-web';
 
 function App() {
-  return <Icon icon='add' primaryColor='text-white' size={30} />;
+  return <InspectionGallery icon='add' primaryColor='text-white' size={30} />;
 }
 ```
 
 ### Props
-| Prop         | Type      | Description                                                | Required | Default Value |
-|--------------|-----------|------------------------------------------------------------|----------|---------------|
-| icon         | number    | The name of the icon to display.                           | ✔️       |               |
-| size         | number    | The size (width and height, in pixels) of the icon.        |          | `50`          |
-| primaryColor | ColorProp | The name or the hexcode of the color to apply to the icon. |          | `black`       |
+| Prop                | Type              | Description                                                                                                                                                                                        | Required                        | Default Value |
+|---------------------|-------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------|---------------|
+| inspectionId        | string            | The ID of the inspection to display the images of.                                                                                                                                                 | ✔️                              |               |
+| apiConfig           | ApiConfig         | The config used to communicate with the API.                                                                                                                                                       | ✔️                              |               |
+| captureMode         | boolean           | Boolean indicating if this component is displayed in "capture" mode.                                                                                                                               | ✔️                              |               |
+| lang                | string            | The language used by the InspectionGallery component.                                                                                                                                              |                                 | `en`          |
+| refreshIntervalMs   | number            | The delay (in milliseconds) between each `getInspection` request made to the API when polling the status of the inspection.                                                                        |                                 | `1000`        |
+| showBackButton      | boolean           | Boolean indicating if the back button of the gallery top bar should be displayed or not.                                                                                                           |                                 | `false`       |
+| onBack              | () => void        | Callback called when the user presses the back button if it is displayed.                                                                                                                          |                                 |               |
+| onValidate          | () => void        | Callback called when the user presses the validate button.                                                                                                                                         |                                 |               |
+| sights              | Sight[]           | The list of sights to be capture in the current capture flow. This prop can only be specified if `captureMode` is set to true.                                                                     | ✔️ (if `captureMode` is `true`) |               |
+| allowSkipRetake     | boolean           | Boolean indicating if the user should be allowed to skip the retaking of non-compliant pictures before validating the inspection. This prop can only be specified if `captureMode` is set to true. |                                 | `false`       |
+| onNavigateToCapture | () => void        | Callback called when the user wants to navigate back to the capture component. This prop can only be specified if `captureMode` is set to true.                                                    |                                 |               |
+| enableCompliance    | boolean           | Boolean indicating if compliance checks should be enabled or not. This prop can only be specified if `captureMode` is set to true.                                                                 |                                 |               |
+| complianceIssues    | ComplianceIssue[] | If compliance checks are enable, this property can be used to select a list of compliance issues to check. This prop can only be specified if `captureMode` is set to true.                        |                                 |               |
 
 ---
 

diff --git a/packages/common-ui-web/package.json b/packages/common-ui-web/package.json
@@ -25,8 +25,11 @@
   },
   "dependencies": {
     "@monkvision/common": "4.0.0",
+    "@monkvision/sights": "4.0.0",
     "@monkvision/types": "4.0.0",
-    "css": "^3.0.0"
+    "css": "^3.0.0",
+    "i18next": "^23.4.5",
+    "react-i18next": "^13.2.0"
   },
   "peerDependencies": {
     "react": "^17.0.2",

diff --git a/packages/common-ui-web/src/components/Button/Button.styles.ts b/packages/common-ui-web/src/components/Button/Button.styles.ts
@@ -26,6 +26,9 @@ export const styles: Styles = {
     cursor: 'pointer',
     borderWidth: 0,
   },
+  buttonIconOnly: {
+    padding: 16,
+  },
   buttonDisabled: {
     opacity: 0.37,
     cursor: 'default',
@@ -36,6 +39,9 @@ export const styles: Styles = {
     lineHeight: '20px',
     letterSpacing: 0.1,
   },
+  buttonIconOnlySmall: {
+    padding: 6,
+  },
   buttonOutline: {
     borderStyle: 'solid',
     borderWidth: 2,

diff --git a/packages/common-ui-web/src/components/Button/Button.tsx b/packages/common-ui-web/src/components/Button/Button.tsx
@@ -65,6 +65,7 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
       preserveWidthOnLoading,
       status,
       hasChildren: !!children,
+      icon,
     });
 
     const content = useMemo(

diff --git a/packages/common-ui-web/src/components/Button/hooks.ts b/packages/common-ui-web/src/components/Button/hooks.ts
@@ -163,6 +163,10 @@ export function useButtonStyle(params: MonkButtonStyleParams): MonkButtonStyle {
         ...(params.size === 'small' ? styles['buttonSmall'] : {}),
         ...(params.variant === 'outline' ? styles['buttonOutline'] : {}),
         ...(params.variant === 'text-link' ? styles['buttonTextLink'] : {}),
+        ...(!params.hasChildren && params.icon ? styles['buttonIconOnly'] : {}),
+        ...(!params.hasChildren && params.icon && params.size === 'small'
+          ? styles['buttonIconOnlySmall']
+          : {}),
         color: foregroundColor,
         borderColor: foregroundColor,
         backgroundColor,

diff --git a/packages/common-ui-web/src/components/DynamicSVG/DynamicSVG.tsx b/packages/common-ui-web/src/components/DynamicSVG/DynamicSVG.tsx
@@ -51,7 +51,7 @@ export function DynamicSVG({ svg, ...passThroughProps }: DynamicSVGProps) {
     const element = doc.children[0];
     if (element.tagName !== 'svg') {
       throw new Error(
-        'Invalid SVG string provided to the DynamicSVG component: expected <svg> tag as the first children of XML document.',
+        `Invalid SVG string provided to the DynamicSVG component: expected <svg> tag as the first children of XML document but got <${element.tagName}>.`,
       );
     }
     return element;

diff --git a/packages/common-ui-web/src/components/FullscreenImageModal/FullscreenImageModal.styles.ts b/packages/common-ui-web/src/components/FullscreenImageModal/FullscreenImageModal.styles.ts
-Original file line number
+Diff line change
@@ Expand Up @@
           preserveWidthOnLoading,
           status,
           hasChildren: !!children,
+          icon,
         });
         const content = useMemo(
@@ Expand Down @@