@zohodesk/library-platform 1.1.6 → 1.1.7-exp.1

package/es/library/dot/components/table-list/frameworks/ui/sub-components/row/Row.js

@@ -49,7 +49,7 @@ function RowView(_ref, ref) {
     key: id,
     ref: ref,
     testId: id,
-    $flag_padding: !isSelectionEnabled && !isReorderEnabled,
+    $flag_padding: false,
     $flag_active: isSelected,
     $flag_hasHighlighter: isKeyboardControlsEnabled,
     $flag_isHighlighted: isFocussed,
@@ -60,7 +60,7 @@ function RowView(_ref, ref) {
       }
     }),
     customStyle: {
-      tableList: isSelectionEnabled || isReorderEnabled ? style.row : '',
+      tableList: style.row,
       $pointer: style[`rowCursor_${cursor}`]
     }
   }, renderReorderer({

package/es/library/dot/legacy-to-new-arch/breadcrumb/frameworks/ui/Breadcrumb.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import BreadcrumbProperties from "../../../../../../cc/breadcrumb/Properties";
+import BreadcrumbEvents from "../../../../../../cc/breadcrumb/Events";
+import BreadcrumbView from "./BreadcrumbView";
+let Breadcrumb = createCustomComponent({
+  name: "Breadcrumb",
+  View: BreadcrumbView,
+  properties: BreadcrumbProperties,
+  events: BreadcrumbEvents,
+  eventHandlers: {}
+});
+export default Breadcrumb;

package/es/library/dot/legacy-to-new-arch/breadcrumb/frameworks/ui/BreadcrumbView.js

@@ -0,0 +1,47 @@
+import React from "react";
+import Separator from "@zohodesk/dot/es/Separator/Separator";
+import BreadcrumbItem from "./sub-components/BreadcrumbItem"; // @ts-ignore
+
+import style from "./css/Breadcrumb.module.css";
+
+function BreadcrumbView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    items
+  } = state.properties;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: style.wrapper
+  }, /*#__PURE__*/React.createElement(Separator, {
+    type: "slash",
+    shrink: true,
+    customClass: {
+      customSeparator: style.separator
+    }
+  }, items.map(_ref2 => {
+    let {
+      id,
+      text,
+      isLink,
+      iconName,
+      isActive
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(BreadcrumbItem, {
+      key: id,
+      id: id,
+      text: text,
+      isLink: isLink,
+      iconName: iconName,
+      isActive: isActive,
+      dispatch: dispatch
+    });
+  })));
+}
+
+export default BreadcrumbView;

package/es/library/dot/legacy-to-new-arch/breadcrumb/frameworks/ui/css/Breadcrumb.module.css

@@ -0,0 +1,19 @@
+.wrapper, .itemContainer {
+    max-width: 100% 
+}
+
+.itemContainer {
+    column-gap: var(--zd_size4) ;
+}
+
+.separator {
+    --separator_fontSize: 14px;
+    margin: 0 var(--zd_size10) ;
+}
+
+.buttonStyle {
+    --button_font_size: 14px;
+    --button_padding: 0px;
+    --button_letter_spacing: 0px;
+    max-width: 100% ;
+}

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

@@ -0,0 +1,58 @@
+import React from "react";
+import Icon from "@zohodesk/icons/es/Icon";
+import Flex from "@zohodesk/layout/es/Flex/Flex";
+import Typography from "@zohodesk/components/es/Typography/Typography";
+import Button from "@zohodesk/components/es/Button/Button";
+import BreadcrumbConstants from "../../../../../../../cc/breadcrumb/Constants"; // @ts-ignore
+
+import style from "./../css/Breadcrumb.module.css";
+
+function BreadcrumbItem(_ref) {
+  let {
+    id,
+    text,
+    isLink,
+    iconName,
+    iconSize = '14',
+    isActive,
+    dispatch
+  } = _ref;
+
+  const renderTitle = (text, isLink, isActive) => {
+    return isLink ? /*#__PURE__*/React.createElement(Button, {
+      text: text,
+      title: text,
+      palette: 'plainPrimary',
+      isBold: false,
+      customClass: {
+        customButton: style.buttonStyle
+      }
+    }) : /*#__PURE__*/React.createElement(Typography, {
+      $ui_size: isActive ? '16' : '14',
+      $ui_weight: isActive ? 'semibold' : 'regular',
+      $flag_dotted: true,
+      $i18n_dataTitle: text,
+      $ui_tagName: 'span'
+    }, text);
+  };
+
+  const renderIcon = (iconName, iconSize) => /*#__PURE__*/React.createElement(Icon, {
+    name: iconName,
+    size: iconSize
+  });
+
+  return /*#__PURE__*/React.createElement(Flex, {
+    key: id,
+    $ui_displayMode: "inline",
+    $ui_alignItems: "center",
+    $ui_className: style.itemContainer,
+    $event_onClick: () => dispatch({
+      type: BreadcrumbConstants.BREADCRUMB_ITEM_CLICKED,
+      payload: {
+        id
+      }
+    })
+  }, !isLink && iconName && renderIcon(iconName, iconSize), renderTitle(text, isLink, isActive));
+}
+
+export default BreadcrumbItem;

package/es/library/dot/legacy-to-new-arch/icon-button/frameworks/ui/IconButton.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import IconButtonProperties from "../../../../../../cc/icon-button/Properties";
+import IconButtonEvents from "../../../../../../cc/icon-button/Events";
+import IconButtonView from "./IconButtonView";
+let IconButton = createCustomComponent({
+  name: "IconButton",
+  View: IconButtonView,
+  properties: IconButtonProperties,
+  events: IconButtonEvents,
+  eventHandlers: {}
+});
+export default IconButton;

package/es/library/dot/legacy-to-new-arch/icon-button/frameworks/ui/IconButtonView.js

@@ -0,0 +1,43 @@
+import React from "react";
+import IconButton from '@zohodesk/dot/es/IconButton/IconButton';
+import IconButtonConstants from "../../../../../../cc/icon-button/Constants";
+
+function IconButtonView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    palette,
+    iconSize,
+    size,
+    iconName,
+    isActive,
+    isDisabled,
+    hoverType,
+    title,
+    isBold
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(IconButton, {
+    eleRef: ref,
+    palette: palette,
+    iconSize: iconSize,
+    size: size,
+    iconName: iconName,
+    isActive: isActive,
+    isDisabled: isDisabled,
+    hoverType: hoverType,
+    title: title,
+    isBold: isBold,
+    onClick: () => {
+      dispatch({
+        type: IconButtonConstants.ICON_BUTTON_CLICKED
+      });
+    }
+  });
+}
+
+export default IconButtonView;

package/es/platform/client-actions/cc/action-event-mediator/Properties.js

@@ -6,6 +6,15 @@ export const actionsSchema = {
   items: actionSchema
 };
 export default {
+  testId: {
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    },
+    defaultValue: ''
+  },
   actions: {
     required: true,
     typeMetadata: {

package/es/platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediatorView.js

@@ -8,10 +8,12 @@ export default function ActionEventMediatorView(_ref, ref) {
   const {
     actions,
     renderComponentType,
-    gap
+    gap,
+    testId
   } = state.properties;
   const ActionRenderComponent = ComponentRegistry.get(renderComponentType) || RowActionsRenderer;
   return /*#__PURE__*/React.createElement(ActionRenderComponent, {
+    testId: testId,
     actions: actions,
     gap: gap,
     getRef: ref

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActionsRenderer.module.css

@@ -1,3 +1,7 @@
+.wrapper {
+    max-width: 100% 
+}
+
 .gap_small {
     gap: var(--zd_size4) 
 }

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActionsRendererView.js

@@ -11,13 +11,16 @@ function RowActionsRendererView(_ref, ref) {
   } = _ref;
   const {
     actions,
-    gap
+    gap,
+    testId
   } = state.properties;
   return /*#__PURE__*/React.createElement(Flex, {
     ref: ref,
+    testId: testId,
+    customId: testId,
     $ui_displayMode: "inline",
     $ui_alignItems: "center",
-    $ui_className: `${gap !== ActionViewGap.NONE ? style[`gap_${gap}`] : ''}`
+    $ui_className: `${style.wrapper} ${gap !== ActionViewGap.NONE ? style[`gap_${gap}`] : ''}`
   }, actions.map((action, index) => {
     return /*#__PURE__*/React.createElement(DynamicActionComponent, {
       action: action,

package/es/platform/components/form-connected/adapters/resources/SmartFormResources.js

@@ -0,0 +1,210 @@
+import ZFormRepository from "../../../../zform/adapters/gateway/FormRepository";
+import ZFormPresenter from "../../../../zform/adapters/presenter/FormPresenter";
+import ZFormValidator from "../../../../zform/frameworks/validation-rules/Validator";
+import ZFormLayoutRuleApplier from "../../../../zform/frameworks/layout-rules/LayoutRuleApplier";
+import HideSectionUseCase from "../../../../zform/applications/usecases/HideSectionUseCase";
+import ShowSectionUseCase from "../../../../zform/applications/usecases/ShowSectionUseCase";
+import ShowFieldUseCase from "../../../../zform/applications/usecases/ShowFieldUseCase";
+import HideFieldUseCase from "../../../../zform/applications/usecases/HideFieldUseCase";
+import SetFieldValueUseCase from "../../../../zform/applications/usecases/SetFieldValueUseCase";
+import SetFieldsValuesUseCase from "../../../../zform/applications/usecases/SetFieldsValuesUseCase";
+import InsertFieldUseCase from "../../../../zform/applications/usecases/InsertFieldUseCase";
+import DeleteFieldUseCase from "../../../../zform/applications/usecases/DeleteFieldUseCase";
+import UpdateFieldUseCase from "../../../../zform/applications/usecases/UpdateFieldUseCase";
+import GetFieldValueUseCase from "../../../../zform/applications/usecases/GetFieldValueUseCase";
+import SubmitUseCase from "../../../../zform/applications/usecases/SubmitUseCase";
+import { AbstractResource } from "../../../../sdk/application/interfaces/gateways/AbstractResource";
+import { SdkContracts } from "../../../../../cc/form-connected/SdkContract"; // hack
+
+import { validations as defaultFieldValidations } from "../../../../../library/behaviours/field-validation/frameworks/utils/FormBasicValidationAdaptor";
+export class SmartFormResources extends AbstractResource {
+  initialize() {}
+
+  destroy() {}
+
+  createUseCase(dependencies, UseCaseClass) {
+    var _usecase$updateDepend, _usecase$updateDepend2;
+
+    const {
+      state,
+      updateState
+    } = this.dependencies;
+    const usecase = new UseCaseClass(dependencies);
+    (_usecase$updateDepend = usecase.updateDependencies) === null || _usecase$updateDepend === void 0 ? void 0 : _usecase$updateDepend.call(usecase, state, updateState);
+    (_usecase$updateDepend2 = usecase.updateDependency) === null || _usecase$updateDepend2 === void 0 ? void 0 : _usecase$updateDepend2.call(usecase, state, updateState);
+    return usecase;
+  } // private getFormDependencies(): ZFormUseCaseDependencies {
+  //     const dependencies: ZFormUseCaseDependencies = {
+  //         repository: new ZFormRepository(),
+  //         presenter: new ZFormPresenter(),
+  //         validator: new ZFormValidator(),
+  //         layoutRuleApplier: new ZFormLayoutRuleApplier()
+  //     };
+  //     return dependencies;
+  // }
+
+
+  getFormDependencies() {
+    const dependencies = {
+      repository: new ZFormRepository(),
+      presenter: new ZFormPresenter(),
+      validator: new ZFormValidator(defaultFieldValidations),
+      // Hack Need to pass customValidators
+      layoutRuleApplier: new ZFormLayoutRuleApplier()
+    };
+    return dependencies;
+  }
+
+  hideSection(sectionName) {
+    this.validateInput('hideSection', {
+      sectionName
+    }, SdkContracts.hideSectionInputMeta);
+    const dependencies = this.getFormDependencies();
+    const usecase = this.createUseCase(dependencies, HideSectionUseCase);
+    usecase.execute({
+      sectionName
+    });
+  }
+
+  showSection(sectionName) {
+    this.validateInput('showSection', {
+      sectionName
+    }, SdkContracts.showSectionInputMeta);
+    const dependencies = this.getFormDependencies();
+    const usecase = this.createUseCase(dependencies, ShowSectionUseCase);
+    usecase.execute({
+      sectionName
+    });
+  }
+
+  hideField(fieldName) {
+    this.validateInput('hideField', {
+      fieldName
+    }, SdkContracts.hideFieldInputMeta);
+    const dependencies = this.getFormDependencies();
+    const usecase = this.createUseCase(dependencies, HideFieldUseCase);
+    usecase.execute({
+      fieldName
+    });
+  }
+
+  showField(fieldName) {
+    this.validateInput('showField', {
+      fieldName
+    }, SdkContracts.showFieldInputMeta);
+    const dependencies = this.getFormDependencies();
+    const usecase = this.createUseCase(dependencies, ShowFieldUseCase);
+    usecase.execute({
+      fieldName
+    });
+  }
+
+  setFieldValue(fieldName, newValue) {
+    this.validateInput('setFieldValue', {
+      fieldName,
+      newValue
+    }, SdkContracts.setFieldValueInputMeta);
+    const {
+      dispatch
+    } = this.dependencies;
+    const dependencies = this.getFormDependencies();
+    const usecase = this.createUseCase(dependencies, SetFieldValueUseCase);
+    usecase.execute({
+      fieldName,
+      newValue,
+      dispatch
+    });
+  }
+
+  setFieldsValue(fieldsValuesObj) {
+    this.validateInput('setFieldsValue', {
+      fieldsValuesObj
+    }, SdkContracts.setFieldsValueInputMeta);
+    const {
+      dispatch
+    } = this.dependencies;
+    const dependencies = this.getFormDependencies();
+    const usecase = this.createUseCase(dependencies, SetFieldsValuesUseCase);
+    usecase.execute({
+      fieldsValuesObj,
+      dispatch
+    });
+  }
+
+  insertField(input) {
+    this.validateInput('insertField', input, SdkContracts.insertFieldInputMeta);
+    const {
+      dispatch
+    } = this.dependencies;
+    const dependencies = this.getFormDependencies();
+    const usecase = this.createUseCase(dependencies, InsertFieldUseCase);
+    usecase.execute({ ...input,
+      dispatch
+    });
+  }
+
+  deleteField(fieldName) {
+    this.validateInput('deleteField', {
+      fieldName
+    }, SdkContracts.deleteFieldInputMeta);
+    const {
+      dispatch
+    } = this.dependencies;
+    const dependencies = this.getFormDependencies();
+    const usecase = this.createUseCase(dependencies, DeleteFieldUseCase);
+    usecase.execute({
+      fieldName,
+      dispatch
+    });
+  }
+
+  updateField(fieldName, fieldProperties) {
+    this.validateInput('updateField', {
+      fieldName,
+      fieldProperties
+    }, SdkContracts.updateFieldInputMeta);
+    const {
+      dispatch
+    } = this.dependencies;
+    const dependencies = this.getFormDependencies();
+    const usecase = this.createUseCase(dependencies, UpdateFieldUseCase);
+    usecase.execute({
+      fieldName,
+      fieldProperties,
+      dispatch
+    });
+  }
+
+  getFieldValue(fieldName) {
+    const {
+      getData,
+      setData
+    } = this.createCallback();
+    this.validateInput('getFieldValue', {
+      fieldName
+    }, SdkContracts.getFieldValueInputMeta);
+    const {
+      dispatch
+    } = this.dependencies;
+    const dependencies = this.getFormDependencies();
+    const usecase = this.createUseCase(dependencies, GetFieldValueUseCase);
+    usecase.execute({
+      fieldName,
+      callback: setData,
+      dispatch
+    });
+    return getData();
+  }
+
+  submit() {
+    const {
+      dispatch
+    } = this.dependencies;
+    const dependencies = this.getFormDependencies();
+    const usecase = this.createUseCase(dependencies, SubmitUseCase);
+    usecase.execute({
+      dispatch
+    });
+  }
+
+}

package/es/platform/components/form-connected/application/interfaces/ISmartFormResources.js

@@ -0,0 +1 @@
+export {};

package/es/platform/components/form-connected/frameworks/EventHandlersFactory.js

@@ -2,21 +2,28 @@ import SmartFormConstants from "../../../../cc/form-connected/Constants";
 import FormSdkFactory from "./FormSdkFactory";
 import FormConstants from "../../../../cc/form/Constants";
 import { ZFORM_FIELD_VALUE_CHANGED } from "../../../../bc/zform/Symbol";
+import { platformSDK } from "../../../sdk/frameworks/Sdk";
 const {
   SMART_FORM_FIELD_FOCUSED,
   SMART_FORM_FIELD_BLURRED,
   SMART_FORM_FIELD_VALUE_CHANGED
-} = SmartFormConstants;
+} = SmartFormConstants; // function createHandlerWithSdk(handler) {
+//   return input => {
+//     const { state, dispatch } = input;
+//     handler(input, FormSdkFactory.create({ state, dispatch }));
+//   };
+// }
 
 function createHandlerWithSdk(handler) {
   return input => {
     const {
-      state,
-      dispatch
+      state
     } = input;
-    handler(input, FormSdkFactory.create({
-      state,
-      dispatch
+    const instanceName = state.properties.instanceName;
+    handler({ ...input,
+      platformSDK
+    }, FormSdkFactory.create({
+      instanceName
     }));
   };
 }
@@ -31,7 +38,7 @@ export default class EventHandlersFactory {
 
   static create(eventHandlers) {
     const wrapped = EventHandlersFactory.createWrapped(eventHandlers);
-    return { ...wrapped,
+    return {
       [FormConstants.FORM_FIELD_FOCUSED]: _ref => {
         let {
           action,
@@ -84,7 +91,8 @@ export default class EventHandlersFactory {
             value
           }
         });
-      }
+      },
+      ...wrapped
     };
   }
 

package/es/platform/components/form-connected/frameworks/FormConnectedFactory.js

@@ -3,28 +3,52 @@ import { createCustomComponent } from "../../../../library/custom-component";
 import ZHttpBehaviourFactory from "../../../zhttp/frameworks/ZHttpBehaviourFactory";
 import RecordBehaviourFactory from "../../../zrecord/frameworks/RecordBehaviourFactory";
 import FormConnectedView from "./FormConnectedView";
-import defaultDataBroker from "../../../data-source";
+import defaultDataSource from "../../../data-source";
 import DataBrokerBehaviourFactory from "../../../zdata-source/frameworks/DataBrokerBehaviourFactory";
 import FormTranslator from "../../../zform/adapters/presenter/FormTranslator";
 import ZFormBehaviourFactory from "../../../zform/frameworks/ui/ZFormBehaviourFactory";
 import FieldValidationBehaviourFactory from "../../../../library/behaviours/field-validation/frameworks/ui/FieldValidationBehaviourFactory";
 import EventHandlersfactory from "./EventHandlersFactory";
+import SdkBehaviourFactory from "../../../sdk-behaviour/frameworks/SdkBehaviourFactory";
+import ResourceNamesEnum from "../../../../bc/sdk/ResourceNamesEnum";
+import { sdkRegistry } from "../../../sdk/frameworks/SdkRegistry";
+import { SmartFormResources } from "../adapters/resources/SmartFormResources";
+import ClientActionsBehaviourFactory from "../../../client-actions/behaviour/zclient-actions/frameworks/ClientActionsBehaviourFactory";
+sdkRegistry.registerResource({
+  resourceName: ResourceNamesEnum.SMART_FORM,
+  resource: SmartFormResources
+});
+
+function combineDataSourceWithDefault(dataSource) {
+  return { ...defaultDataSource,
+    ...dataSource,
+    httpTemplates: { ...defaultDataSource.httpTemplates,
+      ...(dataSource === null || dataSource === void 0 ? void 0 : dataSource.httpTemplates)
+    }
+  };
+}
+
 export default class FormConnectedFactory {
   static create(_ref) {
     let {
       name,
       customValidators,
-      dataBroker = defaultDataBroker,
+      dataSource,
       eventHandlers = {},
       View = FormConnectedView
     } = _ref;
+
+    const _dataSource = combineDataSourceWithDefault(dataSource);
+
     return createCustomComponent({
       name: name,
       View: View,
       properties: Properties,
       eventHandlers: EventHandlersfactory.create(eventHandlers),
       transformState: FormTranslator.transformState,
-      behaviours: [ZHttpBehaviourFactory.create(), DataBrokerBehaviourFactory.create(), RecordBehaviourFactory.create(dataBroker.httpTemplates), FieldValidationBehaviourFactory.create(), ZFormBehaviourFactory.create({
+      behaviours: [SdkBehaviourFactory.create([ResourceNamesEnum.SMART_FORM]), ClientActionsBehaviourFactory.create({
+        getClientActions: _dataSource.httpTemplates.getClientActions
+      }), ZHttpBehaviourFactory.create(), DataBrokerBehaviourFactory.create(), RecordBehaviourFactory.create(_dataSource.httpTemplates), FieldValidationBehaviourFactory.create(), ZFormBehaviourFactory.create({
         customValidators
       })]
     });

package/es/platform/components/form-connected/frameworks/FormConnectedView.js

@@ -8,12 +8,24 @@ function View(_ref, ref) {
   } = _ref;
   const {
     isLoading,
-    sections = []
+    sections = [],
+    isHeaderEnabled,
+    isFooterEnabled,
+    headerLeftActions,
+    headerRightActions,
+    footerLeftActions,
+    footerRightActions
   } = state.viewModel;
   return /*#__PURE__*/React.createElement(Form, {
     getRef: ref,
     isLoading: isLoading,
-    sections: sections
+    sections: sections,
+    isHeaderEnabled: isHeaderEnabled,
+    isFooterEnabled: isFooterEnabled,
+    headerLeftActions: headerLeftActions,
+    headerRightActions: headerRightActions,
+    footerLeftActions: footerLeftActions,
+    footerRightActions: footerRightActions
   });
 }