MN-430: PhotoHUDPreview with SightsSlider + Counter

packages/private/test-utils/src/__mocks__/@monkvision/common.tsx

@@ -9,6 +9,7 @@ const {
   toCamelCase,
   getRGBAFromString,
   getHexFromRGBA,
+  changeAlpha,
   shadeColor,
   InteractiveVariation,
   getInteractiveVariants,
@@ -30,6 +31,7 @@ export = {
   toCamelCase,
   getRGBAFromString,
   getHexFromRGBA,
+  changeAlpha,
   shadeColor,
   InteractiveVariation,
   getInteractiveVariants,
@@ -71,4 +73,6 @@ 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(() => {}) })),
 };

packages/private/test-utils/src/__mocks__/@monkvision/inspection-capture-web.tsx

@@ -0,0 +1,12 @@
+export = {
+  /* Actual exports */
+  /* Mocks */
+  PhotoCaptureHUDButtons: jest.fn(() => <></>),
+  PhotoCaptureHUDAddDamagePreview: jest.fn(() => <></>),
+  PhotoCaptureHUDSightPreview: jest.fn(() => <></>),
+  SightsCounter: jest.fn(() => <></>),
+  AddDamageButton: jest.fn(() => <></>),
+  SightsSlider: jest.fn(() => <></>),
+  PhotoCaptureHUD: jest.fn(() => <></>),
+  PhotoCapture: jest.fn(() => <></>),
+};

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' } })),
 };

packages/private/test-utils/src/index.ts

@@ -1,2 +1,3 @@
 export * from './expects';
 export * from './dom';
+export * from './styles';

packages/private/test-utils/src/styles.ts

@@ -0,0 +1,7 @@
+export function getNumberFromCSSProperty(prop: string | undefined | null): number {
+  expect(typeof prop).toBe('string');
+  const reg = /^(\d+)\D*$/;
+  expect(prop).toMatch(reg);
+  const result = (prop as string).match(reg);
+  return Number((result as string[])[1]);
+}

packages/public/camera-web/src/Camera/Camera.tsx

@@ -87,7 +87,10 @@ export function Camera({
   );
 
   return HUDComponent ? (
-    <HUDComponent handle={{ takePicture, error, retry, isLoading }} cameraPreview={cameraPreview} />
+    <HUDComponent
+      handle={{ takePicture, error, retry, isLoading, dimensions }}
+      cameraPreview={cameraPreview}
+    />
   ) : (
     <>{cameraPreview}</>
   );

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;

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(),
     });

packages/public/common-ui-web/README.md

@@ -157,3 +157,35 @@ function MyComponent() {
 | sight         | Sight                                                                                      | The sight to display the SVG overlay of.                                                                                                                                            | ✔️       |               |
 | getAttributes | <code>(element: Element, groupIds: string[]) => SVGProps<SVGSVGElement> &#124; null</code> | A customization function that lets you specify custom HTML attributes to give to the tags in the SVG file based on the HTML element itself and the IDs of the groups it is part of. |          |               |
 | getInnerText  | <code>(element: Element, groupIds: string[]) => string                  &#124; null</code> | A customization function that lets you specify the innner text of the tags in the SVG file based on the HTML element itself and the IDs of the groups it is part of.                |          |               |
+
+## SwitchButton
+### Description
+Switch button component that can be used to turn ON or OFF a feature.
+
+### Example
+```tsx
+import { SwitchButton } from '@monkvision/common-ui-web';
+
+export function MyComponent() {
+  const [checked, setChecked] = useState(false);
+  return (
+    <div>
+      <SwitchButton checked={checked} onSwitch={(value) => setChecked(value)} />
+    </div>
+  );
+}
+```
+
+### Props
+| Prop                    | Type                       | Description                                                                                                                                                                         | Required | Default Value   |
+|-------------------------|----------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|-----------------|
+| size                    | `'normal' &#124; 'small'`  | 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. |          | 'normal'        |
+| checked                 | boolean                    | Boolean used to control the SwitchButton. Set to `true` to make the Button switched on and `false` for off.                                                                         |          | false           |
+| onSwitch                | `(value: boolean) => void` | Callback called when the SwitchButton is switched. The value passed as the first parameter is the result `checked` value.                                                           |          |                 |
+| disabled                | boolean                    | Boolean indicating if the button is disabled or not.                                                                                                                                |          | false           |
+| checkedPrimaryColor     | ColorProp                  | Primary color (background and knob overlay color) of the button when it is checked.                                                                                                 |          | 'primary'       |
+| checkedSecondaryColor   | ColorProp                  | Secondary color (knob, labels and icons color) of the button when it is checked.                                                                                                    |          | 'text-white'    |
+| uncheckedPrimaryColor   | ColorProp                  | Primary color (background and knob overlay color) of the button when it is unchecked.                                                                                               |          | 'text-tertiary' |
+| uncheckedSecondaryColor | ColorProp                  | Secondary color (knob, labels and icons color) of the button when it is unchecked.                                                                                                  |          | 'text-white'    |
+| checkedLabel            | ColorProp                  | Custom label that can be displayed instead of the check icon when the button is checked. This prop is ignored for small buttons.                                                    |          |                 |
+| uncheckedLabel          | ColorProp                  | Custom label that can be displayed when the button is unchecked. This prop is ignored for small buttons.                                                                            |          |                 |

packages/public/common-ui-web/src/components/SwitchButton/SwitchButton.styles.ts

@@ -0,0 +1,102 @@
+import { Styles } from '@monkvision/types';
+
+export const slideTransitionFrames = '0.3s ease-out';
+
+export const sizes = {
+  normal: {
+    width: 65,
+    height: 30,
+    knobPadding: 2,
+    labelPadding: 10,
+    knobOverlayExpansion: 3,
+    iconSize: 18,
+  },
+  small: {
+    width: 36,
+    height: 22,
+    knobPadding: 2,
+    knobOverlayExpansion: 2,
+    iconSize: 10,
+  },
+};
+
+export const styles: Styles = {
+  button: {
+    width: sizes.normal.width,
+    height: sizes.normal.height,
+    padding: `0 ${sizes.normal.labelPadding}px`,
+    overflow: 'visible',
+    borderRadius: 9999999,
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    border: 'none',
+    cursor: 'pointer',
+    transition: `background-color ${slideTransitionFrames}`,
+  },
+  buttonDisabled: {
+    opacity: 0.37,
+    cursor: 'default',
+  },
+  buttonSmall: {
+    padding: 0,
+    width: sizes.small.width,
+    height: sizes.small.height,
+  },
+  knobOverlay: {
+    width: sizes.normal.height + 2 * sizes.normal.knobOverlayExpansion,
+    height: sizes.normal.height + 2 * sizes.normal.knobOverlayExpansion,
+    borderRadius: '50%',
+    position: 'absolute',
+    top: -sizes.normal.knobOverlayExpansion,
+    left: -sizes.normal.knobOverlayExpansion,
+    transition: `left ${slideTransitionFrames}`,
+  },
+  knobOverlaySmall: {
+    width: sizes.small.height + 2 * sizes.small.knobOverlayExpansion,
+    height: sizes.small.height + 2 * sizes.small.knobOverlayExpansion,
+    top: -sizes.small.knobOverlayExpansion,
+    left: -sizes.small.knobOverlayExpansion,
+  },
+  knobOverlayChecked: {
+    left: sizes.normal.width - sizes.normal.height - sizes.normal.knobOverlayExpansion,
+  },
+  knobOverlaySmallChecked: {
+    left: sizes.small.width - sizes.small.height - sizes.small.knobOverlayExpansion,
+  },
+  knob: {
+    width: sizes.normal.height - 2 * sizes.normal.knobPadding,
+    height: sizes.normal.height - 2 * sizes.normal.knobPadding,
+    borderRadius: '50%',
+    position: 'absolute',
+    top: sizes.normal.knobPadding,
+    left: sizes.normal.knobPadding,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transition: `left ${slideTransitionFrames}`,
+  },
+  knobSmall: {
+    width: sizes.small.height - 2 * sizes.small.knobPadding,
+    height: sizes.small.height - 2 * sizes.small.knobPadding,
+    top: sizes.small.knobPadding,
+    left: sizes.small.knobPadding,
+  },
+  knobChecked: {
+    left: sizes.normal.width - sizes.normal.height + sizes.normal.knobPadding,
+  },
+  knobSmallChecked: {
+    left: sizes.small.width - sizes.small.height + sizes.small.knobPadding,
+  },
+  label: {
+    fontSize: 12,
+    fontWeight: 400,
+    lineHeight: '18px',
+    letterSpacing: '0.4px',
+    transition: `opacity ${slideTransitionFrames}`,
+  },
+  icon: {
+    transition: `opacity ${slideTransitionFrames}`,
+  },
+};

packages/public/common-ui-web/src/components/SwitchButton/SwitchButton.tsx

@@ -0,0 +1,83 @@
+import { useInteractiveStatus } from '@monkvision/common';
+import { SwitchButtonProps, useSwitchButtonStyles } from './hooks';
+import { Icon } from '../../icons';
+
+/**
+ * Switch button component that can be used to turn ON or OFF a feature.
+ *
+ * @see https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8
+ * @example
+ * export function MyComponent() {
+ *   const [checked, setChecked] = useState(false);
+ *   return (
+ *     <div>
+ *       <SwitchButton checked={checked} onSwitch={(value) => setChecked(value)} />
+ *     </div>
+ *   );
+ * }
+ */
+export function SwitchButton({
+  size = 'normal',
+  checked = false,
+  onSwitch,
+  disabled = false,
+  checkedPrimaryColor = 'primary',
+  checkedSecondaryColor = 'text-white',
+  uncheckedPrimaryColor = 'text-tertiary',
+  uncheckedSecondaryColor = 'text-white',
+  checkedLabel,
+  uncheckedLabel,
+}: SwitchButtonProps) {
+  const { status, eventHandlers } = useInteractiveStatus({ disabled });
+  const switchButtonStyles = useSwitchButtonStyles({
+    size,
+    checked,
+    checkedPrimaryColor,
+    checkedSecondaryColor,
+    uncheckedPrimaryColor,
+    uncheckedSecondaryColor,
+    status,
+  });
+
+  const handleSwitch = () => {
+    if (onSwitch) {
+      onSwitch(!checked);
+    }
+  };
+
+  return (
+    <button
+      style={switchButtonStyles.buttonStyle}
+      onClick={handleSwitch}
+      disabled={disabled}
+      {...eventHandlers}
+      data-testid='switch-btn'
+    >
+      {size === 'normal' && !checkedLabel && (
+        <Icon
+          icon='check'
+          primaryColor={switchButtonStyles.icon.color}
+          size={switchButtonStyles.icon.size}
+          style={switchButtonStyles.icon.style}
+        />
+      )}
+      {size === 'normal' && checkedLabel && (
+        <div style={switchButtonStyles.checkedLabelStyle}>{checkedLabel ?? ''}</div>
+      )}
+      {size === 'normal' && (
+        <div style={switchButtonStyles.uncheckedLabelStyle}>{uncheckedLabel ?? ''}</div>
+      )}
+      <div style={switchButtonStyles.knobStyle} data-testid='switch-knob'>
+        {size === 'small' && checked && (
+          <Icon
+            icon='check'
+            primaryColor={switchButtonStyles.iconSmall.color}
+            size={switchButtonStyles.iconSmall.size}
+            style={switchButtonStyles.iconSmall.style}
+          />
+        )}
+      </div>
+      <div style={switchButtonStyles.knobOverlayStyle}></div>
+    </button>
+  );
+}