@bigbinary/neeto-templates-frontend 1.1.18 → 1.2.0

package/README.md

@@ -8,6 +8,7 @@ The `neeto-templates-nano` facilitates the administration of templates and templ
       * [Usage](#usage)
     - [Frontend package](#frontend-package)
       * [Installation](#installation-1)
+      * [Instructions for development](#instructions-for-development)
       * [Components](#components)
       * [Other Functions](#other-functions)
 
@@ -75,6 +76,9 @@ Once installed add the plugin to your `tailwind.config.js` file:
  plugins: [require("@tailwindcss/line-clamp")]
 ```
 
+### Instructions for development
+Check the [Frontend package development guide](https://neeto-engineering.neetokb.com/p/a-d34cb4b0) for step-by-step instructions to develop the
+
 ### Components
 #### `CreateTemplateModal` ([source code](https://github.com/bigbinary/neeto-templates-nano/blob/aec3368475c252284a25820c08ff151c1cdd254c/app/javascript/src/components/CreateTemplateModal/index.jsx))
 The CreateTemplateModal component is a React component used for creating and previewing templates within a web application. It provides a user interface for users to create templates and view their details.

package/dist/index.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var neetocist = require('neetocist');
+var neetoCist = require('@bigbinary/neeto-cist');
 var neetoui = require('@bigbinary/neetoui');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var Search = require('@bigbinary/neeto-molecules/Search');
@@ -60,31 +60,31 @@ function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
 
-function _iterableToArrayLimit(arr, i) {
-  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
-  if (null != _i) {
-    var _s,
-      _e,
-      _x,
-      _r,
-      _arr = [],
-      _n = !0,
-      _d = !1;
+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 (_x = (_i = _i.call(arr)).next, 0 === i) {
-        if (Object(_i) !== _i) return;
-        _n = !1;
-      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
-    } catch (err) {
-      _d = !0, _e = err;
+      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 (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
       } finally {
-        if (_d) throw _e;
+        if (o) throw n;
       }
     }
-    return _arr;
+    return a;
   }
 }
 
@@ -125,14 +125,14 @@ var MENU_ITEMS = {
   PREVIEW: "preview"
 };
 
-function _typeof(obj) {
+function _typeof(o) {
   "@babel/helpers - typeof";
 
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof(obj);
+  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 _toPrimitive(input, hint) {
@@ -2515,8 +2515,8 @@ var QUERY_KEYS = {
   TEMPLATE_TAGS: "template-tags"
 };
 
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFetchTemplates = function useFetchTemplates(_ref) {
   var searchTerm = _ref.searchTerm,
     category = _ref.category;
@@ -2554,7 +2554,7 @@ var useCreateTemplate = function useCreateTemplate(_ref3, options) {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
       }
-      options === null || options === void 0 ? void 0 : options.onSuccess.apply(options, args);
+      options === null || options === void 0 || options.onSuccess.apply(options, args);
     }
   }));
 };
@@ -2590,14 +2590,14 @@ var BlankCard = function BlankCard(_ref) {
     title = _ref.title,
     description = _ref.description,
     _ref$onClick = _ref.onClick,
-    onClick = _ref$onClick === void 0 ? neetocist.noop : _ref$onClick,
+    onClick = _ref$onClick === void 0 ? neetoCist.noop : _ref$onClick,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-rounded-lg neeto-ui-bg-white hover:neeto-ui-bg-white neeto-ui-border-primary-500 outline-none flex cursor-pointer flex-col items-center justify-center border border-dashed p-6 transition-all duration-300 ease-in-out hover:border-solid focus:border-solid",
     "data-cy": "start-from-scratch-button",
     tabIndex: 0,
-    onClick: !disabled ? onClick : neetocist.noop
+    onClick: !disabled ? onClick : neetoCist.noop
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-text-primary-500 mb-4"
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
@@ -2724,8 +2724,8 @@ var CategoryItem = function CategoryItem(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement("span", null, label), /*#__PURE__*/React__default["default"].createElement("span", null, count));
 };
 
-function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var List = function List(_ref) {
   var setCurrentScreen = _ref.setCurrentScreen,
     setSelectedTemplate = _ref.setSelectedTemplate,
@@ -2782,7 +2782,7 @@ var List = function List(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-bg-gray-100 relative flex min-h-full items-start"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sticky left-0 top-0 w-80 flex-shrink-0 space-y-8 py-6 pl-16"
+    className: "sticky left-0 top-0 w-52 flex-shrink-0 space-y-8 py-6 pl-4 md:w-72 md:pl-10 lg:w-80 xl:pl-16"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "space-y-4"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2797,6 +2797,7 @@ var List = function List(_ref) {
   }, t("neetoTemplate.templates.description"))), /*#__PURE__*/React__default["default"].createElement(Search__default["default"], {
     autoFocus: true,
     disableTrimOnBlur: true,
+    "data-cy": "template-search-input",
     placeholder: t("neetoTemplate.templates.search"),
     onSearch: function onSearch(value) {
       return setSearchTerm(value);
@@ -2826,12 +2827,12 @@ var List = function List(_ref) {
       }
     });
   })))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "overflow-y-auto px-16 py-6",
+    className: "h-screen overflow-y-auto py-8 pl-5 pr-4 md:pl-8 md:pr-20 xl:px-20",
     ref: rootRef
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex-grow space-y-6"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "grid grid-cols-2 gap-6 md:grid-cols-3 2xl:grid-cols-4"
+    className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 lg:gap-5 xl:gap-6 2xl:grid-cols-4"
   }, /*#__PURE__*/React__default["default"].createElement(BlankCard, {
     description: t("neetoTemplate.templates.blankCard.description"),
     disabled: isCreating,
@@ -2840,10 +2841,10 @@ var List = function List(_ref) {
     onClick: onCreate
   }), templates.map(function (template, index) {
     return /*#__PURE__*/React__default["default"].createElement(Card, {
-      key: index,
-      template: template,
       afterCreate: afterCreate,
       refetchResource: refetchResource,
+      template: template,
+      key: index,
       onClick: function onClick() {
         return handleCardClick(template);
       }
@@ -2880,10 +2881,11 @@ var Preview$1 = function Preview(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "m-auto flex h-full w-full max-w-5xl flex-col space-y-6 py-6"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex items-center justify-between gap-6"
+    className: "flex flex-col items-center justify-between gap-6 pl-4 pr-16 md:flex-row md:pr-20 xl:px-0"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex min-w-0 flex-grow items-center gap-2"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    className: "flex-shrink-0",
     "data-cy": "preview-template-back-button",
     icon: neetoIcons.LeftArrow,
     style: "text",
@@ -2896,6 +2898,7 @@ var Preview$1 = function Preview(_ref) {
     style: "h2",
     weight: "semibold"
   }, title)), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    className: "flex-shrink-0",
     "data-cy": "preview-use-template-button",
     disabled: isCreating,
     label: t("neetoTemplate.templates.editTemplate"),
@@ -2916,9 +2919,9 @@ var CreateTemplateModal = function CreateTemplateModal(_ref) {
     isCreating = _ref.isCreating,
     refetchResource = _ref.refetchResource,
     _ref$onCreate = _ref.onCreate,
-    onCreate = _ref$onCreate === void 0 ? neetocist.noop : _ref$onCreate,
+    onCreate = _ref$onCreate === void 0 ? neetoCist.noop : _ref$onCreate,
     _ref$afterCreate = _ref.afterCreate,
-    afterCreate = _ref$afterCreate === void 0 ? neetocist.noop : _ref$afterCreate;
+    afterCreate = _ref$afterCreate === void 0 ? neetoCist.noop : _ref$afterCreate;
   var _useState = React.useState(TEMPLATE_SCREENS.LIST),
     _useState2 = _slicedToArray(_useState, 2),
     currentScreen = _useState2[0],
@@ -2969,8 +2972,8 @@ var templateTagsApi = {
   list: list
 };
 
-function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useCreateTemplateTag = function useCreateTemplateTag(options) {
   var queryClient = reactQuery.useQueryClient();
   return reactQuery.useMutation(templateTagsApi.create, _objectSpread$1(_objectSpread$1({}, options), {}, {
@@ -2978,7 +2981,7 @@ var useCreateTemplateTag = function useCreateTemplateTag(options) {
       var _options$onSuccess;
       neetoTagsFrontend.refetchTags();
       queryClient.invalidateQueries(QUERY_KEYS.TEMPLATE_TAGS);
-      options === null || options === void 0 || (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 ? void 0 : _options$onSuccess.call(options);
+      options === null || options === void 0 || (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 || _options$onSuccess.call(options);
     }
   }));
 };
@@ -3000,7 +3003,7 @@ var FormikImageUploader = function FormikImageUploader(_ref) {
     return setValue(file.url);
   };
   return /*#__PURE__*/React__default["default"].createElement(neetoImageUploaderFrontend.ImageUploader, {
-    className: "h-80 w-full",
+    className: "h-52 w-full md:h-80",
     src: field.value,
     uploadConfig: IMAGE_UPLOAD_CONFIG,
     onUploadComplete: handleImageUpload
@@ -3053,7 +3056,7 @@ var Tags = function Tags(_ref) {
     return onUpdate([].concat(_toConsumableArray(selectedTags), [newTag]));
   };
   var handleTagRemove = function handleTagRemove(removedTag) {
-    var updatedTags = neetocist.removeBy({
+    var updatedTags = neetoCist.removeBy({
       value: removedTag.value
     }, selectedTags);
     onUpdate(updatedTags);
@@ -3099,17 +3102,20 @@ var Preview = function Preview(_ref) {
     className: "neeto-template__header"
   }, /*#__PURE__*/React__default["default"].createElement("img", {
     className: "neeto-template__image",
+    "data-cy": "template-image-preview",
     src: imageUrl || "https://d2v7kzglnr2dnh.cloudfront.net/images/neetoForm/default-form-template.svg"
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-bg-white flex items-center justify-between gap-2 rounded-b-lg px-2 py-1.5"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     className: "neeto-ui-text-gray-800",
+    "data-cy": "template-title-text",
     lineHeight: "normal",
     style: "body2"
   }, template.title)));
 };
 
-var buildSelectOptionsBy = function buildSelectOptionsBy(labelField, options) {
+var buildSelectOptionsBy = function buildSelectOptionsBy(labelField) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var valueField = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "id";
   return options.map(function (option) {
     return {
@@ -3120,7 +3126,7 @@ var buildSelectOptionsBy = function buildSelectOptionsBy(labelField, options) {
 };
 var buildTagOptions = function buildTagOptions() {
   var tags = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return neetocist.renameKeys({
+  return neetoCist.renameKeys({
     id: "value",
     name: "label"
   }, tags);
@@ -3132,8 +3138,8 @@ var buildTemplateUpdatePayload = function buildTemplateUpdatePayload(values) {
   };
 };
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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; }
 var TemplateSettings = function TemplateSettings(_ref) {
   var _ref$onCancelTemplate = _ref.onCancelTemplatePreview,
     onCancelTemplatePreview = _ref$onCancelTemplate === void 0 ? "" : _ref$onCancelTemplate,
@@ -3180,7 +3186,10 @@ var TemplateSettings = function TemplateSettings(_ref) {
     breadcrumbs: breadcrumbs,
     title: t("neetoTemplate.templateSettings.title")
   }), /*#__PURE__*/React__default["default"].createElement(PageContent, {
-    className: "h-full"
+    className: classnames__default["default"]({
+      "min-h-0": !isLoading,
+      "h-full": isLoading
+    })
   }, isLoading ? /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     className: "mb-1",
     "data-cy": "thank-you-action-text",
@@ -3225,7 +3234,7 @@ var TemplateSettings = function TemplateSettings(_ref) {
     }), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "mt-12 flex flex-row items-center justify-start"
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      className: "mr-3",
+      className: "mr-3 flex-shrink-0",
       "data-cy": "save-changes-button",
       disabled: !dirty,
       loading: isUpdatingTemplate,