@zohodesk/library-platform 1.0.0-exp.1

package/src/library/behaviours/sort-by/adapters/gateway/Service.ts

@@ -0,0 +1,15 @@
+import { AbstractUseCase } from '../../usecases/interactors/AbstractUseCase';
+import SortBy from '../../usecases/interactors/SortBy';
+import IService from '../../usecases/interfaces/gateways/IService';
+import UseCaseDependencies from '../../usecases/interfaces/UseCaseDependencies';
+import SortByInputModel from '../../usecases/interfaces/input/SortByInputModel';
+
+class Service implements IService {
+  sortByUseCase: SortBy;
+
+  constructor(dependencies: UseCaseDependencies) {
+    this.sortByUseCase = new SortBy(dependencies);
+  }
+}
+
+export default Service;

package/src/library/behaviours/sort-by/adapters/presenter/Presenter.ts

@@ -0,0 +1,23 @@
+import { IPresenter } from '../../usecases/interfaces/output/IPresenter';
+import SortByOutputModel from '../../usecases/interfaces/output/SortByOutputModel';
+
+export default class Presenter implements IPresenter {
+  private updateState: Function;
+  private state: any;
+
+  updateDependencies(state: any, updateState: Function) {
+    this.state = state;
+    this.updateState = updateState;
+  }
+
+  updateSortBy(sortBy: SortByOutputModel): void {
+    this.state = {
+      ...this.state,
+      behaviours: {
+        ...this.state.behaviours,
+        sortBy
+      }
+    };
+    this.updateState(this.state);
+  }
+}

package/src/library/behaviours/sort-by/entities/SortBy.ts

@@ -0,0 +1,38 @@
+import SortOrderEnum from '../../../../bc/sort-by/SortOrderEnum';
+import ISortBy from './interfaces/ISortBy';
+
+class SortBy implements ISortBy {
+  constructor(
+    private id: string,
+    private name: string,
+    private order: SortOrderEnum
+  ) {}
+
+  private toggleSort() {
+    if (this.order === SortOrderEnum.ASC) {
+      this.order = SortOrderEnum.DES;
+    } else {
+      this.order = SortOrderEnum.ASC;
+    }
+  }
+
+  private resetSortBy(id: string, name: string) {
+    this.id = id;
+    this.name = name;
+    this.order = SortOrderEnum.ASC;
+  }
+
+  toObject() {
+    return { id: this.id, name: this.name, order: this.order };
+  }
+
+  doSorting(id: string, name: string) {
+    if (this.id === id) {
+      this.toggleSort();
+    } else {
+      this.resetSortBy(id, name);
+    }
+  }
+}
+
+export default SortBy;

package/src/library/behaviours/sort-by/entities/interfaces/ISortBy.ts

@@ -0,0 +1,8 @@
+import SortOrder from '@bc/sort-by/SortOrderEnum';
+
+interface ISortBy {
+  toObject(): { id: string; name: string; order: SortOrder };
+  doSorting(id: string, name: string): void;
+}
+
+export default ISortBy;

package/src/library/behaviours/sort-by/frameworks/ui/ActionsHandlerFactory.ts

@@ -0,0 +1,21 @@
+import SortByActionHandlers from '../../../../../bc/sort-by/ActionHandlers';
+import { SORTBY_SORT } from '../../../../../bc/sort-by/Constants';
+import SortByController from '../../adapters/controllers/SortBy';
+import Repository from '../../adapters/gateway/Repository';
+import Service from '../../adapters/gateway/Service';
+import Presenter from '../../adapters/presenter/Presenter';
+
+// TODO: Rename as EventHandlersFactory
+class ActionsHandlersFactory {
+  static create(): SortByActionHandlers {
+    const presenter = new Presenter();
+    const repository = new Repository();
+    const service = new Service({ presenter, repository });
+    const controller = new SortByController(service);
+
+    return {
+      [SORTBY_SORT]: controller.handle
+    };
+  }
+}
+export default ActionsHandlersFactory;

package/src/library/behaviours/sort-by/frameworks/ui/DemoBehaviour.ts

@@ -0,0 +1,19 @@
+import Properties from '../../../../../bc/sort-by/Properties';
+import Behaviour from '../../../../../cc/component/Behaviour';
+
+
+class DemoBehaviour {
+  static create(): Behaviour {
+    return {
+      name: 'demo_behaviour',
+      setInitialState: ({ properties }) => {
+        return {};
+      },
+      properties: Properties,
+      eventHandlers: {
+        "DEMO":()=>{alert('demo')}
+      }
+    };
+  }
+}
+export default DemoBehaviour;

package/src/library/behaviours/sort-by/frameworks/ui/SortByBehaviourFactory.ts

@@ -0,0 +1,19 @@
+import Properties from '@bc/sort-by/Properties';
+import Behaviour from '@cc/component/Behaviour';
+import ActionsHandlerFactory from './ActionsHandlerFactory';
+
+class SortByBehaviourFactory {
+  static create(): Behaviour {
+    return {
+      name: 'sortBy',
+      setInitialState: ({ properties }) => {
+        const { filter } = properties;
+        return filter?.sortBy || {};
+      },
+      properties: Properties,
+      eventHandlers: ActionsHandlerFactory.create()
+    };
+  }
+}
+
+export default SortByBehaviourFactory;

package/src/library/behaviours/sort-by/usecases/interactors/AbstractUseCase.ts

@@ -0,0 +1,17 @@
+import IUseCase from '@cc/architecture/IUseCase';
+import UseCaseDependencies from '../interfaces/UseCaseDependencies';
+
+abstract class AbstractUseCase<InputModel> implements IUseCase<InputModel> {
+  constructor(protected dependencies: UseCaseDependencies) {}
+
+  abstract execute(inputModel: InputModel): void;
+
+  updateDependencies(state, updateState): void {
+    const { repository, presenter } = this.dependencies;
+
+    repository.init(state);
+    presenter.updateDependencies(state, updateState);
+  }
+}
+
+export default AbstractUseCase;

package/src/library/behaviours/sort-by/usecases/interactors/SortBy.ts

@@ -0,0 +1,22 @@
+import { SORTBY_SORTED } from '@bc/sort-by/Constants';
+import SortByInputModel from '../interfaces/input/SortByInputModel';
+import AbstractUseCase from './AbstractUseCase';
+
+class SortBy extends AbstractUseCase<SortByInputModel> {
+  public execute(input: SortByInputModel): void {
+    const { id, name, dispatch } = input;
+    const { repository, presenter } = this.dependencies;
+
+    const sortBy = repository.getSortByEntity();
+    sortBy.doSorting(id, name);
+
+    presenter.updateSortBy(sortBy.toObject());
+
+    dispatch({
+      type: SORTBY_SORTED,
+      payload: { sortBy: sortBy.toObject() }
+    });
+  }
+}
+
+export default SortBy;

package/src/library/behaviours/sort-by/usecases/interfaces/UseCaseDependencies.ts

@@ -0,0 +1,10 @@
+import IRepository from './gateways/IRepository';
+import { IPresenter } from './output/IPresenter';
+
+ type UseCaseDependencies = {
+  presenter: IPresenter;
+  repository: IRepository;
+};
+
+
+export default UseCaseDependencies

package/src/library/behaviours/sort-by/usecases/interfaces/gateways/IRepository.ts

@@ -0,0 +1,8 @@
+import ISortBy from '../../../entities/interfaces/ISortBy';
+
+interface IRepository {
+  init(state: any): void;
+  getSortByEntity(): ISortBy;
+}
+
+export default IRepository;

package/src/library/behaviours/sort-by/usecases/interfaces/gateways/IService.ts

@@ -0,0 +1,8 @@
+import SortBy from '../../interactors/SortBy';
+import SortByInputModel from '../input/SortByInputModel';
+
+interface IService {
+  sortByUseCase: SortBy;
+}
+
+export default IService;

package/src/library/behaviours/sort-by/usecases/interfaces/input/SortByInputModel.ts

@@ -0,0 +1,6 @@
+type SortByInputModel = {
+  id: string;
+  name: string;
+  dispatch: Function;
+};
+export default SortByInputModel;

package/src/library/behaviours/sort-by/usecases/interfaces/output/IPresenter.ts

@@ -0,0 +1,6 @@
+import SortByOutputModel from './SortByOutputModel';
+
+export interface IPresenter {
+  updateDependencies(state: any, updateState: Function): void;
+  updateSortBy(sortByData: SortByOutputModel): void;
+}

package/src/library/behaviours/sort-by/usecases/interfaces/output/SortByOutputModel.ts

@@ -0,0 +1,9 @@
+import SortOrder from '@bc/sort-by/SortOrderEnum';
+
+type SortByOutputModel = {
+  id: string;
+  name: string;
+  order: SortOrder;
+};
+
+export default SortByOutputModel;

package/src/library/custom-component/adapters/controllers/Controller.ts

@@ -0,0 +1,24 @@
+import IService from "../../usecases/interfaces/gateways/IService";
+
+class Controller {
+  constructor(private service: IService) {}
+  initialize(input) {
+    this.service.initializeUseCase.execute(input);
+  }
+  mount() {
+    this.service.mountUseCase.execute();
+  }
+  unmount() {
+    this.service.unmountUseCase.execute();
+  }
+  updateProperties(newProps) {
+    this.service.updatePropertiesUseCase.execute(newProps);
+  }
+  updateState(newState) {
+    this.service.updateStateUseCase.execute(newState);
+  }
+  dispatch(action) {
+    this.service.dispatchUseCase.execute(action);
+  }
+}
+export default Controller;

package/src/library/custom-component/adapters/controllers/interface/IController.ts

@@ -0,0 +1,20 @@
+import Component from "../../../../../cc/component/component";
+
+export type IInitController = (
+  input: Component,
+  newProps: any,
+  helpers
+) => void;
+export type IMountController = () => void;
+export type IUnmountController = () => void;
+export type IUpdateProperties = (props: any) => void;
+export type IUpdateState = (state: any) => void;
+
+interface IController {
+  init: IInitController;
+  mount: IMountController;
+  unmount: IUnmountController;
+  updateState: IUpdateProperties;
+  updateProperties: IUpdateState;
+}
+export default IController;

package/src/library/custom-component/adapters/gateways/event-manager/EventManager.ts

@@ -0,0 +1,67 @@
+import IEventManager from '../../../usecases/interfaces/gateways/IEventManager';
+
+// @ts-ignore
+if (__DEVELOPMENT__) {
+  globalThis.enableEventLogging = false
+}
+
+class EventManager implements IEventManager {
+  private _element;
+  constructor() {}
+  setElement(element) {
+    this._element = element;
+  }
+  getElement() {
+    return this._element;
+  }
+  subscribe(events: Map<string, Array<Function>>) {
+    events.forEach((eventHandlers, key) => {
+      this._element &&
+        eventHandlers.map(eventHandler => {
+          this._element.addEventListener(key, eventHandler);
+        });
+      // this._element && this._element.addEventListener(key, actionHandler);
+    });
+  }
+  unSubscribe(events: Map<string, Array<Function>>) {
+    events.forEach((eventHandlers, key) => {
+      this._element &&
+        eventHandlers.map(eventHandler => {
+          this._element.removeEventListener(key, eventHandler);
+        });
+    });
+  }
+  dispatch(event: { type: string; payload: any; metaData: any }) {
+    let { payload, metaData, type } = event;
+
+    // @ts-ignore
+    if (__DEVELOPMENT__) {
+      if (globalThis.enableEventLogging && type) {
+        const index = type.indexOf('#');
+        console.log(
+          '%cEvent %c' + type.slice(0, index) + '%c' + type.slice(index),
+          'color: cyan;font-weight: bold',
+          'color: yellow;font-weight: bold',
+          'color: greenyellow;font-weight: bold',
+          {payload,
+          metaData}
+        );
+      }
+    }
+    if (!this._element) {
+      console.error('Error check ref', this._element, type, {
+        payload,
+        metaData
+      });
+    }
+    this._element &&
+      this._element.dispatchEvent(
+        new CustomEvent(type, {
+          bubbles: true,
+          detail: { payload, metaData }
+        })
+      );
+  }
+}
+
+export default EventManager;

package/src/library/custom-component/adapters/gateways/repository/Repository.ts

@@ -0,0 +1,17 @@
+import IComponent from "../../../entities/interfaces/IComponent";
+import IRepository from "../../../usecases/interfaces/gateways/IRepository";
+
+class Repository implements IRepository {
+  component: IComponent;
+  constructor() {}
+  getComponent() {
+    return this.component;
+  }
+  save(value) {
+    this.component = value;
+  }
+  clear() {
+    this.component = null;
+  }
+}
+export default Repository;

package/src/library/custom-component/adapters/gateways/service/Service.ts

@@ -0,0 +1,29 @@
+import { ActionHandlerParams } from "../../../../../cc/component/ActionHandlers";
+import UseCase from "../../../../examples/counter/usecases/interfaces/UseCase";
+import DispatchUseCase from "../../../usecases/interactors/DispatchUseCase";
+import InitializeUseCase from "../../../usecases/interactors/InitializeUseCase";
+import MountUsecase from "../../../usecases/interactors/MountUseCase";
+import UnmountUsecase from "../../../usecases/interactors/UnmountUseCase";
+
+import UpdatePropertyUseCase from "../../../usecases/interactors/UpdatePropertyUseCase";
+import UpdateStateUseCase from "../../../usecases/interactors/UpdateStateUseCase";
+import IService from "../../../usecases/interfaces/gateways/IService";
+
+class Service implements IService {
+  initializeUseCase: InitializeUseCase;
+  mountUseCase: MountUsecase;
+  unmountUseCase: UnmountUsecase;
+  updatePropertiesUseCase: UpdatePropertyUseCase;
+  updateStateUseCase: UpdateStateUseCase;
+  constructor(dependencies) {
+    this.initializeUseCase = new InitializeUseCase(dependencies);
+    this.mountUseCase = new MountUsecase(dependencies);
+    this.unmountUseCase = new UnmountUsecase(dependencies);
+    this.updatePropertiesUseCase = new UpdatePropertyUseCase(dependencies);
+    this.updateStateUseCase = new UpdateStateUseCase(dependencies);
+    this.dispatchUseCase = new DispatchUseCase(dependencies);
+  }
+  dispatchUseCase: UseCase<ActionHandlerParams>;
+}
+
+export default Service;

package/src/library/custom-component/adapters/gateways/validator/jsonValidator.ts

@@ -0,0 +1,9 @@
+import IJSONValidator from "../../../usecases/interfaces/gateways/IJSONValidator";
+
+let jsonValidator =
+  (validator): IJSONValidator =>
+  (propertySchema, propertyValue) => {
+    return validator(propertySchema, propertyValue);
+  };
+
+export default jsonValidator;

package/src/library/custom-component/adapters/presenters/Presenter.ts

@@ -0,0 +1,22 @@
+import OutputBoundary from "../../usecases/interfaces/output/OutputBoundary";
+
+class Presenter implements OutputBoundary {
+  private updateState;
+  constructor({ updateState }) {
+    this.updateState = updateState;
+  }
+  setError(error) {
+    this.updateState({ error: error });
+  }
+  render(state) {
+    // try {
+    //   let a = undefined;
+    //   console.log(a.b.c);
+    // } catch (e) {
+    //   console.log(e);
+    // }
+    // console.log("state", state);
+    this.updateState(state);
+  }
+}
+export default Presenter;

package/src/library/custom-component/entities/Behaviour.ts

@@ -0,0 +1,40 @@
+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/src/library/custom-component/entities/Component.ts

@@ -0,0 +1,170 @@
+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 IEventHandler from "./interfaces/IEventHandler";
+import IEventWrapper from "./interfaces/IEventWrapper";
+import ILifeCycleAction, { MountType } 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 mergeStateAndProps() {
+    return {
+      ...this._state.getState(),
+      properties: this._properties.getAllPropertiesValue()
+    };
+  }
+  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 = _stateInitializer;
+  }
+  public setBehaviours(behaviours: Array<IBehaviour>) {
+    this._behaviours = behaviours;
+  }
+
+  public updateProperties(jsonValidator, newProps): boolean {
+    // console.log("start", this._name, newProps);
+    return this._properties.updateAllPropertiesValue(jsonValidator, newProps);
+    // console.log("end", this._name);
+    // return a;
+  }
+
+  public updateState(state) {
+    this._state.updateState(state);
+  }
+  public init(jsonValidator, newProps) {
+    this.updateProperties(jsonValidator, newProps);
+    let properties = this._properties.getAllPropertiesValue();
+    if (this._stateInitializer) {
+      this.updateState(this._stateInitializer({ properties }));
+    } else {
+      this.updateState({ properties });
+    }
+    if (this._behaviours) {
+      this._behaviours.map((behaviour) => {
+        /* hack performance impact need to use object path immutable*/
+        let state = this.getState();
+        this.updateState({
+          behaviours: { ...state.behaviours, ...behaviour.getInitialState() }
+        });
+      });
+    }
+  }
+  public getProperties() {
+    return this._properties.getAllPropertiesValue();
+  }
+  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;
+  }
+  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) => {
+          //event validate with action payload
+          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/src/library/custom-component/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;
+  }
+}