@zohodesk/library-platform 1.0.0 → 1.0.2-exp.1.0

package/es/library/custom-component/applications/entities-factory/BehavioursFactory.ts

@@ -0,0 +1,39 @@
+import Component from '../../../../cc/component/component';
+import Behaviour from '../../domain/entities/Behaviour';
+import IBehaviour from '../../domain/entities/interfaces/IBehaviour';
+import EventHandlersFactory from './EventHandlersFactory';
+import PropertiesFactory from './PropertiesFactory';
+
+/* eslint-disable max-lines-per-function, @zohodesk/architecturerules/no-returnStatement-rule */
+class BehavioursFactory {
+  static create(input: Component): Array<IBehaviour> {
+    /* eslint-disable-next-line @zohodesk/architecturerules/no-defaultProps-rule */
+    let behaviours = input.behaviours || [];
+
+    return behaviours.map(behaviour => {
+      // DEPRECATED: Remove while refactoring actionHandlers
+      if (behaviour.actionHandlers) {
+        behaviour.eventHandlers = behaviour.actionHandlers;
+      }
+      const { eventHandlers } = behaviour;
+      let newEventHandlers = Object.keys(eventHandlers).reduce((res, next) => {
+        let key = next;
+        if (['MOUNT', 'UN_MOUNT', 'UPDATE_PROPERTIES'].includes(next)) {
+          key = input.name + '#' + next;
+        }
+        res[key] = eventHandlers[next];
+        return res;
+      }, {});
+
+      return new Behaviour({
+        name: behaviour.name,
+        eventHandlers: EventHandlersFactory(newEventHandlers),
+        properties: PropertiesFactory({
+          properties: behaviour.properties
+        }),
+        setIntialState: behaviour.setInitialState
+      });
+    });
+  }
+}
+export default BehavioursFactory;

package/es/library/custom-component/applications/entities-factory/ComponentFactory.ts

@@ -0,0 +1,49 @@
+import HelpersCC from '../../../../cc/component/Helpers';
+import ComponentCC from '../../../../cc/component/component';
+import Component from '../../domain/entities/Component';
+import LifeCycleAction from '../../domain/entities/LifeCycleAction';
+import State from '../../domain/entities/State';
+import EventHandlersFactory from './EventHandlersFactory';
+import BehavioursFactory from './BehavioursFactory';
+import PropertiesFactory from './PropertiesFactory';
+
+/* eslint-disable-next-line @zohodesk/architecturerules/no-returnStatement-rule */
+let defaultTransformState = state => state;
+
+/* eslint-disable-next-line @zohodesk/architecturerules/no-returnStatement-rule */
+function initializeComponent(input: ComponentCC): Component {
+  let component = new Component();
+  component.setName(input.name);
+  component.setLifeCycleAction(new LifeCycleAction(input.name));
+  component.setBehaviours(BehavioursFactory.create(input));
+  component.setProperties(
+    PropertiesFactory({
+      properties: input.properties,
+      componentName: input.name
+    })
+  );
+  return component;
+}
+
+function handleEventHandlers(input: ComponentCC): void {
+  // DEPRECATED: Remove while refactoring actionHandlers
+  if (input.actionHandlers) {
+    input.eventHandlers = input.actionHandlers;
+  }
+}
+
+function finalizeComponent(component: Component, input: ComponentCC, helpers: HelpersCC): void {
+  component.setEventHandlers(EventHandlersFactory(input.eventHandlers));
+  component.setState(new State());
+  component.createEventHandlers(helpers);
+  component.setStateInitializer(input.setInitialState);
+  component.setTransformer(input.transformState || defaultTransformState);
+}
+
+/* eslint-disable-next-line @zohodesk/architecturerules/no-returnStatement-rule */
+export default function createComponentFactory(input: ComponentCC, helpers: HelpersCC): Component {
+  let component = initializeComponent(input);
+  handleEventHandlers(input);
+  finalizeComponent(component, input, helpers);
+  return component;
+}

package/es/library/custom-component/applications/entities-factory/EventHandlersFactory.ts

@@ -0,0 +1,10 @@
+import EventHandlers from '../../domain/entities/EventHandlers';
+
+export default function EventHandlersFactory(eventHandlers): EventHandlers {
+  let eventHandlerMap = new Map();
+  Object.keys(eventHandlers).forEach(key => {
+    eventHandlerMap.set(key, eventHandlers[key]);
+  });
+
+  return new EventHandlers(eventHandlerMap);
+}

package/es/library/custom-component/applications/entities-factory/PropertiesFactory.ts

@@ -0,0 +1,17 @@
+import Properties from '../../domain/entities/Properties';
+import Property from '../../domain/entities/Property';
+
+export default function PropertiesFactory({ properties, componentName }): Properties {
+  let propertyMap = new Map();
+  Object.keys(properties).forEach((key) => {
+    let propertyData = properties[key];
+    if(propertyData.name === undefined) {
+      propertyData.name = key;
+    }
+    let property = new Property(propertyData);
+    propertyMap.set(key, property);
+  });
+
+  let propertiesObject = new Properties(propertyMap, componentName);
+  return propertiesObject;
+}

package/es/library/custom-component/applications/interfaces/InputDependencies.ts

@@ -0,0 +1,13 @@
+import IEventManager from './gateways/IEventManager';
+import Repository from './gateways/IRepository';
+import IValidator from './gateways/IJSONValidator';
+import OutputBoundary from './output/OutputBoundary';
+
+type InputDependencies = {
+  presenter: OutputBoundary;
+  repository: Repository;
+  jsonValidator: IValidator;
+  eventManager: IEventManager;
+};
+
+export default InputDependencies;

package/es/library/custom-component/applications/interfaces/OutputDependencies.ts

@@ -0,0 +1,6 @@
+type OutputDependencies = {
+  updateState: Function;
+  setInitialState: Function;
+};
+
+export default OutputDependencies;

package/es/library/custom-component/applications/interfaces/UseCase.ts

@@ -0,0 +1,5 @@
+interface UseCase<T> {
+  execute(input: T): void;
+}
+
+export default UseCase;

package/es/library/custom-component/applications/interfaces/gateways/IEventManager.ts

@@ -0,0 +1,12 @@
+interface IElement {
+  addEventListener: (key: string, fn: Function) => void;
+  removeEventListener: (key: string, fn: Function) => void;
+}
+interface IEventManager {
+  getElement: () => IElement;
+  setElement: (element: IElement) => void;
+  subscribe: (actionHandlers: Map<string, Array<Function>>) => void;
+  unSubscribe: (actionHandlers: Map<string, Array<Function>>) => void;
+  dispatch: (event) => void;
+}
+export default IEventManager;

package/es/library/custom-component/applications/interfaces/gateways/IJSONValidator.ts

@@ -0,0 +1,2 @@
+type IJSONValidator = ({ propertySchema, propertyValue }: { propertySchema: JSON; propertyValue: any }) => boolean;
+export default IJSONValidator;

package/es/library/custom-component/applications/interfaces/gateways/IRepository.ts

@@ -0,0 +1,9 @@
+import Component from '../../../domain/entities/interfaces/IComponent';
+
+interface IRepository {
+  save: (value: Component) => void;
+  getComponent: () => Component;
+  clear: () => void;
+}
+
+export default IRepository;

package/es/library/custom-component/applications/interfaces/gateways/IService.ts

@@ -0,0 +1,16 @@
+import UseCase from '../UseCase';
+import DispatchInputModel from '../input/DispatchInputModel';
+import InitailizeInputModel from '../input/InitailizeInputModel';
+import UpdatePropertiesInputModel from '../input/UpdatePropertiesInputModel';
+import UpdateStateInputModel from '../input/UpdateStateInputModel';
+
+interface IService {
+  initializeUseCase: UseCase<InitailizeInputModel>;
+  mountUseCase: UseCase<void>;
+  unmountUseCase: UseCase<void>;
+  updatePropertiesUseCase: UseCase<UpdatePropertiesInputModel>;
+  updateStateUseCase: UseCase<UpdateStateInputModel>;
+  dispatchUseCase: UseCase<DispatchInputModel>;
+}
+
+export default IService;

package/es/library/custom-component/applications/interfaces/input/DispatchInputModel.ts

@@ -0,0 +1,4 @@
+import { ActionHandlerParams } from '@cc/component/ActionHandlers';
+
+type DispatchInputModel = ActionHandlerParams;
+export default DispatchInputModel;

package/es/library/custom-component/applications/interfaces/input/InitailizeInputModel.ts

@@ -0,0 +1,6 @@
+import Helpers from '@cc/component/Helpers';
+import Component from '@cc/component/component';
+
+type InitailizeInputModel = Component & { helpers: Helpers; newProps: any };
+
+export default InitailizeInputModel;

package/es/library/custom-component/applications/interfaces/input/UpdatePropertiesInputModel.ts

@@ -0,0 +1,3 @@
+type UpdatePropertiesInputModel = any;
+
+export default UpdatePropertiesInputModel;

package/es/library/custom-component/applications/interfaces/input/UpdateStateInputModel.ts

@@ -0,0 +1,3 @@
+type UpdateStateInputModel = any;
+
+export default UpdateStateInputModel;

package/es/library/custom-component/applications/interfaces/output/OutputBoundary.ts

@@ -0,0 +1,6 @@
+interface OutputBoundary {
+  setError: (error: Array<string>) => void;
+  render: (state: any) => void;
+}
+
+export default OutputBoundary;

package/es/library/custom-component/applications/usecases/AbstractUseCase.ts

@@ -0,0 +1,9 @@
+import InputDependencies from '../interfaces/InputDependencies';
+import UseCase from '../interfaces/UseCase';
+
+abstract class AbstractUseCase<InputModel> implements UseCase<InputModel> {
+  constructor(protected dependencies: InputDependencies) {}
+  abstract execute(inputModel: InputModel): void;
+}
+
+export default AbstractUseCase;

package/es/library/custom-component/applications/usecases/DispatchUseCase.ts

@@ -0,0 +1,18 @@
+import DispatchInputModel from '../interfaces/input/DispatchInputModel';
+import AbstractUseCase from './AbstractUseCase';
+
+class DispatchUseCase extends AbstractUseCase<DispatchInputModel> {
+  public execute(input: DispatchInputModel): void {
+    let { repository, presenter, eventManager } = this.dependencies;
+    let component = repository.getComponent();
+
+    try {
+      let action = component.constructAction(input);
+      eventManager.dispatch(action);
+    } catch (e) {
+      presenter.setError([e]);
+    }
+  }
+}
+
+export default DispatchUseCase;

package/es/library/custom-component/applications/usecases/InitializeUseCase.ts

@@ -0,0 +1,21 @@
+import createComponent from '../entities-factory/ComponentFactory';
+import InitailizeInputModel from '../interfaces/input/InitailizeInputModel';
+import AbstractUseCase from './AbstractUseCase';
+
+class InitializeUseCase extends AbstractUseCase<InitailizeInputModel> {
+  public execute(input: InitailizeInputModel): void {
+    let { presenter, jsonValidator, repository } = this.dependencies;
+    let component = createComponent(input, input.helpers);
+    try {
+      component.init(jsonValidator, input.newProps);
+      let state = component.getState();
+      presenter.render(state);
+    } catch (e) {
+      presenter.setError(e);
+    } finally {
+      repository.save(component);
+    }
+  }
+}
+
+export default InitializeUseCase;

package/es/library/custom-component/applications/usecases/MountUseCase.ts

@@ -0,0 +1,18 @@
+import AbstractUseCase from './AbstractUseCase';
+
+class MountUsecase extends AbstractUseCase<void> {
+  public execute() {
+    let { repository, presenter, eventManager } = this.dependencies;
+    let component = repository.getComponent();
+    let mountAction = component.getMountAction();
+    let eventHandlers = component.getEventHandlersWrapper();
+    try {
+      eventManager.subscribe(eventHandlers);
+      eventManager.dispatch(mountAction);
+    } catch (e) {
+      presenter.setError([e]);
+    }
+  }
+}
+
+export default MountUsecase;

package/es/library/custom-component/applications/usecases/UnmountUseCase.ts

@@ -0,0 +1,18 @@
+import AbstractUseCase from './AbstractUseCase';
+
+class UnmountUsecase extends AbstractUseCase<void> {
+  public execute() {
+    let { repository, presenter, eventManager } = this.dependencies;
+    let component = repository.getComponent();
+    let eventHanlders = component.getEventHandlers();
+    let unmountAction = component.getUnmountAction();
+    try {
+      eventManager.dispatch(unmountAction);
+      eventManager.unSubscribe(eventHanlders);
+      repository.clear();
+    } catch (e) {
+      presenter.setError([]);
+    }
+  }
+}
+export default UnmountUsecase;

package/es/library/custom-component/applications/usecases/UpdatePropertyUseCase.ts

@@ -0,0 +1,22 @@
+import UpdatePropertiesInputModel from '../interfaces/input/UpdatePropertiesInputModel';
+import AbstractUseCase from './AbstractUseCase';
+
+class UpdatePropertyUseCase extends AbstractUseCase<UpdatePropertiesInputModel> {
+  public execute(newProps: UpdatePropertiesInputModel) {
+    let { repository, jsonValidator, eventManager, presenter } = this.dependencies;
+    let component = repository.getComponent();
+    let properties = component.getProperties();
+    let isUpdated = component.updateProperties(jsonValidator, newProps);
+    if (isUpdated) {
+      let updatedProperties = component.getProperties();
+      let state = component.getState();
+      let updatePropertyAction = component.getPropertyUpdateAction({
+        currentProperties: updatedProperties,
+        previousProperties: properties
+      });
+      eventManager.dispatch(updatePropertyAction);
+      presenter.render(state);
+    }
+  }
+}
+export default UpdatePropertyUseCase;

package/es/library/custom-component/applications/usecases/UpdateStateUseCase.ts

@@ -0,0 +1,13 @@
+import UpdateStateInputModel from '../interfaces/input/UpdateStateInputModel';
+import AbstractUseCase from './AbstractUseCase';
+
+class UpdateStateUseCase extends AbstractUseCase<UpdateStateInputModel> {
+  public execute(newState: UpdateStateInputModel) {
+    let { repository, presenter } = this.dependencies;
+    let component = repository.getComponent();
+    component.updateState(newState);
+    let state = component.getState();
+    presenter.render(state);
+  }
+}
+export default UpdateStateUseCase;

package/es/library/custom-component/domain/entities/Behaviour.ts

@@ -0,0 +1,39 @@
+import setInitialState from '@cc/component/setInitialState';
+import IBehaviour from './interfaces/IBehaviour';
+import IEventHandlers from './interfaces/IEventHandlers';
+import IProperties from './interfaces/IProperties';
+class Behaviour implements IBehaviour {
+  private name: string;
+  private properties: IProperties;
+  private setIntialState: setInitialState;
+  private eventHandlers: IEventHandlers;
+
+  constructor({ name, properties, setIntialState, eventHandlers }) {
+    this.name = name;
+    this.properties = properties;
+    this.setIntialState = setIntialState;
+    this.eventHandlers = eventHandlers;
+  }
+  getName(): string {
+    return this.name;
+  }
+  getProperties(): IProperties {
+    return this.properties;
+  }
+
+  getEventHandlers(): IEventHandlers {
+    return this.eventHandlers;
+  }
+  getInitialState(): object {
+    if (this.setIntialState) {
+      return {
+        [this.name]: this.setIntialState({
+          properties: this.getProperties().getAllPropertiesValue()
+        })
+      };
+    } else {
+      return { [this.name]: {} };
+    }
+  }
+}
+export default Behaviour;

package/es/library/custom-component/domain/entities/Component.ts

@@ -0,0 +1,209 @@
+import setInitialState from '@cc/component/setInitialState';
+import transferState from '@cc/component/transferState';
+import Events from './Events';
+import EventHandler from './EventHandler';
+import State from './State';
+import IEventHandlers from './interfaces/IEventHandlers';
+import IBehaviour from './interfaces/IBehaviour';
+import IComponent from './interfaces/IComponent';
+import IEventWrapper from './interfaces/IEventWrapper';
+import ILifeCycleAction from './interfaces/ILifeCycleAction';
+import IProperties from './interfaces/IProperties';
+
+export default class Component implements IComponent {
+  private _name: string;
+  private _events: Array<Events>;
+  private _properties: IProperties;
+  private _lifeCycleAction: ILifeCycleAction;
+  private _eventHandlers: IEventHandlers;
+  private _tranformer: transferState;
+  private _stateInitializer: setInitialState;
+  private _state: State;
+  private _eventHandlersWrapper: Map<string, Array<IEventWrapper>>;
+  private _behaviours: Array<IBehaviour>;
+  private _behavioursProperties: any;
+
+  constructor() {
+    this._behavioursProperties = {};
+  }
+  private getAllBehavioursPropertiesWithValue() {
+    let output = {};
+    Object.keys(this._behavioursProperties).forEach((value, key) => {
+      output[value] = this._behavioursProperties[value].getValue()
+    });
+    return output;
+  }
+  private mergeStateAndProps() {
+    return {
+      ...this._state.getState(),
+      properties: { ...this._properties.getAllPropertiesValue(), ...this.getAllBehavioursPropertiesWithValue() }
+    };
+  }
+  public getEventHandlers() {
+    return this._eventHandlers.getEventHandlers();
+  }
+
+  public getMountAction() {
+    return this._lifeCycleAction.getMountAction();
+  }
+  public getUnmountAction() {
+    return this._lifeCycleAction.getUnmountAction();
+  }
+  public getPropertyUpdateAction(payload) {
+    return this._lifeCycleAction.getUpdatePropertiesAction(payload);
+  }
+  public getState() {
+    let state = this._tranformer(this.mergeStateAndProps());
+    return state;
+  }
+
+  public setProperties(properties: IProperties) {
+    this._properties = properties;
+  }
+
+  public setEvents(_events: Array<Events>) {
+    this._events = _events;
+  }
+
+  public setLifeCycleAction(lifeCycleAction: ILifeCycleAction) {
+    this._lifeCycleAction = lifeCycleAction;
+  }
+
+  public setEventHandlers(eventHandlers) {
+    this._eventHandlers = eventHandlers;
+  }
+
+  public setName(name: string) {
+    this._name = name;
+  }
+  public setTransformer(transformer: transferState) {
+    this._tranformer = transformer;
+  }
+  public setState(state) {
+    this._state = state;
+  }
+  public setStateInitializer(_stateInitializer: setInitialState) {
+    this._stateInitializer = typeof _stateInitializer !== 'function' ? input => input : _stateInitializer;
+  }
+  public setBehaviours(behaviours: Array<IBehaviour>) {
+    this._behaviours = behaviours;
+    /* store behaviour properties */
+    this._behaviours.forEach(behaviour => {
+      behaviour.getProperties().data &&
+        behaviour.getProperties().data.forEach(obj => {
+          this._behavioursProperties[obj.getName()] = obj.clone();
+        });
+    });
+  }
+
+  public updateProperties(jsonValidator, newProps): boolean {
+    Object.keys(newProps).forEach(key => {
+      if (this._behavioursProperties[key]) {
+        let property = this._behavioursProperties[key];
+        let optionalSchema = property.getTypeMetadata().schema;
+        let isValid = this._properties.validateSingleProperty(jsonValidator, key, newProps[key], optionalSchema);
+        if (isValid) {
+          property.updateValue(newProps[key]);
+        }
+        /* return isValid */
+      } else if (this._properties.findProperty(key)) {
+        let property = this._properties.findProperty(key);
+        let schema = property.getTypeMetadata().schema;
+        let isValid = this._properties.validateSingleProperty(jsonValidator, key, newProps[key], schema);
+        if (isValid) {
+          property.updateValue(newProps[key]);
+        }
+        /* return isValid */
+      } else {
+        throw new Error(`props '${key}' not exist `);
+      }
+    });
+
+        /* return this._properties.updateAllPropertiesValue(jsonValidator, newProps); */
+
+    return true
+  }
+
+
+  
+  public updateState(state) {
+    this._state.updateState(state);
+  }
+
+  private getAllBehavioursInitialState() {
+    let allBehavioursInitialState = {};
+    this._behaviours.map(behaviour => {
+      allBehavioursInitialState = { ...allBehavioursInitialState, ...behaviour.getInitialState() };
+    });
+    return allBehavioursInitialState;
+  }
+
+  public init(jsonValidator, newProps) {
+    this.updateProperties(jsonValidator, newProps);
+    const properties = this._properties.getAllPropertiesValue();
+    const behavioursProperties = this.getAllBehavioursPropertiesWithValue();
+    const behaviours = this.getAllBehavioursInitialState();
+    let allProperties = { ...properties, ...behavioursProperties };
+    const initialState = this._stateInitializer({ properties: allProperties });
+    this.updateState({ ...initialState, behaviours });
+  }
+
+  public getProperties() {
+    return {...this._properties.getAllPropertiesValue(), ...this.getAllBehavioursPropertiesWithValue()}
+  }
+  public getEventHandlersWrapper() {
+    let boundEventHandlers = new Map<string, Array<Function>>();
+    this._eventHandlersWrapper.forEach((handlers, key) => {
+      let handlersFunction = handlers.map(handler => {
+        return handler.getEventHandler();
+      });
+      boundEventHandlers.set(key, handlersFunction);
+    });
+    return boundEventHandlers;
+  }
+  /* eslint-disable max-lines-per-function */
+  // TODO: Refactor this function to reduce the number of lines
+  public createEventHandlers(helpers) {
+    let eventHandlers = this._eventHandlers.getEventHandlers();
+    this._eventHandlersWrapper = new Map<string, Array<IEventWrapper>>();
+    let createActionToEventHandler = (eventHandlers, eventHandlerMap: Map<string, Array<IEventWrapper>>) => {
+      eventHandlers.forEach((actionHandler, key) => {
+        let eventHandler = new EventHandler(key, event => {
+          let state = this.getState();
+          let action = event.detail;
+          actionHandler({
+            action,
+            host: event.currentTarget,
+            state,
+            ...helpers
+          });
+        });
+        if (!eventHandlerMap.has(key)) {
+          let newHandlersArray = [];
+          newHandlersArray.push(eventHandler);
+          eventHandlerMap.set(key, newHandlersArray);
+        } else {
+          let existingHandlers = eventHandlerMap.get(key);
+          existingHandlers.push(eventHandler);
+          eventHandlerMap.set(key, existingHandlers);
+        }
+      });
+    };
+    createActionToEventHandler(eventHandlers, this._eventHandlersWrapper);
+
+    this._behaviours.forEach(behaviour => {
+      let eventHandlers = behaviour.getEventHandlers().getEventHandlers();
+      createActionToEventHandler(eventHandlers, this._eventHandlersWrapper);
+    });
+  }
+  public constructAction(input) {
+    let action = {
+      ...input,
+      payload: {
+        ...input.payload,
+        ...this._properties.getAppendToActionPayloadProperty()
+      }
+    };
+    return action;
+  }
+}

package/es/library/custom-component/domain/entities/DefaultAppendToActionPayload.ts

@@ -0,0 +1,10 @@
+export default {
+  name: 'appendToActionPayload',
+  required: false,
+  defaultValue: null,
+  typeMetadata: {
+    schema: {
+      type: 'object'
+    }
+  }
+};

package/es/library/custom-component/domain/entities/EventHandler.ts

@@ -0,0 +1,13 @@
+import IEventWrapper from './interfaces/IEventWrapper';
+
+export default class EventHandler implements IEventWrapper {
+  private handler: Function;
+  private key: string;
+  constructor(key, handler) {
+    this.key = key;
+    this.handler = handler;
+  }
+  getEventHandler() {
+    return this.handler;
+  }
+}

package/es/library/custom-component/domain/entities/EventHandlers.ts

@@ -0,0 +1,9 @@
+import IEventHandlers from './interfaces/IEventHandlers';
+
+class EventHandlers implements IEventHandlers {
+  constructor(private handlers: Map<string, Function>) {}
+  public getEventHandlers() {
+    return this.handlers;
+  }
+}
+export default EventHandlers;

package/es/library/custom-component/domain/entities/Events.ts

@@ -0,0 +1,18 @@
+import IPayload from './interfaces/IPayload';
+import IAction from './interfaces/IAction';
+
+class Action implements IAction {
+  private type: string;
+  private payload: IPayload;
+  constructor(type: string, payload: IPayload) {
+    this.type = type;
+    this.payload = payload;
+  }
+  public getType(): string {
+    return this.type;
+  }
+  public getPayload() {
+    return this.payload;
+  }
+}
+export default Action;