From f467b289c5d3604286f6fa05ad9f7d36b52c2eec Mon Sep 17 00:00:00 2001 From: David LY Date: Wed, 13 Dec 2023 15:18:09 +0100 Subject: [PATCH 01/33] Added ObjectTranlation type --- packages/public/types/src/sights.ts | 15 ++------------- packages/public/types/src/utils.ts | 18 ++++++++++++++++++ 2 files changed, 20 insertions(+), 13 deletions(-) diff --git a/packages/public/types/src/sights.ts b/packages/public/types/src/sights.ts index e97bc521c..9ab04f837 100644 --- a/packages/public/types/src/sights.ts +++ b/packages/public/types/src/sights.ts @@ -1,4 +1,5 @@ import { TaskName } from './state'; +import { ObjectTranslation } from './utils'; /** * The category of a Sight. @@ -174,23 +175,11 @@ export interface VehicleDetails { /** * The translation of labels for Sights, VehicleTypes etc. */ -export interface LabelTranslation { +export interface LabelTranslation extends ObjectTranslation { /** * The key of the label. */ key: string; - /** - * The English translation of the label. - */ - en: string; - /** - * The French translation of the label. - */ - fr: string; - /** - * The German translation of the label. - */ - de: string; } /** diff --git a/packages/public/types/src/utils.ts b/packages/public/types/src/utils.ts index 71ff91474..346a6ac04 100644 --- a/packages/public/types/src/utils.ts +++ b/packages/public/types/src/utils.ts @@ -11,3 +11,21 @@ export interface PixelDimensions { */ height: number; } + +/** + * Object translated + */ +export interface ObjectTranslation { + /** + * The English translation. + */ + en: string; + /** + * The French translation. + */ + fr: string; + /** + * The German translation. + */ + de: string; +} From 032288f0c057a4952350e42f2b834c524f825c36 Mon Sep 17 00:00:00 2001 From: David LY Date: Wed, 13 Dec 2023 15:19:43 +0100 Subject: [PATCH 02/33] Added useObjectTranslation hook --- packages/public/common/src/hooks/index.ts | 1 + .../common/src/hooks/useObjectTranslation.ts | 24 +++++++++++++++++++ 2 files changed, 25 insertions(+) create mode 100644 packages/public/common/src/hooks/useObjectTranslation.ts diff --git a/packages/public/common/src/hooks/index.ts b/packages/public/common/src/hooks/index.ts index f2e00a187..bdc4f78eb 100644 --- a/packages/public/common/src/hooks/index.ts +++ b/packages/public/common/src/hooks/index.ts @@ -2,3 +2,4 @@ export * from './useWindowDimensions'; export * from './useResponsiveStyle'; export * from './useInteractiveStatus'; export * from './useQueue'; +export * from './useObjectTranslation'; diff --git a/packages/public/common/src/hooks/useObjectTranslation.ts b/packages/public/common/src/hooks/useObjectTranslation.ts new file mode 100644 index 000000000..bb0f6d4c8 --- /dev/null +++ b/packages/public/common/src/hooks/useObjectTranslation.ts @@ -0,0 +1,24 @@ +import { LabelTranslation } from '@monkvision/types'; +import { useTranslation } from 'react-i18next'; + +export function useObjectTranslation(): { + tObj: (label: LabelTranslation) => string; +} { + const { i18n } = useTranslation(); + return { + tObj: (label) => { + const lang: string = i18n.language.slice(0, 2); + switch (lang) { + case 'en': + return label.en; + case 'fr': + return label.fr; + case 'de': + return label.de; + default: + return label.en; + } + }, + }; +} + From e8a65609cd7725332749dc8d14c801019a955c4f Mon Sep 17 00:00:00 2001 From: David LY Date: Wed, 13 Dec 2023 15:45:32 +0100 Subject: [PATCH 03/33] Renamed CaptureCaptureHUDButtons to PhotoCaptureHUDButtons --- .../src/CaptureHUD/CaptureHUDButtons/index.ts | 1 - .../public/inspection-capture-web/src/CaptureHUD/index.ts | 1 - .../PhotoCaptureHUDButtons}/CaptureHUDButtons.styles.ts | 0 .../PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.tsx} | 6 +++--- .../PhotoCaptureHUDButtons}/hooks.ts | 8 ++++---- .../src/PhotoCaptureHUD/PhotoCaptureHUDButtons/index.ts | 1 + .../PhotoCaptureHUDSightsCounter.tsx | 0 .../PhotoCaptureHUDSightsSlider.tsx | 0 .../inspection-capture-web/src/PhotoCaptureHUD/index.ts | 3 +++ 9 files changed, 11 insertions(+), 9 deletions(-) delete mode 100644 packages/public/inspection-capture-web/src/CaptureHUD/CaptureHUDButtons/index.ts delete mode 100644 packages/public/inspection-capture-web/src/CaptureHUD/index.ts rename packages/public/inspection-capture-web/src/{CaptureHUD/CaptureHUDButtons => PhotoCaptureHUD/PhotoCaptureHUDButtons}/CaptureHUDButtons.styles.ts (100%) rename packages/public/inspection-capture-web/src/{CaptureHUD/CaptureHUDButtons/CaptureHUDButtons.tsx => PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.tsx} (93%) rename packages/public/inspection-capture-web/src/{CaptureHUD/CaptureHUDButtons => PhotoCaptureHUD/PhotoCaptureHUDButtons}/hooks.ts (91%) create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDButtons/index.ts create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsCounter.tsx create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsSlider.tsx create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/index.ts diff --git a/packages/public/inspection-capture-web/src/CaptureHUD/CaptureHUDButtons/index.ts b/packages/public/inspection-capture-web/src/CaptureHUD/CaptureHUDButtons/index.ts deleted file mode 100644 index cad58b9e1..000000000 --- a/packages/public/inspection-capture-web/src/CaptureHUD/CaptureHUDButtons/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { CaptureHUDButtons, type CaptureHUDButtonsProps } from './CaptureHUDButtons'; diff --git a/packages/public/inspection-capture-web/src/CaptureHUD/index.ts b/packages/public/inspection-capture-web/src/CaptureHUD/index.ts deleted file mode 100644 index 19e75dccb..000000000 --- a/packages/public/inspection-capture-web/src/CaptureHUD/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './CaptureHUDButtons'; // TODO : Remove this export later diff --git a/packages/public/inspection-capture-web/src/CaptureHUD/CaptureHUDButtons/CaptureHUDButtons.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDButtons/CaptureHUDButtons.styles.ts similarity index 100% rename from packages/public/inspection-capture-web/src/CaptureHUD/CaptureHUDButtons/CaptureHUDButtons.styles.ts rename to packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDButtons/CaptureHUDButtons.styles.ts diff --git a/packages/public/inspection-capture-web/src/CaptureHUD/CaptureHUDButtons/CaptureHUDButtons.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.tsx similarity index 93% rename from packages/public/inspection-capture-web/src/CaptureHUD/CaptureHUDButtons/CaptureHUDButtons.tsx rename to packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.tsx index 1c8eb700b..9673ad862 100644 --- a/packages/public/inspection-capture-web/src/CaptureHUD/CaptureHUDButtons/CaptureHUDButtons.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.tsx @@ -3,7 +3,7 @@ import { Icon, TakePictureButton } from '@monkvision/common-ui-web'; import { useInteractiveStatus } from '@monkvision/common'; import { useCaptureHUDButtonsStyles } from './hooks'; -export interface CaptureHUDButtonsProps { +export interface PhotoCaptureHUDButtonsProps { galleryPreview?: MonkPicture; onTakePicture?: () => void; onOpenGallery?: () => void; @@ -13,7 +13,7 @@ export interface CaptureHUDButtonsProps { closeDisabled?: boolean; } -export function CaptureHUDButtons({ +export function PhotoCaptureHUDButtons({ galleryPreview, onTakePicture = () => {}, onOpenGallery = () => {}, @@ -21,7 +21,7 @@ export function CaptureHUDButtons({ galleryDisabled = false, takePictureDisabled = false, closeDisabled = false, -}: CaptureHUDButtonsProps) { +}: PhotoCaptureHUDButtonsProps) { const { status: galleryStatus, eventHandlers: galleryEventHandlers } = useInteractiveStatus({ disabled: galleryDisabled, }); diff --git a/packages/public/inspection-capture-web/src/CaptureHUD/CaptureHUDButtons/hooks.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDButtons/hooks.ts similarity index 91% rename from packages/public/inspection-capture-web/src/CaptureHUD/CaptureHUDButtons/hooks.ts rename to packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDButtons/hooks.ts index d5375aecf..5e684bfbe 100644 --- a/packages/public/inspection-capture-web/src/CaptureHUD/CaptureHUDButtons/hooks.ts +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDButtons/hooks.ts @@ -7,13 +7,13 @@ import { styles, } from './CaptureHUDButtons.styles'; -interface CaptureHUDButtonsStylesParams { +interface PhotoCaptureHUDButtonsStylesParams { galleryStatus: InteractiveStatus; closeStatus: InteractiveStatus; galleryPreviewUrl?: string; } -interface CaptureHUDButtonsStyles { +interface PhotoCaptureHUDButtonsStyles { containerStyle: CSSProperties; gallery: { style: CSSProperties; @@ -27,8 +27,8 @@ interface CaptureHUDButtonsStyles { } export function useCaptureHUDButtonsStyles( - params: CaptureHUDButtonsStylesParams, -): CaptureHUDButtonsStyles { + params: PhotoCaptureHUDButtonsStylesParams, +): PhotoCaptureHUDButtonsStyles { const { responsive } = useResponsiveStyle(); return { diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDButtons/index.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDButtons/index.ts new file mode 100644 index 000000000..d256f5ba0 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDButtons/index.ts @@ -0,0 +1 @@ +export { PhotoCaptureHUDButtons, type PhotoCaptureHUDButtonsProps } from './PhotoCaptureHUDButtons'; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsCounter.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsCounter.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsSlider.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsSlider.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/index.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/index.ts new file mode 100644 index 000000000..0c72aaee2 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/index.ts @@ -0,0 +1,3 @@ +export * from './CaptureHUDButtons'; // TODO : Remove this export later +export * from './CaptureHUDPreview'; // TODO : Remove this export later +export { CaptureHUD } from './CaptureHUD'; From bdda7a44550bcba2308f22c7377a6a68ac0a63f8 Mon Sep 17 00:00:00 2001 From: David LY Date: Wed, 13 Dec 2023 15:47:06 +0100 Subject: [PATCH 04/33] Added PhotoCaptureHUDSightsSlider component: display a scrolling sights label --- .../PhotoCaptureHUDSightsSlider.tsx | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsSlider.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsSlider.tsx index e69de29bb..4e8d1251b 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsSlider.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsSlider.tsx @@ -0,0 +1,35 @@ +import { Button } from '@monkvision/common-ui-web'; +import { PhotoCaptureHUDPreview } from './hook'; + +export interface SliderProps { + sight: string[]; + currentSight: string; + onSightSelected: (sight: string) => void; + styles: PhotoCaptureHUDPreview; +} + +export function PhotoCaptureHUDSightsSlider({ + sight, + currentSight, + onSightSelected, + styles, +}: SliderProps) { + return ( +
+ {sight.map((label: string, key: number) => ( + + ))} +
+ ); +} From 11a3602eb73d702e1fc8a8c31d5f1af0a68127f3 Mon Sep 17 00:00:00 2001 From: David LY Date: Wed, 13 Dec 2023 15:49:21 +0100 Subject: [PATCH 05/33] Added PhotoCaptureHUDCounter component --- .../PhotoCaptureHUDSightsCounter.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsCounter.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsCounter.tsx index e69de29bb..79d655d06 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsCounter.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsCounter.tsx @@ -0,0 +1,19 @@ +import { PhotoCaptureHUDPreview } from './hook'; + +export interface PhotoCaptureHUDCounterProps { + sightDisable?: string[]; + sight: string[]; + styles: PhotoCaptureHUDPreview; +} + +export function PhotoCaptureHUDCounter({ + sightDisable, + sight, + styles, +}: PhotoCaptureHUDCounterProps) { + return ( +
+ {sightDisable} / {sight.length} +
+ ); +} From 8fc01cfcc75cf609a0d3383f56f73d878ad83f75 Mon Sep 17 00:00:00 2001 From: David LY Date: Wed, 13 Dec 2023 15:50:44 +0100 Subject: [PATCH 06/33] Added PhotoCaptureHUDPreview component that render SightsSlider and Counter --- .../PhotoCaptureHUDPreview.styles.ts | 42 +++++++++++++++++++ .../PhotoCaptureHUDPreview.tsx | 42 +++++++++++++++++++ .../PhotoCaptureHUDPreview/hook.ts | 30 +++++++++++++ .../PhotoCaptureHUDPreview/index.ts | 1 + 4 files changed, 115 insertions(+) create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.styles.ts create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.tsx create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/hook.ts create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/index.ts diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.styles.ts new file mode 100644 index 000000000..d4c33bfff --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.styles.ts @@ -0,0 +1,42 @@ +import { Styles } from '@monkvision/types'; + +export const styles: Styles = { + container: { + display: 'flex', + alignSelf: 'stretch', + alignItems: 'center', + justifyContent: 'space-between', + flexDirection: 'column', + backgroundColor: 'green', + flex: '1', + }, + top: { + display: 'flex', + alignSelf: 'stretch', + flexDirection: 'row', + justifyContent: 'space-between', + margin: '10px', + }, + counter: { + display: 'flex', + color: 'white', + alignItems: 'center', + justifyContent: 'center', + padding: '6px 12px', + borderRadius: '8px', + backgroundColor: 'rgba(28, 28, 30, 0.64)', + }, + slider: { + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + paddingLeft: '50%', + overflowX: 'auto', + whiteSpace: 'nowrap', + scrollbarWidth: 'none', + maxWidth: '60vw', + }, + labelButton: { + margin: '10px', + }, +}; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.tsx new file mode 100644 index 000000000..999603cd8 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.tsx @@ -0,0 +1,42 @@ +import { useEffect, useState } from 'react'; +import { useObjectTranslation } from '@monkvision/common'; +import { useTranslation } from 'react-i18next'; +import { LabelDictionary } from '@monkvision/types'; +import { Button } from '@monkvision/common-ui-web'; +import { PhotoCaptureHUDPreview, usePhotoCaptureHUDPreview } from './hook'; +import { PhotoCaptureHUDSightsSlider } from './PhotoCaptureHUDSightsSlider'; +import { PhotoCaptureHUDCounter } from './PhotoCaptureHUDSightsCounter'; + +export interface PhotoCaptureHUDPreviewProps { + sights: LabelDictionary; + onAddDamage?: () => void; +} + +export function PhotoCaptureHUDPreview({ sights, onAddDamage }: PhotoCaptureHUDPreviewProps) { + const [currentSight, setCurrentSight] = useState(''); + const [sightsArray, setSightsArray] = useState(['']); + + const { i18n } = useTranslation(); + const { tObj } = useObjectTranslation(); + const style = usePhotoCaptureHUDPreview(); + + useEffect(() => { + // Set the first sight as the default value for the current sight + setSightsArray(Object.values(sights).map((label) => tObj(label))); + }, [i18n.language]); + + return ( +
+
+ + +
+ setCurrentSight(sight)} + styles={style} + /> +
+ ); +} diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/hook.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/hook.ts new file mode 100644 index 000000000..b9e2ef4df --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/hook.ts @@ -0,0 +1,30 @@ +import { CSSProperties } from 'react'; +import { styles } from './PhotoCaptureHUDPreview.styles'; + +export interface PhotoCaptureHUDPreview { + containerStyle: CSSProperties; + top: CSSProperties; + counter: CSSProperties; + slider: CSSProperties; + labelButton: CSSProperties; +} + +export function usePhotoCaptureHUDPreview(): PhotoCaptureHUDPreview { + return { + containerStyle: { + ...styles['container'], + }, + top: { + ...styles['top'], + }, + counter: { + ...styles['counter'], + }, + slider: { + ...styles['slider'], + }, + labelButton: { + ...styles['labelButton'], + }, + }; +} diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/index.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/index.ts new file mode 100644 index 000000000..9152bc238 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/index.ts @@ -0,0 +1 @@ +export { PhotoCaptureHUDPreview } from './PhotoCaptureHUDPreview'; From 83ae2cb717a3fd86ff61ca1485495d5545691f1d Mon Sep 17 00:00:00 2001 From: David LY Date: Wed, 13 Dec 2023 15:52:21 +0100 Subject: [PATCH 07/33] Added PhotoCaptureHUD that render the HUDPreview and HUDButtons --- .../src/PhotoCaptureHUD/PhotoCaptureHUD.styles.ts | 11 +++++++++++ .../src/PhotoCaptureHUD/PhotoCaptureHUD.tsx | 13 +++++++++++++ .../src/PhotoCaptureHUD/index.ts | 6 +++--- packages/public/inspection-capture-web/src/index.ts | 2 +- 4 files changed, 28 insertions(+), 4 deletions(-) create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.styles.ts create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.styles.ts new file mode 100644 index 000000000..80fc45d61 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.styles.ts @@ -0,0 +1,11 @@ +import { Styles } from '@monkvision/types'; + +export const styles: Styles = { + container: { + height: '100%', + display: 'flex', + flexDirection: 'row', + alignSelf: 'stretch', + flex: '1', + }, +}; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx new file mode 100644 index 000000000..8d09ca5cb --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx @@ -0,0 +1,13 @@ +import { labels } from '@monkvision/sights'; +import { PhotoCaptureHUDPreview } from './PhotoCaptureHUDPreview'; +import { PhotoCaptureHUDButtons } from './PhotoCaptureHUDButtons'; +import { styles } from './PhotoCaptureHUD.styles'; + +export function PhotoCaptureHUD() { + return ( +
+ + +
+ ); +} diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/index.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/index.ts index 0c72aaee2..757a97861 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/index.ts +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/index.ts @@ -1,3 +1,3 @@ -export * from './CaptureHUDButtons'; // TODO : Remove this export later -export * from './CaptureHUDPreview'; // TODO : Remove this export later -export { CaptureHUD } from './CaptureHUD'; +export * from './PhotoCaptureHUDButtons'; // TODO : Remove this export later +export * from './PhotoCaptureHUDPreview'; // TODO : Remove this export later +export { PhotoCaptureHUD } from './PhotoCaptureHUD'; diff --git a/packages/public/inspection-capture-web/src/index.ts b/packages/public/inspection-capture-web/src/index.ts index 01f4087d8..f7d446687 100644 --- a/packages/public/inspection-capture-web/src/index.ts +++ b/packages/public/inspection-capture-web/src/index.ts @@ -1 +1 @@ -export * from './CaptureHUD'; // TODO : Remove this export later +export * from './PhotoCaptureHUD'; // TODO : Remove this export later From 9cc3b44c0a4b52fbb136e1e890bcc0fe3a982242 Mon Sep 17 00:00:00 2001 From: David_LY Date: Wed, 13 Dec 2023 17:34:27 +0100 Subject: [PATCH 08/33] Fix: lint --- .../common/src/hooks/useObjectTranslation.ts | 1 - .../PhotoCaptureHUDButtons.test.tsx} | 32 +++++++++---------- 2 files changed, 16 insertions(+), 17 deletions(-) rename packages/public/inspection-capture-web/test/{CaptureHUD/CaptureHUDButtons.test.tsx => PhotoCaptureHUD/PhotoCaptureHUDButtons.test.tsx} (78%) diff --git a/packages/public/common/src/hooks/useObjectTranslation.ts b/packages/public/common/src/hooks/useObjectTranslation.ts index bb0f6d4c8..d0dde11f2 100644 --- a/packages/public/common/src/hooks/useObjectTranslation.ts +++ b/packages/public/common/src/hooks/useObjectTranslation.ts @@ -21,4 +21,3 @@ export function useObjectTranslation(): { }, }; } - diff --git a/packages/public/inspection-capture-web/test/CaptureHUD/CaptureHUDButtons.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDButtons.test.tsx similarity index 78% rename from packages/public/inspection-capture-web/test/CaptureHUD/CaptureHUDButtons.test.tsx rename to packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDButtons.test.tsx index 16a204cee..0a562e7fa 100644 --- a/packages/public/inspection-capture-web/test/CaptureHUD/CaptureHUDButtons.test.tsx +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDButtons.test.tsx @@ -6,8 +6,8 @@ import { InteractiveStatus } from '@monkvision/types'; import { MonkPicture } from '@monkvision/camera-web'; import { TakePictureButton, Icon } from '@monkvision/common-ui-web'; import { fireEvent, render, screen } from '@testing-library/react'; -import { CaptureHUDButtons } from '../../src'; -import { captureButtonForegroundColors } from '../../src/CaptureHUD/CaptureHUDButtons/CaptureHUDButtons.styles'; +import { PhotoCaptureHUDButtons } from '../../src'; +import { captureButtonForegroundColors } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDButtons/CaptureHUDButtons.styles'; const GALLERY_BTN_TEST_ID = 'monk-gallery-btn'; const CLOSE_BTN_TEST_ID = 'monk-close-btn'; @@ -18,7 +18,7 @@ describe('CaptureHUDButtons component', () => { }); it('should display 3 buttons : open gallery, take picture and close', () => { - const { unmount } = render(); + const { unmount } = render(); expect(Icon).toHaveBeenCalledTimes(2); expect(TakePictureButton).toHaveBeenCalledTimes(1); @@ -28,7 +28,7 @@ describe('CaptureHUDButtons component', () => { describe('Gallery button', () => { it('should not be disabled by default', () => { - const { unmount } = render(); + const { unmount } = render(); const galleryBtnEl = screen.getByTestId(GALLERY_BTN_TEST_ID); expect(galleryBtnEl.getAttribute('disabled')).toBeNull(); @@ -37,7 +37,7 @@ describe('CaptureHUDButtons component', () => { }); it('should be disabled when the galleryDisabled prop is true', () => { - const { unmount } = render(); + const { unmount } = render(); const galleryBtnEl = screen.getByTestId(GALLERY_BTN_TEST_ID); expect(galleryBtnEl.getAttribute('disabled')).toBeDefined(); @@ -47,7 +47,7 @@ describe('CaptureHUDButtons component', () => { it('should get passed the onOpenGallery callback', () => { const onOpenGallery = jest.fn(); - const { unmount } = render(); + const { unmount } = render(); const galleryBtnEl = screen.getByTestId(GALLERY_BTN_TEST_ID); fireEvent.click(galleryBtnEl); @@ -58,7 +58,7 @@ describe('CaptureHUDButtons component', () => { it('should display an image icon when no galleryPreview is provided', () => { const expectedIcon = 'image'; - const { unmount } = render(); + const { unmount } = render(); expect((Icon as jest.Mock).mock.calls).toContainEqual([ { @@ -74,7 +74,7 @@ describe('CaptureHUDButtons component', () => { it('should display background image the galleryPreview prop is provided', () => { const galleryPreview = { uri: 'test-uri' } as unknown as MonkPicture; - const { unmount } = render(); + const { unmount } = render(); const galleryBtnEl = screen.getByTestId(GALLERY_BTN_TEST_ID); const backgroundDiv = galleryBtnEl.querySelector('div'); @@ -89,7 +89,7 @@ describe('CaptureHUDButtons component', () => { const takePictureButtonMock = TakePictureButton as unknown as jest.Mock; it('should not be disabled by default', () => { - const { unmount } = render(); + const { unmount } = render(); expectPropsOnChildMock(takePictureButtonMock, { disabled: false }); @@ -97,7 +97,7 @@ describe('CaptureHUDButtons component', () => { }); it('should be disabled when the takePictureDisabled prop is true', () => { - const { unmount } = render(); + const { unmount } = render(); expectPropsOnChildMock(takePictureButtonMock, { disabled: true }); @@ -105,7 +105,7 @@ describe('CaptureHUDButtons component', () => { }); it('should have a size of 85px', () => { - const { unmount } = render(); + const { unmount } = render(); expectPropsOnChildMock(takePictureButtonMock, { size: 85 }); @@ -114,7 +114,7 @@ describe('CaptureHUDButtons component', () => { it('should get passed the onTakePicture callback', () => { const onTakePicture = jest.fn(); - const { unmount } = render(); + const { unmount } = render(); expectPropsOnChildMock(takePictureButtonMock, { onClick: onTakePicture }); @@ -124,7 +124,7 @@ describe('CaptureHUDButtons component', () => { describe('Close button', () => { it('should not be disabled by default', () => { - const { unmount } = render(); + const { unmount } = render(); const galleryBtnEl = screen.getByTestId(CLOSE_BTN_TEST_ID); expect(galleryBtnEl.getAttribute('disabled')).toBeNull(); @@ -133,7 +133,7 @@ describe('CaptureHUDButtons component', () => { }); it('should be disabled when the closeDisabled prop is true', () => { - const { unmount } = render(); + const { unmount } = render(); const galleryBtnEl = screen.getByTestId(CLOSE_BTN_TEST_ID); expect(galleryBtnEl.getAttribute('disabled')).toBeDefined(); @@ -143,7 +143,7 @@ describe('CaptureHUDButtons component', () => { it('should get passed the onClose callback', () => { const onClose = jest.fn(); - const { unmount } = render(); + const { unmount } = render(); const galleryBtnEl = screen.getByTestId(CLOSE_BTN_TEST_ID); fireEvent.click(galleryBtnEl); @@ -154,7 +154,7 @@ describe('CaptureHUDButtons component', () => { it('should display an image icon', () => { const expectedIcon = 'close'; - const { unmount } = render(); + const { unmount } = render(); expect((Icon as jest.Mock).mock.calls).toContainEqual([ { From b763122a6fa2f362afde1e619d79e8319b15a14a Mon Sep 17 00:00:00 2001 From: David_LY Date: Thu, 14 Dec 2023 19:15:47 +0100 Subject: [PATCH 09/33] fix: applying feedback review, Sights liftup in PhotoCaptureHUD --- .../common/src/hooks/useObjectTranslation.ts | 31 +++++++---- .../src/PhotoCaptureHUD/PhotoCaptureHUD.tsx | 23 ++++++-- .../PhotoCaptureHUDPreview.tsx | 39 +++++++------- .../PhotoCaptureHUDSightsCounter.tsx | 19 +++---- .../PhotoCaptureHUDSightsSlider.tsx | 53 ++++++++++++------- 5 files changed, 102 insertions(+), 63 deletions(-) diff --git a/packages/public/common/src/hooks/useObjectTranslation.ts b/packages/public/common/src/hooks/useObjectTranslation.ts index d0dde11f2..b76215291 100644 --- a/packages/public/common/src/hooks/useObjectTranslation.ts +++ b/packages/public/common/src/hooks/useObjectTranslation.ts @@ -1,22 +1,35 @@ import { LabelTranslation } from '@monkvision/types'; import { useTranslation } from 'react-i18next'; -export function useObjectTranslation(): { - tObj: (label: LabelTranslation) => string; -} { +/** + * The result of the useObjectTranslation. It contains a function which takes a LabelTranslation object and return the + * translated label sync with the actual selected language. + */ +export interface UseObjectTranslationResult { + /** + * Function translating a LabelTranslation object into a translated label sync with the actual selected language. + * @param obj + */ + tObj: (obj: LabelTranslation) => string; +} + +/** + * Custom hook used to get the label with the actual selected language. + */ +export function useObjectTranslation(): UseObjectTranslationResult { const { i18n } = useTranslation(); return { - tObj: (label) => { - const lang: string = i18n.language.slice(0, 2); + tObj: (obj) => { + const lang = i18n.language.slice(0, 2); switch (lang) { case 'en': - return label.en; + return obj.en; case 'fr': - return label.fr; + return obj.fr; case 'de': - return label.de; + return obj.de; default: - return label.en; + return obj.en; } }, }; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx index 8d09ca5cb..9b0064660 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx @@ -1,12 +1,29 @@ -import { labels } from '@monkvision/sights'; +import { useState } from 'react'; +import { Sight } from '@monkvision/types'; import { PhotoCaptureHUDPreview } from './PhotoCaptureHUDPreview'; import { PhotoCaptureHUDButtons } from './PhotoCaptureHUDButtons'; import { styles } from './PhotoCaptureHUD.styles'; -export function PhotoCaptureHUD() { +export interface PhotoCaptureHUDProps { + sights?: Sight[]; +} + +export function PhotoCaptureHUD({ sights }: PhotoCaptureHUDProps) { + const [currentSight, setCurrentSight] = useState(sights?.[0]); + const [sightsTaken] = useState(0); + + const handleOnSightSelected = (sight: Sight): void => { + setCurrentSight(sight); + }; + return (
- +
); diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.tsx index 999603cd8..fd334ff33 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.tsx @@ -1,41 +1,38 @@ -import { useEffect, useState } from 'react'; -import { useObjectTranslation } from '@monkvision/common'; -import { useTranslation } from 'react-i18next'; -import { LabelDictionary } from '@monkvision/types'; +import { Sight } from '@monkvision/types'; import { Button } from '@monkvision/common-ui-web'; import { PhotoCaptureHUDPreview, usePhotoCaptureHUDPreview } from './hook'; import { PhotoCaptureHUDSightsSlider } from './PhotoCaptureHUDSightsSlider'; import { PhotoCaptureHUDCounter } from './PhotoCaptureHUDSightsCounter'; export interface PhotoCaptureHUDPreviewProps { - sights: LabelDictionary; + sights?: Sight[]; + currentSight?: Sight; + onSightSelected?: (sight: Sight) => void; onAddDamage?: () => void; + sightsTaken?: number; } -export function PhotoCaptureHUDPreview({ sights, onAddDamage }: PhotoCaptureHUDPreviewProps) { - const [currentSight, setCurrentSight] = useState(''); - const [sightsArray, setSightsArray] = useState(['']); - - const { i18n } = useTranslation(); - const { tObj } = useObjectTranslation(); +export function PhotoCaptureHUDPreview({ + sights, + currentSight, + onSightSelected, + onAddDamage, + sightsTaken, +}: PhotoCaptureHUDPreviewProps) { const style = usePhotoCaptureHUDPreview(); - useEffect(() => { - // Set the first sight as the default value for the current sight - setSightsArray(Object.values(sights).map((label) => tObj(label))); - }, [i18n.language]); - return (
- - + +
setCurrentSight(sight)} - styles={style} + onSightSelected={onSightSelected} />
); diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsCounter.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsCounter.tsx index 79d655d06..d40be1d09 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsCounter.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsCounter.tsx @@ -1,19 +1,16 @@ -import { PhotoCaptureHUDPreview } from './hook'; +import { usePhotoCaptureHUDPreview } from './hook'; export interface PhotoCaptureHUDCounterProps { - sightDisable?: string[]; - sight: string[]; - styles: PhotoCaptureHUDPreview; + totalSights?: number; + sightsTaken?: number; } -export function PhotoCaptureHUDCounter({ - sightDisable, - sight, - styles, -}: PhotoCaptureHUDCounterProps) { +export function PhotoCaptureHUDCounter({ totalSights, sightsTaken }: PhotoCaptureHUDCounterProps) { + const style = usePhotoCaptureHUDPreview(); + return ( -
- {sightDisable} / {sight.length} +
+ {sightsTaken} / {totalSights}
); } diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsSlider.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsSlider.tsx index 4e8d1251b..1a8fe07f0 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsSlider.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsSlider.tsx @@ -1,33 +1,48 @@ import { Button } from '@monkvision/common-ui-web'; -import { PhotoCaptureHUDPreview } from './hook'; +import { Sight } from '@monkvision/types'; +import { useObjectTranslation } from '@monkvision/common'; +import { labels } from '@monkvision/sights'; +import { usePhotoCaptureHUDPreview } from './hook'; -export interface SliderProps { - sight: string[]; - currentSight: string; - onSightSelected: (sight: string) => void; - styles: PhotoCaptureHUDPreview; +export interface PhotoCaptureHUDSliderProps { + sights?: Sight[]; + currentSight?: Sight; + onSightSelected?: (sight: Sight) => void; +} + +export interface UseSightLabelResult { + label: (sight: Sight) => string; } export function PhotoCaptureHUDSightsSlider({ - sight, + sights, currentSight, onSightSelected, - styles, -}: SliderProps) { +}: PhotoCaptureHUDSliderProps) { + const style = usePhotoCaptureHUDPreview(); + + function useSightLabel(): UseSightLabelResult { + const { tObj } = useObjectTranslation(); + return { + label: (sight) => { + const translationObject = labels[sight.label]; + return translationObject + ? tObj(translationObject) + : `translation-not-found[${sight.label}]`; + }, + }; + } + const { label } = useSightLabel(); return ( -
- {sight.map((label: string, key: number) => ( +
+ {sights?.map((sight, key) => ( ))}
From 730e020be1d759cac316f704d675f420133720fa Mon Sep 17 00:00:00 2001 From: David_LY Date: Thu, 14 Dec 2023 21:56:49 +0100 Subject: [PATCH 10/33] rename Slider to SightsSlider --- .../PhotoCaptureHUDPreview/PhotoCaptureHUDSightsSlider.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsSlider.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsSlider.tsx index 1a8fe07f0..a3d690ae2 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsSlider.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsSlider.tsx @@ -4,7 +4,7 @@ import { useObjectTranslation } from '@monkvision/common'; import { labels } from '@monkvision/sights'; import { usePhotoCaptureHUDPreview } from './hook'; -export interface PhotoCaptureHUDSliderProps { +export interface PhotoCaptureHUDSightsSliderProps { sights?: Sight[]; currentSight?: Sight; onSightSelected?: (sight: Sight) => void; @@ -18,7 +18,7 @@ export function PhotoCaptureHUDSightsSlider({ sights, currentSight, onSightSelected, -}: PhotoCaptureHUDSliderProps) { +}: PhotoCaptureHUDSightsSliderProps) { const style = usePhotoCaptureHUDPreview(); function useSightLabel(): UseSightLabelResult { From 9aea4d7e7628b08001e6b80f293a575b16caab17 Mon Sep 17 00:00:00 2001 From: David_LY Date: Wed, 20 Dec 2023 14:16:05 +0100 Subject: [PATCH 11/33] useObjectTranslation/CaptureHUDPreviewtests added + fix --- .../src/__mocks__/@monkvision/common.tsx | 1 + .../src/__mocks__/react-i18next.tsx | 2 +- .../common/src/hooks/useObjectTranslation.ts | 22 ++----- .../test/hooks/useObjectTranslation.test.ts | 35 +++++++++++ .../PhotoCaptureHUD/PhotoCaptureHUD.styles.ts | 5 ++ .../src/PhotoCaptureHUD/PhotoCaptureHUD.tsx | 23 +++++-- .../CaptureHUDButtons.styles.ts | 1 + .../PhotoCaptureHUDAddDamageMenu.tsx | 15 +++++ .../PhotoCaptureHUDPreview.styles.ts | 31 +++++++++- .../PhotoCaptureHUDPreview.tsx | 6 +- .../PhotoCaptureHUDSightsCounter.tsx | 2 +- .../PhotoCaptureHUDSightsOverlay.tsx | 12 ++++ .../PhotoCaptureHUDSightsSlider.tsx | 11 ++-- .../PhotoCaptureHUDPreview/hook.ts | 7 +++ .../PhotoCaptureHUDPreview.test.tsx | 9 +++ .../PhotoCaptureHUDSightsCounter.test.tsx | 22 +++++++ .../PhotoCaptureHUDSightsOverlay.test.tsx | 22 +++++++ .../PhotoCaptureHUDSightsSlider.test.tsx | 60 +++++++++++++++++++ packages/public/types/src/i18n.ts | 5 ++ packages/public/types/src/index.ts | 1 + packages/public/types/src/sights.ts | 4 +- packages/public/types/src/utils.ts | 18 ------ 22 files changed, 261 insertions(+), 53 deletions(-) create mode 100644 packages/public/common/test/hooks/useObjectTranslation.test.ts create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDAddDamageMenu.tsx create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsOverlay.tsx create mode 100644 packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDPreview.test.tsx create mode 100644 packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsCounter.test.tsx create mode 100644 packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsOverlay.test.tsx create mode 100644 packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsSlider.test.tsx create mode 100644 packages/public/types/src/i18n.ts diff --git a/packages/private/test-utils/src/__mocks__/@monkvision/common.tsx b/packages/private/test-utils/src/__mocks__/@monkvision/common.tsx index 59e373495..bd34abebd 100644 --- a/packages/private/test-utils/src/__mocks__/@monkvision/common.tsx +++ b/packages/private/test-utils/src/__mocks__/@monkvision/common.tsx @@ -71,4 +71,5 @@ export = { })), useResponsiveStyle: jest.fn(() => ({ responsive: jest.fn(() => null) })), useWindowDimensions: jest.fn(() => ({ width: 0, height: 0, isPortrait: false })), + useObjectTranslation: jest.fn(() => ({ tObj: jest.fn(() => {}) })), }; diff --git a/packages/private/test-utils/src/__mocks__/react-i18next.tsx b/packages/private/test-utils/src/__mocks__/react-i18next.tsx index 532c12e93..b4ab45fe9 100644 --- a/packages/private/test-utils/src/__mocks__/react-i18next.tsx +++ b/packages/private/test-utils/src/__mocks__/react-i18next.tsx @@ -4,5 +4,5 @@ export = { /* Mocks */ initReactI18next: {}, I18nextProvider: jest.fn(({ children }) => <>{children}), - useTranslation: jest.fn(() => ({ t: jest.fn((str) => str) })), + useTranslation: jest.fn(() => ({ t: jest.fn((str) => str), i18n: { language: 'en' } })), }; diff --git a/packages/public/common/src/hooks/useObjectTranslation.ts b/packages/public/common/src/hooks/useObjectTranslation.ts index b76215291..b5d682262 100644 --- a/packages/public/common/src/hooks/useObjectTranslation.ts +++ b/packages/public/common/src/hooks/useObjectTranslation.ts @@ -1,4 +1,4 @@ -import { LabelTranslation } from '@monkvision/types'; +import { MonkLanguage, TranslationObject } from '@monkvision/types'; import { useTranslation } from 'react-i18next'; /** @@ -10,7 +10,7 @@ export interface UseObjectTranslationResult { * Function translating a LabelTranslation object into a translated label sync with the actual selected language. * @param obj */ - tObj: (obj: LabelTranslation) => string; + tObj: (obj: TranslationObject) => string; } /** @@ -18,19 +18,9 @@ export interface UseObjectTranslationResult { */ export function useObjectTranslation(): UseObjectTranslationResult { const { i18n } = useTranslation(); - return { - tObj: (obj) => { - const lang = i18n.language.slice(0, 2); - switch (lang) { - case 'en': - return obj.en; - case 'fr': - return obj.fr; - case 'de': - return obj.de; - default: - return obj.en; - } - }, + const tObj = (obj: TranslationObject) => { + const lang = i18n.language.slice(0, 2) as MonkLanguage; + return obj[lang] ?? 'translation-not-found'; }; + return { tObj }; } diff --git a/packages/public/common/test/hooks/useObjectTranslation.test.ts b/packages/public/common/test/hooks/useObjectTranslation.test.ts new file mode 100644 index 000000000..549d7aad2 --- /dev/null +++ b/packages/public/common/test/hooks/useObjectTranslation.test.ts @@ -0,0 +1,35 @@ +jest.mock('i18next'); +jest.mock('react-i18next'); + +import { monkLanguages, TranslationObject } from '@monkvision/types'; +import { useTranslation } from 'react-i18next'; +import { renderHook } from '@testing-library/react-hooks'; +import { useObjectTranslation } from '../../src'; + +const obj: TranslationObject = { en: 'Hello', fr: 'Bonjour', de: 'Hallo' }; + +describe('useObjectTranslation hook', () => { + it('should return a tObj function', () => { + const { result, unmount } = renderHook(useObjectTranslation); + + expect(typeof result.current.tObj).toBe('function'); + unmount(); + }); + + it('should properly translate ObjectTranslation value', () => { + const { result, rerender, unmount } = renderHook(useObjectTranslation); + monkLanguages.forEach((language) => { + (useTranslation as jest.Mock).mockImplementationOnce(() => ({ i18n: { language } })); + rerender(); + expect(result.current.tObj(obj)).toBe(obj[language]); + }); + + unmount(); + }); + + it('should return a default value when the translation is not found', () => { + const { result, unmount } = renderHook(useObjectTranslation); + expect(typeof result.current.tObj({} as TranslationObject)).toBe('string'); + unmount(); + }); +}); diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.styles.ts index 80fc45d61..84603ec98 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.styles.ts +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.styles.ts @@ -8,4 +8,9 @@ export const styles: Styles = { alignSelf: 'stretch', flex: '1', }, + containerPortrait: { + __media: { portrait: true }, + padding: 20, + flexDirection: 'row-reverse', + }, }; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx index 9b0064660..9e1be5357 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx @@ -3,6 +3,7 @@ import { Sight } from '@monkvision/types'; import { PhotoCaptureHUDPreview } from './PhotoCaptureHUDPreview'; import { PhotoCaptureHUDButtons } from './PhotoCaptureHUDButtons'; import { styles } from './PhotoCaptureHUD.styles'; +import { PhotoCaptureHUDAddDamageMenu } from './PhotoCaptureHUDPreview/PhotoCaptureHUDAddDamageMenu'; export interface PhotoCaptureHUDProps { sights?: Sight[]; @@ -10,20 +11,30 @@ export interface PhotoCaptureHUDProps { export function PhotoCaptureHUD({ sights }: PhotoCaptureHUDProps) { const [currentSight, setCurrentSight] = useState(sights?.[0]); + const [isOnAddDamage, setIsOnAddDamage] = useState(false); const [sightsTaken] = useState(0); const handleOnSightSelected = (sight: Sight): void => { setCurrentSight(sight); }; + const handleOnAddDamage = (state: boolean): void => { + setIsOnAddDamage(state); + }; + return (
- + {!isOnAddDamage ? ( + + ) : ( + + )}
); diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDButtons/CaptureHUDButtons.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDButtons/CaptureHUDButtons.styles.ts index 492eec2e2..a1717710a 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDButtons/CaptureHUDButtons.styles.ts +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDButtons/CaptureHUDButtons.styles.ts @@ -19,6 +19,7 @@ export const styles: Styles = { flexDirection: 'column', padding: '30px 40px', backgroundColor: '#000000', + zIndex: '9', }, containersPortrait: { __media: { portrait: true }, diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDAddDamageMenu.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDAddDamageMenu.tsx new file mode 100644 index 000000000..220308e48 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDAddDamageMenu.tsx @@ -0,0 +1,15 @@ +import { Button } from '@monkvision/common-ui-web'; +import { usePhotoCaptureHUDPreview } from './hook'; + +export interface PhotoCaptureHUDAddDamageMenuProps { + onAddDamage: (state: boolean) => void; +} + +export function PhotoCaptureHUDAddDamageMenu({ onAddDamage }: PhotoCaptureHUDAddDamageMenuProps) { + const style = usePhotoCaptureHUDPreview(); + return ( +
+
+ ); +} diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.styles.ts index d4c33bfff..06ce404ff 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.styles.ts +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.styles.ts @@ -2,20 +2,28 @@ import { Styles } from '@monkvision/types'; export const styles: Styles = { container: { + // position: 'absolute', display: 'flex', alignSelf: 'stretch', - alignItems: 'center', justifyContent: 'space-between', flexDirection: 'column', backgroundColor: 'green', flex: '1', }, + containersPortrait: { + __media: { portrait: true }, + padding: 20, + flexDirection: 'row-reverse', + }, top: { + // position: 'fixed', + // top: '10px', display: 'flex', alignSelf: 'stretch', flexDirection: 'row', justifyContent: 'space-between', margin: '10px', + zIndex: '9', }, counter: { display: 'flex', @@ -25,18 +33,37 @@ export const styles: Styles = { padding: '6px 12px', borderRadius: '8px', backgroundColor: 'rgba(28, 28, 30, 0.64)', + zIndex: '9', }, slider: { + // position: 'fixed', + // bottom: '2px', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', - paddingLeft: '50%', + paddingLeft: '35%', + paddingBottom: '0%', overflowX: 'auto', + overflowY: 'hidden', whiteSpace: 'nowrap', scrollbarWidth: 'none', maxWidth: '60vw', + zIndex: '9', }, labelButton: { margin: '10px', + zIndex: '9', + }, + sightOverlay: { + // justifySelf: 'center', + // position: 'fixed', + // top: '0', + // left: '0', + // right: '0', + // bottom: '0', + // width: '100%', + // height: '100%', + // display: 'flex', + zIndex: '9', }, }; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.tsx index fd334ff33..e3bbf1a99 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.tsx @@ -3,12 +3,13 @@ import { Button } from '@monkvision/common-ui-web'; import { PhotoCaptureHUDPreview, usePhotoCaptureHUDPreview } from './hook'; import { PhotoCaptureHUDSightsSlider } from './PhotoCaptureHUDSightsSlider'; import { PhotoCaptureHUDCounter } from './PhotoCaptureHUDSightsCounter'; +import { PhotoCaptureHUDSightsOverlay } from './PhotoCaptureHUDSightsOverlay'; export interface PhotoCaptureHUDPreviewProps { sights?: Sight[]; currentSight?: Sight; onSightSelected?: (sight: Sight) => void; - onAddDamage?: () => void; + onAddDamage?: (state: boolean) => void; sightsTaken?: number; } @@ -25,10 +26,11 @@ export function PhotoCaptureHUDPreview({
-
+ - {sightsTaken} / {totalSights} + {totalSights ? `${sightsTaken} / ${totalSights}` : 'error-no-sight'}
); } diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsOverlay.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsOverlay.tsx new file mode 100644 index 000000000..02503283b --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsOverlay.tsx @@ -0,0 +1,12 @@ +import { Sight } from '@monkvision/types'; +import { SightOverlay } from '@monkvision/common-ui-web'; +import { usePhotoCaptureHUDPreview } from './hook'; + +export interface PhotoCaptureHUDSightsOverlayProps { + sight?: Sight; +} + +export function PhotoCaptureHUDSightsOverlay({ sight }: PhotoCaptureHUDSightsOverlayProps) { + const style = usePhotoCaptureHUDPreview(); + return sight ? : null; +} diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsSlider.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsSlider.tsx index a3d690ae2..f69bab334 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsSlider.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsSlider.tsx @@ -1,8 +1,8 @@ import { Button } from '@monkvision/common-ui-web'; import { Sight } from '@monkvision/types'; import { useObjectTranslation } from '@monkvision/common'; -import { labels } from '@monkvision/sights'; import { usePhotoCaptureHUDPreview } from './hook'; +import { labels } from '@monkvision/sights/'; export interface PhotoCaptureHUDSightsSliderProps { sights?: Sight[]; @@ -17,7 +17,7 @@ export interface UseSightLabelResult { export function PhotoCaptureHUDSightsSlider({ sights, currentSight, - onSightSelected, + onSightSelected = (sight) => {}, }: PhotoCaptureHUDSightsSliderProps) { const style = usePhotoCaptureHUDPreview(); @@ -35,12 +35,13 @@ export function PhotoCaptureHUDSightsSlider({ const { label } = useSightLabel(); return (
- {sights?.map((sight, key) => ( + {sights?.map((sight, index) => ( diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/hook.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/hook.ts index b9e2ef4df..fcfd5c725 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/hook.ts +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/hook.ts @@ -1,4 +1,5 @@ import { CSSProperties } from 'react'; +import { useResponsiveStyle } from '@monkvision/common'; import { styles } from './PhotoCaptureHUDPreview.styles'; export interface PhotoCaptureHUDPreview { @@ -7,12 +8,15 @@ export interface PhotoCaptureHUDPreview { counter: CSSProperties; slider: CSSProperties; labelButton: CSSProperties; + sightOverlay: CSSProperties; } export function usePhotoCaptureHUDPreview(): PhotoCaptureHUDPreview { + const { responsive } = useResponsiveStyle(); return { containerStyle: { ...styles['container'], + ...responsive(styles['containerPortrait']), }, top: { ...styles['top'], @@ -26,5 +30,8 @@ export function usePhotoCaptureHUDPreview(): PhotoCaptureHUDPreview { labelButton: { ...styles['labelButton'], }, + sightOverlay: { + ...styles['sightOverlay'], + }, }; } diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDPreview.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDPreview.test.tsx new file mode 100644 index 000000000..d1321c6b9 --- /dev/null +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDPreview.test.tsx @@ -0,0 +1,9 @@ +import { render } from '@testing-library/react'; +import { PhotoCaptureHUDPreview } from '../../src'; + +describe('PhotoCaptureHUDPreview component', () => { + it('render HUDPreview with no props', () => { + const { unmount } = render(); + unmount(); + }); +}); diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsCounter.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsCounter.test.tsx new file mode 100644 index 000000000..a3c426189 --- /dev/null +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsCounter.test.tsx @@ -0,0 +1,22 @@ +import { render } from '@testing-library/react'; +import { PhotoCaptureHUDCounter } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsCounter'; + +describe('PhotoCaptureHUDSightsCounter component', () => { + it('render counter with no props', () => { + const { getByText, unmount } = render(); + const expectedText = 'error-no-sight'; + expect(getByText(expectedText).textContent).toEqual(expectedText); + unmount(); + }); + it('render counter with props', () => { + const totalSights = 10; + const sightsTaken = 5; + + const { getByText, unmount } = render( + , + ); + const expectedText = `${sightsTaken} / ${totalSights}`; + expect(getByText(expectedText).textContent).toEqual(expectedText); + unmount(); + }); +}); diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsOverlay.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsOverlay.test.tsx new file mode 100644 index 000000000..6e3e83461 --- /dev/null +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsOverlay.test.tsx @@ -0,0 +1,22 @@ +jest.mock('@monkvision/common-ui-web'); + +import { PhotoCaptureHUDSightsOverlay } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsOverlay'; +import { render, screen } from '@testing-library/react'; +import { SightOverlay } from '@monkvision/common-ui-web'; +import { sights } from '@monkvision/sights/lib/data'; + +const sightArray = Object.values(sights).map((sight) => sight); + +describe('PhotoCaptureHUDSightsOverlay component', () => { + // it('does not render Sights Overlay when sight is not provided', () => { + // const sightOverlayMock = SightOverlay as unknown as jest.Mock; + // const { unmount } = render(); + // unmount(); + // }); + + it('renders Sights Overlay when sight is provided', () => { + const { unmount } = render(); + expect(SightOverlay).toHaveBeenCalled(); + unmount(); + }); +}); diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsSlider.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsSlider.test.tsx new file mode 100644 index 000000000..f4dec751d --- /dev/null +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsSlider.test.tsx @@ -0,0 +1,60 @@ +jest.mock('i18next'); +jest.mock('react-i18next'); +jest.mock('@monkvision/common-ui-web'); +jest.mock('@monkvision/common'); + +import { expectPropsOnChildMock } from '@monkvision/test-utils'; +import { screen, render } from '@testing-library/react'; +import { Button } from '@monkvision/common-ui-web'; +import { sights } from '@monkvision/sights/'; +import { PhotoCaptureHUDSightsSlider } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsSlider'; + +const sightArray = Object.values(sights) + .map((sight) => sight) + .slice(0, 6); + +describe('PhotoCaptureHUDSightsSlider component', () => { + afterEach(() => { + jest.clearAllMocks(); + }); + // const button = Button as unknown as jest.Mock; + it('should not render any buttons when sights is not provided', () => { + const { unmount } = render(); + + expect(Button).toHaveBeenCalledTimes(0); + unmount(); + }); + + it('should render a slider of buttons when sights is provided', () => { + const { unmount } = render(); + + expect(Button).toHaveBeenCalledTimes(sightArray.length); + unmount(); + }); + + it('should get passed the onSightSelected callback', () => { + const onSightSelected = jest.fn(); + const buttonMock = Button as unknown as jest.Mock; + const { unmount } = render( + , + ); + expectPropsOnChildMock(buttonMock, { onClick: () => onSightSelected }); + unmount(); + }); + + it('should call tObj function for every button', () => { + const onSightSelected = jest.fn(); + const { unmount } = render( + , + ); + unmount(); + }); +}); diff --git a/packages/public/types/src/i18n.ts b/packages/public/types/src/i18n.ts new file mode 100644 index 000000000..c80a4bd38 --- /dev/null +++ b/packages/public/types/src/i18n.ts @@ -0,0 +1,5 @@ +export const monkLanguages = ['fr', 'en', 'de'] as const; + +export type MonkLanguage = (typeof monkLanguages)[number]; + +export type TranslationObject = Record; diff --git a/packages/public/types/src/index.ts b/packages/public/types/src/index.ts index afb175f9c..bb70ec584 100644 --- a/packages/public/types/src/index.ts +++ b/packages/public/types/src/index.ts @@ -2,5 +2,6 @@ export * from './state'; export * from './sights'; export * from './theme'; export * from './jsx'; +export * from './i18n'; export * from './utils'; export * from './type-utils'; diff --git a/packages/public/types/src/sights.ts b/packages/public/types/src/sights.ts index 9ab04f837..cc29c1cf2 100644 --- a/packages/public/types/src/sights.ts +++ b/packages/public/types/src/sights.ts @@ -1,5 +1,5 @@ import { TaskName } from './state'; -import { ObjectTranslation } from './utils'; +import { TranslationObject } from './i18n'; /** * The category of a Sight. @@ -175,7 +175,7 @@ export interface VehicleDetails { /** * The translation of labels for Sights, VehicleTypes etc. */ -export interface LabelTranslation extends ObjectTranslation { +export interface LabelTranslation extends TranslationObject { /** * The key of the label. */ diff --git a/packages/public/types/src/utils.ts b/packages/public/types/src/utils.ts index 346a6ac04..71ff91474 100644 --- a/packages/public/types/src/utils.ts +++ b/packages/public/types/src/utils.ts @@ -11,21 +11,3 @@ export interface PixelDimensions { */ height: number; } - -/** - * Object translated - */ -export interface ObjectTranslation { - /** - * The English translation. - */ - en: string; - /** - * The French translation. - */ - fr: string; - /** - * The German translation. - */ - de: string; -} From 412cee7850a4b71fec3577eee124ae195624d80c Mon Sep 17 00:00:00 2001 From: David_LY Date: Wed, 20 Dec 2023 15:16:27 +0100 Subject: [PATCH 12/33] directory structure changed by PreviewSight and PreviewAddDamage view directory structure changed to be more clear with PreviewSight and PreviewAddDamage view --- .../@monkvision/inspection-capture-web.ts | 4 ---- .../@monkvision/inspection-capture-web.tsx | 6 +++++ .../src/PhotoCaptureHUD/PhotoCaptureHUD.tsx | 6 ++--- .../PhotoCaptureHUDPreviewAddDamage.tsx} | 6 +++-- .../PhotoCaptureHUDPreviewAddDamage/index.ts | 1 + .../PhotoCaptureHUDPreview.styles.ts | 16 +------------- .../PhotoCaptureHUDPreview.tsx | 6 ++--- .../PhotoCaptureHUDSightsCounter.tsx | 2 +- .../PhotoCaptureHUDSightsOverlay.tsx | 2 +- .../PhotoCaptureHUDSightsSlider.tsx | 4 ++-- .../hook.ts | 0 .../index.ts | 0 .../src/PhotoCaptureHUD/index.ts | 3 ++- .../PhotoCaptureHUDSightsCounter.test.tsx | 2 +- .../PhotoCaptureHUDSightsOverlay.test.tsx | 10 ++------- .../PhotoCaptureHUDSightsSlider.test.tsx | 22 +++---------------- 16 files changed, 30 insertions(+), 60 deletions(-) delete mode 100644 packages/private/test-utils/src/__mocks__/@monkvision/inspection-capture-web.ts create mode 100644 packages/private/test-utils/src/__mocks__/@monkvision/inspection-capture-web.tsx rename packages/public/inspection-capture-web/src/PhotoCaptureHUD/{PhotoCaptureHUDPreview/PhotoCaptureHUDAddDamageMenu.tsx => PhotoCaptureHUDPreviewAddDamage/PhotoCaptureHUDPreviewAddDamage.tsx} (64%) create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage/index.ts rename packages/public/inspection-capture-web/src/PhotoCaptureHUD/{PhotoCaptureHUDPreview => PhotoCaptureHUDPreviewSight}/PhotoCaptureHUDPreview.styles.ts (76%) rename packages/public/inspection-capture-web/src/PhotoCaptureHUD/{PhotoCaptureHUDPreview => PhotoCaptureHUDPreviewSight}/PhotoCaptureHUDPreview.tsx (80%) rename packages/public/inspection-capture-web/src/PhotoCaptureHUD/{PhotoCaptureHUDPreview => PhotoCaptureHUDPreviewSight/components}/PhotoCaptureHUDSightsCounter.tsx (87%) rename packages/public/inspection-capture-web/src/PhotoCaptureHUD/{PhotoCaptureHUDPreview => PhotoCaptureHUDPreviewSight/components}/PhotoCaptureHUDSightsOverlay.tsx (88%) rename packages/public/inspection-capture-web/src/PhotoCaptureHUD/{PhotoCaptureHUDPreview => PhotoCaptureHUDPreviewSight/components}/PhotoCaptureHUDSightsSlider.tsx (93%) rename packages/public/inspection-capture-web/src/PhotoCaptureHUD/{PhotoCaptureHUDPreview => PhotoCaptureHUDPreviewSight}/hook.ts (100%) rename packages/public/inspection-capture-web/src/PhotoCaptureHUD/{PhotoCaptureHUDPreview => PhotoCaptureHUDPreviewSight}/index.ts (100%) diff --git a/packages/private/test-utils/src/__mocks__/@monkvision/inspection-capture-web.ts b/packages/private/test-utils/src/__mocks__/@monkvision/inspection-capture-web.ts deleted file mode 100644 index df0860c48..000000000 --- a/packages/private/test-utils/src/__mocks__/@monkvision/inspection-capture-web.ts +++ /dev/null @@ -1,4 +0,0 @@ -export = { - /* Actual exports */ - /* Mocks */ -}; diff --git a/packages/private/test-utils/src/__mocks__/@monkvision/inspection-capture-web.tsx b/packages/private/test-utils/src/__mocks__/@monkvision/inspection-capture-web.tsx new file mode 100644 index 000000000..32e841913 --- /dev/null +++ b/packages/private/test-utils/src/__mocks__/@monkvision/inspection-capture-web.tsx @@ -0,0 +1,6 @@ +export = { + /* Actual exports */ + /* Mocks */ + PhotoCaptureHUDButtons: jest.fn(() => <>), + PhotoCaptureHUDPreview: jest.fn(() => <>), +}; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx index 9e1be5357..2a51c9c81 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx @@ -1,9 +1,9 @@ import { useState } from 'react'; import { Sight } from '@monkvision/types'; -import { PhotoCaptureHUDPreview } from './PhotoCaptureHUDPreview'; import { PhotoCaptureHUDButtons } from './PhotoCaptureHUDButtons'; import { styles } from './PhotoCaptureHUD.styles'; -import { PhotoCaptureHUDAddDamageMenu } from './PhotoCaptureHUDPreview/PhotoCaptureHUDAddDamageMenu'; +import { PhotoCaptureHUDPreviewAddDamage } from './PhotoCaptureHUDPreviewAddDamage'; +import { PhotoCaptureHUDPreview } from './PhotoCaptureHUDPreviewSight'; export interface PhotoCaptureHUDProps { sights?: Sight[]; @@ -33,7 +33,7 @@ export function PhotoCaptureHUD({ sights }: PhotoCaptureHUDProps) { onAddDamage={handleOnAddDamage} /> ) : ( - + )}
diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDAddDamageMenu.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage/PhotoCaptureHUDPreviewAddDamage.tsx similarity index 64% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDAddDamageMenu.tsx rename to packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage/PhotoCaptureHUDPreviewAddDamage.tsx index 220308e48..da3d89d30 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDAddDamageMenu.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage/PhotoCaptureHUDPreviewAddDamage.tsx @@ -1,11 +1,13 @@ import { Button } from '@monkvision/common-ui-web'; -import { usePhotoCaptureHUDPreview } from './hook'; +import { usePhotoCaptureHUDPreview } from '../PhotoCaptureHUDPreviewSight/hook'; export interface PhotoCaptureHUDAddDamageMenuProps { onAddDamage: (state: boolean) => void; } -export function PhotoCaptureHUDAddDamageMenu({ onAddDamage }: PhotoCaptureHUDAddDamageMenuProps) { +export function PhotoCaptureHUDPreviewAddDamage({ + onAddDamage, +}: PhotoCaptureHUDAddDamageMenuProps) { const style = usePhotoCaptureHUDPreview(); return (
diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage/index.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage/index.ts new file mode 100644 index 000000000..36fd57b10 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage/index.ts @@ -0,0 +1 @@ +export * from './PhotoCaptureHUDPreviewAddDamage'; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.styles.ts similarity index 76% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.styles.ts rename to packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.styles.ts index 06ce404ff..c3e3f0974 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.styles.ts +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.styles.ts @@ -2,7 +2,6 @@ import { Styles } from '@monkvision/types'; export const styles: Styles = { container: { - // position: 'absolute', display: 'flex', alignSelf: 'stretch', justifyContent: 'space-between', @@ -16,8 +15,6 @@ export const styles: Styles = { flexDirection: 'row-reverse', }, top: { - // position: 'fixed', - // top: '10px', display: 'flex', alignSelf: 'stretch', flexDirection: 'row', @@ -36,12 +33,10 @@ export const styles: Styles = { zIndex: '9', }, slider: { - // position: 'fixed', - // bottom: '2px', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', - paddingLeft: '35%', + paddingLeft: '45%', paddingBottom: '0%', overflowX: 'auto', overflowY: 'hidden', @@ -55,15 +50,6 @@ export const styles: Styles = { zIndex: '9', }, sightOverlay: { - // justifySelf: 'center', - // position: 'fixed', - // top: '0', - // left: '0', - // right: '0', - // bottom: '0', - // width: '100%', - // height: '100%', - // display: 'flex', zIndex: '9', }, }; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.tsx similarity index 80% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.tsx rename to packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.tsx index e3bbf1a99..cc1af141b 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.tsx @@ -1,9 +1,9 @@ import { Sight } from '@monkvision/types'; import { Button } from '@monkvision/common-ui-web'; import { PhotoCaptureHUDPreview, usePhotoCaptureHUDPreview } from './hook'; -import { PhotoCaptureHUDSightsSlider } from './PhotoCaptureHUDSightsSlider'; -import { PhotoCaptureHUDCounter } from './PhotoCaptureHUDSightsCounter'; -import { PhotoCaptureHUDSightsOverlay } from './PhotoCaptureHUDSightsOverlay'; +import { PhotoCaptureHUDSightsSlider } from './components/PhotoCaptureHUDSightsSlider'; +import { PhotoCaptureHUDCounter } from './components/PhotoCaptureHUDSightsCounter'; +import { PhotoCaptureHUDSightsOverlay } from './components/PhotoCaptureHUDSightsOverlay'; export interface PhotoCaptureHUDPreviewProps { sights?: Sight[]; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsCounter.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsCounter.tsx similarity index 87% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsCounter.tsx rename to packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsCounter.tsx index fcca7a14b..7cb2954b7 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsCounter.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsCounter.tsx @@ -1,4 +1,4 @@ -import { usePhotoCaptureHUDPreview } from './hook'; +import { usePhotoCaptureHUDPreview } from '../hook'; export interface PhotoCaptureHUDCounterProps { totalSights?: number; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsOverlay.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsOverlay.tsx similarity index 88% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsOverlay.tsx rename to packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsOverlay.tsx index 02503283b..ce98857fe 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsOverlay.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsOverlay.tsx @@ -1,6 +1,6 @@ import { Sight } from '@monkvision/types'; import { SightOverlay } from '@monkvision/common-ui-web'; -import { usePhotoCaptureHUDPreview } from './hook'; +import { usePhotoCaptureHUDPreview } from '../hook'; export interface PhotoCaptureHUDSightsOverlayProps { sight?: Sight; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsSlider.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider.tsx similarity index 93% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsSlider.tsx rename to packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider.tsx index f69bab334..e654180c4 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsSlider.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider.tsx @@ -1,8 +1,8 @@ import { Button } from '@monkvision/common-ui-web'; import { Sight } from '@monkvision/types'; import { useObjectTranslation } from '@monkvision/common'; -import { usePhotoCaptureHUDPreview } from './hook'; import { labels } from '@monkvision/sights/'; +import { usePhotoCaptureHUDPreview } from '../hook'; export interface PhotoCaptureHUDSightsSliderProps { sights?: Sight[]; @@ -17,7 +17,7 @@ export interface UseSightLabelResult { export function PhotoCaptureHUDSightsSlider({ sights, currentSight, - onSightSelected = (sight) => {}, + onSightSelected = () => {}, }: PhotoCaptureHUDSightsSliderProps) { const style = usePhotoCaptureHUDPreview(); diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/hook.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/hook.ts similarity index 100% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/hook.ts rename to packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/hook.ts diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/index.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/index.ts similarity index 100% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreview/index.ts rename to packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/index.ts diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/index.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/index.ts index 757a97861..5c8c30d2c 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/index.ts +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/index.ts @@ -1,3 +1,4 @@ export * from './PhotoCaptureHUDButtons'; // TODO : Remove this export later -export * from './PhotoCaptureHUDPreview'; // TODO : Remove this export later +export * from './PhotoCaptureHUDPreviewAddDamage'; // TODO : Remove this export later +export * from './PhotoCaptureHUDPreviewSight'; // TODO : Remove this export later export { PhotoCaptureHUD } from './PhotoCaptureHUD'; diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsCounter.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsCounter.test.tsx index a3c426189..9dd0f411c 100644 --- a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsCounter.test.tsx +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsCounter.test.tsx @@ -1,5 +1,5 @@ import { render } from '@testing-library/react'; -import { PhotoCaptureHUDCounter } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsCounter'; +import { PhotoCaptureHUDCounter } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsCounter'; describe('PhotoCaptureHUDSightsCounter component', () => { it('render counter with no props', () => { diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsOverlay.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsOverlay.test.tsx index 6e3e83461..bbf243920 100644 --- a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsOverlay.test.tsx +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsOverlay.test.tsx @@ -1,19 +1,13 @@ jest.mock('@monkvision/common-ui-web'); -import { PhotoCaptureHUDSightsOverlay } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsOverlay'; -import { render, screen } from '@testing-library/react'; +import { PhotoCaptureHUDSightsOverlay } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsOverlay'; +import { render } from '@testing-library/react'; import { SightOverlay } from '@monkvision/common-ui-web'; import { sights } from '@monkvision/sights/lib/data'; const sightArray = Object.values(sights).map((sight) => sight); describe('PhotoCaptureHUDSightsOverlay component', () => { - // it('does not render Sights Overlay when sight is not provided', () => { - // const sightOverlayMock = SightOverlay as unknown as jest.Mock; - // const { unmount } = render(); - // unmount(); - // }); - it('renders Sights Overlay when sight is provided', () => { const { unmount } = render(); expect(SightOverlay).toHaveBeenCalled(); diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsSlider.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsSlider.test.tsx index f4dec751d..eb2c56556 100644 --- a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsSlider.test.tsx +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsSlider.test.tsx @@ -1,17 +1,15 @@ -jest.mock('i18next'); jest.mock('react-i18next'); jest.mock('@monkvision/common-ui-web'); jest.mock('@monkvision/common'); -import { expectPropsOnChildMock } from '@monkvision/test-utils'; -import { screen, render } from '@testing-library/react'; +import { render } from '@testing-library/react'; import { Button } from '@monkvision/common-ui-web'; import { sights } from '@monkvision/sights/'; -import { PhotoCaptureHUDSightsSlider } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDSightsSlider'; +import { PhotoCaptureHUDSightsSlider } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider'; const sightArray = Object.values(sights) .map((sight) => sight) - .slice(0, 6); + .slice(0, 19); describe('PhotoCaptureHUDSightsSlider component', () => { afterEach(() => { @@ -32,20 +30,6 @@ describe('PhotoCaptureHUDSightsSlider component', () => { unmount(); }); - it('should get passed the onSightSelected callback', () => { - const onSightSelected = jest.fn(); - const buttonMock = Button as unknown as jest.Mock; - const { unmount } = render( - , - ); - expectPropsOnChildMock(buttonMock, { onClick: () => onSightSelected }); - unmount(); - }); - it('should call tObj function for every button', () => { const onSightSelected = jest.fn(); const { unmount } = render( From 5b81177999c7fa6ef7666a0a313e748438dbbfb4 Mon Sep 17 00:00:00 2001 From: David_LY Date: Wed, 20 Dec 2023 16:34:21 +0100 Subject: [PATCH 13/33] TSDoc added to i18n language types --- .../test/PhotoCaptureHUD/PhotoCaptureHUDPreview.test.tsx | 2 ++ .../PhotoCaptureHUD/PhotoCaptureHUDSightsSlider.test.tsx | 1 + packages/public/types/src/i18n.ts | 9 +++++++++ 3 files changed, 12 insertions(+) diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDPreview.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDPreview.test.tsx index d1321c6b9..91e078a64 100644 --- a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDPreview.test.tsx +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDPreview.test.tsx @@ -1,3 +1,5 @@ +jest.mock('@monkvision/sights'); + import { render } from '@testing-library/react'; import { PhotoCaptureHUDPreview } from '../../src'; diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsSlider.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsSlider.test.tsx index eb2c56556..33986cf0b 100644 --- a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsSlider.test.tsx +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsSlider.test.tsx @@ -1,6 +1,7 @@ jest.mock('react-i18next'); jest.mock('@monkvision/common-ui-web'); jest.mock('@monkvision/common'); +jest.mock('@monkvision/sights'); import { render } from '@testing-library/react'; import { Button } from '@monkvision/common-ui-web'; diff --git a/packages/public/types/src/i18n.ts b/packages/public/types/src/i18n.ts index c80a4bd38..7da3e119d 100644 --- a/packages/public/types/src/i18n.ts +++ b/packages/public/types/src/i18n.ts @@ -1,5 +1,14 @@ +/** + * An array containing Monk available languages. + */ export const monkLanguages = ['fr', 'en', 'de'] as const; +/** + * Represents a Monk language type, which is one of the available Monk languages. + */ export type MonkLanguage = (typeof monkLanguages)[number]; +/** + * Represents a translation object where each language is associated to a string. + */ export type TranslationObject = Record; From f8c6a4084db2b7d6a1b5292ba14a14a3d16212f8 Mon Sep 17 00:00:00 2001 From: David_LY Date: Wed, 20 Dec 2023 19:25:20 +0100 Subject: [PATCH 14/33] fix on tests and import --- .../PhotoCaptureHUDSightsCounter.tsx | 5 ++- .../PhotoCaptureHUDSightsSlider.tsx | 2 +- .../PhotoCaptureHUDPreview.test.tsx | 1 + .../PhotoCaptureHUDSightsCounter.test.tsx | 21 +++++++++-- .../PhotoCaptureHUDSightsOverlay.test.tsx | 17 +++++---- .../PhotoCaptureHUDSightsSlider.test.tsx | 36 +++++++++---------- 6 files changed, 53 insertions(+), 29 deletions(-) diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsCounter.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsCounter.tsx index 7cb2954b7..3218c647d 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsCounter.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsCounter.tsx @@ -5,7 +5,10 @@ export interface PhotoCaptureHUDCounterProps { sightsTaken?: number; } -export function PhotoCaptureHUDCounter({ totalSights, sightsTaken }: PhotoCaptureHUDCounterProps) { +export function PhotoCaptureHUDCounter({ + totalSights = 0, + sightsTaken = 0, +}: PhotoCaptureHUDCounterProps) { const style = usePhotoCaptureHUDPreview(); return ( diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider.tsx index e654180c4..00c5cfba0 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider.tsx @@ -1,7 +1,7 @@ import { Button } from '@monkvision/common-ui-web'; import { Sight } from '@monkvision/types'; import { useObjectTranslation } from '@monkvision/common'; -import { labels } from '@monkvision/sights/'; +import { labels } from '@monkvision/sights'; import { usePhotoCaptureHUDPreview } from '../hook'; export interface PhotoCaptureHUDSightsSliderProps { diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDPreview.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDPreview.test.tsx index 91e078a64..c18878739 100644 --- a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDPreview.test.tsx +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDPreview.test.tsx @@ -5,6 +5,7 @@ import { PhotoCaptureHUDPreview } from '../../src'; describe('PhotoCaptureHUDPreview component', () => { it('render HUDPreview with no props', () => { + // TODO: how can I test this? const { unmount } = render(); unmount(); }); diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsCounter.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsCounter.test.tsx index 9dd0f411c..0dec65d7d 100644 --- a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsCounter.test.tsx +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsCounter.test.tsx @@ -2,13 +2,30 @@ import { render } from '@testing-library/react'; import { PhotoCaptureHUDCounter } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsCounter'; describe('PhotoCaptureHUDSightsCounter component', () => { - it('render counter with no props', () => { + it('should render a error message when sightsTaken and totalSights is not provided', () => { const { getByText, unmount } = render(); const expectedText = 'error-no-sight'; + expect(typeof getByText(expectedText).textContent).toEqual('string'); + unmount(); + }); + + it('should render a error message when only totalSights is provided', () => { + const totalSights = 10; + const { getByText, unmount } = render(); + const expectedText = `0 / ${totalSights}`; expect(getByText(expectedText).textContent).toEqual(expectedText); unmount(); }); - it('render counter with props', () => { + + it('should render a error message when only sightsTaken is provided', () => { + const sightsTaken = 5; + const { getByText, unmount } = render(); + const expectedText = 'error-no-sight'; + expect(getByText(expectedText).textContent).toEqual(expectedText); + unmount(); + }); + + it('render counter properly when sightsTaken and totalSights is provided', () => { const totalSights = 10; const sightsTaken = 5; diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsOverlay.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsOverlay.test.tsx index bbf243920..0a85fcbb3 100644 --- a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsOverlay.test.tsx +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsOverlay.test.tsx @@ -1,15 +1,20 @@ jest.mock('@monkvision/common-ui-web'); +jest.mock('@monkvision/sights', () => ({ sights: { sight1: {}, sight2: {} } })); -import { PhotoCaptureHUDSightsOverlay } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsOverlay'; import { render } from '@testing-library/react'; import { SightOverlay } from '@monkvision/common-ui-web'; -import { sights } from '@monkvision/sights/lib/data'; - -const sightArray = Object.values(sights).map((sight) => sight); +import { sights } from '@monkvision/sights'; +import { PhotoCaptureHUDSightsOverlay } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsOverlay'; describe('PhotoCaptureHUDSightsOverlay component', () => { - it('renders Sights Overlay when sight is provided', () => { - const { unmount } = render(); + it('should render not Sights Overlay when sight is not provided', () => { + const { unmount } = render(); + expect(SightOverlay).toHaveBeenCalledTimes(0); + unmount(); + }); + + it('should render Sights Overlay when sight is provided', () => { + const { unmount } = render(); expect(SightOverlay).toHaveBeenCalled(); unmount(); }); diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsSlider.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsSlider.test.tsx index 33986cf0b..a37804a91 100644 --- a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsSlider.test.tsx +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsSlider.test.tsx @@ -3,20 +3,15 @@ jest.mock('@monkvision/common-ui-web'); jest.mock('@monkvision/common'); jest.mock('@monkvision/sights'); +// import { expectPropsOnChildMock } from '@monkvision/test-utils'; import { render } from '@testing-library/react'; +import { sights } from '@monkvision/sights'; import { Button } from '@monkvision/common-ui-web'; -import { sights } from '@monkvision/sights/'; import { PhotoCaptureHUDSightsSlider } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider'; -const sightArray = Object.values(sights) - .map((sight) => sight) - .slice(0, 19); +const sightArray = Object.values(sights); describe('PhotoCaptureHUDSightsSlider component', () => { - afterEach(() => { - jest.clearAllMocks(); - }); - // const button = Button as unknown as jest.Mock; it('should not render any buttons when sights is not provided', () => { const { unmount } = render(); @@ -31,15 +26,18 @@ describe('PhotoCaptureHUDSightsSlider component', () => { unmount(); }); - it('should call tObj function for every button', () => { - const onSightSelected = jest.fn(); - const { unmount } = render( - , - ); - unmount(); - }); + // it('should call tObj function for every button', () => { + // const buttonMock = Button as unknown as jest.Mock; + // const onSightSelected = jest.fn(); + // const { unmount } = render( + // , + // ); + // expectPropsOnChildMock(buttonMock, { onClick: expect.any(Function) }); + // + // unmount(); + // }); }); From 6074784a88feb20adc465620262eb9a885f9c4f8 Mon Sep 17 00:00:00 2001 From: David_LY Date: Thu, 21 Dec 2023 16:05:27 +0100 Subject: [PATCH 15/33] useSightLabel's hook moved to @monkvision/common + SightSlider component styles sight.id: string instead of sight:Sight --- .../src/__mocks__/@monkvision/common.tsx | 1 + packages/public/common/src/hooks/index.ts | 1 + .../public/common/src/hooks/useSightLabel.ts | 20 ++++++++ .../test/hooks/useObjectTranslation.test.ts | 2 +- .../common/test/hooks/useSightLabel.test.ts | 41 ++++++++++++++++ .../PhotoCaptureHUDPreview.tsx | 2 +- .../PhotoCaptureHUDSightsSlider.tsx | 23 ++------- .../PhotoCaptureHUDSightsSlider.test.tsx | 48 +++++++++++-------- 8 files changed, 98 insertions(+), 40 deletions(-) create mode 100644 packages/public/common/src/hooks/useSightLabel.ts create mode 100644 packages/public/common/test/hooks/useSightLabel.test.ts diff --git a/packages/private/test-utils/src/__mocks__/@monkvision/common.tsx b/packages/private/test-utils/src/__mocks__/@monkvision/common.tsx index bd34abebd..cb8260fa2 100644 --- a/packages/private/test-utils/src/__mocks__/@monkvision/common.tsx +++ b/packages/private/test-utils/src/__mocks__/@monkvision/common.tsx @@ -72,4 +72,5 @@ export = { useResponsiveStyle: jest.fn(() => ({ responsive: jest.fn(() => null) })), useWindowDimensions: jest.fn(() => ({ width: 0, height: 0, isPortrait: false })), useObjectTranslation: jest.fn(() => ({ tObj: jest.fn(() => {}) })), + useSightLabel: jest.fn(() => ({ label: jest.fn() })), }; diff --git a/packages/public/common/src/hooks/index.ts b/packages/public/common/src/hooks/index.ts index bdc4f78eb..594b0613b 100644 --- a/packages/public/common/src/hooks/index.ts +++ b/packages/public/common/src/hooks/index.ts @@ -3,3 +3,4 @@ export * from './useResponsiveStyle'; export * from './useInteractiveStatus'; export * from './useQueue'; export * from './useObjectTranslation'; +export * from './useSightLabel'; diff --git a/packages/public/common/src/hooks/useSightLabel.ts b/packages/public/common/src/hooks/useSightLabel.ts new file mode 100644 index 000000000..31359fe35 --- /dev/null +++ b/packages/public/common/src/hooks/useSightLabel.ts @@ -0,0 +1,20 @@ +import { LabelDictionary, Sight } from '@monkvision/types'; +import { useObjectTranslation } from './useObjectTranslation'; + +export interface UseSightLabelResult { + label: (sight: Sight) => string; +} + +export interface UseSightLabelParams { + labels: LabelDictionary; +} + +export function useSightLabel({ labels }: UseSightLabelParams): UseSightLabelResult { + const { tObj } = useObjectTranslation(); + return { + label: (sight) => { + const translationObject = labels[sight.label]; + return translationObject ? tObj(translationObject) : `translation-not-found[${sight.label}]`; + }, + }; +} diff --git a/packages/public/common/test/hooks/useObjectTranslation.test.ts b/packages/public/common/test/hooks/useObjectTranslation.test.ts index 549d7aad2..58364e191 100644 --- a/packages/public/common/test/hooks/useObjectTranslation.test.ts +++ b/packages/public/common/test/hooks/useObjectTranslation.test.ts @@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next'; import { renderHook } from '@testing-library/react-hooks'; import { useObjectTranslation } from '../../src'; -const obj: TranslationObject = { en: 'Hello', fr: 'Bonjour', de: 'Hallo' }; +const obj = { en: 'Hello', fr: 'Bonjour', de: 'Hallo' } as TranslationObject; describe('useObjectTranslation hook', () => { it('should return a tObj function', () => { diff --git a/packages/public/common/test/hooks/useSightLabel.test.ts b/packages/public/common/test/hooks/useSightLabel.test.ts new file mode 100644 index 000000000..40d1e6822 --- /dev/null +++ b/packages/public/common/test/hooks/useSightLabel.test.ts @@ -0,0 +1,41 @@ +jest.mock('@monkvision/common'); +jest.mock('react-i18next'); + +import { renderHook } from '@testing-library/react-hooks'; +import { LabelDictionary, Sight, TranslationObject } from '@monkvision/types'; +import { useObjectTranslation, useSightLabel } from '../../src'; + +const labels = { + 'rear-back': { key: 'rear-back', en: 'english translation' }, +} as unknown as LabelDictionary; + +describe('useSightLabel hook', () => { + it('should return a label function', () => { + const { result, unmount } = renderHook(() => useSightLabel({ labels })); + + expect(typeof result.current.label).toBe('function'); + unmount(); + }); + + it('should properly translate Sight', () => { + const { result, unmount } = renderHook(() => useSightLabel({ labels })); + + const sight = { id: 'id', label: 'rear-back' } as unknown as Sight; + const { tObj } = useObjectTranslation(); + const myValue = { en: 'english translation', fr: 'fr', de: 'de' } as TranslationObject; + + expect(result.current.label(sight)).toBe(tObj(myValue)); + + unmount(); + }); + + it('should return a default value when the translation is not found', () => { + const { result, unmount } = renderHook(() => useSightLabel({ labels })); + + const sight = {} as unknown as Sight; + + expect(typeof result.current.label(sight)).toBe('string'); + + unmount(); + }); +}); diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.tsx index cc1af141b..fe4ce244e 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.tsx @@ -33,7 +33,7 @@ export function PhotoCaptureHUDPreview({
diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider.tsx index 00c5cfba0..5e02d1384 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider.tsx @@ -1,45 +1,30 @@ import { Button } from '@monkvision/common-ui-web'; import { Sight } from '@monkvision/types'; -import { useObjectTranslation } from '@monkvision/common'; +import { useSightLabel } from '@monkvision/common'; import { labels } from '@monkvision/sights'; import { usePhotoCaptureHUDPreview } from '../hook'; export interface PhotoCaptureHUDSightsSliderProps { sights?: Sight[]; - currentSight?: Sight; + currentSight?: string; onSightSelected?: (sight: Sight) => void; } -export interface UseSightLabelResult { - label: (sight: Sight) => string; -} - export function PhotoCaptureHUDSightsSlider({ sights, currentSight, onSightSelected = () => {}, }: PhotoCaptureHUDSightsSliderProps) { + const { label } = useSightLabel({ labels }); const style = usePhotoCaptureHUDPreview(); - function useSightLabel(): UseSightLabelResult { - const { tObj } = useObjectTranslation(); - return { - label: (sight) => { - const translationObject = labels[sight.label]; - return translationObject - ? tObj(translationObject) - : `translation-not-found[${sight.label}]`; - }, - }; - } - const { label } = useSightLabel(); return (
{sights?.map((sight, index) => (
- Date: Fri, 22 Dec 2023 12:28:03 +0100 Subject: [PATCH 18/33] sight centered in slider when selected --- .../components/PhotoCaptureHUDSightsSlider.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider.tsx index 5e02d1384..58db5e6ce 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider.tsx @@ -2,6 +2,7 @@ import { Button } from '@monkvision/common-ui-web'; import { Sight } from '@monkvision/types'; import { useSightLabel } from '@monkvision/common'; import { labels } from '@monkvision/sights'; +import { useRef } from 'react'; import { usePhotoCaptureHUDPreview } from '../hook'; export interface PhotoCaptureHUDSightsSliderProps { @@ -15,17 +16,26 @@ export function PhotoCaptureHUDSightsSlider({ currentSight, onSightSelected = () => {}, }: PhotoCaptureHUDSightsSliderProps) { + const ref = useRef(null); const { label } = useSightLabel({ labels }); const style = usePhotoCaptureHUDPreview(); + const onScrollToSelected = (index: number): void => { + if (ref.current && ref.current.children.length > index) + ref.current.children[index].scrollIntoView({ behavior: 'smooth', inline: 'center' }); + }; + return ( -
+
{sights?.map((sight, index) => (
diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider.tsx index 58db5e6ce..786fbc044 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider.tsx @@ -1,4 +1,4 @@ -import { Button } from '@monkvision/common-ui-web'; +import { Button, IconName } from '@monkvision/common-ui-web'; import { Sight } from '@monkvision/types'; import { useSightLabel } from '@monkvision/common'; import { labels } from '@monkvision/sights'; @@ -8,12 +8,14 @@ import { usePhotoCaptureHUDPreview } from '../hook'; export interface PhotoCaptureHUDSightsSliderProps { sights?: Sight[]; currentSight?: string; + sightsTaken?: Sight[]; onSightSelected?: (sight: Sight) => void; } export function PhotoCaptureHUDSightsSlider({ sights, currentSight, + sightsTaken, onSightSelected = () => {}, }: PhotoCaptureHUDSightsSliderProps) { const ref = useRef(null); @@ -27,20 +29,30 @@ export function PhotoCaptureHUDSightsSlider({ return (
- {sights?.map((sight, index) => ( - - ))} + {sights?.map((sight, index) => { + let primaryColor = 'secondary-xdark'; + let icon = '' as IconName; + if (sight.id === currentSight) primaryColor = 'primary-base'; + if (sightsTaken?.some((sightTaken) => sightTaken.id === sight.id)) { + primaryColor = 'primary-light'; + icon = 'check'; + } + return ( + + ); + })}
); } diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/hook.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/hook.ts index 770ff1b12..f1fd020d3 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/hook.ts +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/hook.ts @@ -8,6 +8,7 @@ export interface PhotoCaptureHUDPreview { slider: CSSProperties; labelButton: CSSProperties; sightOverlay: CSSProperties; + addDamageButton: CSSProperties; } export function usePhotoCaptureHUDPreview(): PhotoCaptureHUDPreview { @@ -30,5 +31,8 @@ export function usePhotoCaptureHUDPreview(): PhotoCaptureHUDPreview { sightOverlay: { ...styles['sightOverlay'], }, + addDamageButton: { + ...styles['addDamageButton'], + }, }; } From 7c3f7ca5e58cbffd5c7b164269fb6b3845b3619a Mon Sep 17 00:00:00 2001 From: David_LY Date: Fri, 22 Dec 2023 20:12:18 +0100 Subject: [PATCH 21/33] TSDoc useSightLabel --- packages/public/common/src/hooks/useSightLabel.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/public/common/src/hooks/useSightLabel.ts b/packages/public/common/src/hooks/useSightLabel.ts index 31359fe35..b00dfa099 100644 --- a/packages/public/common/src/hooks/useSightLabel.ts +++ b/packages/public/common/src/hooks/useSightLabel.ts @@ -1,14 +1,25 @@ import { LabelDictionary, Sight } from '@monkvision/types'; import { useObjectTranslation } from './useObjectTranslation'; +/** + * The result of the useSightLabel. It contains a function which takes a Sight object and return the + * translated label sync with the actual selected language. + */ export interface UseSightLabelResult { label: (sight: Sight) => string; } export interface UseSightLabelParams { + /** + * Function translating a Sight object into a translated label sync with the actual selected language. + * @param obj + */ labels: LabelDictionary; } +/** + * Custom hook used to get the label with the actual selected language. + */ export function useSightLabel({ labels }: UseSightLabelParams): UseSightLabelResult { const { tObj } = useObjectTranslation(); return { From 603f619ab998566dda450075c947a704d2c725ac Mon Sep 17 00:00:00 2001 From: David_LY Date: Fri, 22 Dec 2023 21:00:36 +0100 Subject: [PATCH 22/33] keep sight button selected in the center when switching back to main preview --- .../src/PhotoCaptureHUD/PhotoCaptureHUD.tsx | 20 +++- .../PhotoCaptureHUDPreviewAddDamage.tsx | 4 +- .../PhotoCaptureHUDPreview.tsx | 74 ++++++++------- .../PhotoCaptureHUDSightsSlider.tsx | 92 ++++++++++--------- 4 files changed, 111 insertions(+), 79 deletions(-) diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx index 10e2ae356..566504096 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { Sight } from '@monkvision/types'; import { PhotoCaptureHUDButtons } from './PhotoCaptureHUDButtons'; import { PhotoCaptureHUDPreviewAddDamage } from './PhotoCaptureHUDPreviewAddDamage'; @@ -11,8 +11,10 @@ export interface PhotoCaptureHUDProps { export function PhotoCaptureHUD({ sights }: PhotoCaptureHUDProps) { const [currentSight, setCurrentSight] = useState(sights?.[0]); + const [currentSightSliderIndex, setCurrentSightSliderIndex] = useState(0); const [isOnAddDamage, setIsOnAddDamage] = useState(false); const [sightsTaken, setSightsTaken] = useState([]); + const ref = useRef(null); const handleOnSightSelected = (sight: Sight): void => { setCurrentSight(sight); @@ -22,6 +24,20 @@ export function PhotoCaptureHUD({ sights }: PhotoCaptureHUDProps) { setIsOnAddDamage(state); }; + const onScrollToSelected = (index: number, smooth: boolean): void => { + if (ref.current && ref.current.children.length > index) { + ref.current.children[index].scrollIntoView({ + behavior: smooth ? 'smooth' : ('instant' as ScrollBehavior), + inline: 'center', + }); + setCurrentSightSliderIndex(index); + } + }; + + useEffect(() => { + onScrollToSelected(currentSightSliderIndex, false); + }, [isOnAddDamage]); + const style = usePhotoCaptureHUD(); return (
@@ -32,6 +48,8 @@ export function PhotoCaptureHUD({ sights }: PhotoCaptureHUDProps) { onSightSelected={handleOnSightSelected} sightsTaken={sightsTaken} onAddDamage={handleOnAddDamage} + onScrollToSelected={onScrollToSelected} + ref={ref} /> ) : ( diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage/PhotoCaptureHUDPreviewAddDamage.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage/PhotoCaptureHUDPreviewAddDamage.tsx index da3d89d30..a6cfc7f48 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage/PhotoCaptureHUDPreviewAddDamage.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage/PhotoCaptureHUDPreviewAddDamage.tsx @@ -2,11 +2,11 @@ import { Button } from '@monkvision/common-ui-web'; import { usePhotoCaptureHUDPreview } from '../PhotoCaptureHUDPreviewSight/hook'; export interface PhotoCaptureHUDAddDamageMenuProps { - onAddDamage: (state: boolean) => void; + onAddDamage?: (state: boolean) => void; } export function PhotoCaptureHUDPreviewAddDamage({ - onAddDamage, + onAddDamage = () => {}, }: PhotoCaptureHUDAddDamageMenuProps) { const style = usePhotoCaptureHUDPreview(); return ( diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.tsx index eff0eed76..5aaf839b2 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.tsx @@ -1,6 +1,7 @@ import { Sight } from '@monkvision/types'; import { Button } from '@monkvision/common-ui-web'; -import { PhotoCaptureHUDPreview, usePhotoCaptureHUDPreview } from './hook'; +import { forwardRef } from 'react'; +import { usePhotoCaptureHUDPreview } from './hook'; import { PhotoCaptureHUDSightsSlider } from './components/PhotoCaptureHUDSightsSlider'; import { PhotoCaptureHUDCounter } from './components/PhotoCaptureHUDSightsCounter'; import { PhotoCaptureHUDSightsOverlay } from './components/PhotoCaptureHUDSightsOverlay'; @@ -11,38 +12,47 @@ export interface PhotoCaptureHUDPreviewProps { onSightSelected?: (sight: Sight) => void; onAddDamage?: (state: boolean) => void; sightsTaken?: Sight[]; + onScrollToSelected?: (index: number, smooth: boolean) => void; } -export function PhotoCaptureHUDPreview({ - sights, - currentSight, - onSightSelected, - onAddDamage, - sightsTaken, -}: PhotoCaptureHUDPreviewProps) { - const style = usePhotoCaptureHUDPreview(); +export const PhotoCaptureHUDPreview = forwardRef( + ( + { + sights, + currentSight, + onSightSelected, + onAddDamage, + sightsTaken, + onScrollToSelected = () => {}, + }, + ref, + ) => { + const style = usePhotoCaptureHUDPreview(); - return ( -
- -
- - + return ( +
+ +
+ + +
+
- -
- ); -} + ); + }, +); diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider.tsx index 786fbc044..38565afd7 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider.tsx @@ -2,7 +2,7 @@ import { Button, IconName } from '@monkvision/common-ui-web'; import { Sight } from '@monkvision/types'; import { useSightLabel } from '@monkvision/common'; import { labels } from '@monkvision/sights'; -import { useRef } from 'react'; +import { forwardRef } from 'react'; import { usePhotoCaptureHUDPreview } from '../hook'; export interface PhotoCaptureHUDSightsSliderProps { @@ -10,49 +10,53 @@ export interface PhotoCaptureHUDSightsSliderProps { currentSight?: string; sightsTaken?: Sight[]; onSightSelected?: (sight: Sight) => void; + onScrollToSelected?: (index: number, smooth: boolean) => void; } -export function PhotoCaptureHUDSightsSlider({ - sights, - currentSight, - sightsTaken, - onSightSelected = () => {}, -}: PhotoCaptureHUDSightsSliderProps) { - const ref = useRef(null); - const { label } = useSightLabel({ labels }); - const style = usePhotoCaptureHUDPreview(); +export const PhotoCaptureHUDSightsSlider = forwardRef< + HTMLDivElement, + PhotoCaptureHUDSightsSliderProps +>( + ( + { + sights, + currentSight, + sightsTaken, + onSightSelected = () => {}, + onScrollToSelected = () => {}, + }, + ref, + ) => { + const { label } = useSightLabel({ labels }); + const style = usePhotoCaptureHUDPreview(); - const onScrollToSelected = (index: number): void => { - if (ref.current && ref.current.children.length > index) - ref.current.children[index].scrollIntoView({ behavior: 'smooth', inline: 'center' }); - }; - - return ( -
- {sights?.map((sight, index) => { - let primaryColor = 'secondary-xdark'; - let icon = '' as IconName; - if (sight.id === currentSight) primaryColor = 'primary-base'; - if (sightsTaken?.some((sightTaken) => sightTaken.id === sight.id)) { - primaryColor = 'primary-light'; - icon = 'check'; - } - return ( - - ); - })} -
- ); -} + return ( +
+ {sights?.map((sight, index) => { + let primaryColor = 'secondary-xdark'; + let icon = '' as IconName; + if (sight.id === currentSight) primaryColor = 'primary-base'; + if (sightsTaken?.some((sightTaken) => sightTaken.id === sight.id)) { + primaryColor = 'primary-light'; + icon = 'check'; + } + return ( + + ); + })} +
+ ); + }, +); From e6ee87e1be098289888f4db4c6f2a8bf72b08b92 Mon Sep 17 00:00:00 2001 From: David_LY Date: Tue, 26 Dec 2023 13:10:08 +0100 Subject: [PATCH 23/33] TSDoc useObjectTranslation & useSightLabel hooks --- .../common/src/hooks/useObjectTranslation.ts | 3 +- .../public/common/src/hooks/useSightLabel.ts | 8 ++- .../PhotoCaptureHUDSightCounter.styles.ts | 13 ++++ .../PhotoCaptureHUDSightCounter.tsx} | 6 +- .../PhotoCaptureHUDSightCounter/index.ts | 1 + .../PhotoCaptureHUDSightOverlay.styles.ts | 62 +++++++++++++++++++ .../PhotoCaptureHUDSightOverlay.tsx} | 6 +- .../PhotoCaptureHUDSightOverlay/index.ts | 0 .../PhotoCaptureHUDSightSlider.styles.ts | 62 +++++++++++++++++++ .../PhotoCaptureHUDSightSlider.tsx} | 0 .../PhotoCaptureHUDSightSlider/index.ts | 0 11 files changed, 150 insertions(+), 11 deletions(-) create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.styles.ts rename packages/public/inspection-capture-web/src/PhotoCaptureHUD/{PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsCounter.tsx => PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.tsx} (72%) create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightCounter/index.ts create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.styles.ts rename packages/public/inspection-capture-web/src/PhotoCaptureHUD/{PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsOverlay.tsx => PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.tsx} (64%) create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightOverlay/index.ts create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.styles.ts rename packages/public/inspection-capture-web/src/PhotoCaptureHUD/{PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider.tsx => PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.tsx} (100%) create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightSlider/index.ts diff --git a/packages/public/common/src/hooks/useObjectTranslation.ts b/packages/public/common/src/hooks/useObjectTranslation.ts index b5d682262..1fd1e7e78 100644 --- a/packages/public/common/src/hooks/useObjectTranslation.ts +++ b/packages/public/common/src/hooks/useObjectTranslation.ts @@ -8,13 +8,12 @@ import { useTranslation } from 'react-i18next'; export interface UseObjectTranslationResult { /** * Function translating a LabelTranslation object into a translated label sync with the actual selected language. - * @param obj */ tObj: (obj: TranslationObject) => string; } /** - * Custom hook used to get the label with the actual selected language. + * Custom hook used to get a translate function tObj that translates TranslationObjects. */ export function useObjectTranslation(): UseObjectTranslationResult { const { i18n } = useTranslation(); diff --git a/packages/public/common/src/hooks/useSightLabel.ts b/packages/public/common/src/hooks/useSightLabel.ts index b00dfa099..6a9da9da4 100644 --- a/packages/public/common/src/hooks/useSightLabel.ts +++ b/packages/public/common/src/hooks/useSightLabel.ts @@ -9,16 +9,18 @@ export interface UseSightLabelResult { label: (sight: Sight) => string; } +/** + * Parameters given to the useSightLabel hook. + */ export interface UseSightLabelParams { /** - * Function translating a Sight object into a translated label sync with the actual selected language. - * @param obj + * A dictionary of label translations objects. */ labels: LabelDictionary; } /** - * Custom hook used to get the label with the actual selected language. + * Custom hook used to get the label of a sight with the actual selected language. */ export function useSightLabel({ labels }: UseSightLabelParams): UseSightLabelResult { const { tObj } = useObjectTranslation(); diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.styles.ts new file mode 100644 index 000000000..0d4db74a0 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.styles.ts @@ -0,0 +1,13 @@ +import { Styles } from '@monkvision/types'; + +export const styles: Styles = { + counter: { + display: 'flex', + color: 'white', + alignItems: 'center', + justifyContent: 'center', + padding: '6px 12px', + borderRadius: '8px', + backgroundColor: 'rgba(28, 28, 30, 0.64)', + zIndex: '9', +}; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsCounter.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.tsx similarity index 72% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsCounter.tsx rename to packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.tsx index 3218c647d..3e9201f45 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsCounter.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.tsx @@ -1,8 +1,8 @@ import { usePhotoCaptureHUDPreview } from '../hook'; export interface PhotoCaptureHUDCounterProps { - totalSights?: number; - sightsTaken?: number; + totalSights: number; + sightsTaken: number; } export function PhotoCaptureHUDCounter({ @@ -13,7 +13,7 @@ export function PhotoCaptureHUDCounter({ return (
- {totalSights ? `${sightsTaken} / ${totalSights}` : 'error-no-sight'} + {`${sightsTaken} / ${totalSights}`}
); } diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightCounter/index.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightCounter/index.ts new file mode 100644 index 000000000..9152bc238 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightCounter/index.ts @@ -0,0 +1 @@ +export { PhotoCaptureHUDPreview } from './PhotoCaptureHUDPreview'; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.styles.ts new file mode 100644 index 000000000..a1c5bdfb1 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.styles.ts @@ -0,0 +1,62 @@ +import { Styles } from '@monkvision/types'; + +export const styles: Styles = { + container: { + position: 'relative', + display: 'flex', + alignSelf: 'stretch', + justifyContent: 'center', + flexDirection: 'column', + backgroundColor: 'green', + flex: '1', + }, + top: { + position: 'absolute', + display: 'flex', + alignSelf: 'stretch', + flexDirection: 'row', + justifyContent: 'space-between', + margin: '10px', + zIndex: '9', + top: '0', + right: '0', + left: '0', + }, + counter: { + display: 'flex', + color: 'white', + alignItems: 'center', + justifyContent: 'center', + padding: '6px 12px', + borderRadius: '8px', + backgroundColor: 'rgba(28, 28, 30, 0.64)', + zIndex: '9', + }, + slider: { + position: 'absolute', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + paddingLeft: '45%', + paddingBottom: '0%', + overflowX: 'auto', + overflowY: 'hidden', + whiteSpace: 'nowrap', + scrollbarWidth: 'none', + maxWidth: '60vw', + zIndex: '9', + bottom: '0', + right: '0', + left: '0', + }, + labelButton: { + margin: '10px', + zIndex: '9', + }, + sightOverlay: { + zIndex: '9', + }, + addDamageButton: { + backgroundColor: 'rgba(52, 53, 63, 0.64)', + }, +}; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsOverlay.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.tsx similarity index 64% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsOverlay.tsx rename to packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.tsx index ce98857fe..7e904b982 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsOverlay.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.tsx @@ -1,12 +1,12 @@ import { Sight } from '@monkvision/types'; import { SightOverlay } from '@monkvision/common-ui-web'; -import { usePhotoCaptureHUDPreview } from '../hook'; +import { usePhotoCaptureHUDPreview } from '../PhotoCaptureHUDPreviewSight/hook'; export interface PhotoCaptureHUDSightsOverlayProps { - sight?: Sight; + sight: Sight; } export function PhotoCaptureHUDSightsOverlay({ sight }: PhotoCaptureHUDSightsOverlayProps) { const style = usePhotoCaptureHUDPreview(); - return sight ? : null; + return ; } diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightOverlay/index.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightOverlay/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.styles.ts new file mode 100644 index 000000000..a1c5bdfb1 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.styles.ts @@ -0,0 +1,62 @@ +import { Styles } from '@monkvision/types'; + +export const styles: Styles = { + container: { + position: 'relative', + display: 'flex', + alignSelf: 'stretch', + justifyContent: 'center', + flexDirection: 'column', + backgroundColor: 'green', + flex: '1', + }, + top: { + position: 'absolute', + display: 'flex', + alignSelf: 'stretch', + flexDirection: 'row', + justifyContent: 'space-between', + margin: '10px', + zIndex: '9', + top: '0', + right: '0', + left: '0', + }, + counter: { + display: 'flex', + color: 'white', + alignItems: 'center', + justifyContent: 'center', + padding: '6px 12px', + borderRadius: '8px', + backgroundColor: 'rgba(28, 28, 30, 0.64)', + zIndex: '9', + }, + slider: { + position: 'absolute', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + paddingLeft: '45%', + paddingBottom: '0%', + overflowX: 'auto', + overflowY: 'hidden', + whiteSpace: 'nowrap', + scrollbarWidth: 'none', + maxWidth: '60vw', + zIndex: '9', + bottom: '0', + right: '0', + left: '0', + }, + labelButton: { + margin: '10px', + zIndex: '9', + }, + sightOverlay: { + zIndex: '9', + }, + addDamageButton: { + backgroundColor: 'rgba(52, 53, 63, 0.64)', + }, +}; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.tsx similarity index 100% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider.tsx rename to packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.tsx diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightSlider/index.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightSlider/index.ts new file mode 100644 index 000000000..e69de29bb From 181f6a1702fe86dad3f38656371b0b14a5858411 Mon Sep 17 00:00:00 2001 From: David_LY Date: Tue, 26 Dec 2023 21:31:28 +0100 Subject: [PATCH 24/33] fixing PR review comments --- .../src/PhotoCaptureHUD/PhotoCaptureHUD.tsx | 67 ++++++------- .../PhotoCaptureHUDPreviewAddDamage.tsx | 5 +- .../PhotoCaptureHUDPreview.styles.ts | 34 ------- .../PhotoCaptureHUDPreview.tsx | 96 +++++++++---------- .../PhotoCaptureHUDSightCounter.styles.ts | 1 + .../PhotoCaptureHUDSightCounter.tsx | 13 +++ .../PhotoCaptureHUDSightCounter/index.ts | 1 + .../PhotoCaptureHUDSightOverlay.styles.ts | 7 ++ .../PhotoCaptureHUDSightOverlay.tsx | 11 +++ .../PhotoCaptureHUDSightOverlay/index.ts | 1 + .../PhotoCaptureHUDSightSlider.styles.ts | 25 +++++ .../PhotoCaptureHUDSightSlider.tsx | 96 +++++++++++++++++++ .../PhotoCaptureHUDSightSlider/index.ts | 1 + .../PhotoCaptureHUDSightCounter.tsx | 19 ---- .../PhotoCaptureHUDSightCounter/index.ts | 1 - .../PhotoCaptureHUDSightOverlay.styles.ts | 62 ------------ .../PhotoCaptureHUDSightOverlay.tsx | 12 --- .../PhotoCaptureHUDSightOverlay/index.ts | 0 .../PhotoCaptureHUDSightSlider.styles.ts | 62 ------------ .../PhotoCaptureHUDSightSlider.tsx | 62 ------------ .../PhotoCaptureHUDSightSlider/index.ts | 0 .../src/PhotoCaptureHUD/hook.ts | 27 +++++- .../src/PhotoCaptureHUD/translations/de.json | 3 + .../src/PhotoCaptureHUD/translations/en.json | 3 + .../src/PhotoCaptureHUD/translations/fr.json | 3 + .../PhotoCaptureHUDPreview.test.tsx | 18 +++- .../PhotoCaptureHUDSightsCounter.test.tsx | 27 +----- .../PhotoCaptureHUDSightsOverlay.test.tsx | 10 +- .../PhotoCaptureHUDSightsSlider.test.tsx | 52 +++++++--- 29 files changed, 329 insertions(+), 390 deletions(-) rename packages/public/inspection-capture-web/src/PhotoCaptureHUD/{ => PhotoCaptureHUDPreviewSight}/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.styles.ts (98%) create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.tsx create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightCounter/index.ts create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.styles.ts create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.tsx create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/index.ts create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.styles.ts create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.tsx create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/index.ts delete mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.tsx delete mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightCounter/index.ts delete mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.styles.ts delete mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.tsx delete mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightOverlay/index.ts delete mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.styles.ts delete mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.tsx delete mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightSlider/index.ts create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/de.json create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/en.json create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/fr.json diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx index 566504096..9f1ce8086 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx @@ -1,59 +1,54 @@ -import { useEffect, useRef, useState } from 'react'; +import { useState } from 'react'; import { Sight } from '@monkvision/types'; +import { i18nWrap } from '@monkvision/common'; import { PhotoCaptureHUDButtons } from './PhotoCaptureHUDButtons'; import { PhotoCaptureHUDPreviewAddDamage } from './PhotoCaptureHUDPreviewAddDamage'; import { PhotoCaptureHUDPreview } from './PhotoCaptureHUDPreviewSight'; -import { usePhotoCaptureHUD } from './hook'; +import { HUDMode, i18nAddDamage, usePhotoCaptureHUD } from './hook'; export interface PhotoCaptureHUDProps { - sights?: Sight[]; + sights: Sight[]; } -export function PhotoCaptureHUD({ sights }: PhotoCaptureHUDProps) { - const [currentSight, setCurrentSight] = useState(sights?.[0]); +export const PhotoCaptureHUD = i18nWrap(({ sights }: PhotoCaptureHUDProps) => { + const [currentSight, setCurrentSight] = useState(sights[0]); const [currentSightSliderIndex, setCurrentSightSliderIndex] = useState(0); - const [isOnAddDamage, setIsOnAddDamage] = useState(false); + const [mode, setMode] = useState(HUDMode.DEFAULT); const [sightsTaken, setSightsTaken] = useState([]); - const ref = useRef(null); - const handleOnSightSelected = (sight: Sight): void => { + const handleOnSightSelected = (sight: Sight, index: number): void => { setCurrentSight(sight); + setCurrentSightSliderIndex(index); }; - const handleOnAddDamage = (state: boolean): void => { - setIsOnAddDamage(state); + const handleOnAddDamage = (newMode: HUDMode): void => { + setMode(newMode); }; - const onScrollToSelected = (index: number, smooth: boolean): void => { - if (ref.current && ref.current.children.length > index) { - ref.current.children[index].scrollIntoView({ - behavior: smooth ? 'smooth' : ('instant' as ScrollBehavior), - inline: 'center', - }); - setCurrentSightSliderIndex(index); + const renderSelectedHUDMode = () => { + switch (mode) { + case HUDMode.DEFAULT: + return ( + + ); + case HUDMode.ADD_DAMAGE: + return ; + + default: + return null; } }; - - useEffect(() => { - onScrollToSelected(currentSightSliderIndex, false); - }, [isOnAddDamage]); - const style = usePhotoCaptureHUD(); return (
- {!isOnAddDamage ? ( - - ) : ( - - )} + {renderSelectedHUDMode()} { if (currentSight && !sightsTaken.some((sightTaken) => sightTaken === currentSight)) @@ -62,4 +57,4 @@ export function PhotoCaptureHUD({ sights }: PhotoCaptureHUDProps) { />
); -} +}, i18nAddDamage); diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage/PhotoCaptureHUDPreviewAddDamage.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage/PhotoCaptureHUDPreviewAddDamage.tsx index a6cfc7f48..c134eddcd 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage/PhotoCaptureHUDPreviewAddDamage.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage/PhotoCaptureHUDPreviewAddDamage.tsx @@ -1,8 +1,9 @@ import { Button } from '@monkvision/common-ui-web'; import { usePhotoCaptureHUDPreview } from '../PhotoCaptureHUDPreviewSight/hook'; +import { HUDMode } from '../hook'; export interface PhotoCaptureHUDAddDamageMenuProps { - onAddDamage?: (state: boolean) => void; + onAddDamage?: (newMode: HUDMode) => void; } export function PhotoCaptureHUDPreviewAddDamage({ @@ -11,7 +12,7 @@ export function PhotoCaptureHUDPreviewAddDamage({ const style = usePhotoCaptureHUDPreview(); return (
-
); } diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.styles.ts index a1c5bdfb1..c07ba4a04 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.styles.ts +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.styles.ts @@ -22,40 +22,6 @@ export const styles: Styles = { right: '0', left: '0', }, - counter: { - display: 'flex', - color: 'white', - alignItems: 'center', - justifyContent: 'center', - padding: '6px 12px', - borderRadius: '8px', - backgroundColor: 'rgba(28, 28, 30, 0.64)', - zIndex: '9', - }, - slider: { - position: 'absolute', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - paddingLeft: '45%', - paddingBottom: '0%', - overflowX: 'auto', - overflowY: 'hidden', - whiteSpace: 'nowrap', - scrollbarWidth: 'none', - maxWidth: '60vw', - zIndex: '9', - bottom: '0', - right: '0', - left: '0', - }, - labelButton: { - margin: '10px', - zIndex: '9', - }, - sightOverlay: { - zIndex: '9', - }, addDamageButton: { backgroundColor: 'rgba(52, 53, 63, 0.64)', }, diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.tsx index 5aaf839b2..ac19f8b6a 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.tsx @@ -1,58 +1,52 @@ import { Sight } from '@monkvision/types'; import { Button } from '@monkvision/common-ui-web'; -import { forwardRef } from 'react'; -import { usePhotoCaptureHUDPreview } from './hook'; -import { PhotoCaptureHUDSightsSlider } from './components/PhotoCaptureHUDSightsSlider'; -import { PhotoCaptureHUDCounter } from './components/PhotoCaptureHUDSightsCounter'; -import { PhotoCaptureHUDSightsOverlay } from './components/PhotoCaptureHUDSightsOverlay'; +import { useTranslation } from 'react-i18next'; +import { PhotoCaptureHUDSightSlider } from './PhotoCaptureHUDSightSlider'; +import { PhotoCaptureHUDSightCounter } from './PhotoCaptureHUDSightCounter'; +import { PhotoCaptureHUDSightOverlay } from './PhotoCaptureHUDSightOverlay'; +import { HUDMode } from '../hook'; +import { styles } from './PhotoCaptureHUDPreview.styles'; export interface PhotoCaptureHUDPreviewProps { - sights?: Sight[]; - currentSight?: Sight; - onSightSelected?: (sight: Sight) => void; - onAddDamage?: (state: boolean) => void; - sightsTaken?: Sight[]; - onScrollToSelected?: (index: number, smooth: boolean) => void; + sights: Sight[]; + currentSight: Sight; + onSightSelected?: (sight: Sight, index: number) => void; + onAddDamage?: (newMode: HUDMode) => void; + sightsTaken: Sight[]; + currentSightSliderIndex: number; } -export const PhotoCaptureHUDPreview = forwardRef( - ( - { - sights, - currentSight, - onSightSelected, - onAddDamage, - sightsTaken, - onScrollToSelected = () => {}, - }, - ref, - ) => { - const style = usePhotoCaptureHUDPreview(); - - return ( -
- -
- - -
- +export function PhotoCaptureHUDPreview({ + sights, + currentSight, + onSightSelected = () => {}, + onAddDamage = () => {}, + sightsTaken, + currentSightSliderIndex, +}: PhotoCaptureHUDPreviewProps) { + const { t } = useTranslation(); + return ( +
+ +
+ +
- ); - }, -); + +
+ ); +} diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.styles.ts similarity index 98% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.styles.ts rename to packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.styles.ts index 0d4db74a0..ab72099e3 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.styles.ts +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.styles.ts @@ -10,4 +10,5 @@ export const styles: Styles = { borderRadius: '8px', backgroundColor: 'rgba(28, 28, 30, 0.64)', zIndex: '9', + }, }; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.tsx new file mode 100644 index 000000000..c426f7aca --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.tsx @@ -0,0 +1,13 @@ +import { styles } from './PhotoCaptureHUDSightCounter.styles'; + +export interface PhotoCaptureHUDSightCounterProps { + totalSights: number; + sightsTaken: number; +} + +export function PhotoCaptureHUDSightCounter({ + totalSights, + sightsTaken, +}: PhotoCaptureHUDSightCounterProps) { + return
{`${sightsTaken} / ${totalSights}`}
; +} diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightCounter/index.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightCounter/index.ts new file mode 100644 index 000000000..a128303ad --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightCounter/index.ts @@ -0,0 +1 @@ +export * from './PhotoCaptureHUDSightCounter'; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.styles.ts new file mode 100644 index 000000000..af2f30f2a --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.styles.ts @@ -0,0 +1,7 @@ +import { Styles } from '@monkvision/types'; + +export const styles: Styles = { + sightOverlay: { + zIndex: '9', + }, +}; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.tsx new file mode 100644 index 000000000..70acc1684 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.tsx @@ -0,0 +1,11 @@ +import { Sight } from '@monkvision/types'; +import { SightOverlay } from '@monkvision/common-ui-web'; +import { styles } from './PhotoCaptureHUDSightOverlay.styles'; + +export interface PhotoCaptureHUDSightsOverlayProps { + sight: Sight; +} + +export function PhotoCaptureHUDSightOverlay({ sight }: PhotoCaptureHUDSightsOverlayProps) { + return ; +} diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/index.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/index.ts new file mode 100644 index 000000000..542985ea1 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/index.ts @@ -0,0 +1 @@ +export * from './PhotoCaptureHUDSightOverlay'; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.styles.ts new file mode 100644 index 000000000..548b09026 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.styles.ts @@ -0,0 +1,25 @@ +import { Styles } from '@monkvision/types'; + +export const styles: Styles = { + slider: { + position: 'absolute', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + paddingLeft: '45%', + paddingBottom: '0%', + overflowX: 'auto', + overflowY: 'hidden', + whiteSpace: 'nowrap', + scrollbarWidth: 'none', + maxWidth: '60vw', + zIndex: '9', + bottom: '0', + right: '0', + left: '0', + }, + labelButton: { + margin: '10px', + zIndex: '9', + }, +}; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.tsx new file mode 100644 index 000000000..f459fc0d2 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.tsx @@ -0,0 +1,96 @@ +import { Button, IconName } from '@monkvision/common-ui-web'; +import { Sight } from '@monkvision/types'; +import { useSightLabel } from '@monkvision/common'; +import { labels } from '@monkvision/sights'; +import { useEffect, useRef } from 'react'; +import { styles } from './PhotoCaptureHUDSightSlider.styles'; + +export interface PhotoCaptureHUDSightsSliderProps { + sights: Sight[]; + currentSight: string; + sightsTaken: Sight[]; + onSightSelected?: (sight: Sight, index: number) => void; + currentSightSliderIndex: number; +} + +interface SliderButtonProps { + index: number; + sight: Sight; + currentSight: string; + sightsTaken: Sight[]; + onSightSelected: (sight: Sight, index: number) => void; + label: (sight: Sight) => string; +} + +function SliderButton({ + index, + sight, + currentSight, + sightsTaken, + onSightSelected, + label, +}: SliderButtonProps) { + let primaryColor = 'secondary-xdark'; + let icon = undefined as IconName | undefined; + if (sight.id === currentSight) { + primaryColor = 'primary-base'; + } + if (sightsTaken?.some((sightTaken) => sightTaken.id === sight.id)) { + primaryColor = 'primary-light'; + icon = 'check'; + } + return ( + + ); +} + +export function PhotoCaptureHUDSightSlider({ + sights, + currentSight, + sightsTaken, + onSightSelected = () => {}, + currentSightSliderIndex, +}: PhotoCaptureHUDSightsSliderProps) { + const ref = useRef(null); + const { label } = useSightLabel({ labels }); + + const onScrollToSelected = (index: number, smooth: boolean): void => { + if (ref.current && ref.current.children.length > index) { + ref.current.children[index].scrollIntoView({ + behavior: smooth ? 'smooth' : ('instant' as ScrollBehavior), + inline: 'center', + }); + } + }; + + useEffect(() => { + onScrollToSelected(currentSightSliderIndex, true); + }, [currentSight]); + + return ( +
+ {sights?.map((sight, index) => ( + + ))} +
+ ); +} diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/index.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/index.ts new file mode 100644 index 000000000..8975d39ac --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/index.ts @@ -0,0 +1 @@ +export * from './PhotoCaptureHUDSightSlider'; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.tsx deleted file mode 100644 index 3e9201f45..000000000 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { usePhotoCaptureHUDPreview } from '../hook'; - -export interface PhotoCaptureHUDCounterProps { - totalSights: number; - sightsTaken: number; -} - -export function PhotoCaptureHUDCounter({ - totalSights = 0, - sightsTaken = 0, -}: PhotoCaptureHUDCounterProps) { - const style = usePhotoCaptureHUDPreview(); - - return ( -
- {`${sightsTaken} / ${totalSights}`} -
- ); -} diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightCounter/index.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightCounter/index.ts deleted file mode 100644 index 9152bc238..000000000 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightCounter/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { PhotoCaptureHUDPreview } from './PhotoCaptureHUDPreview'; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.styles.ts deleted file mode 100644 index a1c5bdfb1..000000000 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.styles.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { Styles } from '@monkvision/types'; - -export const styles: Styles = { - container: { - position: 'relative', - display: 'flex', - alignSelf: 'stretch', - justifyContent: 'center', - flexDirection: 'column', - backgroundColor: 'green', - flex: '1', - }, - top: { - position: 'absolute', - display: 'flex', - alignSelf: 'stretch', - flexDirection: 'row', - justifyContent: 'space-between', - margin: '10px', - zIndex: '9', - top: '0', - right: '0', - left: '0', - }, - counter: { - display: 'flex', - color: 'white', - alignItems: 'center', - justifyContent: 'center', - padding: '6px 12px', - borderRadius: '8px', - backgroundColor: 'rgba(28, 28, 30, 0.64)', - zIndex: '9', - }, - slider: { - position: 'absolute', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - paddingLeft: '45%', - paddingBottom: '0%', - overflowX: 'auto', - overflowY: 'hidden', - whiteSpace: 'nowrap', - scrollbarWidth: 'none', - maxWidth: '60vw', - zIndex: '9', - bottom: '0', - right: '0', - left: '0', - }, - labelButton: { - margin: '10px', - zIndex: '9', - }, - sightOverlay: { - zIndex: '9', - }, - addDamageButton: { - backgroundColor: 'rgba(52, 53, 63, 0.64)', - }, -}; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.tsx deleted file mode 100644 index 7e904b982..000000000 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { Sight } from '@monkvision/types'; -import { SightOverlay } from '@monkvision/common-ui-web'; -import { usePhotoCaptureHUDPreview } from '../PhotoCaptureHUDPreviewSight/hook'; - -export interface PhotoCaptureHUDSightsOverlayProps { - sight: Sight; -} - -export function PhotoCaptureHUDSightsOverlay({ sight }: PhotoCaptureHUDSightsOverlayProps) { - const style = usePhotoCaptureHUDPreview(); - return ; -} diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightOverlay/index.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightOverlay/index.ts deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.styles.ts deleted file mode 100644 index a1c5bdfb1..000000000 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.styles.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { Styles } from '@monkvision/types'; - -export const styles: Styles = { - container: { - position: 'relative', - display: 'flex', - alignSelf: 'stretch', - justifyContent: 'center', - flexDirection: 'column', - backgroundColor: 'green', - flex: '1', - }, - top: { - position: 'absolute', - display: 'flex', - alignSelf: 'stretch', - flexDirection: 'row', - justifyContent: 'space-between', - margin: '10px', - zIndex: '9', - top: '0', - right: '0', - left: '0', - }, - counter: { - display: 'flex', - color: 'white', - alignItems: 'center', - justifyContent: 'center', - padding: '6px 12px', - borderRadius: '8px', - backgroundColor: 'rgba(28, 28, 30, 0.64)', - zIndex: '9', - }, - slider: { - position: 'absolute', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - paddingLeft: '45%', - paddingBottom: '0%', - overflowX: 'auto', - overflowY: 'hidden', - whiteSpace: 'nowrap', - scrollbarWidth: 'none', - maxWidth: '60vw', - zIndex: '9', - bottom: '0', - right: '0', - left: '0', - }, - labelButton: { - margin: '10px', - zIndex: '9', - }, - sightOverlay: { - zIndex: '9', - }, - addDamageButton: { - backgroundColor: 'rgba(52, 53, 63, 0.64)', - }, -}; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.tsx deleted file mode 100644 index 38565afd7..000000000 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { Button, IconName } from '@monkvision/common-ui-web'; -import { Sight } from '@monkvision/types'; -import { useSightLabel } from '@monkvision/common'; -import { labels } from '@monkvision/sights'; -import { forwardRef } from 'react'; -import { usePhotoCaptureHUDPreview } from '../hook'; - -export interface PhotoCaptureHUDSightsSliderProps { - sights?: Sight[]; - currentSight?: string; - sightsTaken?: Sight[]; - onSightSelected?: (sight: Sight) => void; - onScrollToSelected?: (index: number, smooth: boolean) => void; -} - -export const PhotoCaptureHUDSightsSlider = forwardRef< - HTMLDivElement, - PhotoCaptureHUDSightsSliderProps ->( - ( - { - sights, - currentSight, - sightsTaken, - onSightSelected = () => {}, - onScrollToSelected = () => {}, - }, - ref, - ) => { - const { label } = useSightLabel({ labels }); - const style = usePhotoCaptureHUDPreview(); - - return ( -
- {sights?.map((sight, index) => { - let primaryColor = 'secondary-xdark'; - let icon = '' as IconName; - if (sight.id === currentSight) primaryColor = 'primary-base'; - if (sightsTaken?.some((sightTaken) => sightTaken.id === sight.id)) { - primaryColor = 'primary-light'; - icon = 'check'; - } - return ( - - ); - })} -
- ); - }, -); diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightSlider/index.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightSlider/index.ts deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/hook.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/hook.ts index f26dbbfd7..81b9f2661 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/hook.ts +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/hook.ts @@ -1,6 +1,31 @@ import { CSSProperties } from 'react'; -import { useResponsiveStyle } from '@monkvision/common'; +import { i18nCreateSDKInstance, useResponsiveStyle } from '@monkvision/common'; import { styles } from './PhotoCaptureHUD.styles'; +import en from './translations/en.json'; +import fr from './translations/fr.json'; +import de from './translations/de.json'; + +/** + * Enumeration of the different HUD mode view used in inspection capture web package + */ +export enum HUDMode { + /** + * Default mode + */ + DEFAULT = 'default', + /** + * Add damage mode/preview + */ + ADD_DAMAGE = 'add-damage', +} + +export const i18nAddDamage = i18nCreateSDKInstance({ + resources: { + en: { translation: en }, + fr: { translation: fr }, + de: { translation: de }, + }, +}); export interface PhotoCaptureHUD { container: CSSProperties; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/de.json b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/de.json new file mode 100644 index 000000000..19955bd4d --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/de.json @@ -0,0 +1,3 @@ +{ + "damage": "Schaden" +} diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/en.json b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/en.json new file mode 100644 index 000000000..288c4e74a --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/en.json @@ -0,0 +1,3 @@ +{ + "damage": "Damage" +} diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/fr.json b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/fr.json new file mode 100644 index 000000000..8b8abc400 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/fr.json @@ -0,0 +1,3 @@ +{ + "damage": "Dégât" +} diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDPreview.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDPreview.test.tsx index c18878739..154ccef05 100644 --- a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDPreview.test.tsx +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDPreview.test.tsx @@ -1,12 +1,28 @@ +import { Sight } from '@monkvision/types'; + jest.mock('@monkvision/sights'); import { render } from '@testing-library/react'; import { PhotoCaptureHUDPreview } from '../../src'; +const sights = [ + { id: 'id', label: { en: 'en', fr: 'fr', de: 'de' } }, + { id: 'id2', label: { en: 'en2', fr: 'fr2', de: 'de2' } }, +] as unknown as Sight[]; +const sightsTaken = [...sights].slice(0, 1); +const currentSightSliderIndex = 0; + describe('PhotoCaptureHUDPreview component', () => { it('render HUDPreview with no props', () => { // TODO: how can I test this? - const { unmount } = render(); + const { unmount } = render( + , + ); unmount(); }); }); diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsCounter.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsCounter.test.tsx index 0dec65d7d..ea94905eb 100644 --- a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsCounter.test.tsx +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsCounter.test.tsx @@ -1,36 +1,13 @@ import { render } from '@testing-library/react'; -import { PhotoCaptureHUDCounter } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsCounter'; +import { PhotoCaptureHUDSightCounter } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightCounter'; describe('PhotoCaptureHUDSightsCounter component', () => { - it('should render a error message when sightsTaken and totalSights is not provided', () => { - const { getByText, unmount } = render(); - const expectedText = 'error-no-sight'; - expect(typeof getByText(expectedText).textContent).toEqual('string'); - unmount(); - }); - - it('should render a error message when only totalSights is provided', () => { - const totalSights = 10; - const { getByText, unmount } = render(); - const expectedText = `0 / ${totalSights}`; - expect(getByText(expectedText).textContent).toEqual(expectedText); - unmount(); - }); - - it('should render a error message when only sightsTaken is provided', () => { - const sightsTaken = 5; - const { getByText, unmount } = render(); - const expectedText = 'error-no-sight'; - expect(getByText(expectedText).textContent).toEqual(expectedText); - unmount(); - }); - it('render counter properly when sightsTaken and totalSights is provided', () => { const totalSights = 10; const sightsTaken = 5; const { getByText, unmount } = render( - , + , ); const expectedText = `${sightsTaken} / ${totalSights}`; expect(getByText(expectedText).textContent).toEqual(expectedText); diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsOverlay.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsOverlay.test.tsx index 0a85fcbb3..3f7da2c3f 100644 --- a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsOverlay.test.tsx +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsOverlay.test.tsx @@ -4,17 +4,11 @@ jest.mock('@monkvision/sights', () => ({ sights: { sight1: {}, sight2: {} } })); import { render } from '@testing-library/react'; import { SightOverlay } from '@monkvision/common-ui-web'; import { sights } from '@monkvision/sights'; -import { PhotoCaptureHUDSightsOverlay } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsOverlay'; +import { PhotoCaptureHUDSightOverlay } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay'; describe('PhotoCaptureHUDSightsOverlay component', () => { - it('should render not Sights Overlay when sight is not provided', () => { - const { unmount } = render(); - expect(SightOverlay).toHaveBeenCalledTimes(0); - unmount(); - }); - it('should render Sights Overlay when sight is provided', () => { - const { unmount } = render(); + const { unmount } = render(); expect(SightOverlay).toHaveBeenCalled(); unmount(); }); diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsSlider.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsSlider.test.tsx index be134a843..934f6b7e5 100644 --- a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsSlider.test.tsx +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsSlider.test.tsx @@ -7,27 +7,29 @@ import { expectPropsOnChildMock } from '@monkvision/test-utils'; import { Button } from '@monkvision/common-ui-web'; import { useSightLabel } from '@monkvision/common'; import { Sight } from '@monkvision/types'; -import { PhotoCaptureHUDSightsSlider } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/components/PhotoCaptureHUDSightsSlider'; +import { PhotoCaptureHUDSightSlider } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider'; const sights = [ { id: 'id', label: { en: 'en', fr: 'fr', de: 'de' } }, { id: 'id2', label: { en: 'en2', fr: 'fr2', de: 'de2' } }, ] as unknown as Sight[]; +const sightsTaken = [...sights].slice(0, 1); +const currentSightSliderIndex = 0; describe('PhotoCaptureHUDSightsSlider component', () => { afterEach(() => { jest.clearAllMocks(); }); - it('should not render any buttons when sights is not provided', () => { - const { unmount } = render(); - - expect(Button).toHaveBeenCalledTimes(0); - unmount(); - }); - it('should render a slider of buttons when sights is provided', () => { - const { unmount } = render(); + const { unmount } = render( + , + ); expect(Button).toHaveBeenCalledTimes(sights.length); unmount(); @@ -37,10 +39,12 @@ describe('PhotoCaptureHUDSightsSlider component', () => { const buttonMock = Button as unknown as jest.Mock; const onSightSelected = jest.fn(); const { unmount } = render( - , ); @@ -49,7 +53,7 @@ describe('PhotoCaptureHUDSightsSlider component', () => { expectPropsOnChildMock(buttonMock, { onClick: expect.any(Function) }); const onClickProp = buttonMock.mock.calls[index][0].onClick; onClickProp(); - expect(onSightSelected).toHaveBeenCalledWith(sight); + expect(onSightSelected).toHaveBeenCalledWith(sight, index); }); unmount(); @@ -59,7 +63,12 @@ describe('PhotoCaptureHUDSightsSlider component', () => { it('should have primary-base as primary color if button selected', () => { const buttonMock = Button as unknown as jest.Mock; const { unmount } = render( - , + , ); sights.forEach((sight, index) => { expectPropsOnChildMock(buttonMock, { primaryColor: expect.any(String) }); @@ -67,7 +76,17 @@ describe('PhotoCaptureHUDSightsSlider component', () => { const baseColor = 'primary-base'; const secondColor = 'secondary-xdark'; - expect(primaryColorProp).toEqual(sight.id === sights[0].id ? baseColor : secondColor); + const thirdColor = 'primary-light'; + + let expectedColor = secondColor; + if (sight.id === sights[0].id) { + expectedColor = baseColor; + } + if (sightsTaken?.some((sightTaken) => sightTaken.id === sight.id)) { + expectedColor = thirdColor; + } + + expect(primaryColorProp).toEqual(expectedColor); }); unmount(); @@ -76,7 +95,12 @@ describe('PhotoCaptureHUDSightsSlider component', () => { it('should call label function to translate the sight label', () => { const useSightLabelMock = useSightLabel as jest.Mock; const { unmount } = render( - , + , ); const { label } = useSightLabelMock.mock.results[0].value; sights.forEach(() => { From abf9a227d6b85814d86b56686110e17c9df0b265 Mon Sep 17 00:00:00 2001 From: David_LY Date: Thu, 28 Dec 2023 16:55:18 +0100 Subject: [PATCH 25/33] PhotoCapture logic and component plug to camera. refacto + rename funct/var --- .../src/PhotoCapture.styles.ts | 8 ++ .../src/PhotoCapture.tsx | 51 ++++++++++++ .../PhotoCaptureHUD/PhotoCaptureHUD.styles.ts | 14 +++- .../src/PhotoCaptureHUD/PhotoCaptureHUD.tsx | 82 +++++++++---------- .../PhotoCaptureHUDPreview.tsx | 13 ++- .../PhotoCaptureHUDSightOverlay.styles.ts | 2 +- .../PhotoCaptureHUDSightOverlay.tsx | 2 +- .../PhotoCaptureHUDSightSlider.styles.ts | 5 +- .../PhotoCaptureHUDSightSlider.tsx | 44 +++++----- .../src/PhotoCaptureHUD/hook.ts | 4 + .../src/PhotoCaptureHUD/index.ts | 3 - .../src/hooks/useSightState.ts | 40 +++++++++ .../inspection-capture-web/src/index.ts | 2 +- 13 files changed, 185 insertions(+), 85 deletions(-) create mode 100644 packages/public/inspection-capture-web/src/PhotoCapture.styles.ts create mode 100644 packages/public/inspection-capture-web/src/PhotoCapture.tsx create mode 100644 packages/public/inspection-capture-web/src/hooks/useSightState.ts diff --git a/packages/public/inspection-capture-web/src/PhotoCapture.styles.ts b/packages/public/inspection-capture-web/src/PhotoCapture.styles.ts new file mode 100644 index 000000000..3039105ef --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCapture.styles.ts @@ -0,0 +1,8 @@ +import { Styles } from '@monkvision/types'; + +export const styles: Styles = { + container: { + height: '100%', + width: '100%', + }, +}; diff --git a/packages/public/inspection-capture-web/src/PhotoCapture.tsx b/packages/public/inspection-capture-web/src/PhotoCapture.tsx new file mode 100644 index 000000000..2218b2ef9 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCapture.tsx @@ -0,0 +1,51 @@ +import React, { useState } from 'react'; +import { + Camera, + CameraFacingMode, + CameraHUDProps, + CameraResolution, + CompressionFormat, + MonkPicture, +} from '@monkvision/camera-web'; +import { Sight } from '@monkvision/types'; +import { PhotoCaptureHUD } from './PhotoCaptureHUD'; +import { styles } from './PhotoCapture.styles'; +import { HUDMode } from './PhotoCaptureHUD/hook'; + +export interface PhotoCaptureProps { + sights: Sight[]; +} + +export function PhotoCapture({ sights }: PhotoCaptureProps) { + const [state] = useState({ + facingMode: CameraFacingMode.ENVIRONMENT, + resolution: CameraResolution.UHD_4K, + compressionFormat: CompressionFormat.JPEG, + quality: '0.8', + }); + const [mode, setMode] = useState(HUDMode.DEFAULT); + const handlePictureTaken = (picture: MonkPicture) => { + console.log('Picture Taken :', picture); + }; + + const handleOnAddDamage = (newMode: HUDMode): void => { + setMode(newMode); + }; + + const hud = (props: CameraHUDProps) => ( + + ); + return ( +
+ + {/* */} +
+ ); +} diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.styles.ts index f65097a04..e09757ba0 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.styles.ts +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.styles.ts @@ -2,14 +2,26 @@ import { Styles } from '@monkvision/types'; export const styles: Styles = { container: { + width: '100%', height: '100%', display: 'flex', flexDirection: 'row', + alignItems: 'center', + justifyContent: 'flex-end', + position: 'relative', alignSelf: 'stretch', - flex: '1', + // flex: '1', }, containerPortrait: { __media: { portrait: true }, flexDirection: 'column', }, + previewContainer: { + position: 'absolute', + width: '100%', + height: '100%', + top: 0, + left: 0, + zIndex: 9, + }, }; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx index 9f1ce8086..9ee22e832 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx @@ -1,60 +1,52 @@ -import { useState } from 'react'; +import { useMemo } from 'react'; import { Sight } from '@monkvision/types'; import { i18nWrap } from '@monkvision/common'; +import { CameraHUDProps } from '@monkvision/camera-web/lib/Camera/CameraHUD.types'; import { PhotoCaptureHUDButtons } from './PhotoCaptureHUDButtons'; import { PhotoCaptureHUDPreviewAddDamage } from './PhotoCaptureHUDPreviewAddDamage'; import { PhotoCaptureHUDPreview } from './PhotoCaptureHUDPreviewSight'; import { HUDMode, i18nAddDamage, usePhotoCaptureHUD } from './hook'; +import { useSightState } from '../hooks/useSightState'; -export interface PhotoCaptureHUDProps { +export interface PhotoCaptureHUDProps extends CameraHUDProps { + mode: HUDMode; + onAddDamage: (newMode: HUDMode) => void; sights: Sight[]; } -export const PhotoCaptureHUD = i18nWrap(({ sights }: PhotoCaptureHUDProps) => { - const [currentSight, setCurrentSight] = useState(sights[0]); - const [currentSightSliderIndex, setCurrentSightSliderIndex] = useState(0); - const [mode, setMode] = useState(HUDMode.DEFAULT); - const [sightsTaken, setSightsTaken] = useState([]); +export const PhotoCaptureHUD = i18nWrap( + ({ mode, sights, onAddDamage, cameraPreview, handle }: PhotoCaptureHUDProps) => { + const { sightSelected, handleSightSelected, sightsTaken, handleSightTaken } = + useSightState(sights); + const style = usePhotoCaptureHUD(); - const handleOnSightSelected = (sight: Sight, index: number): void => { - setCurrentSight(sight); - setCurrentSightSliderIndex(index); - }; - - const handleOnAddDamage = (newMode: HUDMode): void => { - setMode(newMode); - }; - - const renderSelectedHUDMode = () => { - switch (mode) { - case HUDMode.DEFAULT: - return ( + const hudPreview = useMemo( + () => + mode === HUDMode.ADD_DAMAGE ? ( + + ) : ( - ); - case HUDMode.ADD_DAMAGE: - return ; - - default: - return null; - } - }; - const style = usePhotoCaptureHUD(); - return ( -
- {renderSelectedHUDMode()} - { - if (currentSight && !sightsTaken.some((sightTaken) => sightTaken === currentSight)) - setSightsTaken([...sightsTaken, currentSight]); - }} - /> -
- ); -}, i18nAddDamage); + ), + [mode, sightSelected, sightsTaken], + ); + return ( +
+
{cameraPreview}
+ {hudPreview} + { + handle?.takePicture?.(); + handleSightTaken(); + }} + /> +
+ ); + }, + i18nAddDamage, +); diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.tsx index ac19f8b6a..a17ba99bf 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.tsx @@ -9,25 +9,23 @@ import { styles } from './PhotoCaptureHUDPreview.styles'; export interface PhotoCaptureHUDPreviewProps { sights: Sight[]; - currentSight: Sight; - onSightSelected?: (sight: Sight, index: number) => void; + sightSelected: Sight; + onSightSelected?: (sight: Sight) => void; onAddDamage?: (newMode: HUDMode) => void; sightsTaken: Sight[]; - currentSightSliderIndex: number; } export function PhotoCaptureHUDPreview({ sights, - currentSight, + sightSelected, onSightSelected = () => {}, onAddDamage = () => {}, sightsTaken, - currentSightSliderIndex, }: PhotoCaptureHUDPreviewProps) { const { t } = useTranslation(); return (
- +
); diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.styles.ts index af2f30f2a..a807e9a5b 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.styles.ts +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.styles.ts @@ -1,7 +1,7 @@ import { Styles } from '@monkvision/types'; export const styles: Styles = { - sightOverlay: { + container: { zIndex: '9', }, }; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.tsx index 70acc1684..c45c78191 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.tsx @@ -7,5 +7,5 @@ export interface PhotoCaptureHUDSightsOverlayProps { } export function PhotoCaptureHUDSightOverlay({ sight }: PhotoCaptureHUDSightsOverlayProps) { - return ; + return ; } diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.styles.ts index 548b09026..166d26a15 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.styles.ts +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.styles.ts @@ -1,12 +1,13 @@ import { Styles } from '@monkvision/types'; export const styles: Styles = { - slider: { + container: { position: 'absolute', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', paddingLeft: '45%', + paddingRight: '45%', paddingBottom: '0%', overflowX: 'auto', overflowY: 'hidden', @@ -18,7 +19,7 @@ export const styles: Styles = { right: '0', left: '0', }, - labelButton: { + button: { margin: '10px', zIndex: '9', }, diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.tsx index f459fc0d2..cee06e44c 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.tsx @@ -7,48 +7,48 @@ import { styles } from './PhotoCaptureHUDSightSlider.styles'; export interface PhotoCaptureHUDSightsSliderProps { sights: Sight[]; - currentSight: string; + sightSelected: Sight; sightsTaken: Sight[]; - onSightSelected?: (sight: Sight, index: number) => void; - currentSightSliderIndex: number; + onSightSelected: (sight: Sight) => void; } interface SliderButtonProps { - index: number; sight: Sight; - currentSight: string; + sightSelected: Sight; sightsTaken: Sight[]; - onSightSelected: (sight: Sight, index: number) => void; + onSightSelected: (sight: Sight) => void; label: (sight: Sight) => string; } function SliderButton({ - index, sight, - currentSight, + sightSelected, sightsTaken, onSightSelected, label, }: SliderButtonProps) { + const isSelected = sight.id === sightSelected.id; + const isTaken = sightsTaken.some((sightTaken) => sightTaken.id === sight.id); + let primaryColor = 'secondary-xdark'; let icon = undefined as IconName | undefined; - if (sight.id === currentSight) { + + if (isSelected) { primaryColor = 'primary-base'; } - if (sightsTaken?.some((sightTaken) => sightTaken.id === sight.id)) { + if (isTaken) { primaryColor = 'primary-light'; icon = 'check'; } return ( @@ -57,10 +57,9 @@ function SliderButton({ export function PhotoCaptureHUDSightSlider({ sights, - currentSight, + sightSelected, sightsTaken, onSightSelected = () => {}, - currentSightSliderIndex, }: PhotoCaptureHUDSightsSliderProps) { const ref = useRef(null); const { label } = useSightLabel({ labels }); @@ -75,17 +74,16 @@ export function PhotoCaptureHUDSightSlider({ }; useEffect(() => { - onScrollToSelected(currentSightSliderIndex, true); - }, [currentSight]); + onScrollToSelected(sights.indexOf(sightSelected), true); + }, [sightSelected, sightsTaken]); return ( -
- {sights?.map((sight, index) => ( +
+ {sights?.map((sight) => ( (sights[0]); + const [sightsTaken, setSightsTaken] = useState([]); + + const handleSightSelected = (sight: Sight): void => { + setSightSelected(sight); + }; + + const handleSightTaken = (): void => { + if (!sightSelected || sightsTaken.includes(sightSelected)) { + return; + } + + setSightsTaken((prevSightsTaken) => { + const updatedSightsTaken = [...prevSightsTaken, sightSelected]; + + const sightsNotTaken = sights.filter((sight) => !updatedSightsTaken.includes(sight)); + const nextSight = sightsNotTaken[0]; + + if (nextSight) { + handleSightSelected(nextSight); + } + + return updatedSightsTaken; + }); + }; + + return { + sightSelected, + handleSightSelected, + sightsTaken, + handleSightTaken, + }; +} diff --git a/packages/public/inspection-capture-web/src/index.ts b/packages/public/inspection-capture-web/src/index.ts index f7d446687..5b5767050 100644 --- a/packages/public/inspection-capture-web/src/index.ts +++ b/packages/public/inspection-capture-web/src/index.ts @@ -1 +1 @@ -export * from './PhotoCaptureHUD'; // TODO : Remove this export later +export { PhotoCapture } from './PhotoCapture'; From 484dc7cfd2f66bc8711e8e092f5ea597c56f15e1 Mon Sep 17 00:00:00 2001 From: David_LY Date: Thu, 28 Dec 2023 18:13:27 +0100 Subject: [PATCH 26/33] renaming component for more readability + callback mode (avoiding rerender camera) + button in AddDamagePreview traduction in sync --- .../src/PhotoCapture.tsx | 11 +---- .../src/PhotoCaptureHUD/PhotoCaptureHUD.tsx | 16 +++--- ...PhotoCaptureHUDAddDamagePreview.styles.ts} | 5 +- .../PhotoCaptureHUDAddDamagePreview.tsx | 19 +++++++ .../PhotoCaptureHUDAddDamagePreview/index.ts | 1 + .../PhotoCaptureHUDPreviewAddDamage.tsx | 18 ------- .../PhotoCaptureHUDPreviewAddDamage/index.ts | 1 - .../PhotoCaptureHUDPreview.tsx | 49 ------------------- .../PhotoCaptureHUDSightCounter.tsx | 13 ----- .../PhotoCaptureHUDSightCounter/index.ts | 1 - .../PhotoCaptureHUDSightOverlay.tsx | 11 ----- .../PhotoCaptureHUDSightOverlay/index.ts | 1 - .../PhotoCaptureHUDSightSlider/index.ts | 1 - .../PhotoCaptureHUDPreviewSight/index.ts | 1 - .../AddDamageButton.styles.ts} | 4 +- .../AddDamageButton/AddDamageButton.tsx | 23 +++++++++ .../AddDamageButton/index.ts | 1 + .../PhotoCaptureHUDSightPreview.styles.ts | 28 +++++++++++ .../PhotoCaptureHUDSightPreview.tsx | 39 +++++++++++++++ .../SightsCounter/SightsCounter.styles.ts} | 0 .../SightsCounter/SightsCounter.tsx | 10 ++++ .../SightsCounter/index.ts | 1 + .../SightsSlider/SightsSlider.styles.ts} | 0 .../SightsSlider/SightsSlider.tsx} | 34 +++++++------ .../SightsSlider/index.ts | 1 + .../hook.ts | 2 +- .../PhotoCaptureHUDSightPreview/index.ts | 1 + .../src/PhotoCaptureHUD/translations/de.json | 3 +- .../src/PhotoCaptureHUD/translations/en.json | 3 +- .../src/PhotoCaptureHUD/translations/fr.json | 3 +- .../src/hooks/useHUDMode.ts | 11 +++++ 31 files changed, 174 insertions(+), 138 deletions(-) rename packages/public/inspection-capture-web/src/PhotoCaptureHUD/{PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.styles.ts => PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.styles.ts} (88%) create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.tsx create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/index.ts delete mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage/PhotoCaptureHUDPreviewAddDamage.tsx delete mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage/index.ts delete mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.tsx delete mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.tsx delete mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightCounter/index.ts delete mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.tsx delete mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/index.ts delete mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/index.ts delete mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/index.ts rename packages/public/inspection-capture-web/src/PhotoCaptureHUD/{PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.styles.ts => PhotoCaptureHUDSightPreview/AddDamageButton/AddDamageButton.styles.ts} (59%) create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton/AddDamageButton.tsx create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton/index.ts create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.styles.ts create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.tsx rename packages/public/inspection-capture-web/src/PhotoCaptureHUD/{PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.styles.ts => PhotoCaptureHUDSightPreview/SightsCounter/SightsCounter.styles.ts} (100%) create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsCounter/SightsCounter.tsx create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsCounter/index.ts rename packages/public/inspection-capture-web/src/PhotoCaptureHUD/{PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.styles.ts => PhotoCaptureHUDSightPreview/SightsSlider/SightsSlider.styles.ts} (100%) rename packages/public/inspection-capture-web/src/PhotoCaptureHUD/{PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.tsx => PhotoCaptureHUDSightPreview/SightsSlider/SightsSlider.tsx} (74%) create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsSlider/index.ts rename packages/public/inspection-capture-web/src/PhotoCaptureHUD/{PhotoCaptureHUDPreviewSight => PhotoCaptureHUDSightPreview}/hook.ts (92%) create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/index.ts create mode 100644 packages/public/inspection-capture-web/src/hooks/useHUDMode.ts diff --git a/packages/public/inspection-capture-web/src/PhotoCapture.tsx b/packages/public/inspection-capture-web/src/PhotoCapture.tsx index 2218b2ef9..d77920299 100644 --- a/packages/public/inspection-capture-web/src/PhotoCapture.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCapture.tsx @@ -10,7 +10,6 @@ import { import { Sight } from '@monkvision/types'; import { PhotoCaptureHUD } from './PhotoCaptureHUD'; import { styles } from './PhotoCapture.styles'; -import { HUDMode } from './PhotoCaptureHUD/hook'; export interface PhotoCaptureProps { sights: Sight[]; @@ -23,18 +22,11 @@ export function PhotoCapture({ sights }: PhotoCaptureProps) { compressionFormat: CompressionFormat.JPEG, quality: '0.8', }); - const [mode, setMode] = useState(HUDMode.DEFAULT); const handlePictureTaken = (picture: MonkPicture) => { console.log('Picture Taken :', picture); }; - const handleOnAddDamage = (newMode: HUDMode): void => { - setMode(newMode); - }; - - const hud = (props: CameraHUDProps) => ( - - ); + const hud = (props: CameraHUDProps) => ; return (
- {/* */}
); } diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx index 9ee22e832..efd1f2052 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx @@ -3,34 +3,34 @@ import { Sight } from '@monkvision/types'; import { i18nWrap } from '@monkvision/common'; import { CameraHUDProps } from '@monkvision/camera-web/lib/Camera/CameraHUD.types'; import { PhotoCaptureHUDButtons } from './PhotoCaptureHUDButtons'; -import { PhotoCaptureHUDPreviewAddDamage } from './PhotoCaptureHUDPreviewAddDamage'; -import { PhotoCaptureHUDPreview } from './PhotoCaptureHUDPreviewSight'; +import { PhotoCaptureHUDAddDamagePreview } from './PhotoCaptureHUDAddDamagePreview'; +import { PhotoCaptureHUDSightPreview } from './PhotoCaptureHUDSightPreview'; import { HUDMode, i18nAddDamage, usePhotoCaptureHUD } from './hook'; import { useSightState } from '../hooks/useSightState'; +import { useHUDMode } from '../hooks/useHUDMode'; export interface PhotoCaptureHUDProps extends CameraHUDProps { - mode: HUDMode; - onAddDamage: (newMode: HUDMode) => void; sights: Sight[]; } export const PhotoCaptureHUD = i18nWrap( - ({ mode, sights, onAddDamage, cameraPreview, handle }: PhotoCaptureHUDProps) => { + ({ sights, cameraPreview, handle }: PhotoCaptureHUDProps) => { const { sightSelected, handleSightSelected, sightsTaken, handleSightTaken } = useSightState(sights); const style = usePhotoCaptureHUD(); + const { mode, handleAddDamage } = useHUDMode(); const hudPreview = useMemo( () => mode === HUDMode.ADD_DAMAGE ? ( - + ) : ( - ), [mode, sightSelected, sightsTaken], diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.styles.ts similarity index 88% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.styles.ts rename to packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.styles.ts index c07ba4a04..20c51600d 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.styles.ts +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.styles.ts @@ -11,16 +11,15 @@ export const styles: Styles = { flex: '1', }, top: { - position: 'absolute', + position: 'relative', display: 'flex', - alignSelf: 'stretch', + alignSelf: 'flex-start', flexDirection: 'row', justifyContent: 'space-between', margin: '10px', zIndex: '9', top: '0', right: '0', - left: '0', }, addDamageButton: { backgroundColor: 'rgba(52, 53, 63, 0.64)', diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.tsx new file mode 100644 index 000000000..332f49829 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.tsx @@ -0,0 +1,19 @@ +import { Button } from '@monkvision/common-ui-web'; +import { useTranslation } from 'react-i18next'; +import { styles } from './PhotoCaptureHUDAddDamagePreview.styles'; +import { HUDMode } from '../hook'; + +export interface PhotoCaptureHUDAddDamageMenuProps { + onAddDamage: (newMode: HUDMode) => void; +} + +export function PhotoCaptureHUDAddDamagePreview({ + onAddDamage, +}: PhotoCaptureHUDAddDamageMenuProps) { + const { t } = useTranslation(); + return ( +
+ ; +
+ ); +} diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/index.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/index.ts new file mode 100644 index 000000000..1b947cbc0 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/index.ts @@ -0,0 +1 @@ +export * from './PhotoCaptureHUDAddDamagePreview'; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage/PhotoCaptureHUDPreviewAddDamage.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage/PhotoCaptureHUDPreviewAddDamage.tsx deleted file mode 100644 index c134eddcd..000000000 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage/PhotoCaptureHUDPreviewAddDamage.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Button } from '@monkvision/common-ui-web'; -import { usePhotoCaptureHUDPreview } from '../PhotoCaptureHUDPreviewSight/hook'; -import { HUDMode } from '../hook'; - -export interface PhotoCaptureHUDAddDamageMenuProps { - onAddDamage?: (newMode: HUDMode) => void; -} - -export function PhotoCaptureHUDPreviewAddDamage({ - onAddDamage = () => {}, -}: PhotoCaptureHUDAddDamageMenuProps) { - const style = usePhotoCaptureHUDPreview(); - return ( -
-
- ); -} diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage/index.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage/index.ts deleted file mode 100644 index 36fd57b10..000000000 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './PhotoCaptureHUDPreviewAddDamage'; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.tsx deleted file mode 100644 index a17ba99bf..000000000 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreview.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { Sight } from '@monkvision/types'; -import { Button } from '@monkvision/common-ui-web'; -import { useTranslation } from 'react-i18next'; -import { PhotoCaptureHUDSightSlider } from './PhotoCaptureHUDSightSlider'; -import { PhotoCaptureHUDSightCounter } from './PhotoCaptureHUDSightCounter'; -import { PhotoCaptureHUDSightOverlay } from './PhotoCaptureHUDSightOverlay'; -import { HUDMode } from '../hook'; -import { styles } from './PhotoCaptureHUDPreview.styles'; - -export interface PhotoCaptureHUDPreviewProps { - sights: Sight[]; - sightSelected: Sight; - onSightSelected?: (sight: Sight) => void; - onAddDamage?: (newMode: HUDMode) => void; - sightsTaken: Sight[]; -} - -export function PhotoCaptureHUDPreview({ - sights, - sightSelected, - onSightSelected = () => {}, - onAddDamage = () => {}, - sightsTaken, -}: PhotoCaptureHUDPreviewProps) { - const { t } = useTranslation(); - return ( -
- -
- - -
- -
- ); -} diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.tsx deleted file mode 100644 index c426f7aca..000000000 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { styles } from './PhotoCaptureHUDSightCounter.styles'; - -export interface PhotoCaptureHUDSightCounterProps { - totalSights: number; - sightsTaken: number; -} - -export function PhotoCaptureHUDSightCounter({ - totalSights, - sightsTaken, -}: PhotoCaptureHUDSightCounterProps) { - return
{`${sightsTaken} / ${totalSights}`}
; -} diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightCounter/index.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightCounter/index.ts deleted file mode 100644 index a128303ad..000000000 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightCounter/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './PhotoCaptureHUDSightCounter'; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.tsx deleted file mode 100644 index c45c78191..000000000 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { Sight } from '@monkvision/types'; -import { SightOverlay } from '@monkvision/common-ui-web'; -import { styles } from './PhotoCaptureHUDSightOverlay.styles'; - -export interface PhotoCaptureHUDSightsOverlayProps { - sight: Sight; -} - -export function PhotoCaptureHUDSightOverlay({ sight }: PhotoCaptureHUDSightsOverlayProps) { - return ; -} diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/index.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/index.ts deleted file mode 100644 index 542985ea1..000000000 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './PhotoCaptureHUDSightOverlay'; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/index.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/index.ts deleted file mode 100644 index 8975d39ac..000000000 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './PhotoCaptureHUDSightSlider'; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/index.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/index.ts deleted file mode 100644 index 9152bc238..000000000 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { PhotoCaptureHUDPreview } from './PhotoCaptureHUDPreview'; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton/AddDamageButton.styles.ts similarity index 59% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.styles.ts rename to packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton/AddDamageButton.styles.ts index a807e9a5b..9fc65db6c 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay.styles.ts +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton/AddDamageButton.styles.ts @@ -1,7 +1,7 @@ import { Styles } from '@monkvision/types'; export const styles: Styles = { - container: { - zIndex: '9', + button: { + backgroundColor: 'rgba(52, 53, 63, 0.64)', }, }; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton/AddDamageButton.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton/AddDamageButton.tsx new file mode 100644 index 000000000..6a9c9a423 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton/AddDamageButton.tsx @@ -0,0 +1,23 @@ +import { Button } from '@monkvision/common-ui-web'; +import { useTranslation } from 'react-i18next'; +import { styles } from './AddDamageButton.styles'; +import { HUDMode } from '../../hook'; + +export interface AddDamageButtonProps { + onAddDamage: (newMode: HUDMode) => void; +} + +export function AddDamageButton({ onAddDamage }: AddDamageButtonProps) { + const { t } = useTranslation(); + return ( + + ); +} diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton/index.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton/index.ts new file mode 100644 index 000000000..35d2e8a9c --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton/index.ts @@ -0,0 +1 @@ +export * from './AddDamageButton'; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.styles.ts new file mode 100644 index 000000000..41b4a50ca --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.styles.ts @@ -0,0 +1,28 @@ +import { Styles } from '@monkvision/types'; + +export const styles: Styles = { + container: { + position: 'relative', + display: 'flex', + alignSelf: 'stretch', + justifyContent: 'center', + flexDirection: 'column', + backgroundColor: 'green', + flex: '1', + }, + top: { + position: 'absolute', + display: 'flex', + alignSelf: 'stretch', + flexDirection: 'row', + justifyContent: 'space-between', + margin: '10px', + zIndex: '9', + top: '0', + right: '0', + left: '0', + }, + overlay: { + zIndex: '9', + }, +}; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.tsx new file mode 100644 index 000000000..9f34a7aa1 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.tsx @@ -0,0 +1,39 @@ +import { Sight } from '@monkvision/types'; +import { SightOverlay } from '@monkvision/common-ui-web'; +import { SightsSlider } from './SightsSlider'; +import { SightsCounter } from './SightsCounter'; +import { HUDMode } from '../hook'; +import { styles } from './PhotoCaptureHUDSightPreview.styles'; +import { AddDamageButton } from './AddDamageButton'; + +export interface PhotoCaptureHUDPreviewProps { + sights: Sight[]; + sightSelected: Sight; + onSightSelected?: (sight: Sight) => void; + onAddDamage?: (newMode: HUDMode) => void; + sightsTaken: Sight[]; +} + +export function PhotoCaptureHUDSightPreview({ + sights, + sightSelected, + onSightSelected = () => {}, + onAddDamage = () => {}, + sightsTaken, +}: PhotoCaptureHUDPreviewProps) { + return ( +
+ ; +
+ + +
+ +
+ ); +} diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsCounter/SightsCounter.styles.ts similarity index 100% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightCounter/PhotoCaptureHUDSightCounter.styles.ts rename to packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsCounter/SightsCounter.styles.ts diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsCounter/SightsCounter.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsCounter/SightsCounter.tsx new file mode 100644 index 000000000..8bc645c25 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsCounter/SightsCounter.tsx @@ -0,0 +1,10 @@ +import { styles } from './SightsCounter.styles'; + +export interface SightsCounterProps { + totalSights: number; + sightsTaken: number; +} + +export function SightsCounter({ totalSights, sightsTaken }: SightsCounterProps) { + return
{`${sightsTaken} / ${totalSights}`}
; +} diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsCounter/index.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsCounter/index.ts new file mode 100644 index 000000000..594a9e401 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsCounter/index.ts @@ -0,0 +1 @@ +export * from './SightsCounter'; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsSlider/SightsSlider.styles.ts similarity index 100% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.styles.ts rename to packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsSlider/SightsSlider.styles.ts diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsSlider/SightsSlider.tsx similarity index 74% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.tsx rename to packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsSlider/SightsSlider.tsx index cee06e44c..4a8ead760 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider/PhotoCaptureHUDSightSlider.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsSlider/SightsSlider.tsx @@ -2,10 +2,10 @@ import { Button, IconName } from '@monkvision/common-ui-web'; import { Sight } from '@monkvision/types'; import { useSightLabel } from '@monkvision/common'; import { labels } from '@monkvision/sights'; -import { useEffect, useRef } from 'react'; -import { styles } from './PhotoCaptureHUDSightSlider.styles'; +import { RefObject, useEffect, useRef } from 'react'; +import { styles } from './SightsSlider.styles'; -export interface PhotoCaptureHUDSightsSliderProps { +export interface SightsSliderProps { sights: Sight[]; sightSelected: Sight; sightsTaken: Sight[]; @@ -55,26 +55,30 @@ function SliderButton({ ); } -export function PhotoCaptureHUDSightSlider({ +const onScrollToSelected = ( + ref: RefObject, + index: number, + smooth: boolean, +): void => { + if (ref.current && ref.current.children.length > index) { + ref.current.children[index].scrollIntoView({ + behavior: smooth ? 'smooth' : ('instant' as ScrollBehavior), + inline: 'center', + }); + } +}; + +export function SightsSlider({ sights, sightSelected, sightsTaken, onSightSelected = () => {}, -}: PhotoCaptureHUDSightsSliderProps) { +}: SightsSliderProps) { const ref = useRef(null); const { label } = useSightLabel({ labels }); - const onScrollToSelected = (index: number, smooth: boolean): void => { - if (ref.current && ref.current.children.length > index) { - ref.current.children[index].scrollIntoView({ - behavior: smooth ? 'smooth' : ('instant' as ScrollBehavior), - inline: 'center', - }); - } - }; - useEffect(() => { - onScrollToSelected(sights.indexOf(sightSelected), true); + onScrollToSelected(ref, sights.indexOf(sightSelected), true); }, [sightSelected, sightsTaken]); return ( diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsSlider/index.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsSlider/index.ts new file mode 100644 index 000000000..7022f8aab --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsSlider/index.ts @@ -0,0 +1 @@ +export * from './SightsSlider'; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/hook.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/hook.ts similarity index 92% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/hook.ts rename to packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/hook.ts index f1fd020d3..c61472fe2 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/hook.ts +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/hook.ts @@ -1,5 +1,5 @@ import { CSSProperties } from 'react'; -import { styles } from './PhotoCaptureHUDPreview.styles'; +import { styles } from './PhotoCaptureHUDSightPreview.styles'; export interface PhotoCaptureHUDPreview { containerStyle: CSSProperties; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/index.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/index.ts new file mode 100644 index 000000000..b089ab9a9 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/index.ts @@ -0,0 +1 @@ +export { PhotoCaptureHUDSightPreview } from './PhotoCaptureHUDSightPreview'; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/de.json b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/de.json index 19955bd4d..61d65cc21 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/de.json +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/de.json @@ -1,3 +1,4 @@ { - "damage": "Schaden" + "damage": "Schaden", + "cancel": "stornieren" } diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/en.json b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/en.json index 288c4e74a..ae5f387c0 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/en.json +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/en.json @@ -1,3 +1,4 @@ { - "damage": "Damage" + "damage": "Damage", + "cancel": "Cancel" } diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/fr.json b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/fr.json index 8b8abc400..e50210074 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/fr.json +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/fr.json @@ -1,3 +1,4 @@ { - "damage": "Dégât" + "damage": "Dégât", + "cancel": "Annuler" } diff --git a/packages/public/inspection-capture-web/src/hooks/useHUDMode.ts b/packages/public/inspection-capture-web/src/hooks/useHUDMode.ts new file mode 100644 index 000000000..0b6108517 --- /dev/null +++ b/packages/public/inspection-capture-web/src/hooks/useHUDMode.ts @@ -0,0 +1,11 @@ +import { useState } from 'react'; +import { HUDMode } from '../PhotoCaptureHUD/hook'; + +export function useHUDMode() { + const [mode, setMode] = useState(HUDMode.DEFAULT); + + const handleAddDamage = (newMode: HUDMode) => { + setMode(newMode); + }; + return { mode, handleAddDamage }; +} From 93794b9bd20759d5e18ea8d54aa6bb6389ce5b52 Mon Sep 17 00:00:00 2001 From: David_LY Date: Fri, 29 Dec 2023 20:10:01 +0100 Subject: [PATCH 27/33] tests + i18nAddDamage instance moved to separate file --- .../@monkvision/inspection-capture-web.tsx | 8 +- .../src/PhotoCapture.tsx | 5 +- .../src/PhotoCaptureHUD/PhotoCaptureHUD.tsx | 10 +- .../PhotoCaptureHUDAddDamagePreview.tsx | 2 +- .../SightsSlider/SightsSlider.tsx | 4 +- .../PhotoCaptureHUDSightPreview/hook.ts | 38 ------ .../PhotoCaptureHUDSightPreview/index.ts | 2 +- .../src/PhotoCaptureHUD/hook.ts | 13 +-- .../src/PhotoCaptureHUD/i18n.ts | 12 ++ .../src/PhotoCaptureHUD/index.ts | 2 +- .../inspection-capture-web/src/hooks/index.ts | 2 + .../inspection-capture-web/src/index.ts | 2 +- .../test/PhotoCapture.test.tsx | 58 +++++++++ .../PhotoCaptureHUD/PhotoCaptureHUD.test.tsx | 110 ++++++++++++++++++ .../PhotoCaptureHUDAddDamagePreview.test.tsx | 33 ++++++ .../PhotoCaptureHUDButtons.test.tsx | 2 +- .../PhotoCaptureHUDPreview.test.tsx | 28 ----- .../AddDamageButton.test.tsx | 44 +++++++ .../PhotoCaptureHUDSightPreview.test.tsx | 39 +++++++ .../SightsCounter.test.tsx} | 6 +- .../SightsSlider.test.tsx} | 33 ++---- .../PhotoCaptureHUDSightsOverlay.test.tsx | 15 --- .../test/hooks/useHUDMode.test.tsx | 29 +++++ .../test/hooks/useSightState.test.tsx | 54 +++++++++ 24 files changed, 414 insertions(+), 137 deletions(-) delete mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/hook.ts create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/i18n.ts create mode 100644 packages/public/inspection-capture-web/src/hooks/index.ts create mode 100644 packages/public/inspection-capture-web/test/PhotoCapture.test.tsx create mode 100644 packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx create mode 100644 packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview.test.tsx delete mode 100644 packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDPreview.test.tsx create mode 100644 packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton.test.tsx create mode 100644 packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.test.tsx rename packages/public/inspection-capture-web/test/PhotoCaptureHUD/{PhotoCaptureHUDSightsCounter.test.tsx => PhotoCaptureHUDSightPreview/SightsCounter.test.tsx} (58%) rename packages/public/inspection-capture-web/test/PhotoCaptureHUD/{PhotoCaptureHUDSightsSlider.test.tsx => PhotoCaptureHUDSightPreview/SightsSlider.test.tsx} (72%) delete mode 100644 packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsOverlay.test.tsx create mode 100644 packages/public/inspection-capture-web/test/hooks/useHUDMode.test.tsx create mode 100644 packages/public/inspection-capture-web/test/hooks/useSightState.test.tsx diff --git a/packages/private/test-utils/src/__mocks__/@monkvision/inspection-capture-web.tsx b/packages/private/test-utils/src/__mocks__/@monkvision/inspection-capture-web.tsx index 32e841913..7eabc05c9 100644 --- a/packages/private/test-utils/src/__mocks__/@monkvision/inspection-capture-web.tsx +++ b/packages/private/test-utils/src/__mocks__/@monkvision/inspection-capture-web.tsx @@ -2,5 +2,11 @@ export = { /* Actual exports */ /* Mocks */ PhotoCaptureHUDButtons: jest.fn(() => <>), - PhotoCaptureHUDPreview: jest.fn(() => <>), + PhotoCaptureHUDAddDamagePreview: jest.fn(() => <>), + PhotoCaptureHUDSightPreview: jest.fn(() => <>), + SightsCounter: jest.fn(() => <>), + AddDamageButton: jest.fn(() => <>), + SightsSlider: jest.fn(() => <>), + PhotoCaptureHUD: jest.fn(() => <>), + PhotoCapture: jest.fn(() => <>), }; diff --git a/packages/public/inspection-capture-web/src/PhotoCapture.tsx b/packages/public/inspection-capture-web/src/PhotoCapture.tsx index d77920299..a800f6b07 100644 --- a/packages/public/inspection-capture-web/src/PhotoCapture.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCapture.tsx @@ -22,9 +22,6 @@ export function PhotoCapture({ sights }: PhotoCaptureProps) { compressionFormat: CompressionFormat.JPEG, quality: '0.8', }); - const handlePictureTaken = (picture: MonkPicture) => { - console.log('Picture Taken :', picture); - }; const hud = (props: CameraHUDProps) => ; return ( @@ -35,7 +32,7 @@ export function PhotoCapture({ sights }: PhotoCaptureProps) { resolution={state.resolution} format={state.compressionFormat} quality={Number(state.quality)} - onPictureTaken={handlePictureTaken} + onPictureTaken={(picture: MonkPicture) => console.log('Picture Taken :', picture)} />
); diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx index efd1f2052..8ed397a44 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx @@ -5,9 +5,9 @@ import { CameraHUDProps } from '@monkvision/camera-web/lib/Camera/CameraHUD.type import { PhotoCaptureHUDButtons } from './PhotoCaptureHUDButtons'; import { PhotoCaptureHUDAddDamagePreview } from './PhotoCaptureHUDAddDamagePreview'; import { PhotoCaptureHUDSightPreview } from './PhotoCaptureHUDSightPreview'; -import { HUDMode, i18nAddDamage, usePhotoCaptureHUD } from './hook'; -import { useSightState } from '../hooks/useSightState'; -import { useHUDMode } from '../hooks/useHUDMode'; +import { HUDMode, usePhotoCaptureHUD } from './hook'; +import { useSightState, useHUDMode } from '../hooks'; +import { i18nAddDamage } from './i18n'; export interface PhotoCaptureHUDProps extends CameraHUDProps { sights: Sight[]; @@ -37,7 +37,9 @@ export const PhotoCaptureHUD = i18nWrap( ); return (
-
{cameraPreview}
+
+ {cameraPreview} +
{hudPreview} { diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.tsx index 332f49829..34997338a 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.tsx @@ -13,7 +13,7 @@ export function PhotoCaptureHUDAddDamagePreview({ const { t } = useTranslation(); return (
- ; +
); } diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsSlider/SightsSlider.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsSlider/SightsSlider.tsx index 4a8ead760..740b7a8eb 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsSlider/SightsSlider.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsSlider/SightsSlider.tsx @@ -9,7 +9,7 @@ export interface SightsSliderProps { sights: Sight[]; sightSelected: Sight; sightsTaken: Sight[]; - onSightSelected: (sight: Sight) => void; + onSightSelected?: (sight: Sight) => void; } interface SliderButtonProps { @@ -83,7 +83,7 @@ export function SightsSlider({ return (
- {sights?.map((sight) => ( + {sights.map((sight) => ( ({ + PhotoCaptureHUD: jest.fn(() => <>), +})); + +import { render } from '@testing-library/react'; +import { Sight } from '@monkvision/types'; +import { PhotoCapture } from '../src'; +import { + Camera, + CameraFacingMode, + CameraResolution, + CompressionFormat, +} from '@monkvision/camera-web'; + +const sights = [ + { id: 'id', label: { en: 'en', fr: 'fr', de: 'de' } }, + { id: 'id2', label: { en: 'en2', fr: 'fr2', de: 'de2' } }, +] as unknown as Sight[]; + +describe('PhotoCapture component', () => { + afterEach(() => { + jest.clearAllMocks(); + }); + + it('should render a Camera component', () => { + const { unmount } = render(); + + expect(Camera).toHaveBeenCalled(); + + unmount(); + }); + it('should passed states, hud and handlePictureTaken to Camera component', () => { + const CameraMock = Camera as jest.Mock; + const state = { + facingMode: CameraFacingMode.ENVIRONMENT, + resolution: CameraResolution.UHD_4K, + compressionFormat: CompressionFormat.JPEG, + quality: '0.8', + }; + const { unmount } = render(); + + expectPropsOnChildMock(Camera as jest.Mock, { + HUDComponent: expect.any(Function), + }); + const { HUDComponent } = CameraMock.mock.calls[0][0]; + HUDComponent({ sights, cameraPreview: <> , handle: jest.fn() }); + expect(CameraMock.mock.calls[0][0].facingMode).toEqual(state.facingMode); + expect(CameraMock.mock.calls[0][0].resolution).toEqual(state.resolution); + expect(CameraMock.mock.calls[0][0].format).toEqual(state.compressionFormat); + expect(CameraMock.mock.calls[0][0].quality).toEqual(Number(state.quality)); + + unmount(); + }); +}); diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx new file mode 100644 index 000000000..ed0525e6a --- /dev/null +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx @@ -0,0 +1,110 @@ +import { expectPropsOnChildMock } from '@monkvision/test-utils'; + +jest.mock('react-i18next'); +jest.mock('@monkvision/common'); +jest.mock('@monkvision/common-ui-web'); +jest.mock('../../src/PhotoCaptureHUD/i18n', () => ({ + i18nCamera: {}, +})); +jest.mock('../../src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview', () => ({ + PhotoCaptureHUDSightPreview: jest.fn(() => <>), +})); +jest.mock('../../src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview', () => ({ + PhotoCaptureHUDAddDamagePreview: jest.fn(() => <>), +})); +jest.mock('../../src/PhotoCaptureHUD/PhotoCaptureHUDButtons', () => ({ + PhotoCaptureHUDButtons: jest.fn(() => <>), +})); +jest.mock('../../src/hooks', () => ({ + ...jest.requireActual('../../src/hooks'), + useHUDMode: jest.fn(() => ({ mode: 'default', handleAddDamage: jest.fn() })), + useSightState: jest.fn(() => ({ handleSightSelected: jest.fn(), handleSightTaken: jest.fn() })), +})); + +import { render } from '@testing-library/react'; +import { Sight } from '@monkvision/types'; +import { i18nWrap } from '@monkvision/common'; +import { i18nAddDamage } from '../../src/PhotoCaptureHUD/i18n'; +import { PhotoCaptureHUD } from '../../src/PhotoCaptureHUD'; +import { PhotoCaptureHUDSightPreview } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview'; +import { PhotoCaptureHUDButtons } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDButtons'; +import { useHUDMode, useSightState } from '../../src/hooks'; +import { PhotoCaptureHUDAddDamagePreview } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview'; + +const sights = [ + { id: 'id', label: { en: 'en', fr: 'fr', de: 'de' } }, + { id: 'id2', label: { en: 'en2', fr: 'fr2', de: 'de2' } }, +] as unknown as Sight[]; + +describe('PhotoCaptureHUD component', () => { + afterEach(() => { + jest.clearAllMocks(); + }); + + it('should wrap the component with the i18nWrap method', () => { + const { unmount } = render(} />); + + expect(i18nWrap).toHaveBeenCalledWith(expect.any(Function), i18nAddDamage); + unmount(); + }); + + it('should render PhotoCaptureHUDSightPreview and PhotoCaptureHUDButtons by default', () => { + const { unmount } = render(} />); + + expect(PhotoCaptureHUDSightPreview).toHaveBeenCalled(); + expect(PhotoCaptureHUDButtons).toHaveBeenCalled(); + unmount(); + }); + + it('should render PhotoCaptureHUDAddDamagePreview in add_damage mode', () => { + (useHUDMode as jest.Mock).mockImplementationOnce(() => ({ + mode: 'add-damage', + handleAddDamage: jest.fn(), + })); + const { unmount } = render(} />); + + expect(PhotoCaptureHUDAddDamagePreview).toHaveBeenCalled(); + expect(PhotoCaptureHUDButtons).toHaveBeenCalled(); + unmount(); + }); + + it('should get passed handleAddDamage as callback to PhotoCaptureHUDAddDamagePreview', () => { + (useHUDMode as jest.Mock).mockImplementationOnce(() => ({ + mode: 'add-damage', + handleAddDamage: jest.fn(), + })); + const PhotoCaptureHUDAddDamagePreviewMock = PhotoCaptureHUDAddDamagePreview as jest.Mock; + const useHUDModeMock = useHUDMode as jest.Mock; + const { unmount } = render(} />); + + const { handleAddDamage } = useHUDModeMock.mock.results[0].value; + + expectPropsOnChildMock(PhotoCaptureHUDAddDamagePreviewMock, { + onAddDamage: handleAddDamage, + }); + unmount(); + }); + + it('should get passed handleAddDamage and handleSightSelected as callback to PhotoCaptureHUDSightPreview', () => { + const PhotoCaptureHUDSightPreviewMock = PhotoCaptureHUDSightPreview as jest.Mock; + const useHUDModeMock = useHUDMode as jest.Mock; + const useSightStateMock = useSightState as jest.Mock; + const { unmount } = render(} />); + + const { handleAddDamage } = useHUDModeMock.mock.results[0].value; + const { handleSightSelected } = useSightStateMock.mock.results[0].value; + + expectPropsOnChildMock(PhotoCaptureHUDSightPreviewMock, { + onAddDamage: handleAddDamage, + onSightSelected: handleSightSelected, + }); + unmount(); + }); + + it('should render PhotoCaptureHUDButtons component', () => { + const { unmount } = render(} />); + + expect(PhotoCaptureHUDButtons).toHaveBeenCalledTimes(1); + unmount(); + }); +}); diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview.test.tsx new file mode 100644 index 000000000..b1ebdb38c --- /dev/null +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview.test.tsx @@ -0,0 +1,33 @@ +jest.mock('@monkvision/common-ui-web'); +jest.mock('react-i18next'); + +import { render } from '@testing-library/react'; +import { Button } from '@monkvision/common-ui-web'; +import { useTranslation } from 'react-i18next'; +import { PhotoCaptureHUDAddDamagePreview } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview'; + +describe('PhotoCaptureHUDAddDamagePreview component', () => { + afterEach(() => { + jest.clearAllMocks(); + }); + + it('should render a Button', () => { + const onAddDamage = jest.fn(); + const { unmount } = render(); + + expect(Button).toHaveBeenCalled(); + + unmount(); + }); + + it('should translate button text', () => { + const onAddDamage = jest.fn(); + const useTranslationMock = useTranslation as jest.Mock; + const { unmount } = render(); + const { t } = useTranslationMock.mock.results[0].value; + + expect(t).toHaveBeenCalled(); + + unmount(); + }); +}); diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDButtons.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDButtons.test.tsx index 0a562e7fa..9cf1ab596 100644 --- a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDButtons.test.tsx +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDButtons.test.tsx @@ -6,7 +6,7 @@ import { InteractiveStatus } from '@monkvision/types'; import { MonkPicture } from '@monkvision/camera-web'; import { TakePictureButton, Icon } from '@monkvision/common-ui-web'; import { fireEvent, render, screen } from '@testing-library/react'; -import { PhotoCaptureHUDButtons } from '../../src'; +import { PhotoCaptureHUDButtons } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDButtons'; import { captureButtonForegroundColors } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDButtons/CaptureHUDButtons.styles'; const GALLERY_BTN_TEST_ID = 'monk-gallery-btn'; diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDPreview.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDPreview.test.tsx deleted file mode 100644 index 154ccef05..000000000 --- a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDPreview.test.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { Sight } from '@monkvision/types'; - -jest.mock('@monkvision/sights'); - -import { render } from '@testing-library/react'; -import { PhotoCaptureHUDPreview } from '../../src'; - -const sights = [ - { id: 'id', label: { en: 'en', fr: 'fr', de: 'de' } }, - { id: 'id2', label: { en: 'en2', fr: 'fr2', de: 'de2' } }, -] as unknown as Sight[]; -const sightsTaken = [...sights].slice(0, 1); -const currentSightSliderIndex = 0; - -describe('PhotoCaptureHUDPreview component', () => { - it('render HUDPreview with no props', () => { - // TODO: how can I test this? - const { unmount } = render( - , - ); - unmount(); - }); -}); diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton.test.tsx new file mode 100644 index 000000000..131b2a82b --- /dev/null +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton.test.tsx @@ -0,0 +1,44 @@ +const { HUDMode } = jest.requireActual('../../../src/PhotoCaptureHUD/hook'); + +jest.mock('@monkvision/common-ui-web'); +jest.mock('react-i18next'); +jest.mock('../../../src/PhotoCaptureHUD/hook', () => ({ + i18nAddDamage: {}, + HUDMode, +})); + +import { render } from '@testing-library/react'; +import { Button } from '@monkvision/common-ui-web'; +import { useTranslation } from 'react-i18next'; +import { expectPropsOnChildMock } from '@monkvision/test-utils'; +import { AddDamageButton } from '../../../src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton'; + +describe('AddDamage component', () => { + afterEach(() => { + jest.clearAllMocks(); + }); + it('should get passed onAddDamage callback', () => { + const buttonMock = Button as unknown as jest.Mock; + const onAddDamage = jest.fn(); + + const { unmount } = render(); + expect(buttonMock).toHaveBeenCalled(); + expectPropsOnChildMock(buttonMock, { onClick: expect.any(Function) }); + const onClickProp = buttonMock.mock.calls[0][0].onClick; + onClickProp(); + expect(onAddDamage).toBeCalledWith(HUDMode.ADD_DAMAGE); + + unmount(); + }); + + it('should call t function to translate the button text', () => { + const onAddDamage = jest.fn(); + + const { unmount } = render(); + + const { t } = (useTranslation as jest.Mock).mock.results[0].value; + expect(t).toHaveBeenCalled(); + + unmount(); + }); +}); diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.test.tsx new file mode 100644 index 000000000..d2e4e735e --- /dev/null +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.test.tsx @@ -0,0 +1,39 @@ +jest.mock('../../../src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsCounter', () => ({ + SightsCounter: jest.fn(() => <>), +})); +jest.mock('../../../src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton', () => ({ + AddDamageButton: jest.fn(() => <>), +})); +jest.mock('../../../src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsSlider', () => ({ + SightsSlider: jest.fn(() => <>), +})); + +import { render } from '@testing-library/react'; +import { Sight } from '@monkvision/types'; +import { PhotoCaptureHUDSightPreview } from '../../../src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview'; +import { SightsCounter } from '../../../src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsCounter'; +import { SightsSlider } from '../../../src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsSlider'; +import { AddDamageButton } from '../../../src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton'; + +const sights = [ + { id: 'id', label: { en: 'en', fr: 'fr', de: 'de' } }, + { id: 'id2', label: { en: 'en2', fr: 'fr2', de: 'de2' } }, +] as unknown as Sight[]; +const sightsTaken = [...sights].slice(0, 1); + +describe('PhotoCaptureHUDPreview component', () => { + it('should render 4 components: SightOverlay, SightsCounter, AddDamageButton, SightsSlider', () => { + const { unmount } = render( + , + ); + + expect(SightsCounter).toHaveBeenCalled(); + expect(AddDamageButton).toHaveBeenCalled(); + expect(SightsSlider).toHaveBeenCalled(); + unmount(); + }); +}); diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsCounter.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsCounter.test.tsx similarity index 58% rename from packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsCounter.test.tsx rename to packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsCounter.test.tsx index ea94905eb..dbc71dbf3 100644 --- a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsCounter.test.tsx +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsCounter.test.tsx @@ -1,13 +1,13 @@ import { render } from '@testing-library/react'; -import { PhotoCaptureHUDSightCounter } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightCounter'; +import { SightsCounter } from '../../../src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsCounter'; -describe('PhotoCaptureHUDSightsCounter component', () => { +describe('SightsCounter component', () => { it('render counter properly when sightsTaken and totalSights is provided', () => { const totalSights = 10; const sightsTaken = 5; const { getByText, unmount } = render( - , + , ); const expectedText = `${sightsTaken} / ${totalSights}`; expect(getByText(expectedText).textContent).toEqual(expectedText); diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsSlider.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsSlider.test.tsx similarity index 72% rename from packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsSlider.test.tsx rename to packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsSlider.test.tsx index 934f6b7e5..d17f63d25 100644 --- a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsSlider.test.tsx +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsSlider.test.tsx @@ -7,28 +7,22 @@ import { expectPropsOnChildMock } from '@monkvision/test-utils'; import { Button } from '@monkvision/common-ui-web'; import { useSightLabel } from '@monkvision/common'; import { Sight } from '@monkvision/types'; -import { PhotoCaptureHUDSightSlider } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightSlider'; +import { SightsSlider } from '../../../src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsSlider'; const sights = [ { id: 'id', label: { en: 'en', fr: 'fr', de: 'de' } }, { id: 'id2', label: { en: 'en2', fr: 'fr2', de: 'de2' } }, ] as unknown as Sight[]; const sightsTaken = [...sights].slice(0, 1); -const currentSightSliderIndex = 0; -describe('PhotoCaptureHUDSightsSlider component', () => { +describe('SightsSlider component', () => { afterEach(() => { jest.clearAllMocks(); }); it('should render a slider of buttons when sights is provided', () => { const { unmount } = render( - , + , ); expect(Button).toHaveBeenCalledTimes(sights.length); @@ -39,12 +33,11 @@ describe('PhotoCaptureHUDSightsSlider component', () => { const buttonMock = Button as unknown as jest.Mock; const onSightSelected = jest.fn(); const { unmount } = render( - , ); @@ -53,7 +46,7 @@ describe('PhotoCaptureHUDSightsSlider component', () => { expectPropsOnChildMock(buttonMock, { onClick: expect.any(Function) }); const onClickProp = buttonMock.mock.calls[index][0].onClick; onClickProp(); - expect(onSightSelected).toHaveBeenCalledWith(sight, index); + expect(onSightSelected).toHaveBeenCalledWith(sight); }); unmount(); @@ -63,12 +56,7 @@ describe('PhotoCaptureHUDSightsSlider component', () => { it('should have primary-base as primary color if button selected', () => { const buttonMock = Button as unknown as jest.Mock; const { unmount } = render( - , + , ); sights.forEach((sight, index) => { expectPropsOnChildMock(buttonMock, { primaryColor: expect.any(String) }); @@ -95,12 +83,7 @@ describe('PhotoCaptureHUDSightsSlider component', () => { it('should call label function to translate the sight label', () => { const useSightLabelMock = useSightLabel as jest.Mock; const { unmount } = render( - , + , ); const { label } = useSightLabelMock.mock.results[0].value; sights.forEach(() => { diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsOverlay.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsOverlay.test.tsx deleted file mode 100644 index 3f7da2c3f..000000000 --- a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightsOverlay.test.tsx +++ /dev/null @@ -1,15 +0,0 @@ -jest.mock('@monkvision/common-ui-web'); -jest.mock('@monkvision/sights', () => ({ sights: { sight1: {}, sight2: {} } })); - -import { render } from '@testing-library/react'; -import { SightOverlay } from '@monkvision/common-ui-web'; -import { sights } from '@monkvision/sights'; -import { PhotoCaptureHUDSightOverlay } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDSightOverlay/PhotoCaptureHUDSightOverlay'; - -describe('PhotoCaptureHUDSightsOverlay component', () => { - it('should render Sights Overlay when sight is provided', () => { - const { unmount } = render(); - expect(SightOverlay).toHaveBeenCalled(); - unmount(); - }); -}); diff --git a/packages/public/inspection-capture-web/test/hooks/useHUDMode.test.tsx b/packages/public/inspection-capture-web/test/hooks/useHUDMode.test.tsx new file mode 100644 index 000000000..a1840de31 --- /dev/null +++ b/packages/public/inspection-capture-web/test/hooks/useHUDMode.test.tsx @@ -0,0 +1,29 @@ +import { renderHook } from '@testing-library/react-hooks'; +import { act } from '@testing-library/react'; +import { useHUDMode } from '../../src/hooks'; +import { HUDMode } from '../../src/PhotoCaptureHUD/hook'; + +describe('useHUDMode hook', () => { + it('should return as SightSelected default state', () => { + const { result, unmount } = renderHook(() => useHUDMode()); + + expect(result.current.mode).toEqual(HUDMode.DEFAULT); + unmount(); + }); + + it('should return a empty array of sights as SightTaken default state', () => { + const { result, unmount } = renderHook(() => useHUDMode()); + + expect(typeof result.current.handleAddDamage).toEqual('function'); + unmount(); + }); + it('should update mode with handleAddDamage', () => { + const { result } = renderHook(() => useHUDMode()); + + act(() => { + result.current.handleAddDamage(HUDMode.ADD_DAMAGE); + }); + + expect(result.current.mode).toBe(HUDMode.ADD_DAMAGE); + }); +}); diff --git a/packages/public/inspection-capture-web/test/hooks/useSightState.test.tsx b/packages/public/inspection-capture-web/test/hooks/useSightState.test.tsx new file mode 100644 index 000000000..85e0c5375 --- /dev/null +++ b/packages/public/inspection-capture-web/test/hooks/useSightState.test.tsx @@ -0,0 +1,54 @@ +jest.mock('@monkvision/common'); + +import { act } from '@testing-library/react'; +import { renderHook } from '@testing-library/react-hooks'; +import { Sight } from '@monkvision/types'; +import { useSightState } from '../../src/hooks'; + +const sights = [ + { id: 'id', label: { en: 'en', fr: 'fr', de: 'de' } }, + { id: 'id2', label: { en: 'en2', fr: 'fr2', de: 'de2' } }, +] as unknown as Sight[]; + +describe('useSightState hook', () => { + afterEach(() => { + jest.clearAllMocks(); + }); + it('should initialize with the first sight as selected and an empty list of taken sights', () => { + const { result, unmount } = renderHook(() => useSightState(sights)); + + expect(result.current.sightSelected).toEqual(sights[0]); + expect(result.current.sightsTaken).toEqual([]); + expect(typeof result.current.handleSightTaken).toEqual('function'); + expect(typeof result.current.handleSightSelected).toEqual('function'); + unmount(); + }); + it('should update sightSelected when handleSightSelected is called', () => { + const { result } = renderHook(() => useSightState(sights)); + + const newSelectedSight = sights[1]; + act(() => { + result.current.handleSightSelected(newSelectedSight); + }); + + expect(result.current.sightSelected).toEqual(newSelectedSight); + }); + + it('should update sightsTaken and sightSelected when handleSightTaken is called', () => { + const { result } = renderHook(() => useSightState(sights)); + + act(() => { + result.current.handleSightTaken(); + }); + + expect(result.current.sightsTaken).toEqual([sights[0]]); + expect(result.current.sightSelected).toEqual(sights[1]); + + act(() => { + result.current.handleSightTaken(); + }); + + expect(result.current.sightsTaken).toEqual([sights[0], sights[1]]); + expect(result.current.sightSelected).toEqual(sights[1]); + }); +}); From 3abe6f84d48405d7f9ab8a70b72609d6cc134f4a Mon Sep 17 00:00:00 2001 From: David_LY Date: Tue, 2 Jan 2024 16:38:44 +0100 Subject: [PATCH 28/33] SightOverlay stays in CameraPreview frame in both landscape and portrait mode. --- .../src/PhotoCaptureHUD/PhotoCaptureHUD.styles.ts | 5 +---- .../src/PhotoCaptureHUD/PhotoCaptureHUD.tsx | 2 +- .../PhotoCaptureHUDAddDamagePreview.styles.ts | 7 +++---- .../PhotoCaptureHUDButtons/CaptureHUDButtons.styles.ts | 2 +- .../PhotoCaptureHUDSightPreview.styles.ts | 10 ++++++---- 5 files changed, 12 insertions(+), 14 deletions(-) diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.styles.ts index e09757ba0..67c29333d 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.styles.ts +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.styles.ts @@ -10,18 +10,15 @@ export const styles: Styles = { justifyContent: 'flex-end', position: 'relative', alignSelf: 'stretch', - // flex: '1', }, containerPortrait: { __media: { portrait: true }, flexDirection: 'column', }, previewContainer: { - position: 'absolute', + position: 'relative', width: '100%', height: '100%', - top: 0, - left: 0, zIndex: 9, }, }; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx index 8ed397a44..eef4a20dc 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx @@ -39,8 +39,8 @@ export const PhotoCaptureHUD = i18nWrap(
{cameraPreview} + {hudPreview}
- {hudPreview} { handle?.takePicture?.(); diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.styles.ts index 20c51600d..9a73abc7d 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.styles.ts +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.styles.ts @@ -2,22 +2,21 @@ import { Styles } from '@monkvision/types'; export const styles: Styles = { container: { - position: 'relative', + position: 'absolute', display: 'flex', alignSelf: 'stretch', justifyContent: 'center', flexDirection: 'column', - backgroundColor: 'green', flex: '1', }, top: { - position: 'relative', + position: 'absolute', display: 'flex', alignSelf: 'flex-start', flexDirection: 'row', justifyContent: 'space-between', margin: '10px', - zIndex: '9', + zIndex: '1', top: '0', right: '0', }, diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDButtons/CaptureHUDButtons.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDButtons/CaptureHUDButtons.styles.ts index a1717710a..426e3fcff 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDButtons/CaptureHUDButtons.styles.ts +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDButtons/CaptureHUDButtons.styles.ts @@ -15,7 +15,7 @@ export const styles: Styles = { display: 'flex', alignSelf: 'stretch', alignItems: 'center', - justifyContent: 'space-between', + justifyContent: 'space-evenly', flexDirection: 'column', padding: '30px 40px', backgroundColor: '#000000', diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.styles.ts index 41b4a50ca..35facd89b 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.styles.ts +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.styles.ts @@ -2,13 +2,14 @@ import { Styles } from '@monkvision/types'; export const styles: Styles = { container: { - position: 'relative', + position: 'absolute', display: 'flex', - alignSelf: 'stretch', justifyContent: 'center', flexDirection: 'column', - backgroundColor: 'green', - flex: '1', + top: '0', + right: '0', + left: '0', + bottom: '0', }, top: { position: 'absolute', @@ -23,6 +24,7 @@ export const styles: Styles = { left: '0', }, overlay: { + aspectRatio: '16/9', zIndex: '9', }, }; From 6244d516b299e76fb169bc35c4bad5819870f9c0 Mon Sep 17 00:00:00 2001 From: David_LY Date: Tue, 2 Jan 2024 18:26:27 +0100 Subject: [PATCH 29/33] SightOverlay equals CameraPreview in aspect ratio --- .../src/PhotoCapture.tsx | 28 ++++++------------- .../PhotoCaptureHUDSightPreview.styles.ts | 1 - .../PhotoCaptureHUDSightPreview.tsx | 4 ++- .../PhotoCaptureHUDSightPreview/hook.ts | 25 +++++++++++++++++ .../src/hooks/useCameraConfig.ts | 27 ++++++++++++++++++ 5 files changed, 63 insertions(+), 22 deletions(-) create mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/hook.ts create mode 100644 packages/public/inspection-capture-web/src/hooks/useCameraConfig.ts diff --git a/packages/public/inspection-capture-web/src/PhotoCapture.tsx b/packages/public/inspection-capture-web/src/PhotoCapture.tsx index a800f6b07..d325c3663 100644 --- a/packages/public/inspection-capture-web/src/PhotoCapture.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCapture.tsx @@ -1,37 +1,25 @@ -import React, { useState } from 'react'; -import { - Camera, - CameraFacingMode, - CameraHUDProps, - CameraResolution, - CompressionFormat, - MonkPicture, -} from '@monkvision/camera-web'; +import React from 'react'; +import { Camera, CameraHUDProps, MonkPicture } from '@monkvision/camera-web'; import { Sight } from '@monkvision/types'; import { PhotoCaptureHUD } from './PhotoCaptureHUD'; import { styles } from './PhotoCapture.styles'; +import { useCameraConfig } from './hooks/useCameraConfig'; export interface PhotoCaptureProps { sights: Sight[]; } export function PhotoCapture({ sights }: PhotoCaptureProps) { - const [state] = useState({ - facingMode: CameraFacingMode.ENVIRONMENT, - resolution: CameraResolution.UHD_4K, - compressionFormat: CompressionFormat.JPEG, - quality: '0.8', - }); - + const { cameraState } = useCameraConfig(); const hud = (props: CameraHUDProps) => ; return (
console.log('Picture Taken :', picture)} />
diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.styles.ts index 35facd89b..12532c003 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.styles.ts +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.styles.ts @@ -24,7 +24,6 @@ export const styles: Styles = { left: '0', }, overlay: { - aspectRatio: '16/9', zIndex: '9', }, }; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.tsx index 9f34a7aa1..7589e818d 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.tsx @@ -5,6 +5,7 @@ import { SightsCounter } from './SightsCounter'; import { HUDMode } from '../hook'; import { styles } from './PhotoCaptureHUDSightPreview.styles'; import { AddDamageButton } from './AddDamageButton'; +import { usePhotoCaptureHUDSightPreview } from './hook'; export interface PhotoCaptureHUDPreviewProps { sights: Sight[]; @@ -21,9 +22,10 @@ export function PhotoCaptureHUDSightPreview({ onAddDamage = () => {}, sightsTaken, }: PhotoCaptureHUDPreviewProps) { + const style = usePhotoCaptureHUDSightPreview(); return (
- ; + ;
diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/hook.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/hook.ts new file mode 100644 index 000000000..66e044153 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/hook.ts @@ -0,0 +1,25 @@ +import { CSSProperties } from 'react'; +import { styles } from './PhotoCaptureHUDSightPreview.styles'; +import { useCameraConfig } from '../../hooks/useCameraConfig'; + +export interface PhotoCaptureHUDSightPreview { + container: CSSProperties; + top: CSSProperties; + overlay: CSSProperties; +} + +export function usePhotoCaptureHUDSightPreview(): PhotoCaptureHUDSightPreview { + const { getCameraDimensions } = useCameraConfig(); + return { + container: { + ...styles['container'], + }, + top: { + ...styles['top'], + }, + overlay: { + ...styles['overlay'], + aspectRatio: `${getCameraDimensions().width}/${getCameraDimensions().height}`, + }, + }; +} diff --git a/packages/public/inspection-capture-web/src/hooks/useCameraConfig.ts b/packages/public/inspection-capture-web/src/hooks/useCameraConfig.ts new file mode 100644 index 000000000..f83d2b672 --- /dev/null +++ b/packages/public/inspection-capture-web/src/hooks/useCameraConfig.ts @@ -0,0 +1,27 @@ +import { useState } from 'react'; +import { CameraFacingMode, CameraResolution, CompressionFormat } from '@monkvision/camera-web'; + +export function useCameraConfig() { + const [cameraState] = useState({ + facingMode: CameraFacingMode.ENVIRONMENT, + resolution: CameraResolution.UHD_4K, + compressionFormat: CompressionFormat.JPEG, + quality: '0.8', + }); + + const CAMERA_RESOLUTION_SIZES: { + [key in CameraResolution]: { width: number; height: number }; + } = { + [CameraResolution.QNHD_180P]: { width: 320, height: 180 }, + [CameraResolution.NHD_360P]: { width: 640, height: 360 }, + [CameraResolution.HD_720P]: { width: 1280, height: 720 }, + [CameraResolution.FHD_1080P]: { width: 1920, height: 1080 }, + [CameraResolution.QHD_2K]: { width: 2560, height: 1440 }, + [CameraResolution.UHD_4K]: { width: 3840, height: 2160 }, + }; + + function getCameraDimensions() { + return CAMERA_RESOLUTION_SIZES[cameraState.resolution]; + } + return { cameraState, getCameraDimensions }; +} From b59f3ca65d9a798b226d54bfa37faef5aeebd64d Mon Sep 17 00:00:00 2001 From: David_LY Date: Wed, 3 Jan 2024 22:11:27 +0100 Subject: [PATCH 30/33] fixing PR (check comments) --- .../src/PhotoCapture.tsx | 7 +- .../src/PhotoCaptureHUD/PhotoCaptureHUD.tsx | 76 +++++++++---------- .../PhotoCaptureHUDAddDamagePreview.styles.ts | 3 - .../PhotoCaptureHUDAddDamagePreview.tsx | 16 ++-- .../AddDamageButton/AddDamageButton.styles.ts | 7 -- .../AddDamageButton/AddDamageButton.tsx | 11 ++- .../PhotoCaptureHUDSightPreview.tsx | 18 ++--- .../SightsCounter/SightsCounter.styles.ts | 1 - .../SightsCounter/SightsCounter.tsx | 12 ++- .../SightsSlider/SightsSlider.tsx | 32 ++++---- .../PhotoCaptureHUDSightPreview/hook.ts | 4 +- .../src/PhotoCaptureHUD/hook.ts | 4 +- .../src/PhotoCaptureHUD/translations/de.json | 4 - .../src/PhotoCaptureHUD/translations/en.json | 4 - .../src/PhotoCaptureHUD/translations/fr.json | 4 - .../inspection-capture-web/src/hooks/index.ts | 1 - .../src/hooks/useHUDMode.ts | 11 --- .../src/hooks/useSightState.ts | 36 ++++----- .../src/{PhotoCaptureHUD => }/i18n.ts | 0 .../src/translations/de.json | 12 +++ .../src/translations/en.json | 12 +++ .../src/translations/fr.json | 12 +++ .../test/PhotoCapture.test.tsx | 15 +++- .../PhotoCaptureHUD/PhotoCaptureHUD.test.tsx | 64 +--------------- .../PhotoCaptureHUDAddDamagePreview.test.tsx | 8 +- .../AddDamageButton.test.tsx | 1 + .../PhotoCaptureHUDSightPreview.test.tsx | 2 +- .../SightsSlider.test.tsx | 10 +-- .../test/hooks/useHUDMode.test.tsx | 29 ------- .../test/hooks/useSightState.test.tsx | 14 ++-- 30 files changed, 177 insertions(+), 253 deletions(-) delete mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton/AddDamageButton.styles.ts delete mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/de.json delete mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/en.json delete mode 100644 packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/fr.json delete mode 100644 packages/public/inspection-capture-web/src/hooks/useHUDMode.ts rename packages/public/inspection-capture-web/src/{PhotoCaptureHUD => }/i18n.ts (100%) create mode 100644 packages/public/inspection-capture-web/src/translations/de.json create mode 100644 packages/public/inspection-capture-web/src/translations/en.json create mode 100644 packages/public/inspection-capture-web/src/translations/fr.json delete mode 100644 packages/public/inspection-capture-web/test/hooks/useHUDMode.test.tsx diff --git a/packages/public/inspection-capture-web/src/PhotoCapture.tsx b/packages/public/inspection-capture-web/src/PhotoCapture.tsx index d325c3663..50f8e4a76 100644 --- a/packages/public/inspection-capture-web/src/PhotoCapture.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCapture.tsx @@ -1,15 +1,16 @@ -import React from 'react'; import { Camera, CameraHUDProps, MonkPicture } from '@monkvision/camera-web'; import { Sight } from '@monkvision/types'; +import { i18nWrap } from '@monkvision/common'; import { PhotoCaptureHUD } from './PhotoCaptureHUD'; import { styles } from './PhotoCapture.styles'; import { useCameraConfig } from './hooks/useCameraConfig'; +import { i18nAddDamage } from './i18n'; export interface PhotoCaptureProps { sights: Sight[]; } -export function PhotoCapture({ sights }: PhotoCaptureProps) { +export const PhotoCapture = i18nWrap(({ sights }: PhotoCaptureProps) => { const { cameraState } = useCameraConfig(); const hud = (props: CameraHUDProps) => ; return ( @@ -24,4 +25,4 @@ export function PhotoCapture({ sights }: PhotoCaptureProps) { />
); -} +}, i18nAddDamage); diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx index eef4a20dc..4aa9dd364 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx @@ -1,54 +1,48 @@ -import { useMemo } from 'react'; +import { useMemo, useState } from 'react'; import { Sight } from '@monkvision/types'; -import { i18nWrap } from '@monkvision/common'; import { CameraHUDProps } from '@monkvision/camera-web/lib/Camera/CameraHUD.types'; import { PhotoCaptureHUDButtons } from './PhotoCaptureHUDButtons'; import { PhotoCaptureHUDAddDamagePreview } from './PhotoCaptureHUDAddDamagePreview'; import { PhotoCaptureHUDSightPreview } from './PhotoCaptureHUDSightPreview'; -import { HUDMode, usePhotoCaptureHUD } from './hook'; -import { useSightState, useHUDMode } from '../hooks'; -import { i18nAddDamage } from './i18n'; +import { HUDMode, usePhotoCaptureHUDStyle } from './hook'; +import { useSightState } from '../hooks'; export interface PhotoCaptureHUDProps extends CameraHUDProps { sights: Sight[]; } -export const PhotoCaptureHUD = i18nWrap( - ({ sights, cameraPreview, handle }: PhotoCaptureHUDProps) => { - const { sightSelected, handleSightSelected, sightsTaken, handleSightTaken } = - useSightState(sights); - const style = usePhotoCaptureHUD(); - const { mode, handleAddDamage } = useHUDMode(); +export function PhotoCaptureHUD({ sights, cameraPreview, handle }: PhotoCaptureHUDProps) { + const [mode, setMode] = useState(HUDMode.DEFAULT); + const { selectedSight, setSelectedSight, sightsTaken, handleSightTaken } = useSightState(sights); + const style = usePhotoCaptureHUDStyle(); - const hudPreview = useMemo( - () => - mode === HUDMode.ADD_DAMAGE ? ( - - ) : ( - - ), - [mode, sightSelected, sightsTaken], - ); - return ( -
-
- {cameraPreview} - {hudPreview} -
- { - handle?.takePicture?.(); - handleSightTaken(); - }} + const hudPreview = useMemo( + () => + mode === HUDMode.ADD_DAMAGE ? ( + setMode(HUDMode.DEFAULT)} /> + ) : ( + setMode(HUDMode.ADD_DAMAGE)} /> + ), + [mode, selectedSight, sightsTaken], + ); + return ( +
+
+ {cameraPreview} + {hudPreview}
- ); - }, - i18nAddDamage, -); + { + handle?.takePicture?.(); + handleSightTaken(); + }} + /> +
+ ); +} diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.styles.ts index 9a73abc7d..93bd047cc 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.styles.ts +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.styles.ts @@ -20,7 +20,4 @@ export const styles: Styles = { top: '0', right: '0', }, - addDamageButton: { - backgroundColor: 'rgba(52, 53, 63, 0.64)', - }, }; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.tsx index 34997338a..8687173e2 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.tsx @@ -1,19 +1,23 @@ import { Button } from '@monkvision/common-ui-web'; import { useTranslation } from 'react-i18next'; +import { getHexFromRGBA, getRGBAFromString, useMonkTheme } from '@monkvision/common'; import { styles } from './PhotoCaptureHUDAddDamagePreview.styles'; -import { HUDMode } from '../hook'; export interface PhotoCaptureHUDAddDamageMenuProps { - onAddDamage: (newMode: HUDMode) => void; + onCancel: () => void; } -export function PhotoCaptureHUDAddDamagePreview({ - onAddDamage, -}: PhotoCaptureHUDAddDamageMenuProps) { +export function PhotoCaptureHUDAddDamagePreview({ onCancel }: PhotoCaptureHUDAddDamageMenuProps) { const { t } = useTranslation(); + const { palette } = useMonkTheme(); + + const bgColor = getHexFromRGBA({ ...getRGBAFromString(palette.secondary.xdark), a: 0.64 }); + return (
- +
); } diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton/AddDamageButton.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton/AddDamageButton.styles.ts deleted file mode 100644 index 9fc65db6c..000000000 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton/AddDamageButton.styles.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Styles } from '@monkvision/types'; - -export const styles: Styles = { - button: { - backgroundColor: 'rgba(52, 53, 63, 0.64)', - }, -}; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton/AddDamageButton.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton/AddDamageButton.tsx index 6a9c9a423..6ea0e0ac9 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton/AddDamageButton.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton/AddDamageButton.tsx @@ -1,6 +1,6 @@ import { Button } from '@monkvision/common-ui-web'; import { useTranslation } from 'react-i18next'; -import { styles } from './AddDamageButton.styles'; +import { getHexFromRGBA, useMonkTheme, getRGBAFromString } from '@monkvision/common'; import { HUDMode } from '../../hook'; export interface AddDamageButtonProps { @@ -9,15 +9,18 @@ export interface AddDamageButtonProps { export function AddDamageButton({ onAddDamage }: AddDamageButtonProps) { const { t } = useTranslation(); + const { palette } = useMonkTheme(); + + const bgColor = getHexFromRGBA({ ...getRGBAFromString(palette.secondary.xdark), a: 0.64 }); + return ( ); } diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.tsx index 7589e818d..045fa5dc0 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.tsx @@ -5,36 +5,36 @@ import { SightsCounter } from './SightsCounter'; import { HUDMode } from '../hook'; import { styles } from './PhotoCaptureHUDSightPreview.styles'; import { AddDamageButton } from './AddDamageButton'; -import { usePhotoCaptureHUDSightPreview } from './hook'; +import { usePhotoCaptureHUDSightPreviewStyle } from './hook'; export interface PhotoCaptureHUDPreviewProps { sights: Sight[]; - sightSelected: Sight; - onSightSelected?: (sight: Sight) => void; + selectedSight: Sight; + onSelectedSight?: (sight: Sight) => void; onAddDamage?: (newMode: HUDMode) => void; sightsTaken: Sight[]; } export function PhotoCaptureHUDSightPreview({ sights, - sightSelected, - onSightSelected = () => {}, + selectedSight, + onSelectedSight = () => {}, onAddDamage = () => {}, sightsTaken, }: PhotoCaptureHUDPreviewProps) { - const style = usePhotoCaptureHUDSightPreview(); + const style = usePhotoCaptureHUDSightPreviewStyle(); return (
- ; +
); diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsCounter/SightsCounter.styles.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsCounter/SightsCounter.styles.ts index ab72099e3..93ecea605 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsCounter/SightsCounter.styles.ts +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsCounter/SightsCounter.styles.ts @@ -8,7 +8,6 @@ export const styles: Styles = { justifyContent: 'center', padding: '6px 12px', borderRadius: '8px', - backgroundColor: 'rgba(28, 28, 30, 0.64)', zIndex: '9', }, }; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsCounter/SightsCounter.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsCounter/SightsCounter.tsx index 8bc645c25..202b73cf6 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsCounter/SightsCounter.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsCounter/SightsCounter.tsx @@ -1,10 +1,18 @@ +import { getHexFromRGBA, getRGBAFromString, useMonkTheme } from '@monkvision/common'; import { styles } from './SightsCounter.styles'; export interface SightsCounterProps { totalSights: number; sightsTaken: number; } - export function SightsCounter({ totalSights, sightsTaken }: SightsCounterProps) { - return
{`${sightsTaken} / ${totalSights}`}
; + const { palette } = useMonkTheme(); + + const bgColor = getHexFromRGBA({ ...getRGBAFromString(palette.secondary.xdark), a: 0.64 }); + + return ( +
{`${sightsTaken} / ${totalSights}`}
+ ); } diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsSlider/SightsSlider.tsx b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsSlider/SightsSlider.tsx index 740b7a8eb..0db7b55aa 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsSlider/SightsSlider.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsSlider/SightsSlider.tsx @@ -7,27 +7,27 @@ import { styles } from './SightsSlider.styles'; export interface SightsSliderProps { sights: Sight[]; - sightSelected: Sight; + selectedSight: Sight; sightsTaken: Sight[]; - onSightSelected?: (sight: Sight) => void; + onSelectedSight?: (sight: Sight) => void; } interface SliderButtonProps { sight: Sight; - sightSelected: Sight; + selectedSight: Sight; sightsTaken: Sight[]; - onSightSelected: (sight: Sight) => void; + onSelectedSight: (sight: Sight) => void; label: (sight: Sight) => string; } function SliderButton({ sight, - sightSelected, + selectedSight, sightsTaken, - onSightSelected, + onSelectedSight, label, }: SliderButtonProps) { - const isSelected = sight.id === sightSelected.id; + const isSelected = sight.id === selectedSight.id; const isTaken = sightsTaken.some((sightTaken) => sightTaken.id === sight.id); let primaryColor = 'secondary-xdark'; @@ -45,9 +45,7 @@ function SliderButton({ style={styles['button']} icon={icon} primaryColor={primaryColor} - onClick={() => { - onSightSelected(sight); - }} + onClick={() => onSelectedSight(sight)} data-testid={`sight-btn-${sight.id}`} > {label(sight)} @@ -55,7 +53,7 @@ function SliderButton({ ); } -const onScrollToSelected = ( +const scrollToSelectedSight = ( ref: RefObject, index: number, smooth: boolean, @@ -70,16 +68,16 @@ const onScrollToSelected = ( export function SightsSlider({ sights, - sightSelected, + selectedSight, sightsTaken, - onSightSelected = () => {}, + onSelectedSight = () => {}, }: SightsSliderProps) { const ref = useRef(null); const { label } = useSightLabel({ labels }); useEffect(() => { - onScrollToSelected(ref, sights.indexOf(sightSelected), true); - }, [sightSelected, sightsTaken]); + scrollToSelectedSight(ref, sights.indexOf(selectedSight), true); + }, [selectedSight, sightsTaken]); return (
@@ -87,9 +85,9 @@ export function SightsSlider({ ))} diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/hook.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/hook.ts index 66e044153..f95faa4ee 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/hook.ts +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/hook.ts @@ -2,13 +2,13 @@ import { CSSProperties } from 'react'; import { styles } from './PhotoCaptureHUDSightPreview.styles'; import { useCameraConfig } from '../../hooks/useCameraConfig'; -export interface PhotoCaptureHUDSightPreview { +export interface PhotoCaptureHUDSightPreviewStyle { container: CSSProperties; top: CSSProperties; overlay: CSSProperties; } -export function usePhotoCaptureHUDSightPreview(): PhotoCaptureHUDSightPreview { +export function usePhotoCaptureHUDSightPreviewStyle(): PhotoCaptureHUDSightPreviewStyle { const { getCameraDimensions } = useCameraConfig(); return { container: { diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/hook.ts b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/hook.ts index 051867beb..eeb2ea7b9 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/hook.ts +++ b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/hook.ts @@ -16,12 +16,12 @@ export enum HUDMode { ADD_DAMAGE = 'add-damage', } -export interface PhotoCaptureHUD { +export interface PhotoCaptureHUDStyle { container: CSSProperties; previewContainer: CSSProperties; } -export function usePhotoCaptureHUD(): PhotoCaptureHUD { +export function usePhotoCaptureHUDStyle(): PhotoCaptureHUDStyle { const { responsive } = useResponsiveStyle(); return { container: { diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/de.json b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/de.json deleted file mode 100644 index 61d65cc21..000000000 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/de.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "damage": "Schaden", - "cancel": "stornieren" -} diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/en.json b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/en.json deleted file mode 100644 index ae5f387c0..000000000 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/en.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "damage": "Damage", - "cancel": "Cancel" -} diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/fr.json b/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/fr.json deleted file mode 100644 index e50210074..000000000 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/translations/fr.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "damage": "Dégât", - "cancel": "Annuler" -} diff --git a/packages/public/inspection-capture-web/src/hooks/index.ts b/packages/public/inspection-capture-web/src/hooks/index.ts index b777597fb..675d79108 100644 --- a/packages/public/inspection-capture-web/src/hooks/index.ts +++ b/packages/public/inspection-capture-web/src/hooks/index.ts @@ -1,2 +1 @@ export * from './useSightState'; -export * from './useHUDMode'; diff --git a/packages/public/inspection-capture-web/src/hooks/useHUDMode.ts b/packages/public/inspection-capture-web/src/hooks/useHUDMode.ts deleted file mode 100644 index 0b6108517..000000000 --- a/packages/public/inspection-capture-web/src/hooks/useHUDMode.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { useState } from 'react'; -import { HUDMode } from '../PhotoCaptureHUD/hook'; - -export function useHUDMode() { - const [mode, setMode] = useState(HUDMode.DEFAULT); - - const handleAddDamage = (newMode: HUDMode) => { - setMode(newMode); - }; - return { mode, handleAddDamage }; -} diff --git a/packages/public/inspection-capture-web/src/hooks/useSightState.ts b/packages/public/inspection-capture-web/src/hooks/useSightState.ts index 3b03a1fd9..29629b50a 100644 --- a/packages/public/inspection-capture-web/src/hooks/useSightState.ts +++ b/packages/public/inspection-capture-web/src/hooks/useSightState.ts @@ -1,39 +1,29 @@ import { Sight } from '@monkvision/types'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; /** * Custom hook used to initialize and manipulate sight state. */ export function useSightState(sights: Sight[]) { - const [sightSelected, setSightSelected] = useState(sights[0]); + const [selectedSight, setSelectedSight] = useState(sights[0]); const [sightsTaken, setSightsTaken] = useState([]); - const handleSightSelected = (sight: Sight): void => { - setSightSelected(sight); - }; - - const handleSightTaken = (): void => { - if (!sightSelected || sightsTaken.includes(sightSelected)) { + const handleSightTaken = () => { + if (sightsTaken.includes(selectedSight)) { return; } - - setSightsTaken((prevSightsTaken) => { - const updatedSightsTaken = [...prevSightsTaken, sightSelected]; - - const sightsNotTaken = sights.filter((sight) => !updatedSightsTaken.includes(sight)); - const nextSight = sightsNotTaken[0]; - - if (nextSight) { - handleSightSelected(nextSight); - } - - return updatedSightsTaken; - }); + setSightsTaken((value) => [...value, selectedSight]); }; + useEffect(() => { + const nextSight = sights.filter((sight) => !sightsTaken.includes(sight))[0]; + if (nextSight) { + setSelectedSight(nextSight); + } + }, [sightsTaken]); return { - sightSelected, - handleSightSelected, + selectedSight, + setSelectedSight, sightsTaken, handleSightTaken, }; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/i18n.ts b/packages/public/inspection-capture-web/src/i18n.ts similarity index 100% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/i18n.ts rename to packages/public/inspection-capture-web/src/i18n.ts diff --git a/packages/public/inspection-capture-web/src/translations/de.json b/packages/public/inspection-capture-web/src/translations/de.json new file mode 100644 index 000000000..51f34e576 --- /dev/null +++ b/packages/public/inspection-capture-web/src/translations/de.json @@ -0,0 +1,12 @@ +{ + "photo": { + "hud": { + "sight": { + "addDamageBtn": "Schaden" + }, + "addDamage": { + "cancelBtn": "Stornieren" + } + } + } +} diff --git a/packages/public/inspection-capture-web/src/translations/en.json b/packages/public/inspection-capture-web/src/translations/en.json new file mode 100644 index 000000000..8c3d1a056 --- /dev/null +++ b/packages/public/inspection-capture-web/src/translations/en.json @@ -0,0 +1,12 @@ +{ + "photo": { + "hud": { + "sight": { + "addDamageBtn": "Damage" + }, + "addDamage": { + "cancelBtn": "Cancel" + } + } + } +} diff --git a/packages/public/inspection-capture-web/src/translations/fr.json b/packages/public/inspection-capture-web/src/translations/fr.json new file mode 100644 index 000000000..86f2ca2d8 --- /dev/null +++ b/packages/public/inspection-capture-web/src/translations/fr.json @@ -0,0 +1,12 @@ +{ + "photo": { + "hud": { + "sight": { + "addDamageBtn": "Dégât" + }, + "addDamage": { + "cancelBtn": "Annuler" + } + } + } +} diff --git a/packages/public/inspection-capture-web/test/PhotoCapture.test.tsx b/packages/public/inspection-capture-web/test/PhotoCapture.test.tsx index 5b98a5017..9112b0815 100644 --- a/packages/public/inspection-capture-web/test/PhotoCapture.test.tsx +++ b/packages/public/inspection-capture-web/test/PhotoCapture.test.tsx @@ -5,9 +5,13 @@ jest.mock('@monkvision/camera-web'); jest.mock('../src/PhotoCaptureHUD/PhotoCaptureHUD', () => ({ PhotoCaptureHUD: jest.fn(() => <>), })); +jest.mock('../src/i18n', () => ({ + i18nCamera: {}, +})); import { render } from '@testing-library/react'; import { Sight } from '@monkvision/types'; +import { i18nWrap } from '@monkvision/common'; import { PhotoCapture } from '../src'; import { Camera, @@ -15,6 +19,7 @@ import { CameraResolution, CompressionFormat, } from '@monkvision/camera-web'; +import { i18nAddDamage } from '../src/i18n'; const sights = [ { id: 'id', label: { en: 'en', fr: 'fr', de: 'de' } }, @@ -26,6 +31,13 @@ describe('PhotoCapture component', () => { jest.clearAllMocks(); }); + it('should wrap the component with the i18nWrap method', () => { + const { unmount } = render(); + + expect(i18nWrap).toHaveBeenCalledWith(expect.any(Function), i18nAddDamage); + unmount(); + }); + it('should render a Camera component', () => { const { unmount } = render(); @@ -33,7 +45,8 @@ describe('PhotoCapture component', () => { unmount(); }); - it('should passed states, hud and handlePictureTaken to Camera component', () => { + + it('should pass states, hud and handlePictureTaken to Camera component', () => { const CameraMock = Camera as jest.Mock; const state = { facingMode: CameraFacingMode.ENVIRONMENT, diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx index ed0525e6a..5895b36b1 100644 --- a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx @@ -1,11 +1,6 @@ -import { expectPropsOnChildMock } from '@monkvision/test-utils'; - jest.mock('react-i18next'); jest.mock('@monkvision/common'); jest.mock('@monkvision/common-ui-web'); -jest.mock('../../src/PhotoCaptureHUD/i18n', () => ({ - i18nCamera: {}, -})); jest.mock('../../src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview', () => ({ PhotoCaptureHUDSightPreview: jest.fn(() => <>), })); @@ -17,19 +12,14 @@ jest.mock('../../src/PhotoCaptureHUD/PhotoCaptureHUDButtons', () => ({ })); jest.mock('../../src/hooks', () => ({ ...jest.requireActual('../../src/hooks'), - useHUDMode: jest.fn(() => ({ mode: 'default', handleAddDamage: jest.fn() })), - useSightState: jest.fn(() => ({ handleSightSelected: jest.fn(), handleSightTaken: jest.fn() })), + useSightState: jest.fn(() => ({ handleSightSelected: jest.fn() })), })); import { render } from '@testing-library/react'; import { Sight } from '@monkvision/types'; -import { i18nWrap } from '@monkvision/common'; -import { i18nAddDamage } from '../../src/PhotoCaptureHUD/i18n'; import { PhotoCaptureHUD } from '../../src/PhotoCaptureHUD'; import { PhotoCaptureHUDSightPreview } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview'; import { PhotoCaptureHUDButtons } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDButtons'; -import { useHUDMode, useSightState } from '../../src/hooks'; -import { PhotoCaptureHUDAddDamagePreview } from '../../src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview'; const sights = [ { id: 'id', label: { en: 'en', fr: 'fr', de: 'de' } }, @@ -41,13 +31,6 @@ describe('PhotoCaptureHUD component', () => { jest.clearAllMocks(); }); - it('should wrap the component with the i18nWrap method', () => { - const { unmount } = render(} />); - - expect(i18nWrap).toHaveBeenCalledWith(expect.any(Function), i18nAddDamage); - unmount(); - }); - it('should render PhotoCaptureHUDSightPreview and PhotoCaptureHUDButtons by default', () => { const { unmount } = render(} />); @@ -56,51 +39,6 @@ describe('PhotoCaptureHUD component', () => { unmount(); }); - it('should render PhotoCaptureHUDAddDamagePreview in add_damage mode', () => { - (useHUDMode as jest.Mock).mockImplementationOnce(() => ({ - mode: 'add-damage', - handleAddDamage: jest.fn(), - })); - const { unmount } = render(} />); - - expect(PhotoCaptureHUDAddDamagePreview).toHaveBeenCalled(); - expect(PhotoCaptureHUDButtons).toHaveBeenCalled(); - unmount(); - }); - - it('should get passed handleAddDamage as callback to PhotoCaptureHUDAddDamagePreview', () => { - (useHUDMode as jest.Mock).mockImplementationOnce(() => ({ - mode: 'add-damage', - handleAddDamage: jest.fn(), - })); - const PhotoCaptureHUDAddDamagePreviewMock = PhotoCaptureHUDAddDamagePreview as jest.Mock; - const useHUDModeMock = useHUDMode as jest.Mock; - const { unmount } = render(} />); - - const { handleAddDamage } = useHUDModeMock.mock.results[0].value; - - expectPropsOnChildMock(PhotoCaptureHUDAddDamagePreviewMock, { - onAddDamage: handleAddDamage, - }); - unmount(); - }); - - it('should get passed handleAddDamage and handleSightSelected as callback to PhotoCaptureHUDSightPreview', () => { - const PhotoCaptureHUDSightPreviewMock = PhotoCaptureHUDSightPreview as jest.Mock; - const useHUDModeMock = useHUDMode as jest.Mock; - const useSightStateMock = useSightState as jest.Mock; - const { unmount } = render(} />); - - const { handleAddDamage } = useHUDModeMock.mock.results[0].value; - const { handleSightSelected } = useSightStateMock.mock.results[0].value; - - expectPropsOnChildMock(PhotoCaptureHUDSightPreviewMock, { - onAddDamage: handleAddDamage, - onSightSelected: handleSightSelected, - }); - unmount(); - }); - it('should render PhotoCaptureHUDButtons component', () => { const { unmount } = render(} />); diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview.test.tsx index b1ebdb38c..310c1a48e 100644 --- a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview.test.tsx +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview.test.tsx @@ -12,8 +12,8 @@ describe('PhotoCaptureHUDAddDamagePreview component', () => { }); it('should render a Button', () => { - const onAddDamage = jest.fn(); - const { unmount } = render(); + const onCancel = jest.fn(); + const { unmount } = render(); expect(Button).toHaveBeenCalled(); @@ -21,9 +21,9 @@ describe('PhotoCaptureHUDAddDamagePreview component', () => { }); it('should translate button text', () => { - const onAddDamage = jest.fn(); + const onCancel = jest.fn(); const useTranslationMock = useTranslation as jest.Mock; - const { unmount } = render(); + const { unmount } = render(); const { t } = useTranslationMock.mock.results[0].value; expect(t).toHaveBeenCalled(); diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton.test.tsx index 131b2a82b..2ee2b846d 100644 --- a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton.test.tsx +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton.test.tsx @@ -17,6 +17,7 @@ describe('AddDamage component', () => { afterEach(() => { jest.clearAllMocks(); }); + it('should get passed onAddDamage callback', () => { const buttonMock = Button as unknown as jest.Mock; const onAddDamage = jest.fn(); diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.test.tsx index d2e4e735e..ad3288c41 100644 --- a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.test.tsx +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.test.tsx @@ -26,7 +26,7 @@ describe('PhotoCaptureHUDPreview component', () => { const { unmount } = render( , ); diff --git a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsSlider.test.tsx b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsSlider.test.tsx index d17f63d25..33e9dbbfd 100644 --- a/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsSlider.test.tsx +++ b/packages/public/inspection-capture-web/test/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/SightsSlider.test.tsx @@ -22,7 +22,7 @@ describe('SightsSlider component', () => { it('should render a slider of buttons when sights is provided', () => { const { unmount } = render( - , + , ); expect(Button).toHaveBeenCalledTimes(sights.length); @@ -34,10 +34,10 @@ describe('SightsSlider component', () => { const onSightSelected = jest.fn(); const { unmount } = render( , ); @@ -56,7 +56,7 @@ describe('SightsSlider component', () => { it('should have primary-base as primary color if button selected', () => { const buttonMock = Button as unknown as jest.Mock; const { unmount } = render( - , + , ); sights.forEach((sight, index) => { expectPropsOnChildMock(buttonMock, { primaryColor: expect.any(String) }); @@ -83,7 +83,7 @@ describe('SightsSlider component', () => { it('should call label function to translate the sight label', () => { const useSightLabelMock = useSightLabel as jest.Mock; const { unmount } = render( - , + , ); const { label } = useSightLabelMock.mock.results[0].value; sights.forEach(() => { diff --git a/packages/public/inspection-capture-web/test/hooks/useHUDMode.test.tsx b/packages/public/inspection-capture-web/test/hooks/useHUDMode.test.tsx deleted file mode 100644 index a1840de31..000000000 --- a/packages/public/inspection-capture-web/test/hooks/useHUDMode.test.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { renderHook } from '@testing-library/react-hooks'; -import { act } from '@testing-library/react'; -import { useHUDMode } from '../../src/hooks'; -import { HUDMode } from '../../src/PhotoCaptureHUD/hook'; - -describe('useHUDMode hook', () => { - it('should return as SightSelected default state', () => { - const { result, unmount } = renderHook(() => useHUDMode()); - - expect(result.current.mode).toEqual(HUDMode.DEFAULT); - unmount(); - }); - - it('should return a empty array of sights as SightTaken default state', () => { - const { result, unmount } = renderHook(() => useHUDMode()); - - expect(typeof result.current.handleAddDamage).toEqual('function'); - unmount(); - }); - it('should update mode with handleAddDamage', () => { - const { result } = renderHook(() => useHUDMode()); - - act(() => { - result.current.handleAddDamage(HUDMode.ADD_DAMAGE); - }); - - expect(result.current.mode).toBe(HUDMode.ADD_DAMAGE); - }); -}); diff --git a/packages/public/inspection-capture-web/test/hooks/useSightState.test.tsx b/packages/public/inspection-capture-web/test/hooks/useSightState.test.tsx index 85e0c5375..af18bc371 100644 --- a/packages/public/inspection-capture-web/test/hooks/useSightState.test.tsx +++ b/packages/public/inspection-capture-web/test/hooks/useSightState.test.tsx @@ -14,24 +14,26 @@ describe('useSightState hook', () => { afterEach(() => { jest.clearAllMocks(); }); + it('should initialize with the first sight as selected and an empty list of taken sights', () => { const { result, unmount } = renderHook(() => useSightState(sights)); - expect(result.current.sightSelected).toEqual(sights[0]); + expect(result.current.selectedSight).toEqual(sights[0]); expect(result.current.sightsTaken).toEqual([]); expect(typeof result.current.handleSightTaken).toEqual('function'); - expect(typeof result.current.handleSightSelected).toEqual('function'); + expect(typeof result.current.setSelectedSight).toEqual('function'); unmount(); }); + it('should update sightSelected when handleSightSelected is called', () => { const { result } = renderHook(() => useSightState(sights)); const newSelectedSight = sights[1]; act(() => { - result.current.handleSightSelected(newSelectedSight); + result.current.setSelectedSight(newSelectedSight); }); - expect(result.current.sightSelected).toEqual(newSelectedSight); + expect(result.current.selectedSight).toEqual(newSelectedSight); }); it('should update sightsTaken and sightSelected when handleSightTaken is called', () => { @@ -42,13 +44,13 @@ describe('useSightState hook', () => { }); expect(result.current.sightsTaken).toEqual([sights[0]]); - expect(result.current.sightSelected).toEqual(sights[1]); + expect(result.current.selectedSight).toEqual(sights[1]); act(() => { result.current.handleSightTaken(); }); expect(result.current.sightsTaken).toEqual([sights[0], sights[1]]); - expect(result.current.sightSelected).toEqual(sights[1]); + expect(result.current.selectedSight).toEqual(sights[1]); }); }); From d016fede0ef1e6786293b40df1f7e8435dacc4a4 Mon Sep 17 00:00:00 2001 From: David_LY Date: Thu, 4 Jan 2024 18:08:58 +0100 Subject: [PATCH 31/33] fixing PR (check comments) --- .../public/camera-web/src/Camera/Camera.tsx | 5 +++- .../camera-web/src/Camera/CameraHUD.types.ts | 8 +++++- .../camera-web/test/Camera/Camera.test.tsx | 1 + .../{ => PhotoCapture}/PhotoCapture.styles.ts | 0 .../src/{ => PhotoCapture}/PhotoCapture.tsx | 23 ++++++++++++---- .../PhotoCaptureHUD.styles.ts | 1 - .../PhotoCaptureHUD.tsx | 5 ++-- .../PhotoCaptureHUDAddDamagePreview.styles.ts | 0 .../PhotoCaptureHUDAddDamagePreview.tsx | 6 ++--- .../PhotoCaptureHUDAddDamagePreview/index.ts | 0 .../CaptureHUDButtons.styles.ts | 0 .../PhotoCaptureHUDButtons.tsx | 0 .../PhotoCaptureHUDButtons/hooks.ts | 0 .../PhotoCaptureHUDButtons/index.ts | 0 .../AddDamageButton/AddDamageButton.tsx | 6 ++--- .../AddDamageButton/index.ts | 0 .../PhotoCaptureHUDSightPreview.styles.ts | 0 .../PhotoCaptureHUDSightPreview.tsx | 10 +++++-- .../SightsCounter/SightsCounter.styles.ts | 0 .../SightsCounter/SightsCounter.tsx | 6 ++--- .../SightsCounter/index.ts | 0 .../SightsSlider/SightsSlider.styles.ts | 0 .../SightsSlider/SightsSlider.tsx | 0 .../SightsSlider/index.ts | 0 .../PhotoCaptureHUDSightPreview/hook.ts | 5 ++-- .../PhotoCaptureHUDSightPreview/index.ts | 0 .../{PhotoCaptureHUD => PhotoCapture}/hook.ts | 0 .../src/PhotoCapture/hooks/index.ts | 2 ++ .../hooks/usePhotoHUDButtonBackground.ts | 15 +++++++++++ .../{ => PhotoCapture}/hooks/useSightState.ts | 11 ++++---- .../src/{ => PhotoCapture}/i18n.ts | 2 +- .../index.ts | 1 + .../{ => PhotoCapture}/translations/de.json | 0 .../{ => PhotoCapture}/translations/en.json | 0 .../{ => PhotoCapture}/translations/fr.json | 0 .../inspection-capture-web/src/hooks/index.ts | 1 - .../src/hooks/useCameraConfig.ts | 27 ------------------- .../inspection-capture-web/src/index.ts | 1 - .../{ => PhotoCapture}/PhotoCapture.test.tsx | 17 +++++------- .../PhotoCaptureHUD.test.tsx | 17 +++++------- .../PhotoCaptureHUDAddDamagePreview.test.tsx | 2 +- .../PhotoCaptureHUDButtons.test.tsx | 4 +-- .../AddDamageButton.test.tsx | 6 ++--- .../PhotoCaptureHUDSightPreview.test.tsx | 14 +++++----- .../SightsCounter.test.tsx | 2 +- .../SightsSlider.test.tsx | 2 +- .../hooks/useSightState.test.tsx | 2 +- 47 files changed, 103 insertions(+), 99 deletions(-) rename packages/public/inspection-capture-web/src/{ => PhotoCapture}/PhotoCapture.styles.ts (100%) rename packages/public/inspection-capture-web/src/{ => PhotoCapture}/PhotoCapture.tsx (64%) rename packages/public/inspection-capture-web/src/{PhotoCaptureHUD => PhotoCapture}/PhotoCaptureHUD.styles.ts (96%) rename packages/public/inspection-capture-web/src/{PhotoCaptureHUD => PhotoCapture}/PhotoCaptureHUD.tsx (91%) rename packages/public/inspection-capture-web/src/{PhotoCaptureHUD => PhotoCapture}/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.styles.ts (100%) rename packages/public/inspection-capture-web/src/{PhotoCaptureHUD => PhotoCapture}/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.tsx (72%) rename packages/public/inspection-capture-web/src/{PhotoCaptureHUD => PhotoCapture}/PhotoCaptureHUDAddDamagePreview/index.ts (100%) rename packages/public/inspection-capture-web/src/{PhotoCaptureHUD => PhotoCapture}/PhotoCaptureHUDButtons/CaptureHUDButtons.styles.ts (100%) rename packages/public/inspection-capture-web/src/{PhotoCaptureHUD => PhotoCapture}/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.tsx (100%) rename packages/public/inspection-capture-web/src/{PhotoCaptureHUD => PhotoCapture}/PhotoCaptureHUDButtons/hooks.ts (100%) rename packages/public/inspection-capture-web/src/{PhotoCaptureHUD => PhotoCapture}/PhotoCaptureHUDButtons/index.ts (100%) rename packages/public/inspection-capture-web/src/{PhotoCaptureHUD => PhotoCapture}/PhotoCaptureHUDSightPreview/AddDamageButton/AddDamageButton.tsx (72%) rename packages/public/inspection-capture-web/src/{PhotoCaptureHUD => PhotoCapture}/PhotoCaptureHUDSightPreview/AddDamageButton/index.ts (100%) rename packages/public/inspection-capture-web/src/{PhotoCaptureHUD => PhotoCapture}/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.styles.ts (100%) rename packages/public/inspection-capture-web/src/{PhotoCaptureHUD => PhotoCapture}/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.tsx (78%) rename packages/public/inspection-capture-web/src/{PhotoCaptureHUD => PhotoCapture}/PhotoCaptureHUDSightPreview/SightsCounter/SightsCounter.styles.ts (100%) rename packages/public/inspection-capture-web/src/{PhotoCaptureHUD => PhotoCapture}/PhotoCaptureHUDSightPreview/SightsCounter/SightsCounter.tsx (62%) rename packages/public/inspection-capture-web/src/{PhotoCaptureHUD => PhotoCapture}/PhotoCaptureHUDSightPreview/SightsCounter/index.ts (100%) rename packages/public/inspection-capture-web/src/{PhotoCaptureHUD => PhotoCapture}/PhotoCaptureHUDSightPreview/SightsSlider/SightsSlider.styles.ts (100%) rename packages/public/inspection-capture-web/src/{PhotoCaptureHUD => PhotoCapture}/PhotoCaptureHUDSightPreview/SightsSlider/SightsSlider.tsx (100%) rename packages/public/inspection-capture-web/src/{PhotoCaptureHUD => PhotoCapture}/PhotoCaptureHUDSightPreview/SightsSlider/index.ts (100%) rename packages/public/inspection-capture-web/src/{PhotoCaptureHUD => PhotoCapture}/PhotoCaptureHUDSightPreview/hook.ts (70%) rename packages/public/inspection-capture-web/src/{PhotoCaptureHUD => PhotoCapture}/PhotoCaptureHUDSightPreview/index.ts (100%) rename packages/public/inspection-capture-web/src/{PhotoCaptureHUD => PhotoCapture}/hook.ts (100%) create mode 100644 packages/public/inspection-capture-web/src/PhotoCapture/hooks/index.ts create mode 100644 packages/public/inspection-capture-web/src/PhotoCapture/hooks/usePhotoHUDButtonBackground.ts rename packages/public/inspection-capture-web/src/{ => PhotoCapture}/hooks/useSightState.ts (71%) rename packages/public/inspection-capture-web/src/{ => PhotoCapture}/i18n.ts (83%) rename packages/public/inspection-capture-web/src/{PhotoCaptureHUD => PhotoCapture}/index.ts (52%) rename packages/public/inspection-capture-web/src/{ => PhotoCapture}/translations/de.json (100%) rename packages/public/inspection-capture-web/src/{ => PhotoCapture}/translations/en.json (100%) rename packages/public/inspection-capture-web/src/{ => PhotoCapture}/translations/fr.json (100%) delete mode 100644 packages/public/inspection-capture-web/src/hooks/index.ts delete mode 100644 packages/public/inspection-capture-web/src/hooks/useCameraConfig.ts delete mode 100644 packages/public/inspection-capture-web/src/index.ts rename packages/public/inspection-capture-web/test/{ => PhotoCapture}/PhotoCapture.test.tsx (88%) rename packages/public/inspection-capture-web/test/{PhotoCaptureHUD => PhotoCapture}/PhotoCaptureHUD.test.tsx (69%) rename packages/public/inspection-capture-web/test/{PhotoCaptureHUD => PhotoCapture}/PhotoCaptureHUDAddDamagePreview.test.tsx (95%) rename packages/public/inspection-capture-web/test/{PhotoCaptureHUD => PhotoCapture}/PhotoCaptureHUDButtons.test.tsx (97%) rename packages/public/inspection-capture-web/test/{PhotoCaptureHUD => PhotoCapture}/PhotoCaptureHUDSightPreview/AddDamageButton.test.tsx (88%) rename packages/public/inspection-capture-web/test/{PhotoCaptureHUD => PhotoCapture}/PhotoCaptureHUDSightPreview/PhotoCaptureHUDSightPreview.test.tsx (61%) rename packages/public/inspection-capture-web/test/{PhotoCaptureHUD => PhotoCapture}/PhotoCaptureHUDSightPreview/SightsCounter.test.tsx (83%) rename packages/public/inspection-capture-web/test/{PhotoCaptureHUD => PhotoCapture}/PhotoCaptureHUDSightPreview/SightsSlider.test.tsx (96%) rename packages/public/inspection-capture-web/test/{ => PhotoCapture}/hooks/useSightState.test.tsx (96%) diff --git a/packages/public/camera-web/src/Camera/Camera.tsx b/packages/public/camera-web/src/Camera/Camera.tsx index b149c8b52..db92e0d33 100644 --- a/packages/public/camera-web/src/Camera/Camera.tsx +++ b/packages/public/camera-web/src/Camera/Camera.tsx @@ -87,7 +87,10 @@ export function Camera({ ); return HUDComponent ? ( - + ) : ( <>{cameraPreview} ); diff --git a/packages/public/camera-web/src/Camera/CameraHUD.types.ts b/packages/public/camera-web/src/Camera/CameraHUD.types.ts index 24f17ee55..3273dcfdd 100644 --- a/packages/public/camera-web/src/Camera/CameraHUD.types.ts +++ b/packages/public/camera-web/src/Camera/CameraHUD.types.ts @@ -1,4 +1,5 @@ import { ComponentType, ReactElement } from 'react'; +import { PixelDimensions } from '@monkvision/types'; import { MonkPicture, UserMediaError } from './hooks'; /** @@ -21,6 +22,11 @@ export interface CameraHandle { * A function to retry the camera stream fetching in case of error. */ retry: () => void; + /** + * The dimensions of the resulting camera stream. Note that these dimensions can differ from the ones given in the + * stream constraints if they are not supported or available on the current device. + */ + dimensions: PixelDimensions | null; } /** @@ -40,7 +46,7 @@ export interface CameraEventHandlers { */ export interface CameraHUDProps { /** - * The camera preview element. The HUD component is exepcted to take this element as a prop and display it however it + * The camera preview element. The HUD component is expected to take this element as a prop and display it however it * wants to. */ cameraPreview: ReactElement; diff --git a/packages/public/camera-web/test/Camera/Camera.test.tsx b/packages/public/camera-web/test/Camera/Camera.test.tsx index 22c4e77bc..bb46db895 100644 --- a/packages/public/camera-web/test/Camera/Camera.test.tsx +++ b/packages/public/camera-web/test/Camera/Camera.test.tsx @@ -201,6 +201,7 @@ describe('Camera component', () => { error: useCameraPreviewResultMock.error, retry: useCameraPreviewResultMock.retry, isLoading: useCameraPreviewResultMock.isLoading || useTakePictureResultMock.isLoading, + dimensions: useCameraPreviewResultMock.dimensions, }, cameraPreview: expect.anything(), }); diff --git a/packages/public/inspection-capture-web/src/PhotoCapture.styles.ts b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCapture.styles.ts similarity index 100% rename from packages/public/inspection-capture-web/src/PhotoCapture.styles.ts rename to packages/public/inspection-capture-web/src/PhotoCapture/PhotoCapture.styles.ts diff --git a/packages/public/inspection-capture-web/src/PhotoCapture.tsx b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx similarity index 64% rename from packages/public/inspection-capture-web/src/PhotoCapture.tsx rename to packages/public/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx index 50f8e4a76..abee8f975 100644 --- a/packages/public/inspection-capture-web/src/PhotoCapture.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx @@ -1,18 +1,31 @@ -import { Camera, CameraHUDProps, MonkPicture } from '@monkvision/camera-web'; +import { + Camera, + CameraFacingMode, + CameraHUDProps, + CameraResolution, + CompressionFormat, + MonkPicture, +} from '@monkvision/camera-web'; import { Sight } from '@monkvision/types'; import { i18nWrap } from '@monkvision/common'; +import { useState } from 'react'; import { PhotoCaptureHUD } from './PhotoCaptureHUD'; import { styles } from './PhotoCapture.styles'; -import { useCameraConfig } from './hooks/useCameraConfig'; -import { i18nAddDamage } from './i18n'; +import { i18nPhotoCaptureHUD } from './i18n'; export interface PhotoCaptureProps { sights: Sight[]; } export const PhotoCapture = i18nWrap(({ sights }: PhotoCaptureProps) => { - const { cameraState } = useCameraConfig(); + const [cameraState] = useState({ + facingMode: CameraFacingMode.ENVIRONMENT, + resolution: CameraResolution.UHD_4K, + compressionFormat: CompressionFormat.JPEG, + quality: '0.8', + }); const hud = (props: CameraHUDProps) => ; + return (
{ />
); -}, i18nAddDamage); +}, i18nPhotoCaptureHUD); diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.styles.ts b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD.styles.ts similarity index 96% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.styles.ts rename to packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD.styles.ts index 67c29333d..3e94800ea 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.styles.ts +++ b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD.styles.ts @@ -19,6 +19,5 @@ export const styles: Styles = { position: 'relative', width: '100%', height: '100%', - zIndex: 9, }, }; diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD.tsx similarity index 91% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx rename to packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD.tsx index 4aa9dd364..27e7c3172 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUD.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD.tsx @@ -5,7 +5,7 @@ import { PhotoCaptureHUDButtons } from './PhotoCaptureHUDButtons'; import { PhotoCaptureHUDAddDamagePreview } from './PhotoCaptureHUDAddDamagePreview'; import { PhotoCaptureHUDSightPreview } from './PhotoCaptureHUDSightPreview'; import { HUDMode, usePhotoCaptureHUDStyle } from './hook'; -import { useSightState } from '../hooks'; +import { useSightState } from './hooks'; export interface PhotoCaptureHUDProps extends CameraHUDProps { sights: Sight[]; @@ -27,9 +27,10 @@ export function PhotoCaptureHUD({ sights, cameraPreview, handle }: PhotoCaptureH onSelectedSight={setSelectedSight} sightsTaken={sightsTaken} onAddDamage={() => setMode(HUDMode.ADD_DAMAGE)} + streamDimensions={handle?.dimensions} /> ), - [mode, selectedSight, sightsTaken], + [mode, selectedSight, sightsTaken, handle?.dimensions], ); return (
diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.styles.ts b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.styles.ts similarity index 100% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.styles.ts rename to packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.styles.ts diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.tsx b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.tsx similarity index 72% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.tsx rename to packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.tsx index 8687173e2..3a07648a1 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.tsx @@ -1,7 +1,7 @@ import { Button } from '@monkvision/common-ui-web'; import { useTranslation } from 'react-i18next'; -import { getHexFromRGBA, getRGBAFromString, useMonkTheme } from '@monkvision/common'; import { styles } from './PhotoCaptureHUDAddDamagePreview.styles'; +import { usePhotoHUDButtonBackground } from '../hooks'; export interface PhotoCaptureHUDAddDamageMenuProps { onCancel: () => void; @@ -9,9 +9,7 @@ export interface PhotoCaptureHUDAddDamageMenuProps { export function PhotoCaptureHUDAddDamagePreview({ onCancel }: PhotoCaptureHUDAddDamageMenuProps) { const { t } = useTranslation(); - const { palette } = useMonkTheme(); - - const bgColor = getHexFromRGBA({ ...getRGBAFromString(palette.secondary.xdark), a: 0.64 }); + const { bgColor } = usePhotoHUDButtonBackground(); return (
diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/index.ts b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/index.ts similarity index 100% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDAddDamagePreview/index.ts rename to packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/index.ts diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDButtons/CaptureHUDButtons.styles.ts b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDButtons/CaptureHUDButtons.styles.ts similarity index 100% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDButtons/CaptureHUDButtons.styles.ts rename to packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDButtons/CaptureHUDButtons.styles.ts diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.tsx b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.tsx similarity index 100% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.tsx rename to packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.tsx diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDButtons/hooks.ts b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDButtons/hooks.ts similarity index 100% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDButtons/hooks.ts rename to packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDButtons/hooks.ts diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDButtons/index.ts b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDButtons/index.ts similarity index 100% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDButtons/index.ts rename to packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDButtons/index.ts diff --git a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton/AddDamageButton.tsx b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDSightPreview/AddDamageButton/AddDamageButton.tsx similarity index 72% rename from packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton/AddDamageButton.tsx rename to packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDSightPreview/AddDamageButton/AddDamageButton.tsx index 6ea0e0ac9..b609cf133 100644 --- a/packages/public/inspection-capture-web/src/PhotoCaptureHUD/PhotoCaptureHUDSightPreview/AddDamageButton/AddDamageButton.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDSightPreview/AddDamageButton/AddDamageButton.tsx @@ -1,7 +1,7 @@ import { Button } from '@monkvision/common-ui-web'; import { useTranslation } from 'react-i18next'; -import { getHexFromRGBA, useMonkTheme, getRGBAFromString } from '@monkvision/common'; import { HUDMode } from '../../hook'; +import { usePhotoHUDButtonBackground } from '../../hooks'; export interface AddDamageButtonProps { onAddDamage: (newMode: HUDMode) => void; @@ -9,9 +9,7 @@ export interface AddDamageButtonProps { export function AddDamageButton({ onAddDamage }: AddDamageButtonProps) { const { t } = useTranslation(); - const { palette } = useMonkTheme(); - - const bgColor = getHexFromRGBA({ ...getRGBAFromString(palette.secondary.xdark), a: 0.64 }); + const { bgColor } = usePhotoHUDButtonBackground(); return ( + ); +} diff --git a/packages/public/common-ui-web/src/components/SwitchButton/hooks.ts b/packages/public/common-ui-web/src/components/SwitchButton/hooks.ts new file mode 100644 index 000000000..f1eae1cf6 --- /dev/null +++ b/packages/public/common-ui-web/src/components/SwitchButton/hooks.ts @@ -0,0 +1,169 @@ +import { CSSProperties, useMemo } from 'react'; +import { useMonkTheme, changeAlpha } from '@monkvision/common'; +import { ColorProp, InteractiveColors, InteractiveStatus } from '@monkvision/types'; +import { sizes, styles } from './SwitchButton.styles'; + +/** + * The size of a SwitchButton. + */ +export type SwitchButtonSize = 'normal' | 'small'; + +/** + * Props accepted by the SwitchButton component. + */ +export interface SwitchButtonProps { + /** + * The size of the button. Normal buttons are bigger and have their icon and labels inside the button. Small buttons + * are smaller, accept no label and have their icon inside the knob. + * + * @default normal + */ + size?: SwitchButtonSize; + /** + * Boolean used to control the SwitchButton. Set to `true` to make the Button switched on and `false` for off. + * + * @default false + */ + checked?: boolean; + /** + * Callback called when the SwitchButton is switched. The value passed as the first parameter is the result `checked` + * value. + */ + onSwitch?: (value: boolean) => void; + /** + * Boolean indicating if the button is disabled or not. + * + * @default false + */ + disabled?: boolean; + /** + * Primary color (background and knob overlay color) of the button when it is checked. + */ + checkedPrimaryColor?: ColorProp; + /** + * Secondary color (knob, labels and icons color) of the button when it is checked. + */ + checkedSecondaryColor?: ColorProp; + /** + * Primary color (background and knob overlay color) of the button when it is unchecked. + */ + uncheckedPrimaryColor?: ColorProp; + /** + * Secondary color (knob, labels and icons color) of the button when it is unchecked. + */ + uncheckedSecondaryColor?: ColorProp; + /** + * Custom label that can be displayed instead of the check icon when the button is checked. This prop is ignored for + * small buttons. + * + * Note : We recommend keeping this label extra short (2 or 3 characters long). + */ + checkedLabel?: string; + /** + * Custom label that can be displayed when the button is unchecked. This prop is ignored for small buttons. + * + * Note : We recommend keeping this label extra short (2 or 3 characters long). + */ + uncheckedLabel?: string; +} + +type SwitchButtonStylesParam = Required< + Pick< + SwitchButtonProps, + | 'size' + | 'checked' + | 'checkedPrimaryColor' + | 'checkedSecondaryColor' + | 'uncheckedPrimaryColor' + | 'uncheckedSecondaryColor' + > +> & { + status: InteractiveStatus; +}; + +interface SwitchButtonStyles { + buttonStyle: CSSProperties; + icon: { + color: ColorProp; + size: number; + style: CSSProperties; + }; + checkedLabelStyle: CSSProperties; + uncheckedLabelStyle: CSSProperties; + knobOverlayStyle: CSSProperties; + knobStyle: CSSProperties; + iconSmall: { + color: ColorProp; + size: number; + style: CSSProperties; + }; +} + +export function useSwitchButtonStyles(params: SwitchButtonStylesParam): SwitchButtonStyles { + const { utils } = useMonkTheme(); + const knobOverlayColors: InteractiveColors = useMemo( + () => ({ + [InteractiveStatus.DEFAULT]: '#00000000', + [InteractiveStatus.HOVERED]: changeAlpha(utils.getColor(params.checkedPrimaryColor), 0.18), + [InteractiveStatus.ACTIVE]: changeAlpha(utils.getColor(params.checkedPrimaryColor), 0.3), + [InteractiveStatus.DISABLED]: '#00000000', + }), + [params.checkedPrimaryColor, utils], + ); + + return useMemo( + () => ({ + buttonStyle: { + ...styles['button'], + ...(params.status === InteractiveStatus.DISABLED ? styles['buttonDisabled'] : {}), + ...(params.size === 'small' ? styles['buttonSmall'] : {}), + backgroundColor: params.checked + ? utils.getColor(params.checkedPrimaryColor) + : utils.getColor(params.uncheckedPrimaryColor), + }, + icon: { + color: utils.getColor(params.checkedSecondaryColor), + size: sizes.normal.iconSize, + style: { + ...styles['icon'], + opacity: params.checked ? 1 : 0, + }, + }, + checkedLabelStyle: { + ...styles['label'], + color: utils.getColor(params.checkedSecondaryColor), + opacity: params.checked ? 1 : 0, + }, + uncheckedLabelStyle: { + ...styles['label'], + color: utils.getColor(params.uncheckedSecondaryColor), + opacity: params.checked ? 0 : 1, + }, + knobOverlayStyle: { + ...styles['knobOverlay'], + ...(params.size === 'small' ? styles['knobOverlaySmall'] : {}), + ...(params.checked ? styles['knobOverlayChecked'] : {}), + ...(params.checked && params.size === 'small' ? styles['knobOverlaySmallChecked'] : {}), + backgroundColor: knobOverlayColors[params.status], + }, + knobStyle: { + ...styles['knob'], + ...(params.size === 'small' ? styles['knobSmall'] : {}), + ...(params.checked ? styles['knobChecked'] : {}), + ...(params.checked && params.size === 'small' ? styles['knobSmallChecked'] : {}), + backgroundColor: params.checked + ? utils.getColor(params.checkedSecondaryColor) + : utils.getColor(params.uncheckedSecondaryColor), + }, + iconSmall: { + color: utils.getColor(params.checkedPrimaryColor), + size: sizes.small.iconSize, + style: { + ...styles['icon'], + opacity: params.checked ? 1 : 0, + }, + }, + }), + [utils, params, knobOverlayColors], + ); +} diff --git a/packages/public/common-ui-web/src/components/SwitchButton/index.ts b/packages/public/common-ui-web/src/components/SwitchButton/index.ts new file mode 100644 index 000000000..e302b0bfe --- /dev/null +++ b/packages/public/common-ui-web/src/components/SwitchButton/index.ts @@ -0,0 +1,2 @@ +export { SwitchButton } from './SwitchButton'; +export { type SwitchButtonProps, type SwitchButtonSize } from './hooks'; diff --git a/packages/public/common-ui-web/src/components/index.ts b/packages/public/common-ui-web/src/components/index.ts index 5f86f4d54..219a92c61 100644 --- a/packages/public/common-ui-web/src/components/index.ts +++ b/packages/public/common-ui-web/src/components/index.ts @@ -3,3 +3,4 @@ export * from './Spinner'; export * from './TakePictureButton'; export * from './DynamicSVG'; export * from './SightOverlay'; +export * from './SwitchButton'; diff --git a/packages/public/common-ui-web/test/components/Button/Button.test.tsx b/packages/public/common-ui-web/test/components/Button/Button.test.tsx index e5b3d55c3..a8a511f38 100644 --- a/packages/public/common-ui-web/test/components/Button/Button.test.tsx +++ b/packages/public/common-ui-web/test/components/Button/Button.test.tsx @@ -4,18 +4,13 @@ mockButtonDependencies(); import '@testing-library/jest-dom'; import { createEvent, fireEvent, render, screen } from '@testing-library/react'; -import { expectPropsOnChildMock } from '@monkvision/test-utils'; +import { expectPropsOnChildMock, getNumberFromCSSProperty } from '@monkvision/test-utils'; import { useInteractiveStatus } from '@monkvision/common'; import { Button, Spinner, Icon, IconProps } from '../../../src'; import { InteractiveStatus } from '@monkvision/types'; const BUTTON_TEST_ID = 'monk-btn'; -function getButtonFontSize(): number { - const buttonEl = screen.getByTestId(BUTTON_TEST_ID); - return Number(buttonEl.style.fontSize.substring(0, buttonEl.style.fontSize.length - 2)); -} - describe('Button component', () => { afterEach(() => { jest.clearAllMocks(); @@ -23,18 +18,22 @@ describe('Button component', () => { it('should take the size prop into account', () => { const { unmount, rerender } = render(