@bigbinary/neeto-themes-frontend 4.0.8 → 4.0.10

package/dist/NeetoThemesBuilder.js

@@ -18,7 +18,6 @@ import { useHistory, useParams, Switch as Switch$1, Route } from 'react-router-d
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import Close from '@bigbinary/neeto-icons/Close';
-import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import Popover from '@bigbinary/neetoui/Popover';
 import Typography from '@bigbinary/neetoui/Typography';
 import Switch from '@bigbinary/neetoui/Switch';
@@ -285,7 +284,7 @@ var Card$2 = function Card(_ref) {
   var isRTL = i18n.dir() === "rtl";
   var ToggleIcon = isRTL ? Left : Right;
   return /*#__PURE__*/jsxs("div", {
-    "data-cy": "theme-".concat(hyphenate(title), "-properties"),
+    "data-testid": "theme-".concat(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],
@@ -301,7 +300,7 @@ var Card$2 = function Card(_ref) {
       children: [/*#__PURE__*/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",
@@ -675,9 +674,9 @@ var AlignmentBlock = function AlignmentBlock(_ref) {
     name = _ref.name;
   return /*#__PURE__*/jsxs("div", {
     className: "flex items-center justify-between gap-2",
-    "data-cy": joinHyphenCase(label),
+    "data-testid": joinHyphenCase(label),
     children: [/*#__PURE__*/jsx(Typography, {
-      "data-cy": "style-fields-labels",
+      "data-testid": "style-fields-labels",
       style: "body2",
       children: label
     }), /*#__PURE__*/jsx(Field, {
@@ -689,7 +688,7 @@ var AlignmentBlock = function AlignmentBlock(_ref) {
           className: "neeto-ui-border-gray-300 neeto-themes-nano-alignment-block flex items-center border",
           children: [/*#__PURE__*/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() {
@@ -713,7 +712,7 @@ var AlignmentBlock = function AlignmentBlock(_ref) {
             className: "neeto-themes-nano-alignment-divider"
           }), /*#__PURE__*/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() {
@@ -748,9 +747,9 @@ var ColorBlock = function ColorBlock(_ref) {
     showTransparencyControl = _ref.showTransparencyControl;
   return /*#__PURE__*/jsxs("div", {
     className: "flex items-center justify-between",
-    "data-cy": "theme-style-".concat(joinHyphenCase(label)),
+    "data-testid": "theme-style-".concat(joinHyphenCase(label)),
     children: [/*#__PURE__*/jsx(Typography, {
-      "data-cy": "style-fields-labels",
+      "data-testid": "style-fields-labels",
       style: "body2",
       children: label
     }), /*#__PURE__*/jsx(ColorPicker, {
@@ -774,9 +773,9 @@ var FontPickerBlock = function FontPickerBlock(_ref) {
     onChange = _ref.onChange;
   return /*#__PURE__*/jsxs("div", {
     className: "flex items-center justify-between",
-    "data-cy": "theme-style-".concat(joinHyphenCase(label)),
+    "data-testid": "theme-style-".concat(joinHyphenCase(label)),
     children: [/*#__PURE__*/jsx(Typography, {
-      "data-cy": "style-fields-labels",
+      "data-testid": "style-fields-labels",
       style: "body2",
       children: label
     }), /*#__PURE__*/jsx("div", {
@@ -809,9 +808,9 @@ var SelectBlock = function SelectBlock(_ref) {
     onChange = _ref.onChange;
   return /*#__PURE__*/jsxs("div", {
     className: "flex items-center justify-between",
-    "data-cy": "theme-style-".concat(joinHyphenCase(label)),
+    "data-testid": "theme-style-".concat(joinHyphenCase(label)),
     children: [/*#__PURE__*/jsx(Typography, {
-      "data-cy": "logo-field-labels",
+      "data-testid": "logo-field-labels",
       style: "body2",
       children: label
     }), /*#__PURE__*/jsx("div", {
@@ -835,9 +834,9 @@ var SliderBlock = function SliderBlock(_ref) {
     marks = _ref.marks;
   return /*#__PURE__*/jsxs("div", {
     className: "flex items-center justify-between gap-3",
-    "data-cy": "theme-style-".concat(joinHyphenCase(label)),
+    "data-testid": "theme-style-".concat(joinHyphenCase(label)),
     children: [/*#__PURE__*/jsx(Typography, {
-      "data-cy": "style-fields-labels",
+      "data-testid": "style-fields-labels",
       style: "body2",
       children: label
     }), /*#__PURE__*/jsx(Slider, {
@@ -868,11 +867,11 @@ var SwitchBlock = function SwitchBlock(_ref) {
   var doesHelpTextExist = i18n.exists(translationKey);
   return /*#__PURE__*/jsxs("div", {
     className: "flex items-center justify-between",
-    "data-cy": "theme-style-content-background",
+    "data-testid": "theme-style-content-background",
     children: [/*#__PURE__*/jsxs("div", {
       className: "inline-flex items-center gap-4",
       children: [/*#__PURE__*/jsx(Typography, {
-        "data-cy": "style-fields-labels",
+        "data-testid": "style-fields-labels",
         style: "body2",
         className: classnames({
           "w-32": doesHelpTextExist,
@@ -886,7 +885,7 @@ var SwitchBlock = function SwitchBlock(_ref) {
     }), /*#__PURE__*/jsx(Switch, _objectSpread$1(_objectSpread$1({}, _objectSpread$1({
       name: name
     }, switchProps)), {}, {
-      "data-cy": "enable-background-color-toggle"
+      "data-testid": "enable-background-color-toggle"
     }))]
   });
 };
@@ -901,9 +900,9 @@ var TextBlock = function TextBlock(_ref) {
     placeholder = _ref.placeholder;
   return /*#__PURE__*/jsxs("div", {
     className: "flex items-center justify-between",
-    "data-cy": "theme-style-".concat(joinHyphenCase(label)),
+    "data-testid": "theme-style-".concat(joinHyphenCase(label)),
     children: [/*#__PURE__*/jsx(Typography, {
-      "data-cy": "style-fields-labels",
+      "data-testid": "style-fields-labels",
       style: "body2",
       children: label
     }), /*#__PURE__*/jsx("div", {
@@ -1192,11 +1191,11 @@ var ImageBlock = function ImageBlock(_ref) {
   }();
   return /*#__PURE__*/jsxs("div", {
     className: "space-y-3",
-    "data-cy": "theme-style-".concat(label ? joinHyphenCase(label) : "image-block"),
+    "data-testid": "theme-style-".concat(label ? joinHyphenCase(label) : "image-block"),
     children: [label && /*#__PURE__*/jsx("div", {
       className: "flex items-center justify-between",
       children: /*#__PURE__*/jsx(Typography, {
-        "data-cy": "style-fields-labels",
+        "data-testid": "style-fields-labels",
         style: "body2",
         children: label
       })
@@ -1283,7 +1282,7 @@ var ThemeMeta = function ThemeMeta(_ref) {
     title: t("neetoThemes.common.name"),
     children: /*#__PURE__*/jsx(Input$1, {
       autoFocus: true,
-      "data-cy": "theme-name-property",
+      "data-testid": "theme-name-property",
       name: "name"
     })
   });
@@ -1406,7 +1405,10 @@ var Customize = function Customize(_ref) {
     }
   }, [isLoadingTheme]);
   if (isLoading) {
-    return /*#__PURE__*/jsx(PageLoader, {});
+    return /*#__PURE__*/jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    });
   }
   return /*#__PURE__*/jsx(Form, {
     formikProps: {
@@ -1489,13 +1491,13 @@ var Customize = function Customize(_ref) {
         }), /*#__PURE__*/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__*/jsx(Button, {
-            "data-cy": "reset-button",
+            "data-testid": "reset-button",
             disabled: !dirty || isSubmitting,
             label: t("neetoThemes.buttons.reset"),
             style: "text",
             type: "reset"
           }), /*#__PURE__*/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,
@@ -1662,7 +1664,7 @@ var Card = function Card(_ref) {
   };
   return /*#__PURE__*/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__*/jsxs("div", {
       className: classnames("neeto-themes-theme-thumbnail neeto-ui-rounded-lg relative cursor-pointer border transition-all duration-300 ease-in-out", {
@@ -1680,7 +1682,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__*/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__*/jsx("div", {
             className: classnames({
@@ -1690,7 +1692,7 @@ var Card = function Card(_ref) {
             children: /*#__PURE__*/jsxs("div", {
               className: "relative flex w-full flex-col gap-2",
               children: [/*#__PURE__*/jsx(Button, {
-                "data-cy": "preview-theme-button",
+                "data-testid": "preview-theme-button",
                 disabled: isPreviewing,
                 label: t("neetoThemes.common.previewTheme"),
                 size: "medium",
@@ -1704,7 +1706,7 @@ var Card = function Card(_ref) {
                 }
               }), /*#__PURE__*/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,
@@ -1736,13 +1738,13 @@ var Card = function Card(_ref) {
           className: "flex items-center space-x-2",
           children: [/*#__PURE__*/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__*/jsx(Rating, {
             className: "neeto-themes-nano-global-theme-icon",
-            "data-cy": "global-theme-icon",
+            "data-testid": "global-theme-icon",
             size: 18
           })]
         }), /*#__PURE__*/jsx(MoreDropdown, {
@@ -1757,18 +1759,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: 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
@@ -1778,7 +1780,7 @@ var Card = function Card(_ref) {
             isVisible: 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: isFunction(onDeleteTheme),
@@ -1904,19 +1906,19 @@ var Themes = function Themes(_ref) {
         placeholder: t("neetoThemes.common.searchThemes")
       }), isEmpty(filteredThemes) && isEmpty(filteredDefaultThemes) && /*#__PURE__*/jsx(Typography, {
         className: "text-center",
-        "data-cy": "no-data-title",
+        "data-testid": "no-data-title",
         style: "body2",
         children: t("neetoThemes.common.noResultsFound")
       }), isNotEmpty(filteredDefaultThemes) && /*#__PURE__*/jsxs(Fragment, {
         children: [/*#__PURE__*/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__*/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__*/createElement(Card$1, {
               onApplyTheme: onApplyTheme,
@@ -1938,13 +1940,13 @@ var Themes = function Themes(_ref) {
       className: "mb-6 space-y-3",
       children: [/*#__PURE__*/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__*/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;
@@ -2001,7 +2003,7 @@ var TitleBar = function TitleBar(_ref) {
       children: /*#__PURE__*/jsxs("div", {
         className: "flex items-center justify-start space-x-2",
         children: [/*#__PURE__*/jsx(Button, {
-          "data-cy": "customize-themes-back-button",
+          "data-testid": "customize-themes-back-button",
           icon: BackButtonIcon,
           iconPosition: "left",
           style: "text",
@@ -2013,7 +2015,7 @@ var TitleBar = function TitleBar(_ref) {
             return handleBackPress(themeId);
           }
         }), /*#__PURE__*/jsxs(Typography, {
-          "data-cy": "themes-header",
+          "data-testid": "themes-header",
           lineHeight: "normal",
           style: "h3",
           weight: "semibold",
@@ -2029,7 +2031,7 @@ var TitleBar = function TitleBar(_ref) {
       children: [/*#__PURE__*/jsxs("div", {
         className: "flex space-x-2",
         children: [/*#__PURE__*/jsx(Typography, {
-          "data-cy": "themes-header",
+          "data-testid": "themes-header",
           lineHeight: "normal",
           style: "h3",
           weight: "semibold",
@@ -2046,7 +2048,7 @@ var TitleBar = function TitleBar(_ref) {
       }), /*#__PURE__*/jsx("div", {
         className: "self-end",
         children: /*#__PURE__*/jsx(Button, {
-          "data-cy": "customize-themes-add-theme-button",
+          "data-testid": "customize-themes-add-theme-button",
           icon: Plus,
           iconPosition: "left",
           style: "text",