@bigbinary/neeto-tags-frontend 1.5.4 → 1.5.6

package/README.md

@@ -1,4 +1,4 @@
-# neeto-tags-nano
+# neetoTagsNano
 
 This repo acts as the source of truth for the new nano's structure, configs,
 data etc.

package/app/javascript/src/translations/en.json

@@ -55,6 +55,9 @@
       "nameMaxLength": "Name must be less than {{length}} characters.",
       "nameRequired": "Name is a required field.",
       "nameMustBeString": "Name must be a string"
+    },
+    "shortcuts": {
+      "addTag": "Add Tags"
     }
   }
 }

package/dist/index.cjs.js

@@ -5,12 +5,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var neetoCist = require('@bigbinary/neeto-cist');
 var constants = require('@bigbinary/neeto-commons-frontend/constants');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var neetoIcons = require('@bigbinary/neeto-icons');
 var neetoui = require('@bigbinary/neetoui');
 var ramda = require('ramda');
 var reactI18next = require('react-i18next');
+var i18next = require('i18next');
+var classNames = require('classnames');
 var reactRouterDom = require('react-router-dom');
-var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var Container = require('@bigbinary/neeto-molecules/Container');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var SubHeader = require('@bigbinary/neeto-molecules/SubHeader');
@@ -19,9 +21,7 @@ var reactQuery = require('react-query');
 var axios = require('axios');
 var NeetoHeader = require('@bigbinary/neeto-molecules/Header');
 var formik = require('@bigbinary/neetoui/formik');
-var i18next = require('i18next');
 var yup = require('yup');
-var classames = require('classnames');
 var devtools = require('react-query/devtools');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -45,6 +45,7 @@ function _interopNamespace(e) {
 }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
 var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
 var SubHeader__default = /*#__PURE__*/_interopDefaultLegacy(SubHeader);
@@ -52,7 +53,6 @@ var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 var NeetoHeader__default = /*#__PURE__*/_interopDefaultLegacy(NeetoHeader);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
-var classames__default = /*#__PURE__*/_interopDefaultLegacy(classames);
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -124,18 +124,70 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
+var KEYBOARD_SHORTCUTS = {
+  addTag: {
+    sequence: "t",
+    description: i18next.t("neetoTags.shortcuts.addTag")
+  }
+};
+
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css$1 = ".neeto-chat__metadata-card__spinner{scale:.6}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9jb21wb25lbnRzL1RhZ3Mvc3R5bGVzLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsb0NBQ0UsUUFDRiIsInNvdXJjZXNDb250ZW50IjpbIi5uZWV0by1jaGF0X19tZXRhZGF0YS1jYXJkX19zcGlubmVyIHtcbiAgc2NhbGU6IDAuNjtcbn1cbiJdfQ== */";
+var css$1 = ".neeto-tags__metadata-card__spinner{scale:.6}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9jb21wb25lbnRzL1RhZ3Mvc3R5bGVzLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsb0NBQ0UsUUFDRiIsInNvdXJjZXNDb250ZW50IjpbIi5uZWV0by10YWdzX19tZXRhZGF0YS1jYXJkX19zcGlubmVyIHtcbiAgc2NhbGU6IDAuNjtcbn1cbiJdfQ== */";
 n(css$1,{});
 
+var TagsList = function TagsList(_ref) {
+  var selectedTags = _ref.selectedTags,
+    isDisabled = _ref.isDisabled,
+    handleDeleteTag = _ref.handleDeleteTag,
+    tagProps = _ref.tagProps;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-flex neeto-ui-flex-row neeto-ui-flex-wrap neeto-ui-items-start neeto-ui-justify-start gap-2 break-all"
+  }, selectedTags === null || selectedTags === void 0 ? void 0 : selectedTags.map(function (tag) {
+    return /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, _extends({
+      disabled: isDisabled,
+      key: tag.value,
+      label: tag.label,
+      style: "primary",
+      className: classNames__default["default"]({
+        "cursor-not-allowed opacity-50": isDisabled
+      }),
+      onClose: function onClose() {
+        return !isDisabled && handleDeleteTag(tag);
+      }
+    }, tagProps));
+  }));
+};
+
+var TagsSelector = reactUtils.withT(function (_ref) {
+  var t = _ref.t,
+    defaultMenuIsOpen = _ref.defaultMenuIsOpen,
+    tags = _ref.tags,
+    onChange = _ref.onChange,
+    onCreateOption = _ref.onCreateOption,
+    selectProps = _ref.selectProps;
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
+    defaultMenuIsOpen: defaultMenuIsOpen,
+    onChange: onChange,
+    onCreateOption: onCreateOption,
+    autoFocus: true,
+    isCreateable: true,
+    className: "neeto-ui-mt-4",
+    maxLength: 50,
+    options: tags,
+    placeholder: t("neetoTags.placeholder.selectOrCreateTag")
+  }, selectProps));
+});
+
 var Title = function Title(_ref) {
   var _ref$titleProps = _ref.titleProps,
     titleProps = _ref$titleProps === void 0 ? {} : _ref$titleProps,
     title = _ref.title,
     isUpdating = _ref.isUpdating,
     setIsTagsDropdownVisible = _ref.setIsTagsDropdownVisible,
-    showAddTagsOnTitle = _ref.showAddTagsOnTitle;
+    showAddTagsOnTitle = _ref.showAddTagsOnTitle,
+    isDisabled = _ref.isDisabled,
+    isLoading = _ref.isLoading;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var tagsTitle = title || t("neetoTags.common.tag", constants.PLURAL);
@@ -160,7 +212,7 @@ var Title = function Title(_ref) {
     }, 5000);
   }, [didStartUpdate, isUpdating]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex w-full items-center justify-between gap-2"
+    className: classNames__default["default"]("flex w-full items-center justify-between gap-2", titleProps.containerClassName)
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center gap-2"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, _extends({
@@ -169,12 +221,13 @@ var Title = function Title(_ref) {
     weight: "bold"
   }, titleProps), tagsTitle), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "inline-flex h-6 items-center"
-  }, isUpdating && /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, {
-    className: "neeto-chat__metadata-card__spinner"
+  }, (isUpdating || isLoading) && /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, {
+    className: "neeto-tags__metadata-card__spinner"
   }), !isUpdating && isCheckIconVisible && /*#__PURE__*/React__default["default"].createElement(neetoIcons.Check, {
     className: "neeto-ui-text-success-500",
     size: 20
   }))), showAddTagsOnTitle && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    disabled: isDisabled,
     icon: neetoIcons.Settings,
     size: "15",
     style: "icon",
@@ -211,16 +264,24 @@ var Tags$2 = function Tags(_ref) {
     isUpdating = _ref$isUpdating === void 0 ? false : _ref$isUpdating,
     _ref$showAddTagsOnTit = _ref.showAddTagsOnTitle,
     showAddTagsOnTitle = _ref$showAddTagsOnTit === void 0 ? true : _ref$showAddTagsOnTit,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     _ref$showTitleBar = _ref.showTitleBar,
     showTitleBar = _ref$showTitleBar === void 0 ? true : _ref$showTitleBar,
     _ref$bodyProps = _ref.bodyProps,
-    bodyProps = _ref$bodyProps === void 0 ? {} : _ref$bodyProps;
+    bodyProps = _ref$bodyProps === void 0 ? {} : _ref$bodyProps,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isTagsDropdownVisible = _useState2[0],
     setIsTagsDropdownVisible = _useState2[1];
+  reactUtils.useHotKeys(KEYBOARD_SHORTCUTS.addTag.sequence, function (event) {
+    event.preventDefault();
+    setIsTagsDropdownVisible(true);
+  });
   var tags = React.useMemo(function () {
     if (!allTags) return [];
     if (!selectedTags) return allTags;
@@ -249,44 +310,40 @@ var Tags$2 = function Tags(_ref) {
   };
   var isAddTagsButtonVisible = !showAddTagsOnTitle && !isTagsDropdownVisible;
   var isTagsBodyVisible = neetoCist.isNotEmpty(selectedTags) || isTagsDropdownVisible || isAddTagsButtonVisible;
-  return /*#__PURE__*/React__default["default"].createElement("div", _extends({
-    className: "neeto-ui-tags-wrapper flex w-full flex-col items-start gap-2"
-  }, containerProps), showTitleBar && /*#__PURE__*/React__default["default"].createElement(Title, {
+  var titleComponentProps = {
+    isDisabled: isDisabled,
+    isLoading: isLoading,
     isUpdating: isUpdating,
     setIsTagsDropdownVisible: setIsTagsDropdownVisible,
     showAddTagsOnTitle: showAddTagsOnTitle,
     title: title,
     titleProps: titleProps
-  }), isTagsBodyVisible && /*#__PURE__*/React__default["default"].createElement("div", _extends({
-    className: "neeto-ui-bg-white neeto-ui-border-gray-300 neeto-ui-rounded-lg w-full border p-4"
-  }, bodyProps), neetoCist.isNotEmpty(selectedTags) && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-flex neeto-ui-flex-row neeto-ui-flex-wrap neeto-ui-items-start neeto-ui-justify-start gap-2 break-all"
-  }, selectedTags === null || selectedTags === void 0 ? void 0 : selectedTags.map(function (tag, index) {
-    return /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, _extends({
-      key: "".concat(index, "-").concat(tag.label),
-      label: tag.label,
-      style: "primary",
-      onClose: function onClose() {
-        return handleDeleteTag(tag);
-      }
-    }, tagProps));
-  })), isTagsDropdownVisible && /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
-    autoFocus: true,
-    isCreateable: true,
-    className: "neeto-ui-mt-4",
+  };
+  var tagsListProps = {
+    handleDeleteTag: handleDeleteTag,
+    isDisabled: isDisabled,
+    selectedTags: selectedTags,
+    tagProps: tagProps
+  };
+  var tagsSelectorProps = {
     defaultMenuIsOpen: showAddTagsOnTitle,
-    maxLength: 50,
-    options: tags,
-    placeholder: t("neetoTags.placeholder.selectOrCreateTag"),
+    tags: tags,
     onChange: function onChange(event) {
       return handleAddExistingTag(event);
     },
     onCreateOption: function onCreateOption(event) {
       setIsTagsDropdownVisible(false);
       onTagCreate(event);
-    }
-  }, selectProps)), isAddTagsButtonVisible && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
+    },
+    selectProps: selectProps
+  };
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends({
+    className: "neeto-ui-tags-wrapper flex w-full flex-col items-start gap-2"
+  }, containerProps), showTitleBar && /*#__PURE__*/React__default["default"].createElement(Title, titleComponentProps), isTagsBodyVisible && /*#__PURE__*/React__default["default"].createElement("div", _extends({
+    className: "neeto-ui-bg-white neeto-ui-border-gray-300 neeto-ui-rounded-lg w-full border p-4"
+  }, bodyProps), neetoCist.isNotEmpty(selectedTags) && /*#__PURE__*/React__default["default"].createElement(TagsList, tagsListProps), isTagsDropdownVisible && /*#__PURE__*/React__default["default"].createElement(TagsSelector, tagsSelectorProps), isAddTagsButtonVisible && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
     className: "neeto-ui-mt-4",
+    disabled: isDisabled,
     icon: neetoIcons.Plus,
     label: t("neetoTags.button.addTag", constants.SINGULAR),
     size: "small",
@@ -1028,7 +1085,7 @@ var List = function List(_ref) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       "data-cy": "neeto-tags-merge-".concat(listType.value, "-tags"),
       key: tag.id,
-      className: classames__default["default"]("neeto-ui-flex neeto-ui-justify-between neeto-ui-items-center neeto-tags-border neeto-ui-border-white neeto-ui-p-2 neeto-ui-rounded-lg neeto-ui-mt-2 neeto-ui-cursor-pointer", {
+      className: classNames__default["default"]("neeto-ui-flex neeto-ui-justify-between neeto-ui-items-center neeto-tags-border neeto-ui-border-white neeto-ui-p-2 neeto-ui-rounded-lg neeto-ui-mt-2 neeto-ui-cursor-pointer", {
         "neeto-ui-bg-pastel-blue neeto-ui-border-primary-600": selectedTagIds,
         "hover:neeto-ui-bg-gray-100": !selectedTagIds,
         "neeto-ui-cursor-not-allowed neeto-ui-bg-gray-100 neeto-ui-text-gray-500": selectedCounterTags