@bigbinary/neeto-themes-frontend 3.1.13 → 3.1.15

package/README.md

@@ -105,8 +105,8 @@ and `neeto-themes-engine` Rails engine.
    - `parent_class`: This key needs to be added for custom css feature to work
      properly. See more on [custom css](#custom-css) feature.
 
-   - `use_default_image_size`: Used to apply defaultImageSize prop
-     passed to ImageUploader component.
+   - `use_default_image_size`: Used to apply defaultImageSize prop passed to
+     ImageUploader component.
 
 3. **Provide a css variable prefix**
 
@@ -197,17 +197,19 @@ for step-by-step instructions to develop the frontend package.
 ### Custom CSS
 
 `neeto-themes-nano` will inject custom css into your application as part of a
-theme. It requires the initializer to be set with the additional property
+theme. You can provide `enabledFeatures={{ customCSS: false }}` in
+`NeetoThemesBuilder` to manually disable the CustomCSS feature. This feature
+requires the initializer to be set with the additional property
 `{ kind: "custom_css", key: "custom_css", default_value: "", parent_class: "neeto-form-eui" }`.
 The `parent_class` key will be used as a parent to inject styles and for CSS
 nesting. This ensures that styles are not injected on pages where you do not
 want it and also ensures that style rules targeting elements outside this class
-will not be applied. Please ensure that the value provided to `parent_class` is
-present in your application as a wrapper CSS class. For example:
-`neeto-form-eui` in neetoForm is present in all external pages where theme needs
-to be applied. It also provides a code editor with syntax highlighting which
-depends on [Monaco editor](https://github.com/suren-atoyan/monaco-react) as a
-peer dependency. Please install it in the host application for proper working.
+will not be applied. Please ensure that the value provided to`parent_class`is
+present in your application as a wrapper CSS class. For example:`neeto-form-eui`
+in neetoForm is present in all external pages where theme needs to be applied. .
+It also provides a code editor with syntax highlighting which depends on
+[Monaco editor](https://github.com/suren-atoyan/monaco-react) as a peer
+dependency. Please install it in the host application for proper working.
 
 ## Instructions for Publishing
 

package/dist/NeetoThemesBuilder.js

@@ -1,13 +1,13 @@
 import { shallow } from 'zustand/shallow';
 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 { hyphenate, isPresent, findBy, findIndexBy, isNot, filterBy, snakeToCamelCase, isNotPresent, toLabelAndValue, humanize, isNotEmpty, noop } from '@bigbinary/neeto-cist';
+import { useMutationWithInvalidation, useBreakpoints, PageTitle } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Spinner from '@bigbinary/neetoui/Spinner';
 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-Bxlleq-V.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, P as POSITION_OPTIONS, O as OVERLAY_OPACITY_SLIDER_MARKS, H as HUNDRED, F as FONT_OPTIONS, T as THEME_VALIDATION_SCHEMA } from './useThemeUtils-DdkCd9iz.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-Do1vR9LD.js';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classnames from 'classnames';
 import { joinHyphenCase, buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
@@ -28,14 +28,14 @@ import BlockNavigation from '@bigbinary/neetoui/formik/BlockNavigation';
 import { isEmpty, negate, isNotNil } from 'ramda';
 import { useFormikContext, Field } from 'formik';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import Down from '@bigbinary/neeto-icons/Down';
+import Right from '@bigbinary/neeto-icons/Right';
+import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
 import { t as t$1 } from 'i18next';
 import CenterAlign from '@bigbinary/neeto-icons/CenterAlign';
 import LeftAlign from '@bigbinary/neeto-icons/LeftAlign';
 import ColorPicker from '@bigbinary/neetoui/ColorPicker';
 import Select from '@bigbinary/neetoui/Select';
 import { Slider } from 'antd';
-import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import ImageUploader from '@bigbinary/neeto-image-uploader-frontend/ImageUploader';
@@ -265,7 +265,8 @@ var Card$2 = function Card(_ref) {
     title = _ref$title === void 0 ? "" : _ref$title,
     children = _ref.children,
     name = _ref.name,
-    className = _ref.className;
+    className = _ref.className,
+    helpPopoverProps = _ref.helpPopoverProps;
   var _useConfigStore = useConfigStore(function (store) {
       return {
         accordionOpenState: store["accordionOpenState"],
@@ -286,18 +287,18 @@ var Card$2 = function Card(_ref) {
       onClick: function onClick() {
         return setAccordionOpenState(_objectSpread$4(_objectSpread$4({}, accordionOpenState), {}, _defineProperty({}, name, !accordionOpenState[name])));
       },
-      children: [/*#__PURE__*/jsx(Typography, {
-        className: "min-w-0 flex-grow text-left",
+      children: [/*#__PURE__*/jsxs(Typography, {
+        className: "flex min-w-0 flex-grow items-center gap-2 text-left",
         component: "span",
         "data-cy": "theme-properties",
         lineHeight: "normal",
         style: "h4",
         weight: "semibold",
-        children: title
-      }), /*#__PURE__*/jsx(Down, {
+        children: [title, isPresent(helpPopoverProps) && /*#__PURE__*/jsx(HelpPopover, _objectSpread$4({}, helpPopoverProps))]
+      }), /*#__PURE__*/jsx(Right, {
         size: 20,
         className: classnames("transition-all duration-300", {
-          "rotate-180": accordionOpenState[name]
+          "rotate-90": accordionOpenState[name]
         })
       })]
     }), children && /*#__PURE__*/jsx("div", {
@@ -350,11 +351,15 @@ var CustomCSS = function CustomCSS(_ref) {
   var _useConfigStore = useConfigStore(function (store) {
       return {
         themePropertiesSchema: store["themePropertiesSchema"],
-        accordionOpenState: store["accordionOpenState"]
+        accordionOpenState: store["accordionOpenState"],
+        helpPopoverProps: store["helpPopoverProps"]
       };
     }, shallow),
     themePropertiesSchema = _useConfigStore.themePropertiesSchema,
-    accordionOpenState = _useConfigStore.accordionOpenState;
+    accordionOpenState = _useConfigStore.accordionOpenState,
+    helpPopoverProps = _useConfigStore.helpPopoverProps;
+  var _helpPopoverProps$cus = helpPopoverProps.customCss,
+    customCssHelpPopoverProps = _helpPopoverProps$cus === void 0 ? {} : _helpPopoverProps$cus;
   var customCSS = findBy({
     kind: "custom_css"
   }, values.properties);
@@ -387,6 +392,7 @@ var CustomCSS = function CustomCSS(_ref) {
     className: "neeto-themes-sidebar__custom-css-wrapper",
     id: "css-editor",
     children: /*#__PURE__*/jsx(Card$2, {
+      helpPopoverProps: customCssHelpPopoverProps,
       name: "customcss",
       title: isCustomCssScreen ? "" : t("neetoThemes.build.leftSideBar.themes.customCSS"),
       children: /*#__PURE__*/jsxs("div", {
@@ -1076,12 +1082,19 @@ var Images = function Images(_ref) {
     useDefaultImageSize = _ref.useDefaultImageSize;
   var _useFormikContext = useFormikContext(),
     values = _useFormikContext.values;
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        helpPopoverProps: store["helpPopoverProps"]
+      };
+    }, shallow),
+    helpPopoverProps = _useConfigStore.helpPopoverProps;
   var key = snakeToCamelCase(attribute);
   var title = buildLabel(key, "image");
   var imageData = values[key];
   return /*#__PURE__*/jsxs(Card$2, {
     className: className,
     title: title,
+    helpPopoverProps: helpPopoverProps[key],
     name: key,
     children: [/*#__PURE__*/jsx(ImageBlock, {
       attribute: attribute,
@@ -1096,11 +1109,21 @@ var Images = function Images(_ref) {
   });
 };
 
-var ThemeMeta = withT(function (_ref) {
-  var t = _ref.t,
-    className = _ref.className;
+var ThemeMeta = function ThemeMeta(_ref) {
+  var className = _ref.className;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        helpPopoverProps: store["helpPopoverProps"]
+      };
+    }, shallow),
+    helpPopoverProps = _useConfigStore.helpPopoverProps;
+  var _helpPopoverProps$nam = helpPopoverProps.name,
+    nameHelpPopoverProps = _helpPopoverProps$nam === void 0 ? {} : _helpPopoverProps$nam;
   return /*#__PURE__*/jsx(Card$2, {
     className: className,
+    helpPopoverProps: nameHelpPopoverProps,
     name: "name",
     title: t("neetoThemes.common.name"),
     children: /*#__PURE__*/jsx(Input, {
@@ -1109,7 +1132,7 @@ var ThemeMeta = withT(function (_ref) {
       name: "name"
     })
   });
-});
+};
 
 function ownKeys(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -1134,12 +1157,16 @@ var Customize = function Customize(_ref) {
       return {
         themePropertiesSchema: store["themePropertiesSchema"],
         entityType: store["entityType"],
-        isFetchingSchema: store["isFetchingSchema"]
+        isFetchingSchema: store["isFetchingSchema"],
+        helpPopoverProps: store["helpPopoverProps"],
+        enabledFeatures: store["enabledFeatures"]
       };
     }, shallow),
     themePropertiesSchema = _useConfigStore.themePropertiesSchema,
     entityType = _useConfigStore.entityType,
-    isFetchingSchema = _useConfigStore.isFetchingSchema;
+    isFetchingSchema = _useConfigStore.isFetchingSchema,
+    helpPopoverProps = _useConfigStore.helpPopoverProps,
+    enabledFeatures = _useConfigStore.enabledFeatures;
   var _useParams = useParams(),
     themeId = _useParams.themeId;
   var _useThemeStore = useThemeStore(function (store) {
@@ -1165,6 +1192,8 @@ var Customize = function Customize(_ref) {
   var isLoading = isFetchingSchema || isLoadingTheme;
   var isThemeGlobalTheme = themeId && (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.id) === themeId;
   var isCurrentThemeAndGlobalThemeSame = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.id);
+  var _helpPopoverProps$sty = helpPopoverProps.style,
+    styleHelpPopoverProps = _helpPopoverProps$sty === void 0 ? {} : _helpPopoverProps$sty;
   var isEditingCurrentlyAppliedTheme = themeId === (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id);
   var submitBtnRef = useRef(null);
   var _useCreateTheme = useCreateTheme(),
@@ -1247,6 +1276,7 @@ var Customize = function Customize(_ref) {
             className: classnames({
               hidden: isCustomCssScreen
             }),
+            helpPopoverProps: styleHelpPopoverProps,
             name: "style",
             title: t("neetoThemes.common.style"),
             children: /*#__PURE__*/jsx(Properties, {
@@ -1267,7 +1297,7 @@ var Customize = function Customize(_ref) {
               }),
               key: key
             });
-          }), /*#__PURE__*/jsx(CustomCSS, {
+          }), enabledFeatures.customCSS && /*#__PURE__*/jsx(CustomCSS, {
             currentScreen: currentScreen,
             onEditCSSClick: onEditCSSClick
           }), /*#__PURE__*/jsxs("div", {
@@ -2142,7 +2172,13 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
     _ref$onUpdateThemeSuc = _ref.onUpdateThemeSuccess,
     onUpdateThemeSuccess = _ref$onUpdateThemeSuc === void 0 ? noop : _ref$onUpdateThemeSuc,
     _ref$onApplyGlobalThe = _ref.onApplyGlobalThemeSuccess,
-    onApplyGlobalThemeSuccess = _ref$onApplyGlobalThe === void 0 ? noop : _ref$onApplyGlobalThe;
+    onApplyGlobalThemeSuccess = _ref$onApplyGlobalThe === void 0 ? noop : _ref$onApplyGlobalThe,
+    _ref$helpPopoverProps = _ref.helpPopoverProps,
+    helpPopoverProps = _ref$helpPopoverProps === void 0 ? {} : _ref$helpPopoverProps,
+    _ref$enabledFeatures = _ref.enabledFeatures,
+    enabledFeatures = _ref$enabledFeatures === void 0 ? {
+      customCSS: true
+    } : _ref$enabledFeatures;
   var _useThemeStore = useThemeStore(function (store) {
       return {
         setThemeState: store["setThemeState"]
@@ -2172,7 +2208,9 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
       entityType: entityType,
       entityId: entityId,
       isTemplateThemesEnabled: isTemplateThemesEnabled,
-      helpDocUrl: helpDocUrl
+      helpDocUrl: helpDocUrl,
+      helpPopoverProps: helpPopoverProps,
+      enabledFeatures: enabledFeatures
     });
   }, []);
   useEffect(function () {