Tentative de rendre compatible le plugin annotation avec Mirador qui fonctionne avec React 17

.eslintrc

@@ -10,6 +10,10 @@
   "parser": "@babel/eslint-parser",
   "plugins": ["jest"],
   "rules": {
+    "import/no-extraneous-dependencies": [
+    "error",
+{"devDependencies": true}
+],
     "import/prefer-default-export": "off",
     "no-console": "off",
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],

package.json

@@ -23,6 +23,7 @@
     "test:ci": "jest --ci --reporters=default --reporters=jest-junit --watchAll=false"
   },
   "dependencies": {
+    "@mui/system": "^5.15.1",
     "@psychobolt/react-paperjs": "^1.0.3",
     "@psychobolt/react-paperjs-editor": "0.0.11",
     "draft-js": "^0.11.6",
@@ -43,9 +44,9 @@
   "devDependencies": {
     "@babel/core": "^7.10.4",
     "@babel/eslint-parser": "^7.19.1",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-env": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
-    "@babel/plugin-proposal-private-property-in-object":"^7.21.11" ,
     "@mui/icons-material": "^5.11.16",
     "@mui/lab": "^5.0.0-alpha.134",
     "@mui/material": "^5.13.5",

src/AnnotationCreation.js

@@ -3,29 +3,29 @@ import PropTypes from 'prop-types';
 import {
   Button, Paper, Grid, Popover, Divider,
   MenuList, MenuItem, ClickAwayListener,
-} from '@material-ui/core';
-import { Alarm, LastPage } from '@material-ui/icons';
-import Typography from '@material-ui/core/Typography';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
-import RectangleIcon from '@material-ui/icons/CheckBoxOutlineBlank';
-import CircleIcon from '@material-ui/icons/RadioButtonUnchecked';
-import PolygonIcon from '@material-ui/icons/Timeline';
-import GestureIcon from '@material-ui/icons/Gesture';
-import ClosedPolygonIcon from '@material-ui/icons/ChangeHistory';
-import OpenPolygonIcon from '@material-ui/icons/ShowChart';
-import FormatColorFillIcon from '@material-ui/icons/FormatColorFill';
-import StrokeColorIcon from '@material-ui/icons/BorderColor';
-import LineWeightIcon from '@material-ui/icons/LineWeight';
-import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
-import FormatShapesIcon from '@material-ui/icons/FormatShapes';
+} from '@mui/material';
+import { Alarm, LastPage } from '@mui/icons-material';
+import Typography from '@mui/material/Typography';
+import ToggleButton from '@mui/lab/ToggleButton';
+import ToggleButtonGroup from '@mui/lab/ToggleButtonGroup';
+import RectangleIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import CircleIcon from '@mui/icons-material/RadioButtonUnchecked';
+import PolygonIcon from '@mui/icons-material/Timeline';
+import GestureIcon from '@mui/icons-material/Gesture';
+import ClosedPolygonIcon from '@mui/icons-material/ChangeHistory';
+import OpenPolygonIcon from '@mui/icons-material/ShowChart';
+import FormatColorFillIcon from '@mui/icons-material/FormatColorFill';
+import StrokeColorIcon from '@mui/icons-material/BorderColor';
+import LineWeightIcon from '@mui/icons-material/LineWeight';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import FormatShapesIcon from '@mui/icons-material/FormatShapes';
 import { SketchPicker } from 'react-color';
 import { v4 as uuid } from 'uuid';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/system';
 import CompanionWindow from 'mirador/dist/es/src/containers/CompanionWindow';
 import { VideosReferences } from 'mirador/dist/es/src/plugins/VideosReferences';
 import { OSDReferences } from 'mirador/dist/es/src/plugins/OSDReferences';
-import Slider from '@material-ui/core/Slider';
+import Slider from '@mui/material/Slider';
 import AnnotationDrawing from './AnnotationDrawing';
 import TextEditor from './TextEditor';
 import WebAnnotation from './WebAnnotation';
@@ -33,6 +33,7 @@ import CursorIcon from './icons/Cursor';
 import HMSInput from './HMSInput';
 import ImageFormField from './ImageFormField';
 import { secondsToHMS } from './utils';
+
 /** Extract time information from annotation target */
 function timeFromAnnoTarget(annotarget) {
   console.info('TODO proper time extraction from: ', annotarget);
@@ -211,10 +212,14 @@ class AnnotationCreation extends Component {
   };
 
   /** update annotation start time */
-  updateTstart(value) { this.setState({ tstart: value }); }
+  updateTstart(value) {
+    this.setState({ tstart: value });
+  }
 
   /** update annotation end time */
-  updateTend(value) { this.setState({ tend: value }); }
+  updateTend(value) {
+    this.setState({ tend: value });
+  }
 
   /** seekTo/goto annotation start time */
 
@@ -637,6 +642,7 @@ class AnnotationCreation extends Component {
     );
   }
 }
+
 /** */
 const styles = (theme) => ({
   buttonTimeContainer: {
@@ -731,11 +737,14 @@ AnnotationCreation.propTypes = {
 AnnotationCreation.defaultProps = {
   annotation: null,
   canvases: [],
-  closeCompanionWindow: () => {},
+  closeCompanionWindow: () => {
+  },
   currentTime: null,
   paused: true,
-  setCurrentTime: () => {},
-  setSeekTo: () => {},
+  setCurrentTime: () => {
+  },
+  setSeekTo: () => {
+  },
 };
 
-export default withStyles(styles)(AnnotationCreation);
+export default styled(styles)(AnnotationCreation);

src/AnnotationExportDialog.js

 import React, { Component } from 'react';
-import Dialog from '@material-ui/core/Dialog';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import GetAppIcon from '@material-ui/icons/GetApp';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemText from '@material-ui/core/ListItemText';
-import MenuList from '@material-ui/core/MenuList';
-import MenuItem from '@material-ui/core/MenuItem';
-import Typography from '@material-ui/core/Typography';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import GetAppIcon from '@mui/icons-material/GetApp';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
 import PropTypes, { bool } from 'prop-types';
-import { withStyles } from '@material-ui/core';
+import { styled } from '@mui/system';
+
 
 /** */
 const styles = (theme) => ({
@@ -137,4 +138,4 @@ AnnotationExportDialog.defaultProps = {
   classes: {},
 };
 
-export default withStyles(styles)(AnnotationExportDialog);
+export default styled(styles)(AnnotationExportDialog);

src/CanvasListItem.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import DeleteIcon from '@material-ui/icons/DeleteForever';
-import EditIcon from '@material-ui/icons/Edit';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import DeleteIcon from '@mui/icons-material/DeleteForever';
+import EditIcon from '@mui/icons-material/Edit';
+import ToggleButton from '@mui/lab/ToggleButton';
+import ToggleButtonGroup from '@mui/lab/ToggleButtonGroup';
 import flatten from 'lodash/flatten';
 import AnnotationActionsContext from './AnnotationActionsContext';
 

src/HMSInput.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import { IconButton, Input, TextField } from '@material-ui/core';
-import { ArrowDownward, ArrowUpward } from '@material-ui/icons';
+import { withStyles } from '@mui/material/styles';
+import { Input } from '@mui/material';
 import { secondsToHMSarray } from './utils';
 
 /** hh:mm:ss input which behave like a single input for parent */

src/ImageFormField.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import { TextField } from '@material-ui/core';
+import { withStyles } from '@mui/material/styles';
+import { TextField } from '@mui/material';
 
 /** URL input with an <img> preview */
 class ImageFormField extends Component {

src/SingleCanvasDialog.js

 import React, { Component } from 'react';
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import Typography from '@material-ui/core/Typography';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import Typography from '@mui/material/Typography';
 import PropTypes from 'prop-types';
 
 /**

src/TextEditor.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Editor, EditorState, RichUtils } from 'draft-js';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
-import BoldIcon from '@material-ui/icons/FormatBold';
-import ItalicIcon from '@material-ui/icons/FormatItalic';
-import { withStyles } from '@material-ui/core/styles';
+import ToggleButton from '@mui/lab/ToggleButton';
+import ToggleButtonGroup from '@mui/lab/ToggleButtonGroup';
+import BoldIcon from '@mui/icons-material/FormatBold';
+import ItalicIcon from '@mui/icons-material/FormatItalic';
+import { withStyles } from '@mui/material/styles';
 import { stateToHTML } from 'draft-js-export-html';
 import { stateFromHTML } from 'draft-js-import-html';
 

src/icons/Cursor.js

 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 /**
  * CursorIcon ~

src/plugins/miradorAnnotationPlugin.js

@@ -2,8 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import * as actions from 'mirador/dist/es/src/state/actions';
 import { getWindowViewType } from 'mirador/dist/es/src/state/selectors';
-import AddBoxIcon from '@material-ui/icons/AddBox';
-import GetAppIcon from '@material-ui/icons/GetApp';
+import AddBoxIcon from '@mui/icons-material/AddBox';
+import GetAppIcon from '@mui/icons-material/GetApp';
 import { MiradorMenuButton } from 'mirador/dist/es/src/components/MiradorMenuButton';
 import { getVisibleCanvases } from 'mirador/dist/es/src/state/selectors/canvases';
 import SingleCanvasDialog from '../SingleCanvasDialog';