@zohodesk/library-platform 1.1.3-exp.3 → 1.1.3-exp.4

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/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();

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

@@ -122,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;
@@ -148,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;
   }
 
@@ -169,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/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/table-list/frameworks/hooks/useDropIndicator.js

@@ -0,0 +1,8 @@
+import { useState } from 'react';
+export function useDropIndicator() {
+  const [dropIndicator, setDropIndicator] = useState({
+    index: null,
+    position: ''
+  });
+  return [dropIndicator, setDropIndicator];
+}

package/es/library/dot/components/table-list/frameworks/hooks/useRowData.js

@@ -0,0 +1,15 @@
+import { useState, useMemo, useRef } from 'react';
+export function useRowData(rows) {
+  const rowRef = useRef(null);
+  useMemo(() => {
+    rowRef.current = rows;
+  }, [rows]);
+  const [, forceUpdate] = useState(rows);
+
+  function setRowData(rows) {
+    rowRef.current = rows;
+    forceUpdate(rows);
+  }
+
+  return [rowRef.current, setRowData];
+}

package/es/library/dot/components/table-list/frameworks/hooks/useTableRowReorder.js

@@ -0,0 +1,105 @@
+import { useCallback } from 'react';
+import TableListEventConstants from "../../../../../../cc/table-list/Constants";
+import { useRowData } from "./useRowData";
+import { useDropIndicator } from "./useDropIndicator";
+import { reorderArray, setTableInteractionClass, adjustHelperElementPosition, getDropIndicator } from "../utils/reOrder"; // @ts-ignore
+
+import style from "./../ui/css/TableList.module.css";
+export function useTableRowReorder(_ref) {
+  let {
+    rows,
+    TableRef,
+    dispatch
+  } = _ref;
+  const [rowData, setRowData] = useRowData(rows);
+  const [dropIndicator, setDropIndicator] = useDropIndicator();
+  const {
+    TABLE_LIST_ROW_DRAG_START,
+    TABLE_LIST_ROW_DRAG_END
+  } = TableListEventConstants;
+
+  const handleSortStart = _ref2 => {
+    let {
+      index
+    } = _ref2;
+    setTableInteractionClass(TableRef, style.preventTextSelection, true);
+    setTableInteractionClass(TableRef, style.preventPointerEvents, true);
+    adjustHelperElementPosition(TableRef, getHelperClass());
+    dispatch({
+      type: TABLE_LIST_ROW_DRAG_START,
+      payload: {
+        index
+      }
+    });
+  };
+
+  const handleSortEnd = _ref3 => {
+    let {
+      oldIndex,
+      newIndex
+    } = _ref3;
+    setTableInteractionClass(TableRef, style.preventTextSelection, false);
+    setTableInteractionClass(TableRef, style.preventPointerEvents, false);
+    let arr = reorderArray(rowData, oldIndex, newIndex);
+    setRowData(arr);
+    setDropIndicator({
+      index: null,
+      position: ''
+    });
+    dispatch({
+      type: TABLE_LIST_ROW_DRAG_END,
+      payload: {
+        oldIndex,
+        newIndex
+      }
+    });
+  };
+
+  const handleSortOver = _ref4 => {
+    let {
+      index,
+      oldIndex,
+      newIndex
+    } = _ref4;
+    const dropIndicatorData = getDropIndicator({
+      index,
+      oldIndex,
+      newIndex,
+      rowsLength: rows.length
+    });
+    setDropIndicator({
+      index: dropIndicatorData.index,
+      position: dropIndicatorData.position
+    });
+  };
+
+  const getHelperDimensions = useCallback(_ref5 => {
+    let {
+      node
+    } = _ref5;
+    return {
+      height: node.offsetHeight,
+      width: TableRef.current.offsetWidth
+    };
+  }, [TableRef]);
+  const getHelperContainer = useCallback(() => {
+    return TableRef.current;
+  }, [TableRef]);
+
+  const getHelperClass = () => {
+    return style.dragging;
+  };
+
+  return {
+    rowData,
+    dropIndicator,
+    handleSortStart,
+    handleSortEnd,
+    handleSortOver,
+    getHelperDimensions,
+    setRowData,
+    setDropIndicator,
+    getHelperContainer,
+    getHelperClass
+  };
+}