@bigbinary/neeto-themes-frontend 1.2.9 → 1.2.10

package/dist/index.cjs.js

@@ -15,12 +15,12 @@ var reactI18next = require('react-i18next');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var Toastr = require('@bigbinary/neetoui/Toastr');
-var reactQuery = require('react-query');
+var reactQuery = require('@tanstack/react-query');
 var axios = require('axios');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var ramda = require('ramda');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var neetoIcons = require('@bigbinary/neeto-icons');
+var Close = require('@bigbinary/neeto-icons/Close');
 var Button = require('@bigbinary/neetoui/Button');
 var Popover = require('@bigbinary/neetoui/Popover');
 var Typography = require('@bigbinary/neetoui/Typography');
@@ -31,6 +31,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var neetoImageUploaderFrontend = require('@bigbinary/neeto-image-uploader-frontend');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var Select = require('@bigbinary/neetoui/Select');
+var CenterAlign = require('@bigbinary/neeto-icons/CenterAlign');
+var LeftAlign = require('@bigbinary/neeto-icons/LeftAlign');
 var ColorPicker = require('@bigbinary/neetoui/ColorPicker');
 var antd = require('antd');
 var classnames = require('classnames');
@@ -39,6 +41,8 @@ var Switch = require('@bigbinary/neetoui/Switch');
 var Input = require('@bigbinary/neetoui/formik/Input');
 var Search = require('@bigbinary/neeto-molecules/Search');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
+var LeftArrow = require('@bigbinary/neeto-icons/LeftArrow');
+var Plus = require('@bigbinary/neeto-icons/Plus');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -69,12 +73,15 @@ var Toastr__default = /*#__PURE__*/_interopDefaultLegacy(Toastr);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var Close__default = /*#__PURE__*/_interopDefaultLegacy(Close);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Popover__default = /*#__PURE__*/_interopDefaultLegacy(Popover);
 var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
 var Form__default = /*#__PURE__*/_interopDefaultLegacy(Form);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
+var CenterAlign__default = /*#__PURE__*/_interopDefaultLegacy(CenterAlign);
+var LeftAlign__default = /*#__PURE__*/_interopDefaultLegacy(LeftAlign);
 var ColorPicker__default = /*#__PURE__*/_interopDefaultLegacy(ColorPicker);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var HelpPopover__default = /*#__PURE__*/_interopDefaultLegacy(HelpPopover);
@@ -82,6 +89,8 @@ var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
 var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
 var Search__default = /*#__PURE__*/_interopDefaultLegacy(Search);
 var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
+var LeftArrow__default = /*#__PURE__*/_interopDefaultLegacy(LeftArrow);
+var Plus__default = /*#__PURE__*/_interopDefaultLegacy(Plus);
 
 /** @type {import("neetocommons/react-utils").ZustandStoreHook} */
 var useConfigStore = zustand.create(reactUtils.withImmutableActions(function (set) {
@@ -190,9 +199,11 @@ var QUERY_KEYS = {
 };
 
 var useShowThemeEntity = function useShowThemeEntity(entityId) {
-  return reactQuery.useQuery([QUERY_KEYS.THEME_ENTITY_DETAILS, entityId], function () {
-    return entitiesApi.show(entityId);
-  }, {
+  return reactQuery.useQuery({
+    queryKey: [QUERY_KEYS.THEME_ENTITY_DETAILS, entityId],
+    queryFn: function queryFn() {
+      return entitiesApi.show(entityId);
+    },
     enabled: !!entityId
   });
 };
@@ -251,8 +262,11 @@ var useListThemes = function useListThemes(entityId) {
     }, shallow.shallow),
     isTemplateThemesEnabled = _useConfigStore.isTemplateThemesEnabled;
   var queryKey = isTemplateThemesEnabled ? [QUERY_KEYS.THEMES_LIST, entityId] : [QUERY_KEYS.THEMES_LIST];
-  return reactQuery.useQuery(queryKey, function () {
-    return themesApi.list(entityId);
+  return reactQuery.useQuery({
+    queryKey: queryKey,
+    queryFn: function queryFn() {
+      return themesApi.list(entityId);
+    }
   });
 };
 var useCreateTheme = function useCreateTheme() {
@@ -267,12 +281,12 @@ var useUpdateTheme = function useUpdateTheme(themeId) {
       payload: payload
     });
   }, {
-    keysToInvalidate: [QUERY_KEYS.THEMES_LIST, QUERY_KEYS.THEME_ENTITY_DETAILS, [QUERY_KEYS.THEME_DETAILS, themeId]]
+    keysToInvalidate: [[QUERY_KEYS.THEMES_LIST], [QUERY_KEYS.THEME_ENTITY_DETAILS], [QUERY_KEYS.THEME_DETAILS, themeId]]
   });
 };
 var useDeleteTheme = function useDeleteTheme() {
   return reactUtils.useMutationWithInvalidation(themesApi.destroy, {
-    keysToInvalidate: [QUERY_KEYS.THEMES_LIST, QUERY_KEYS.THEME_ENTITY_DETAILS]
+    keysToInvalidate: [[QUERY_KEYS.THEMES_LIST], [QUERY_KEYS.THEME_ENTITY_DETAILS]]
   });
 };
 var useCloneTheme = function useCloneTheme() {
@@ -283,7 +297,7 @@ var useCloneTheme = function useCloneTheme() {
 var useApplyTheme = function useApplyTheme(_ref) {
   var onSuccess = _ref.onSuccess;
   return reactUtils.useMutationWithInvalidation(themesApi.apply, {
-    keysToInvalidate: [QUERY_KEYS.THEMES_LIST, QUERY_KEYS.THEME_ENTITY_DETAILS],
+    keysToInvalidate: [[QUERY_KEYS.THEMES_LIST], [QUERY_KEYS.THEME_ENTITY_DETAILS]],
     onSuccess: onSuccess
   });
 };
@@ -327,10 +341,10 @@ var schemasApi = {
   list: list
 };
 
-var useListSchema = function useListSchema(_ref) {
-  var onSuccess = _ref.onSuccess;
-  return reactQuery.useQuery(QUERY_KEYS.SCHEMA_DETAILS, schemasApi.list, {
-    onSuccess: onSuccess
+var useListSchema = function useListSchema() {
+  return reactQuery.useQuery({
+    queryKey: [QUERY_KEYS.SCHEMA_DETAILS],
+    queryFn: schemasApi.list
   });
 };
 
@@ -344,28 +358,23 @@ var useThemeUtils = function useThemeUtils() {
     }, shallow.shallow),
     previewingTheme = _useThemeStore.previewingTheme,
     currentTheme = _useThemeStore.currentTheme;
-  var _useListSchema = useListSchema({
-      onSuccess: function onSuccess(_ref) {
-        var _ref$schema = _ref.schema,
-          themePropertiesSchema = _ref$schema === void 0 ? [] : _ref$schema,
-          _ref$variableNamesMap = _ref.variableNamesMap,
-          variableNamesMap = _ref$variableNamesMap === void 0 ? {} : _ref$variableNamesMap,
-          _ref$defaultThemeName = _ref.defaultThemeName,
-          defaultThemeName = _ref$defaultThemeName === void 0 ? "" : _ref$defaultThemeName;
-        return setConfigState({
-          themePropertiesSchema: themePropertiesSchema,
-          variableNamesMap: variableNamesMap,
-          defaultThemeName: defaultThemeName
-        });
-      }
-    }),
+  var _useListSchema = useListSchema(),
     isFetchingSchema = _useListSchema.isLoading,
-    _useListSchema$data = _useListSchema.data,
-    _useListSchema$data2 = _useListSchema$data === void 0 ? {} : _useListSchema$data,
-    _useListSchema$data2$ = _useListSchema$data2.schema,
-    themePropertiesSchema = _useListSchema$data2$ === void 0 ? [] : _useListSchema$data2$,
-    _useListSchema$data2$2 = _useListSchema$data2.variableNamesMap,
-    variableNamesMap = _useListSchema$data2$2 === void 0 ? {} : _useListSchema$data2$2;
+    data = _useListSchema.data;
+  var _ref = data || {},
+    _ref$schema = _ref.schema,
+    themePropertiesSchema = _ref$schema === void 0 ? [] : _ref$schema,
+    _ref$variableNamesMap = _ref.variableNamesMap,
+    variableNamesMap = _ref$variableNamesMap === void 0 ? {} : _ref$variableNamesMap;
+  react.useEffect(function () {
+    if (data) {
+      setConfigState({
+        themePropertiesSchema: data === null || data === void 0 ? void 0 : data.schema,
+        variableNamesMap: data === null || data === void 0 ? void 0 : data.variableNamesMap,
+        defaultThemeName: data === null || data === void 0 ? void 0 : data.defaultThemeName
+      });
+    }
+  }, [data]);
   react.useEffect(function () {
     return setConfigState({
       isFetchingSchema: isFetchingSchema
@@ -763,7 +772,7 @@ var AlignmentBlock = function AlignmentBlock(_ref) {
           className: "flex items-center gap-3",
           children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
             "data-cy": "alignment-left",
-            icon: neetoIcons.LeftAlign,
+            icon: LeftAlign__default["default"],
             size: "large",
             style: value === "left" ? "primary" : "text",
             tooltipProps: {
@@ -775,7 +784,7 @@ var AlignmentBlock = function AlignmentBlock(_ref) {
             }
           }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
             "data-cy": "alignment-center",
-            icon: neetoIcons.CenterAlign,
+            icon: CenterAlign__default["default"],
             size: "large",
             style: value === "center" ? "primary" : "text",
             tooltipProps: {
@@ -1135,10 +1144,10 @@ var Customize = function Customize(_ref) {
   var submitBtnRef = react.useRef(null);
   var _useCreateTheme = useCreateTheme(),
     createTheme = _useCreateTheme.mutate,
-    isCreating = _useCreateTheme.isLoading;
+    isCreating = _useCreateTheme.isPending;
   var _useUpdateTheme = useUpdateTheme(themeId),
     updateTheme = _useUpdateTheme.mutate,
-    isUpdating = _useUpdateTheme.isLoading;
+    isUpdating = _useUpdateTheme.isPending;
   var isSubmitting = isCreating || isUpdating;
   var onSubmit = function onSubmit(values, _ref2) {
     var resetForm = _ref2.resetForm;
@@ -1216,7 +1225,7 @@ var Customize = function Customize(_ref) {
             className: "flex flex-col items-start gap-2",
             children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
               className: "absolute right-1 top-1 z-0",
-              icon: neetoIcons.Close,
+              icon: Close__default["default"],
               size: "small",
               style: "text",
               onClick: function onClick() {
@@ -1677,7 +1686,7 @@ var TitleBar = function TitleBar(_ref) {
         className: "flex items-center justify-start space-x-2",
         children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
           "data-cy": "customize-themes-back-button",
-          icon: neetoIcons.LeftArrow,
+          icon: LeftArrow__default["default"],
           iconPosition: "left",
           style: "text",
           tooltipProps: {
@@ -1711,7 +1720,7 @@ var TitleBar = function TitleBar(_ref) {
         className: "self-end",
         children: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
           "data-cy": "customize-themes-add-theme-button",
-          icon: neetoIcons.Plus,
+          icon: Plus__default["default"],
           iconPosition: "left",
           style: "text",
           tooltipProps: {
@@ -1785,7 +1794,7 @@ var Sidebar = function Sidebar(_ref) {
     isCurrentThemeLoading = _useShowThemeEntity.isLoading;
   var _useDeleteTheme = useDeleteTheme(),
     deleteTheme = _useDeleteTheme.mutate,
-    isDeleting = _useDeleteTheme.isLoading;
+    isDeleting = _useDeleteTheme.isPending;
   var _useApplyTheme = useApplyTheme({
       onSuccess: function onSuccess(_ref2) {
         var theme = _ref2.theme;