@zohodesk/library-platform 1.1.1 → 1.1.2

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,9 @@
-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 TableColumnFilter from "../../../../legacy-to-new-arch/table-column-filter/frameworks/ui/TableColumnFilter";
 const ActionComponentMapping = {
-  'ActionIcon': ActionIcon,
-  'Button': Button,
-  'TableFilterDropdown': FilterDropdown
+  ['ActionIcon']: ActionIcon,
+  ['TableColumnSort']: TableColumnSort,
+  ['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;

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

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

@@ -0,0 +1,29 @@
+.fieldWrapper {
+    position: relative
+}
+
+.field {
+    margin-top: var(--zd_size5) ;
+}
+
+.multiSelectField {
+    margin-top: var(--zd_size2) 
+}
+
+.checkboxField {
+    composes: dflex alignFstart from '~@zohodesk/components/lib/common/common.module.css';
+    gap: var(--zd_size8) 
+}
+.checkboxWrapper {
+    margin-top: var(--zd_size3) 
+}
+
+.cursor_pointer {
+    cursor: pointer
+}
+.cursor_not_allowed {
+    cursor: not-allowed
+}
+.cursor_default {
+    cursor: default
+}

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import DefaultSection from "../../../../section/frameworks/ui/Section";
+import ComponentRegistry from "../../../../../../custom-component/frameworks/ui/ComponentRegistry";
+export default function Sections(_ref) {
+  let {
+    sections
+  } = _ref;
+  return sections.map(section => {
+    const {
+      id,
+      title,
+      description,
+      isVisible,
+      fields,
+      type
+    } = section;
+    if (isVisible === false) return null;
+    let Section = DefaultSection;
+
+    if (type) {
+      Section = ComponentRegistry.get(type);
+    }
+
+    return /*#__PURE__*/React.createElement(Section, {
+      key: id,
+      id: id,
+      title: title,
+      description: description,
+      fields: fields
+    });
+  });
+}

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

@@ -0,0 +1,22 @@
+export function TransformState(state) {
+  const {
+    tooltip
+  } = state.properties;
+  let actions = [];
+
+  if (tooltip) {
+    actions.push({
+      type: 'InfoIcon',
+      eventMappings: [],
+      properties: {
+        tooltip
+      }
+    });
+  }
+
+  return { ...state,
+    viewModel: { ...state.properties,
+      actions
+    }
+  };
+}

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

@@ -0,0 +1,14 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import CheckboxProperties from "../../../../../../../cc/fields/boolean/Properties";
+import CheckboxView from "./CheckboxView";
+import { TransformState } from "../../adapters/presenter/TransformState";
+import EventHandlersFactory from "./EventHandlerFactory";
+let Checkbox = createCustomComponent({
+  name: 'FormCheckboxField',
+  View: CheckboxView,
+  transformState: TransformState,
+  properties: CheckboxProperties,
+  eventHandlers: EventHandlersFactory.create(),
+  behaviours: []
+});
+export default Checkbox;