@abidibo/react-cam-roi 0.0.12 → 0.1.0

package/README.md

@@ -37,11 +37,12 @@ const MyComponent: React.FC = () => {
     const themMode = 'light'
     const config = {} // see below
 
-    const handleSubmit = (data: Types.Output) =>  console.log(data)
+    const handleSubmit = (data: Types.Output) =>  console.log(data) // onSubmit runs validation
+    const handleUpdate = (data: Types.Output) =>  console.log(data) // onUpdate runs without validation
 
     return (
         <UiProvider themeMode={themeMode} IconButton={IconButton} Typography={Typography} DeleteIcon={() => <Delete />}>
-          <RoiEditor imageUrl={'https://placecats.com/800/600'} configuration={config} onSubmit={handleSubmit} />
+          <RoiEditor imageUrl={'https://placecats.com/800/600'} configuration={config} onSubmit={handleSubmit} onUpdate={handleUpdate} />
         </UiProvider>
     )
 }
@@ -52,7 +53,7 @@ The `RoiEditor` props and the `Output` interface used both in import and export:
 ``` ts 
 export type RoiEditorProps = {
   // id of this editor instance, should be unique
-  id: string
+  editorId: string
   // the url of the image we want to annotate
   imageUrl: string
   // configuration object
@@ -103,6 +104,8 @@ export interface OutputParameter {
 export interface OutputRoi {
   parameters: OutputParameter[]
   type: ShapeType
+  name: string
+  role: string
   shape: OutputShapeRect | OutputShapePolyline | OutputShapePolygon
 }
 export interface Output {
@@ -165,7 +168,7 @@ export type ConfigurationParameter = {
 
 // Configuration of ROIs
 export type RoiConfiguration = {
-  role: string // for our use case
+  role: string // let's say the category of the roi
   type: Omit<ShapeType, 'pointer'> // shape type
   multiplicity: { // how many ROIs of this type can be drawn
     operator: OperatorEnum
@@ -210,7 +213,7 @@ export const configuration: Configuration = {
   ],
   rois: [
     {
-      role: 'invasion_area', // analytics role, do not show in interface
+      role: 'invasion_area', // analytics role
       type: ToolEnum.Polygon,
       multiplicity: {
         // how many rois of this type can/should be created
@@ -255,7 +258,7 @@ import { UiProvider, RoiEditor } from 'react-cam-roi'
 
 const MyView: React.FC = () => {
   return (
-    <UiProvider themeMode={'dark'} IconButton={IconButton} primaryColor={'#1976d2'} enableLogs>
+    <UiProvider themeMode={'dark'} IconButton={IconButton} primaryColor={'#1976d2'} primaryFgColor={'#fff'} enableLogs>
       <RoiEditor imageUrl={'whatever'} />
     </UiProvider>
   )
@@ -272,11 +275,11 @@ type UiContextType = {
   enableLogs: boolean // enable console logs
   themeMode: 'light' | 'dark' // themeMode for internal components
   primaryColor: string // primary color for internal components
+  primaryFgColor: string // text color above primary bg for internal components
   Typography: React.FC<TypographyProps> // component used to surround text
   Modal: React.FC<ModalProps> // modal dialog component (it displays metadata forms)
   IconButton: React.FC<IconButtonProps> // wrapper for icon buttons
   DeleteIcon: React.FC<DeleteIconProps> // delete icon
-  SelectIcon: React.FC<SelectIconProps> // select icon
   CopyIcon: typeof CopyIcon // copy icon (clone a shape)
   AnnotateIcon: typeof AnnotateIcon // annotate icon (open metadata form)
   CloseIcon: typeof CloseIcon // close icon
@@ -297,21 +300,32 @@ type UiContextType = {
     mainParametersMetadata: string
     missingRequiredValuesInMainParameters: string
     missingRequiredValuesInShapeParameters: string // with {id} placeholder
+    mainParametersMetadata: strings
+    roiMultiplicityEqRule: string // with {role}, {type} and {threshold} placeholder
+    roiMultiplicityGtRule: string // with {role}, {type} and {threshold} placeholder
+    roiMultiplicityGteRule: string // with {role}, {type} and {threshold} placeholder
+    roiMultiplicityLtRule: string // with {role}, {type} and {threshold} placeholder
+    roiMultiplicityLteRule: string // with {role}, {type} and {threshold} placeholder
+    roiMultiplicityNoRule: string // with {role}, {type}
+    name: string
     polygon: string
     polygonHelpText: string
     polyline: string
     polylineHelpText: string
-    rect: string
-    rectHelpText: string
     pointer: string
     pointerHelpText: string
+    rect: string
+    rectHelpText: string
     requiredField: string
+    roisToBeDrawn: string
+    role: string
     save: string
-    shapesOfTypeShouldBeEqualToThreshold: string // with {type} and {threshold} placeholders
-    shapesOfTypeShouldBeGreaterThanThreshold: string // with {type} and {threshold} placeholders
-    shapesOfTypeShouldBeGreaterThanOrEqualToThreshold: string // with {type} and {threshold} placeholders
-    shapesOfTypeShouldBeLessThanThreshold: string // with {type} and {threshold} placeholders
-    shapesOfTypeShouldBeLessThanOrEqualToThreshold: string // with {type} and {threshold} placeholders
+    shapeParametersMetadata: string
+    shapesOfRoleShouldBeEqualToThreshold: string // with {role} and {threshold} placeholders
+    shapesOfRoleShouldBeGreaterThanThreshold: string // with {role} and {threshold} placeholders
+    shapesOfRoleShouldBeGreaterThanOrEqualToThreshold: string // with {role} and {threshold} placeholders
+    shapesOfRoleShouldBeLessThanThreshold: string // with {role} and {threshold} placeholders
+    shapesOfRoleShouldBeLessThanOrEqualToThreshold: string // with {role} and {threshold} placeholders
     type: string
   }
 }
@@ -422,17 +436,6 @@ type EditIconProps = {
 }
 ```
 
-#### SelectIcon
-
-##### Interface
-
-```ts
-type SelectIconProps = {
-  color?: string
-  style?: React.CSSProperties
-}
-```
-
 #### CopyIcon
 
 ##### Interface
@@ -650,11 +653,17 @@ There are components that cannot be overridden. But still you can use classes to
 - `react-cam-roi-editor-wrapper-light`
 - `react-cam-roi-editor-wrapper-dark`
 
-#### Toolbar
+#### Header
+
+- `react-cam-roi-header`
+- `react-cam-roi-header-light`
+- `react-cam-roi-header-dark`
 
-- `react-cam-roi-toolbar-info`
-- `react-cam-roi-toolbar-info-light`
-- `react-cam-roi-toolbar-info-dark`
+- `react-cam-roi-header-info`
+- `react-cam-roi-header-info-light`
+- `react-cam-roi-header-info-dark`
+
+#### Toolbar
 
 - `react-cam-roi-toolbar`
 - `react-cam-roi-toolbar-light`
@@ -675,6 +684,12 @@ There are components that cannot be overridden. But still you can use classes to
 - `react-cam-roi-shapes-table`
 - `react-cam-roi-shapes-table-light`
 - `react-cam-roi-shapes-table-dark`
+- `react-cam-roi-shapes-row-selected-light`
+- `react-cam-roi-shapes-row-selected-dark`
+- `react-cam-roi-shapes-row-even-light`
+- `react-cam-roi-shapes-row-even-dark`
+- `react-cam-roi-shapes-row-odd-light`
+- `react-cam-roi-shapes-row-odd-dark`
 
 #### Colorpicker button
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abidibo/react-cam-roi",
-  "version": "0.0.12",
+  "version": "0.1.0",
   "description": "A react component for drawing ROI over images and managing metadata",
   "repository": {
     "type": "git",
@@ -31,7 +31,31 @@
     "copy-files": "copyfiles -u 1 src/**/*.module.css dist/",
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build -o docs"
+  },
+  "release": {
+    "branches": [
+      "main"
+    ],
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      [
+        "@semantic-release/changelog",
+        {
+          "changelogFile": "CHANGELOG.md"
+        }
+      ],
+      [
+        "@semantic-release/git",
+        {
+          "assets": [
+            "CHANGELOG.md"
+          ]
+        }
+      ],
+      "@semantic-release/npm"
+    ]
   },
   "author": "abidibo",
   "license": "MIT",
@@ -42,6 +66,8 @@
     "@eslint/js": "^9.18.0",
     "@fontsource/roboto": "^5.1.1",
     "@mui/material": "^6.4.3",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-interactions": "^8.4.7",
     "@storybook/addon-onboarding": "^8.4.7",
@@ -60,6 +86,7 @@
     "globals": "^15.14.0",
     "prettier": "^3.4.2",
     "rimraf": "^6.0.1",
+    "semantic-release": "^24.2.2",
     "storybook": "^8.4.7",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.20.0"

package/dist/Components/BoolField/BoolField.module.css

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

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

@@ -1,5 +0,0 @@
-import { FieldProps } from "../../Types";
-declare const BoolField: React.FC<Omit<FieldProps<boolean>, 'onChange'> & {
-    onChange: (value: boolean) => void;
-}>;
-export default BoolField;

package/dist/Components/BoolField/index.js

@@ -1,13 +0,0 @@
-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 './BoolField.module.css';
-const BoolField = ({ onChange, value, label, helperText, error, readOnly = false, disabled = false, required = false, }) => {
-    const { themeMode, Typography } = useContext(UiContext);
-    const handleChange = (e) => {
-        onChange(e.target.checked);
-    };
-    return (_jsxs("div", { className: css('bool-field-wrapper', styles, themeMode), children: [_jsx("label", { className: `${css('bool-field-label', styles, themeMode)} ${error ? css('bool-field-label-error', styles, null) : ''}`, children: _jsxs(Typography, { children: [label, required && ' *'] }) }), _jsx("input", { type: 'checkbox', className: `${css('bool-field', styles, themeMode)} ${error ? css('bool-field-error', styles, null) : ''}`, onChange: handleChange, checked: value, readOnly: readOnly, disabled: disabled }), helperText && (_jsx(Typography, { component: 'div', className: `${css('bool-field-helper-text', styles, themeMode)} ${error ? css('bool-field-helper-text-error', styles, null) : ''}`, children: helperText }))] }));
-};
-export default BoolField;

package/dist/Components/Button/Button.module.css

@@ -1,27 +0,0 @@
-.button {
-  border: none;
-  border-radius: 4px;
-  color: black;
-  padding: .5rem 1rem;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 16px;
-  margin: 4px 2px;
-  cursor: pointer;
-}
-
-.button-light {
-  background-color: #d7d7d7;
-  color: black;
-}
-
-.button-dark {
-  background-color: #383838;
-  color: white;
-}
-
-.button-disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}

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

@@ -1,8 +0,0 @@
-import { PropsWithChildren } from 'react';
-export type ButtonProps = {
-    onClick: (event: React.MouseEvent) => void;
-    primary?: boolean;
-    disabled?: boolean;
-};
-declare const Button: ({ onClick, primary, disabled, children }: PropsWithChildren<ButtonProps>) => import("react/jsx-runtime").JSX.Element;
-export default Button;

package/dist/Components/Button/index.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { UiContext } from '../../Providers/UiProvider';
-import { css } from '../../Utils';
-import styles from './Button.module.css';
-const Button = ({ onClick, primary, disabled, children }) => {
-    const { themeMode, primaryColor } = useContext(UiContext);
-    const style = {};
-    if (primary) {
-        style.backgroundColor = primaryColor;
-        style.color = 'white';
-    }
-    return (_jsx("button", { className: `${css('button', styles, themeMode)}${disabled ? ` ${css('button-disabled', styles, themeMode)}` : ''}`, style: style, onClick: onClick, disabled: disabled, children: children }));
-};
-export default Button;

package/dist/Components/EnumField/EnumField.module.css

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

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

@@ -1,10 +0,0 @@
-import { FieldProps } from '../../Types';
-export type EnumOption = {
-    value: string | number;
-    label: string;
-};
-declare const EnumField: ({ onChange, value, label, helperText, error, options, disabled, required, multiple }: Omit<FieldProps<string | number | (string | number)[]>, "readOnly"> & {
-    options: EnumOption[];
-    multiple?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
-export default EnumField;

package/dist/Components/EnumField/index.js

@@ -1,16 +0,0 @@
-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 './EnumField.module.css';
-const EnumField = ({ onChange, value, label, helperText, error, options, disabled = false, required = false, multiple = false }) => {
-    const { themeMode, Typography } = useContext(UiContext);
-    const handleChange = (e) => {
-        const selectedValues = Array.from(e.target.selectedOptions, (option) => {
-            return isNaN(Number(option.value)) ? option.value : Number(option.value);
-        });
-        onChange(multiple ? selectedValues : selectedValues[0]);
-    };
-    return (_jsxs("div", { className: css('enum-field-wrapper', styles, themeMode), children: [_jsx("label", { className: `${css('enum-field-label', styles, themeMode)} ${error ? css('enum-field-label-error', styles, null) : ''}`, children: _jsxs(Typography, { children: [label, required && ' *'] }) }), _jsxs("select", { className: `${css('enum-field', styles, themeMode)} ${error ? css('enum-field-error', styles, null) : ''}`, onChange: handleChange, value: value, disabled: disabled, multiple: multiple, children: [!required && _jsx("option", { value: '' }), options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] }), helperText && (_jsx(Typography, { component: 'div', className: `${css('enum-field-helper-text', styles, themeMode)} ${error ? css('enum-field-helper-text-error', styles, null) : ''}`, children: helperText }))] }));
-};
-export default EnumField;

package/dist/Components/IconButton/IconButton.module.css

@@ -1,20 +0,0 @@
-.icon-button {
-  display: inline-block;
-  border-radius: 50%;
-  line-height: 0;
-  padding: 0.5rem;
-  cursor: pointer;
-}
-
-.icon-button-light:hover {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-
-.icon-button-dark:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-.icon-button-disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}

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

@@ -1,7 +0,0 @@
-export type IconButtonProps = {
-    children?: React.ReactNode;
-    disabled?: boolean;
-    onClick?: (event: React.MouseEvent) => void;
-};
-declare const IconButton: React.FC<IconButtonProps>;
-export default IconButton;

package/dist/Components/IconButton/index.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { UiContext } from '../../Providers/UiProvider';
-import { css } from '../../Utils';
-import styles from './IconButton.module.css';
-const IconButton = ({ children, disabled, onClick }) => {
-    const { themeMode } = useContext(UiContext);
-    return (_jsx("div", { className: `${css('icon-button', styles, themeMode)} ${disabled ? css('icon-button-disabled', styles, themeMode) : ''}`, onClick: disabled ? undefined : onClick, children: children }));
-};
-export default IconButton;

package/dist/Components/Loader/Loader.module.css

@@ -1,25 +0,0 @@
-.loader {
-  border-radius: 50%;
-  width: 40px;
-  height: 40px;
-  animation: spin 1s linear infinite;
-}
-
-.loader-light {
-  border: 10px solid #f3f3f3;
-  border-top: 10px solid #3498db;
-}
-
-.loader-dark {
-  border: 10px solid #333;
-  border-top: 10px solid #3498db;
-}
-
- @keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} 

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

@@ -1 +0,0 @@
-export declare const Loader: React.FC;

package/dist/Components/Loader/index.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { UiContext } from '../../Providers/UiProvider';
-import styles from './Loader.module.css';
-import { css } from '../../Utils';
-export const Loader = () => {
-    const { themeMode } = useContext(UiContext);
-    return _jsx("div", { className: css('loader', styles, themeMode) });
-};

package/dist/Components/Modal/Modal.module.css

@@ -1,92 +0,0 @@
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 9000;
-}
-
-.modal-overlay-light {
-  background-color: rgba(255, 255, 255, 0.7);
-}
-
-.modal-overlay-dark {
-  background-color: rgba(0, 0, 0, 0.7);
-}
-
-.modal {
-  max-width: 80%;
-  max-height: 80%;
-  overflow: auto;
-  padding: 20px;
-  border-radius: 5px;
-}
-
-.modal:focus-visible {
-  outline: none;
-}
-
-.modal-light {
-  background-color: #fff;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-  color: #000;
-}
-
-.modal-dark {
-  background-color: #333;
-  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
-  color: #fff;
-}
-
-.modal-xs {
-  width: 400px;
-}
-
-.modal-sm {
-  width: 600px;
-}
-
-.modal-md {
-  width: 800px;
-}
-
-.modal-lg {
-  width: 1000px;
-}
-
-.modal-xl {
-  width: 1200px;
-}
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-}
-
-.modal-title {
-  font-size: 1.5rem;
-  font-weight: bold;
-  margin: 0;
-}
-
-.modal-title-light {
-  color: #000;
-}
-
-.modal-title-dark {
-  color: #fff;
-}
-
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 1rem;
-  gap: .5rem;
-}
-

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

@@ -1,10 +0,0 @@
-import { PropsWithChildren } from 'react';
-export type ModalProps = {
-    isOpen: boolean;
-    onClose: () => void;
-    title: string;
-    maxWidth: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    onSubmit?: () => void;
-};
-declare const Modal: React.FC<PropsWithChildren<ModalProps>>;
-export default Modal;

package/dist/Components/Modal/index.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createPortal } from 'react-dom';
-import { useContext } from 'react';
-import CloseIcon from '../../Icons/CloseIcon';
-import { UiContext } from '../../Providers/UiProvider';
-import { css } from '../../Utils';
-import styles from './Modal.module.css';
-const Modal = ({ isOpen, onClose, children, title, maxWidth, onSubmit }) => {
-    const { themeMode, IconButton, Typography, Button, strings } = useContext(UiContext);
-    const iconColor = themeMode === 'light' ? 'black' : 'white';
-    if (!isOpen) {
-        return null;
-    }
-    return createPortal(_jsx("div", { className: css('modal-overlay', styles, themeMode), children: _jsxs("div", { className: `${css('modal', styles, themeMode)} ${css(`modal-${maxWidth}`, styles, themeMode)}`, children: [_jsxs("div", { className: css('modal-header', styles, themeMode), children: [_jsx(Typography, { component: 'h6', className: css('modal-title', styles, themeMode), children: title }), _jsx(IconButton, { onClick: onClose, children: _jsx(CloseIcon, { color: iconColor }) })] }), children, _jsxs("div", { className: css('modal-footer', styles, themeMode), children: [_jsx(Button, { onClick: onClose, children: strings.cancel }), onSubmit && _jsx(Button, { primary: true, onClick: onSubmit, children: strings.save })] })] }) }), document.body);
-};
-export default Modal;