@bigbinary/neeto-themes-frontend 1.1.12 → 1.1.14

package/dist/index.cjs.js

@@ -6,22 +6,31 @@ var shallow = require('zustand/shallow');
 var React = require('react');
 var i18next = require('i18next');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
-var neetoui = require('@bigbinary/neetoui');
+var Spinner = require('@bigbinary/neetoui/Spinner');
 var zustand = require('zustand');
 var neetoCist = require('@bigbinary/neeto-cist');
+var Alert = require('@bigbinary/neetoui/Alert');
 var reactI18next = require('react-i18next');
+require('@bigbinary/neetoui/Toastr');
 var reactQuery = require('react-query');
 var axios = require('axios');
 var ramda = require('ramda');
-var formik$1 = require('@bigbinary/neetoui/formik');
+var Button = require('@bigbinary/neetoui/Button');
+var Form = require('@bigbinary/neetoui/formik/Form');
 var yup = require('yup');
 var formik = require('formik');
+var Typography = require('@bigbinary/neetoui/Typography');
 var classnames = require('classnames');
 var neetoIcons = require('@bigbinary/neeto-icons');
+var neetoui = require('@bigbinary/neetoui');
 var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
+var ColorPicker = require('@bigbinary/neetoui/ColorPicker');
+var Select = require('@bigbinary/neetoui/Select');
+var Input = require('@bigbinary/neetoui/formik/Input');
 var Search = require('@bigbinary/neeto-molecules/Search');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
+var Tag = require('@bigbinary/neetoui/Tag');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -45,11 +54,20 @@ function _interopNamespace(e) {
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var i18next__default = /*#__PURE__*/_interopDefaultLegacy(i18next);
+var Spinner__default = /*#__PURE__*/_interopDefaultLegacy(Spinner);
+var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
+var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var Form__default = /*#__PURE__*/_interopDefaultLegacy(Form);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
+var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var ColorPicker__default = /*#__PURE__*/_interopDefaultLegacy(ColorPicker);
+var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
+var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
 var Search__default = /*#__PURE__*/_interopDefaultLegacy(Search);
 var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
+var Tag__default = /*#__PURE__*/_interopDefaultLegacy(Tag);
 
 /** @type {import("neetocommons/react-utils").ZustandStoreHook} */
 var useConfigStore = zustand.create(reactUtils.withImmutableActions(function (set) {
@@ -68,6 +86,7 @@ var useThemeStore = zustand.create(reactUtils.withImmutableActions(function (set
   return {
     currentTheme: {},
     isCurrentThemeLoading: true,
+    previewingTheme: {},
     setThemeState: set
   };
 }));
@@ -492,7 +511,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__default["default"].get("".concat(BASE_URL, "/api/v1/theme/entities/").concat(entityId));
@@ -606,6 +625,14 @@ var useListConfigs = function useListConfigs(_ref) {
 
 var useThemeUtils = function useThemeUtils() {
   var setConfigState = useConfigStore(ramda.prop("setConfigState"));
+  var _useThemeStore = useThemeStore(function (store) {
+      return {
+        previewingTheme: store["previewingTheme"],
+        currentTheme: store["currentTheme"]
+      };
+    }, shallow.shallow),
+    previewingTheme = _useThemeStore.previewingTheme,
+    currentTheme = _useThemeStore.currentTheme;
   var _useListConfigs = useListConfigs({
       onSuccess: function onSuccess(_ref) {
         var _ref$config = _ref.config,
@@ -646,7 +673,9 @@ var useThemeUtils = function useThemeUtils() {
   };
   return {
     setTheme: setTheme,
-    setVariable: setVariable
+    setVariable: setVariable,
+    previewingTheme: previewingTheme,
+    currentTheme: currentTheme
   };
 };
 
@@ -764,7 +793,7 @@ var Card$2 = function Card(_ref) {
     className: "neeto-ui-border-gray-300 neeto-ui-rounded-lg neeto-ui-bg-white space-y-3 border p-4"
   }, title && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center justify-between"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     "data-cy": "theme-properties",
     lineHeight: "normal",
     style: "h4",
@@ -6918,7 +6947,7 @@ var ImageBlock = function ImageBlock(_ref) {
     "data-cy": "theme-style-".concat(utils.joinHyphenCase(label))
   }, label && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center justify-between"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     "data-cy": "style-fields-labels",
     style: "body2"
   }, label)), /*#__PURE__*/React__default["default"].createElement(ImageUploader, {
@@ -6956,10 +6985,10 @@ var ColorBlock = function ColorBlock(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center justify-between py-3 first:pt-0 last:pb-0",
     "data-cy": "theme-style-".concat(utils.joinHyphenCase(label))
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     "data-cy": "style-fields-labels",
     style: "body2"
-  }, label), /*#__PURE__*/React__default["default"].createElement(neetoui.ColorPicker, {
+  }, label), /*#__PURE__*/React__default["default"].createElement(ColorPicker__default["default"], {
     color: color,
     onChange: onChange,
     showTransparencyControl: showTransparencyControl,
@@ -6979,12 +7008,12 @@ var FontPickerBlock = function FontPickerBlock(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center justify-between py-3 first:pt-0 last:pb-0",
     "data-cy": "theme-style-".concat(utils.joinHyphenCase(label))
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     "data-cy": "style-fields-labels",
     style: "body2"
   }, label), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-40"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Select, {
+  }, /*#__PURE__*/React__default["default"].createElement(Select__default["default"], {
     onChange: onChange,
     options: options,
     placeholder: placeholder,
@@ -7010,6 +7039,12 @@ var Properties = function Properties() {
       };
     }, shallow.shallow),
     variableNamesMap = _useConfigStore.variableNamesMap;
+  var _useThemeStore = useThemeStore(function (store) {
+      return {
+        setThemeState: store["setThemeState"]
+      };
+    }, shallow.shallow),
+    setThemeState = _useThemeStore.setThemeState;
   var _useFormikContext = formik.useFormikContext(),
     setFieldValue = _useFormikContext.setFieldValue,
     values = _useFormikContext.values;
@@ -7032,6 +7067,9 @@ var Properties = function Properties() {
   };
   React.useEffect(function () {
     setTheme(values);
+    setThemeState({
+      previewingTheme: values
+    });
   }, [values]);
   return /*#__PURE__*/React__default["default"].createElement(Card$2, {
     title: t("neetoThemes.common.style")
@@ -7071,7 +7109,7 @@ var ThemeMeta = reactUtils.withT(function (_ref) {
   var t = _ref.t;
   return /*#__PURE__*/React__default["default"].createElement(Card$2, {
     title: t("neetoThemes.common.name")
-  }, /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
+  }, /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
     autoFocus: true,
     "data-cy": "theme-name-property",
     name: "name"
@@ -7159,7 +7197,7 @@ var Customize = function Customize(_ref) {
       }
     });
   };
-  return /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
+  return /*#__PURE__*/React__default["default"].createElement(Form__default["default"], {
     formikProps: {
       initialValues: buildInitialValues(theme, themeConfig),
       validationSchema: THEME_VALIDATION_SCHEMA,
@@ -7181,13 +7219,13 @@ var Customize = function Customize(_ref) {
       });
     })), /*#__PURE__*/React__default["default"].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__default["default"].createElement(neetoui.Button, {
+    }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
       "data-cy": "reset-button",
       disabled: !dirty || isSubmitting,
       label: t("neetoThemes.buttons.reset"),
       style: "text",
       type: "reset"
-    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    }), /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
       "data-cy": "save-changes-button",
       disabled: !dirty && (theme === null || theme === void 0 ? void 0 : theme.id) || isSubmitting,
       label: t("neetoThemes.buttons.save"),
@@ -7319,14 +7357,14 @@ var Card = function Card(_ref) {
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "mb-3"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "h3",
     weight: "semibold"
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       color: primaryColor
     }
-  }, primaryLabel)), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, primaryLabel)), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-600",
     style: "body2"
   }, /*#__PURE__*/React__default["default"].createElement("span", {
@@ -7340,19 +7378,19 @@ var Card = function Card(_ref) {
     }
   })))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-start justify-between gap-1"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "line-clamp-2 min-w-0 flex-grow break-words pt-1",
     "data-cy": "theme-name",
     lineHeight: "snug",
     style: "body2"
   }, name), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center gap-2"
-  }, active ? /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, {
+  }, active ? /*#__PURE__*/React__default["default"].createElement(Tag__default["default"], {
     className: "flex-shrink-0",
     "data-cy": "active-theme-label",
     label: t("neetoThemes.common.active"),
     style: "success"
-  }) : /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  }) : /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     className: "flex-shrink-0",
     "data-cy": "apply-theme-button",
     disabled: isApplyingTheme,
@@ -7399,8 +7437,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,
@@ -7411,6 +7447,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.shallow),
+    setThemeState = _useThemeStore.setThemeState,
+    previewingTheme = _useThemeStore.previewingTheme;
   var _useState = React.useState(""),
     _useState2 = _slicedToArray$3(_useState, 2),
     searchQuery = _useState2[0],
@@ -7425,6 +7469,9 @@ var Themes = function Themes(_ref) {
       onSuccess: function onSuccess(_ref2) {
         var theme = _ref2.theme;
         setTheme(theme);
+        setThemeState({
+          previewingTheme: theme
+        });
         setThemeBeingApplied({});
       }
     }),
@@ -7438,8 +7485,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) {
@@ -7460,7 +7508,7 @@ var Themes = function Themes(_ref) {
   if (isLoading || isCurrentThemeLoading) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex h-full w-full items-center justify-center"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null));
+    }, /*#__PURE__*/React__default["default"].createElement(Spinner__default["default"], null));
   }
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-themes-sidebar__scroll"
@@ -7472,10 +7520,10 @@ var Themes = function Themes(_ref) {
     className: "mb-4 mt-1 px-6",
     placeholder: t("neetoThemes.common.searchThemes"),
     onSearch: setSearchQuery
-  }), ramda.isEmpty(filteredThemes) && ramda.isEmpty(filteredDefaultThemes) && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }), ramda.isEmpty(filteredThemes) && ramda.isEmpty(filteredDefaultThemes) && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "text-center",
     style: "body2"
-  }, t("neetoThemes.common.noResultsFound")), neetoCist.isNotEmpty(filteredDefaultThemes) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, t("neetoThemes.common.noResultsFound")), neetoCist.isNotEmpty(filteredDefaultThemes) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "my-4 px-4 uppercase lg:px-5 xl:px-6",
     "data-cy": "system-themes-header",
     style: "h6",
@@ -7488,7 +7536,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,
@@ -7496,7 +7544,7 @@ var Themes = function Themes(_ref) {
     });
   })))), neetoCist.isNotEmpty(filteredThemes) && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "mb-6 space-y-3"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "my-4 px-6 uppercase",
     "data-cy": "custom-themes-header",
     style: "h6",
@@ -7505,7 +7553,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__default["default"].createElement(Card$1, {
       isPreviewing: isPreviewing,
       onApplyTheme: onApplyTheme,
@@ -7535,7 +7583,7 @@ var TitleBar = function TitleBar(_ref) {
       className: "neeto-themes-sidebar__header px-4"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex items-center justify-start space-x-2"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
       "data-cy": "customize-themes-back-button",
       icon: neetoIcons.LeftArrow,
       iconPosition: "left",
@@ -7545,7 +7593,7 @@ var TitleBar = function TitleBar(_ref) {
         position: "top"
       },
       onClick: handleBackPress
-    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    }), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       "data-cy": "themes-header",
       lineHeight: "normal",
       style: "h3",
@@ -7556,14 +7604,14 @@ var TitleBar = function TitleBar(_ref) {
     className: "neeto-themes-sidebar__header px-4 lg:px-5 xl:px-6"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center justify-between space-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     "data-cy": "themes-header",
     lineHeight: "normal",
     style: "h3",
     weight: "semibold"
   }, t("neetoThemes.build.leftSideBar.headerTabs.themes")), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "self-end"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     "data-cy": "customize-themes-add-theme-button",
     icon: neetoIcons.Plus,
     iconPosition: "left",
@@ -7576,7 +7624,7 @@ var TitleBar = function TitleBar(_ref) {
   }))));
 };
 
-var MemoizedAlert = /*#__PURE__*/React.memo(neetoui.Alert);
+var MemoizedAlert = /*#__PURE__*/React.memo(Alert__default["default"]);
 var Sidebar = function Sidebar() {
   var _themeToEdit$current, _themeToEdit$current2, _themeToDelete$curren2, _themeToDelete$curren3;
   var _useState = React.useState(DESIGN_SCREENS.THEMES),
@@ -7589,12 +7637,8 @@ var Sidebar = function Sidebar() {
     setIsDeleteAlertOpen = _useState4[1];
   var _useState5 = React.useState(null),
     _useState6 = _slicedToArray$3(_useState5, 2),
-    previewingTheme = _useState6[0],
-    setPreviewingTheme = _useState6[1];
-  var _useState7 = React.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"],
@@ -7641,6 +7685,9 @@ var Sidebar = function Sidebar() {
   };
   var handleBackPress = function handleBackPress() {
     setTheme(currentTheme);
+    setThemeState({
+      previewingTheme: currentTheme
+    });
     setCurrentScreen(DESIGN_SCREENS.THEMES);
     themeToEdit.current = null;
   };
@@ -7656,7 +7703,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;
   };
@@ -7686,9 +7735,11 @@ var Sidebar = function Sidebar() {
     setTheme(currentTheme);
   }, [currentTheme, entityId]);
   React.useEffect(function () {
+    if (neetoCist.isNotPresent(currentTheme)) return;
     setThemeState({
       currentTheme: currentTheme,
-      isCurrentThemeLoading: isCurrentThemeLoading
+      isCurrentThemeLoading: isCurrentThemeLoading,
+      previewingTheme: currentTheme
     });
   }, [currentTheme, isCurrentThemeLoading]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -7706,8 +7757,6 @@ var Sidebar = function Sidebar() {
     didScrollActiveThemeIntoView: didScrollActiveThemeIntoView,
     highlightTheme: highlightTheme,
     isCurrentThemeLoading: isCurrentThemeLoading,
-    previewingTheme: previewingTheme,
-    setPreviewingTheme: setPreviewingTheme,
     themeToHighlight: themeToHighlight,
     themes: themes,
     isLoading: isLoading || isFetchingConfig,
@@ -7759,7 +7808,7 @@ var NeetoThemes = function NeetoThemes(_ref) {
     className: "neeto-themes-preview__wrapper"
   }, isCurrentThemeLoading ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "m-auto flex h-full w-full items-center justify-center"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null)) : children));
+  }, /*#__PURE__*/React__default["default"].createElement(Spinner__default["default"], null)) : children));
 };
 var index = reactUtils.withTitle(NeetoThemes, i18next.t("neetoThemes.common.design"));