@bigbinary/neeto-themes-frontend 2.0.8 → 2.0.10

package/README.md

@@ -1,7 +1,6 @@
 # neeto-themes-nano
 
-The `neeto-themes-nano` acts as the source of truth for the new nano's structure,
-configs, data etc.
+The `neeto-themes-nano` allows us to build and use themes within neeto applications. This nano exports `@bigbinary/neeto-themes-frontend` NPM package and `neeto-themes-engine` Rails engine.
 
 ## Contents
 
@@ -51,25 +50,71 @@ configs, data etc.
    bundle exec rails db:migrate
    ```
 
-#### Usage
+5. Add the following line to `models/organization.rb` file.
 
-1. Replace NeetoThemesNano with your project name
+    ```ruby
+    has_many :themes, class_name: "NeetoThemesEngine::Theme", as: :owner
+    ```
+6. Configure model to add below association to attach theme.
 
-   Create a `script.rb` file in the project root and paste the script from the
-   following file.
+    ```ruby
+    has_one :theme_entity, as: :themeable, class_name: "NeetoThemesEngine::ThemeEntity", dependent: :destroy
+    has_one :theme, through: :theme_entity, class_name: "NeetoThemesEngine::Theme"
+    ```
 
-   [Replace project name script](./docs/engine/replace-project-name-script.md)
+### Usage
 
-2. Run the file using the following command:
+1. **Create an engine initializer**
 
-   ```shell
-      ruby script.rb
+   Create a file named `neeto_themes_engine.rb` in the `config/initializers` folder.
+
+2. **Customize theme schema**
+
+   The engine supports customizing theme schemas based on the needs of the host application. This schema will be used in the frontend to render the theme properties. Eg:
+
+   ```ruby
+    NeetoThemesEngine.theme_properties_schema = [
+      { kind: "color", key: "primary_color", default_value: "#2D36D4" },
+      { kind: "color", key: "secondary_color", default_value: "#ECF4FF" },
+    ]
    ```
 
-Notes ⚠️
+    Each object in the array should have the following keys:
+    - `key`: The unique identifier for the theme property.
+
+    - `kind`: The kind of the theme property.
+
+    Optional keys that can be included:
+
+    - `default_value`: Sets a default value when creating a new theme.
+
+    - `hidden`: This boolean prop helps to hide the property from the UI but allows to use it as CSS variable.
+
+    - `depends_on`: Provides a dependency on other properties. If a key is provided, it will check for its value and only appear in the UI if the dependent property is present.
+
+3. **Provide a css variable prefix**
+
+    This value will be used to prefix all CSS variables. Eg:
+
+    ```ruby
+      NeetoThemesEngine.css_variable_prefix = "neeto-cal"
+    ```
+    variable generated for the theme property `primary_color` will be `--neeto-cal-primary-color`.
+
+4. **Provide the entities to which the theme property is attached**
 
-- Don't commit this file.
-- Project name should be given in PascalCase.
+    This value will be used to determine the entity to which the theme property is attached. We can provide multiple entities. Eg:
+
+    ```ruby
+      NeetoThemesEngine.valid_themeable_types = ["Meeting", "Booking"]
+    ```
+5. **Provide a default theme name** (Optional)
+
+    This provided value will be used to identify the default theme. If not provided, the default theme will be named "Plain blue".
+
+    ```ruby
+      NeetoThemesEngine.default_theme_name = "My theme"
+    ```
 
 ### Frontend package
 
@@ -84,20 +129,45 @@ Notes ⚠️
 ### Instructions for development
 Check the [Frontend package development guide](https://neeto-engineering.neetokb.com/p/a-d34cb4b0) for step-by-step instructions to develop the frontend package.
 
-#### Usage
+### Usage
+
+#### Components
 
-1. Import `WelcomeScreen` component from "@bigbinary/neeto-themes-frontend"
+1. Import the `NeetoThemesBuilder` component from `@bigbinary/neeto-themes-frontend`:
 
    ```javascript
    import React from "react";
+   import { NeetoThemesBuilder } from "@bigbinary/neeto-themes-frontend";
+
+   const App = () => (
+     <NeetoThemesBuilder
+       entityId={meeting?.id}
+       entityType="Meeting"
+       thumbnail={Thumbnail}
+     >
+       <Preview />
+     </NeetoThemesBuilder>
+   );
 
-   import { WelcomeScreen } from "@bigbinary/neeto-themes-frontend";
+   export default App;
 
-   const App = () => <WelcomeScreen />;
+#### hooks
 
-   export default App;
+1. Import `useThemeUtils` hook from "@bigbinary/neeto-themes-frontend"
+
+   ```javascript
+   import { useThemeUtils } from "@bigbinary/neeto-themes-frontend";
+
+   const { setTheme,previewingTheme, currentTheme } = useThemeUtils();
    ```
 
+  - `setTheme`: This method is used to set the theme for the entity.
+
+  - `previewingTheme`: This object contains the currently previewing theme.
+
+  - `currentTheme`: This object contains the current theme which is applied to the entity.
+
+
 ## Instructions for Publishing
 
 Consult the

package/dist/index.cjs.js

@@ -982,7 +982,9 @@ var Properties = function Properties(_ref) {
     var index = neetoCist.findIndexBy({
       key: name
     }, values.properties);
-    if (index !== -1) setFieldValue("properties[".concat(index, "].value"), value);
+    if (index !== -1 && values.properties[index].value !== value) {
+      setFieldValue("properties[".concat(index, "].value"), value);
+    }
     setVariable(neetoCist.snakeToCamelCase(name), variableValue !== null && variableValue !== void 0 ? variableValue : value);
   };
   var handleOverlayChange = function handleOverlayChange(key, value) {
@@ -1148,7 +1150,8 @@ var Customize = function Customize(_ref) {
     onCreateTheme = _ref.onCreateTheme,
     onApplyTheme = _ref.onApplyTheme,
     isApplyingTheme = _ref.isApplyingTheme,
-    onPropertiesChange = _ref.onPropertiesChange;
+    onPropertiesChange = _ref.onPropertiesChange,
+    onUpdateThemeSuccess = _ref.onUpdateThemeSuccess;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useState = react.useState({}),
@@ -1194,9 +1197,10 @@ var Customize = function Customize(_ref) {
     }
     return updateTheme(themeToSave, {
       onSuccess: function onSuccess() {
-        return resetForm({
+        resetForm({
           values: values
         });
+        onUpdateThemeSuccess === null || onUpdateThemeSuccess === void 0 || onUpdateThemeSuccess(values);
       }
     });
   };
@@ -1532,11 +1536,13 @@ var Card = function Card(_ref) {
           },
           menuItems: [{
             key: "edit",
+            "data-cy": "edit-theme-menu-item",
             label: t("neetoThemes.common.edit"),
             isVisible: neetoCist.isPresent(onEditTheme),
             onClick: handleEditTheme
           }, {
             key: "clone",
+            "data-cy": "clone-theme-menu-item",
             label: t("neetoThemes.build.leftSideBar.themes.themeOptions.clone"),
             onClick: handleCloneTheme
           }, {
@@ -1767,7 +1773,8 @@ var Sidebar = function Sidebar(_ref) {
   var _themeToEdit$current, _themeToEdit$current2, _themeToDelete$curren2, _themeToDelete$curren3, _themeToDelete$curren4;
   var thumbnail = _ref.thumbnail,
     onPropertiesChange = _ref.onPropertiesChange,
-    onApplyThemeSuccess = _ref.onApplyThemeSuccess;
+    onApplyThemeSuccess = _ref.onApplyThemeSuccess,
+    onUpdateThemeSuccess = _ref.onUpdateThemeSuccess;
   var _useState = react.useState(DESIGN_SCREENS.THEMES),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
     currentScreen = _useState2[0],
@@ -1834,7 +1841,7 @@ var Sidebar = function Sidebar(_ref) {
         });
         setThemeBeingApplied({});
         setCurrentScreen(DESIGN_SCREENS.THEMES);
-        onApplyThemeSuccess === null || onApplyThemeSuccess === void 0 || onApplyThemeSuccess();
+        onApplyThemeSuccess === null || onApplyThemeSuccess === void 0 || onApplyThemeSuccess(theme);
       }
     }),
     applyTheme = _useApplyTheme.mutate,
@@ -1930,6 +1937,7 @@ var Sidebar = function Sidebar(_ref) {
       onApplyTheme: onApplyTheme,
       onCreateTheme: onCreateTheme,
       onPropertiesChange: onPropertiesChange,
+      onUpdateThemeSuccess: onUpdateThemeSuccess,
       theme: themeToEdit.current,
       themeId: (_themeToEdit$current2 = themeToEdit.current) === null || _themeToEdit$current2 === void 0 ? void 0 : _themeToEdit$current2.id
     }), /*#__PURE__*/jsxRuntime.jsx(MemoizedAlert, {
@@ -1959,7 +1967,9 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
     _ref$isTemplateThemes = _ref.isTemplateThemesEnabled,
     isTemplateThemesEnabled = _ref$isTemplateThemes === void 0 ? false : _ref$isTemplateThemes,
     _ref$onApplyThemeSucc = _ref.onApplyThemeSuccess,
-    onApplyThemeSuccess = _ref$onApplyThemeSucc === void 0 ? neetoCist.noop : _ref$onApplyThemeSucc;
+    onApplyThemeSuccess = _ref$onApplyThemeSucc === void 0 ? neetoCist.noop : _ref$onApplyThemeSucc,
+    _ref$onUpdateThemeSuc = _ref.onUpdateThemeSuccess,
+    onUpdateThemeSuccess = _ref$onUpdateThemeSuc === void 0 ? neetoCist.noop : _ref$onUpdateThemeSuc;
   var _useThemeStore = useThemeStore(function (store) {
       return {
         setThemeState: store["setThemeState"]
@@ -2008,6 +2018,7 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
     children: [/*#__PURE__*/jsxRuntime.jsx(Sidebar, {
       onApplyThemeSuccess: onApplyThemeSuccess,
       onPropertiesChange: onPropertiesChange,
+      onUpdateThemeSuccess: onUpdateThemeSuccess,
       thumbnail: thumbnail
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "neeto-themes-preview__wrapper",