Skip to content

Commit

Permalink
Docs + improve function/const naming
Browse files Browse the repository at this point in the history
  • Loading branch information
@dlymonkai
dlymonkai committed Jan 10, 2025
1 parent d68f662 commit cc09ab8
Show file tree
Hide file tree
Showing 25 changed files with 189 additions and 108 deletions.
38 changes: 38 additions & 0 deletions documentation/docs/configuration.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,44 @@ export const MonkJsConfig: PhotoCaptureAppConfig = {

This configuration object can then be passed to components like `<MonkAppStateProvider>` or `<PhotoCapture>`.

## Available Configuration Options
The following table lists the available configuration options in the `CaptureAppConfig` interface :

| Name | Type | Description | Required | Default Value |
|------------------------------------|----------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------|-----------------------------|
| allowManualLogin | `boolean` | Indicates if manual login and logout should be enabled or not. | ✔️ | |
| fetchFromSearchParams | `boolean` | Indicates if the app state (auth token, inspection ID etc.) should be fetched from the URL search params. | ✔️ | |
| allowVehicleTypeSelection | `boolean` | Indicates if manual vehicle type selection should be enabled if the vehicle type is not defined. | ✔️ | |
| enableSteeringWheelPosition | `boolean` | Indicates if the capture Sights should vary based on the steering wheel position (right or left). | ✔️ | |
| defaultVehicleType | `VehicleType` | Default vehicle type to use if no vehicle type has been specified. | ✔️ | |
| defaultSteeringWheelPosition | `SteeringWheelPosition` | Default steering wheel position to use if no steering wheel position has been specified. | if `enableSteeringWheelPosition` is set to `true` | |
| sights | `Record<..., string[]>` | A map associating each vehicle type supported by the app to a list of sight IDs. If `enableSteeringWheelPosition` is set to `true`, it's a map associating each steering wheel position to this map. | ✔️ | |
| allowCreateInspection | `boolean` | Indicates if automatic inspection creation should be enabled in the app. | ✔️ | |
| createInspectionOptions | `CreateInspectionOptions` | Options used when automatically creating an inspection. | if `allowCreateInspection` is set to `true` | |
| apiDomain | `string` | The API domain used to communicate with the API. | ✔️ | |
| requiredApiPermissions | `MonkApiPermission[]` | Required API permission that the user must have to use the current app. | | |
| palette | `Partial<MonkPalette>` | Custom color palette to use in the app. | | |
| enforceOrientation | `DeviceOrientation` | Use this prop to enforce a specific device orientation for the Camera screen. | | |
| maxUploadDurationWarning | `number` | Max upload duration in milliseconds before showing a bad connection warning to the user. Use `-1` to never display the warning. | | `15000` |
| useAdaptiveImageQuality | `boolean` | Boolean indicating if the image quality should be downgraded automatically in case of low connection. | | `true` |
| showCloseButton | `boolean` | Indicates if the close button should be displayed in the HUD on top of the Camera preview. | | `false` |
| startTasksOnComplete | `<code>boolean &#124; TaskName[]</code>` | Value indicating if tasks should be started at the end of the inspection. See the `inspection-capture-web` package doc for more info. | | `true` |
| additionalTasks | `TaskName[]` | An optional list of additional tasks to run on every Sight of the inspection. | | |
| tasksBySight | `Record<string, TaskName[]>` | Record associating each sight with a list of tasks to execute for it. If not provided, the default tasks of the sight will be used. | | |
| resolution | `CameraResolution` | Indicates the resolution of the pictures taken by the Camera. | | `CameraResolution.UHD_4K` |
| allowImageUpscaling | `boolean` | Allow images to be scaled up if the device does not support the specified resolution in the `resolution` prop. | | `false` |
| format | `CompressionFormat` | The output format of the compression. | | `CompressionFormat.JPEG` |
| quality | `number` | Value indicating image quality for the compression output. | | `0.6` |
| addDamage | `AddDamage` | Options for Add Damage, If disabled, the `Add Damage` button will be hidden. | | `AddDamage.PART_SELECT` |
| allowSkipRetake | `boolean` | If compliance is enabled, this prop indicate if the user is allowed to skip the retaking process if some pictures are not compliant. | | `false` |
| enableCompliance | `boolean` | Indicates if compliance checks should be enabled or not. | | `true` |
| enableCompliancePerSight | `string[]` | Array of Sight IDs that indicates for which sight IDs the compliance should be enabled. | | |
| complianceIssues | `ComplianceIssue[]` | If compliance checks are enabled, this property can be used to select a list of compliance issues to check. | | `DEFAULT_COMPLIANCE_ISSUES` |
| complianceIssuesPerSight | `Record<string, ComplianceIssue[]>` | A map associating Sight IDs to a list of compliance issues to check. | | |
| useLiveCompliance | `boolean` | Indicates if live compliance should be enabled or not. | | `false` |
| customComplianceThresholds | `CustomComplianceThresholds` | Custom thresholds that can be used to modify the strictness of the compliance for certain compliance issues. | | |
| customComplianceThresholdsPerSight | `Record<string, CustomComplianceThresholds>` | A map associating Sight IDs to custom compliance thresholds. | | |

## Live Configs
MonkJs now also offers a way to configure Live Configurations for your web applications. This allows MonkJs apps to
fetch their configurations (`PhotoCaptureAppConfig` or `VideoCaptureAppConfig`) from a GCP Bucket on startup. By doing
Expand Down
31 changes: 31 additions & 0 deletions packages/common-ui-web/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,37 @@ function App() {

---

## CaptureSelection
### Description
A single page component that allows the user to select between "Add Damage" or "Photo Capture" workflow.

### Example

```tsx
import { CaptureSelection } from "@monkvision/common-ui-web";
import { useNavigate } from "react-router-dom";

function App() {
const { navigate } = useNavigate();

return (
<CaptureSelection
onAddDamage={() => navigate('/add-damage-page')}
onCapture={() => navigate('/photo-capture-page')}
/>
);
}
```

### Props
| Prop | Type | Description | Required | Default Value |
|-------------|------------|----------------------------------------------------------------|----------|---------------|
| lang | string | The language used by the component. | | `'en'` |
| onAddDamage | () => void | Callback called when the user clicks on "Add Damage" button. | | |
| onCapture | () => void | Callback called when the user clicks on "Take Picture" button. | | |

---

## Checkbox
### Description
Custom component implementing a simple checkbox.
Expand Down
32 changes: 2 additions & 30 deletions packages/common-ui-web/src/components/VehicleDynamicWireframe/VehicleDynamicWireframe.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,8 @@
import { PartSelectionOrientation, VehiclePart, VehicleType } from '@monkvision/types';
import { SVGProps } from 'react';
import { PartSelectionOrientation } from '@monkvision/types';
import { DynamicSVG } from '../DynamicSVG';
import { useVehicleDynamicWireframe } from './hooks';
import { useVehicleDynamicWireframe, VehicleDynamicWireframeProps } from './hooks';
import { styles } from './VehicleDynamicWireframe.style';

/**
* Props accepted by the VehicleDynamicWireframe component.
*/
export interface VehicleDynamicWireframeProps {
/**
* Vehicle type to display the wireframe for.
*/
vehicleType: VehicleType;
/**
* The orientation of the wireframe.
*
* @default PartSelectionOrientation.FRONT_LEFT
*/
orientation?: PartSelectionOrientation;
/**
* Callback when the user clicks a part.
*/
onClickPart?: (parts: VehiclePart) => void;
/**
* Callback used to customize the display style of each vehicle part on the wireframe.
* See `DynamicSVGCustomizationFunctions` for more details.
*
* @see DynamicSVGCustomizationFunctions
*/
getPartAttributes?: (part: VehiclePart) => SVGProps<SVGElement>;
}

/**
* Component that displays a dynamic wireframe of a vehicle, allowing the user to select parts of the vehicle.
*/
Expand Down
15 changes: 9 additions & 6 deletions packages/common-ui-web/src/components/VehicleDynamicWireframe/hooks.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,20 @@ function isCarPartElement(element: SVGElement): boolean {
return element.id !== '' && element.classList.contains('car-part');
}

function getWireframes(vehicleType: VehicleType, orientation: PartSelectionOrientation) {
function getWireframes(vehicleType: VehicleType, orientation: PartSelectionOrientation): string {
const wireframes = partSelectionWireframes[getVehicleModel(vehicleType)];
if (wireframes === undefined) {
throw new Error(`No wireframe found for vehicle type ${vehicleType}`);
}
return wireframes[orientation];
}

export interface VehicleDynamicWireframeParams {
/**
* Props accepted by the VehicleDynamicWireframe component.
*/
export interface VehicleDynamicWireframeProps {
/**
* Vehicle type to display the wireframe for.
* The type of vehicle for which the wireframe will be displayed.
*/
vehicleType: VehicleType;
/**
Expand All @@ -28,11 +31,11 @@ export interface VehicleDynamicWireframeParams {
*/
orientation?: PartSelectionOrientation;
/**
* Callback when the user clicks a part.
* Callback when the user clicks on a vehicle part.
*/
onClickPart?: (parts: VehiclePart) => void;
/**
* Callback used to customize the display style of each vehicle part on the wireframe.
* Customizes the display attributes (e.g., styles, colors) of vehicle parts.
* See `DynamicSVGCustomizationFunctions` for more details.
*
* @see DynamicSVGCustomizationFunctions
Expand All @@ -45,7 +48,7 @@ export function useVehicleDynamicWireframe({
orientation = PartSelectionOrientation.FRONT_LEFT,
onClickPart = () => {},
getPartAttributes = () => ({}),
}: VehicleDynamicWireframeParams) {
}: VehicleDynamicWireframeProps) {
const overlay = useMemo(
() => getWireframes(vehicleType, orientation),
[vehicleType, orientation],
Expand Down
6 changes: 2 additions & 4 deletions packages/common-ui-web/src/components/VehicleDynamicWireframe/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,2 @@
export {
VehicleDynamicWireframe,
type VehicleDynamicWireframeProps,
} from './VehicleDynamicWireframe';
export { VehicleDynamicWireframe } from './VehicleDynamicWireframe';
export { type VehicleDynamicWireframeProps } from './hooks';
4 changes: 2 additions & 2 deletions packages/common/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,6 @@ you can refer to their own README directly :
- [State Management](README/STATE_MANAGEMENT.md).
- [Theming](README/THEMING.md).
- [Internationalization](README/INTERNATIONALIZATION.md).
- [Hooks](README/APP_UTILS).
- [Hooks](README/APP_UTILS.md).
- [Utilities](README/UTILITIES.md).
- [Application Utilities](README/HOOKS).
- [Application Utilities](README/HOOKS.md).
36 changes: 36 additions & 0 deletions packages/common/README/UTILITIES.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,29 @@ method, available on all versions of JavaScript.

---

# Browser Utils
### isMobileDevice

```typescript
import { isMobileDevice } from "@monkvision/common";

console.log(isMobileDevice());
// Output : true or false
```
Checks if the current device is a mobile device.

### getAspectRatio
```typescript
import { getAspectRatio } from "@monkvision/common";

const streamDimensions = {width: 1920, height: 1080}
console.log(getAspectRatio(streamDimensions));
// Output : '1920/1080'
```
Returns the aspect ratio of the stream. If not a mobile device, it will return 16/9 by default.

---

# Color Utils
### getRGBAFromString
```typescript
Expand Down Expand Up @@ -302,6 +325,19 @@ Converts a string to camel case.

---

# Vehicle
### getVehicleModel
```typescript
import { getVehicleModel } from '@monkvision/common'
import { VehicleType } from '@monkvision/types'

console.log(getVehicleModel(VehicleType.SUV))
output : 'fesc20'
```
Returns the vehicle model corresponding to the given vehicle type.

---

# Zlib Utils
### zlibCompress
```typescript
Expand Down
4 changes: 2 additions & 2 deletions packages/common/src/utils/browser.utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ export function isMobileDevice(): boolean {
}

/**
* Returns the aspect ratio of the stream.
* Returns the aspect ratio of the stream. If not a mobile device, it will return 16/9 by default.
*/
export function getAspectRatio(streamDimensions?: PixelDimensions | null) {
export function getAspectRatio(streamDimensions?: PixelDimensions | null): string {
if (isMobileDevice() && streamDimensions) {
return `${streamDimensions?.width}/${streamDimensions?.height}`;
}
Expand Down
Loading

0 comments on commit cc09ab8

Please sign in to comment.