@zohodesk/library-platform 1.1.1 → 1.1.2-exp.0

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

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

@@ -0,0 +1,211 @@
+/* eslint-disable react/prop-types */
+import React, { Component } from "react";
+import createCustomComponent from "../CreateCustomComponent.tsx";
+import ComponentRegistry from "../ComponentRegistry";
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom';
+const Parent = createCustomComponent({
+  name: "parent",
+  View: (_ref, ref) => {
+    let {
+      slotChildren
+    } = _ref;
+    const {
+      child = null,
+      siblingChild = null
+    } = slotChildren;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }, "Hi, I am the Parent.", /*#__PURE__*/React.createElement("div", null, child), /*#__PURE__*/React.createElement("div", null, siblingChild));
+  },
+  properties: {
+    slots: {
+      required: false,
+      typeMetadata: {
+        schema: {
+          type: "array"
+        }
+      }
+    }
+  },
+  eventHandlers: {}
+});
+const Child = createCustomComponent({
+  name: "child",
+  View: (_ref2, ref) => {
+    let {
+      slotChildren
+    } = _ref2;
+    const {
+      nestedChildren = null
+    } = slotChildren;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }, "Hi, I am the Child.", /*#__PURE__*/React.createElement("div", null, nestedChildren));
+  },
+  eventHandlers: {},
+  properties: {
+    slots: {
+      required: false,
+      typeMetadata: {
+        schema: {
+          type: "array"
+        }
+      }
+    }
+  }
+});
+const SiblingChild = createCustomComponent({
+  name: "siblingChild",
+  View: (props, ref) => {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }, "Hi, I am the sibling Child.");
+  },
+  eventHandlers: {},
+  properties: {}
+});
+const NestedChild = createCustomComponent({
+  name: "nestedChild",
+  View: (_, ref) => {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }, "Hi, I am the nested Child.");
+  },
+  eventHandlers: {},
+  properties: {}
+});
+const NoSlotName = createCustomComponent({
+  name: "noSlotName",
+  View: (_, ref) => {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }, "Hi, It should not be rendered.");
+  },
+  eventHandlers: {},
+  properties: {}
+});
+ComponentRegistry.register("Parent", Parent);
+ComponentRegistry.register("Child", Child);
+ComponentRegistry.register("SiblingChild", SiblingChild);
+describe("Slot Integration test suite", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  });
+  it("slot Information passed to parent and check children rendering", () => {
+    const slots = [{
+      name: "child",
+      elements: [{
+        name: "child",
+        type: "Child"
+      }]
+    }];
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Parent, {
+      slots: slots
+    }, /*#__PURE__*/React.createElement(Child, {
+      slotName: "child"
+    })));
+    const component = getByText("Hi, I am the Child.");
+    expect(component).toBeInTheDocument();
+  });
+  it("slots with nested child and check nested child rendering", () => {
+    const slots = [{
+      name: "child",
+      elements: [{
+        name: "child",
+        type: "Child",
+        slots: [{
+          name: "nestedChildren",
+          elements: [{
+            name: "nestedChild",
+            type: "NestedChild"
+          }]
+        }]
+      }]
+    }];
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Parent, {
+      slots: slots
+    }, /*#__PURE__*/React.createElement(Child, {
+      slotName: "child"
+    }, /*#__PURE__*/React.createElement(NestedChild, {
+      slotName: "nestedChildren"
+    }))));
+    const component = getByText("Hi, I am the nested Child.");
+    expect(component).toBeInTheDocument();
+  });
+  it("slots with sibling child and check sibling child rendering", () => {
+    const slots = [{
+      name: "child",
+      elements: [{
+        name: "child",
+        type: "Child",
+        slots: [{
+          name: "nestedChildren",
+          elements: [{
+            name: "nestedChild",
+            type: "NestedChild"
+          }]
+        }]
+      }]
+    }, {
+      name: "siblingChild",
+      elements: [{
+        name: "siblingChild",
+        type: "SiblingChild"
+      }]
+    }];
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Parent, {
+      slots: slots
+    }, /*#__PURE__*/React.createElement(Child, {
+      slotName: "child"
+    }, /*#__PURE__*/React.createElement(NestedChild, {
+      slotName: "nestedChildren"
+    })), /*#__PURE__*/React.createElement(SiblingChild, null)));
+    const component = getByText("Hi, I am the sibling Child.");
+    expect(component).toBeInTheDocument();
+  });
+  it("children with no slot support should not be rendered", () => {
+    const slots = [{
+      name: "child",
+      elements: [{
+        name: "child",
+        type: "Child",
+        slots: [{
+          name: "nestedChildren",
+          elements: [{
+            name: "nestedChild",
+            type: "NestedChild"
+          }]
+        }]
+      }]
+    }, {
+      name: "siblingChild",
+      elements: [{
+        name: "siblingChild",
+        type: "SiblingChild"
+      }]
+    }];
+    const {
+      queryByText
+    } = render( /*#__PURE__*/React.createElement(Parent, {
+      slots: slots
+    }, /*#__PURE__*/React.createElement(Child, {
+      slotName: "child"
+    }, /*#__PURE__*/React.createElement(NestedChild, {
+      slotName: "nestedChildren"
+    })), /*#__PURE__*/React.createElement(SiblingChild, {
+      slotName: "siblingChild"
+    }), /*#__PURE__*/React.createElement(NoSlotName, {
+      slotName: "noslotname"
+    })));
+    const component = queryByText("Hi, It should not be rendered.");
+    expect(component).toBeNull();
+  });
+});

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

@@ -1,7 +1,13 @@
-import ActionIcon, { Button, FilterDropdown } from "../../../../legacy-to-new-arch/action-icon/frameworks/ui/ActionIcon";
+import ActionIcon from "../../../../legacy-to-new-arch/action-icon/frameworks/ui/ActionIcon";
+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";
 const ActionComponentMapping = {
-  'ActionIcon': ActionIcon,
-  'Button': Button,
-  'TableFilterDropdown': FilterDropdown
+  ['ActionIcon']: ActionIcon,
+  ['TableColumnSort']: TableColumnSort,
+  ['TableColumnChooser']: TableColumnChooser,
+  ['TableSelectAll']: Checkbox,
+  ['TableColumnFilter']: TableColumnFilter
 };
 export default ActionComponentMapping;

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

@@ -0,0 +1,57 @@
+function updateFieldValues(_ref) {
+  let {
+    sections,
+    values,
+    errorMessages
+  } = _ref;
+
+  if (!values) {
+    return sections;
+  }
+
+  return sections.map(section => {
+    const fields = section.fields.map(field => {
+      const updatedField = { ...field
+      };
+
+      if (values[field.name] !== undefined) {
+        updatedField.value = values[field.name];
+      }
+
+      if (errorMessages[field.name] !== undefined) {
+        updatedField.errorMessage = errorMessages[field.name];
+      }
+
+      if (updatedField.errorMessage === field.errorMessage && updatedField.value === field.value) {
+        return field;
+      }
+
+      return updatedField;
+    });
+    return { ...section,
+      fields
+    };
+  });
+}
+
+export function TransformState(state) {
+  const {
+    sections,
+    isLoading,
+    values,
+    errorMessages
+  } = state.properties; // const { values, errorMessages } = state.behaviours.form;
+
+  const updatedSections = updateFieldValues({
+    sections,
+    values,
+    errorMessages
+  });
+  return { ...state,
+    // properties: { ...state.properties, sections: updatedSections }
+    viewModel: {
+      sections: updatedSections,
+      isLoading
+    }
+  };
+}

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

@@ -0,0 +1,54 @@
+import SectionConstants from "../../../../../../cc/section/Constants";
+import FormConstants from "../../../../../../cc/form/Constants";
+
+class EventHandlersFactory {
+  static create() {
+    return {
+      [SectionConstants.SECTION_FIELD_BLURRED]: this.handleSectionFieldBlurred,
+      [SectionConstants.SECTION_FIELD_CHANGED]: this.handleSectionFieldChanged
+    };
+  }
+
+  static handleSectionFieldBlurred(_ref) {
+    let {
+      action,
+      dispatch
+    } = _ref;
+    const {
+      id: sectionId,
+      fieldName
+    } = action.payload;
+    dispatch({
+      type: FormConstants.FORM_FIELD_BLURRED,
+      payload: {
+        sectionId,
+        fieldName
+      },
+      metaData: {}
+    });
+  }
+
+  static handleSectionFieldChanged(_ref2) {
+    let {
+      action,
+      dispatch
+    } = _ref2;
+    const {
+      id: sectionId,
+      fieldName,
+      value
+    } = action.payload;
+    dispatch({
+      type: FormConstants.FORM_FIELD_VALUE_CHANGE_REQUEST,
+      payload: {
+        sectionId,
+        fieldName,
+        value
+      },
+      metaData: {}
+    });
+  }
+
+}
+
+export default EventHandlersFactory;

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

@@ -0,0 +1,14 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import FormProperties from "../../../../../../cc/form/Properties";
+import FormView from "./FormView";
+import { TransformState } from "../../adapters/presenter/TransformState";
+import EventHandlersFactory from "./EventHandlerFactory";
+const Form = createCustomComponent({
+  name: 'CustomForm',
+  View: FormView,
+  properties: FormProperties,
+  transformState: TransformState,
+  eventHandlers: EventHandlersFactory.create(),
+  behaviours: []
+});
+export default Form;

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import FormConstants from "../../../../../../cc/form/Constants";
+import SectionsWrapper from '@zohodesk-private/desk-components/es/form/SectionsWrapper/SectionsWrapper';
+import Sections from "./sub-components/Sections";
+
+function FormView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    sections,
+    isLoading
+  } = state.viewModel;
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    dispatch({
+      type: FormConstants.FORM_SUBMIT
+    });
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, isLoading ?
+  /*#__PURE__*/
+  // Check for loading state
+  React.createElement("div", null, "Loading...") // Display loading indicator
+  : /*#__PURE__*/React.createElement(SectionsWrapper, null, /*#__PURE__*/React.createElement("button", {
+    type: "submit",
+    onClick: handleSubmit
+  }, "Submit"), /*#__PURE__*/React.createElement(Sections, {
+    sections: sections
+  }), /*#__PURE__*/React.createElement("button", {
+    type: "submit",
+    onClick: handleSubmit
+  }, "Submit")));
+}
+
+export default FormView;