maryia/DTRA-260/TS migration of /Constants files & SmartChart/Helpers…

… files in Trader (#6)

* feat: validation-rules and ui.js to ts

* chore: squash merge maryia/WEBREL-321/actions-to-TS changes

* chore: added types to validation-rules.ts

* chore: remove unused ui.js, migrate used ui.js and index.js to ts

* chore: remove unused ui.js

* chore: remove unused markers.js, and migrate barriers.js to ts

* chore: added types to barriers.js and its test

* test: add missing test for removeBarrier to barriers

* Revert "chore: squash merge maryia/WEBREL-321/actions-to-TS changes"

* feat: migrated chart-barrier-store.js to ts

* feat: remove unused ChartMarkerStore

* build: trigger build

* fix: address review comments

packages/trader/src/Stores/Modules/SmartChart/Constants/barriers.js → packages/trader/src/Stores/Modules/SmartChart/Constants/barriers.ts

@@ -14,24 +14,24 @@ export const CONTRACT_SHADES = {
     MULTUP: 'ABOVE',
     MULTDOWN: 'BELOW',
     ACCU: 'NONE_DOUBLE',
-};
+} as const;
 
 // Default non-shade according to number of barriers
 export const DEFAULT_SHADES = {
     1: 'NONE_SINGLE',
     2: 'NONE_DOUBLE',
-};
+} as const;
 
 export const BARRIER_COLORS = {
     GREEN: '#4bb4b3',
     RED: '#ec3f3f',
     ORANGE: '#ff6444',
     GRAY: '#999999',
     DARK_GRAY: '#6E6E6E',
-};
+} as const;
 
 export const BARRIER_LINE_STYLES = {
     DASHED: 'dashed',
     DOTTED: 'dotted',
     SOLID: 'solid',
-};
+} as const;

packages/trader/src/Stores/Modules/SmartChart/Helpers/__tests__/barriers.ts

@@ -0,0 +1,50 @@
+import * as Barriers from '../barriers';
+
+describe('Barriers', () => {
+    describe('barriersToString', () => {
+        it('should convert non-zero barriers which do not have +/- to string consisting of them without +/- while is_relative is false', () => {
+            expect(Barriers.barriersToString(false, 10, 15)).toEqual(['10', '15']);
+        });
+        it('should convert values without +/- and zero to string consisting of them without +/- while is_relative is false', () => {
+            expect(Barriers.barriersToString(false, 0, 15)).toEqual(['0', '15']);
+        });
+        it('should convert barriers which have +/- to string consisting of them without +/- while is_relative is false', () => {
+            expect(Barriers.barriersToString(false, +11, 15)).toEqual(['11', '15']);
+        });
+        it('should convert barriers which have +/- to string consisting of them with +/- while is_relative is true', () => {
+            expect(Barriers.barriersToString(true, +11, +15)).toEqual(['+11', '+15']);
+        });
+    });
+    describe('removeBarrier', () => {
+        let barriers: Barriers.TBarrier[];
+        const BARRIERS_KEYS = {
+            PURCHASE_SPOT_BARRIER: 'PURCHASE_SPOT_BARRIER',
+            TAKE_PROFIT: 'take_profit',
+            STOP_LOSS: 'stop_loss',
+            STOP_OUT: 'stop_out',
+        };
+        beforeEach(() => {
+            barriers = [
+                { key: BARRIERS_KEYS.PURCHASE_SPOT_BARRIER, high: '1111.11' },
+                { key: BARRIERS_KEYS.TAKE_PROFIT, high: '2222.22' },
+                { key: BARRIERS_KEYS.STOP_OUT, high: '3333.33' },
+            ] as Barriers.TBarrier[];
+        });
+        it('should remove the barrier with a specified key from initial barriers array', () => {
+            const key_to_remove = BARRIERS_KEYS.TAKE_PROFIT;
+            Barriers.removeBarrier(barriers, key_to_remove);
+            expect(barriers.find(barrier => barrier.key === key_to_remove)).toBeUndefined();
+            expect(barriers.length).toEqual(2);
+        });
+        it('should not remove any barriers if the key is not found', () => {
+            Barriers.removeBarrier(barriers, BARRIERS_KEYS.STOP_LOSS);
+            expect(barriers.length).toEqual(3);
+        });
+        it('should not modify the barriers array if it is empty', () => {
+            const key_to_remove = BARRIERS_KEYS.STOP_OUT;
+            const empty_barriers = [] as Barriers.TBarrier[];
+            Barriers.removeBarrier(empty_barriers, key_to_remove);
+            expect(empty_barriers.length).toEqual(0);
+        });
+    });
+});

packages/trader/src/Stores/Modules/SmartChart/Helpers/barriers.ts

@@ -0,0 +1,18 @@
+import type { ChartBarrierStore } from '../chart-barrier-store';
+
+export type TBarrier = ChartBarrierStore & { key?: string };
+
+export const barriersToString = (
+    is_relative: boolean,
+    ...barriers_list: Array<string | number | undefined>
+): Array<string | undefined> =>
+    barriers_list
+        .filter(barrier => barrier !== undefined && barrier !== null)
+        .map(barrier => `${is_relative && !/^[+-]/.test(`${barrier}`) ? '+' : ''}${barrier}`);
+
+export const removeBarrier = (barriers: TBarrier[], key: string) => {
+    const index = barriers.findIndex(b => b.key === key);
+    if (index > -1) {
+        barriers.splice(index, 1);
+    }
+};

packages/trader/src/Stores/Modules/SmartChart/chart-barrier-store.js → packages/trader/src/Stores/Modules/SmartChart/chart-barrier-store.ts

@@ -2,26 +2,38 @@ import { action, computed, observable, makeObservable } from 'mobx';
 import { BARRIER_COLORS, BARRIER_LINE_STYLES, CONTRACT_SHADES, DEFAULT_SHADES } from './Constants/barriers';
 import { barriersToString } from './Helpers/barriers';
 
-export class ChartBarrierStore {
-    color;
-    lineStyle;
-    shade;
-    shadeColor;
-
-    high;
-    low;
-
-    relative;
-    draggable;
+type TOnChartBarrierChange = null | ((barrier_1: string, barrier_2?: string) => void);
+type TOnChangeParams = { high: string | number; low?: string | number };
+type TChartBarrierStoreOptions =
+    | {
+          color: string;
+          line_style?: string;
+          not_draggable?: boolean;
+      }
+    | Record<string, never>;
 
-    hidePriceLines;
-    hideBarrierLine;
-    hideOffscreenLine;
-    title;
-
-    onChartBarrierChange;
-
-    constructor(high_barrier, low_barrier, onChartBarrierChange = null, { color, line_style, not_draggable } = {}) {
+export class ChartBarrierStore {
+    color: string;
+    lineStyle: string;
+    shade?: string;
+    shadeColor?: string;
+    high?: string | number;
+    low?: string | number;
+    onChange: (barriers: TOnChangeParams) => void;
+    relative: boolean;
+    draggable: boolean;
+    hidePriceLines: boolean;
+    hideBarrierLine?: boolean;
+    hideOffscreenLine?: boolean;
+    title?: string;
+    onChartBarrierChange: TOnChartBarrierChange | null;
+
+    constructor(
+        high_barrier: string | number,
+        low_barrier?: string | number,
+        onChartBarrierChange: TOnChartBarrierChange = null,
+        { color, line_style, not_draggable }: TChartBarrierStoreOptions = {}
+    ) {
         makeObservable(this, {
             color: observable,
             lineStyle: observable,
@@ -49,7 +61,7 @@ export class ChartBarrierStore {
 
         // trade_store's action to process new barriers on dragged
         this.onChartBarrierChange =
-            typeof onChartBarrierChange === 'function' ? onChartBarrierChange.bind(this) : () => {};
+            typeof onChartBarrierChange === 'function' ? onChartBarrierChange.bind(this) : () => undefined;
 
         this.high = high_barrier || 0; // 0 to follow the price
         if (low_barrier) {
@@ -59,37 +71,38 @@ export class ChartBarrierStore {
         this.shade = this.default_shade;
 
         const has_barrier = !!high_barrier;
-        this.relative = !has_barrier || /^[+-]/.test(high_barrier);
+        this.relative = !has_barrier || /^[+-]/.test(high_barrier.toString());
         this.draggable = !not_draggable && has_barrier;
         this.hidePriceLines = !has_barrier;
     }
 
-    updateBarriers(high, low, isFromChart = false) {
+    updateBarriers(high: string | number, low?: string | number, isFromChart = false) {
         if (!isFromChart) {
-            this.relative = /^[+-]/.test(high);
+            this.relative = /^[+-]/.test(high.toString());
         }
         this.high = high || undefined;
         this.low = low || undefined;
     }
 
-    updateBarrierShade(should_display, contract_type) {
-        this.shade = (should_display && CONTRACT_SHADES[contract_type]) || this.default_shade;
+    updateBarrierShade(should_display: boolean, contract_type: string) {
+        this.shade =
+            (should_display && CONTRACT_SHADES[contract_type as keyof typeof CONTRACT_SHADES]) || this.default_shade;
     }
 
-    onBarrierChange({ high, low }) {
+    onBarrierChange({ high, low }: TOnChangeParams) {
         this.updateBarriers(high, low, true);
-        this.onChartBarrierChange(...barriersToString(this.relative, high, low));
+        this.onChartBarrierChange?.(...(barriersToString(this.relative, high, low) as [string, string | undefined]));
     }
 
-    updateBarrierColor(is_dark_mode) {
+    updateBarrierColor(is_dark_mode: boolean) {
         this.color = is_dark_mode ? BARRIER_COLORS.DARK_GRAY : BARRIER_COLORS.GRAY;
     }
 
-    get barrier_count() {
-        return (typeof this.high !== 'undefined') + (typeof this.low !== 'undefined');
+    get barrier_count(): number {
+        return +(typeof this.high !== 'undefined') + +(typeof this.low !== 'undefined');
     }
 
     get default_shade() {
-        return DEFAULT_SHADES[this.barrier_count];
+        return DEFAULT_SHADES[this.barrier_count as keyof typeof DEFAULT_SHADES];
     }
 }