@zohodesk/library-platform 1.1.1 → 1.1.2

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

@@ -35,11 +35,11 @@ class Behaviour {
     return this.eventHandlers;
   }
 
-  getInitialState() {
+  getInitialState(propertiesValues) {
     if (this.setIntialState) {
       return {
         [this.name]: this.setIntialState({
-          properties: this.getProperties().getAllPropertiesValue()
+          properties: propertiesValues
         })
       };
     } else {

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

@@ -44,6 +44,10 @@ export default class Component {
     };
   }
 
+  getName() {
+    return this._name;
+  }
+
   getEventHandlers() {
     return this._eventHandlers.getEventHandlers();
   }
@@ -66,6 +70,11 @@ export default class Component {
     return state;
   }
 
+  getHandlerState() {
+    let state = this.mergeStateAndProps();
+    return state;
+  }
+
   setProperties(properties) {
     this._properties = properties;
   }
@@ -110,27 +119,24 @@ export default class Component {
   }
 
   updateProperties(jsonValidator, newProps) {
+    let isChanged = false;
     Object.keys(newProps).forEach(key => {
-      if (this._behavioursProperties[key]) {
-        let property = this._behavioursProperties[key];
-        let optionalSchema = property.getTypeMetadata().schema;
-
-        let isValid = this._properties.validateSingleProperty(jsonValidator, key, newProps[key], optionalSchema);
-
-        if (isValid) {
-          property.updateValue(newProps[key]);
-        }
-        /* return isValid */
+      let property = null;
 
+      if (this._behavioursProperties[key]) {
+        property = this._behavioursProperties[key];
       } else if (this._properties.findProperty(key)) {
-        let property = this._properties.findProperty(key);
+        property = this._properties.findProperty(key);
+      }
 
-        let schema = property.getTypeMetadata().schema;
+      if (property) {
+        const optionalSchema = property.getTypeMetadata().schema;
+        const propertyValue = newProps[key] === undefined ? property.getDefaultValue() : newProps[key];
 
-        let isValid = this._properties.validateSingleProperty(jsonValidator, key, newProps[key], schema);
+        const isValid = this._properties.validateSingleProperty(jsonValidator, key, propertyValue, optionalSchema);
 
         if (isValid) {
-          property.updateValue(newProps[key]);
+          isChanged = property.updateValue(newProps[key]) || isChanged;
         }
         /* return isValid */
 
@@ -140,19 +146,19 @@ export default class Component {
     });
     /* return this._properties.updateAllPropertiesValue(jsonValidator, newProps); */
 
-    return true;
+    return isChanged;
   }
 
   updateState(state) {
     this._state.updateState(state);
   }
 
-  getAllBehavioursInitialState() {
+  getAllBehavioursInitialState(propertiesValues) {
     let allBehavioursInitialState = {};
 
     this._behaviours.map(behaviour => {
       allBehavioursInitialState = { ...allBehavioursInitialState,
-        ...behaviour.getInitialState()
+        ...behaviour.getInitialState(propertiesValues)
       };
     });
 
@@ -165,10 +171,10 @@ export default class Component {
     const properties = this._properties.getAllPropertiesValue();
 
     const behavioursProperties = this.getAllBehavioursPropertiesWithValue();
-    const behaviours = this.getAllBehavioursInitialState();
     let allProperties = { ...properties,
       ...behavioursProperties
     };
+    const behaviours = this.getAllBehavioursInitialState(allProperties);
 
     const initialState = this._stateInitializer({
       properties: allProperties
@@ -209,7 +215,7 @@ export default class Component {
     let createActionToEventHandler = (eventHandlers, eventHandlerMap) => {
       eventHandlers.forEach((actionHandler, key) => {
         let eventHandler = new EventHandler(key, event => {
-          let state = this.getState();
+          let state = this.getHandlerState();
           let action = event.detail;
           actionHandler({
             action,

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

@@ -0,0 +1,10 @@
+export default {
+  name: "slotName",
+  required: false,
+  defaultValue: null,
+  typeMetadata: {
+    schema: {
+      type: 'string'
+    }
+  }
+};

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

@@ -3,6 +3,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import Property from "./Property";
 import defaultAppendToActionPayload from "./DefaultAppendToActionPayload";
 import getRefPropertySchema from "../../../../cc/component/properties/getRefPropertySchema";
+import defaultSlotNameAppend from "./DefaultSlotNameAppend";
 export default class Properties {
   constructor(properties, componentName) {
     this.componentName = componentName;
@@ -12,6 +13,7 @@ export default class Properties {
     this.data = properties;
     this.data.set('appendToActionPayload', new Property(defaultAppendToActionPayload));
     this.data.set('getRef', new Property(getRefPropertySchema));
+    typeof properties.get("slotName") === "undefined" && this.data.set('slotName', new Property(defaultSlotNameAppend));
   }
 
   getAllPropertiesValue() {
@@ -72,7 +74,7 @@ export default class Properties {
 
   validate(validator, key, value, errors) {
     if (!this.data.has(key)) {
-      throw new Error(`props '${key}' not exist `);
+      throw new Error(this.componentName + ` props '${key}' not exist `);
     }
 
     let property = this.data.get(key);
@@ -112,16 +114,21 @@ export default class Properties {
   validateSingleProperty(validator, onePropKey, onePropValue, optionalSchema) {
     let schema = this.getSchema(onePropKey, optionalSchema); // INFO: Validate the property adheres to its schema
 
-    let isValid = validator(schema, onePropValue);
+    const {
+      isValid,
+      errors
+    } = validator(schema, onePropValue);
 
     if (!isValid) {
       const error = {
         key: onePropKey,
         componentName: this.componentName,
         value: onePropValue,
+        isValid,
+        errors,
         schema: schema
       };
-      console.log('Property validation failed', this.componentName, error);
+      console.log('Property validation failed', error);
       throw new Error('Property validation failed');
     }
 

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

@@ -48,7 +48,9 @@ export default class Property {
 
 
   updateValue(value) {
+    const isChanged = this.value !== value;
     this.value = value;
+    return isChanged;
   }
 
   clone() {

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

@@ -3,11 +3,27 @@ let jsonValidator = new Ajv();
 
 class Validator {
   static validate(schema, value) {
-    if (schema.type === "function" && typeof value === "function") {
-      return true;
+    let errors = [];
+
+    if (schema.type === 'function' && typeof value === 'function') {
+      return {
+        isValid: true,
+        errors
+      };
+    } // validate is a type guard for MyData - type is inferred from schema type
+
+
+    const validate = jsonValidator.compile(schema);
+    const isValid = validate(value);
+
+    if (!isValid) {
+      errors = validate.errors;
     }
 
-    return jsonValidator.validate(schema, value);
+    return {
+      isValid,
+      errors
+    };
   }
 
 }

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

@@ -44,4 +44,29 @@ export default class Compare {
     return false;
   }
 
+  static deepEqual(obj1, obj2) {
+    if (obj1 === obj2) {
+      return true; // Same reference or primitive value
+    }
+
+    if (typeof obj1 !== "object" || typeof obj2 !== "object" || obj1 === null || obj2 === null) {
+      return false; // If not objects or one is null
+    }
+
+    const keys1 = Object.keys(obj1);
+    const keys2 = Object.keys(obj2);
+
+    if (keys1.length !== keys2.length) {
+      return false; // Different number of properties
+    }
+
+    for (const key of keys1) {
+      if (!keys2.includes(key) || !Compare.deepEqual(obj1[key], obj2[key])) {
+        return false; // Recursively check nested properties
+      }
+    }
+
+    return true;
+  }
+
 }

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

@@ -3,9 +3,18 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import React, { forwardRef } from 'react';
 import DependencyFactory from "./DependencyFactory";
 import Compare from "./Compare";
+import { generateSlotChildren } from "./CreateSlotComponent";
+
+function discardChildren(props) {
+  const newObject = { ...props
+  };
+  delete newObject.children;
+  return newObject;
+}
 /* eslint-disable max-lines-per-function */
 // TODO: Refactor this function to reduce the number of lines
 
+
 const createCustomComponent = input => {
   class Component extends React.Component {
     constructor(props) {
@@ -55,10 +64,14 @@ const createCustomComponent = input => {
         dispatch: dispatch.bind(controller)
       };
       this.controller.initialize({ ...input,
-        newProps: props,
+        newProps: discardChildren(props),
         helpers: this.helpers
       });
+      let proptypes = input.View.propTypes;
+      input.View.propTypes = undefined;
       this.View = /*#__PURE__*/forwardRef(input.View); //need to analyse react forwardref, removed from hoc
+
+      this.View.propTypes = proptypes;
     }
 
     componentDidMount() {
@@ -66,7 +79,7 @@ const createCustomComponent = input => {
     }
 
     shouldComponentUpdate(nextProps, nextState) {
-      return Compare.shallowCompare(this.props, nextProps) || Compare.shallowCompare(this.state, nextState);
+      return !Compare.deepEqual(discardChildren(this.props), discardChildren(nextProps)) || !Compare.deepEqual(this.state, nextState); // return true;
     }
 
     componentWillUnmount() {
@@ -77,16 +90,32 @@ const createCustomComponent = input => {
       console.log('Error', error, errorInfo, errorInfo.componentStack);
     }
 
-    componentDidUpdate() {
-      this.controller.updateProperties(this.props);
+    componentWillReceiveProps(nextProps, nextContext) {
+      this.controller.updateProperties(discardChildren(nextProps));
+    }
+
+    componentDidUpdate() {// this.controller.updateProperties(this.props);
     }
 
     render() {
       let View = this.View;
+      let {
+        slots,
+        children
+      } = this.props;
 
       if (this.state.error) {
+        if (__TEST__) {
+          throw this.state.error;
+        }
+
+        const {
+          setElement
+        } = this.eventManager;
         console.log(this.state.error);
-        return /*#__PURE__*/React.createElement("div", null, "error");
+        return /*#__PURE__*/React.createElement("div", {
+          ref: setElement
+        }, "error");
       } else {
         const {
           setElement
@@ -97,13 +126,15 @@ const createCustomComponent = input => {
             this.props.getRef && this.props.getRef(element);
           },
           helpers: this.helpers,
-          state: this.state
+          state: this.state,
+          slotChildren: generateSlotChildren(slots, children)
         });
       }
     }
 
   }
 
+  Component.displayName = `Custom(${input.name})`;
   return Component;
 };
 

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

@@ -0,0 +1,89 @@
+import React, { Children } from "react";
+import ComponentRegistry from "./ComponentRegistry";
+
+/*
+    Enhancements
+        1.Without named slot handling
+        2.Warning error for component name wrong
+        3.Change createSlotComponent with react-dep and add into domatin,entities,usecases way of impl
+        4.UAT
+*/
+export function generateSlotChildren() {
+  let slots = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let children = arguments.length > 1 ? arguments[1] : undefined;
+  let slotChildren = {},
+      slotChildrenMap = {};
+  Children.forEach(children, child => {
+    if (typeof child.type === "function" && child.props && child.props.slotName) {
+      const {
+        slotName
+      } = child.props;
+      const displayName = child.type.displayName;
+      slotChildrenMap[slotName] = slotChildrenMap[slotName] || {};
+      slotChildrenMap[slotName][displayName] = {
+        props: child.props,
+        type: child.type
+      };
+    }
+  });
+  slots.map(slot => {
+    const {
+      name,
+      elements
+    } = slot;
+    slotChildren[name] = [];
+    elements.map((element, index) => {
+      const {
+        type,
+        name: elementName,
+        styles,
+        slots,
+        properties = {}
+      } = element;
+      const {
+        props: childProps = {},
+        type: ChildType
+      } = (slotChildrenMap[name] || {})[`Custom(${elementName})`] || {};
+      let View = ComponentRegistry.get(type) || ChildType;
+      let finalisedProps = { ...properties,
+        ...childProps
+      };
+
+      if (styles) {
+        finalisedProps.styles = styles;
+      }
+
+      if (slots) {
+        finalisedProps.slots = slots;
+      }
+
+      if (View) {
+        slotChildren[name].push( /*#__PURE__*/React.createElement(View, { ...finalisedProps,
+          key: `${name}_${elementName}_${index}`
+        }, childProps.children));
+      }
+    });
+  });
+  return slotChildren;
+}
+/*export default function createSlotComponent(slotShape: Slot, children: any): any {
+    let {elements} = slotShape;
+    let finalElements = elements.map((element) => {
+        let {
+            type,
+            styles = {},
+            slots = [],
+            properties={}
+        } = element;
+        let View = ComponentRegistry.get(type);
+        if(View) {
+            return (<View 
+                {...properties} 
+                styles={styles}
+                slots={slots}  
+            />)
+        }
+        return null
+    });
+    return finalElements
+}*/

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

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import createCustomComponent from "../createCustomComponent";
-import { render, screen } from '@testing-library/react';
+import createCustomComponent from "../CreateCustomComponent";
+import { render, cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 let View = (_ref, ref) => {
@@ -10,7 +10,7 @@ let View = (_ref, ref) => {
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    "data-testid": "custom-component",
+    "data-test-id": "custom-component",
     "data-title": state.properties.title
   }, "Hey");
 };
@@ -43,7 +43,11 @@ let mockComponentCC = {
   }]
 };
 describe('createCustomComponent integration test', () => {
-  // basic rendering test
+  beforeEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  }); // basic rendering test
+
   it('should mount the component and check the rendering', () => {
     const CustomComponent = createCustomComponent(mockComponentCC);
     let {
@@ -62,9 +66,11 @@ describe('createCustomComponent integration test', () => {
   });
   it('should pass props to the custom component', () => {
     const CustomComponent = createCustomComponent(mockComponentCC);
-    render( /*#__PURE__*/React.createElement(CustomComponent, null));
-    const component = screen.getByTestId('custom-component');
-    expect(component).toHaveAttribute('data-testid', 'custom-component');
+    const {
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(CustomComponent, null));
+    const component = getByTestId('custom-component');
+    expect(component).toHaveAttribute('data-test-id', 'custom-component');
   });
   it('should initialize custom behavior state', () => {
     const CustomComponent = createCustomComponent(mockComponentCC);
@@ -82,16 +88,17 @@ describe('createCustomComponent integration test', () => {
   it('should update component when props change and update property event', () => {
     const CustomComponent = createCustomComponent(mockComponentCC);
     const {
-      rerender
+      rerender,
+      getByTestId
     } = render( /*#__PURE__*/React.createElement(CustomComponent, {
       title: "Initial Title"
     }));
-    let component = screen.getByTestId('custom-component');
+    let component = getByTestId('custom-component');
     expect(component).toHaveAttribute('data-title', 'Initial Title');
     rerender( /*#__PURE__*/React.createElement(CustomComponent, {
       title: "Updated Title"
     }));
-    component = screen.getByTestId('custom-component');
+    component = getByTestId('custom-component');
     expect(component).toHaveAttribute('data-title', 'Updated Title');
     expect(mockComponentCC.eventHandlers['mockComponent#UPDATE_PROPERTIES']).toHaveBeenCalled();
   });