@zohodesk/library-platform 1.0.1 → 1.0.2-exp.1.1

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,6 +3,7 @@ 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 createSlotComponent from "./CreateSlotComponent";
 /* eslint-disable max-lines-per-function */
 // TODO: Refactor this function to reduce the number of lines
 
@@ -58,7 +59,11 @@ const createCustomComponent = input => {
         newProps: 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 +71,7 @@ const createCustomComponent = input => {
     }
 
     shouldComponentUpdate(nextProps, nextState) {
-      return Compare.shallowCompare(this.props, nextProps) || Compare.shallowCompare(this.state, nextState);
+      return !Compare.deepEqual(this.props, nextProps) || !Compare.deepEqual(this.state, nextState); // return true;
     }
 
     componentWillUnmount() {
@@ -77,16 +82,31 @@ const createCustomComponent = input => {
       console.log('Error', error, errorInfo, errorInfo.componentStack);
     }
 
-    componentDidUpdate() {
-      this.controller.updateProperties(this.props);
+    componentWillReceiveProps(nextProps, nextContext) {
+      this.controller.updateProperties(nextProps);
+    }
+
+    componentDidUpdate() {// this.controller.updateProperties(this.props);
     }
 
     render() {
       let View = this.View;
+      let {
+        slots
+      } = 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 +117,15 @@ const createCustomComponent = input => {
             this.props.getRef && this.props.getRef(element);
           },
           helpers: this.helpers,
-          state: this.state
+          state: this.state,
+          children: slots.map(createSlotComponent)
         });
       }
     }
 
   }
 
+  Component.displayName = `Custom(${input.name})`;
   return Component;
 };
 

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

@@ -0,0 +1,26 @@
+import React from "react";
+import ComponentRegistry from "./ComponentRegistry";
+export default function createSlotComponent(slotShape) {
+  let {
+    elements
+  } = slotShape;
+  let finalElements = elements.map(element => {
+    let {
+      type,
+      styles = {},
+      slots = [],
+      properties = {}
+    } = element;
+    let View = ComponentRegistry.get(type);
+
+    if (View) {
+      return /*#__PURE__*/React.createElement(View, { ...properties,
+        styles: styles,
+        slots: slots
+      });
+    }
+
+    return null;
+  });
+  return finalElements;
+}

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

@@ -0,0 +1,113 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import createCustomComponent from "../CreateCustomComponent";
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+let View = (_ref, ref) => {
+  let {
+    state
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-test-id": "custom-component",
+    "data-title": state.properties.title
+  }, "Hey");
+};
+
+let mockComponentCC = {
+  name: 'mockComponent',
+  View: View,
+  properties: {},
+  eventHandlers: {
+    "mockComponent#MOUNT": jest.fn(),
+    "mockComponent#UN_MOUNT": jest.fn(),
+    "mockComponent#UPDATE_PROPERTIES": jest.fn()
+  },
+  properties: {
+    title: {
+      name: 'titile',
+      defaultValue: 'default',
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    }
+  },
+  behaviour: [{
+    name: 'test',
+    properties: {},
+    setInitialState: () => ({}),
+    eventHandlers: {}
+  }]
+};
+describe('createCustomComponent integration test', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  }); // basic rendering test
+
+  it('should mount the component and check the rendering', () => {
+    const CustomComponent = createCustomComponent(mockComponentCC);
+    let {
+      container
+    } = render( /*#__PURE__*/React.createElement(CustomComponent, null));
+    expect(container).toBeInTheDocument();
+  }); // test if the ref is passed to the component
+
+  it('should pass the ref to the component', () => {
+    const CustomComponent = createCustomComponent(mockComponentCC);
+    let ref = /*#__PURE__*/React.createRef();
+    render( /*#__PURE__*/React.createElement(CustomComponent, {
+      ref: ref
+    }));
+    expect(typeof ref.current).toBe('object');
+  });
+  it('should pass props to the custom component', () => {
+    const CustomComponent = createCustomComponent(mockComponentCC);
+    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);
+    render( /*#__PURE__*/React.createElement(CustomComponent, null));
+    const {
+      behaviour
+    } = mockComponentCC;
+    expect(behaviour[0].setInitialState()).toEqual({});
+  });
+  it('should call the MOUNT event handler on mounting', () => {
+    const CustomComponent = createCustomComponent(mockComponentCC);
+    render( /*#__PURE__*/React.createElement(CustomComponent, null));
+    expect(mockComponentCC.eventHandlers['mockComponent#MOUNT']).toHaveBeenCalled();
+  });
+  it('should update component when props change and update property event', () => {
+    const CustomComponent = createCustomComponent(mockComponentCC);
+    const {
+      rerender,
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(CustomComponent, {
+      title: "Initial Title"
+    }));
+    let component = getByTestId('custom-component');
+    expect(component).toHaveAttribute('data-title', 'Initial Title');
+    rerender( /*#__PURE__*/React.createElement(CustomComponent, {
+      title: "Updated Title"
+    }));
+    component = getByTestId('custom-component');
+    expect(component).toHaveAttribute('data-title', 'Updated Title');
+    expect(mockComponentCC.eventHandlers['mockComponent#UPDATE_PROPERTIES']).toHaveBeenCalled();
+  });
+  it('should clean up properly on unmount', () => {
+    const CustomComponent = createCustomComponent(mockComponentCC);
+    const {
+      unmount
+    } = render( /*#__PURE__*/React.createElement(CustomComponent, null));
+    unmount();
+    expect(mockComponentCC.eventHandlers['mockComponent#UN_MOUNT']).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,7 @@
+import ActionIcon, { Button, FilterDropdown } from "../../../../legacy-to-new-arch/action-icon/frameworks/ui/ActionIcon";
+const ActionComponentMapping = {
+  'ActionIcon': ActionIcon,
+  'Button': Button,
+  'TableFilterDropdown': FilterDropdown
+};
+export default ActionComponentMapping;

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

@@ -1,38 +1,17 @@
 import React from 'react';
-import Flex from '@zohodesk/layout/es/Flex/Flex';
 import ComponentRegistry from "../../../../../custom-component/frameworks/ui/ComponentRegistry";
-import ActionIcon from "../../../../legacy-to-new-arch/action-icon/ActionIcon";
-const defaultUiMapping = {
-  ActionIcon: ActionIcon
-};
+import ActionsRenderer from "../../../actions-renderer/frameworks/ui/ActionsRenderer";
 export default function ActionLocationView(_ref, ref) {
   let {
     state
   } = _ref;
   const {
-    actions
+    actions,
+    type
   } = state.properties;
-  return /*#__PURE__*/React.createElement(Flex, {
-    ref: ref,
-    $flag_fullsize: true,
-    $ui_displayMode: "flex",
-    $ui_alignItems: "center",
-    $ui_justifyContent: "end"
-  }, actions.map((action, index) => {
-    const {
-      type,
-      properties,
-      eventMappings
-    } = action;
-    /* eslint-disable-next-line @zohodesk/architecturerules/no-defaultProps-rule */
-
-    const ActionUiType = defaultUiMapping[type] || ComponentRegistry.get(type);
-    return /*#__PURE__*/React.createElement(ActionUiType, {
-      key: index,
-      ...properties,
-      appendToActionPayload: {
-        eventMappings
-      }
-    });
-  }));
+  const ActionsRendererComponent = ComponentRegistry.get(type) || ActionsRenderer;
+  return /*#__PURE__*/React.createElement(ActionsRendererComponent, {
+    actions: actions,
+    getRef: ref
+  });
 }

package/es/library/dot/components/actions-renderer/frameworks/ui/ActionsRenderer.js

@@ -0,0 +1,9 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import ActionLocationProperties from "../../../../../../cc/action-location/Properties";
+import ActionsRendererView from "./ActionsRendererView";
+export default createCustomComponent({
+  name: 'ActionsRenderer',
+  properties: ActionLocationProperties,
+  eventHandlers: {},
+  View: ActionsRendererView
+});

package/es/library/dot/components/actions-renderer/frameworks/ui/ActionsRendererView.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import ComponentRegistry from "../../../../../custom-component/frameworks/ui/ComponentRegistry";
+import ActionComponentMapping from "../../../action-location/frameworks/ui/ActionComponentMapping";
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+
+function ActionsRendererView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    actions
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(Flex, {
+    ref: ref,
+    $ui_displayMode: "inline",
+    $ui_alignItems: "center"
+  }, actions.map((action, index) => {
+    const {
+      type,
+      properties,
+      eventMappings
+    } = action;
+    /* eslint-disable-next-line @zohodesk/architecturerules/no-defaultProps-rule */
+
+    const ActionUiType = ActionComponentMapping[type] || ComponentRegistry.get(type);
+    return /*#__PURE__*/React.createElement(ActionUiType, {
+      key: index,
+      ...properties,
+      appendToActionPayload: {
+        eventMappings
+      }
+    });
+  }));
+}
+
+;
+export default ActionsRendererView;

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;

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

@@ -0,0 +1,146 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import Form from "../Form";
+beforeEach(() => {
+  cleanup();
+});
+describe('Form Sections', () => {
+  const formProperties = {
+    sections: [{
+      id: '1',
+      title: 'User Details',
+      description: '',
+      fields: [],
+      isVisible: true
+    }, {
+      id: '2',
+      title: 'Address Information',
+      description: '',
+      fields: [],
+      isVisible: true
+    }]
+  };
+  test('Sections are vertically aligned', () => {
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Form, { ...formProperties
+    }));
+    expect(getByText('User Details')).toBeInTheDocument();
+    expect(getByText('Address Information')).toBeInTheDocument();
+  });
+  test('One section in a layout', () => {
+    const singleSectionProperties = { ...formProperties,
+      sections: [{
+        id: '1',
+        title: 'User Details',
+        description: '',
+        fields: [],
+        isVisible: true
+      }]
+    };
+    const {
+      getByText,
+      queryByText
+    } = render( /*#__PURE__*/React.createElement(Form, { ...singleSectionProperties
+    }));
+    expect(getByText('User Details')).toBeInTheDocument();
+    expect(queryByText('Address Information')).not.toBeInTheDocument();
+  });
+  test('Multiple sections in a layout', () => {
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Form, { ...formProperties
+    }));
+    expect(getByText('User Details')).toBeInTheDocument();
+    expect(getByText('Address Information')).toBeInTheDocument();
+  });
+  test('Maintain section order during rendering', () => {
+    const {
+      getAllByText
+    } = render( /*#__PURE__*/React.createElement(Form, { ...formProperties
+    }));
+    const sections = getAllByText(/Details|Information/);
+    expect(sections[0]).toHaveTextContent('User Details');
+    expect(sections[1]).toHaveTextContent('Address Information');
+  });
+  test('Insert a new section at a specific position', () => {
+    const {
+      getAllByText,
+      rerender
+    } = render( /*#__PURE__*/React.createElement(Form, { ...formProperties
+    }));
+    const sections = getAllByText(/Details|Information/);
+    expect(sections[0]).toHaveTextContent('User Details');
+    expect(sections[1]).toHaveTextContent('Address Information');
+    const updatedProperties = { ...formProperties,
+      sections: [{
+        id: '1',
+        title: 'User Details',
+        description: '',
+        fields: [],
+        isVisible: true
+      }, {
+        id: '3',
+        title: 'Order Summary',
+        description: '',
+        fields: [],
+        isVisible: true
+      }, {
+        id: '2',
+        title: 'Address Information',
+        description: '',
+        fields: [],
+        isVisible: true
+      }]
+    };
+    rerender( /*#__PURE__*/React.createElement(Form, { ...updatedProperties
+    }));
+    const updatedSections = getAllByText(/Details|Summary|Information/);
+    expect(updatedSections[0]).toHaveTextContent('User Details');
+    expect(updatedSections[1]).toHaveTextContent('Order Summary');
+    expect(updatedSections[2]).toHaveTextContent('Address Information');
+  });
+  test('Delete a section', () => {
+    const {
+      getAllByText,
+      getByText,
+      queryByText,
+      rerender
+    } = render( /*#__PURE__*/React.createElement(Form, { ...formProperties
+    }));
+    const sections = getAllByText(/Details|Information/);
+    expect(sections[0]).toHaveTextContent('User Details');
+    expect(sections[1]).toHaveTextContent('Address Information');
+    const updatedProperties = { ...formProperties,
+      sections: [{
+        id: '1',
+        title: 'User Details',
+        description: '',
+        fields: [],
+        isVisible: true
+      }]
+    };
+    rerender( /*#__PURE__*/React.createElement(Form, { ...updatedProperties
+    }));
+    expect(getByText('User Details')).toBeInTheDocument();
+    expect(queryByText('Address Information')).not.toBeInTheDocument();
+  }); // Loading tests
+
+  test('Display loading indicator during form loading', () => {
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Form, { ...formProperties,
+      isLoading: true
+    }));
+    expect(getByText('Loading...')).toBeInTheDocument();
+  });
+  test('No loading indicator when form is not loading', () => {
+    const {
+      queryByText
+    } = render( /*#__PURE__*/React.createElement(Form, { ...formProperties,
+      isLoading: false
+    }));
+    expect(queryByText('Loading...')).not.toBeInTheDocument();
+  });
+});