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

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;

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

@@ -0,0 +1,78 @@
+import React from 'react';
+import CheckboxConstants from "../../../../../../../cc/checkbox/Constants";
+import ErrorMessage from '@zohodesk/dot/es/form/fields/ValidationMessage/ValidationMessage';
+import FieldController from '@zohodesk-private/desk-components/es/form/FieldController/FieldController';
+import Label from "../../../../../legacy-to-new-arch/label/frameworks/ui/Label";
+import Checkbox from "../../../../../legacy-to-new-arch/checkbox/frameworks/ui/Checkbox"; // @ts-ignore
+
+import style from "../../../../form/frameworks/ui/css/Form.module.css";
+
+function cursorStyle(_ref) {
+  let {
+    disabled,
+    readonly
+  } = _ref;
+  if (disabled) return style.cursor_not_allowed;
+  if (readonly) return style.cursor_default;
+  return style.cursor_pointer;
+}
+
+function CheckboxView(_ref2, ref) {
+  let {
+    state,
+    helpers
+  } = _ref2;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    id,
+    label,
+    value,
+    actions,
+    errorMessage,
+    disabled,
+    readonly,
+    required
+  } = state.viewModel;
+  const isEditable = !disabled && !readonly;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: style.fieldWrapper
+  }, /*#__PURE__*/React.createElement(FieldController, {
+    $ui_className: `${style.checkboxField} ${cursorStyle({
+      disabled,
+      readonly
+    })}`,
+    $event_onFocus: isEditable ? () => dispatch({
+      type: CheckboxConstants.CHECKBOX_FOCUSED
+    }) : null,
+    $event_onBlur: isEditable ? () => dispatch({
+      type: CheckboxConstants.CHECKBOX_BLURED
+    }) : null,
+    $tagAttributes_container: isEditable ? {
+      onClick: () => dispatch({
+        type: CheckboxConstants.CHECKBOX_TOGGLED
+      })
+    } : undefined
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.checkboxWrapper
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    id: id,
+    checked: value,
+    required: required,
+    disabled: disabled,
+    readonly: readonly
+  })), /*#__PURE__*/React.createElement(Label, {
+    for: id,
+    label: label,
+    actions: actions,
+    isMandatory: required
+  })), errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, {
+    text: errorMessage,
+    htmlFor: id,
+    type: "secondary"
+  }) : null);
+}
+
+export default CheckboxView;

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

@@ -0,0 +1,68 @@
+import CheckboxConstants from "../../../../../../../cc/checkbox/Constants";
+import FieldConstants from "../../../../../../../cc/fields/field/Constants";
+
+class EventHandlersFactory {
+  static create() {
+    return {
+      [CheckboxConstants.CHECKBOX_FOCUSED]: this.handleFieldFocus,
+      [CheckboxConstants.CHECKBOX_BLURED]: this.handleFieldBlur,
+      [CheckboxConstants.CHECKBOX_TOGGLED]: this.handleFieldChange
+    };
+  }
+
+  static handleFieldFocus(_ref) {
+    let {
+      state,
+      dispatch
+    } = _ref;
+    const {
+      name
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_FOCUSED,
+      payload: {
+        fieldName: name
+      },
+      metaData: {}
+    });
+  }
+
+  static handleFieldBlur(_ref2) {
+    let {
+      state,
+      dispatch
+    } = _ref2;
+    const {
+      name
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_BLURRED,
+      payload: {
+        fieldName: name
+      }
+    });
+  }
+
+  static handleFieldChange(_ref3) {
+    let {
+      state,
+      dispatch,
+      action
+    } = _ref3;
+    const {
+      name,
+      value
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_CHANGED,
+      payload: {
+        fieldName: name,
+        value: !value
+      },
+      metaData: {}
+    });
+  }
+
+}
+
+export default EventHandlersFactory;

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

@@ -0,0 +1,78 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import Checkbox from "../Checkbox";
+import { testFieldErrorMessage, testFieldTooltip, testFieldValueChange } from "../../../../field/__test__/common.js";
+describe('Checkbox Field Component', () => {
+  it('should render the Checkbox component', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Checkbox, {
+      value: true
+    }));
+    const checkbox = getByRole('checkbox');
+    expect(checkbox).toBeInTheDocument();
+  });
+  it('should display the correct label', () => {
+    // HACK: The checkbox is not rendered with input type. So, going with test id.
+    const {
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(Checkbox, {
+      label: "Test Label"
+    }));
+    const label = getByTestId('label');
+    expect(label).toHaveTextContent('Test Label');
+  });
+  testFieldErrorMessage(Checkbox, {
+    value: true,
+    id: 'checkbox-field'
+  });
+  testFieldTooltip(Checkbox, {
+    value: true,
+    id: 'checkbox-field'
+  });
+  it('should be required when required prop is true', () => {
+    // HACK: The checkbox is not rendered with input type. So, going with aria-required.
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Checkbox, {
+      required: true
+    }));
+    const checkbox = getByRole('checkbox');
+    expect(checkbox).toHaveAttribute('aria-required', 'true');
+  });
+  it('should be disabled when disabled prop is true', () => {
+    // HACK: The checkbox is not rendered with input type. So, going with aria-disabled.
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Checkbox, {
+      disabled: true
+    }));
+    const checkbox = getByRole('checkbox');
+    expect(checkbox).toHaveAttribute('aria-disabled', 'true');
+  });
+  it('should be readonly when readonly prop is true', () => {
+    // HACK: The checkbox is not rendered with input type. So, going with aria-readonly.
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Checkbox, {
+      readonly: true
+    }));
+    const checkbox = getByRole('checkbox');
+    expect(checkbox).toHaveAttribute('aria-readonly', 'true');
+  });
+  testFieldValueChange({
+    Component: Checkbox,
+    props: {
+      id: 'checkbox-field'
+    },
+    value: true,
+    triggerChange: _ref => {
+      let {
+        getByRole
+      } = _ref;
+      const checkbox = getByRole('checkbox');
+      checkbox.click();
+    }
+  });
+});

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

@@ -0,0 +1,81 @@
+// import TransFormState from '../../adapters/presenter/TransFormState';
+function isValidInteger() {
+  let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  const rejexPattern = new RegExp('^(\\d+\\.?\\d*|\\.\\d+)$');
+  const isValidInt = rejexPattern.test(value);
+  return isValidInt;
+}
+
+function formatCurrency(amount) {
+  let symbol = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  let currencyLocale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'US';
+  const isFormatNeeded = typeof amount === 'string' && amount.match(/(e|E)/) != null;
+  let number = isFormatNeeded ? Number(amount) : amount;
+  const isValidInt = isValidInteger(number);
+
+  if (isValidInt && symbol) {
+    number = number.toString();
+    const currencyArr = new Intl.NumberFormat(`en-${currencyLocale}`).formatToParts(number);
+    let currencyVal = '';
+    currencyArr.map(val => {
+      if (val.type == 'group') {
+        currencyVal += ',';
+      } else if (val.type == 'integer') {
+        currencyVal += val.value;
+      }
+    });
+
+    if (number.indexOf('.') != -1) {
+      const fractionVal = number.split(".")[1];
+
+      for (let i = fractionVal.length - 1; i >= 0; i--) {
+        if (fractionVal[i] != 0) {
+          currencyVal += `.${fractionVal.slice(0, i + 1)}`;
+          break;
+        }
+      }
+    }
+
+    return `${symbol}${currencyVal}`;
+  }
+
+  return number || amount;
+}
+
+export function TransformState(state) {
+  const {
+    ePHI,
+    tooltip,
+    value,
+    currencySymbol,
+    currencyLocale
+  } = state.properties;
+  let actions = [];
+
+  if (tooltip) {
+    actions.push({
+      type: 'InfoIcon',
+      eventMappings: [],
+      properties: {
+        tooltip
+      }
+    });
+  }
+
+  if (ePHI) {
+    actions.push({
+      type: 'EPHITag',
+      properties: {},
+      eventMappings: []
+    });
+  }
+
+  const formattedValue = formatCurrency(value, currencySymbol, currencyLocale);
+  return { ...state,
+    formattedValue,
+    properties: { ...state.properties,
+      actions,
+      value
+    }
+  };
+}

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

@@ -0,0 +1,14 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import { CurrencyFieldProperties } from "../../../../../../../cc/fields";
+import CurrencyView from "./CurrencyView";
+import { TransformState } from "./../../adapters/presenter/TransformState";
+import EventHandlersFactory from "./EventHandlerFactory";
+let PickList = createCustomComponent({
+  name: "Currency",
+  View: CurrencyView,
+  transformState: TransformState,
+  properties: CurrencyFieldProperties,
+  events: [],
+  eventHandlers: EventHandlersFactory.create()
+});
+export default PickList;

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import Label from "../../../../../legacy-to-new-arch/label/frameworks/ui/Label";
+import TextBox from "../../../../../legacy-to-new-arch/textbox/frameworks/ui/TextBox";
+import ErrorMessage from '@zohodesk/dot/es/form/fields/ValidationMessage/ValidationMessage'; // @ts-ignore
+
+import style from "../../../../form/frameworks/ui/css/Form.module.css";
+
+function CurrencyView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    id,
+    label,
+    value,
+    placeholder,
+    errorMessage,
+    disabled,
+    readonly,
+    required,
+    actions
+  } = state.properties;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: style.fieldWrapper
+  }, /*#__PURE__*/React.createElement(Label, {
+    for: id,
+    label: label,
+    actions: actions,
+    isMandatory: required
+  }), /*#__PURE__*/React.createElement("div", {
+    className: style.field
+  }, /*#__PURE__*/React.createElement(TextBox, {
+    id: id,
+    value: value,
+    placeholder: placeholder,
+    disabled: disabled,
+    readonly: readonly,
+    required: required
+  })), errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, {
+    text: errorMessage,
+    htmlFor: id,
+    type: "secondary"
+  }) : null);
+}
+
+export default CurrencyView;

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

@@ -0,0 +1,70 @@
+import { TextBoxConstants } from "../../../../../../../cc/textbox";
+import FieldConstants from "../../../../../../../cc/fields/field/Constants";
+
+class EventHandlersFactory {
+  static create() {
+    return {
+      [TextBoxConstants.TEXTBOX_FOCUSED]: this.handleTextBoxFocused,
+      [TextBoxConstants.TEXTBOX_BLURED]: this.handleTextBoxBlurred,
+      [TextBoxConstants.TEXTBOX_CHANGED]: this.handleTextBoxChanged
+    };
+  }
+
+  static handleTextBoxFocused(_ref) {
+    let {
+      state,
+      dispatch
+    } = _ref;
+    const {
+      name
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_FOCUSED,
+      payload: {
+        fieldName: name
+      },
+      metaData: {}
+    });
+  }
+
+  static handleTextBoxBlurred(_ref2) {
+    let {
+      state,
+      dispatch
+    } = _ref2;
+    const {
+      name
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_BLURRED,
+      payload: {
+        fieldName: name
+      }
+    });
+  }
+
+  static handleTextBoxChanged(_ref3) {
+    let {
+      state,
+      dispatch,
+      action
+    } = _ref3;
+    const {
+      value
+    } = action.payload;
+    const {
+      name
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_CHANGED,
+      payload: {
+        fieldName: name,
+        value
+      },
+      metaData: {}
+    });
+  }
+
+}
+
+export default EventHandlersFactory;