@zohodesk/library-platform 1.1.3 → 1.1.6

package/es/library/behaviours/keyboard-controls/applications/usecases/DestructUsecase.js

@@ -8,8 +8,11 @@ class DestructUsecase extends AbstractUseCase {
       keyboardHandler
     } = this.dependencies;
     const keyboardControls = repository.getKeyboardControls();
-    keyboardHandler.destruct(host);
-    presenter.updateKeyboardControls(keyboardControls.toObject());
+
+    if (keyboardControls !== null) {
+      keyboardHandler.destruct(host);
+      presenter.updateKeyboardControls(keyboardControls.toObject());
+    }
   }
 
 }

package/es/library/behaviours/list-selection/frameworks/ActionHandlerFactory.js

@@ -10,6 +10,7 @@ import UpdateController from "../adapters/controllers/UpdateController";
 import DestructController from "../adapters/controllers/DestructController";
 import SelectController from "../adapters/controllers/SelectController";
 import DeselectController from "../adapters/controllers/DeselectController";
+import LifeCycleEvents from "../../../../cc/component/LifeCycleEventsEnum";
 
 class ActionHandlerFactory {
   static create() {
@@ -28,9 +29,9 @@ class ActionHandlerFactory {
 
   static createHandlers(service) {
     return {
-      ['MOUNT']: new InitializeController(service).handle,
-      ['UPDATE_PROPERTIES']: new UpdateController(service).handle,
-      ['UNMOUNT']: new DestructController(service).handle,
+      [LifeCycleEvents.MOUNT]: new InitializeController(service).handle,
+      [LifeCycleEvents.UPDATE_PROPERTIES]: new UpdateController(service).handle,
+      [LifeCycleEvents.UN_MOUNT]: new DestructController(service).handle,
       [LIST_SELECTION_SELECT_ITEM]: new SelectController(service).handle,
       [LIST_SELECTION_DESELECT_ITEM]: new DeselectController(service).handle,
       [LIST_SELECTION_TOGGLE_ITEMS]: new SelectionController(service).handle,

package/es/library/custom-component/adapters/gateways/event-manager/EventManager.js

@@ -3,11 +3,27 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 // @ts-ignore
 if (__DEVELOPMENT__) {
   globalThis.enableEventLogging = false;
+  globalThis.enableEventVerbose = false;
 }
 
+var ErrorCode = /*#__PURE__*/function (ErrorCode) {
+  ErrorCode["InvalidData"] = "Invalid data";
+  ErrorCode["InvalidSchema"] = "Invalid Schema";
+  return ErrorCode;
+}(ErrorCode || {});
+
 class EventManager {
-  constructor() {
+  constructor(name, jsonValidator) {
+    let events = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+    this.name = name;
+    this.jsonValidator = jsonValidator;
+    this.events = events;
+
     _defineProperty(this, "_element", void 0);
+
+    _defineProperty(this, "alreadyWarnedAboutEventPayloadSchemaNotFound", {});
+
+    this.alreadyWarnedAboutEventPayloadSchemaNotFound = {};
   }
 
   setElement(element) {
@@ -56,12 +72,96 @@ class EventManager {
     });
   }
 
+  verifySchema(data, schema) {
+    let error = null;
+
+    try {
+      const {
+        isValid,
+        errors
+      } = this.jsonValidator(schema, data);
+
+      if (!isValid) {
+        error = {
+          code: ErrorCode.InvalidData,
+          errors
+        };
+      }
+    } catch (e) {
+      error = {
+        code: ErrorCode.InvalidSchema,
+        error: e
+      };
+    }
+
+    return error;
+  }
+
+  printEventPayloadSchemaNotFountError(event) {
+    const {
+      type
+    } = event; // @ts-ignore
+
+    if (!this.alreadyWarnedAboutEventPayloadSchemaNotFound[type] && __DEVELOPMENT__ && global.enableEventVerbose) {
+      console.warn(`${this.name}'s Event type "${type}" not found in event metadata.`);
+    }
+
+    this.alreadyWarnedAboutEventPayloadSchemaNotFound[type] = true;
+  }
+
+  printEventPayloadSchemaInvalidError(eventName, error) {
+    let dataName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '(root)';
+    const {
+      msg,
+      styles: nameStyles
+    } = this.eventNameConsoleStyle(eventName);
+    console.group(`${msg}%c's ${dataName} Validation Errors:`, ...nameStyles, 'color: initial; font-weight: initial');
+
+    if (error.code === ErrorCode.InvalidSchema) {
+      console.error(`%cInvalid Schema:`, 'color: #FF6F61; font-weight: bold;', error.error);
+    } else if (error.code === ErrorCode.InvalidData) {
+      error.errors.forEach((_ref, i) => {
+        let {
+          dataPath,
+          message
+        } = _ref;
+        console.error(`%c${i + 1}. %c${dataName + dataPath}%c → ${message}`, 'color: initial;', 'color: #FF6F61; font-weight: bold;', 'color: #FFA500;');
+      });
+    }
+
+    console.groupEnd(); // }
+  }
+
+  verifyEventPayload(event) {
+    const {
+      type,
+      payload
+    } = event;
+    const eventMeta = this.events.find(event => event.type === type);
+    const payloadMeta = eventMeta ? eventMeta.payload : null;
+
+    if (this.jsonValidator && payloadMeta) {
+      const error = this.verifySchema(payload, payloadMeta);
+      error && this.printEventPayloadSchemaInvalidError(event.type, error, 'payload');
+      return error ? false : true;
+    } else {
+      this.printEventPayloadSchemaNotFountError(event);
+      return true;
+    }
+  }
+
   dispatchEvent(event) {
     let {
       payload,
       metaData,
       type
     } = event;
+    const isValid = this.verifyEventPayload(event);
+
+    if (!isValid) {
+      return;
+    }
+
     this._element && this._element.dispatchEvent(new CustomEvent(type, {
       bubbles: true,
       detail: {
@@ -71,14 +171,26 @@ class EventManager {
     }));
   }
 
+  eventNameConsoleStyle(type) {
+    const index = type.indexOf('#');
+    return {
+      msg: '%c' + type.slice(0, index) + '%c' + type.slice(index),
+      styles: ['color: #55c355;font-weight: bold', 'color: #5a9de9;font-weight: bold']
+    };
+  }
+
   log(type, payload, metaData) {
     // @ts-ignore
     if (__DEVELOPMENT__) {
       if (globalThis.enableEventLogging && type) {
-        const index = type.indexOf('#');
-        console.log('%cEvent %c' + type.slice(0, index) + '%c' + type.slice(index), 'font-weight: bold', 'color: #FF6F61;font-weight: bold', 'color: #FFA500;font-weight: bold', {
+        const {
+          msg,
+          styles: nameStyles
+        } = this.eventNameConsoleStyle(type);
+        console.log(`%cEvent ${msg}`, 'font-weight: bold', ...nameStyles, {
           payload,
-          metaData
+          metaData,
+          host: this._element
         });
       }
     }

package/es/library/custom-component/applications/entities-factory/BehavioursFactory.js

@@ -1,31 +1,18 @@
+import LifeCycleEvents from "../../../../cc/component/LifeCycleEventsEnum";
 import Behaviour from "../../domain/entities/Behaviour";
 import EventHandlersFactory from "./EventHandlersFactory";
 import PropertiesFactory from "./PropertiesFactory";
-/* eslint-disable max-lines-per-function, @zohodesk/architecturerules/no-returnStatement-rule */
 
 class BehavioursFactory {
   static create(input) {
-    /* eslint-disable-next-line @zohodesk/architecturerules/no-defaultProps-rule */
-    let behaviours = input.behaviours || [];
+    const behaviours = input.behaviours ? input.behaviours : [];
     return behaviours.map(behaviour => {
       // DEPRECATED: Remove while refactoring actionHandlers
       if (behaviour.actionHandlers) {
         behaviour.eventHandlers = behaviour.actionHandlers;
       }
 
-      const {
-        eventHandlers
-      } = behaviour;
-      let newEventHandlers = Object.keys(eventHandlers).reduce((res, next) => {
-        let key = next;
-
-        if (['MOUNT', 'UN_MOUNT', 'UPDATE_PROPERTIES'].includes(next)) {
-          key = input.name + '#' + next;
-        }
-
-        res[key] = eventHandlers[next];
-        return res;
-      }, {});
+      const newEventHandlers = BehavioursFactory.createNamedEventHandlers(behaviour.eventHandlers, input);
       return new Behaviour({
         name: behaviour.name,
         eventHandlers: EventHandlersFactory(newEventHandlers),
@@ -38,6 +25,21 @@ class BehavioursFactory {
     });
   }
 
+  static createNamedEventHandlers(eventHandlers, input) {
+    return Object.keys(eventHandlers).reduce((res, key) => {
+      // if (['MOUNT', 'UN_MOUNT', 'UPDATE_PROPERTIES'].includes(eventName)) {
+      // if ('MOUNT', LifeCycleEvents.UN_MOUNT, LifeCycleEvents.UPDATE_PROPERTIES, LifeCycleEvents.STATE_UPDATED].includes(eventName)) {
+      let eventName = key;
+
+      if (LifeCycleEvents[key]) {
+        eventName = `${input.name}#${key}`;
+      }
+
+      res[eventName] = eventHandlers[key];
+      return res;
+    }, {});
+  }
+
 }
 
 export default BehavioursFactory;

package/es/library/custom-component/applications/interfaces/gateways/ISchemaValidator.js

@@ -0,0 +1 @@
+export {};

package/es/library/custom-component/applications/usecases/InitializeUseCase.js

@@ -6,12 +6,13 @@ class InitializeUseCase extends AbstractUseCase {
     let {
       presenter,
       jsonValidator,
-      repository
+      repository,
+      schemaValidator
     } = this.dependencies;
     let component = createComponent(input, input.helpers);
 
     try {
-      component.init(jsonValidator, input.newProps);
+      component.init(jsonValidator, input.newProps, schemaValidator);
       let state = component.getState();
       presenter.render(state);
     } catch (e) {

package/es/library/custom-component/applications/usecases/UpdatePropertyUseCase.js

@@ -6,11 +6,12 @@ class UpdatePropertyUseCase extends AbstractUseCase {
       repository,
       jsonValidator,
       eventManager,
-      presenter
+      presenter,
+      schemaValidator
     } = this.dependencies;
     let component = repository.getComponent();
     let properties = component.getProperties();
-    let isUpdated = component.updateProperties(jsonValidator, newProps);
+    let isUpdated = component.updateProperties(jsonValidator, newProps, schemaValidator);
 
     if (isUpdated) {
       let updatedProperties = component.getProperties();
@@ -21,6 +22,9 @@ class UpdatePropertyUseCase extends AbstractUseCase {
         previousProperties: properties
       });
       eventManager.dispatch(updatePropertyAction);
+      eventManager.dispatch(component.getStateUpdatedAction({
+        state
+      }));
     }
   }
 

package/es/library/custom-component/applications/usecases/UpdateStateUseCase.js

@@ -4,7 +4,8 @@ class UpdateStateUseCase extends AbstractUseCase {
   execute(newState) {
     let {
       repository,
-      presenter
+      presenter,
+      eventManager
     } = this.dependencies;
     let component = repository.getComponent(); // let preState=component.getState();
     // console.log(`preState ${component.getName()}`,preState)
@@ -13,6 +14,9 @@ class UpdateStateUseCase extends AbstractUseCase {
     let state = component.getState(); // console.log(`newState ${component.getName()}`,state)
 
     presenter.render(state);
+    eventManager.dispatch(component.getStateUpdatedAction({
+      state
+    }));
   }
 
 }

package/es/library/custom-component/domain/entities/Component.js

@@ -64,6 +64,10 @@ export default class Component {
     return this._lifeCycleAction.getUpdatePropertiesAction(payload);
   }
 
+  getStateUpdatedAction(payload) {
+    return this._lifeCycleAction.getStateUpdatedAction(payload);
+  }
+
   getState() {
     let state = this._tranformer(this.mergeStateAndProps());
 
@@ -118,7 +122,15 @@ export default class Component {
     });
   }
 
-  updateProperties(jsonValidator, newProps) {
+  updateProperties(jsonValidator, newProps, schemaValidator) {
+    const entries = Object.fromEntries(this._properties.data.entries());
+    let property = entries === undefined ? {} : entries;
+    let propertyValue = newProps === undefined ? {} : newProps;
+
+    let isBhvrErrorVisible = this._properties.validateRequiredProperty(schemaValidator, this._behavioursProperties, propertyValue);
+
+    let isCompErrorVisible = this._properties.validateRequiredProperty(schemaValidator, property, propertyValue);
+
     let isChanged = false;
     Object.keys(newProps).forEach(key => {
       let property = null;
@@ -144,8 +156,13 @@ export default class Component {
         throw new Error(`props '${key}' not exist `);
       }
     });
+
+    if (isBhvrErrorVisible && isCompErrorVisible) {
+      throw "";
+    }
     /* return this._properties.updateAllPropertiesValue(jsonValidator, newProps); */
 
+
     return isChanged;
   }
 
@@ -165,8 +182,8 @@ export default class Component {
     return allBehavioursInitialState;
   }
 
-  init(jsonValidator, newProps) {
-    this.updateProperties(jsonValidator, newProps);
+  init(jsonValidator, newProps, schemaValidator) {
+    this.updateProperties(jsonValidator, newProps, schemaValidator);
 
     const properties = this._properties.getAllPropertiesValue();
 

package/es/library/custom-component/domain/entities/LifeCycleAction.js

@@ -1,23 +1,27 @@
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+import LifeCycleEvents from "../../../../cc/component/LifeCycleEventsEnum";
 export default class LifeCycleAction {
   constructor(name) {
     _defineProperty(this, "mount", void 0);
 
     _defineProperty(this, "unmount", void 0);
 
+    _defineProperty(this, "name", void 0);
+
     _defineProperty(this, "contructUpdatePropertiesAction", void 0);
 
+    this.name = name;
     this.mount = {
-      type: `${name}#MOUNT`
+      type: `${name}#${LifeCycleEvents.MOUNT}`
     };
     this.unmount = {
-      type: `${name}#UN_MOUNT`
+      type: `${name}#${LifeCycleEvents.UN_MOUNT}`
     };
 
     this.contructUpdatePropertiesAction = payload => {
       return {
-        type: `${name}#UPDATE_PROPERTIES`,
+        type: `${name}#${LifeCycleEvents.UPDATE_PROPERTIES}`,
         payload
       };
     };
@@ -31,6 +35,13 @@ export default class LifeCycleAction {
     return this.unmount;
   }
 
+  getStateUpdatedAction(payload) {
+    return {
+      type: `${this.name}#${LifeCycleEvents.STATE_UPDATED}`,
+      payload
+    };
+  }
+
   getUpdatePropertiesAction(payload) {
     return this.contructUpdatePropertiesAction(payload);
   }

package/es/library/custom-component/domain/entities/Properties.js

@@ -111,6 +111,24 @@ export default class Properties {
     return this.data.get(key).getTypeMetadata().schema;
   }
 
+  validateRequiredProperty(validator, properties, newProps) {
+    let errorWarn = validator(properties, newProps);
+    let isErrorVisible = false;
+
+    if (errorWarn.warnings && errorWarn.warnings.length > 0) {
+      errorWarn.warnings.forEach(warning => {
+        console.warn(`%c Property Validation Warnings in %c ${this.componentName}%c :\n${warning}`, 'font-weight: initial', 'color: #FF6F61;font-weight: bold', 'color: #FFA500;font-weight: initial');
+      });
+    }
+
+    if (errorWarn.errors && errorWarn.errors.length > 0) {
+      console.error(`%c Property Validation Errors in %c ${this.componentName}%c :\n${errorWarn.errors.join('\n')}`, 'font-weight: initial', 'color: #FF6F61;font-weight: bold', 'color: #FFF;font-weight: initial');
+      isErrorVisible = true;
+    }
+
+    return isErrorVisible;
+  }
+
   validateSingleProperty(validator, onePropKey, onePropValue, optionalSchema) {
     let schema = this.getSchema(onePropKey, optionalSchema); // INFO: Validate the property adheres to its schema
 
@@ -128,7 +146,7 @@ export default class Properties {
         errors,
         schema: schema
       };
-      console.log('Property validation failed', error);
+      console.error('Property validation failed', error);
       throw new Error('Property validation failed');
     }
 

package/es/library/custom-component/frameworks/json-schema-validator/Validator.js

@@ -1,5 +1,7 @@
 import Ajv from 'ajv';
-let jsonValidator = new Ajv();
+let jsonValidator = new Ajv({
+  useDefaults: true
+});
 
 class Validator {
   static validate(schema, value) {
@@ -26,6 +28,39 @@ class Validator {
     };
   }
 
+  static validatePropsAgainstSchema(schemaProps, props) {
+    const warnings = [];
+    const errors = [];
+
+    for (const key in schemaProps) {
+      const schemaDef = schemaProps[key];
+      const isRequired = schemaDef.required === true;
+      const hasDefault = Object.prototype.hasOwnProperty.call(schemaDef, 'defaultValue');
+      const isProvided = Object.prototype.hasOwnProperty.call(props, key); // Handle missing required top-level properties
+
+      if (!isProvided) {
+        if (isRequired) {
+          if (hasDefault) {
+            if (schemaDef.defaultValue === undefined) {
+              errors.push(`Required property '${key}' is missing — default value is undefined.`);
+            } else {
+              warnings.push(`Required property '${key}' is missing. Default value will be used.`);
+            }
+          } else {
+            errors.push(`Required property '${key}' is missing — neither a value nor a default value is present.`);
+          }
+        }
+
+        continue;
+      }
+    }
+
+    return {
+      warnings,
+      errors
+    };
+  }
+
 }
 
 export default Validator;

package/es/library/custom-component/frameworks/ui/CreateCustomComponent.js

@@ -34,6 +34,15 @@ const createCustomComponent = input => {
 
       _defineProperty(this, "helpers", void 0);
 
+      _defineProperty(this, "setRef", element => {
+        const {
+          setElement
+        } = this.eventManager;
+        setElement.bind(this.eventManager)(element);
+        this.eventManager.setElement(element);
+        this.props.getRef && this.props.getRef(element);
+      });
+
       this.state = null;
       let {
         controller,
@@ -48,11 +57,10 @@ const createCustomComponent = input => {
             this.setState(() => state);
           }
         }
-      });
+      }, input);
       this.presenter = presenter;
       this.controller = controller;
       this.eventManager = eventManager;
-      eventManager.name = input.name;
       const {
         updateState,
         updateProperties,
@@ -109,21 +117,25 @@ const createCustomComponent = input => {
           throw this.state.error;
         }
 
-        const {
-          setElement
-        } = this.eventManager;
         console.log(this.state.error);
+        const {
+          FallbackView
+        } = input;
+
+        if (FallbackView) {
+          return /*#__PURE__*/React.createElement(FallbackView, {
+            ref: this.setRef,
+            error: this.state.error
+          });
+        }
+
         return /*#__PURE__*/React.createElement("div", {
-          ref: setElement
+          ref: element => this.setRef(element)
         }, "error");
       } else {
-        const {
-          setElement
-        } = this.eventManager;
         return /*#__PURE__*/React.createElement(View, {
           ref: element => {
-            setElement.bind(this.eventManager)(element);
-            this.props.getRef && this.props.getRef(element);
+            this.setRef(element);
           },
           helpers: this.helpers,
           state: this.state,

package/es/library/custom-component/frameworks/ui/DependencyFactory.js

@@ -6,7 +6,7 @@ import Validator from "../json-schema-validator/Validator";
 import EventManager from "../../adapters/gateways/event-manager/EventManager";
 
 class DependencyFactory {
-  static create(_ref) {
+  static create(_ref, input) {
     let {
       updateState
     } = _ref;
@@ -14,12 +14,13 @@ class DependencyFactory {
     const presenter = new Presenter({
       updateState
     });
-    const eventManager = new EventManager();
+    const eventManager = new EventManager(input.name, Validator.validate, input.events);
     const service = new Service({
       repository,
       presenter,
       eventManager,
-      jsonValidator: Validator.validate
+      jsonValidator: Validator.validate,
+      schemaValidator: Validator.validatePropsAgainstSchema
     });
     const controller = new Controller(service);
     return {

package/es/library/dot/components/action-location/frameworks/ui/ActionComponentMapping.js

@@ -1,10 +1,16 @@
 import ActionIcon from "../../../../legacy-to-new-arch/action-icon/frameworks/ui/ActionIcon";
+import Button from "../../../../legacy-to-new-arch/button/frameworks/ui/Button"; // import ListItem from '@library/dot/legacy-to-new-arch/list-item/frameworks/ui/ListItem';
+
 import TableColumnSort from "../../../../legacy-to-new-arch/table-column-sort/frameworks/ui/TableColumnSort";
 import TableColumnChooser from "../../../../legacy-to-new-arch/table-column-chooser/frameworks/ui/TableColumnChooser";
 import Checkbox from "../../../../legacy-to-new-arch/checkbox/frameworks/ui/Checkbox";
 import TableColumnFilter from "../../../../legacy-to-new-arch/table-column-filter/frameworks/ui/TableColumnFilter";
+import MoreDropdown from "../../../../legacy-to-new-arch/more-dropdown/frameworks/ui/MoreDropdown";
 const ActionComponentMapping = {
   ['ActionIcon']: ActionIcon,
+  ['Button']: Button,
+  // ['ListItem']: ListItem,
+  ['MoreDropdown']: MoreDropdown,
   ['TableColumnSort']: TableColumnSort,
   ['TableColumnChooser']: TableColumnChooser,
   ['TableSelectAll']: Checkbox,

package/es/library/dot/components/action-location/frameworks/ui/EventHandlersFactory.js

@@ -24,7 +24,7 @@ export default class EventHandlersFactory {
     return {
       [ActionLocationConstants.MOUNT]: initializeController.handle,
       [ActionLocationConstants.UPDATE_PROPERTIES]: propertiesChangeController.handle,
-      [ActionLocationConstants.UNMOUNT]: unmountController.handle
+      [ActionLocationConstants.UN_MOUNT]: unmountController.handle
     };
   }
 

package/es/library/dot/components/form/frameworks/ui/EventHandlerFactory.js

@@ -4,12 +4,13 @@ import FormConstants from "../../../../../../cc/form/Constants";
 class EventHandlersFactory {
   static create() {
     return {
+      [SectionConstants.SECTION_FIELD_FOCUSED]: this.handleSectionFieldFocused,
       [SectionConstants.SECTION_FIELD_BLURRED]: this.handleSectionFieldBlurred,
       [SectionConstants.SECTION_FIELD_CHANGED]: this.handleSectionFieldChanged
     };
   }
 
-  static handleSectionFieldBlurred(_ref) {
+  static handleSectionFieldFocused(_ref) {
     let {
       action,
       dispatch
@@ -19,7 +20,7 @@ class EventHandlersFactory {
       fieldName
     } = action.payload;
     dispatch({
-      type: FormConstants.FORM_FIELD_BLURRED,
+      type: FormConstants.FORM_FIELD_FOCUSED,
       payload: {
         sectionId,
         fieldName
@@ -28,11 +29,30 @@ class EventHandlersFactory {
     });
   }
 
-  static handleSectionFieldChanged(_ref2) {
+  static handleSectionFieldBlurred(_ref2) {
     let {
       action,
       dispatch
     } = _ref2;
+    const {
+      id: sectionId,
+      fieldName
+    } = action.payload;
+    dispatch({
+      type: FormConstants.FORM_FIELD_BLURRED,
+      payload: {
+        sectionId,
+        fieldName
+      },
+      metaData: {}
+    });
+  }
+
+  static handleSectionFieldChanged(_ref3) {
+    let {
+      action,
+      dispatch
+    } = _ref3;
     const {
       id: sectionId,
       fieldName,