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

package/es/library/dot/legacy-to-new-arch/date/frameworks/ui/DateView.js

@@ -0,0 +1,56 @@
+import React from "react";
+import DateWidget from '@zohodesk/components/es/DateTime/DateWidget';
+import DateConstants from "../../../../../../cc/date/Constants";
+
+function DateView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    id,
+    value,
+    required,
+    disabled,
+    readonly,
+    pattern,
+    isTimeInculded,
+    timeZone
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(DateWidget, {
+    onFocus: () => dispatch({
+      type: DateConstants.DATE_FOCUSED
+    }),
+    onBlur: () => dispatch({
+      type: DateConstants.DATE_BLURED
+    }),
+    onSelect: val => dispatch({
+      type: DateConstants.DATE_CHANGED,
+      payload: {
+        value: val
+      }
+    }),
+    getRef: ref,
+    htmlId: id,
+    value: value,
+    isDateTime: isTimeInculded,
+    textBoxSize: "xmedium",
+    timeZone: timeZone,
+    dateFormat: pattern,
+    isReadOnly: readonly,
+    isDisabled: disabled,
+    isEditable: true,
+    customProps: {
+      TextBoxProps: {
+        TextBoxProps: {
+          required
+        }
+      }
+    }
+  });
+}
+
+export default DateView;

package/es/library/dot/legacy-to-new-arch/index.js

@@ -6,4 +6,4 @@ export { default as Link } from "./link/frameworks/ui/Link";
 export { default as Switch } from "./switch/frameworks/ui/Switch";
 export { default as Tags } from "./tags/frameworks/ui/Tags";
 export { default as Text } from "./text/frameworks/ui/Text";
-export { default as ActionIcon } from "./action-icon/ActionIcon";
+export { default as ActionIcon } from "./action-icon/frameworks/ui/ActionIcon";

package/es/library/dot/legacy-to-new-arch/label/frameworks/ui/Label.js

@@ -0,0 +1,10 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import LabelProperties from "../../../../../../cc/label/Properties";
+import LabelView from "./LabelView";
+let WrapLabel = createCustomComponent({
+  name: "Label",
+  View: LabelView,
+  properties: LabelProperties,
+  eventHandlers: {}
+});
+export default WrapLabel;

package/es/library/dot/legacy-to-new-arch/label/frameworks/ui/LabelView.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import Label from '@zohodesk/components/es/Label/Label'; // import ActionLocation from '@library/dot/components/action-location/frameworks/ui/ActionLocation';
+
+import ComponentRegistry from "../../../../../custom-component/frameworks/ui/ComponentRegistry";
+import LabelAction from "./sub-components/ui/LabelAction"; // @ts-ignore
+
+import style from "./css/Label.module.css";
+ComponentRegistry.register(`LabelAction`, LabelAction);
+
+function LabelView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  let {
+    label,
+    for: htmlFor,
+    isMandatory
+  } = state.properties; // const { actions }: LabelProperties = state.properties;
+
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(Label, {
+    text: label,
+    type: "subtitle",
+    htmlFor: htmlFor,
+    palette: isMandatory ? 'mandatory' : 'default',
+    customClass: `${style.label} ${isMandatory ? style.mandatory : ''}`
+  }));
+}
+
+export default LabelView;

package/es/library/dot/legacy-to-new-arch/label/frameworks/ui/css/Label.module.css

@@ -0,0 +1,21 @@
+.label {
+    --label_cursor: inherit;
+    display: inline;
+    vertical-align: middle
+}[dir=ltr] .label {
+    padding-right: var(--zd_size4) 
+}[dir=rtl] .label {
+    padding-left: var(--zd_size4) 
+}
+
+.mandatory::after {
+    content: '*'
+}
+
+[dir=ltr] .mandatory::after {
+    padding-left: var(--zd_size2) 
+}
+
+[dir=rtl] .mandatory::after {
+    padding-right: var(--zd_size2) 
+}

package/es/library/dot/legacy-to-new-arch/label/frameworks/ui/sub-components/ui/LabelAction.js

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

package/es/library/dot/legacy-to-new-arch/label/frameworks/ui/sub-components/ui/LabelActionView.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import ComponentRegistry from "../../../../../../../custom-component/frameworks/ui/ComponentRegistry";
+import ActionComponentMapping from "../../../../../../components/action-location/frameworks/ui/ActionComponentMapping"; // @ts-ignore
+
+import style from "./css/LabelAction.module.css";
+
+function LabelActionView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    actions
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(Flex, {
+    ref: ref,
+    $ui_displayMode: "inline",
+    $ui_alignItems: "center",
+    $ui_className: style.container
+  }, actions.map((action, index) => {
+    const {
+      type,
+      properties,
+      eventMappings
+    } = action;
+    const ActionUiType = ActionComponentMapping[type] || ComponentRegistry.get(type);
+    return /*#__PURE__*/React.createElement(ActionUiType, {
+      key: index,
+      ...properties,
+      appendToActionPayload: {
+        eventMappings
+      }
+    });
+  }));
+}
+
+;
+export default LabelActionView;

package/es/library/dot/legacy-to-new-arch/label/frameworks/ui/sub-components/ui/css/LabelAction.module.css

@@ -0,0 +1,4 @@
+.container {
+    vertical-align: middle;
+    gap: var(--zd_size4) 
+}

package/es/library/dot/legacy-to-new-arch/multi-select/frameworks/ui/MultiSelect.js

@@ -0,0 +1,11 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import { MultiSelectProperties, MultiSelectEvents } from "../../../../../../cc/multi-select";
+import MultiSelectView from "./MultiSelectView";
+const MultiSelect = createCustomComponent({
+  name: "MultiSelect",
+  View: MultiSelectView,
+  properties: MultiSelectProperties,
+  events: MultiSelectEvents,
+  eventHandlers: {}
+});
+export default MultiSelect;

package/es/library/dot/legacy-to-new-arch/multi-select/frameworks/ui/MultiSelectView.js

@@ -0,0 +1,55 @@
+import React from "react";
+import MultiSelect from "@zohodesk/components/es/MultiSelect/MultiSelect";
+import { MultiSelectConstants } from "../../../../../../cc/multi-select";
+
+function MultiSelectView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  let {
+    dispatch
+  } = helpers;
+  let {
+    id,
+    options,
+    value,
+    placeholder,
+    hasSelectAll,
+    required,
+    disabled,
+    readonly
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(MultiSelect, {
+    getRef: ref,
+    options: options,
+    selectedOptions: value,
+    htmlId: id,
+    placeHolder: placeholder,
+    isDisabled: disabled,
+    isReadOnly: readonly,
+    textField: "value",
+    valueField: "value",
+    needSelectAll: hasSelectAll,
+    size: "xmedium",
+    textBoxSize: "xmedium",
+    customProps: {
+      TextBoxIconProps: {
+        required
+      }
+    },
+    selectAllText: "Select All",
+    emptyMessage: "No options to select",
+    searchEmptyMessage: "No Results Found",
+    onChange: selectedValues => {
+      dispatch({
+        type: MultiSelectConstants.MULTISELECT_CHANGED,
+        payload: {
+          value: selectedValues
+        }
+      });
+    }
+  });
+}
+
+export default MultiSelectView;

package/es/library/dot/legacy-to-new-arch/select/frameworks/ui/Select.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import SelectProperties from "../../../../../../cc/select/Properties";
+import SelectEvents from "../../../../../../cc/select/Events";
+import SelectView from "./SelectView";
+let Select = createCustomComponent({
+  name: "Select",
+  View: SelectView,
+  properties: SelectProperties,
+  events: SelectEvents,
+  eventHandlers: {}
+});
+export default Select;

package/es/library/dot/legacy-to-new-arch/select/frameworks/ui/SelectView.js

@@ -0,0 +1,59 @@
+import React from "react";
+import Select from '@zohodesk/components/es/Select/Select';
+import SelectConstants from "../../../../../../cc/select/Constants";
+
+function SelectView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    id,
+    options,
+    value,
+    placeholder,
+    required,
+    disabled,
+    readonly
+  } = state.properties;
+  const transformedOptions = options.map(option => ({
+    id: option.value,
+    text: option.value
+  }));
+  return /*#__PURE__*/React.createElement(Select, {
+    getRef: ref,
+    options: transformedOptions,
+    onChange: value => dispatch({
+      type: SelectConstants.SELECT_CHANGED,
+      payload: {
+        value
+      }
+    }),
+    selectedValue: value,
+    i18nKeys: {
+      TextBox_ally_label: ''
+    },
+    textBoxSize: "xmedium",
+    htmlId: id,
+    placeHolder: placeholder,
+    isDisabled: disabled,
+    isReadOnly: readonly,
+    customProps: {
+      TextBoxProps: {
+        role: 'combobox',
+        required
+      }
+    } // HACK: The select is not rendered with "combobox" role.
+    ,
+    needSearch: transformedOptions.length > 4,
+    isDefaultSelectValue: false,
+    searchBoxPlaceHolder: "Search",
+    emptyMessage: "No Options Available",
+    searchEmptyMessage: "No Results Found"
+  });
+}
+
+export default SelectView;

package/es/library/dot/legacy-to-new-arch/table-field-components/lookup-field/frameworks/ui/LookupFieldView.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Avatar } from "../../../..";
+import Tag from '@zohodesk/components/es/Tag/Tag';
 export function LookupFieldView(_ref, ref) {
   let {
     state
@@ -8,11 +8,12 @@ export function LookupFieldView(_ref, ref) {
     name,
     photoURL
   } = state.properties.value;
-  return /*#__PURE__*/React.createElement(Avatar, {
+  return /*#__PURE__*/React.createElement(Tag, {
     getRef: ref,
-    name: name,
-    label: name,
-    imageSrc: photoURL,
-    tooltip: ""
+    text: name,
+    hasAvatar: true,
+    initial: name,
+    imageURL: photoURL,
+    tooltip: name
   });
 }

package/es/library/dot/legacy-to-new-arch/text-area/frameworks/ui/TextArea.js

@@ -0,0 +1,11 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import { TextAreaProperties, TextAreaEvents } from "../../../../../../cc";
+import TextAreaView from "./TextAreaView";
+let TextArea = createCustomComponent({
+  name: "TextArea",
+  View: TextAreaView,
+  properties: TextAreaProperties,
+  events: TextAreaEvents,
+  eventHandlers: {}
+});
+export default TextArea;

package/es/library/dot/legacy-to-new-arch/text-area/frameworks/ui/TextAreaView.js

@@ -0,0 +1,52 @@
+import React from "react";
+import Textarea from '@zohodesk/components/es/Textarea/Textarea';
+import TextAreaConstants from "../../../../../../cc/textarea/Constants";
+
+function TextAreaView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  let {
+    dispatch
+  } = helpers;
+  let {
+    id,
+    maxLength,
+    placeholder,
+    value,
+    required,
+    disabled,
+    readonly
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(Textarea, {
+    getRef: ref,
+    htmlId: id,
+    maxLength: maxLength,
+    placeHolder: placeholder,
+    text: value,
+    isReadOnly: readonly,
+    isDisabled: disabled,
+    animated: true,
+    size: "xsmall",
+    customAttributes: {
+      required
+    },
+    onFocus: () => dispatch({
+      type: TextAreaConstants.TEXTAREA_FOCUSED
+    }),
+    onBlur: () => dispatch({
+      type: TextAreaConstants.TEXTAREA_BLURED
+    }),
+    onChange: value => {
+      dispatch({
+        type: TextAreaConstants.TEXTAREA_CHANGED,
+        payload: {
+          value
+        }
+      });
+    }
+  });
+}
+
+export default TextAreaView;

package/es/library/dot/legacy-to-new-arch/textbox/frameworks/ui/TextBox.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import TextBoxProperties from "../../../../../../cc/textbox/Properties";
+import TextBoxEvents from "../../../../../../cc/textbox/Events";
+import TextBoxView from "./TextBoxView";
+let TextBox = createCustomComponent({
+  name: "TextBox",
+  View: TextBoxView,
+  properties: TextBoxProperties,
+  events: TextBoxEvents,
+  eventHandlers: {}
+});
+export default TextBox;

package/es/library/dot/legacy-to-new-arch/textbox/frameworks/ui/TextBoxView.js

@@ -0,0 +1,55 @@
+import React from "react";
+import TextBox from "@zohodesk/components/es/TextBoxIcon/TextBoxIcon";
+import TextBoxConstants from "../../../../../../cc/textbox/Constants";
+
+function TextBoxView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    id,
+    name,
+    type,
+    maxLength,
+    placeholder,
+    value,
+    required,
+    disabled,
+    readonly
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(TextBox, {
+    inputRef: ref,
+    htmlId: id,
+    name: name,
+    type: type,
+    maxLength: maxLength,
+    placeHolder: placeholder,
+    value: value,
+    isReadOnly: readonly,
+    isDisabled: disabled,
+    size: "xmedium",
+    onFocus: () => dispatch({
+      type: TextBoxConstants.TEXTBOX_FOCUSED
+    }),
+    onBlur: () => dispatch({
+      type: TextBoxConstants.TEXTBOX_BLURED
+    }),
+    customProps: {
+      TextBoxProps: {
+        required
+      }
+    },
+    onChange: value => dispatch({
+      type: TextBoxConstants.TEXTBOX_CHANGED,
+      payload: {
+        value
+      }
+    })
+  });
+}
+
+export default TextBoxView;

package/es/library/index.js

@@ -1,3 +1,8 @@
 export { default as ComponentRegistry } from "./custom-component/frameworks/ui/ComponentRegistry";
 export { default as createCustomComponent } from "./custom-component/frameworks/ui/CreateCustomComponent";
-export { default as TableList } from "./dot/components/table-list/frameworks/ui/TableList";
+export { default as TableList } from "./dot/components/table-list/frameworks/ui/TableList";
+export { default as Form } from "./dot/components/form/frameworks/ui/Form";
+export { default as Section } from "./dot/components/section/frameworks/ui/Section";
+import * as _FormLibraryFields from "./dot/components/form-fields";
+export { _FormLibraryFields as FormLibraryFields };
+export { ConvertSlotToComponent } from "./slot";

package/es/library/slot/frameworks/ui/ConvertSlotToComponent.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import ComponentRegistry from "../../../custom-component/frameworks/ui/ComponentRegistry";
+export default function ConvertSlotToComponent(slot) {
+  if (Array.isArray(slot) === false) {
+    return null;
+  }
+
+  return slot.map((component, index) => {
+    if (component == null) {
+      return null;
+    }
+
+    const {
+      type,
+      properties
+    } = component;
+    const Child = ComponentRegistry.get(type);
+    return /*#__PURE__*/React.createElement(Child, {
+      key: index,
+      ...properties
+    });
+  });
+}

package/es/library/slot/index.js

@@ -0,0 +1 @@
+export { default as ConvertSlotToComponent } from "./frameworks/ui/ConvertSlotToComponent";

package/es/library/translator-common/adapters/presenter/TransFormState.js

@@ -0,0 +1,6 @@
+/* eslint-disable @zohodesk/architecturerules/return-void */
+export default function TransFormState(state) {
+  return { ...state,
+    viewModel: state.properties
+  };
+}

package/es/library/translator-common/index.js

@@ -0,0 +1 @@
+export { default as TransFormState } from "./adapters/presenter/TransFormState";

package/es/platform/client-actions/Readme.md

@@ -0,0 +1,31 @@
+This package contains all elements regarding the CLIENT ACTIONS module.
+
+The module contains three main parts
+
+1. Behaviour - Contains the behaviours exposed by Client Actions
+
+2. Components - Contains the component exposed by Client Actions
+
+3. Translator - Contains the translators exposed by Client Actions
+ 
+ -----------------------------------------------------------------------------
+
+1. Behaviour
+    a. ClientActionBehaviour -> This behaviour is used to fetch the required client actions and returns the value to state
+
+2. Components
+    a. ActionEventMediator -> The main component that is exposed and need to be used by the components in order to render and execute client actions
+        - Inputs :  actions, renderComponentType
+        - Renders the rendercomponent based on the value (default renders row actions)
+
+    b. RowActionsRenderer -> This component renders the actions in Row wise.
+
+    c. DynamicActionComponent -> Renders the action component dynamically
+
+
+3. Translators 
+    a. action-translator -> the main translator the is used to translate the client actions, resolve them and get them in component action object format
+    
+    b. condition-resolver -> Resolved the conditions cases in the client actiosn. Returns only the actions that are passed
+
+    c. context-resover -> Resolved the context in all keys of client actions. 

package/es/platform/client-actions/bc/zclient-actions/Constants.js

@@ -0,0 +1,11 @@
+export const SET_CLIENTACTIONS = 'CLIENTACTION#SET_CLIENTACTIONS';
+export const CLIENTACTION_BEHAVIOUR_EXECUTE = 'CLIENTACTION_BEHAVIOUR#EXECUTE';
+export const CLIENTACTION_EXECUTE_SUCCEEDED = 'CLIENTACTION#EXECUTE_SUCCEEDED';
+export const CLIENTACTION_EXECUTE_FAILED = 'CLIENTACTION#EXECUTE_FAILED';
+export const CLIENTACTION_EXECUTE_SUCCEEDED_NO_CONTENT = 'CLIENTACTION#EXECUTE_SUCCEEDED_NO_CONTENT';
+export const CLIENTACTION_EXECUTE_SUCCESS_CALLBACK = 'CLIENTACTION#EXECUTE_SUCCESS_CALLBACK';
+export const CLIENTACTION_EXECUTE_SUCCESS_NO_CONTENT_CALLBACK = 'CLIENTACTION#EXECUTE_SUCCESS_NO_CONTENT_CALLBACK';
+export const CLIENTACTION_EXECUTE_FAIL_CALLBACK = 'CLIENTACTION#EXECUTE_FAIL_CALLBACK';
+export const ClientActionApiActionName = {
+  GET_CLIENTACTIONS: "getClientActions"
+};

package/es/platform/client-actions/bc/zclient-actions/EventHandlers.js

@@ -0,0 +1 @@
+import { CLIENTACTION_BEHAVIOUR_EXECUTE, CLIENTACTION_EXECUTE_FAIL_CALLBACK, CLIENTACTION_EXECUTE_FAILED, CLIENTACTION_EXECUTE_SUCCEEDED, CLIENTACTION_EXECUTE_SUCCEEDED_NO_CONTENT, CLIENTACTION_EXECUTE_SUCCESS_CALLBACK, CLIENTACTION_EXECUTE_SUCCESS_NO_CONTENT_CALLBACK } from "./Constants";

package/es/platform/client-actions/behaviour/zclient-actions/Readme.md

@@ -0,0 +1,31 @@
+Client Actions Behaviour
+
+This behaviour will allows your library components to fetch client actions for your users.
+
+# Implementation
+
+ClientActionsBehaviourFactory.create({ getClientActions: dataSource.httpTemplates.getClientActions })
+
+This above class should be implemeted in the behaviour props of your library components
+
+The user needs to passdown the dataSource into the behaviour in the format,
+
+1. getClientActions => Client Actions GET data broker template
+
+# Integration inside component
+
+We need to initialize or mount our behaviour with the component. Refer the eg used in List component below
+
+private createClientActionsFetchAction(): ActionModel {
+const props = this.createApiProps();
+return {
+type: CLIENTACTION_BEHAVIOUR_EXECUTE,
+payload: {
+actionName: 'getClientActions',
+props,
+apiName: 'clientActions'
+}
+};
+}
+
+The function createClientActionsFetchAction is called at Library component mount, which will mount client action behaviour and do the necessary processing.

package/es/platform/client-actions/behaviour/zclient-actions/adapters/controllers/ClientActionBehaviourExecutorController.js

@@ -0,0 +1,27 @@
+import AbstractController from "./AbstractController";
+export default class ClientActionBehaviourExecutorController extends AbstractController {
+  handle(event) {
+    const {
+      state,
+      updateState,
+      action,
+      dispatch
+    } = event;
+    const {
+      actionName,
+      props,
+      apiName
+    } = action.payload;
+    const {
+      executeActionBehaviourUseCase
+    } = this.service;
+    executeActionBehaviourUseCase.updateDependency(state, updateState);
+    executeActionBehaviourUseCase.execute({
+      dispatch,
+      apiName,
+      actionName,
+      props
+    });
+  }
+
+}

package/es/platform/client-actions/behaviour/zclient-actions/adapters/controllers/FailureController.js

@@ -0,0 +1,28 @@
+import AbstractController from "./AbstractController";
+export default class FailureController extends AbstractController {
+  handle(event) {
+    const {
+      state,
+      updateState,
+      action,
+      dispatch
+    } = event;
+    const {
+      metaData,
+      payload
+    } = action;
+    const {
+      error
+    } = payload;
+    const {
+      failureUseCase
+    } = this.service;
+    failureUseCase.updateDependency(state, updateState);
+    failureUseCase.execute({
+      dispatch,
+      error,
+      metaData
+    });
+  }
+
+}