@bigbinary/neeto-themes-frontend 3.1.9 → 3.1.10

package/dist/NeetoThemesBuilder.js

@@ -1,5 +1,5 @@
 import { shallow } from 'zustand/shallow';
-import { useState, useEffect, createElement, useRef, memo, useCallback } from 'react';
+import { Suspense, lazy, useEffect, createElement, useState, useRef, memo, useCallback } from 'react';
 import { hyphenate, findBy, findIndexBy, isPresent, isNot, filterBy, snakeToCamelCase, isNotPresent, toLabelAndValue, humanize, isNotEmpty, noop } from '@bigbinary/neeto-cist';
 import { useMutationWithInvalidation, withT, useBreakpoints, PageTitle } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Spinner from '@bigbinary/neetoui/Spinner';
@@ -7,7 +7,7 @@ import { useTranslation, Trans } from 'react-i18next';
 import { B as BASE_URL, b as scrollElementIntoView, c as setCustomCSS, g as getDominantColorFromUrl, i as isEditThemeRoute, d as isFunction, e as isNewThemeRoute } from './index-i8lxlWVz.js';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import axios from 'axios';
-import { Q as QUERY_KEYS, a as useConfigStore, b as useThemeStore, u as useThemeUtils } from './useThemeUtils-CMF6rI88.js';
+import { Q as QUERY_KEYS, a as useConfigStore, b as useThemeStore, u as useThemeUtils, P as POSITION_OPTIONS, O as OVERLAY_OPACITY_SLIDER_MARKS, H as HUNDRED, F as FONT_OPTIONS, T as THEME_VALIDATION_SCHEMA } from './useThemeUtils-fDozYz5F.js';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classnames from 'classnames';
 import { joinHyphenCase, buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
@@ -26,11 +26,9 @@ import Tooltip from '@bigbinary/neetoui/Tooltip';
 import Form from '@bigbinary/neetoui/formik/Form';
 import BlockNavigation from '@bigbinary/neetoui/formik/BlockNavigation';
 import { isEmpty, negate, isNotNil } from 'ramda';
-import * as yup from 'yup';
-import Editor from '@monaco-editor/react';
 import { useFormikContext, Field } from 'formik';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import Down from '@bigbinary/neeto-icons/Down';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { t as t$1 } from 'i18next';
 import CenterAlign from '@bigbinary/neeto-icons/CenterAlign';
 import LeftAlign from '@bigbinary/neeto-icons/LeftAlign';
@@ -49,6 +47,7 @@ import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import LeftArrow from '@bigbinary/neeto-icons/LeftArrow';
 import Plus from '@bigbinary/neeto-icons/Plus';
 import 'zustand';
+import 'yup';
 
 var show$2 = function show(entityId) {
   return axios.get("".concat(BASE_URL, "/api/v1/entities/").concat(entityId));
@@ -223,94 +222,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.object().shape({
-  name: yup.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",
@@ -318,6 +229,35 @@ var DESIGN_SCREENS = {
 };
 var ONE_MEGABYTE = 1;
 
+var MonacoEditor = /*#__PURE__*/lazy(function () {
+  return import('@monaco-editor/react');
+});
+var Editor = function Editor(_ref) {
+  var value = _ref.value,
+    isCustomCssScreen = _ref.isCustomCssScreen,
+    onChange = _ref.onChange;
+  return /*#__PURE__*/jsx(Suspense, {
+    fallback: /*#__PURE__*/jsx(Spinner, {}),
+    children: /*#__PURE__*/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) {
@@ -326,21 +266,25 @@ var Card$2 = function Card(_ref) {
     children = _ref.children,
     name = _ref.name,
     className = _ref.className;
-  var _useState = useState(ACCORDIAN_OPEN_STATE),
-    _useState2 = _slicedToArray(_useState, 2),
-    accordianOpenState = _useState2[0],
-    setAccordianOpenState = _useState2[1];
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        accordionOpenState: store["accordionOpenState"],
+        setAccordionOpenState: store["setAccordionOpenState"]
+      };
+    }, shallow),
+    accordionOpenState = _useConfigStore.accordionOpenState,
+    setAccordionOpenState = _useConfigStore.setAccordionOpenState;
   return /*#__PURE__*/jsxs("div", {
     "data-cy": "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": !accordianOpenState[name],
-      "pb-3": accordianOpenState[name]
+      "pb-2": !accordionOpenState[name],
+      "pb-3": accordionOpenState[name]
     }),
     children: [title && /*#__PURE__*/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__*/jsx(Typography, {
         className: "min-w-0 flex-grow text-left",
@@ -353,13 +297,13 @@ var Card$2 = function Card(_ref) {
       }), /*#__PURE__*/jsx(Down, {
         size: 20,
         className: classnames("transition-all duration-300", {
-          "rotate-180": accordianOpenState[name]
+          "rotate-180": accordionOpenState[name]
         })
       })]
     }), children && /*#__PURE__*/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
     })]
@@ -405,10 +349,12 @@ var CustomCSS = function CustomCSS(_ref) {
     setFieldValue = _useFormikContext.setFieldValue;
   var _useConfigStore = useConfigStore(function (store) {
       return {
-        themePropertiesSchema: store["themePropertiesSchema"]
+        themePropertiesSchema: store["themePropertiesSchema"],
+        accordionOpenState: store["accordionOpenState"]
       };
     }, shallow),
-    themePropertiesSchema = _useConfigStore.themePropertiesSchema;
+    themePropertiesSchema = _useConfigStore.themePropertiesSchema,
+    accordionOpenState = _useConfigStore.accordionOpenState;
   var customCSS = findBy({
     kind: "custom_css"
   }, values.properties);
@@ -453,21 +399,9 @@ var CustomCSS = function CustomCSS(_ref) {
             label: isCustomCssScreen ? t("neetoThemes.buttons.minimizeEditor") : t("neetoThemes.buttons.expandEditor"),
             onClick: handleEditorToggle
           })
-        }), /*#__PURE__*/jsx(Editor, {
-          language: "css",
-          theme: "vs-dark",
+        }), accordionOpenState.customcss && /*#__PURE__*/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
         })]
       })
@@ -1148,7 +1082,7 @@ var Images = function Images(_ref) {
   return /*#__PURE__*/jsxs(Card$2, {
     className: className,
     title: title,
-    name: "images",
+    name: key,
     children: [/*#__PURE__*/jsx(ImageBlock, {
       attribute: attribute,
       defaultImageSize: defaultImageSize,