@bigbinary/neeto-themes-frontend 2.0.9 → 2.1.0

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

@@ -601,6 +601,7 @@ var Card$2 = function Card(_ref) {
     children = _ref.children;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "neeto-ui-border-gray-300 neeto-ui-rounded-lg neeto-ui-bg-white space-y-3 border p-4",
+    "data-cy": "theme-".concat(neetoCist.hyphenate(title), "-properties"),
     children: [title && /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex items-center justify-between",
       children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
@@ -982,7 +983,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) {
@@ -1655,6 +1658,7 @@ var Themes = function Themes(_ref) {
           children: t("neetoThemes.build.leftSideBar.themes.systemThemes")
         }), /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "flex flex-col gap-4 px-4 pb-10 lg:px-5 xl:px-6",
+          "data-cy": "system-themes",
           children: filteredDefaultThemes.map(function (theme) {
             return /*#__PURE__*/react.createElement(Card$1, {
               onApplyTheme: onApplyTheme,
@@ -1680,6 +1684,7 @@ var Themes = function Themes(_ref) {
         children: t("neetoThemes.build.leftSideBar.themes.customThemes")
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "flex flex-col gap-4 px-6",
+        "data-cy": "custom-themes",
         children: filteredThemes.map(function (theme) {
           var isActive = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id;
           var isPreviewing = (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id;