@bigbinary/neeto-themes-frontend 1.1.12 → 1.1.14

package/dist/index.js

@@ -2,22 +2,31 @@ import { shallow } from 'zustand/shallow';
 import React, { useEffect, forwardRef, useImperativeHandle, Fragment, useMemo, useRef, useReducer, useCallback, useState, memo } from 'react';
 import i18next, { t as t$2 } from 'i18next';
 import { withImmutableActions, useMutationWithInvalidation, useDebounce, useFuncDebounce, withT, withTitle } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { Typography, Dropdown, Modal as Modal$1, Spinner, Tab, Button, Input, Toastr, Switch, ColorPicker, Select, Tag, Alert } from '@bigbinary/neetoui';
+import Spinner$1 from '@bigbinary/neetoui/Spinner';
 import { create as create$3 } from 'zustand';
 import { isNotPresent, snakeToCamelCase, noop as noop$1, isPresent, findBy, keysToCamelCase, humanize, existsBy, filterBy, findIndexBy, isNot, isNotEmpty } from '@bigbinary/neeto-cist';
+import Alert from '@bigbinary/neetoui/Alert';
 import { useTranslation, Trans } from 'react-i18next';
+import '@bigbinary/neetoui/Toastr';
 import { useQuery, useMutation } from 'react-query';
 import axios from 'axios';
 import { prop, mergeRight, equals, pipe, values, flatten as flatten$1, map, toUpper, join, isNil, isEmpty, mergeLeft, concat, __, inc, path } from 'ramda';
-import { Input as Input$1, Form } from '@bigbinary/neetoui/formik';
+import Button$1 from '@bigbinary/neetoui/Button';
+import Form from '@bigbinary/neetoui/formik/Form';
 import * as yup from 'yup';
 import { useFormikContext } from 'formik';
+import Typography from '@bigbinary/neetoui/Typography';
 import classnames from 'classnames';
 import { MenuHorizontal, LeftArrow, Plus } from '@bigbinary/neeto-icons';
+import { Dropdown, Typography as Typography$1, Modal as Modal$1, Spinner, Tab, Button, Input, Toastr, Switch } from '@bigbinary/neetoui';
 import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
 import { withEventTargetValue, joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils';
+import ColorPicker from '@bigbinary/neetoui/ColorPicker';
+import Select from '@bigbinary/neetoui/Select';
+import Input$1 from '@bigbinary/neetoui/formik/Input';
 import Search from '@bigbinary/neeto-molecules/Search';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
+import Tag from '@bigbinary/neetoui/Tag';
 
 /** @type {import("neetocommons/react-utils").ZustandStoreHook} */
 var useConfigStore = create$3(withImmutableActions(function (set) {
@@ -36,6 +45,7 @@ var useThemeStore = create$3(withImmutableActions(function (set) {
   return {
     currentTheme: {},
     isCurrentThemeLoading: true,
+    previewingTheme: {},
     setThemeState: set
   };
 }));
@@ -460,7 +470,7 @@ var hexToRgba = function hexToRgba(hex) {
   return "".concat(r, ", ").concat(g, ", ").concat(b).concat(a !== undefined ? ", ".concat(a) : "");
 };
 
-var BASE_URL = "themes";
+var BASE_URL = "neeto_themes_engine";
 
 var show$1 = function show(entityId) {
   return axios.get("".concat(BASE_URL, "/api/v1/theme/entities/").concat(entityId));
@@ -574,6 +584,14 @@ var useListConfigs = function useListConfigs(_ref) {
 
 var useThemeUtils = function useThemeUtils() {
   var setConfigState = useConfigStore(prop("setConfigState"));
+  var _useThemeStore = useThemeStore(function (store) {
+      return {
+        previewingTheme: store["previewingTheme"],
+        currentTheme: store["currentTheme"]
+      };
+    }, shallow),
+    previewingTheme = _useThemeStore.previewingTheme,
+    currentTheme = _useThemeStore.currentTheme;
   var _useListConfigs = useListConfigs({
       onSuccess: function onSuccess(_ref) {
         var _ref$config = _ref.config,
@@ -614,7 +632,9 @@ var useThemeUtils = function useThemeUtils() {
   };
   return {
     setTheme: setTheme,
-    setVariable: setVariable
+    setVariable: setVariable,
+    previewingTheme: previewingTheme,
+    currentTheme: currentTheme
   };
 };
 
@@ -3668,7 +3688,7 @@ var ImageDirectUpload = function ImageDirectUpload(_ref) {
     })
   }), /*#__PURE__*/React.createElement("div", {
     className: "flex flex-col space-y-1"
-  }, !isDisabled && /*#__PURE__*/React.createElement(Typography, {
+  }, !isDisabled && /*#__PURE__*/React.createElement(Typography$1, {
     className: "neeto-ui-text-gray-800 text-center leading-4",
     style: "body2"
   }, /*#__PURE__*/React.createElement(Trans, {
@@ -3679,7 +3699,7 @@ var ImageDirectUpload = function ImageDirectUpload(_ref) {
         "data-cy": "neeto-image-uploader-browse-text"
       })
     }
-  })), setIsAssetLibraryOpen && /*#__PURE__*/React.createElement(Typography, {
+  })), setIsAssetLibraryOpen && /*#__PURE__*/React.createElement(Typography$1, {
     className: "text-center leading-4",
     style: "body2",
     onClick: function onClick(e) {
@@ -3697,7 +3717,7 @@ var ImageDirectUpload = function ImageDirectUpload(_ref) {
   })), /*#__PURE__*/React.createElement("input", _extends$1({}, getInputProps(), {
     "data-cy": "neeto-image-uploader-file-input",
     disabled: isDisabled
-  })), /*#__PURE__*/React.createElement(Typography, {
+  })), /*#__PURE__*/React.createElement(Typography$1, {
     className: "neeto-ui-text-gray-700 text-center leading-4",
     "data-cy": "neeto-image-uploader-restriction-message",
     lineHeight: "snug",
@@ -5218,7 +5238,7 @@ var Controls = function Controls(_ref) {
     disabled: isFullImage,
     label: t("neetoImageUploader.labels.lockAspectRatio"),
     onChange: onToggleAspectRatioLock
-  }), /*#__PURE__*/React.createElement(Typography, {
+  }), /*#__PURE__*/React.createElement(Typography$1, {
     className: "mb-2 mt-6",
     style: "body2"
   }, t("neetoImageUploader.imageEditor.aspectRatio")), /*#__PURE__*/React.createElement("div", {
@@ -5230,7 +5250,7 @@ var Controls = function Controls(_ref) {
     type: "number",
     value: aspectRatio.width,
     onChange: withEventTargetValue(handleAspectWidthChange)
-  }), /*#__PURE__*/React.createElement(Typography, null, " : "), /*#__PURE__*/React.createElement(Input, {
+  }), /*#__PURE__*/React.createElement(Typography$1, null, " : "), /*#__PURE__*/React.createElement(Input, {
     "data-cy": "aspect-ratio-height-input",
     disabled: isFullImage,
     size: "small",
@@ -6294,7 +6314,7 @@ var Images$1 = function Images(_ref) {
     refetch();
   }, [debouncedQuery]);
   if (error) {
-    return /*#__PURE__*/React.createElement(Typography, {
+    return /*#__PURE__*/React.createElement(Typography$1, {
       className: "mt-9 flex justify-center",
       style: "body2"
     }, t("neetoImageUploader.unsplash.errorMessage"));
@@ -6500,7 +6520,7 @@ var UnsplashLibrary = function UnsplashLibrary(_ref) {
     refetch();
   }, [debouncedQuery]);
   if (error) {
-    return /*#__PURE__*/React.createElement(Typography, {
+    return /*#__PURE__*/React.createElement(Typography$1, {
       className: "mt-9 flex justify-center",
       style: "body2"
     }, t("neetoImageUploader.unsplash.errorMessage"));
@@ -6648,7 +6668,7 @@ var Modal = function Modal(_ref) {
     className: "neeto-ui-bg-gray-400 absolute inset-0 z-50 flex h-full items-center justify-center opacity-50"
   }, /*#__PURE__*/React.createElement(Spinner, null)), isNilOrEmpty(selectedImage) && isDragActive && /*#__PURE__*/React.createElement("div", _extends$1({
     className: "neeto-ui-rounded-xl neeto-ui-bg-gray-400 absolute flex h-full w-full flex-col items-center justify-around border-4 border-dashed border-gray-900 opacity-40"
-  }, getRootProps()), /*#__PURE__*/React.createElement(Typography, null, t("neetoImageUploader.common.dropHere"))), !isNilOrEmpty(selectedImage) ? /*#__PURE__*/React.createElement(ImageEditor, {
+  }, getRootProps()), /*#__PURE__*/React.createElement(Typography$1, null, t("neetoImageUploader.common.dropHere"))), !isNilOrEmpty(selectedImage) ? /*#__PURE__*/React.createElement(ImageEditor, {
     fixedAspectRatio: fixedAspectRatio,
     handleImageEditComplete: handleImageEditComplete,
     handleReset: function handleReset() {
@@ -6662,7 +6682,7 @@ var Modal = function Modal(_ref) {
     onClick: function onClick(event) {
       return event.stopPropagation();
     }
-  })), /*#__PURE__*/React.createElement(Modal$1.Header, null, /*#__PURE__*/React.createElement(Typography, {
+  })), /*#__PURE__*/React.createElement(Modal$1.Header, null, /*#__PURE__*/React.createElement(Typography$1, {
     style: "h2"
   }, t("neetoImageUploader.common.imageLibrary"))), /*#__PURE__*/React.createElement("div", {
     className: "px-6 py-2"
@@ -6697,7 +6717,7 @@ var Modal = function Modal(_ref) {
     tab: activeTab
   }), equals(activeTab, TABS[1].key) && /*#__PURE__*/React.createElement(Modal$1.Footer, {
     className: "flex items-center justify-center gap-2"
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React.createElement(Typography$1, {
     style: "body2"
   }, /*#__PURE__*/React.createElement(Trans, {
     i18nKey: "neetoImageUploader.unsplash.poweredByUnsplash",
@@ -6978,6 +6998,12 @@ var Properties = function Properties() {
       };
     }, shallow),
     variableNamesMap = _useConfigStore.variableNamesMap;
+  var _useThemeStore = useThemeStore(function (store) {
+      return {
+        setThemeState: store["setThemeState"]
+      };
+    }, shallow),
+    setThemeState = _useThemeStore.setThemeState;
   var _useFormikContext = useFormikContext(),
     setFieldValue = _useFormikContext.setFieldValue,
     values = _useFormikContext.values;
@@ -7000,6 +7026,9 @@ var Properties = function Properties() {
   };
   useEffect(function () {
     setTheme(values);
+    setThemeState({
+      previewingTheme: values
+    });
   }, [values]);
   return /*#__PURE__*/React.createElement(Card$2, {
     title: t("neetoThemes.common.style")
@@ -7149,13 +7178,13 @@ var Customize = function Customize(_ref) {
       });
     })), /*#__PURE__*/React.createElement("div", {
       className: "neeto-ui-bg-white neeto-ui-shadow-s sticky bottom-0 left-0 right-0 flex justify-end gap-x-2 px-4 py-6"
-    }, /*#__PURE__*/React.createElement(Button, {
+    }, /*#__PURE__*/React.createElement(Button$1, {
       "data-cy": "reset-button",
       disabled: !dirty || isSubmitting,
       label: t("neetoThemes.buttons.reset"),
       style: "text",
       type: "reset"
-    }), /*#__PURE__*/React.createElement(Button, {
+    }), /*#__PURE__*/React.createElement(Button$1, {
       "data-cy": "save-changes-button",
       disabled: !dirty && (theme === null || theme === void 0 ? void 0 : theme.id) || isSubmitting,
       label: t("neetoThemes.buttons.save"),
@@ -7320,7 +7349,7 @@ var Card = function Card(_ref) {
     "data-cy": "active-theme-label",
     label: t("neetoThemes.common.active"),
     style: "success"
-  }) : /*#__PURE__*/React.createElement(Button, {
+  }) : /*#__PURE__*/React.createElement(Button$1, {
     className: "flex-shrink-0",
     "data-cy": "apply-theme-button",
     disabled: isApplyingTheme,
@@ -7367,8 +7396,6 @@ var Themes = function Themes(_ref) {
     _ref$defaultThemes = _ref.defaultThemes,
     defaultThemes = _ref$defaultThemes === void 0 ? [] : _ref$defaultThemes,
     onDeleteTheme = _ref.onDeleteTheme,
-    previewingTheme = _ref.previewingTheme,
-    setPreviewingTheme = _ref.setPreviewingTheme,
     themeToHighlight = _ref.themeToHighlight,
     highlightTheme = _ref.highlightTheme,
     didScrollActiveThemeIntoView = _ref.didScrollActiveThemeIntoView,
@@ -7379,6 +7406,14 @@ var Themes = function Themes(_ref) {
     t = _useTranslation.t;
   var _useThemeUtils = useThemeUtils(),
     setTheme = _useThemeUtils.setTheme;
+  var _useThemeStore = useThemeStore(function (store) {
+      return {
+        setThemeState: store["setThemeState"],
+        previewingTheme: store["previewingTheme"]
+      };
+    }, shallow),
+    setThemeState = _useThemeStore.setThemeState,
+    previewingTheme = _useThemeStore.previewingTheme;
   var _useState = useState(""),
     _useState2 = _slicedToArray$3(_useState, 2),
     searchQuery = _useState2[0],
@@ -7393,6 +7428,9 @@ var Themes = function Themes(_ref) {
       onSuccess: function onSuccess(_ref2) {
         var theme = _ref2.theme;
         setTheme(theme);
+        setThemeState({
+          previewingTheme: theme
+        });
         setThemeBeingApplied({});
       }
     }),
@@ -7406,8 +7444,9 @@ var Themes = function Themes(_ref) {
     }, 100);
   }, [didScrollActiveThemeIntoView, currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id]);
   var setPreviewTheme = function setPreviewTheme(theme) {
-    var id = theme.id;
-    setPreviewingTheme(id);
+    setThemeState({
+      previewingTheme: theme
+    });
     setTheme(theme);
   };
   var filteredDefaultThemes = defaultThemes.filter(function (theme) {
@@ -7428,7 +7467,7 @@ var Themes = function Themes(_ref) {
   if (isLoading || isCurrentThemeLoading) {
     return /*#__PURE__*/React.createElement("div", {
       className: "flex h-full w-full items-center justify-center"
-    }, /*#__PURE__*/React.createElement(Spinner, null));
+    }, /*#__PURE__*/React.createElement(Spinner$1, null));
   }
   return /*#__PURE__*/React.createElement("div", {
     className: "neeto-themes-sidebar__scroll"
@@ -7456,7 +7495,7 @@ var Themes = function Themes(_ref) {
       setThemeBeingApplied: setThemeBeingApplied,
       theme: theme,
       active: (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id,
-      isPreviewing: previewingTheme === theme.id,
+      isPreviewing: (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id,
       key: theme.id,
       isApplyingTheme: isApplyingTheme && (themeBeingApplied === null || themeBeingApplied === void 0 ? void 0 : themeBeingApplied.id) === theme.id,
       onCloneTheme: handleCloneTheme,
@@ -7473,7 +7512,7 @@ var Themes = function Themes(_ref) {
     className: "flex flex-col gap-4 px-6"
   }, filteredThemes.map(function (theme) {
     var isActive = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id;
-    var isPreviewing = previewingTheme === theme.id;
+    var isPreviewing = (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id;
     return /*#__PURE__*/React.createElement(Card$1, {
       isPreviewing: isPreviewing,
       onApplyTheme: onApplyTheme,
@@ -7503,7 +7542,7 @@ var TitleBar = function TitleBar(_ref) {
       className: "neeto-themes-sidebar__header px-4"
     }, /*#__PURE__*/React.createElement("div", {
       className: "flex items-center justify-start space-x-2"
-    }, /*#__PURE__*/React.createElement(Button, {
+    }, /*#__PURE__*/React.createElement(Button$1, {
       "data-cy": "customize-themes-back-button",
       icon: LeftArrow,
       iconPosition: "left",
@@ -7531,7 +7570,7 @@ var TitleBar = function TitleBar(_ref) {
     weight: "semibold"
   }, t("neetoThemes.build.leftSideBar.headerTabs.themes")), /*#__PURE__*/React.createElement("div", {
     className: "self-end"
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(Button$1, {
     "data-cy": "customize-themes-add-theme-button",
     icon: Plus,
     iconPosition: "left",
@@ -7557,12 +7596,8 @@ var Sidebar = function Sidebar() {
     setIsDeleteAlertOpen = _useState4[1];
   var _useState5 = useState(null),
     _useState6 = _slicedToArray$3(_useState5, 2),
-    previewingTheme = _useState6[0],
-    setPreviewingTheme = _useState6[1];
-  var _useState7 = useState(null),
-    _useState8 = _slicedToArray$3(_useState7, 2),
-    themeToHighlight = _useState8[0],
-    setThemeToHighlight = _useState8[1];
+    themeToHighlight = _useState6[0],
+    setThemeToHighlight = _useState6[1];
   var _useConfigStore = useConfigStore(function (store) {
       return {
         entityType: store["entityType"],
@@ -7609,6 +7644,9 @@ var Sidebar = function Sidebar() {
   };
   var handleBackPress = function handleBackPress() {
     setTheme(currentTheme);
+    setThemeState({
+      previewingTheme: currentTheme
+    });
     setCurrentScreen(DESIGN_SCREENS.THEMES);
     themeToEdit.current = null;
   };
@@ -7624,7 +7662,9 @@ var Sidebar = function Sidebar() {
   var onCreateTheme = function onCreateTheme(createdTheme) {
     setCurrentScreen(DESIGN_SCREENS.THEMES);
     setTheme(createdTheme);
-    setPreviewingTheme(createdTheme.id);
+    setThemeState({
+      previewingTheme: createdTheme
+    });
     highlightTheme(createdTheme);
     themeToEdit.current = null;
   };
@@ -7654,9 +7694,11 @@ var Sidebar = function Sidebar() {
     setTheme(currentTheme);
   }, [currentTheme, entityId]);
   useEffect(function () {
+    if (isNotPresent(currentTheme)) return;
     setThemeState({
       currentTheme: currentTheme,
-      isCurrentThemeLoading: isCurrentThemeLoading
+      isCurrentThemeLoading: isCurrentThemeLoading,
+      previewingTheme: currentTheme
     });
   }, [currentTheme, isCurrentThemeLoading]);
   return /*#__PURE__*/React.createElement("div", {
@@ -7674,8 +7716,6 @@ var Sidebar = function Sidebar() {
     didScrollActiveThemeIntoView: didScrollActiveThemeIntoView,
     highlightTheme: highlightTheme,
     isCurrentThemeLoading: isCurrentThemeLoading,
-    previewingTheme: previewingTheme,
-    setPreviewingTheme: setPreviewingTheme,
     themeToHighlight: themeToHighlight,
     themes: themes,
     isLoading: isLoading || isFetchingConfig,
@@ -7727,7 +7767,7 @@ var NeetoThemes = function NeetoThemes(_ref) {
     className: "neeto-themes-preview__wrapper"
   }, isCurrentThemeLoading ? /*#__PURE__*/React.createElement("div", {
     className: "m-auto flex h-full w-full items-center justify-center"
-  }, /*#__PURE__*/React.createElement(Spinner, null)) : children));
+  }, /*#__PURE__*/React.createElement(Spinner$1, null)) : children));
 };
 var index = withTitle(NeetoThemes, t$2("neetoThemes.common.design"));