@searpent/react-image-annotate 2.1.1 → 2.3.0-cand

package/MetadataEditorSidebarBox/index_14_01_25.js

@@ -0,0 +1,231 @@
+import React, { memo } from "react";
+import SidebarBoxContainer from "../SidebarBoxContainer";
+import DescriptionIcon from "@mui/icons-material/Description";
+import { styled } from "@mui/material/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { grey } from "@mui/material/colors";
+var MetadataItemDiv = styled("div")(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    display: "flex",
+    flexDirection: "row",
+    marginBottom: ".5em",
+    "& > label": {
+      fontSize: "1rem",
+      marginBottom: ".5em",
+      textTransform: "capitalize",
+      wordWrap: "break-word"
+    },
+    label: {
+      width: "50%"
+    },
+    select: {
+      width: "100%"
+    }
+  };
+});
+
+var MetadataItem = function MetadataItem(_ref2) {
+  var _metadataConfig$optio, _metadataConfig$optio2;
+
+  var name = _ref2.name,
+      value = _ref2.value,
+      metadataId = _ref2.metadataId,
+      imageIndex = _ref2.imageIndex,
+      groupId = _ref2.groupId,
+      onChange = _ref2.onChange,
+      _ref2$metadataConfig = _ref2.metadataConfig,
+      metadataConfig = _ref2$metadataConfig === void 0 ? {} : _ref2$metadataConfig;
+
+  var handleChange = function handleChange(e) {
+    e.preventDefault();
+    var _e$target = e.target,
+        name = _e$target.name,
+        value = _e$target.value;
+    onChange({
+      name: name,
+      value: value,
+      imageIndex: imageIndex,
+      groupId: groupId,
+      metadataId: metadataId
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(MetadataItemDiv, null, /*#__PURE__*/React.createElement("label", {
+    for: name
+  }, name), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "50%"
+    }
+  }, (metadataConfig === null || metadataConfig === void 0 ? void 0 : metadataConfig.selectable) !== true && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    value: value,
+    name: name,
+    onChange: handleChange,
+    id: name,
+    list: "".concat(name, "-list"),
+    style: {
+      width: "100%"
+    }
+  }), /*#__PURE__*/React.createElement("datalist", {
+    id: "".concat(name, "-list")
+  }, metadataConfig === null || metadataConfig === void 0 ? void 0 : (_metadataConfig$optio = metadataConfig.options) === null || _metadataConfig$optio === void 0 ? void 0 : _metadataConfig$optio.map(function (opt) {
+    if (opt.value && opt.label) {
+      return /*#__PURE__*/React.createElement("option", {
+        key: opt.value,
+        value: opt.value
+      }, opt.label);
+    }
+
+    return /*#__PURE__*/React.createElement("option", {
+      key: opt,
+      value: opt
+    });
+  }))), (metadataConfig === null || metadataConfig === void 0 ? void 0 : metadataConfig.selectable) === true && /*#__PURE__*/React.createElement("select", {
+    name: name,
+    id: name,
+    value: value || '',
+    onChange: handleChange,
+    style: {
+      width: '100%'
+    }
+  }, metadataConfig === null || metadataConfig === void 0 ? void 0 : (_metadataConfig$optio2 = metadataConfig.options) === null || _metadataConfig$optio2 === void 0 ? void 0 : _metadataConfig$optio2.map(function (opt) {
+    if (opt.value && opt.label) {
+      return /*#__PURE__*/React.createElement("option", {
+        key: opt.value,
+        value: opt.value
+      }, opt.label);
+    }
+
+    return /*#__PURE__*/React.createElement("option", {
+      key: opt,
+      value: opt
+    });
+  }))));
+};
+
+var MetadataList = function MetadataList(_ref3) {
+  var title = _ref3.title,
+      metadata = _ref3.metadata,
+      imageIndex = _ref3.imageIndex,
+      onMetadataChange = _ref3.onMetadataChange,
+      _ref3$metadataConfigs = _ref3.metadataConfigs,
+      metadataConfigs = _ref3$metadataConfigs === void 0 ? [] : _ref3$metadataConfigs,
+      groupId = _ref3.groupId;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h2", null, title), metadata && metadata.map(function (_ref4) {
+    var key = _ref4.key,
+        value = _ref4.value,
+        metadataId = _ref4.metadataId;
+    return /*#__PURE__*/React.createElement(MetadataItem, {
+      name: key,
+      value: value,
+      imageIndex: imageIndex,
+      metadataId: metadataId,
+      groupId: groupId,
+      onChange: onMetadataChange,
+      metadataConfig: metadataConfigs.find(function (i) {
+        return i.key === key;
+      })
+    });
+  }));
+};
+
+var theme = createTheme();
+var DivContainer = styled("div")(function (_ref5) {
+  var theme = _ref5.theme;
+  return {
+    paddingLeft: 16,
+    paddingRight: 16,
+    fontSize: 12,
+    "& h1": {
+      fontSize: 18
+    },
+    "& h2": {
+      fontSize: 14
+    },
+    "& h3": {
+      fontSize: 12
+    },
+    "& h4": {
+      fontSize: 12
+    },
+    "& h5": {
+      fontSize: 12
+    },
+    "& h6": {
+      fontSize: 12
+    },
+    "& p": {
+      fontSize: 12
+    },
+    "& a": {},
+    "& img": {
+      width: "100%"
+    }
+  };
+});
+export var MetadataEditorSidebarBox = function MetadataEditorSidebarBox(_ref6) {
+  var _state$images$state$s, _state$images$state$s2, _state$images$state$s3, _state$images$state$s4;
+
+  var state = _ref6.state,
+      onMetadataChange = _ref6.onMetadataChange;
+  var metadataConfigs = state.metadataConfigs || [];
+  var selectedPhotoMetadata = state === null || state === void 0 ? void 0 : (_state$images$state$s = state.images[state.selectedImage]) === null || _state$images$state$s === void 0 ? void 0 : _state$images$state$s.metadata;
+  var selectedGroupId = state === null || state === void 0 ? void 0 : (_state$images$state$s2 = state.images[state.selectedImage]) === null || _state$images$state$s2 === void 0 ? void 0 : (_state$images$state$s3 = _state$images$state$s2.regions) === null || _state$images$state$s3 === void 0 ? void 0 : (_state$images$state$s4 = _state$images$state$s3.find(function (r) {
+    return r.highlighted === true;
+  })) === null || _state$images$state$s4 === void 0 ? void 0 : _state$images$state$s4.groupId;
+  var articleMetadata = []; // example: [{key: "previousArticleId", value "123-123-123-123-123"}]
+
+  if (selectedGroupId !== undefined) {
+    var articleMetadataRegion = state === null || state === void 0 ? void 0 : state.images[state.selectedImage].regions.find(function (r) {
+      return r.cls === 'metadata' && "".concat(r.groupId) === selectedGroupId;
+    });
+
+    if (articleMetadataRegion) {
+      var metadata = JSON.parse(articleMetadataRegion.text);
+      articleMetadata = metadata;
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/React.createElement(SidebarBoxContainer, {
+    title: "Metadata",
+    icon: /*#__PURE__*/React.createElement(DescriptionIcon, {
+      style: {
+        color: grey[700]
+      }
+    }),
+    expandedByDefault: true
+  }, /*#__PURE__*/React.createElement(DivContainer, {
+    style: {
+      height: "600px"
+    }
+  }, articleMetadata.length > 0 && /*#__PURE__*/React.createElement(MetadataList, {
+    title: "Article",
+    metadata: articleMetadata,
+    imageIndex: state.selectedImage,
+    groupId: selectedGroupId,
+    onMetadataChange: onMetadataChange,
+    metadataConfigs: metadataConfigs.filter(function (mfc) {
+      return mfc.level === 'photo_metadata-engine';
+    })
+  }), selectedPhotoMetadata && /*#__PURE__*/React.createElement(MetadataList, {
+    title: "Page",
+    metadata: selectedPhotoMetadata,
+    imageIndex: state.selectedImage,
+    onMetadataChange: onMetadataChange,
+    metadataConfigs: metadataConfigs.filter(function (mfc) {
+      return mfc.level === 'photo';
+    })
+  }), /*#__PURE__*/React.createElement(MetadataList, {
+    title: "Issue",
+    metadata: state.albumMetadata,
+    onMetadataChange: onMetadataChange,
+    id: "metadata-album",
+    metadataConfigs: metadataConfigs.filter(function (mfc) {
+      return mfc.level === 'album';
+    })
+  }))));
+};
+export default memo(MetadataEditorSidebarBox);

package/MetadataEditorSidebarBox/index_repr.js

@@ -0,0 +1,271 @@
+import React, { memo } from "react";
+import SidebarBoxContainer from "../SidebarBoxContainer";
+import DescriptionIcon from "@mui/icons-material/Description";
+import { styled } from "@mui/material/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { grey } from "@mui/material/colors";
+
+var isStorybookHangReproModeEnabled = function isStorybookHangReproModeEnabled() {
+  return typeof window !== "undefined" && window.__RIA_ALLOW_UNCONTROLLED_METADATA_INPUTS__ === true;
+};
+
+var MetadataItemDiv = styled("div")(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    display: "flex",
+    flexDirection: "row",
+    marginBottom: ".5em",
+    "& > label": {
+      fontSize: "1rem",
+      marginBottom: ".5em",
+      textTransform: "capitalize",
+      wordWrap: "break-word"
+    },
+    label: {
+      width: "50%"
+    },
+    select: {
+      width: "100%"
+    }
+  };
+});
+
+var MetadataItem = function MetadataItem(_ref2) {
+  var _metadataConfig$optio, _metadataConfig$optio2;
+
+  var name = _ref2.name,
+      value = _ref2.value,
+      metadataId = _ref2.metadataId,
+      imageIndex = _ref2.imageIndex,
+      groupId = _ref2.groupId,
+      onChange = _ref2.onChange,
+      _ref2$metadataConfig = _ref2.metadataConfig,
+      metadataConfig = _ref2$metadataConfig === void 0 ? {} : _ref2$metadataConfig;
+  // For Storybook reproduction of "hanging" values:
+  // If the next article's metadata provides `value` as `undefined` (missing field),
+  // and the input is effectively uncontrolled, the browser DOM may keep the previous value.
+  //
+  // We keep the default behavior safe/controlled (coalesce to ""), but allow Storybook
+  // to opt into the buggy behavior via a global flag.
+  var allowUncontrolledForDebug = isStorybookHangReproModeEnabled();
+
+  var handleChange = function handleChange(e) {
+    e.preventDefault();
+    var _e$target = e.target,
+        name = _e$target.name,
+        value = _e$target.value;
+    onChange({
+      name: name,
+      value: value,
+      imageIndex: imageIndex,
+      groupId: groupId,
+      metadataId: metadataId
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(MetadataItemDiv, null, /*#__PURE__*/React.createElement("label", {
+    for: name
+  }, name), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "50%"
+    }
+  }, (metadataConfig === null || metadataConfig === void 0 ? void 0 : metadataConfig.selectable) !== true && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    value: allowUncontrolledForDebug ? value : value ?? "",
+    name: name,
+    onChange: handleChange,
+    id: name,
+    list: "".concat(name, "-list"),
+    style: {
+      width: "100%"
+    }
+  }), /*#__PURE__*/React.createElement("datalist", {
+    id: "".concat(name, "-list")
+  }, metadataConfig === null || metadataConfig === void 0 ? void 0 : (_metadataConfig$optio = metadataConfig.options) === null || _metadataConfig$optio === void 0 ? void 0 : _metadataConfig$optio.map(function (opt) {
+    if (opt.value && opt.label) {
+      return /*#__PURE__*/React.createElement("option", {
+        key: opt.value,
+        value: opt.value
+      }, opt.label);
+    }
+
+    return /*#__PURE__*/React.createElement("option", {
+      key: opt,
+      value: opt
+    });
+  }))), (metadataConfig === null || metadataConfig === void 0 ? void 0 : metadataConfig.selectable) === true && /*#__PURE__*/React.createElement("select", {
+    name: name,
+    id: name,
+    value: value || '',
+    onChange: handleChange,
+    style: {
+      width: '100%'
+    }
+  }, metadataConfig === null || metadataConfig === void 0 ? void 0 : (_metadataConfig$optio2 = metadataConfig.options) === null || _metadataConfig$optio2 === void 0 ? void 0 : _metadataConfig$optio2.map(function (opt) {
+    if (opt.value && opt.label) {
+      return /*#__PURE__*/React.createElement("option", {
+        key: opt.value,
+        value: opt.value
+      }, opt.label);
+    }
+
+    return /*#__PURE__*/React.createElement("option", {
+      key: opt,
+      value: opt
+    });
+  }))));
+};
+
+var MetadataList = function MetadataList(_ref3) {
+  var title = _ref3.title,
+      metadata = _ref3.metadata,
+      imageIndex = _ref3.imageIndex,
+      onMetadataChange = _ref3.onMetadataChange,
+      _ref3$metadataConfigs = _ref3.metadataConfigs,
+      metadataConfigs = _ref3$metadataConfigs === void 0 ? [] : _ref3$metadataConfigs,
+      groupId = _ref3.groupId;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h2", null, title), metadata && metadata.map(function (_ref4) {
+    var key = _ref4.key,
+        value = _ref4.value,
+        metadataId = _ref4.metadataId;
+
+    // In Storybook hang repro mode, deliberately remove React keys so React is
+    // more likely to reuse the same DOM <input> across article switches.
+    if (isStorybookHangReproModeEnabled()) {
+      return /*#__PURE__*/React.createElement(MetadataItem, {
+        name: key,
+        value: value,
+        imageIndex: imageIndex,
+        metadataId: metadataId,
+        groupId: groupId,
+        onChange: onMetadataChange,
+        metadataConfig: metadataConfigs.find(function (i) {
+          return i.key === key;
+        })
+      });
+    }
+
+    return /*#__PURE__*/React.createElement(MetadataItem, {
+      key: "".concat(groupId, "-").concat(key),
+      name: key,
+      value: value,
+      imageIndex: imageIndex,
+      metadataId: metadataId,
+      groupId: groupId,
+      onChange: onMetadataChange,
+      metadataConfig: metadataConfigs.find(function (i) {
+        return i.key === key;
+      })
+    });
+  }));
+};
+
+var theme = createTheme();
+var DivContainer = styled("div")(function (_ref5) {
+  var theme = _ref5.theme;
+  return {
+    paddingLeft: 16,
+    paddingRight: 16,
+    fontSize: 12,
+    "& h1": {
+      fontSize: 18
+    },
+    "& h2": {
+      fontSize: 14
+    },
+    "& h3": {
+      fontSize: 12
+    },
+    "& h4": {
+      fontSize: 12
+    },
+    "& h5": {
+      fontSize: 12
+    },
+    "& h6": {
+      fontSize: 12
+    },
+    "& p": {
+      fontSize: 12
+    },
+    "& a": {},
+    "& img": {
+      width: "100%"
+    }
+  };
+});
+export var MetadataEditorSidebarBox = function MetadataEditorSidebarBox(_ref6) {
+  var _state$images$state$s, _state$images$state$s2, _state$images$state$s3, _state$images$state$s4;
+
+  var state = _ref6.state,
+      onMetadataChange = _ref6.onMetadataChange;
+  var metadataConfigs = state.metadataConfigs || [];
+  var selectedPhotoMetadata = state === null || state === void 0 ? void 0 : (_state$images$state$s = state.images[state.selectedImage]) === null || _state$images$state$s === void 0 ? void 0 : _state$images$state$s.metadata;
+  var selectedGroupId = state === null || state === void 0 ? void 0 : (_state$images$state$s2 = state.images[state.selectedImage]) === null || _state$images$state$s2 === void 0 ? void 0 : (_state$images$state$s3 = _state$images$state$s2.regions) === null || _state$images$state$s3 === void 0 ? void 0 : (_state$images$state$s4 = _state$images$state$s3.find(function (r) {
+    return r.highlighted === true;
+  })) === null || _state$images$state$s4 === void 0 ? void 0 : _state$images$state$s4.groupId;
+  var articleMetadata = []; // example: [{key: "previousArticleId", value "123-123-123-123-123"}]
+
+  if (selectedGroupId !== undefined) {
+    var articleMetadataRegion = state === null || state === void 0 ? void 0 : state.images[state.selectedImage].regions.find(function (r) {
+      return r.cls === 'metadata' && "".concat(r.groupId) === selectedGroupId;
+    });
+
+    if (articleMetadataRegion) {
+      var metadata = JSON.parse(articleMetadataRegion.text);
+      articleMetadata = metadata;
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/React.createElement(SidebarBoxContainer, {
+    title: "Metadata",
+    icon: /*#__PURE__*/React.createElement(DescriptionIcon, {
+      style: {
+        color: grey[700]
+      }
+    }),
+    expandedByDefault: true
+  }, /*#__PURE__*/React.createElement(DivContainer, {
+    style: {
+      height: "600px"
+    }
+  }, articleMetadata.length > 0 && (isStorybookHangReproModeEnabled() ? /*#__PURE__*/React.createElement(MetadataList, {
+    title: "Article",
+    metadata: articleMetadata,
+    imageIndex: state.selectedImage,
+    groupId: selectedGroupId,
+    onMetadataChange: onMetadataChange,
+    metadataConfigs: metadataConfigs.filter(function (mfc) {
+      return mfc.level === 'photo_metadata-engine';
+    })
+  }) : /*#__PURE__*/React.createElement(MetadataList, {
+    key: "article-".concat(selectedGroupId),
+    title: "Article",
+    metadata: articleMetadata,
+    imageIndex: state.selectedImage,
+    groupId: selectedGroupId,
+    onMetadataChange: onMetadataChange,
+    metadataConfigs: metadataConfigs.filter(function (mfc) {
+      return mfc.level === 'photo_metadata-engine';
+    })
+  })), selectedPhotoMetadata && /*#__PURE__*/React.createElement(MetadataList, {
+    title: "Page",
+    metadata: selectedPhotoMetadata,
+    imageIndex: state.selectedImage,
+    onMetadataChange: onMetadataChange,
+    metadataConfigs: metadataConfigs.filter(function (mfc) {
+      return mfc.level === 'photo';
+    })
+  }), /*#__PURE__*/React.createElement(MetadataList, {
+    title: "Issue",
+    metadata: state.albumMetadata,
+    onMetadataChange: onMetadataChange,
+    id: "metadata-album",
+    metadataConfigs: metadataConfigs.filter(function (mfc) {
+      return mfc.level === 'album';
+    })
+  }))));
+};
+export default memo(MetadataEditorSidebarBox);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@searpent/react-image-annotate",
-  "version": "2.1.1",
+  "version": "2.3.0-cand",
   "dependencies": {
     "@editorjs/editorjs": "^2.25.0",
     "@editorjs/paragraph": "^2.8.0",
@@ -8,7 +8,7 @@
     "@emotion/styled": "^11.6.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.12",
     "@fortawesome/free-solid-svg-icons": "^5.6.3",
-    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@fortawesome/react-fontawesome": "^0.1.3",
     "@mui/icons-material": "^5.2.1",
     "@mui/material": "^5.2.3",
     "@mui/styles": "^5.2.3",
@@ -20,7 +20,6 @@
     "material-survey": "^2.1.0",
     "mmgc1-cpp": "^1.0.50",
     "moment": "^2.23.0",
-    "nspell": "^2.1.5",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-editor-js": "^2.0.6",
@@ -48,6 +47,10 @@
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },
+  "engines": {
+    "node": ">=14.0.0 <18.0.0",
+    "yarn": ">=1.22.0"
+  },
   "homepage": "/react-image-annotate",
   "repository": {
     "type": "git",
@@ -60,7 +63,7 @@
     "storybook": "start-storybook -p 9090 -s public",
     "build": "npm run build:babel && cp ./package.json ./dist/package.json && cp ./README.md ./dist/README.md",
     "dist": "npm run build && cd dist && npm publish",
-    "build:babel": "NODE_ENV=production babel ./src --ignore \"src/**/*.story.js\" --out-dir=./dist && rm dist/index.js && cp dist/lib.js dist/index.js && cp src/PageSelector/page-selector.css dist/PageSelector/ && cp src/Locker/locker.css dist/Locker/ && cp src/Errorer/errorer.css dist/Errorer/ && cp src/Editor/editor.css dist/Editor/ && cp src/Editor/annotation-plugin/annotation.css dist/Editor/annotation-plugin",
+    "build:babel": "NODE_ENV=production babel ./src --ignore \"src/**/*.story.js\" --out-dir=./dist && rm dist/index.js && cp dist/lib.js dist/index.js && cp src/PageSelector/page-selector.css dist/PageSelector/ && cp src/Locker/locker.css dist/Locker/ && cp src/Errorer/errorer.css dist/Errorer/ && cp src/Editor/annotation-plugin/annotation.css dist/Editor/annotation-plugin",
     "build-storybook": "build-storybook",
     "build:gh-pages": "CI=false react-scripts build && mkdir build/demo && cp build/index.html build/demo/index.html",
     "gh-pages": "npm run build:gh-pages && gh-pages -d build",