@zohodesk/library-platform 1.0.0-exp.1 → 1.0.0-exp.3

package/es/library/custom-component/entities/__tests__/Behaviour.spec.js

@@ -0,0 +1,52 @@
+import Behaviour from "../../../../../es/library/custom-component/entities/Behaviour";
+describe("Behaviour", () => {
+  const name = "TestBehaviour";
+  const properties = {
+    getAllPropertiesValue: jest.fn().mockReturnValue({})
+  };
+  const setInitialState = jest.fn();
+  const actionHandlers = {
+    getEventHandlers: jest.fn().mockReturnValue(new Map())
+  };
+  it("should create a Behaviour instance with provided parameters", () => {
+    const behaviour = new Behaviour({
+      name,
+      properties,
+      setIntialState: setInitialState,
+      actionHandlers
+    });
+    expect(behaviour).toBeInstanceOf(Behaviour);
+    expect(behaviour.getName()).toBe(name);
+    expect(behaviour.getProperties()).toBe(properties);
+    expect(behaviour.getEventHandlers()).toBe(actionHandlers);
+  });
+  it("should return initial state with setInitialState function", () => {
+    const initialState = {
+      test: "initialState"
+    };
+    setInitialState.mockReturnValue(initialState);
+    const behaviour = new Behaviour({
+      name,
+      properties,
+      setIntialState: setInitialState,
+      actionHandlers
+    });
+    expect(behaviour.getInitialState()).toEqual({
+      [name]: initialState
+    });
+    expect(setInitialState).toHaveBeenCalledWith({
+      properties: properties.getAllPropertiesValue()
+    });
+  });
+  it("should return empty initial state if setInitialState function is not provided", () => {
+    const behaviour = new Behaviour({
+      name,
+      properties,
+      setIntialState: undefined,
+      actionHandlers
+    });
+    expect(behaviour.getInitialState()).toEqual({
+      [name]: {}
+    });
+  });
+});

package/es/library/custom-component/entities/__tests__/Component.spec.js

@@ -0,0 +1,109 @@
+import ComponentFactory from "../../../../../es/library/custom-component/usecases/entities-factory/ComponentFactory";
+describe("Component", () => {
+  let component;
+  let properties;
+  let lifeCycleAction;
+  let actionHandlers;
+  let behaviour;
+  let jsonValidator;
+  beforeEach(() => {
+    // Create Component instance
+    jsonValidator = jest.fn().mockReturnValue(true);
+    component = ComponentFactory({
+      name: "TestComponent",
+      properties: {
+        text: {
+          required: true,
+          typeMetadata: {
+            schema: {
+              type: "string"
+            }
+          }
+        },
+        color: {
+          required: true,
+          typeMetadata: {
+            schema: {
+              type: "string"
+            }
+          }
+        },
+        tooltip: {
+          required: true,
+          defaultValue: "",
+          typeMetadata: {
+            schema: {
+              type: "string"
+            }
+          }
+        }
+      },
+      actions: [{
+        type: "TEXT#CLICKED"
+      }],
+      actionHandlers: {
+        "TEXT#CLICKED": jest.fn()
+      },
+      behaviours: []
+    });
+  });
+  describe("Initialization", () => {
+    it("should initialize component properties and state", () => {
+      const newProps = {
+        text: "welcome",
+        color: "red"
+      };
+      component.init(jsonValidator, newProps);
+      expect(component.getState()).toEqual({
+        properties: {
+          color: "red",
+          text: "welcome",
+          tooltip: "",
+          appendToActionPayload: null
+        }
+      });
+    });
+  });
+  describe.only("State and Properties", () => {
+    it("should update properties", () => {
+      const initialProps = {
+        text: "welcome",
+        color: "red"
+      };
+      component.init(jsonValidator, initialProps);
+      const newProps = {
+        text: "welcome friend",
+        color: "yellow"
+      };
+      component.updateProperties(jsonValidator, newProps);
+      expect(component.getState()).toEqual({
+        properties: {
+          color: "yellow",
+          text: "welcome friend",
+          tooltip: "",
+          appendToActionPayload: null
+        }
+      });
+    });
+    it("should update state", () => {
+      const initialProps = {
+        text: "welcome",
+        color: "red"
+      };
+      component.init(jsonValidator, initialProps);
+      const newState = {
+        test: "state"
+      };
+      component.updateState(newState);
+      expect(component.getState()).toEqual({
+        properties: {
+          color: "red",
+          text: "welcome",
+          tooltip: "",
+          appendToActionPayload: null
+        },
+        test: "state"
+      });
+    });
+  });
+});

package/es/library/custom-component/entities/defaultAppendToActionPayload.js

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

package/es/library/custom-component/entities/getRef.js

@@ -0,0 +1,10 @@
+export default {
+  name: "getRef",
+  required: false,
+  defaultValue: null,
+  typeMetadata: {
+    schema: {
+      type: "function"
+    }
+  }
+};

package/es/library/custom-component/entities/interfaces/IBehaviour.js

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

package/es/library/custom-component/entities/interfaces/IComponent.js

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

package/es/library/custom-component/entities/interfaces/IEvent.js

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

package/es/library/custom-component/entities/interfaces/IEventHandler.js

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

package/es/library/custom-component/entities/interfaces/IEventHandlerHelpers.js

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

package/es/library/custom-component/entities/interfaces/IEventHandlers.js

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

package/es/library/custom-component/entities/interfaces/IEventWrapper.js

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

package/es/library/custom-component/entities/interfaces/ILifeCycleAction.js

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

package/es/library/custom-component/entities/interfaces/IPayload.js

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

package/es/library/custom-component/entities/interfaces/IProperties.js

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

package/es/library/custom-component/entities/interfaces/IProperty.js

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

package/es/library/custom-component/entities/interfaces/ISchema.js

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

package/es/library/custom-component/entities/interfaces/IState.js

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

package/es/library/custom-component/entities/interfaces/IStyle.js

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

package/es/library/custom-component/entities/interfaces/IValidator.js

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

package/es/library/custom-component/frameworks/json-schema-validator/validator.js

@@ -0,0 +1,9 @@
+import Ajv from "ajv";
+let jsonValidator = new Ajv();
+export default function validator(schema, value) {
+  if (schema.type === "function") {
+    return value instanceof Function;
+  }
+
+  return jsonValidator.validate(schema, value);
+}

package/es/library/custom-component/frameworks/object-path-immutable/ImmutableHelper.js

@@ -0,0 +1,3 @@
+class ImmutableHelper {}
+
+export {};

package/es/library/custom-component/frameworks/ui/Compare.js

@@ -0,0 +1,47 @@
+function isDeepEqual(obj1, obj2) {
+  if (obj1 === obj2) return true;
+
+  if (typeof obj1 !== 'object' || typeof obj2 !== 'object' || obj1 === null || obj2 === null) {
+    return false;
+  }
+
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+  if (keys1.length !== keys2.length) return false;
+
+  for (let key of keys1) {
+    if (!keys2.includes(key) || !isDeepEqual(obj1[key], obj2[key])) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+export default class Compare {
+  static diffPropertiesNames(obj1, obj2) {
+    if (Object.keys(obj1).length === Object.keys(obj2).length) {
+      const c = Object.keys(obj1).filter(key => {
+        const v1 = obj1[key];
+        const v2 = obj2[key];
+        return !isDeepEqual(v1, v2);
+      });
+      return c;
+    }
+
+    return [];
+  }
+
+  static shallowCompare(obj1, obj2) {
+    if (Object.keys(obj1).length === Object.keys(obj2).length) {
+      return Object.keys(obj1).some(key => {
+        const v1 = obj1[key];
+        const v2 = obj2[key];
+        return !isDeepEqual(v1, v2);
+      });
+    }
+
+    return false;
+  }
+
+}

package/es/library/custom-component/frameworks/ui/ComponentRegistry.js

@@ -0,0 +1,29 @@
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+// import ComponentModel from '@cc/component/component';
+class ComponentRegistry {
+  constructor() {
+    _defineProperty(this, "components", new Map());
+  }
+
+  static getInstance() {
+    if (!ComponentRegistry.instance) {
+      ComponentRegistry.instance = new ComponentRegistry();
+    }
+
+    return ComponentRegistry.instance;
+  }
+
+  register(name, component) {
+    this.components.set(name, component);
+  }
+
+  get(name) {
+    return this.components.get(name);
+  }
+
+}
+
+_defineProperty(ComponentRegistry, "instance", void 0);
+
+export default ComponentRegistry.getInstance();

package/es/library/custom-component/frameworks/ui/createCustomComponent.js

@@ -0,0 +1,108 @@
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import React, { forwardRef } from "react";
+import createDependencies from "./dependencyFactory";
+import Compare from "./Compare";
+
+const createCustomComponent = input => {
+  class Component extends React.Component {
+    constructor(props) {
+      super(props);
+
+      _defineProperty(this, "controller", void 0);
+
+      _defineProperty(this, "elementRef", void 0);
+
+      _defineProperty(this, "state", void 0);
+
+      _defineProperty(this, "presenter", void 0);
+
+      _defineProperty(this, "eventManager", void 0);
+
+      _defineProperty(this, "View", void 0);
+
+      _defineProperty(this, "helpers", void 0);
+
+      this.state = null;
+      let {
+        controller,
+        presenter,
+        eventManager
+      } = createDependencies({
+        updateState: state => {
+          //hack initial render
+          if (this.state == null) {
+            this.state = state;
+          } else {
+            this.setState(() => state);
+          }
+        }
+      });
+      this.presenter = presenter;
+      this.controller = controller;
+      this.eventManager = eventManager;
+      eventManager.name = input.name;
+      this.helpers = {
+        updateState: this.controller.updateState.bind(controller),
+        updateProperties: this.controller.updateProperties.bind(controller),
+        dispatch: this.controller.dispatch.bind(controller)
+      };
+      this.controller.initialize({ ...input,
+        newProps: props,
+        helpers: this.helpers
+      });
+      this.View = /*#__PURE__*/forwardRef(input.View); //need to analyse react forwardref, removed from hoc
+    }
+
+    componentDidMount() {
+      this.controller.mount();
+    }
+
+    shouldComponentUpdate(nextProps, nextState, nextContext) {
+      return Compare.shallowCompare(this.props, nextProps) || Compare.shallowCompare(this.state, nextState);
+    }
+
+    componentWillUnmount() {
+      this.controller.unmount();
+    }
+
+    componentDidCatch(error, errorInfo) {
+      console.log("Error", error, errorInfo, errorInfo.componentStack);
+    }
+
+    componentDidUpdate(prevProps, prevState, snapshot) {
+      this.controller.updateProperties(this.props);
+    } // shouldComponentUpdate(
+    //   nextProps: Readonly<{}>,
+    //   nextState: Readonly<{}>,
+    //   nextContext: any
+    // ): boolean {
+    //   /* need to move usecase */
+    //   let a = !shallowCompare(this.props, nextProps);
+    //   return a;
+    // }
+
+
+    render() {
+      let View = this.View;
+
+      if (this.state.error) {
+        console.log(this.state.error);
+        return /*#__PURE__*/React.createElement("div", null, "error");
+      } else return /*#__PURE__*/React.createElement(View, {
+        ref: element => {
+          this.eventManager.setElement.bind(this.eventManager)(element);
+          this.props.getRef && this.props.getRef(element);
+        },
+        helpers: this.helpers,
+        state: this.state
+      });
+    }
+
+  } // Component.prototype = input.View.propTypes;
+
+
+  return Component;
+};
+
+export default createCustomComponent;

package/es/library/custom-component/frameworks/ui/dependencyFactory.js

@@ -0,0 +1,29 @@
+import Presenter from "../../adapters/presenters/Presenter";
+import Service from "../../adapters/gateways/service/Service";
+import Controller from "../../adapters/controllers/Controller";
+import Repository from "../../adapters/gateways/repository/Repository";
+import jsonValidator from "../../adapters/gateways/validator/jsonValidator";
+import validator from "../json-schema-validator/validator";
+import EventManager from "../../adapters/gateways/event-manager/EventManager";
+export default function dependencyFactory(_ref) {
+  let {
+    updateState
+  } = _ref;
+  let repository = new Repository();
+  let presenter = new Presenter({
+    updateState
+  });
+  let eventManager = new EventManager();
+  const service = new Service({
+    presenter,
+    repository,
+    jsonValidator: jsonValidator(validator),
+    eventManager
+  });
+  const controller = new Controller(service);
+  return {
+    controller,
+    presenter,
+    eventManager
+  };
+}

package/es/library/custom-component/usecases/entities-factory/BehavioursFactory.js

@@ -0,0 +1,40 @@
+import Behaviour from "../../entities/Behaviour";
+import EventHandlersFactory from "./EventHandlersFactory";
+import PropertiesFactory from "./PropertiesFactory";
+let n = 0;
+
+function BehavioursFactory(input) {
+  let behaviours = input.behaviours || [];
+  return behaviours.map(behaviour => {
+    // will be removed in future
+    if (behaviour.actionHandlers) {
+      // console.error(input.name, " ==> actionHandlers was deprecated, use eventHandlers instead");
+      // !n++ && console.clear(); 
+      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/usecases/entities-factory/ComponentFactory.js

@@ -0,0 +1,33 @@
+import Component from "../../entities/Component";
+import LifeCycleAction from "../../entities/LifeCycleAction";
+import State from "../../entities/State";
+import EventHandlersFactory from "./EventHandlersFactory";
+import BehavioursFactory from "./BehavioursFactory";
+import PropertiesFactory from "./PropertiesFactory";
+
+let defaultTransformState = state => state;
+
+export default function createComponentFactory(input, helpers) {
+  let component = new Component();
+  let lifeCycleAction = new LifeCycleAction(input.name);
+  let behaviours = BehavioursFactory(input);
+  component.setBehaviours(behaviours);
+  component.setName(input.name);
+  component.setLifeCycleAction(lifeCycleAction);
+  component.setProperties(PropertiesFactory({
+    properties: input.properties,
+    componentName: input.name
+  })); // will be removed in future
+
+  if (input.actionHandlers) {
+    // console.error(input.name, " ==> actionHandlers was deprecated, use eventHandlers instead");
+    input.eventHandlers = input.actionHandlers;
+  }
+
+  component.setEventHandlers(EventHandlersFactory(input.eventHandlers));
+  component.setState(new State());
+  component.createEventHandlers(helpers);
+  component.setStateInitializer(input.setInitialState);
+  component.setTransformer(input.transformState || defaultTransformState);
+  return component;
+}

package/es/library/custom-component/usecases/entities-factory/EventHandlersFactory.js

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

package/es/library/custom-component/usecases/entities-factory/PropertiesFactory.js

@@ -0,0 +1,15 @@
+import Properties from "../../entities/Properties";
+import Property from "../../entities/Property";
+export default function PropertiesFactory(_ref) {
+  let {
+    properties,
+    componentName
+  } = _ref;
+  let propertyMap = new Map();
+  Object.keys(properties).forEach(key => {
+    let property = new Property(properties[key]);
+    propertyMap.set(key, property);
+  });
+  let propertiesObject = new Properties(propertyMap, componentName);
+  return propertiesObject;
+}

package/es/library/custom-component/usecases/interactors/AbstractUseCase.js

@@ -0,0 +1,8 @@
+class AbstractUseCase {
+  constructor(dependencies) {
+    this.dependencies = dependencies;
+  }
+
+}
+
+export default AbstractUseCase;

package/es/library/custom-component/usecases/interactors/DispatchUseCase.js

@@ -0,0 +1,22 @@
+import AbstractUseCase from "./AbstractUseCase";
+
+class DispatchUseCase extends AbstractUseCase {
+  execute(input) {
+    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/usecases/interactors/InitializeUseCase.js

@@ -0,0 +1,28 @@
+import createComponent from "../entities-factory/ComponentFactory";
+import AbstractUseCase from "./AbstractUseCase";
+
+class InitializeUseCase extends AbstractUseCase {
+  execute(input) {
+    let {
+      presenter,
+      jsonValidator,
+      repository
+    } = this.dependencies;
+    let component = createComponent(input, input.helpers);
+
+    try {
+      // console.log("input.newProps", input.newProps);
+      component.init(jsonValidator, input.newProps);
+      let state = component.getState(); // console.log("this state", state);
+
+      presenter.render(state);
+    } catch (e) {
+      presenter.setError(e);
+    } finally {
+      repository.save(component);
+    }
+  }
+
+}
+
+export default InitializeUseCase;

package/es/library/custom-component/usecases/interactors/MountUseCase.js

@@ -0,0 +1,24 @@
+import AbstractUseCase from "./AbstractUseCase";
+
+class MountUsecase extends AbstractUseCase {
+  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;