@bigbinary/neeto-themes-frontend 4.0.8 → 4.0.10

package/dist/cjs/NeetoThemesBuilder.js

@@ -20,7 +20,6 @@ var reactRouterDom = require('react-router-dom');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var Close = require('@bigbinary/neeto-icons/Close');
-var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var Popover = require('@bigbinary/neetoui/Popover');
 var Typography = require('@bigbinary/neetoui/Typography');
 var Switch = require('@bigbinary/neetoui/Switch');
@@ -287,7 +286,7 @@ var Card$2 = function Card(_ref) {
   var isRTL = i18n.dir() === "rtl";
   var ToggleIcon = isRTL ? Left : Right;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    "data-cy": "theme-".concat(neetoCist.hyphenate(title), "-properties"),
+    "data-testid": "theme-".concat(neetoCist.hyphenate(title), "-properties"),
     className: classnames("neeto-themes-nano-section neeto-ui-border-gray-200 border-b pt-2 transition-all duration-300 last:border-none", className, {
       "pb-2": !accordionOpenState[name],
       "pb-3": accordionOpenState[name],
@@ -303,7 +302,7 @@ var Card$2 = function Card(_ref) {
       children: [/*#__PURE__*/jsxRuntime.jsxs(Typography, {
         className: "flex min-w-0 grow items-center gap-2 text-start",
         component: "span",
-        "data-cy": "theme-properties",
+        "data-testid": "theme-properties",
         lineHeight: "normal",
         style: "h4",
         weight: "semibold",
@@ -677,9 +676,9 @@ var AlignmentBlock = function AlignmentBlock(_ref) {
     name = _ref.name;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex items-center justify-between gap-2",
-    "data-cy": utils$1.joinHyphenCase(label),
+    "data-testid": utils$1.joinHyphenCase(label),
     children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
-      "data-cy": "style-fields-labels",
+      "data-testid": "style-fields-labels",
       style: "body2",
       children: label
     }), /*#__PURE__*/jsxRuntime.jsx(formik.Field, {
@@ -691,7 +690,7 @@ var AlignmentBlock = function AlignmentBlock(_ref) {
           className: "neeto-ui-border-gray-300 neeto-themes-nano-alignment-block flex items-center border",
           children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
             className: "neeto-themes-nano-alignment-button neeto-themes-nano-alignment-button__alignment-left",
-            "data-cy": "alignment-left",
+            "data-testid": "alignment-left",
             size: "medium",
             style: value === "left" ? "primary" : "text",
             icon: function icon() {
@@ -715,7 +714,7 @@ var AlignmentBlock = function AlignmentBlock(_ref) {
             className: "neeto-themes-nano-alignment-divider"
           }), /*#__PURE__*/jsxRuntime.jsx(Button, {
             className: "neeto-themes-nano-alignment-button neeto-themes-nano-alignment-button__alignment-center",
-            "data-cy": "alignment-center",
+            "data-testid": "alignment-center",
             size: "medium",
             style: value === "center" ? "primary" : "text",
             icon: function icon() {
@@ -750,9 +749,9 @@ var ColorBlock = function ColorBlock(_ref) {
     showTransparencyControl = _ref.showTransparencyControl;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex items-center justify-between",
-    "data-cy": "theme-style-".concat(utils$1.joinHyphenCase(label)),
+    "data-testid": "theme-style-".concat(utils$1.joinHyphenCase(label)),
     children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
-      "data-cy": "style-fields-labels",
+      "data-testid": "style-fields-labels",
       style: "body2",
       children: label
     }), /*#__PURE__*/jsxRuntime.jsx(ColorPicker, {
@@ -776,9 +775,9 @@ var FontPickerBlock = function FontPickerBlock(_ref) {
     onChange = _ref.onChange;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex items-center justify-between",
-    "data-cy": "theme-style-".concat(utils$1.joinHyphenCase(label)),
+    "data-testid": "theme-style-".concat(utils$1.joinHyphenCase(label)),
     children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
-      "data-cy": "style-fields-labels",
+      "data-testid": "style-fields-labels",
       style: "body2",
       children: label
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -811,9 +810,9 @@ var SelectBlock = function SelectBlock(_ref) {
     onChange = _ref.onChange;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex items-center justify-between",
-    "data-cy": "theme-style-".concat(utils$1.joinHyphenCase(label)),
+    "data-testid": "theme-style-".concat(utils$1.joinHyphenCase(label)),
     children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
-      "data-cy": "logo-field-labels",
+      "data-testid": "logo-field-labels",
       style: "body2",
       children: label
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -837,9 +836,9 @@ var SliderBlock = function SliderBlock(_ref) {
     marks = _ref.marks;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex items-center justify-between gap-3",
-    "data-cy": "theme-style-".concat(utils$1.joinHyphenCase(label)),
+    "data-testid": "theme-style-".concat(utils$1.joinHyphenCase(label)),
     children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
-      "data-cy": "style-fields-labels",
+      "data-testid": "style-fields-labels",
       style: "body2",
       children: label
     }), /*#__PURE__*/jsxRuntime.jsx(antd.Slider, {
@@ -870,11 +869,11 @@ var SwitchBlock = function SwitchBlock(_ref) {
   var doesHelpTextExist = i18n.exists(translationKey);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex items-center justify-between",
-    "data-cy": "theme-style-content-background",
+    "data-testid": "theme-style-content-background",
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "inline-flex items-center gap-4",
       children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
-        "data-cy": "style-fields-labels",
+        "data-testid": "style-fields-labels",
         style: "body2",
         className: classnames({
           "w-32": doesHelpTextExist,
@@ -888,7 +887,7 @@ var SwitchBlock = function SwitchBlock(_ref) {
     }), /*#__PURE__*/jsxRuntime.jsx(Switch, _objectSpread$1(_objectSpread$1({}, _objectSpread$1({
       name: name
     }, switchProps)), {}, {
-      "data-cy": "enable-background-color-toggle"
+      "data-testid": "enable-background-color-toggle"
     }))]
   });
 };
@@ -903,9 +902,9 @@ var TextBlock = function TextBlock(_ref) {
     placeholder = _ref.placeholder;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex items-center justify-between",
-    "data-cy": "theme-style-".concat(utils$1.joinHyphenCase(label)),
+    "data-testid": "theme-style-".concat(utils$1.joinHyphenCase(label)),
     children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
-      "data-cy": "style-fields-labels",
+      "data-testid": "style-fields-labels",
       style: "body2",
       children: label
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -1194,11 +1193,11 @@ var ImageBlock = function ImageBlock(_ref) {
   }();
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "space-y-3",
-    "data-cy": "theme-style-".concat(label ? utils$1.joinHyphenCase(label) : "image-block"),
+    "data-testid": "theme-style-".concat(label ? utils$1.joinHyphenCase(label) : "image-block"),
     children: [label && /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex items-center justify-between",
       children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
-        "data-cy": "style-fields-labels",
+        "data-testid": "style-fields-labels",
         style: "body2",
         children: label
       })
@@ -1285,7 +1284,7 @@ var ThemeMeta = function ThemeMeta(_ref) {
     title: t("neetoThemes.common.name"),
     children: /*#__PURE__*/jsxRuntime.jsx(Input$1, {
       autoFocus: true,
-      "data-cy": "theme-name-property",
+      "data-testid": "theme-name-property",
       name: "name"
     })
   });
@@ -1408,7 +1407,10 @@ var Customize = function Customize(_ref) {
     }
   }, [isLoadingTheme]);
   if (isLoading) {
-    return /*#__PURE__*/jsxRuntime.jsx(PageLoader, {});
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
+    });
   }
   return /*#__PURE__*/jsxRuntime.jsx(Form, {
     formikProps: {
@@ -1491,13 +1493,13 @@ var Customize = function Customize(_ref) {
         }), /*#__PURE__*/jsxRuntime.jsxs("div", {
           className: "neeto-ui-bg-white neeto-ui-shadow-s sticky bottom-0 start-0 end-0 flex justify-end gap-x-2 px-4 py-6 lg:px-5 xl:px-6",
           children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
-            "data-cy": "reset-button",
+            "data-testid": "reset-button",
             disabled: !dirty || isSubmitting,
             label: t("neetoThemes.buttons.reset"),
             style: "text",
             type: "reset"
           }), /*#__PURE__*/jsxRuntime.jsx(Button, {
-            "data-cy": "save-changes-button",
+            "data-testid": "save-changes-button",
             disabled: !dirty && (themeData === null || themeData === void 0 ? void 0 : themeData.id) || isSubmitting,
             label: t("neetoThemes.buttons.save"),
             loading: isSubmitting,
@@ -1664,7 +1666,7 @@ var Card = function Card(_ref) {
   };
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "group space-y-2 pt-0.5",
-    "data-cy": active ? "active-theme-card" : "theme-card",
+    "data-testid": active ? "active-theme-card" : "theme-card",
     id: theme.id,
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: classnames("neeto-themes-theme-thumbnail neeto-ui-rounded-lg relative cursor-pointer border transition-all duration-300 ease-in-out", {
@@ -1682,7 +1684,7 @@ var Card = function Card(_ref) {
           className: "absolute start-0 top-0 z-10 flex h-full w-full items-center justify-center gap-1 p-3",
           children: active ? /*#__PURE__*/jsxRuntime.jsx("span", {
             className: "neeto-ui-btn neeto-themes-theme-thumbnail__active-label neeto-ui-btn--style-primary neeto-ui-btn--size-medium neeto-ui-rounded-full shrink-0 cursor-auto justify-center",
-            "data-cy": "active-theme-label",
+            "data-testid": "active-theme-label",
             children: t("neetoThemes.common.activeTheme")
           }) : /*#__PURE__*/jsxRuntime.jsx("div", {
             className: classnames({
@@ -1692,7 +1694,7 @@ var Card = function Card(_ref) {
             children: /*#__PURE__*/jsxRuntime.jsxs("div", {
               className: "relative flex w-full flex-col gap-2",
               children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
-                "data-cy": "preview-theme-button",
+                "data-testid": "preview-theme-button",
                 disabled: isPreviewing,
                 label: t("neetoThemes.common.previewTheme"),
                 size: "medium",
@@ -1706,7 +1708,7 @@ var Card = function Card(_ref) {
                 }
               }), /*#__PURE__*/jsxRuntime.jsx(Button, {
                 className: "neeto-themes-theme-thumbnail__apply-btn shrink-0 justify-center",
-                "data-cy": "apply-theme-button",
+                "data-testid": "apply-theme-button",
                 disabled: isApplyingTheme,
                 label: t("neetoThemes.common.useTheme"),
                 loading: isApplyingTheme,
@@ -1738,13 +1740,13 @@ var Card = function Card(_ref) {
           className: "flex items-center space-x-2",
           children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
             className: "line-clamp-2 min-w-0 grow wrap-anywhere pt-1",
-            "data-cy": "theme-name",
+            "data-testid": "theme-name",
             lineHeight: "snug",
             style: "body2",
             children: name
           }), isGlobalTheme && /*#__PURE__*/jsxRuntime.jsx(Rating, {
             className: "neeto-themes-nano-global-theme-icon",
-            "data-cy": "global-theme-icon",
+            "data-testid": "global-theme-icon",
             size: 18
           })]
         }), /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
@@ -1759,18 +1761,18 @@ var Card = function Card(_ref) {
           },
           menuItems: [{
             key: "edit",
-            "data-cy": "edit-theme-menu-item",
+            "data-testid": "edit-theme-menu-item",
             label: t("neetoThemes.common.edit"),
             isVisible: neetoCist.isPresent(onEditTheme),
             onClick: handleEditTheme
           }, {
             key: "clone",
-            "data-cy": "clone-theme-menu-item",
+            "data-testid": "clone-theme-menu-item",
             label: t("neetoThemes.build.leftSideBar.themes.themeOptions.clone"),
             onClick: handleCloneTheme
           }, {
             key: "set-as-global-theme",
-            "data-cy": "set-as-global-theme-menu-item",
+            "data-testid": "set-as-global-theme-menu-item",
             label: t("neetoThemes.build.leftSideBar.themes.themeOptions.setAsGlobalTheme.label"),
             isVisible: !isGlobalTheme,
             onClick: handleApplyGlobalTheme
@@ -1780,7 +1782,7 @@ var Card = function Card(_ref) {
             isVisible: utils.isFunction(onDeleteTheme)
           }, {
             key: "delete",
-            "data-cy": "delete-theme-menu-item",
+            "data-testid": "delete-theme-menu-item",
             label: t("neetoThemes.build.leftSideBar.themes.themeOptions.delete"),
             isDisabled: isApplyingTheme,
             isVisible: utils.isFunction(onDeleteTheme),
@@ -1906,19 +1908,19 @@ var Themes = function Themes(_ref) {
         placeholder: t("neetoThemes.common.searchThemes")
       }), ramda.isEmpty(filteredThemes) && ramda.isEmpty(filteredDefaultThemes) && /*#__PURE__*/jsxRuntime.jsx(Typography, {
         className: "text-center",
-        "data-cy": "no-data-title",
+        "data-testid": "no-data-title",
         style: "body2",
         children: t("neetoThemes.common.noResultsFound")
       }), neetoCist.isNotEmpty(filteredDefaultThemes) && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
           className: "my-4 px-6 uppercase lg:px-5 xl:px-6",
-          "data-cy": "system-themes-header",
+          "data-testid": "system-themes-header",
           style: "h6",
           weight: "semibold",
           children: t("neetoThemes.build.leftSideBar.themes.systemThemes")
         }), /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "flex flex-col gap-4 px-6 pb-10 lg:px-5 xl:px-6",
-          "data-cy": "system-themes",
+          "data-testid": "system-themes",
           children: filteredDefaultThemes.map(function (theme) {
             return /*#__PURE__*/react.createElement(Card$1, {
               onApplyTheme: onApplyTheme,
@@ -1940,13 +1942,13 @@ var Themes = function Themes(_ref) {
       className: "mb-6 space-y-3",
       children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
         className: "my-4 px-6 uppercase",
-        "data-cy": "custom-themes-header",
+        "data-testid": "custom-themes-header",
         style: "h6",
         weight: "semibold",
         children: t("neetoThemes.build.leftSideBar.themes.customThemes")
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "flex flex-col gap-4 px-6",
-        "data-cy": "custom-themes",
+        "data-testid": "custom-themes",
         children: filteredThemes.map(function (theme) {
           var isActive = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id;
           var isPreviewing = (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id;
@@ -2003,7 +2005,7 @@ var TitleBar = function TitleBar(_ref) {
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex items-center justify-start space-x-2",
         children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
-          "data-cy": "customize-themes-back-button",
+          "data-testid": "customize-themes-back-button",
           icon: BackButtonIcon,
           iconPosition: "left",
           style: "text",
@@ -2015,7 +2017,7 @@ var TitleBar = function TitleBar(_ref) {
             return handleBackPress(themeId);
           }
         }), /*#__PURE__*/jsxRuntime.jsxs(Typography, {
-          "data-cy": "themes-header",
+          "data-testid": "themes-header",
           lineHeight: "normal",
           style: "h3",
           weight: "semibold",
@@ -2031,7 +2033,7 @@ var TitleBar = function TitleBar(_ref) {
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex space-x-2",
         children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
-          "data-cy": "themes-header",
+          "data-testid": "themes-header",
           lineHeight: "normal",
           style: "h3",
           weight: "semibold",
@@ -2048,7 +2050,7 @@ var TitleBar = function TitleBar(_ref) {
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "self-end",
         children: /*#__PURE__*/jsxRuntime.jsx(Button, {
-          "data-cy": "customize-themes-add-theme-button",
+          "data-testid": "customize-themes-add-theme-button",
           icon: Plus,
           iconPosition: "left",
           style: "text",