@zohodesk/library-platform 1.1.10 → 1.1.11

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

@@ -1,3 +1,4 @@
+/* eslint-disable complexity */
 import Ajv from 'ajv';
 let jsonValidator = new Ajv({
   useDefaults: true
@@ -5,6 +6,10 @@ let jsonValidator = new Ajv({
 
 class Validator {
   static validate(schema, value) {
+    if (schema.schema) {
+      return Validator.validatePropertySchema(schema, value);
+    }
+
     let errors = [];
     Validator.checkFunctionsRecursively(schema, value, '', '#', errors); // Use AJV for the rest of the validation, ignoring functions
 
@@ -16,12 +21,13 @@ class Validator {
 
     if (!isValid) {
       // errors = validate.errors;
-      errors.push(...(validate.errors || []));
+      validate.errors && errors.push(...validate.errors);
     }
 
     return {
       isValid: isValid && errors.length === 0,
-      errors
+      errors,
+      warnings: []
     };
   }
 
@@ -33,13 +39,13 @@ class Validator {
     if (schema.type === 'function') {
       if (typeof value !== 'function') {
         errors.push({
-          keyword: "type",
-          dataPath: path ? `.${path}` : "",
+          keyword: 'type',
+          dataPath: path ? `.${path}` : '',
           schemaPath: `${schemaPath}/type`,
           params: {
-            type: "function"
+            type: 'function'
           },
-          message: "should be function"
+          message: 'should be function'
         });
       }
 
@@ -89,34 +95,65 @@ class Validator {
 
   }
 
-  static validatePropsAgainstSchema(schemaProps, props) {
-    const warnings = [];
-    const errors = [];
+  static validatePropertySchema(propertySchema, value) {
+    const {
+      schema
+    } = propertySchema;
+    const result = Validator.validateRequired(propertySchema, value);
+    const isProvided = propertySchema.isValueProvided;
 
-    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.`);
-          }
-        }
+    if (result.isValid === false) {
+      return result;
+    }
+
+    if (!isProvided) {
+      return {
+        isValid: true,
+        errors: [],
+        warnings: result.warnings
+      };
+    }
 
-        continue;
+    const {
+      isValid,
+      errors,
+      warnings
+    } = Validator.validate(schema, value);
+    return {
+      key: propertySchema.name,
+      isValid,
+      errors,
+      warnings: [...result.warnings, ...warnings]
+    };
+  }
+
+  static validateRequired(propertySchema, value) {
+    const errors = [];
+    const warnings = [];
+    const isRequired = propertySchema.required === true;
+    const hasDefault = Object.prototype.hasOwnProperty.call(propertySchema, 'defaultValue');
+    const isProvided = propertySchema.isValueProvided;
+
+    if (!isProvided && isRequired) {
+      if (hasDefault) {
+        if (propertySchema.defaultValue === undefined) {
+          errors.push({
+            message: `is required but missing. So, default value is undefined.`
+          });
+        } else {
+          warnings.push({
+            message: `is required but missing. So, Default value will be used.`
+          });
+        }
+      } else {
+        errors.push({
+          message: `is required but missing. And, neither a value nor a default value is present.`
+        });
       }
     }
 
     return {
+      isValid: errors.length === 0,
       warnings,
       errors
     };

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

@@ -13,11 +13,11 @@ class ComponentRegistry {
 
   register(name, component) {
     if (this.components.has(name)) {
-      console.warn(`Component with name "${name}" is already registered. Overwriting the existing component.`);
+      __DEVELOPMENT__ && console.warn(`Component with name "${name}" is already registered. Overwriting the existing component.`);
     }
 
     if (this.components.has(name) && this.get(name) !== component) {
-      console.warn(`Component with name "${name}" is already registered with a different instance. Overwriting the existing component.`);
+      __DEVELOPMENT__ && console.warn(`Component with name "${name}" is already registered with a different instance. Overwriting the existing component.`);
     }
 
     this.components.set(name, component);

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

@@ -2,6 +2,7 @@ import React, { forwardRef } from 'react';
 import DependencyFactory from "./DependencyFactory";
 import Compare from "./Compare";
 import { generateSlotChildren } from "./CreateSlotComponent";
+import { ACA_ERROR_OCCURRED } from "../../../../cc/component/ErrorStructure";
 
 function discardChildren(props) {
   const newObject = { ...props
@@ -58,6 +59,13 @@ const createCustomComponent = input => {
 
     componentDidMount() {
       this.controller.mount();
+
+      if (this.state.error) {
+        this.helpers.dispatch({
+          type: ACA_ERROR_OCCURRED,
+          payload: this.state.error
+        });
+      }
     }
 
     shouldComponentUpdate(nextProps, nextState) {
@@ -69,38 +77,43 @@ const createCustomComponent = input => {
     }
 
     componentDidCatch(error, errorInfo) {
-      console.log('Error', error, errorInfo, errorInfo.componentStack);
+      __DEVELOPMENT__ && console.log('Error', error, errorInfo, errorInfo.componentStack);
     }
 
     componentWillReceiveProps(nextProps, nextContext) {
       this.controller.updateProperties(discardChildren(nextProps));
     }
 
-    componentDidUpdate() {// this.controller.updateProperties(this.props);
+    componentDidUpdate(prevProps, prevState) {
+      if (!Compare.deepEqual(prevState.error, this.state.error)) {
+        this.helpers.dispatch({
+          type: ACA_ERROR_OCCURRED,
+          payload: this.state.error
+        });
+      } // this.controller.updateProperties(this.props);
+
     }
 
     setRef = element => {
-      const {
-        setElement
-      } = this.eventManager;
-      setElement.bind(this.eventManager)(element);
-      this.eventManager.setElement(element);
+      this.controller.setElement(element);
       this.props.getRef && this.props.getRef(element);
     };
 
     render() {
-      let View = this.View;
-      let {
+      const View = this.View;
+      const {
         slots,
         children
       } = this.props;
+      const {
+        error
+      } = this.state;
 
-      if (this.state.error) {
+      if (error) {
         if (__TEST__) {
-          throw this.state.error;
+          throw error;
         }
 
-        console.log(this.state.error);
         const {
           FallbackView
         } = input;
@@ -108,12 +121,12 @@ const createCustomComponent = input => {
         if (FallbackView) {
           return /*#__PURE__*/React.createElement(FallbackView, {
             ref: this.setRef,
-            error: this.state.error
+            error: error
           });
         }
 
         return /*#__PURE__*/React.createElement("div", {
-          ref: element => this.setRef(element)
+          ref: this.setRef
         }, "error");
       } else {
         return /*#__PURE__*/React.createElement(View, {

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

@@ -19,8 +19,7 @@ class DependencyFactory {
       repository,
       presenter,
       eventManager,
-      jsonValidator: Validator.validate,
-      schemaValidator: Validator.validatePropsAgainstSchema
+      jsonValidator: Validator.validate
     });
     const controller = new Controller(service);
     return {

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

@@ -9,10 +9,13 @@ import MoreDropdown from "../../../../legacy-to-new-arch/more-dropdown/framework
 import Breadcrumb from "../../../../legacy-to-new-arch/breadcrumb/frameworks/ui/Breadcrumb";
 import IconButton from "../../../../legacy-to-new-arch/icon-button/frameworks/ui/IconButton";
 import HighlightedValue from "../../../../legacy-to-new-arch/highlighted-value/frameworks/ui/HighlightedValue";
+import Switch from "../../../../legacy-to-new-arch/switch/frameworks/ui/Switch";
+import ListItem from "../../../../legacy-to-new-arch/list-item/frameworks/ui/ListItem";
 const ActionComponentMapping = {
   ['ActionIcon']: ActionIcon,
   ['Button']: Button,
-  // ['ListItem']: ListItem,
+  ['Switch']: Switch,
+  ['ListItem']: ListItem,
   ['MoreDropdown']: MoreDropdown,
   ['TableColumnSort']: TableColumnSort,
   ['TableColumnChooser']: TableColumnChooser,

package/es/library/dot/components/form/adapters/presenter/TransformState.js

@@ -46,7 +46,8 @@ export function TransformState(state) {
     headerRightActions,
     footerLeftActions,
     footerRightActions,
-    rightPanel
+    rightPanel,
+    clientScripts
   } = state.properties; // const { values, errorMessages } = state.behaviours.form;
 
   const updatedSections = updateFieldValues({
@@ -65,6 +66,7 @@ export function TransformState(state) {
       headerRightActions,
       footerLeftActions,
       footerRightActions,
+      clientScripts,
       rightPanel
     }
   };

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

@@ -2,6 +2,9 @@ import { DefaultFormSectionUIType } from "../../../../../../cc/fields/field/Form
 import ComponentRegistry from "../../../../../custom-component/frameworks/ui/ComponentRegistry";
 import { TextArea, TextBox, Email, PickList, Currency, MultiSelect, Url, Percentage, Phone, Number, Decimal, Date, DateTime, Checkbox, LookUp } from "../../../form-fields";
 import Section from "../../../section/frameworks/ui/Section";
+import ActionIcon from "../../../../legacy-to-new-arch/action-icon/frameworks/ui/ActionIcon";
+import Button from "../../../../legacy-to-new-arch/button/frameworks/ui/Button"; // import SwitchField from '@library/dot/legacy-to-new-arch/table-field-components/switch-field/frameworks/ui/SwitchField';
+
 export function registerDefaultComponents() {
   // Registering components in the ComponentRegistry
   // NOTE: This is a workaround to avoid dynamic imports
@@ -19,7 +22,12 @@ export function registerDefaultComponents() {
   ComponentRegistry.register('Decimal', Decimal);
   ComponentRegistry.register('Date', Date);
   ComponentRegistry.register('DateTime', DateTime);
-  ComponentRegistry.register('Checkbox', Checkbox);
+  ComponentRegistry.register('Checkbox', Checkbox); // ComponentRegistry.register('Switch', Checkbox);
+
   ComponentRegistry.register('LookUp', LookUp);
-  ComponentRegistry.register(DefaultFormSectionUIType, Section);
+  ComponentRegistry.register(DefaultFormSectionUIType, Section); // Add more components as needed
+  // ComponentRegistry.register('Switch', SwitchField);
+
+  ComponentRegistry.register('Button', Button);
+  ComponentRegistry.register('ActionIcon', ActionIcon);
 }

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

@@ -4,10 +4,12 @@ import FormView from "./FormView";
 import { TransformState } from "../../adapters/presenter/TransformState";
 import EventHandlersFactory from "./EventHandlerFactory";
 import { registerDefaultComponents } from "./DefaultComponentRegister";
+import FormFallbackView from "./FormFallbackView";
 registerDefaultComponents();
 const Form = createCustomComponent({
   name: 'CustomForm',
   View: FormView,
+  FallbackView: FormFallbackView,
   properties: FormProperties,
   transformState: TransformState,
   eventHandlers: EventHandlersFactory.create(),

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import ErrorState from "../../../../legacy-to-new-arch/error-state/frameworks/ui/ErrorState";
+import { ErrorCodes } from "../../../../../../cc/component/ErrorStructure";
+import ErrorTypes from "../../../../../../cc/error-state/ErrorTypes";
+
+function FormFallbackView(_ref, ref) {
+  let {
+    error
+  } = _ref;
+  const map = {
+    [ErrorCodes.API_FAILED]: ErrorTypes.UrlNotFound,
+    [ErrorCodes.PROPERTY_VALIDATION_FAILED]: ErrorTypes.OopsSomethingMiss,
+    [ErrorCodes.EVENT_HANDLER_FAILED]: ErrorTypes.Inconvenience,
+    [ErrorCodes.UNKNOWN_ERROR]: ErrorTypes.Inconvenience
+  };
+  const errorType = map[error.code] === undefined ? ErrorTypes.Inconvenience : map[error.code];
+  return /*#__PURE__*/React.createElement(ErrorState, {
+    type: errorType,
+    getRef: ref
+  });
+}
+
+export default /*#__PURE__*/React.forwardRef(FormFallbackView);

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

@@ -17,28 +17,32 @@ function FormView(_ref, ref) {
     footerLeftActions,
     footerRightActions,
     isHeaderEnabled,
-    isFooterEnabled
+    isFooterEnabled,
+    clientScripts
   } = state.viewModel;
   return /*#__PURE__*/React.createElement(Flex, {
     $ui_displayMode: "flex",
     $ui_direction: "column",
     $flag_fullsize: true,
-    $a11y_attributes: {
+    $a11yAttributes_container: {
       role: 'form'
     },
     ref: ref
   }, /*#__PURE__*/React.createElement(Header, {
     hasHeader: isHeaderEnabled,
     headerLeftActions: headerLeftActions,
-    headerRightActions: headerRightActions
+    headerRightActions: headerRightActions,
+    clientScripts: clientScripts
   }), /*#__PURE__*/React.createElement(MiddleSection, {
     sections: sections,
     isLoading: isLoading,
-    rightPanel: rightPanel
+    rightPanel: rightPanel,
+    clientScripts: clientScripts
   }), /*#__PURE__*/React.createElement(Footer, {
     hasFooter: isFooterEnabled,
     footerLeftActions: footerLeftActions,
-    footerRightActions: footerRightActions
+    footerRightActions: footerRightActions,
+    clientScripts: clientScripts
   }));
 }
 

package/es/library/dot/components/form/frameworks/ui/css/Form.module.css

@@ -3,17 +3,17 @@
 }
 
 .field {
-    margin-top: var(--zd_size5) ;
+    margin-top: 5px;
 }
 
 .multiSelectField {
-    margin-top: var(--zd_size2) 
+    margin-top: 2px
 }
 
 .checkboxField {
     composes: dInflex alignFstart from '~@zohodesk/components/es/common/common.module.css';
-    max-width: 100% ;
-    gap: var(--zd_size8) 
+    max-width: 100%;
+    gap: 8px
 }
 
 .cursor_pointer {
@@ -27,36 +27,36 @@
 }
 
 [dir=ltr] .footer {
-    padding-right: var(--zd_size32) 
+    padding-right: 32px
 }
 
 [dir=rtl] .footer {
-    padding-left: var(--zd_size32) 
+    padding-left: 32px
 }
 
 /* Sections layout */
 
 .sectionsWrapper {
-    padding-bottom: var(--zd_size8) 
+    padding-bottom: 8px
 }
 
 .sectionsLayout, .sectionsTwoLayout {
-    margin: 0 auto 
+    margin: 0 auto
 }
 
 .sectionsLayout {
-    max-width: var(--local-form-layout-max-width, var(--zd_size1080))
+    max-width: var(--local-form-layout-max-width, 1080px)
 }
 
 .sectionsTwoLayout {
-    column-gap: var(--zd_size8) ;
-    max-width: var(--local-form-layout-max-width, var(--zd_size1210))
+    column-gap: 8px;
+    max-width: var(--local-form-layout-max-width, 1210px)
 }
 
 .rightPanel {
     height: var(--local-form-right-panel-height, 100%);
     position: -webkit-sticky;
     position: sticky;
-    top: 0 ;
-    padding: var(--zd_size8) 0 
+    top: 0;
+    padding: 8px 0
 }

package/es/library/dot/components/form/frameworks/ui/sub-components/Footer.js

@@ -1,27 +1,30 @@
 import React from 'react';
 import FormAction, { LeftSide, RightSide } from '@zohodesk/dot/es/FormAction/FormAction';
-import ActionEventMediator from "../../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
 import { ActionViewGap } from "../../../../../../../platform/client-actions/components/interfaces/ActionViewModel"; // @ts-ignore
 
 import style from "../css/Form.module.css";
+import { RowActionsRenderer } from "../../../../../../../index";
 export default function Footer(_ref) {
   let {
     hasFooter,
     footerLeftActions,
-    footerRightActions
+    footerRightActions,
+    clientScripts
   } = _ref;
   if (!hasFooter) return null;
   return /*#__PURE__*/React.createElement(FormAction, {
     size: "small",
     paddingLeftSize: "xmedium",
     paddingRightClass: style.footer
-  }, /*#__PURE__*/React.createElement(LeftSide, null, footerLeftActions.length > 0 && /*#__PURE__*/React.createElement(ActionEventMediator, {
+  }, /*#__PURE__*/React.createElement(LeftSide, null, footerLeftActions.length > 0 && /*#__PURE__*/React.createElement(RowActionsRenderer, {
     testId: "formFooter_leftActions",
     actions: footerLeftActions,
+    clientScripts: clientScripts,
     gap: ActionViewGap.LARGE
-  })), /*#__PURE__*/React.createElement(RightSide, null, footerRightActions.length > 0 && /*#__PURE__*/React.createElement(ActionEventMediator, {
+  })), /*#__PURE__*/React.createElement(RightSide, null, footerRightActions.length > 0 && /*#__PURE__*/React.createElement(RowActionsRenderer, {
     testId: "formFooter_rightActions",
     actions: footerRightActions,
+    clientScripts: clientScripts,
     gap: ActionViewGap.LARGE
   })));
 }

package/es/library/dot/components/form/frameworks/ui/sub-components/Header.js

@@ -1,23 +1,26 @@
 import React from 'react';
 import FormHeader from '@zohodesk-private/desk-components/es/setup/SetupHeader/SetupHeader';
-import ActionEventMediator from "../../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
 import { ActionViewGap } from "../../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
+import RowActionsRenderer from "../../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
 export default function Header(_ref) {
   let {
     hasHeader,
     headerLeftActions,
-    headerRightActions
+    headerRightActions,
+    clientScripts
   } = _ref;
   if (!hasHeader) return null;
   return /*#__PURE__*/React.createElement(FormHeader, {
     customId: "formHeader",
     testId: "formHeader",
-    $render_leftElement: headerLeftActions.length > 0 ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+    $render_leftElement: headerLeftActions.length > 0 ? /*#__PURE__*/React.createElement(RowActionsRenderer, {
       actions: headerLeftActions,
+      clientScripts: clientScripts,
       gap: ActionViewGap.MEDIUM
     }) : null,
-    $render_rightElement: headerRightActions.length > 0 ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+    $render_rightElement: headerRightActions.length > 0 ? /*#__PURE__*/React.createElement(RowActionsRenderer, {
       actions: headerRightActions,
+      clientScripts: clientScripts,
       gap: ActionViewGap.MEDIUM
     }) : null
   });

package/es/library/dot/components/form/frameworks/ui/sub-components/MiddleSection.js

@@ -7,7 +7,8 @@ export default function MiddleSection(_ref) {
   let {
     sections,
     isLoading,
-    rightPanel
+    rightPanel,
+    clientScripts
   } = _ref;
   return /*#__PURE__*/React.createElement(MiddleContainer, {
     $flag_padding: true,
@@ -19,6 +20,7 @@ export default function MiddleSection(_ref) {
   }) : /*#__PURE__*/React.createElement(SectionsLayout, {
     rightPanel: rightPanel
   }, /*#__PURE__*/React.createElement(Sections, {
-    sections: sections
+    sections: sections,
+    clientScripts: clientScripts
   })));
 }

package/es/library/dot/components/form/frameworks/ui/sub-components/Sections.js

@@ -5,7 +5,8 @@ import SectionsWrapper from '@zohodesk-private/desk-components/es/form/SectionsW
 import style from "../css/Form.module.css";
 export default function Sections(_ref) {
   let {
-    sections
+    sections,
+    clientScripts
   } = _ref;
   return /*#__PURE__*/React.createElement(SectionsWrapper, {
     $ui_className: style.sectionsWrapper
@@ -19,6 +20,8 @@ export default function Sections(_ref) {
       isVisible,
       fields,
       type,
+      titleActions,
+      headerActions,
       additionalDetails
     } = section;
     const Section = ComponentRegistry.get(type);
@@ -31,7 +34,10 @@ export default function Sections(_ref) {
       description: description,
       fields: fields,
       isCollapsed: isCollapsed,
-      additionalDetails: additionalDetails
+      titleActions: titleActions,
+      headerActions: headerActions,
+      additionalDetails: additionalDetails,
+      clientScripts: clientScripts
     });
   }));
 }

package/es/library/dot/components/form-fields/checkbox/frameworks/ui/CheckboxView.js

@@ -34,7 +34,8 @@ function CheckboxView(_ref2, ref) {
     disabled,
     readonly,
     required,
-    labelActions
+    labelActions,
+    clientScripts
   } = state.properties;
   const {
     size,
@@ -74,7 +75,8 @@ function CheckboxView(_ref2, ref) {
     for: id,
     label: label,
     actions: labelActions,
-    isMandatory: required
+    isMandatory: required,
+    clientScripts: clientScripts
   })));
 }
 

package/es/library/dot/components/form-fields/currency/frameworks/ui/Currency.js

@@ -3,12 +3,12 @@ import { CurrencyFieldProperties } from "../../../../../../../cc/fields";
 import CurrencyView from "./CurrencyView";
 import EventHandlersFactory from "./EventHandlerFactory";
 import FocusFieldBehaviourFactory from "../../../../../../behaviours/field-focus/frameworks/ui/FocusFieldBehaviourFactory";
-let PickList = createCustomComponent({
-  name: "Currency",
+let Currency = createCustomComponent({
+  name: "FormCurrencyField",
   View: CurrencyView,
   properties: CurrencyFieldProperties,
   events: [],
   eventHandlers: EventHandlersFactory.create(),
   behaviours: [FocusFieldBehaviourFactory.create()]
 });
-export default PickList;
+export default Currency;

package/es/library/dot/components/form-fields/currency/frameworks/ui/CurrencyView.js

@@ -26,7 +26,8 @@ function CurrencyView(_ref, ref) {
     currencySymbol,
     labelActions,
     actions,
-    uiConfig
+    uiConfig,
+    clientScripts
   } = properties;
   const {
     size,
@@ -56,7 +57,8 @@ function CurrencyView(_ref, ref) {
     disabled: disabled,
     readonly: readonly,
     required: required,
-    actions: actions
+    actions: actions,
+    clientScripts: clientScripts
   })));
 }
 

package/es/library/dot/components/form-fields/date/frameworks/ui/DateView.js

@@ -18,7 +18,8 @@ function DateView(_ref, ref) {
     required,
     uiConfig,
     labelActions,
-    actions
+    actions,
+    clientScripts
   } = state.properties;
   const {
     size,
@@ -42,7 +43,8 @@ function DateView(_ref, ref) {
     disabled: disabled,
     readonly: readonly,
     required: required,
-    actions: actions
+    actions: actions,
+    clientScripts: clientScripts
   })));
 }