@zohodesk/library-platform 1.1.1 → 1.1.2-exp.0

package/es/library/behaviours/keyboard-controls/frameworks/EventHandlerFactory.js

@@ -0,0 +1,48 @@
+import { KEYBOARD_CONTROL_DOWN_ARROW_PRESSED, KEYBOARD_CONTROL_ENTER_PRESSED, KEYBOARD_CONTROL_SPACE_PRESSED, KEYBOARD_CONTROL_UP_ARROW_PRESSED } from "../../../../bc/keyboard-controls/Constants";
+import UpArrowPressController from "../adapters/controllers/UpArrowPressController";
+import DownArrowPressController from "../adapters/controllers/DownArrowPressController";
+import SpacePressController from "../adapters/controllers/SpacePressController";
+import EnterPressController from "../adapters/controllers/EnterPressController";
+import Service from "../adapters/gateways/Service";
+import Repository from "../adapters/gateways/Repository";
+import Presenter from "../adapters/presenters/Presenter";
+import KeyboardHandler from "../adapters/gateways/KeyboardHandler"; // import FocusPreviousController from "../adapters/controllers/FocusPreviousController";
+// import FocusNextController from "../adapters/controllers/FocusNextController";
+
+import LifeCycleAction from "../../../../cc/architecture/LifeCycleActionEnum";
+import InitializeController from "../adapters/controllers/InitializeController";
+import DestructController from "../adapters/controllers/DestructController";
+
+class EventHandlerFactory {
+  static create() {
+    const service = this.createService();
+    return this.createHandlers(service);
+  }
+
+  static createService() {
+    const repository = new Repository();
+    const presenter = new Presenter();
+    const keyboardHandler = new KeyboardHandler();
+    return new Service({
+      repository: repository,
+      presenter,
+      keyboardHandler
+    });
+  }
+
+  static createHandlers(service) {
+    return {
+      [LifeCycleAction.MOUNT]: new InitializeController(service).handle,
+      [LifeCycleAction.UN_MOUNT]: new DestructController(service).handle,
+      // [SMART_TABLE_PREVIOUS_FOCUS]: new FocusPreviousController(service).handle,
+      // [SMART_TABLE_NEXT_FOCUS]: new FocusNextController(service).handle,
+      [KEYBOARD_CONTROL_UP_ARROW_PRESSED]: new UpArrowPressController(service).handle,
+      [KEYBOARD_CONTROL_DOWN_ARROW_PRESSED]: new DownArrowPressController(service).handle,
+      [KEYBOARD_CONTROL_SPACE_PRESSED]: new SpacePressController(service).handle,
+      [KEYBOARD_CONTROL_ENTER_PRESSED]: new EnterPressController(service).handle
+    };
+  }
+
+}
+
+export default EventHandlerFactory;

package/es/library/behaviours/keyboard-controls/frameworks/KeyboardControlBehaviourFactory.js

@@ -0,0 +1,23 @@
+import EventHandlerFactory from "./EventHandlerFactory";
+import events from "../../../../bc/keyboard-controls/Events";
+import properties from "../../../../bc/keyboard-controls/Properties";
+
+class KeyboardControlBehaviourFactory {
+  static create() {
+    return {
+      name: 'keyboardControls',
+      setInitialState: () => {
+        return {
+          focussedIndex: 0,
+          totalLists: 0
+        };
+      },
+      eventHandlers: EventHandlerFactory.create(),
+      events,
+      properties
+    };
+  }
+
+}
+
+export default KeyboardControlBehaviourFactory;

package/es/library/behaviours/list-selection/adapters/gateways/Repository.js

@@ -27,7 +27,7 @@ class Repository {
     const {
       selectionConfig
     } = properties || {};
-    const itemIds = data === null || data === void 0 ? void 0 : data.rows.map(item => item.id);
+    const itemIds = behaviours.zrecord.records.map(item => item.id);
     const maxSelectionCount = selectionConfig === null || selectionConfig === void 0 ? void 0 : selectionConfig.maxSelectionCount;
     return new ListItemSelection(selected, itemIds, maxSelectionCount);
   }

package/es/library/behaviours/list-selection/applications/usecases/Deselect.js

@@ -12,7 +12,7 @@ class Deselect extends AbstractUseCase {
     } = inputModel;
     const listItemSelection = repository.getListItemSelection();
     listItemSelection.deselectItems(ids);
-    listItemSelection.createDispatchProps().map(event => dispatch(event));
+    listItemSelection.createDispatchProps(ids).map(event => dispatch(event));
     presenter.updateListItemSelection(listItemSelection.toObject());
   }
 

package/es/library/behaviours/list-selection/applications/usecases/ItemsSelection.js

@@ -12,7 +12,7 @@ class ItemsSelection extends AbstractUseCase {
     } = inputModel;
     const listItemSelection = repository.getListItemSelection();
     listItemSelection.toggleItems(selected);
-    listItemSelection.createDispatchProps().map(event => dispatch(event));
+    listItemSelection.createDispatchProps(selected).map(event => dispatch(event));
     presenter.updateListItemSelection(listItemSelection.toObject());
   }
 

package/es/library/behaviours/list-selection/domain/entities/ListItemSelection.js

@@ -84,7 +84,7 @@ class ListItemSelection {
     };
   }
 
-  createDispatchProps() {
+  createDispatchProps(ids) {
     const events = [];
 
     if (this.selectionStatus === 'selected') {
@@ -95,7 +95,7 @@ class ListItemSelection {
 
     if (this.selectionStatus === 'deselected') {
       events.push(new Event(LIST_SELECTION_RECORDS_DESELECTED, {
-        recordIds: this.selected
+        recordIds: ids
       }));
     }
 

package/es/library/behaviours/local-storage/adapters/controllers/AbstractController.js

@@ -0,0 +1,7 @@
+export default class AbstractController {
+  constructor(service) {
+    this.service = service;
+    this.handle = this.handle.bind(this);
+  }
+
+}

package/es/library/behaviours/local-storage/adapters/controllers/SetDataController.js

@@ -0,0 +1,22 @@
+import AbstractController from "./AbstractController";
+export class SetDataController extends AbstractController {
+  handle(event) {
+    const {
+      storeKey,
+      data
+    } = event.action.payload;
+    const {
+      state,
+      updateState
+    } = event;
+    const {
+      setDataUseCase
+    } = this.service;
+    setDataUseCase.updateDependency(state, updateState);
+    setDataUseCase.execute({
+      id: storeKey,
+      data
+    });
+  }
+
+}

package/es/library/behaviours/local-storage/adapters/gateways/LocalStorageRepository.js

@@ -0,0 +1,26 @@
+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 Storage from "../../domain/entities/Storage";
+import { STORE_KEY } from "../../../../../bc/local-storage/Constants";
+export class LocalStorageRepository {
+  constructor() {
+    _defineProperty(this, "state", void 0);
+  }
+
+  init(state) {
+    this.state = state;
+  }
+
+  getStorage() {
+    const dataString = window.localStorage.getItem(STORE_KEY);
+    const data = typeof dataString === 'string' ? JSON.parse(dataString) : {};
+    const storage = new Storage(data);
+    return storage;
+  }
+
+  setStorage(storage) {
+    const data = storage.toObject();
+    window.localStorage.setItem(STORE_KEY, JSON.stringify(data));
+  }
+
+}

package/es/library/behaviours/local-storage/adapters/gateways/Service.js

@@ -0,0 +1,14 @@
+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 SetDataUseCase from "../../applications/usecases/SetDataUseCase";
+
+class Service {
+  constructor(dependencies) {
+    _defineProperty(this, "setDataUseCase", void 0);
+
+    this.setDataUseCase = new SetDataUseCase(dependencies);
+  }
+
+}
+
+export default Service;

package/es/library/behaviours/local-storage/adapters/presenters/Presenter.js

@@ -0,0 +1,38 @@
+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; }
+
+export default class Presenter {
+  constructor() {
+    _defineProperty(this, "updateState", void 0);
+
+    _defineProperty(this, "state", void 0);
+  }
+
+  updateDependencies(state, updateState) {
+    this.state = state;
+    this.updateState = updateState; // this.updateState =
+    //   typeof updateState === 'function' ? updateState : () => {};
+  } // getViewModel(): BehaviourState | null {
+  //   return this.state.behaviours.localStorage;
+  // }
+
+
+  setBehaviourState(newState) {
+    const {
+      state
+    } = this;
+    this.state = { ...state,
+      behaviours: { ...state.behaviours,
+        localStorage: newState
+      }
+    };
+    this.updateState(this.state);
+  } // clearBehaviourState() {
+  //   this.setBehaviourState(null);
+  // }
+
+
+  updateBehaviourState(newState) {
+    this.setBehaviourState(newState);
+  }
+
+}

package/es/library/behaviours/local-storage/applications/interfaces/InputDependencies.js

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

package/es/library/behaviours/local-storage/applications/interfaces/gateways/IRepository.js

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

package/es/library/behaviours/local-storage/applications/interfaces/gateways/IService.js

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

package/es/library/behaviours/local-storage/applications/interfaces/input/SetDataInput.js

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

package/es/library/behaviours/local-storage/applications/interfaces/input/StateStructure.js

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

package/es/library/behaviours/local-storage/applications/interfaces/output/BehaviourState.js

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

package/es/library/behaviours/local-storage/applications/usecases/AbstractUseCase.js

@@ -0,0 +1,17 @@
+class AbstractUseCase {
+  constructor(dependencies) {
+    this.dependencies = dependencies;
+  }
+
+  updateDependency(state, updateState) {
+    const {
+      repository,
+      presenter
+    } = this.dependencies;
+    repository.init(state);
+    presenter.updateDependencies(state, updateState);
+  }
+
+}
+
+export default AbstractUseCase;

package/es/library/behaviours/local-storage/applications/usecases/SetDataUseCase.js

@@ -0,0 +1,17 @@
+import AbstractUseCase from "./AbstractUseCase";
+
+class SetDataUseCase extends AbstractUseCase {
+  execute(input) {
+    const {
+      repository,
+      presenter
+    } = this.dependencies;
+    const storage = repository.getStorage();
+    storage.setData(input.id, input.data);
+    repository.setStorage(storage);
+    presenter.updateBehaviourState(storage.toObject());
+  }
+
+}
+
+export default SetDataUseCase;

package/es/library/behaviours/local-storage/domain/entities/Storage.js

@@ -0,0 +1,28 @@
+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; }
+
+class Storage {
+  constructor(data) {
+    _defineProperty(this, "data", void 0);
+
+    this.data = data;
+  }
+
+  setData(id, data) {
+    this.data[id] = data;
+  }
+
+  getData(id) {
+    return this.data[id];
+  }
+
+  deleteData(id) {
+    delete this.data[id];
+  }
+
+  toObject() {
+    return this.data;
+  }
+
+}
+
+export default Storage;

package/es/library/behaviours/local-storage/domain/entities/interfaces/IStorage.js

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

package/es/library/behaviours/local-storage/frameworks/LocalStorageBehaviourFactory.js

@@ -0,0 +1,28 @@
+import { STORE_KEY, STORE_REQUESTED } from "../../../../bc/local-storage/Constants";
+import Properties from "../../../../bc/local-storage/Properties";
+import { SetDataController } from "../adapters/controllers/SetDataController";
+import { LocalStorageRepository } from "../adapters/gateways/LocalStorageRepository";
+import Service from "../adapters/gateways/Service";
+import Presenter from "../adapters/presenters/Presenter";
+export default class LocalStorageBehaviourFactory {
+  static create() {
+    const presenter = new Presenter();
+    const repository = new LocalStorageRepository();
+    const service = new Service({
+      repository,
+      presenter
+    });
+    return {
+      name: 'localStorage',
+      setInitialState: () => {
+        const data = localStorage.getItem(STORE_KEY);
+        return typeof data === 'string' ? JSON.parse(data) : {};
+      },
+      properties: Properties,
+      eventHandlers: {
+        [STORE_REQUESTED]: new SetDataController(service).handle
+      }
+    };
+  }
+
+}

package/es/library/behaviours/table-column-resizer/Readme.md

@@ -0,0 +1,141 @@
+# Table Column Resizer Behavior
+
+This document outlines the properties, action handlers, and dispatching actions related to the Table Column Resizer Behavior. This behavior is designed to handle the resizing of table columns in a user interface.
+
+## Properties
+
+### `resizeConfig`
+
+The `resizeConfig` object contains configuration settings for the column resizer.
+
+```typescript
+type ResizeConfig = {
+  enabled: boolean;
+  isRTL: boolean;
+  maxWidth: number;
+  minWidth: number;
+};
+```
+
+#### Note: State and Properties
+
+The properties used by the behavior are derived from the state. The following state structure is expected:
+
+```typescript
+export type State = {
+  properties: {
+    resizeConfig: ResizeConfig;
+  };
+};
+```
+
+## Listening Action Handlers
+
+Action handlers respond to various actions related to column resizing. Each action handler receives a `dispatch`, `updateState`, and `state` parameter, so we only describe the payload here.
+
+### `MOUNT`
+
+This action is triggered when the column resizer is mounted.
+
+```typescript
+export type InitActionHandlerPayload = {
+  tableElement: HTMLElement;
+  columnName: string;
+  columnWidth: number;
+  initialPosition: number;
+};
+```
+
+### `COLUMN_RESIZER#RESIZE_STARTED`
+
+This action is triggered when a column resize operation starts.
+
+> Payload: `ResizeStartPayload`
+
+```typescript
+export type ResizeStartPayload = {
+  columnName: string;
+  initialPosition: number;
+  tableElement: HTMLElement;
+  columnWidth: number;
+  mouseEvent: MouseEvent;
+};
+```
+
+### `COLUMN_RESIZER#RESIZE_SCROLL`
+
+This action is triggered when the column is resized via a scroll event.
+
+> Payload: `ResizeByMouseActionPayload`
+
+```typescript
+export type ResizeByMouseActionPayload = {
+  mouseEvent: MouseEvent;
+};
+```
+
+### `COLUMN_RESIZER#RESIZE_MOUSE`
+
+This action is triggered when the column is resized via a mouse event.
+
+> Payload: `ResizeByScrollActionPayload`
+
+```typescript
+export type ResizeByScrollActionPayload = {}; // No payload needed
+```
+
+### `COLUMN_RESIZER#RESIZE_ENDED`
+
+This action is triggered when the column resize operation ends.
+
+> Payload: `ResizeEndActionPayload`
+
+```typescript
+export type ResizeEndActionPayload = {}; // No payload needed
+```
+
+#### Note: BaseActionParams
+
+Action handlers within the behavior expect payloads to be structured as shown below. This ensures consistency when handling actions.
+
+```typescript
+type BaseActionParams<Payload> = {
+  action: { payload: Payload };
+  dispatch: Dispatch;
+  updateState: UpdateState;
+  state: State;
+};
+```
+
+## Dispatching Actions from Behavior
+
+The behavior dispatches actions to update the state in response to user interactions.
+
+### `COLUMN_RESIZER#RESIZE_FINISHED`
+
+This action is dispatched when a column resize operation is completed.
+
+```typescript
+type ResizeFinishedAction = {
+  type: 'COLUMN_RESIZER#RESIZE_FINISHED';
+  payload: {
+    columnName: string;
+    oldWidth: number;
+    newWidth: number;
+  };
+};
+```
+
+#### Example Usage
+
+When using this behavior, to listen for the `ResizeFinishedAction`, you need to set up an action handler with the name `'COLUMN_RESIZER#RESIZE_FINISHED'`. This handler will receive the action's payload.
+
+```typescript
+{
+  actionHandlers: {
+    'COLUMN_RESIZER#RESIZE_FINISHED': (resizeFinishedAction: ResizeFinishedAction): void => {
+      // Handle the resize finished action
+    }
+  }
+}
+```

package/es/library/behaviours/table-column-resizer/ReadmeActionAsEvent.md

@@ -0,0 +1,141 @@
+# Table Column Resizer Behavior
+
+This document outlines the properties, event handlers, and dispatching events related to the Table Column Resizer Behavior. This behavior is designed to handle the resizing of table columns in a user interface.
+
+## Properties
+
+### `resizeConfig`
+
+The `resizeConfig` object contains configuration settings for the column resizer.
+
+```typescript
+type ResizeConfig = {
+  enabled: boolean;
+  isRTL: boolean;
+  maxWidth: number;
+  minWidth: number;
+};
+```
+
+#### Note: State and Properties
+
+The properties used by the behavior are derived from the state. The following state structure is expected:
+
+```typescript
+export type State = {
+  properties: {
+    resizeConfig: ResizeConfig;
+  };
+};
+```
+
+## Listening Event Handlers
+
+Event handlers respond to various events related to column resizing. Each event handler receives a `dispatch`, `updateState`, and `state` parameter, so we only describe the payload here.
+
+### `MOUNT`
+
+This event is triggered when the column resizer is mounted.
+
+```typescript
+export type InitEventHandlerPayload = {
+  tableElement: HTMLElement;
+  columnName: string;
+  columnWidth: number;
+  initialPosition: number;
+};
+```
+
+### `COLUMN_RESIZER#RESIZE_STARTED`
+
+This event is triggered when a column resize operation starts.
+
+> Payload: `ResizeStartPayload`
+
+```typescript
+export type ResizeStartPayload = {
+  columnName: string;
+  initialPosition: number;
+  tableElement: HTMLElement;
+  columnWidth: number;
+  mouseEvent: MouseEvent;
+};
+```
+
+### `COLUMN_RESIZER#RESIZE_SCROLL`
+
+This event is triggered when the column is resized via a scroll event.
+
+> Payload: `ResizeByMouseEventPayload`
+
+```typescript
+export type ResizeByMouseEventPayload = {
+  mouseEvent: MouseEvent;
+};
+```
+
+### `COLUMN_RESIZER#RESIZE_MOUSE`
+
+This event is triggered when the column is resized via a mouse event.
+
+> Payload: `ResizeByScrollEventPayload`
+
+```typescript
+export type ResizeByScrollEventPayload = {}; // No payload needed
+```
+
+### `COLUMN_RESIZER#RESIZE_ENDED`
+
+This event is triggered when the column resize operation ends.
+
+> Payload: `ResizeEndEventPayload`
+
+```typescript
+export type ResizeEndEventPayload = {}; // No payload needed
+```
+
+#### Note: BaseEventParams
+
+Event handlers within the behavior expect payloads to be structured as shown below. This ensures consistency when handling events.
+
+```typescript
+type BaseEventParams<Payload> = {
+  action: { payload: Payload };
+  dispatch: Dispatch;
+  updateState: UpdateState;
+  state: State;
+};
+```
+
+## Dispatching Events from Behavior
+
+The behavior dispatches events to update the state in response to user interactions.
+
+### `COLUMN_RESIZER#RESIZE_FINISHED`
+
+This event is dispatched when a column resize operation is completed.
+
+```typescript
+type ResizeFinishedEvent = {
+  type: 'COLUMN_RESIZER#RESIZE_FINISHED';
+  payload: {
+    columnName: string;
+    oldWidth: number;
+    newWidth: number;
+  };
+};
+```
+
+#### Example Usage
+
+When using this behavior, to listen for the `ResizeFinishedEvent`, you need to set up an action handler with the name `'COLUMN_RESIZER#RESIZE_FINISHED'`. This handler will receive the event's payload.
+
+```typescript
+{
+  actionHandlers: {
+    'COLUMN_RESIZER#RESIZE_FINISHED': (resizeFinishedEvent: ResizeFinishedEvent): void => {
+      // Handle the resize finished event
+    }
+  }
+}
+```

package/es/library/behaviours/table-column-resizer/adapters/controllers/AbstractController.js

@@ -0,0 +1,7 @@
+export default class AbstractController {
+  constructor(service) {
+    this.service = service;
+    this.handle = this.handle.bind(this);
+  }
+
+}

package/es/library/behaviours/table-column-resizer/adapters/controllers/ResizeByMouseController.js

@@ -0,0 +1,21 @@
+import AbstractController from "./AbstractController";
+export default class ResizeByMouseController extends AbstractController {
+  handle(event) {
+    const {
+      mouseEvent,
+      tableElement
+    } = event.action.payload;
+    const {
+      state,
+      updateState
+    } = event;
+    const {
+      resizeByMouseUsecase
+    } = this.service;
+    resizeByMouseUsecase.updateDependency(state, updateState, tableElement);
+    resizeByMouseUsecase.execute({
+      mouseX: mouseEvent.clientX
+    });
+  }
+
+}