@zohodesk/library-platform 1.1.1 → 1.1.2

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

@@ -0,0 +1,70 @@
+import TextAreaConstants from "../../../../../../../cc/textarea/Constants";
+import FieldConstants from "../../../../../../../cc/fields/field/Constants";
+
+class EventHandlersFactory {
+  static create() {
+    return {
+      [TextAreaConstants.TEXTAREA_FOCUSED]: this.handleFocus,
+      [TextAreaConstants.TEXTAREA_BLURED]: this.handleBlur,
+      [TextAreaConstants.TEXTAREA_CHANGED]: this.handleChange
+    };
+  }
+
+  static handleFocus(_ref) {
+    let {
+      state,
+      dispatch
+    } = _ref;
+    const {
+      name
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_FOCUSED,
+      payload: {
+        fieldName: name
+      },
+      metaData: {}
+    });
+  }
+
+  static handleBlur(_ref2) {
+    let {
+      state,
+      dispatch
+    } = _ref2;
+    const {
+      name
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_BLURRED,
+      payload: {
+        fieldName: name
+      }
+    });
+  }
+
+  static handleChange(_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;

package/es/library/dot/components/form-fields/textarea/frameworks/ui/TextArea.js

@@ -0,0 +1,14 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import TextAreaProperties from "../../../../../../../cc/fields/text/Properties";
+import TextAreaView from "./TextAreaView";
+import { TransformState } from "../../adapters/presenter/TransformState";
+import EventHandlerFactory from "./EventHandlerFactory";
+const TextArea = createCustomComponent({
+  name: 'FormTextAreaField',
+  View: TextAreaView,
+  transformState: TransformState,
+  properties: TextAreaProperties,
+  eventHandlers: EventHandlerFactory.create(),
+  behaviours: []
+});
+export default TextArea;

package/es/library/dot/components/form-fields/textarea/frameworks/ui/TextAreaView.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import Label from "../../../../../legacy-to-new-arch/label/frameworks/ui/Label";
+import TextArea from "../../../../../legacy-to-new-arch/text-area/frameworks/ui/TextArea";
+import ErrorMessage from '@zohodesk/dot/es/form/fields/ValidationMessage/ValidationMessage'; // @ts-ignore
+
+import style from "../../../../form/frameworks/ui/css/Form.module.css";
+
+function TextAreaView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    id,
+    label,
+    value,
+    placeholder,
+    actions,
+    errorMessage,
+    disabled,
+    readonly,
+    required
+  } = 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(TextArea, {
+    id: id,
+    placeholder: placeholder,
+    value: value,
+    required: required,
+    disabled: disabled,
+    readonly: readonly
+  })), errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, {
+    text: errorMessage,
+    htmlFor: id,
+    type: "secondary"
+  }) : null);
+}
+
+export default TextAreaView;

package/es/library/dot/components/form-fields/textarea/frameworks/ui/__test__/TextArea.test.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import TextArea from "../TextArea"; // import {screen} from '@testing-library/dom'
+
+import { testCommonFieldAttributes, testDisabledTextKindFieldAttributes, testReadOnlyTextKindFieldAttributes, testTextKindFieldValueChange } from "../../../../field/__test__/common.js";
+describe('TextArea Field Component', () => {
+  it('should render the TextArea component', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(TextArea, null));
+    const input = getByRole('textbox');
+    expect(input).toBeInTheDocument();
+  });
+  it('should display placeholder text', () => {
+    const placeholderText = 'Enter text here';
+    const {
+      getByPlaceholderText
+    } = render( /*#__PURE__*/React.createElement(TextArea, {
+      placeholder: placeholderText
+    }));
+    const input = getByPlaceholderText(placeholderText);
+    expect(input).toBeInTheDocument();
+  });
+  testCommonFieldAttributes(TextArea, {
+    id: 'textarea-field'
+  }); // Note: Currently in DOT library, required option is not supported for TextArea
+  // testRequiredTextKindFieldAttributes(TextArea, { id: 'textarea-field' });
+
+  testDisabledTextKindFieldAttributes(TextArea, {
+    id: 'textarea-field'
+  });
+  testReadOnlyTextKindFieldAttributes(TextArea, {
+    id: 'textarea-field'
+  });
+  testTextKindFieldValueChange(TextArea, {
+    id: 'textarea-field',
+    value: ''
+  }, 'abc123'); // it('should accept alphanumeric characters', () => {
+  //   const { getByRole } = render(<TextArea />);
+  //   const input = getByRole('textArea');
+  //   fireEvent.change(input, { target: { value: 'abc123' } });
+  //   expect(input.value).toBe('abc123');
+  // });
+  // it('should accept input within character limit', () => {
+  //   const { getByRole } = render(<TextArea maxLength={255} />);
+  //   const input = getByRole('textArea');
+  //   const text = 'a'.repeat(255);
+  //   fireEvent.change(input, { target: { value: text } });
+  //   expect(input.value).toBe(text);
+  // });
+  // it('should reject input exceeding character limit', () => {
+  //   const { getByRole } = render(<TextArea maxLength={255} />);
+  //   const input = getByRole('textArea');
+  //   const text = 'a'.repeat(256);
+  //   fireEvent.change(input, { target: { value: text } });
+  //   // expect(input.value).toBe(text.slice(0, 255));
+  // });
+});

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

@@ -0,0 +1,32 @@
+// import TransFormState from '../../adapters/presenter/TransFormState';
+export function TransformState(state) {
+  const {
+    ePHI,
+    tooltip
+  } = state.properties;
+  let actions = [];
+
+  if (tooltip) {
+    actions.push({
+      type: 'InfoIcon',
+      eventMappings: [],
+      properties: {
+        tooltip
+      }
+    });
+  }
+
+  if (ePHI) {
+    actions.push({
+      type: 'EPHITag',
+      properties: {},
+      eventMappings: []
+    });
+  }
+
+  return { ...state,
+    properties: { ...state.properties,
+      actions
+    }
+  };
+}

package/es/library/dot/components/form-fields/textbox/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;

package/es/library/dot/components/form-fields/textbox/frameworks/ui/TextBox.js

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

package/es/library/dot/components/form-fields/textbox/frameworks/ui/TextBoxView.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 TextBoxView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    id,
+    label,
+    value,
+    placeholder,
+    actions,
+    errorMessage,
+    disabled,
+    readonly,
+    required
+  } = 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,
+    placeholder: placeholder,
+    value: value,
+    required: required,
+    disabled: disabled,
+    readonly: readonly
+  })), errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, {
+    text: errorMessage,
+    htmlFor: id,
+    type: "secondary"
+  }) : null);
+}
+
+export default TextBoxView;

package/es/library/dot/components/form-fields/textbox/frameworks/ui/__test__/TextBox.test.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import TextBox from "../TextBox";
+import { testEPHIFieldVisibility, testCommonFieldAttributes, testRequiredTextKindFieldAttributes, testDisabledTextKindFieldAttributes, testReadOnlyTextKindFieldAttributes, testTextKindFieldValueChange } from "../../../../field/__test__/common.js";
+describe('TextBox Field Component', () => {
+  it('should render the TextBox component', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(TextBox, null));
+    const input = getByRole('textbox');
+    expect(input).toBeInTheDocument();
+  });
+  it('should display placeholder text', () => {
+    const placeholderText = 'Enter text here';
+    const {
+      getByPlaceholderText
+    } = render( /*#__PURE__*/React.createElement(TextBox, {
+      placeholder: placeholderText
+    }));
+    const input = getByPlaceholderText(placeholderText);
+    expect(input).toBeInTheDocument();
+  });
+  testCommonFieldAttributes(TextBox, {
+    id: 'text-box-field'
+  });
+  testRequiredTextKindFieldAttributes(TextBox, {
+    id: 'text-box-field'
+  });
+  testDisabledTextKindFieldAttributes(TextBox, {
+    id: 'text-box-field'
+  });
+  testReadOnlyTextKindFieldAttributes(TextBox, {
+    id: 'text-box-field'
+  });
+  testEPHIFieldVisibility(TextBox, {
+    id: 'text-box-field'
+  });
+  testTextKindFieldValueChange(TextBox, {
+    id: 'text-box-field',
+    value: ''
+  }, 'abc123');
+  return;
+  it('should accept alphanumeric characters', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(TextBox, null));
+    const input = getByRole('textbox');
+    fireEvent.change(input, {
+      target: {
+        value: 'abc123'
+      }
+    });
+    expect(input.value).toBe('abc123');
+  });
+  it('should accept input within character limit', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(TextBox, {
+      maxLength: 255
+    }));
+    const input = getByRole('textbox');
+    const text = 'a'.repeat(255);
+    fireEvent.change(input, {
+      target: {
+        value: text
+      }
+    });
+    expect(input.value).toBe(text);
+  });
+  it('should reject input exceeding character limit', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(TextBox, {
+      maxLength: 255
+    }));
+    const input = getByRole('textbox');
+    const text = 'a'.repeat(256);
+    fireEvent.change(input, {
+      target: {
+        value: text
+      }
+    }); // expect(input.value).toBe(text.slice(0, 255));
+  });
+});

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

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

package/es/library/dot/components/form-fields/url/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.handleFieldFocus,
+      [TextBoxConstants.TEXTBOX_BLURED]: this.handleFieldBlur,
+      [TextBoxConstants.TEXTBOX_CHANGED]: 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 {
+      value
+    } = action.payload;
+    const {
+      name
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_CHANGED,
+      payload: {
+        fieldName: name,
+        value
+      },
+      metaData: {}
+    });
+  }
+
+}
+
+export default EventHandlersFactory;

package/es/library/dot/components/form-fields/url/frameworks/ui/Url.js

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

package/es/library/dot/components/form-fields/url/frameworks/ui/UrlView.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 UrlView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    id,
+    label,
+    value,
+    placeholder,
+    actions,
+    errorMessage,
+    disabled,
+    readonly,
+    required
+  } = state.viewModel;
+  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,
+    placeholder: placeholder,
+    value: value,
+    disabled: disabled,
+    readonly: readonly,
+    required: required
+  })), errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, {
+    text: errorMessage,
+    htmlFor: id,
+    type: "secondary"
+  }) : null);
+}
+
+export default UrlView;

package/es/library/dot/components/form-fields/url/frameworks/ui/__test__/Url.test.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import Url from "../Url";
+import { testEPHIFieldVisibility, testCommonFieldAttributes, testRequiredTextKindFieldAttributes, testDisabledTextKindFieldAttributes, testReadOnlyTextKindFieldAttributes, testTextKindFieldValueChange } from "../../../../field/__test__/common.js";
+describe('Url Field Component', () => {
+  it('should render the Url component', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Url, null));
+    const input = getByRole('textbox');
+    expect(input).toBeInTheDocument();
+  });
+  it('should display placeholder text', () => {
+    const placeholderText = 'Enter url here';
+    const {
+      getByPlaceholderText
+    } = render( /*#__PURE__*/React.createElement(Url, {
+      placeholder: placeholderText
+    }));
+    const input = getByPlaceholderText(placeholderText);
+    expect(input).toBeInTheDocument();
+  });
+  testCommonFieldAttributes(Url, {
+    id: 'url-field'
+  });
+  testRequiredTextKindFieldAttributes(Url, {
+    id: 'url-field'
+  });
+  testDisabledTextKindFieldAttributes(Url, {
+    id: 'url-field'
+  });
+  testReadOnlyTextKindFieldAttributes(Url, {
+    id: 'url-field'
+  });
+  testEPHIFieldVisibility(Url, {
+    id: 'url-field'
+  });
+  testTextKindFieldValueChange(Url, {
+    id: 'url-field',
+    value: ''
+  }, 'abc123.com');
+});

package/es/library/dot/components/section/adapters/presenter/TransFormState.js

@@ -0,0 +1,26 @@
+/* eslint-disable @zohodesk/architecturerules/return-void */
+export default function TransFormState(state) {
+  const {
+    fields
+  } = state.properties;
+
+  if (Array.isArray(fields) === false) {
+    return state;
+  }
+
+  const slotContract = fields.filter(field => field.isVisible).map(field => {
+    const {
+      type,
+      ...properties
+    } = field;
+    return {
+      type,
+      properties
+    };
+  });
+  return { ...state,
+    properties: { ...state.properties,
+      fields: slotContract
+    }
+  };
+}