@bigbinary/neeto-themes-frontend 3.1.8 → 3.1.10

package/dist/cjs/NeetoThemesBuilder.js

@@ -9,7 +9,7 @@ var reactI18next = require('react-i18next');
 var utils = require('../index-BCC98npS.js');
 var reactQuery = require('@tanstack/react-query');
 var axios = require('axios');
-var useThemeUtils = require('../useThemeUtils-B_bPCE4d.js');
+var useThemeUtils = require('../useThemeUtils-7t8QA7GV.js');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var classnames = require('classnames');
 var utils$1 = require('@bigbinary/neeto-commons-frontend/utils');
@@ -28,11 +28,9 @@ var Tooltip = require('@bigbinary/neetoui/Tooltip');
 var Form = require('@bigbinary/neetoui/formik/Form');
 var BlockNavigation = require('@bigbinary/neetoui/formik/BlockNavigation');
 var ramda = require('ramda');
-var yup = require('yup');
-var Editor = require('@monaco-editor/react');
 var formik = require('formik');
-var Down = require('@bigbinary/neeto-icons/Down');
 var jsxRuntime = require('react/jsx-runtime');
+var Down = require('@bigbinary/neeto-icons/Down');
 var i18next = require('i18next');
 var CenterAlign = require('@bigbinary/neeto-icons/CenterAlign');
 var LeftAlign = require('@bigbinary/neeto-icons/LeftAlign');
@@ -51,25 +49,7 @@ var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var LeftArrow = require('@bigbinary/neeto-icons/LeftArrow');
 var Plus = require('@bigbinary/neeto-icons/Plus');
 require('zustand');
-
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var yup__namespace = /*#__PURE__*/_interopNamespaceDefault(yup);
+require('yup');
 
 var show$2 = function show(entityId) {
   return axios.get("".concat(utils.BASE_URL, "/api/v1/entities/").concat(entityId));
@@ -244,94 +224,6 @@ var useShowGlobalTheme = function useShowGlobalTheme(entityType) {
   });
 };
 
-var POSITION_OPTIONS = [{
-  label: "Left",
-  value: "left"
-}, {
-  label: "Right",
-  value: "right"
-}];
-var FONT_OPTIONS = [{
-  label: "System UI",
-  value: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
-}, {
-  label: "Cedarville Cursive",
-  value: "'Cedarville Cursive', cursive"
-}, {
-  label: "Poppins",
-  value: "Poppins, sans-serif"
-}, {
-  label: "Roboto",
-  value: "Roboto, sans-serif"
-}, {
-  label: "Open Sans",
-  value: "Open Sans, sans-serif"
-}, {
-  label: "Montserrat",
-  value: "Montserrat, sans-serif"
-}, {
-  label: "Raleway",
-  value: "Raleway, sans-serif"
-}, {
-  label: "Quicksand",
-  value: "Quicksand, sans-serif"
-}, {
-  label: "Inter",
-  value: "Inter, sans-serif"
-}, {
-  label: "Satoshi",
-  value: "Satoshi, sans-serif"
-}, {
-  label: "Chillax",
-  value: "Chillax, sans-serif"
-}, {
-  label: "Clash Display",
-  value: "Clash Display, sans-serif"
-}, {
-  label: "General Sans",
-  value: "General Sans, sans-serif"
-}, {
-  label: "Cabinet Grotesk",
-  value: "Cabinet Grotesk, sans-serif"
-}, {
-  label: "Lora",
-  value: "Lora, serif"
-}, {
-  label: "Merriweather",
-  value: "Merriweather, serif"
-}, {
-  label: "Boska",
-  value: "Boska, serif"
-}, {
-  label: "Playfair Display",
-  value: "Playfair Display, serif"
-}, {
-  label: "Roboto Slab",
-  value: "Roboto Slab, serif"
-}, {
-  label: "Dancing Script",
-  value: "Dancing Script, cursive"
-}, {
-  label: "Tw Cent",
-  value: "Tw Cen MT, Tahoma, sans-serif"
-}, {
-  label: "Comic Sans",
-  value: "Comic Sans MS, cursive"
-}];
-var THEME_VALIDATION_SCHEMA = yup__namespace.object().shape({
-  name: yup__namespace.string().required("Name is required")
-});
-var OVERLAY_OPACITY_SLIDER_MARKS = {
-  0: " "
-};
-var HUNDRED = 100;
-var ACCORDIAN_OPEN_STATE = {
-  name: true,
-  style: true,
-  images: false,
-  customcss: false
-};
-
 var DESIGN_SCREENS = {
   THEMES: "Themes",
   Customize: "Customize",
@@ -339,6 +231,35 @@ var DESIGN_SCREENS = {
 };
 var ONE_MEGABYTE = 1;
 
+var MonacoEditor = /*#__PURE__*/react.lazy(function () {
+  return import('@monaco-editor/react');
+});
+var Editor = function Editor(_ref) {
+  var value = _ref.value,
+    isCustomCssScreen = _ref.isCustomCssScreen,
+    onChange = _ref.onChange;
+  return /*#__PURE__*/jsxRuntime.jsx(react.Suspense, {
+    fallback: /*#__PURE__*/jsxRuntime.jsx(Spinner, {}),
+    children: /*#__PURE__*/jsxRuntime.jsx(MonacoEditor, {
+      onChange: onChange,
+      value: value,
+      language: "css",
+      theme: "vs-dark",
+      className: classnames({
+        rounded: true,
+        "css-editor-height__expanded": isCustomCssScreen,
+        "css-editor-height__regular": !isCustomCssScreen
+      }),
+      options: {
+        scrollBeyondLastLine: false,
+        minimap: {
+          enabled: false
+        }
+      }
+    })
+  });
+};
+
 function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Card$2 = function Card(_ref) {
@@ -347,21 +268,25 @@ var Card$2 = function Card(_ref) {
     children = _ref.children,
     name = _ref.name,
     className = _ref.className;
-  var _useState = react.useState(ACCORDIAN_OPEN_STATE),
-    _useState2 = _slicedToArray(_useState, 2),
-    accordianOpenState = _useState2[0],
-    setAccordianOpenState = _useState2[1];
+  var _useConfigStore = useThemeUtils.useConfigStore(function (store) {
+      return {
+        accordionOpenState: store["accordionOpenState"],
+        setAccordionOpenState: store["setAccordionOpenState"]
+      };
+    }, shallow.shallow),
+    accordionOpenState = _useConfigStore.accordionOpenState,
+    setAccordionOpenState = _useConfigStore.setAccordionOpenState;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     "data-cy": "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": !accordianOpenState[name],
-      "pb-3": accordianOpenState[name]
+      "pb-2": !accordionOpenState[name],
+      "pb-3": accordionOpenState[name]
     }),
     children: [title && /*#__PURE__*/jsxRuntime.jsxs("button", {
       className: "neeto-themes-nano-section__title flex w-full cursor-pointer items-center justify-between px-1 py-2 focus:outline-none",
       type: "button",
       onClick: function onClick() {
-        return setAccordianOpenState(_objectSpread$4(_objectSpread$4({}, accordianOpenState), {}, _defineProperty({}, name, !accordianOpenState[name])));
+        return setAccordionOpenState(_objectSpread$4(_objectSpread$4({}, accordionOpenState), {}, _defineProperty({}, name, !accordionOpenState[name])));
       },
       children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
         className: "min-w-0 flex-grow text-left",
@@ -374,13 +299,13 @@ var Card$2 = function Card(_ref) {
       }), /*#__PURE__*/jsxRuntime.jsx(Down, {
         size: 20,
         className: classnames("transition-all duration-300", {
-          "rotate-180": accordianOpenState[name]
+          "rotate-180": accordionOpenState[name]
         })
       })]
     }), children && /*#__PURE__*/jsxRuntime.jsx("div", {
       className: classnames("neeto-themes-nano-section__content w-full space-y-3 overflow-hidden px-1 transition-all duration-300", {
-        "neeto-themes-nano-section__content--closed": !accordianOpenState[name],
-        "neeto-themes-nano-section__content--open pb-1": accordianOpenState[name]
+        "neeto-themes-nano-section__content--closed": !accordionOpenState[name],
+        "neeto-themes-nano-section__content--open pb-1": accordionOpenState[name]
       }),
       children: children
     })]
@@ -426,10 +351,12 @@ var CustomCSS = function CustomCSS(_ref) {
     setFieldValue = _useFormikContext.setFieldValue;
   var _useConfigStore = useThemeUtils.useConfigStore(function (store) {
       return {
-        themePropertiesSchema: store["themePropertiesSchema"]
+        themePropertiesSchema: store["themePropertiesSchema"],
+        accordionOpenState: store["accordionOpenState"]
       };
     }, shallow.shallow),
-    themePropertiesSchema = _useConfigStore.themePropertiesSchema;
+    themePropertiesSchema = _useConfigStore.themePropertiesSchema,
+    accordionOpenState = _useConfigStore.accordionOpenState;
   var customCSS = neetoCist.findBy({
     kind: "custom_css"
   }, values.properties);
@@ -474,21 +401,9 @@ var CustomCSS = function CustomCSS(_ref) {
             label: isCustomCssScreen ? t("neetoThemes.buttons.minimizeEditor") : t("neetoThemes.buttons.expandEditor"),
             onClick: handleEditorToggle
           })
-        }), /*#__PURE__*/jsxRuntime.jsx(Editor, {
-          language: "css",
-          theme: "vs-dark",
+        }), accordionOpenState.customcss && /*#__PURE__*/jsxRuntime.jsx(Editor, {
+          isCustomCssScreen: isCustomCssScreen,
           value: customCSS.value,
-          className: classnames({
-            rounded: true,
-            "css-editor-height__expanded": isCustomCssScreen,
-            "css-editor-height__regular": !isCustomCssScreen
-          }),
-          options: {
-            scrollBeyondLastLine: false,
-            minimap: {
-              enabled: false
-            }
-          },
           onChange: handleChange
         })]
       })
@@ -954,10 +869,10 @@ var Properties = function Properties(_ref) {
         case "font_family":
           return /*#__PURE__*/jsxRuntime.jsx(FontPickerBlock, {
             label: buildLabel(key, kind),
-            options: FONT_OPTIONS,
+            options: useThemeUtils.FONT_OPTIONS,
             value: neetoCist.findBy({
               value: value || null
-            }, FONT_OPTIONS),
+            }, useThemeUtils.FONT_OPTIONS),
             onChange: function onChange(_ref4) {
               var value = _ref4.value;
               return handleChange(key, value);
@@ -985,9 +900,9 @@ var Properties = function Properties(_ref) {
         case "overlay_opacity":
           return /*#__PURE__*/jsxRuntime.jsx(SliderBlock, {
             label: buildLabel(key, kind),
-            marks: OVERLAY_OPACITY_SLIDER_MARKS,
-            max: HUNDRED,
-            min: ramda.negate(HUNDRED),
+            marks: useThemeUtils.OVERLAY_OPACITY_SLIDER_MARKS,
+            max: useThemeUtils.HUNDRED,
+            min: ramda.negate(useThemeUtils.HUNDRED),
             value: Number(value) || 0,
             onChange: function onChange(opacity) {
               return handleOverlayChange(key, opacity);
@@ -1004,7 +919,7 @@ var Properties = function Properties(_ref) {
             }, themePropertiesSchema)) === null || _findBy3 === void 0 || (_findBy3 = _findBy3.options) === null || _findBy3 === void 0 ? void 0 : _findBy3.map(neetoCist.toLabelAndValue);
             return /*#__PURE__*/jsxRuntime.jsx(SelectBlock, {
               label: buildLabel(key, kind),
-              options: options || POSITION_OPTIONS,
+              options: options || useThemeUtils.POSITION_OPTIONS,
               placeholder: "left",
               value: neetoCist.toLabelAndValue(value),
               onChange: function onChange(option) {
@@ -1142,7 +1057,7 @@ var ImageBlock = function ImageBlock(_ref) {
         onUploadComplete: handleImageChange
       }), isPositionChangerVisible && /*#__PURE__*/jsxRuntime.jsx(SelectBlock, {
         label: buildLabel("".concat(name, "Position"), "image"),
-        options: options || POSITION_OPTIONS,
+        options: options || useThemeUtils.POSITION_OPTIONS,
         placeholder: t("neetoThemes.common.left"),
         value: neetoCist.toLabelAndValue(((_findBy = neetoCist.findBy({
           key: "".concat(name, "_position")
@@ -1169,7 +1084,7 @@ var Images = function Images(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs(Card$2, {
     className: className,
     title: title,
-    name: "images",
+    name: key,
     children: [/*#__PURE__*/jsxRuntime.jsx(ImageBlock, {
       attribute: attribute,
       defaultImageSize: defaultImageSize,
@@ -1314,7 +1229,7 @@ var Customize = function Customize(_ref) {
         shouldSetAsGlobalTheme: isThemeGlobalTheme,
         entityType: entityType
       }),
-      validationSchema: THEME_VALIDATION_SCHEMA,
+      validationSchema: useThemeUtils.THEME_VALIDATION_SCHEMA,
       enableReinitialize: true,
       onSubmit: onSubmit
     },
@@ -1905,7 +1820,7 @@ var TitleBar = function TitleBar(_ref) {
           lineHeight: "normal",
           style: "h3",
           weight: "semibold",
-          children: [isCustomizeScreen && (utils.isNewThemeRoute() ? t("neetoThemes.build.leftSideBar.themes.createTheme.title") : t("neetoThemes.build.leftSideBar.themes.editTheme.title")), isCustomCssScreen && t("neetoThemes.build.leftSideBar.themes.customCSS")]
+          children: [isCustomizeScreen && !isCustomCssScreen && (utils.isNewThemeRoute() ? t("neetoThemes.build.leftSideBar.themes.createTheme.title") : t("neetoThemes.build.leftSideBar.themes.editTheme.title")), isCustomCssScreen && t("neetoThemes.build.leftSideBar.themes.customCSS")]
         })]
       })
     });