@scaleflex/widget-informer 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 scaleflex
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,85 @@
+# `@scaleflex/widget-informer`
+
+[![Plugins][plugins-image]](#plugins)
+[![Website][filerobot-image]][sfx-url]
+[![Version][filerobot-version]][version-url]
+[![Scaleflex team][made-by-image]][sfx-url]
+[![License][license-image]][license-url]
+[![CodeSandbox][codeSandbox-image]][codeSandbox-url]
+
+
+<div align='center'>
+<img title="Scaleflex Widget logo" alt="Scaleflex Widget logo" src="https://cdn.scaleflex.com/plugins/filerobot-widget/assets/filerobot_widget_logo_with_fire.png?vh=b2ff09" width="140"/>
+</div>
+
+A pop-up alert for showing info, warnings or errors in [Scaleflex Media Asset Widget](https://www.npmjs.com/package/@scaleflex/widget-core) when other plugins needs to show some message with any of the mentioned types.
+
+## Usage
+
+### NPM
+
+```bash
+npm install --save @scaleflex/widget-informer
+```
+
+### YARN
+
+```bash
+yarn add @scaleflex/widget-informer
+```
+
+then
+
+```js
+import Informer from '@scaleflex/widget-informer'
+...
+...
+...
+scaleflexWidget.use(Informer, propertiesObject)
+```
+
+### CDN
+
+The plugin from CDN is found inside `Scaleflex` global object `Scaleflex.Informer`
+
+```js
+const Informer = window.ScaleflexWidget.Informer
+...
+...
+...
+scaleflexWidget.use(Informer, propertiesObject)
+```
+
+> If you are using [`@scaleflex/widget-explorer`](../@scaleflex/widget-explorer/#filerobotexplorer) plugin you don't need to manually import this plugin as it is being imported automatically there with its styles and the default id `Explorer:Informer` Unless the Explorer id is changed.
+
+### Plugin's styles
+
+```js
+import '@scaleflex/widget-core/dist/style.css'
+import '@scaleflex/widget-informer/dist/style.css'
+```
+
+or if you prefer the minified version
+
+```js
+import '@scaleflex/widget-core/dist/style.min.css'
+import '@scaleflex/widget-informer/dist/style.min.css'
+```
+
+> The plugin's css file should be imported after the [Core's css file](../@scaleflex/widget-core/#modules-styles) for having the styles shown correctly.
+
+<!-- Variables -->
+
+[npm-url]: https://www.npmjs.com/package/@scaleflex/widget-informer
+[license-url]: https://opensource.org/licenses/MIT
+[sfx-url]: https://www.scaleflex.com/
+[version-url]: https://www.npmjs.com/package/@scaleflex/widget-informer
+[codeSandbox-url]: https://codesandbox.io/s/filerobot-widget-v3-c5l9th
+
+[npm-image]: https://img.shields.io/npm/v/@telus/remark-config.svg?style=for-the-badge&logo=npm
+[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge
+[made-by-image]: https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg?style=for-the-badge
+[plugins-image]: https://img.shields.io/static/v1?label=Scaleflex&message=Plugins&color=yellow&style=for-the-badge
+[filerobot-image]: https://img.shields.io/static/v1?label=Scaleflex&message=website&color=orange&style=for-the-badge
+[filerobot-version]: https://img.shields.io/npm/v/@scaleflex/widget-informer?label=Version&style=for-the-badge&logo=npm
+[codeSandbox-image]: https://img.shields.io/badge/CodeSandbox-black?style=for-the-badge&logo=CodeSandbox

package/lib/ErrorsModal/index.js

@@ -0,0 +1,32 @@
+import { Cross2, CopyOutline } from '@scaleflex/icons';
+import Styled from '../Informer.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var ErrorsModal = function ErrorsModal(_ref) {
+  var i18n = _ref.i18n,
+    isErrorsModalOpen = _ref.isErrorsModalOpen,
+    closeErrorsModal = _ref.closeErrorsModal,
+    displayedErrors = _ref.displayedErrors,
+    handleCopyErrors = _ref.handleCopyErrors;
+  return /*#__PURE__*/_jsxs(Styled.ErrorsModal, {
+    open: isErrorsModalOpen,
+    onClose: closeErrorsModal,
+    children: [/*#__PURE__*/_jsx(Styled.ErrorsModalTitle, {
+      onClose: closeErrorsModal,
+      primary: i18n('informerErrorsModalTitle')
+    }), /*#__PURE__*/_jsx(Styled.ErrorsModalContent, {
+      children: /*#__PURE__*/_jsxs(Styled.ErrorsWrapper, {
+        children: [(Array.isArray(displayedErrors) ? displayedErrors : []).map(function (error, index) {
+          return /*#__PURE__*/_jsxs(Styled.Detail, {
+            children: [/*#__PURE__*/_jsx(Cross2, {}), "\u201C", error, "\u201D"]
+          }, index);
+        }), /*#__PURE__*/_jsx(Styled.CopyButton, {
+          color: "link-secondary",
+          startIcon: /*#__PURE__*/_jsx(CopyOutline, {}),
+          onClick: handleCopyErrors,
+          children: i18n('informerErrorsModalCopyButton')
+        })]
+      })
+    })]
+  });
+};
+export default ErrorsModal;

package/lib/Informer.styled.js

@@ -0,0 +1,61 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled, { css } from 'styled-components';
+import { FV, PC, PSH } from '@scaleflex/widget-common';
+import { TooltipV2, ModalTitle, ModalContent, Modal, Button } from '@scaleflex/ui/core';
+var InformerWrapper = styled.div(function (_ref) {
+  var isHidden = _ref.isHidden,
+    positionFixed = _ref.positionFixed,
+    theme = _ref.theme;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: ", ";\n    display: flex;\n    justify-content: center;\n    bottom: 40px;\n    left: 50%;\n    right: 0;\n    z-index: 2000;\n    width: fit-content;\n    opacity: 1;\n    transform: translateX(-50%);\n    transition: all 300ms ease-in;\n    background-color: ", ";\n    visibility: visible; // we are using visibility to avoid any tabindex inside the div's children like button.\n\n    ", ";\n\n    .SfxButton-Label {\n      font-size: 13px;\n    }\n"])), positionFixed ? 'fixed' : 'absolute', theme.palette[PC.BackgroundStateless], isHidden && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      opacity: 0;\n      transform: translate(-50%, 200px);\n      visibility: hidden; // we are using visibility to avoid any tabindex inside the div's children like button.\n    "]))));
+});
+var LabelsTooltip = styled(TooltipV2)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  background-color: ", ";\n  box-shadow: ", ";\n  padding-bottom: 0px;\n  max-width: 276px;\n\n  & + .SfxPopper-arrow::before {\n    background: ", ";\n  }\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.palette[PC.BackgroundStateless];
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.shadows[PSH.ShadowXl];
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.palette[PC.BackgroundStateless];
+});
+var ErrorsModal = styled(Modal)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 500px;\n  max-width: 500px;\n  z-index: 1800;\n"])));
+var ErrorsModalTitle = styled(ModalTitle)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  text-align: center;\n\n  .SfxModalTitle-LabelPrimary {\n    ", "\n    //TODO: fix issue of multiple passing props to modal title and label in Scaleflex/ui\n    height: 35.12px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .SfxModalTitle-Close {\n    top: 12px;\n    right: 12px;\n  }\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.typography.font[FV.LabelLargeUp];
+});
+var ErrorsModalContent = styled(ModalContent)(function (_ref6) {
+  var palette = _ref6.theme.palette;
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  padding: 24px;\n  max-height: 536px;\n  overflow-y: auto;\n\n  &:hover {\n    color: ", ";\n    button {\n      color: ", ";\n    }\n  }\n"])), function (_ref7) {
+    var palette = _ref7.theme.palette;
+    return palette[PC.AccentPrimaryHover];
+  }, function (_ref8) {
+    var palette = _ref8.theme.palette;
+    return palette[PC.AccentPrimaryHover];
+  });
+});
+var ErrorsWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  flex-direction: column;\n  display: flex;\n  padding: 12px;\n  gap: 12px;\n"])), function (_ref9) {
+  var palette = _ref9.theme.palette;
+  return palette[PC.BackgroundBaseLight];
+});
+var Detail = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 8px;\n  align-items: flex-start;\n  ", ";\n\n  > svg {\n    margin-top: 4px;\n    flex-shrink: 0;\n    color: ", ";\n  }\n"])), function (_ref10) {
+  var theme = _ref10.theme;
+  return theme.typography.font[FV.TextMedium];
+}, function (_ref11) {
+  var palette = _ref11.theme.palette;
+  return palette[PC.Red];
+});
+var CopyButton = styled(Button)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  width: 100%;\n  justify-content: flex-end;\n"])));
+var DetailsButton = styled(Button)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-left: 2px;\n"])));
+var Styled = {
+  InformerWrapper: InformerWrapper,
+  ErrorsModal: ErrorsModal,
+  ErrorsModalTitle: ErrorsModalTitle,
+  ErrorsModalContent: ErrorsModalContent,
+  ErrorsWrapper: ErrorsWrapper,
+  DetailsButton: DetailsButton,
+  Detail: Detail,
+  CopyButton: CopyButton,
+  LabelsTooltip: LabelsTooltip
+};
+export default Styled;

package/lib/InformerUI.js

@@ -0,0 +1,110 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { useCore } from '@scaleflex/widget-core/lib/hooks';
+import copyText from '@scaleflex/widget-utils/lib/copyText';
+import { PopupContent as Informer } from '@scaleflex/ui/core';
+import { selectInfo } from '@scaleflex/widget-core/lib/slices/info.slice';
+import Styled from './Informer.styled';
+import ErrorsModal from './ErrorsModal';
+import InformerUIDetails from './InformerUIDetails';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var timeoutId = null;
+var InformerUI = function InformerUI(_ref) {
+  var i18n = _ref.i18n,
+    hideInfo = _ref.hideInfo;
+  var _useSelector = useSelector(selectInfo),
+    isHidden = _useSelector.isHidden,
+    type = _useSelector.type,
+    message = _useSelector.message,
+    details = _useSelector.details,
+    errors = _useSelector.errors;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    isVisibilityNotLocked = _useState2[0],
+    setIsVisibilityNotLocked = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isErrorsModalOpen = _useState4[0],
+    setIsErrorsModalOpen = _useState4[1];
+  var _useState5 = useState(errors),
+    _useState6 = _slicedToArray(_useState5, 2),
+    displayedErrors = _useState6[0],
+    setDisplayedErrors = _useState6[1];
+  var _useCore = useCore(),
+    info = _useCore.info;
+  var handleCopyErrors = function handleCopyErrors() {
+    copyText({
+      text: errors,
+      i18n: i18n,
+      info: info,
+      successMsgI18nKey: 'informerErrorsModalSuccessCopyMsg'
+    });
+  };
+  var lockInformerVisibility = function lockInformerVisibility() {
+    if (isHidden && !timeoutId) return;
+    clearTimeout(timeoutId);
+    setIsVisibilityNotLocked(false);
+  };
+  var unLockInformerVisibility = function unLockInformerVisibility() {
+    if (isVisibilityNotLocked !== false) return;
+    // Giving it some more amount of time in-case the user needs to re-hover it again before hiding.
+    timeoutId = setTimeout(function () {
+      timeoutId = null;
+      setIsVisibilityNotLocked(null);
+    }, 250);
+  };
+  var onClose = function onClose() {
+    hideInfo();
+    if (isVisibilityNotLocked === false) {
+      setIsVisibilityNotLocked(null);
+    }
+  };
+  var closeErrorsModal = function closeErrorsModal() {
+    setIsErrorsModalOpen(false);
+    setDisplayedErrors(null);
+  };
+  var openErrorsModal = function openErrorsModal() {
+    setIsErrorsModalOpen(true);
+    setDisplayedErrors(errors);
+    hideInfo();
+  };
+  var renderMessage = function renderMessage() {
+    var hasDetails = details || errors;
+    return /*#__PURE__*/_jsxs("span", {
+      children: [message || details, hasDetails && /*#__PURE__*/_jsx(InformerUIDetails, {
+        details: details,
+        errors: errors,
+        i18n: i18n,
+        openErrorsModal: openErrorsModal
+      })]
+    });
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Styled.InformerWrapper, {
+      isHidden: isVisibilityNotLocked !== null && isVisibilityNotLocked !== void 0 ? isVisibilityNotLocked : isHidden,
+      children: /*#__PURE__*/_jsx(Informer, {
+        status: type || 'info',
+        message: renderMessage(),
+        onClose: onClose,
+        onMouseOver: lockInformerVisibility,
+        onMouseLeave: unLockInformerVisibility,
+        onTouchStart: lockInformerVisibility,
+        onTouchCancel: unLockInformerVisibility,
+        onTouchEnd: unLockInformerVisibility
+      })
+    }), /*#__PURE__*/_jsx(ErrorsModal, {
+      i18n: i18n,
+      displayedErrors: displayedErrors,
+      isErrorsModalOpen: isErrorsModalOpen,
+      closeErrorsModal: closeErrorsModal,
+      handleCopyErrors: handleCopyErrors
+    })]
+  });
+};
+export default InformerUI;

package/lib/InformerUIDetails.js

@@ -0,0 +1,32 @@
+import Styled from './Informer.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var renderDetailsButton = function renderDetailsButton(_ref) {
+  var onClick = _ref.onClick,
+    i18n = _ref.i18n;
+  return /*#__PURE__*/_jsx(Styled.DetailsButton, {
+    size: "sm",
+    color: "link-primary",
+    onClick: onClick,
+    children: i18n('informerSeeDetailsButtonLabel')
+  });
+};
+var InformerUIDetails = function InformerUIDetails(_ref2) {
+  var details = _ref2.details,
+    errors = _ref2.errors,
+    i18n = _ref2.i18n,
+    openErrorsModal = _ref2.openErrorsModal;
+  if (Array.isArray(errors)) return renderDetailsButton({
+    i18n: i18n,
+    onClick: openErrorsModal
+  });
+  return /*#__PURE__*/_jsx(Styled.LabelsTooltip, {
+    arrow: true,
+    position: "top",
+    size: "md",
+    title: details,
+    children: renderDetailsButton({
+      i18n: i18n
+    })
+  });
+};
+export default InformerUIDetails;

package/lib/index.js

@@ -0,0 +1,78 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { createElement } from 'react';
+import { Plugin } from '@scaleflex/widget-core';
+import { PLUGINS_IDS } from '@scaleflex/widget-utils/lib/constants';
+import InformerUI from './InformerUI';
+// TODO: find a way to show version of the current plugin
+// why solution below isn't good?
+// first import doesn't work with webpack 5 as it was deprecated
+// second import fixes webpack 5 issue as it was mentioned in their docs
+// but it exposes our package.json to the client and it is mentioned as security rist in mutiple places
+// https://github.com/axelpale/genversion
+// https://stackoverflow.com/questions/64993118/error-should-not-import-the-named-export-version-imported-as-version
+// https://stackoverflow.com/questions/9153571/is-there-a-way-to-get-version-from-package-json-in-nodejs-code/10855054#10855054
+// import { version } from '../package.json'
+// import packageInfo from '../package.json'
+
+/**
+ * Informer
+ * Shows rad message bubbles
+ * used like this: `filerobot.info('hello world', 'info', 5000)`
+ * or for errors: `filerobot.info('Error uploading img.jpg', 'error', 5000)`
+ *
+ */
+var Informer = /*#__PURE__*/function (_Plugin) {
+  // static VERSION = packageInfo.version
+
+  function Informer(filerobot) {
+    var _this;
+    var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    _classCallCheck(this, Informer);
+    _this = _callSuper(this, Informer, [filerobot, opts]);
+    _defineProperty(_this, "render", function (props) {
+      var _this$filerobot = _this.filerobot,
+        i18n = _this$filerobot.i18n,
+        hideInfo = _this$filerobot.hideInfo;
+      return /*#__PURE__*/createElement(InformerUI, _objectSpread(_objectSpread({}, props), {}, {
+        i18n: i18n,
+        hideInfo: hideInfo
+      }));
+    });
+    _this.type = 'progressindicator';
+    _this.id = opts.id || PLUGINS_IDS.INFORMER;
+    _this.title = 'Informer';
+
+    // set default options
+    var defaultOptions = {};
+    // merge default options with the ones set by user
+    _this.opts = _extends({}, defaultOptions, opts);
+    return _this;
+  }
+  _inherits(Informer, _Plugin);
+  return _createClass(Informer, [{
+    key: "install",
+    value: function install() {
+      var target = this.opts.target;
+      if (target) {
+        this.mount(target, this);
+      }
+    }
+  }]);
+}(Plugin);
+export { Informer as default };

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@scaleflex/widget-informer",
+  "description": "A notification and error pop-up bar for Scaleflex.",
+  "version": "0.0.1",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "style": "dist/style.min.css",
+  "types": "types/index.d.ts",
+  "files": [
+    "/dist",
+    "/lib",
+    "/types"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@scaleflex/ui": "^3.0.0-beta.11",
+    "@scaleflex/widget-common": "^0.0.1",
+    "@scaleflex/widget-icons": "^0.0.1",
+    "@scaleflex/widget-utils": "^0.0.1"
+  },
+  "devDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "peerDependencies": {
+    "@scaleflex/widget-core": "^0.0.0",
+    "@scaleflex/widget-explorer": "^0.0.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
+  },
+  "gitHead": "64ea82e745b7deda36d6794863350e6671e9010d"
+}

package/types/index.d.ts

@@ -0,0 +1,12 @@
+import Filerobot = require("@scaleflex/widget-core");
+
+declare module Informer {
+  interface InformerOptions extends Filerobot.PluginOptions {
+    replaceTargetContent?: boolean;
+    target?: Filerobot.PluginTarget;
+  }
+}
+
+declare class Informer extends Filerobot.Plugin<Informer.InformerOptions> {}
+
+export = Informer;