boolean | TaskName[]
` | 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 | `Recordstring | null
| The language used by this component. | | `en` |
+
+---
+
+## LoginPage
+### Description
+This component is a ready-to-use CreateInspection page that is used throughout the different Monk webapps to handle
+authentication.
### Example
@@ -463,6 +527,46 @@ function App() {
---
+## TextField
+### Description
+Custom component implementing a simple one-liner text field.
+
+### Example
+
+```tsx
+import { useState } from 'react';
+import { TextField } from '@monkvision/common-ui-web';
+
+function App() {
+ const [value, setValue] = useState('');
+
+ return 'email' | 'password' | 'tel' | 'text'
| The type of the underlying HTMLInput element. | | `'text'` |
+| value | string | The value of the text field. | | `''` |
+| onChange | (newValue: string) => void | Callback called when the value of the text field changes. | | |
+| disabled | boolean | Boolean indicating if the text field is disabled or not. | | `false` |
+| highlighted | boolean | Boolean indicating if the input should be highlighted (ex: in case of errors). | | `false` |
+| monospace | boolean | Boolean indicating if the font family of the input should be monospace. | | `false` |
+| label | string | The label of the text field. | | `''` |
+| placeholder | string | The placeholder of the input. | | `''` |
+| unit | string | The unit symbol of the text field. | | |
+| unitPosition | 'left' | 'right'
| The position of the unit symbol. | | `'left'` |
+| icon | IconName | The name of the icon on the left of the text field. | | |
+| showClearButton | boolean | Boolean indicating if the button allowing the user to clear the field should be displayed or not. | | `true` |
+| assistiveText | string | Assistive text label under the text field. | | |
+| fixedWidth | number | Fixed width for the text field. If not set, the text field expands to the max width of its container. | | |
+| focusColor | ColorProp | The accent color of the text field when focused. | | `'primary-base'` |
+| neutralColor | ColorProp | The accent color of the text field when not focused. | | `'text-primary'` |
+| backgroundColor | ColorProp | The background color of the text field. | | `'background-light'` |
+
+---
+
## VehicleTypeAsset
### Description
This component displays an example image for the given vehicle type.
diff --git a/packages/common-ui-web/src/components/Checkbox/Checkbox.styles.ts b/packages/common-ui-web/src/components/Checkbox/Checkbox.styles.ts
new file mode 100644
index 000000000..f9bc3bbae
--- /dev/null
+++ b/packages/common-ui-web/src/components/Checkbox/Checkbox.styles.ts
@@ -0,0 +1,39 @@
+import { Styles } from '@monkvision/types';
+
+export const styles: Styles = {
+ container: {
+ display: 'flex',
+ alignItems: 'center',
+ },
+ checkbox: {
+ width: 22,
+ height: 22,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ margin: 0,
+ padding: 0,
+ outline: 'none',
+ borderStyle: 'solid',
+ borderWidth: 1,
+ borderRadius: 3,
+ cursor: 'pointer',
+ },
+ checkboxDisabled: {
+ opacity: 0.37,
+ cursor: 'default',
+ },
+ interactiveOverlay: {
+ width: 44,
+ height: 44,
+ borderRadius: 99999,
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ label: {
+ paddingLeft: 4,
+ fontSize: 16,
+ fontWeight: 500,
+ },
+};
diff --git a/packages/common-ui-web/src/components/Checkbox/Checkbox.tsx b/packages/common-ui-web/src/components/Checkbox/Checkbox.tsx
new file mode 100644
index 000000000..59771ec05
--- /dev/null
+++ b/packages/common-ui-web/src/components/Checkbox/Checkbox.tsx
@@ -0,0 +1,46 @@
+import { useInteractiveStatus } from '@monkvision/common';
+import { CheckboxProps, useCheckboxStyles } from './hooks';
+import { Icon } from '../../icons';
+import { styles } from './Checkbox.styles';
+
+/**
+ * Custom component implementing a simple checkbox.
+ */
+export function Checkbox({
+ checked = false,
+ disabled = false,
+ onChange,
+ primaryColor = 'primary-base',
+ secondaryColor = 'text-primary',
+ tertiaryColor = 'background-light',
+ labelColor = 'text-primary',
+ label,
+}: CheckboxProps) {
+ const { status, eventHandlers } = useInteractiveStatus({ disabled });
+ const { checkboxStyles, icon, interactiveOverlayStyle, labelStyle } = useCheckboxStyles({
+ checked,
+ status,
+ primaryColor,
+ secondaryColor,
+ tertiaryColor,
+ labelColor,
+ });
+
+ return (
+ boolean | TaskName[]
` | 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