@abidibo/react-cam-roi 0.0.8 → 0.0.11

package/dist/Components/RoiEditor/Toolbar.module.css

@@ -1,3 +1,15 @@
+.toolbar-info {
+  padding: .5rem;
+}
+.toolbar-info-light {
+  background-color: #ddd;;
+  color: #000;
+}
+.toolbar-info-dark {
+  background-color: #222;
+  color: #fff;
+}
+
 .toolbar {
   align-items: center;
   display: flex;
@@ -28,7 +40,7 @@
 
 .toolbar-spacer {
   height: 20px;
-  margin: 0 .5rem 0 1rem;
+  margin: 0 .5rem;
   width: 1px;
 }
 

package/dist/Components/RoiEditor/Types.d.ts

@@ -38,11 +38,12 @@ export type ConfigurationParameter = {
     unit: string;
     type: DataTypeEnum;
     options: {
-        value: number | string | boolean;
+        value: number | string;
         label: string;
     }[];
+    multiple?: boolean;
     required: boolean;
-    value: number | string | boolean | null;
+    value: number | string | boolean | string[] | number[] | null;
 };
 export type RoiConfiguration = {
     role: string;
@@ -56,6 +57,10 @@ export type RoiConfiguration = {
 export type Configuration = {
     parameters: ConfigurationParameter[];
     rois: RoiConfiguration[];
+    options?: {
+        hideForbiddenTools?: boolean;
+        description?: string;
+    };
 };
 export interface INotify {
     info: (message: string) => void;
@@ -63,3 +68,48 @@ export interface INotify {
     error: (message: string) => void;
     success: (message: string) => void;
 }
+export type Metadata = {
+    parameters: OutputParameter[];
+    rois: {
+        id: string;
+        parameters: OutputParameter[];
+    }[];
+};
+export type OutputShapeRect = {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+    color: string;
+};
+export type OutputShapePolyline = {
+    points: {
+        x: number;
+        y: number;
+    }[];
+    top: number;
+    left: number;
+    color: string;
+};
+export type OutputShapePolygon = {
+    points: {
+        x: number;
+        y: number;
+    }[];
+    top: number;
+    left: number;
+    color: string;
+};
+export interface OutputParameter {
+    codename: string;
+    value: number | string | boolean | string[] | number[] | null;
+}
+export interface OutputRoi {
+    parameters: OutputParameter[];
+    type: ShapeType;
+    shape: OutputShapeRect | OutputShapePolyline | OutputShapePolygon;
+}
+export interface Output {
+    parameters: OutputParameter[];
+    rois: OutputRoi[];
+}

package/dist/Components/RoiEditor/Utils.d.ts

@@ -1,5 +1,22 @@
-import { Configuration, INotify, Shapes, ToolEnum } from './Types';
+import { Configuration, ConfigurationParameter, INotify, Metadata, Shape, Shapes, ShapeType, ToolEnum } from './Types';
 export declare const notify: INotify;
 export declare const enableRois: (configuration: Configuration) => boolean;
 export declare const enableMainMetadata: (configuration: Configuration) => boolean;
 export declare const canDrawShape: (configuration: Configuration, shapeType: Omit<ToolEnum, ToolEnum.Pointer>, shapes: Shapes, notify: INotify, message: string) => boolean;
+export declare const validateParametersForm: (parameters: ConfigurationParameter[], fields: Record<string, unknown>, setErrors: (errors: Record<string, string>) => void) => boolean;
+export declare const validate: (configuration: Configuration, shapes: Shapes, metadata: Metadata, strings: Record<string, string>) => [boolean, string[]];
+export declare const fabricShapeToOutputShape: (shape: Shape, type: ShapeType) => {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+    color: string;
+    points?: undefined;
+} | {
+    points: any;
+    top: number;
+    left: number;
+    color: string;
+    width?: undefined;
+    height?: undefined;
+};

package/dist/Components/RoiEditor/Utils.js

@@ -35,3 +35,109 @@ export const canDrawShape = (configuration, shapeType, shapes, notify, message)
     }
     return res;
 };
+export const validateParametersForm = (parameters, fields, setErrors) => {
+    const err = {};
+    parameters.forEach((p) => {
+        if (p.required && isEmpty(fields[p.codename])) {
+            err[p.codename] = 'requiredField';
+        }
+    });
+    if (Object.keys(err).length > 0) {
+        setErrors(err);
+        return false;
+    }
+    return true;
+};
+const isEmpty = (v) => {
+    if (typeof v === 'string') {
+        return v.length === 0;
+    }
+    if (Array.isArray(v)) {
+        return v.length === 0;
+    }
+    return v === null || v === undefined;
+};
+export const validate = (configuration, shapes, metadata, strings) => {
+    const errors = [];
+    // check main parameters
+    if (configuration.parameters.length) {
+        if (metadata.parameters.find((p) => { var _a; return ((_a = configuration.parameters.find((p2) => p2.codename === p.codename)) === null || _a === void 0 ? void 0 : _a.required) && isEmpty(p.value); })) {
+            errors.push(strings.missingRequiredValuesInMainParameters);
+        }
+    }
+    // check rois number
+    configuration.rois.forEach((roi) => {
+        // check multiplicity
+        if (roi.multiplicity) {
+            switch (roi.multiplicity.operator) {
+                case OperatorEnum.Eq:
+                    if (Object.values(shapes).filter((s) => s.type === roi.type).length !== roi.multiplicity.threshold) {
+                        errors.push(strings.shapesOfTypeShouldBeEqualToThreshold
+                            .replace('{type}', String(roi.type))
+                            .replace('{threshold}', roi.multiplicity.threshold.toString()));
+                    }
+                    break;
+                case OperatorEnum.Lt:
+                    if (Object.values(shapes).filter((s) => s.type === roi.type).length >= roi.multiplicity.threshold) {
+                        errors.push(strings.shapesOfTypeShouldBeLessThanThreshold
+                            .replace('{type}', String(roi.type))
+                            .replace('{threshold}', roi.multiplicity.threshold.toString()));
+                    }
+                    break;
+                case OperatorEnum.Lte:
+                    if (Object.values(shapes).filter((s) => s.type === roi.type).length > roi.multiplicity.threshold) {
+                        errors.push(strings.shapesOfTypeShouldBeLessThanOrEqualToThreshold
+                            .replace('{type}', String(roi.type))
+                            .replace('{threshold}', roi.multiplicity.threshold.toString()));
+                    }
+                    break;
+                case OperatorEnum.Gt:
+                    if (Object.values(shapes).filter((s) => s.type === roi.type).length <= roi.multiplicity.threshold) {
+                        errors.push(strings.shapesOfTypeShouldBeGreaterThanThreshold
+                            .replace('{type}', String(roi.type))
+                            .replace('{threshold}', roi.multiplicity.threshold.toString()));
+                    }
+                    break;
+                case OperatorEnum.Gte:
+                    if (Object.values(shapes).filter((s) => s.type === roi.type).length < roi.multiplicity.threshold) {
+                        errors.push(strings.shapesOfTypeShouldBeGreaterThanOrEqualToThreshold
+                            .replace('{type}', String(roi.type))
+                            .replace('{threshold}', roi.multiplicity.threshold.toString()));
+                    }
+            }
+        }
+    });
+    // check rois metadata
+    Object.keys(shapes).forEach(shapeId => {
+        var _a, _b;
+        const type = shapes[shapeId].type;
+        const confParameters = (_b = (_a = configuration.rois.find((r) => r.type === type)) === null || _a === void 0 ? void 0 : _a.parameters) !== null && _b !== void 0 ? _b : [];
+        confParameters.forEach((p) => {
+            var _a, _b;
+            if (p.required && isEmpty((_b = (_a = metadata.rois.find((r) => r.id === shapeId)) === null || _a === void 0 ? void 0 : _a.parameters.find((p) => p.codename === p.codename)) === null || _b === void 0 ? void 0 : _b.value)) {
+                errors.push(strings.missingRequiredValuesInShapeParameters.replace('{id}', shapeId));
+            }
+        });
+    });
+    return [errors.length === 0, errors];
+};
+export const fabricShapeToOutputShape = (shape, type) => {
+    switch (type) {
+        case "rect" /* ToolEnum.Rectangle */:
+            return {
+                top: shape.top,
+                left: shape.left,
+                width: shape.width,
+                height: shape.height,
+                color: shape.stroke
+            };
+        case "polygon" /* ToolEnum.Polygon */:
+        case "polyline" /* ToolEnum.Polyline */:
+            return {
+                points: shape.get('points'),
+                top: shape.top,
+                left: shape.left,
+                color: shape.stroke
+            };
+    }
+};

package/dist/Components/RoiEditor/index.d.ts

@@ -1,7 +1,10 @@
-import { Configuration } from './Types';
+import { Configuration, Output } from './Types';
 export type RoiEditorProps = {
     imageUrl: string;
     configuration: Configuration;
+    onSubmit: (data: Output) => void;
+    initialData?: Output;
+    id: string;
 };
 declare const RoiEditor: React.FC<RoiEditorProps>;
 export default RoiEditor;

package/dist/Components/RoiEditor/index.js

@@ -6,31 +6,69 @@ import { css, log } from '../../Utils';
 import { Loader } from '../Loader';
 import Canvas from './Canvas';
 import { useCanvasSize } from './Hooks';
-import ShapesList from './ShapesList';
 import styles from './RoiEditor.module.css';
+import ShapesList from './ShapesList';
 import Toolbar from './Toolbar';
+import { fabricShapeToOutputShape, validate } from './Utils';
 // https://github.com/n-mazaheri/image-editor
-const RoiEditor = ({ imageUrl, configuration }) => {
-    const { themeMode, enableLogs, pickerColors } = useContext(UiContext);
+const RoiEditor = ({ imageUrl, configuration, onSubmit, initialData, id }) => {
+    var _a, _b, _c;
+    const { themeMode, enableLogs, pickerColors, strings, notify } = useContext(UiContext);
     const { imageSize, canvasSize, wrapperRef, isReady } = useCanvasSize(imageUrl);
     const [activeTool, setActiveTool] = useState("pointer" /* ToolEnum.Pointer */);
     const [activeColor, setActiveColor] = useState(pickerColors[0]);
+    const [metadata, setMetadata] = useState({
+        parameters: [
+            ...((_a = configuration.parameters.map((p) => {
+                const initial = initialData === null || initialData === void 0 ? void 0 : initialData.parameters.find((p) => p.codename === p.codename);
+                return {
+                    codename: p.codename,
+                    value: initial ? initial.value : p.value,
+                };
+            })) !== null && _a !== void 0 ? _a : []),
+        ],
+        rois: [],
+    });
     const [shapes, setShapes] = useState({});
     const addShape = useCallback((id, type, shape) => setShapes(Object.assign(Object.assign({}, shapes), { [id]: { type, shape } })), [shapes]);
+    const addShapes = useCallback((s) => setShapes(Object.assign(Object.assign({}, shapes), s.reduce((r, s) => (Object.assign(Object.assign({}, r), { [s.id]: s })), {}))), [shapes]);
     const removeShape = useCallback((id) => {
         const newShapes = Object.assign({}, shapes);
         delete newShapes[id];
         setShapes(newShapes);
-    }, [shapes]);
+        setMetadata(Object.assign(Object.assign({}, metadata), { rois: metadata.rois.filter((r) => r.id !== id) }));
+    }, [shapes, metadata]);
+    const handleSubmit = useCallback(() => {
+        var _a, _b;
+        const [isValid, errors] = validate(configuration, shapes, metadata, strings);
+        if (isValid) {
+            onSubmit({
+                parameters: (_b = (_a = metadata.parameters) === null || _a === void 0 ? void 0 : _a.map((p) => ({ codename: p.codename, value: p.value }))) !== null && _b !== void 0 ? _b : [],
+                rois: Object.keys(shapes).map((shapeId) => {
+                    var _a, _b, _c;
+                    return ({
+                        parameters: (_c = (_b = (_a = metadata.rois
+                            .find((r) => r.id === shapeId)) === null || _a === void 0 ? void 0 : _a.parameters) === null || _b === void 0 ? void 0 : _b.map((p) => ({ codename: p.codename, value: p.value }))) !== null && _c !== void 0 ? _c : [],
+                        type: shapes[shapeId].type,
+                        shape: fabricShapeToOutputShape(shapes[shapeId].shape, shapes[shapeId].shape.type),
+                    });
+                }),
+            });
+        }
+        else {
+            notify.error(strings.invalidSubmission + '\n' + errors.map((e) => `- ${e}`).join('\n'));
+        }
+    }, [onSubmit, configuration, shapes, metadata, strings, notify]);
     log('info', enableLogs, 'react-cam-roi', 'active tool', activeTool);
     log('info', enableLogs, 'react-cam-roi', 'canvas size', canvasSize);
+    log('info', enableLogs, 'react-cam-roi', 'metadata', metadata);
     if (!isReady) {
         return _jsx(Loader, {});
     }
-    return (_jsx(EditorProvider, { activeTool: activeTool, setActiveTool: setActiveTool, activeColor: activeColor, setActiveColor: setActiveColor, shapes: shapes, addShape: addShape, removeShape: removeShape, configuration: configuration, children: _jsxs("div", { style: { maxWidth: '100%', width: `${imageSize.width}px` }, ref: wrapperRef, children: [_jsx(Toolbar, {}), _jsx("div", { className: css('canvasWrapper', styles, themeMode), style: {
+    return (_jsx(EditorProvider, { id: id, hideForbiddenTools: (_c = (_b = configuration.options) === null || _b === void 0 ? void 0 : _b.hideForbiddenTools) !== null && _c !== void 0 ? _c : false, activeTool: activeTool, setActiveTool: setActiveTool, activeColor: activeColor, setActiveColor: setActiveColor, shapes: shapes, addShape: addShape, addShapes: addShapes, removeShape: removeShape, configuration: configuration, metadata: metadata, setMetadata: setMetadata, onSubmit: handleSubmit, children: _jsxs("div", { style: { maxWidth: '100%', width: `${imageSize.width}px` }, ref: wrapperRef, children: [_jsx(Toolbar, {}), _jsx("div", { className: css('canvasWrapper', styles, themeMode), style: {
                         width: `${canvasSize.width}px`,
                         height: `${canvasSize.height}px`,
                         backgroundImage: `url(${imageUrl})`,
-                    }, children: _jsx(Canvas, { canvasSize: canvasSize }) }), _jsx(ShapesList, {})] }) }));
+                    }, children: _jsx(Canvas, { canvasSize: canvasSize, initialData: initialData }) }), _jsx(ShapesList, {})] }) }));
 };
 export default RoiEditor;

package/dist/Components/TextField/TextField.module.css

@@ -0,0 +1,61 @@
+/*
+.text-field-wrapper {
+  margin-bottom: 2rem;
+}
+.text-field-wrapper-light {
+}
+.text-field-wrapper-dark {
+}
+*/
+
+.text-field {
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  padding: 0.5rem;
+  width: 100%;
+}
+.text-field:focus-visible {
+  outline: none;
+  border: 1px solid #1976d2;
+}
+.text-field-light {
+  background-color: #fff;
+  color: #333;
+  border: 1px solid #ccc;
+}
+.text-field-dark {
+  background-color: #333;
+  border: 1px solid #666;
+  color: #fff;
+}
+.text-field-error {
+  border: 1px solid #d32f2f;
+}
+.text-field-label {
+  font-weight: bold;
+  display: block;
+  margin: 0 0 1rem 0;
+}
+/*
+.text-fiel-label-light {
+}
+.text-field-label-dark {
+}
+*/
+.text-field-label-error {
+  color: #d32f2f;
+}
+.text-field-helper-text {
+  font-style: italic;
+  font-size: 0.9rem;
+  margin-top: 0.5rem;
+}
+/*
+.text-field-helper-text-light {
+}
+.text-field-helper-text-dark {
+}
+*/
+.text-field-helper-text-error {
+  color: #d32f2f;
+}

package/dist/Components/TextField/index.d.ts

@@ -0,0 +1,6 @@
+import { FieldProps } from '../../Types';
+export interface TextFieldProps extends FieldProps<string> {
+    type?: 'text' | 'email' | 'password';
+}
+declare const TextField: React.FC<TextFieldProps>;
+export default TextField;

package/dist/Components/TextField/index.js

@@ -0,0 +1,13 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { UiContext } from '../../Providers/UiProvider';
+import { css } from '../../Utils';
+import styles from './TextField.module.css';
+const TextField = ({ onChange, type = 'text', value, label, helperText, error, required = false, readOnly = false, disabled = false, }) => {
+    const { themeMode, Typography } = useContext(UiContext);
+    const handleChange = (e) => {
+        onChange(e.target.value);
+    };
+    return (_jsxs("div", { className: css('text-field-wrapper', styles, themeMode), children: [_jsx("label", { className: `${css('text-field-label', styles, themeMode)} ${error ? css('text-field-label-error', styles, null) : ''}`, children: _jsxs(Typography, { children: [label, required && ' *'] }) }), _jsx("input", { type: type, className: `${css('text-field', styles, themeMode)} ${error ? css('text-field-error', styles, null) : ''}`, onChange: handleChange, value: value, readOnly: readOnly, disabled: disabled }), helperText && (_jsx(Typography, { component: 'div', className: `${css('text-field-helper-text', styles, themeMode)} ${error ? css('text-field-helper-text-error', styles, null) : ''}`, children: helperText }))] }));
+};
+export default TextField;

package/dist/Components/Typography/index.d.ts

@@ -3,6 +3,7 @@ export type TypographyProps = {
     className?: string;
     variant?: any;
     component?: any;
+    style?: React.CSSProperties;
 };
 declare const Typography: React.FC<TypographyProps>;
 export default Typography;

package/dist/Components/Typography/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-const Typography = ({ children, className = '', component = 'span' }) => {
+const Typography = ({ children, style = {}, className = '', component = 'span' }) => {
     const Tag = component;
-    return _jsx(Tag, { className: className, children: children });
+    return _jsx(Tag, { className: className, style: style, children: children });
 };
 export default Typography;

package/dist/Icons/SaveIcon.d.ts

@@ -0,0 +1,6 @@
+type SaveIconProps = {
+    color?: string;
+    style?: React.CSSProperties;
+};
+declare const SaveIcon: React.FC<SaveIconProps>;
+export default SaveIcon;

package/dist/Icons/SaveIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SaveIcon = ({ color = 'black', style = {} }) => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", style: style, children: _jsx("path", { fill: color, d: "M840-680v480q0 33-23.5 56.5T760-120H200q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h480l160 160Zm-80 34L646-760H200v560h560v-446ZM480-240q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35ZM240-560h360v-160H240v160Zm-40-86v446-560 114Z" }) }));
+};
+export default SaveIcon;

package/dist/Providers/EditorProvider.d.ts

@@ -1,16 +1,26 @@
 import { PropsWithChildren } from 'react';
-import { Configuration, Shape, Shapes, ShapeType, ToolEnum } from '../Components/RoiEditor/Types';
+import { Configuration, Metadata, Shape, Shapes, ShapeType, ToolEnum } from '../Components/RoiEditor/Types';
 type EditorContextType = {
+    hideForbiddenTools: boolean;
     activeTool: ToolEnum;
     setActiveTool: (tool: ToolEnum) => void;
     activeColor: string;
     setActiveColor: (color: string) => void;
     shapes: Shapes;
     addShape: (id: string, type: ShapeType, shape: Shape) => void;
+    addShapes: (shapes: {
+        id: string;
+        type: ShapeType;
+        shape: Shape;
+    }[]) => void;
     removeShape: (id: string) => void;
     configuration: Configuration;
+    metadata: Metadata;
+    setMetadata: (data: Metadata) => void;
+    onSubmit: () => void;
+    id: string;
 };
 export declare const EditorContext: import("react").Context<EditorContextType | undefined>;
 export declare function useEditorContext(): EditorContextType;
-declare const EditorProvider: ({ children, activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, removeShape, configuration, }: PropsWithChildren<EditorContextType>) => import("react/jsx-runtime").JSX.Element;
+declare const EditorProvider: ({ children, id, hideForbiddenTools, activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, addShapes, removeShape, configuration, metadata, setMetadata, onSubmit, }: PropsWithChildren<EditorContextType>) => import("react/jsx-runtime").JSX.Element;
 export default EditorProvider;

package/dist/Providers/EditorProvider.js

@@ -8,7 +8,22 @@ export function useEditorContext() {
     }
     return context;
 }
-const EditorProvider = ({ children, activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, removeShape, configuration, }) => {
-    return (_jsx(EditorContext.Provider, { value: { activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, removeShape, configuration }, children: children }));
+const EditorProvider = ({ children, id, hideForbiddenTools, activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, addShapes, removeShape, configuration, metadata, setMetadata, onSubmit, }) => {
+    return (_jsx(EditorContext.Provider, { value: {
+            id,
+            hideForbiddenTools,
+            activeTool,
+            setActiveTool,
+            activeColor,
+            setActiveColor,
+            shapes,
+            addShape,
+            addShapes,
+            removeShape,
+            configuration,
+            metadata,
+            setMetadata,
+            onSubmit,
+        }, children: children }));
 };
 export default EditorProvider;

package/dist/Providers/UiProvider.d.ts

@@ -9,6 +9,12 @@ import CopyIcon from '../Icons/CopyIcon';
 import AnnotateIcon from '../Icons/AnnotateIcon';
 import Modal from '../Components/Modal';
 import CloseIcon from '../Icons/CloseIcon';
+import TextField from '../Components/TextField';
+import NumberField from '../Components/NumberField';
+import BoolField from '../Components/BoolField';
+import EnumField from '../Components/EnumField';
+import Button from '../Components/Button';
+import SaveIcon from '../Icons/SaveIcon';
 type UiContextType = {
     children?: React.ReactNode;
     enableLogs: boolean;
@@ -22,15 +28,25 @@ type UiContextType = {
     SelectIcon: typeof SelectIcon;
     CopyIcon: typeof CopyIcon;
     AnnotateIcon: typeof AnnotateIcon;
+    SaveIcon: typeof SaveIcon;
     CloseIcon: typeof CloseIcon;
+    TextField: typeof TextField;
+    NumberField: typeof NumberField;
+    BoolField: typeof BoolField;
+    EnumField: typeof EnumField;
+    Button: typeof Button;
     pickerColors: string[];
     notify: INotify;
     strings: {
+        cancel: string;
         cannotDrawMorePolygons: string;
         cannotDrawMorePolylines: string;
         cannotDrawMoreRectangles: string;
         id: string;
+        invalidSubmission: string;
         mainParametersMetadata: string;
+        missingRequiredValuesInMainParameters: string;
+        missingRequiredValuesInShapeParameters: string;
         polygon: string;
         polygonHelpText: string;
         polyline: string;
@@ -39,12 +55,19 @@ type UiContextType = {
         rectHelpText: string;
         pointer: string;
         pointerHelpText: string;
+        requiredField: string;
+        save: string;
+        shapesOfTypeShouldBeEqualToThreshold: string;
+        shapesOfTypeShouldBeGreaterThanThreshold: string;
+        shapesOfTypeShouldBeGreaterThanOrEqualToThreshold: string;
+        shapesOfTypeShouldBeLessThanThreshold: string;
+        shapesOfTypeShouldBeLessThanOrEqualToThreshold: string;
         type: string;
     };
 };
 export declare const DefaultUiContext: UiContextType;
 export declare const UiContext: import("react").Context<UiContextType>;
-declare const UiProvider: ({ children, enableLogs, themeMode, primaryColor, Typography, Modal, IconButton, DeleteIcon, EditIcon, SelectIcon, CopyIcon, AnnotateIcon, CloseIcon, pickerColors, notify, strings, }: PropsWithChildren<Partial<Omit<UiContextType, "strings">> & {
+declare const UiProvider: ({ children, enableLogs, themeMode, primaryColor, Typography, Modal, IconButton, DeleteIcon, EditIcon, SelectIcon, CopyIcon, AnnotateIcon, SaveIcon, CloseIcon, TextField, NumberField, BoolField, EnumField, Button, pickerColors, notify, strings, }: PropsWithChildren<Partial<Omit<UiContextType, "strings">> & {
     strings?: Partial<UiContextType["strings"]>;
 }>) => import("react/jsx-runtime").JSX.Element;
 export default UiProvider;

package/dist/Providers/UiProvider.js

@@ -10,6 +10,12 @@ import CopyIcon from '../Icons/CopyIcon';
 import AnnotateIcon from '../Icons/AnnotateIcon';
 import Modal from '../Components/Modal';
 import CloseIcon from '../Icons/CloseIcon';
+import TextField from '../Components/TextField';
+import NumberField from '../Components/NumberField';
+import BoolField from '../Components/BoolField';
+import EnumField from '../Components/EnumField';
+import Button from '../Components/Button';
+import SaveIcon from '../Icons/SaveIcon';
 export const DefaultUiContext = {
     enableLogs: true,
     themeMode: 'light',
@@ -22,15 +28,25 @@ export const DefaultUiContext = {
     SelectIcon,
     CopyIcon,
     AnnotateIcon,
+    SaveIcon,
     CloseIcon,
+    TextField,
+    NumberField,
+    BoolField,
+    EnumField,
+    Button,
     pickerColors: ['#ffffff', '#000000', '#ff9900', '#0099ff'],
     notify,
     strings: {
+        cancel: 'Cancel',
         cannotDrawMorePolygons: 'You cannot draw more polygons',
         cannotDrawMorePolylines: 'You cannot draw more polylines',
         cannotDrawMoreRectangles: 'You cannot draw more rectangles',
         id: 'ID',
+        invalidSubmission: 'Invalid submission',
         mainParametersMetadata: 'Main parameters',
+        missingRequiredValuesInMainParameters: 'Missing required values in main parameters',
+        missingRequiredValuesInShapeParameters: 'Missing required values in shape {id} parameters',
         polygon: 'Polygon',
         polygonHelpText: 'click to draw all the polygon points, double click on the last point to close the polygon',
         polyline: 'Polyline',
@@ -39,11 +55,18 @@ export const DefaultUiContext = {
         rectHelpText: 'click and drag to draw the rectangle',
         pointer: 'Selection',
         pointerHelpText: 'click a shape to select it',
+        requiredField: 'This field is required',
+        save: 'Save',
+        shapesOfTypeShouldBeEqualToThreshold: 'Shapes of type {type} should be equal to {threshold}',
+        shapesOfTypeShouldBeGreaterThanThreshold: 'Shapes of type {type} should be greater than {threshold}',
+        shapesOfTypeShouldBeGreaterThanOrEqualToThreshold: 'Shapes of type {type} should be greater than or equal to {threshold}',
+        shapesOfTypeShouldBeLessThanThreshold: 'Shapes of type {type} should be less than {threshold}',
+        shapesOfTypeShouldBeLessThanOrEqualToThreshold: 'Shapes of type {type} should be less than or equal to {threshold}',
         type: 'Type',
     },
 };
 export const UiContext = createContext(DefaultUiContext);
-const UiProvider = ({ children, enableLogs, themeMode, primaryColor, Typography, Modal, IconButton, DeleteIcon, EditIcon, SelectIcon, CopyIcon, AnnotateIcon, CloseIcon, pickerColors, notify, strings, }) => {
+const UiProvider = ({ children, enableLogs, themeMode, primaryColor, Typography, Modal, IconButton, DeleteIcon, EditIcon, SelectIcon, CopyIcon, AnnotateIcon, SaveIcon, CloseIcon, TextField, NumberField, BoolField, EnumField, Button, pickerColors, notify, strings, }) => {
     const ctx = {
         enableLogs: enableLogs !== null && enableLogs !== void 0 ? enableLogs : DefaultUiContext.enableLogs,
         Typography: Typography !== null && Typography !== void 0 ? Typography : DefaultUiContext.Typography,
@@ -54,7 +77,13 @@ const UiProvider = ({ children, enableLogs, themeMode, primaryColor, Typography,
         SelectIcon: SelectIcon !== null && SelectIcon !== void 0 ? SelectIcon : DefaultUiContext.SelectIcon,
         CopyIcon: CopyIcon !== null && CopyIcon !== void 0 ? CopyIcon : DefaultUiContext.CopyIcon,
         AnnotateIcon: AnnotateIcon !== null && AnnotateIcon !== void 0 ? AnnotateIcon : DefaultUiContext.AnnotateIcon,
+        SaveIcon: SaveIcon !== null && SaveIcon !== void 0 ? SaveIcon : DefaultUiContext.SaveIcon,
         CloseIcon: CloseIcon !== null && CloseIcon !== void 0 ? CloseIcon : DefaultUiContext.CloseIcon,
+        TextField: TextField !== null && TextField !== void 0 ? TextField : DefaultUiContext.TextField,
+        NumberField: NumberField !== null && NumberField !== void 0 ? NumberField : DefaultUiContext.NumberField,
+        BoolField: BoolField !== null && BoolField !== void 0 ? BoolField : DefaultUiContext.BoolField,
+        EnumField: EnumField !== null && EnumField !== void 0 ? EnumField : DefaultUiContext.EnumField,
+        Button: Button !== null && Button !== void 0 ? Button : DefaultUiContext.Button,
         themeMode: themeMode !== null && themeMode !== void 0 ? themeMode : DefaultUiContext.themeMode,
         primaryColor: primaryColor !== null && primaryColor !== void 0 ? primaryColor : DefaultUiContext.primaryColor,
         pickerColors: pickerColors !== null && pickerColors !== void 0 ? pickerColors : DefaultUiContext.pickerColors,

package/dist/Types.d.ts

@@ -0,0 +1,10 @@
+export interface FieldProps<T> {
+    onChange: (value: T) => void;
+    value: T;
+    label: string;
+    helperText?: string;
+    error?: boolean;
+    required?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+}

package/dist/Types.js

@@ -0,0 +1 @@
+export {};

package/dist/Utils/index.d.ts

@@ -1,2 +1,2 @@
 export declare const log: (level: "log" | "info" | "warn" | "error", enable: boolean, ...args: unknown[]) => false | void;
-export declare const css: (name: string, styles: Record<string, string>, themeMode: "light" | "dark") => string;
+export declare const css: (name: string, styles: Record<string, string>, themeMode: "light" | "dark" | null) => string;

package/dist/Utils/index.js

@@ -1,2 +1,2 @@
 export const log = (level, enable, ...args) => enable && console[level](...args);
-export const css = (name, styles, themeMode) => `${styles[name]} ${styles[`${name}-${themeMode}`]} react-cam-roi-${name} react-cam-roi-${name}-${themeMode}`;
+export const css = (name, styles, themeMode) => `${styles[name]} ${styles[`${name}-${themeMode}`]} react-cam-roi-${name}${themeMode ? `react-cam-roi-${name}-${themeMode}` : ''}`;