@abidibo/react-cam-roi 0.0.13 → 0.2.0

package/README.md

@@ -5,7 +5,7 @@
 This is a react component which lets you draw regions of interest (ROI) over images, manage metadata and import/export everything.    
 Metadata are dynamic information that can be attached to the whole image and/or to each ROI. The number of drawable ROIs can also be configured.
 
-![Screenshot](./react-cam-roi.png)
+![Screenshot](./react-cam-roi-s.png)
 
 It provides one component: `RoiEditor` and one provider: `UiProvider`. The editor lets you draw regions of interest over a given image (url). Each ROI can have dynamic metadata attached.    
 
@@ -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>
     )
 }
@@ -279,7 +280,6 @@ type UiContextType = {
   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
@@ -321,11 +321,11 @@ type UiContextType = {
     role: string
     save: string
     shapeParametersMetadata: 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
+    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
   }
 }
@@ -436,17 +436,6 @@ type EditIconProps = {
 }
 ```
 
-#### SelectIcon
-
-##### Interface
-
-```ts
-type SelectIconProps = {
-  color?: string
-  style?: React.CSSProperties
-}
-```
-
 #### CopyIcon
 
 ##### Interface
@@ -658,11 +647,17 @@ type INotify = { // compatible with toast (react-toastify)
 
 There are components that cannot be overridden. But still you can use classes to style them.
 
-#### Wrapper
+#### Top bar
+
+- `react-cam-roi-top-bar`
+- `react-cam-roi-top-bar-light`
+- `react-cam-roi-top-bar-dark`
 
-- `react-cam-roi-editor-wrapper`
-- `react-cam-roi-editor-wrapper-light`
-- `react-cam-roi-editor-wrapper-dark`
+#### Canvas wrapper
+
+- `react-cam-roi-canvas-wrapper`
+- `react-cam-roi-canvas-wrapper-light`
+- `react-cam-roi-canvas-wrapper-dark`
 
 #### Header
 
@@ -741,12 +736,6 @@ Then rebuild this library to see your changes in the project.
 
 ## CI
 
-A github action pipeline is provided, it will publish the package to npm when a new tag is pushed. You need to add the `NPM_TOKEN` secret to your repository settings.
-
-Example of deployment:
-
-```bash
-$ npm version patch
-$ git push
-$ git push --tags
-```
+A github action pipeline is provided, which is triggered by every push to the main branch.    
+The pipeline will publish the package to npm and update the CHANGELOG following the [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/).    
+You need to add the `NODE_AUTH_TOKEN` and `GH_TOKEN` secrets to your repository settings, see [semantic-release](https://github.com/semantic-release/semantic-release) for more information.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abidibo/react-cam-roi",
-  "version": "0.0.13",
+  "version": "0.2.0",
   "description": "A react component for drawing ROI over images and managing metadata",
   "repository": {
     "type": "git",
@@ -33,6 +33,30 @@
     "storybook": "storybook dev -p 6006",
     "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",
   "devDependencies": {
@@ -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,29 +0,0 @@
-.button {
-  align-items: center;
-  border: none;
-  border-radius: 4px;
-  color: black;
-  padding: .5rem 1rem;
-  text-align: center;
-  text-decoration: none;
-  display: flex;
-  font-size: 16px;
-  gap: .5rem;
-  margin: 4px 2px;
-  cursor: pointer;
-}
-
-.button-light {
-  background-color: #c7c7c7;
-  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<T> = {
-    value: T;
-    label: string;
-};
-declare const EnumField: <T extends string | number>({ onChange, value, label, helperText, error, options, disabled, required, multiple }: Omit<FieldProps<T | T[]>, "readOnly"> & {
-    options: EnumOption<T>[];
-    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;

package/dist/Components/NumberField/NumberField.module.css

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

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

@@ -1,3 +0,0 @@
-import { FieldProps } from '../../Types';
-declare const NumberField: React.FC<FieldProps<number | null>>;
-export default NumberField;

package/dist/Components/NumberField/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 './NumberField.module.css';
-const NumberField = ({ onChange, value, label, required, helperText, error }) => {
-    const { themeMode, Typography } = useContext(UiContext);
-    const handleChange = (e) => {
-        onChange(parseFloat(e.target.value));
-    };
-    return (_jsxs("div", { className: css('number-field-wrapper', styles, themeMode), children: [_jsx("label", { className: `${css('number-field-label', styles, themeMode)} ${error ? css('number-field-label-error', styles, null) : ''}`, children: _jsxs(Typography, { children: [label, required && ' *'] }) }), _jsx("input", { type: 'number', className: `${css('number-field', styles, themeMode)} ${error ? css('number-field-error', styles, null) : ''}`, onChange: handleChange, value: value !== null && value !== void 0 ? value : '' }), helperText && (_jsx(Typography, { component: 'div', className: `${css('number-field-helper-text', styles, themeMode)} ${error ? css('number-field-helper-text-error', styles, null) : ''}`, children: helperText }))] }));
-};
-export default NumberField;