@bigbinary/neeto-themes-frontend 2.1.1 → 2.1.3

package/README.md

@@ -1,6 +1,8 @@
 # neeto-themes-nano
 
-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.
+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
 
@@ -52,25 +54,29 @@ The `neeto-themes-nano` allows us to build and use themes within neeto applicati
 
 5. Add the following line to `models/organization.rb` file.
 
-    ```ruby
-    has_many :themes, class_name: "NeetoThemesEngine::Theme", as: :owner
-    ```
+   ```ruby
+   has_many :themes, class_name: "NeetoThemesEngine::Theme", as: :owner
+   ```
+
 6. Configure model to add below association to attach theme.
 
-    ```ruby
-    has_one :theme_entity, as: :themeable, class_name: "NeetoThemesEngine::ThemeEntity", dependent: :destroy
-    has_one :theme, through: :theme_entity, class_name: "NeetoThemesEngine::Theme"
-    ```
+   ```ruby
+   has_one :theme_entity, as: :themeable, class_name: "NeetoThemesEngine::ThemeEntity", dependent: :destroy
+   has_one :theme, through: :theme_entity, class_name: "NeetoThemesEngine::Theme"
+   ```
 
 ### Usage
 
 1. **Create an engine initializer**
 
-   Create a file named `neeto_themes_engine.rb` in the `config/initializers` folder.
+   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:
+   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 = [
@@ -79,42 +85,54 @@ The `neeto-themes-nano` allows us to build and use themes within neeto applicati
     ]
    ```
 
-    Each object in the array should have the following keys:
-    - `key`: The unique identifier for the theme property.
+   Each object in the array should have the following keys:
 
-    - `kind`: The kind of the theme property.
+   - `key`: The unique identifier for the theme property.
 
-    Optional keys that can be included:
+   - `kind`: The kind of the theme property.
 
-    - `default_value`: Sets a default value when creating a new theme.
+   Optional keys that can be included:
 
-    - `hidden`: This boolean prop helps to hide the property from the UI but allows to use it as CSS variable.
+   - `default_value`: Sets a default value when creating a new theme.
 
-    - `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.
+   - `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.
+
+   - `parent_class`: This key needs to be added for custom css feature to work
+     properly. See more on [custom css](#custom-css) feature.
 
 3. **Provide a css variable prefix**
 
-    This value will be used to prefix all CSS variables. Eg:
+   This value will be used to prefix all CSS variables. Eg:
+
+   ```ruby
+     NeetoThemesEngine.css_variable_prefix = "neeto-cal"
+   ```
 
-    ```ruby
-      NeetoThemesEngine.css_variable_prefix = "neeto-cal"
-    ```
-    variable generated for the theme property `primary_color` will be `--neeto-cal-primary-color`.
+   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**
 
-    This value will be used to determine the entity to which the theme property is attached. We can provide multiple entities. Eg:
+   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"]
+   ```
 
-    ```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".
+   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"
-    ```
+   ```ruby
+     NeetoThemesEngine.default_theme_name = "My theme"
+   ```
 
 ### Frontend package
 
@@ -127,13 +145,17 @@ The `neeto-themes-nano` allows us to build and use themes within neeto applicati
    ```
 
 ### 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.
+
+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
 
 #### Components
 
-1. Import the `NeetoThemesBuilder` component from `@bigbinary/neeto-themes-frontend`:
+1. Import the `NeetoThemesBuilder` component from
+   `@bigbinary/neeto-themes-frontend`:
 
    ```javascript
    import React from "react";
@@ -150,6 +172,7 @@ Check the [Frontend package development guide](https://neeto-engineering.neetokb
    );
 
    export default App;
+   ```
 
 #### hooks
 
@@ -158,15 +181,30 @@ Check the [Frontend package development guide](https://neeto-engineering.neetokb
    ```javascript
    import { useThemeUtils } from "@bigbinary/neeto-themes-frontend";
 
-   const { setTheme,previewingTheme, currentTheme } = useThemeUtils();
+   const { setTheme, previewingTheme, currentTheme } = useThemeUtils();
    ```
 
-  - `setTheme`: This method is used to set the theme for the entity.
+- `setTheme`: This method is used to set the theme for the entity.
+
+- `previewingTheme`: This object contains the currently previewing theme.
 
-  - `previewingTheme`: This object contains the currently previewing theme.
+- `currentTheme`: This object contains the current theme which is applied to the
+  entity.
 
-  - `currentTheme`: This object contains the current theme which is applied to the entity.
+### 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
+`{ 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.
 
 ## Instructions for Publishing
 

package/app/javascript/src/translations/en.json

@@ -11,7 +11,7 @@
       "recording_other": "Recordings"
     },
     "common": {
-      "design": "Design",
+      "theme": "Theme",
       "preview": "Preview",
       "save": "Save",
       "done": "Done",
@@ -33,9 +33,12 @@
       "saveChanges": "Save changes",
       "addNewTheme": "Add new theme",
       "backToThemes": "Back to themes",
+      "backToEdit": "Back to edit",
       "save": "Save",
       "reset": "Reset",
-      "applyThisTheme": "Apply this theme"
+      "applyThisTheme": "Apply this theme",
+      "expandEditor": "Expand editor",
+      "minimizeEditor": "Minimize editor"
     },
     "alerts": {
       "title": {
@@ -72,6 +75,7 @@
             "title": "New theme",
             "newThemeName": "My theme"
           },
+          "customCSS": "Custom CSS",
           "themeCloned": "Theme has been cloned successfully.",
           "themeCloneFailed": "Failed to clone theme, please try after some time."
         }