@zohodesk/library-platform 1.1.3-exp.2 → 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/useRowData.js

@@ -1,8 +1,15 @@
-import { useState, useEffect } from 'react';
+import { useState, useMemo, useRef } from 'react';
 export function useRowData(rows) {
-  const [rowData, setRowData] = useState(rows);
-  useEffect(() => {
-    setRowData(rows);
+  const rowRef = useRef(null);
+  useMemo(() => {
+    rowRef.current = rows;
   }, [rows]);
-  return [rowData, setRowData];
+  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

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import TableListEventConstants from "../../../../../../cc/table-list/Constants";
 import { useRowData } from "./useRowData";
 import { useDropIndicator } from "./useDropIndicator";
-import { reorderArray, setTableUserSelect, adjustHelperElementPosition, getDropIndicator } from "../utils/reOrder"; // @ts-ignore
+import { reorderArray, setTableInteractionClass, adjustHelperElementPosition, getDropIndicator } from "../utils/reOrder"; // @ts-ignore
 
 import style from "./../ui/css/TableList.module.css";
 export function useTableRowReorder(_ref) {
@@ -22,8 +22,9 @@ export function useTableRowReorder(_ref) {
     let {
       index
     } = _ref2;
-    setTableUserSelect(TableRef, 'none');
-    adjustHelperElementPosition(TableRef, style.dragging);
+    setTableInteractionClass(TableRef, style.preventTextSelection, true);
+    setTableInteractionClass(TableRef, style.preventPointerEvents, true);
+    adjustHelperElementPosition(TableRef, getHelperClass());
     dispatch({
       type: TABLE_LIST_ROW_DRAG_START,
       payload: {
@@ -37,7 +38,8 @@ export function useTableRowReorder(_ref) {
       oldIndex,
       newIndex
     } = _ref3;
-    setTableUserSelect(TableRef, '');
+    setTableInteractionClass(TableRef, style.preventTextSelection, false);
+    setTableInteractionClass(TableRef, style.preventPointerEvents, false);
     let arr = reorderArray(rowData, oldIndex, newIndex);
     setRowData(arr);
     setDropIndicator({
@@ -80,6 +82,14 @@ export function useTableRowReorder(_ref) {
       width: TableRef.current.offsetWidth
     };
   }, [TableRef]);
+  const getHelperContainer = useCallback(() => {
+    return TableRef.current;
+  }, [TableRef]);
+
+  const getHelperClass = () => {
+    return style.dragging;
+  };
+
   return {
     rowData,
     dropIndicator,
@@ -88,6 +98,8 @@ export function useTableRowReorder(_ref) {
     handleSortOver,
     getHelperDimensions,
     setRowData,
-    setDropIndicator
+    setDropIndicator,
+    getHelperContainer,
+    getHelperClass
   };
 }

package/es/library/dot/components/table-list/frameworks/ui/TableListView.js

@@ -9,7 +9,8 @@ import Loading from "./sub-components/Loading";
 import ColumnResizingLine from "./sub-components/ColumnResizingLine";
 import handleScroll from "./handlers/HandleScroll";
 import { useTableRowReorder } from "../hooks/useTableRowReorder";
-import { SortableContainer } from 'react-sortable-hoc'; // @ts-ignore
+import { SortableContainer } from 'react-sortable-hoc';
+import getTableListClassName from "../utils/getTableListClassName"; // @ts-ignore
 
 import style from "./css/TableList.module.css";
 
@@ -25,6 +26,7 @@ function TableListView(_ref2, _ref) {
   const {
     data,
     isLoading,
+    isReOrderLoading,
     resizerState,
     reOrderConfig,
     selectionConfig,
@@ -49,24 +51,26 @@ function TableListView(_ref2, _ref) {
   const isDataEmpty = !hasRows && !isLoading && !isError; // TODO: derive from state.properties
 
   const isKeyboardControlsEnabled = keyboardControlsConfig.isEnabled;
-
-  const getTableRef = ref => {
-    TableRef.current = ref;
-  };
-
+  const isReorderEnabled = reOrderConfig.isEnabled;
+  const isSelectionEnabled = selectionConfig.isEnabled;
+  const className = getTableListClassName({
+    isKeyboardControlsEnabled,
+    isReorderEnabled,
+    isSelectionEnabled
+  });
   return /*#__PURE__*/React.createElement("div", {
-    className: style.wrapper,
+    className: `${style.wrapper} ${style[className]}`,
     ref: _ref
   }, /*#__PURE__*/React.createElement(Table, {
-    ref: getTableRef,
+    ref: TableRef,
     $event_onScroll: e => handleScroll(dispatch, {
       scrollEvent: e
     })
   }, renderHeader({
     headers,
     resizerState,
-    reOrderConfig,
-    selectionConfig,
+    isReorderEnabled,
+    isSelectionEnabled,
     selection,
     isKeyboardControlsEnabled,
     isFlexibleColumns,
@@ -79,13 +83,14 @@ function TableListView(_ref2, _ref) {
     headers,
     rows,
     isFlexibleColumns,
-    reOrderConfig,
-    selectionConfig,
+    isReorderEnabled,
+    isSelectionEnabled,
     isKeyboardControlsEnabled,
     rowCursor,
     hasRowActions,
     rowActionsColumnWidth,
-    hasRows
+    hasRows,
+    isReOrderLoading
   }), /*#__PURE__*/React.createElement(NoData, {
     isDataEmpty: isDataEmpty,
     emptyStateUiType: emptyStateUiType
@@ -101,8 +106,8 @@ function renderHeader(_ref3) {
   let {
     headers,
     resizerState,
-    reOrderConfig,
-    selectionConfig,
+    isReorderEnabled,
+    isSelectionEnabled,
     selection,
     isKeyboardControlsEnabled,
     isFlexibleColumns,
@@ -111,8 +116,8 @@ function renderHeader(_ref3) {
     dispatch
   } = _ref3;
   return /*#__PURE__*/React.createElement(Header, {
-    isReorderEnabled: reOrderConfig.isEnabled,
-    isSelectionEnabled: selectionConfig.isEnabled,
+    isReorderEnabled: isReorderEnabled,
+    isSelectionEnabled: isSelectionEnabled,
     isResizerEnabled: resizerState.isEnabled,
     isKeyboardControlsEnabled: isKeyboardControlsEnabled,
     currentlyResizingColumn: resizerState.currentlyResizingColumn,
@@ -146,13 +151,14 @@ function renderBody(_ref4) {
     headers,
     rows,
     isFlexibleColumns,
-    reOrderConfig,
-    selectionConfig,
+    isReorderEnabled,
+    isSelectionEnabled,
     isKeyboardControlsEnabled,
     rowCursor,
     hasRowActions,
     rowActionsColumnWidth,
-    hasRows
+    hasRows,
+    isReOrderLoading
   } = _ref4;
   const {
     rowData,
@@ -160,7 +166,9 @@ function renderBody(_ref4) {
     handleSortStart,
     handleSortEnd,
     handleSortOver,
-    getHelperDimensions
+    getHelperDimensions,
+    getHelperContainer,
+    getHelperClass
   } = useTableRowReorder({
     rows,
     TableRef,
@@ -174,9 +182,9 @@ function renderBody(_ref4) {
   return /*#__PURE__*/React.createElement(SortableTableContainer, {
     hasRows: hasRows,
     isFlexibleColumns: isFlexibleColumns,
-    helperClass: `${style.dragging}`,
+    helperClass: getHelperClass(),
     useDragHandle: true,
-    helperContainer: () => TableRef.current,
+    helperContainer: getHelperContainer,
     onSortStart: handleSortStart,
     onSortEnd: handleSortEnd,
     onSortOver: handleSortOver,
@@ -189,13 +197,14 @@ function renderBody(_ref4) {
     headers: headers,
     rows: rowData,
     isFlexibleColumns: isFlexibleColumns,
-    isReorderEnabled: reOrderConfig.isEnabled,
-    isSelectionEnabled: selectionConfig.isEnabled,
+    isReorderEnabled: isReorderEnabled,
+    isSelectionEnabled: isSelectionEnabled,
     rowCursor: rowCursor,
     hasRowActions: hasRowActions,
     rowActionsColumnWidth: rowActionsColumnWidth,
     isKeyboardControlsEnabled: isKeyboardControlsEnabled,
-    dropIndicator: dropIndicator
+    dropIndicator: dropIndicator,
+    isReOrderLoading: isReOrderLoading
   }));
 }