Ako/ fix bot package circular dependecies (deriv-com#10687)

* chore: move types to prevent circular dependency

* fix: temporarily use any to prevent circular deps

packages/bot-web-ui/src/stores/blockly-store.ts

@@ -2,7 +2,6 @@ import { action, makeObservable, observable } from 'mobx';
 import { onWorkspaceResize } from '@deriv/bot-skeleton';
 import { tabs_title } from 'Constants/bot-contents';
 import { getSetting, storeSetting } from 'Utils/settings';
-import RootStore from './root-store';
 
 export interface IBlocklyStore {
     is_loading: boolean;
@@ -16,9 +15,9 @@ export interface IBlocklyStore {
 }
 
 export default class BlocklyStore implements IBlocklyStore {
-    root_store: RootStore;
+    root_store: any;
 
-    constructor(root_store: RootStore) {
+    constructor(root_store: any) {
         makeObservable(this, {
             is_loading: observable,
             active_tab: observable,

packages/bot-web-ui/src/stores/dashboard-store.ts

@@ -7,8 +7,6 @@ import { clearInjectionDiv } from 'Constants/load-modal';
 
 import { setTourSettings, tour_type, TTourType } from '../components/dashboard/dbot-tours/utils';
 
-import RootStore from './root-store';
-
 export interface IDashboardStore {
     active_tab: number;
     dialog_options: { [key: string]: string };
@@ -40,9 +38,9 @@ export interface IDashboardStore {
 }
 
 export default class DashboardStore implements IDashboardStore {
-    root_store: RootStore;
+    root_store: any;
 
-    constructor(root_store: RootStore) {
+    constructor(root_store: any) {
         makeObservable(this, {
             active_tab_tutorials: observable,
             active_tab: observable,

packages/bot-web-ui/src/stores/load-modal-store.ts

@@ -5,7 +5,6 @@ import { isMobile } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import { clearInjectionDiv, tabs_title } from 'Constants/load-modal';
 import { TStrategy } from 'Types';
-import RootStore from './root-store';
 
 const Blockly = window.Blockly;
 
@@ -54,10 +53,10 @@ interface ILoadModalStore {
 }
 
 export default class LoadModalStore implements ILoadModalStore {
-    root_store: RootStore;
+    root_store: any;
     previewed_strategy_id = '';
 
-    constructor(root_store: RootStore) {
+    constructor(root_store: any) {
         makeObservable(this, {
             active_index: observable,
             previewed_strategy_id: observable,

packages/bot-web-ui/src/stores/quick-strategy-store.ts

@@ -28,15 +28,14 @@ import {
     TTypeStrategiesDropdown,
     TTypeStrategy,
 } from '../components/dashboard/quick-strategy/quick-strategy.types';
-import RootStore from './root-store';
 
 const Blockly = window.Blockly;
 
 export default class QuickStrategyStore {
-    root_store: RootStore;
+    root_store: any;
     qs_cache: TQSCache = (getSetting('quick_strategy') as TQSCache) || {};
 
-    constructor(root_store: RootStore) {
+    constructor(root_store: any) {
         makeObservable(this, {
             selected_symbol: observable,
             selected_trade_type: observable,

packages/bot-web-ui/src/stores/save-modal-store.ts

@@ -12,7 +12,6 @@ import { localize } from '@deriv/translations';
 import { MAX_STRATEGIES } from 'Constants/bot-contents';
 import { button_status } from 'Constants/button-status';
 import { TStrategy } from 'Types';
-import RootStore from './root-store';
 
 type IOnConfirmProps = {
     is_local: boolean;
@@ -33,9 +32,9 @@ interface ISaveModalStore {
 const Blockly = window.Blockly;
 
 export default class SaveModalStore implements ISaveModalStore {
-    root_store: RootStore;
+    root_store: any;
 
-    constructor(root_store: RootStore) {
+    constructor(root_store: any) {
         makeObservable(this, {
             is_save_modal_open: observable,
             button_status: observable,

packages/bot-web-ui/src/stores/toolbar-store.ts

@@ -1,6 +1,5 @@
 import { action, makeObservable, observable } from 'mobx';
 import { config, load, runGroupedEvents } from '@deriv/bot-skeleton';
-import RootStore from './root-store';
 
 interface IToolbarStore {
     is_animation_info_modal_open: boolean;
@@ -21,9 +20,9 @@ interface IToolbarStore {
 
 const Blockly = window.Blockly;
 export default class ToolbarStore implements IToolbarStore {
-    root_store: RootStore;
+    root_store: any;
 
-    constructor(root_store: RootStore) {
+    constructor(root_store: any) {
         makeObservable(this, {
             is_animation_info_modal_open: observable,
             is_dialog_open: observable,

packages/components/src/components/contract-card/contract-card-items/contract-card-body.tsx

@@ -13,32 +13,7 @@ import AccumulatorCardBody from './accumulator-card-body';
 import MultiplierCardBody from './multiplier-card-body';
 import TurbosCardBody from './turbos-card-body';
 import VanillaOptionsCardBody from './vanilla-options-card-body';
-import { TContractInfo, TContractStore } from '@deriv/shared/src/utils/contract/contract-types';
-import { TToastConfig } from '../../types/contract.types';
-import { TGetCardLables } from '../../types/common.types';
-
-export type TGeneralContractCardBodyProps = {
-    addToast: (toast_config: TToastConfig) => void;
-    contract_info: TContractInfo;
-    contract_update: TContractInfo['contract_update'];
-    connectWithContractUpdate?: (contract_update_form: React.ElementType) => React.ElementType;
-    currency: string;
-    current_focus?: string | null;
-    error_message_alignment?: string;
-    getCardLabels: TGetCardLables;
-    getContractById: (contract_id: number) => TContractStore;
-    should_show_cancellation_warning: boolean;
-    has_progress_slider: boolean;
-    is_mobile: boolean;
-    is_sold: boolean;
-    onMouseLeave?: () => void;
-    removeToast: (toast_id: string) => void;
-    setCurrentFocus: (name: string) => void;
-    status?: string;
-    toggleCancellationWarning: (state_change?: boolean) => void;
-    progress_slider?: React.ReactNode;
-    is_positions?: boolean;
-};
+import { TGeneralContractCardBodyProps } from './contract-update-form';
 
 export type TContractCardBodyProps = {
     is_accumulator?: boolean;

packages/components/src/components/contract-card/contract-card-items/contract-update-form.tsx

@@ -15,10 +15,31 @@ import Icon from '../../icon';
 import MobileWrapper from '../../mobile-wrapper';
 import Money from '../../money';
 import InputWithCheckbox from '../../input-wth-checkbox';
-import { TContractStore } from '@deriv/shared/src/utils/contract/contract-types';
-import { TGeneralContractCardBodyProps } from './contract-card-body';
-import { TGetCardLables } from '../../types';
-
+import { TContractInfo, TContractStore } from '@deriv/shared/src/utils/contract/contract-types';
+import { TGetCardLables, TToastConfig } from '../../types';
+
+export type TGeneralContractCardBodyProps = {
+    addToast: (toast_config: TToastConfig) => void;
+    contract_info: TContractInfo;
+    contract_update: TContractInfo['contract_update'];
+    connectWithContractUpdate?: (contract_update_form: React.ElementType) => React.ElementType;
+    currency: string;
+    current_focus?: string | null;
+    error_message_alignment?: string;
+    getCardLabels: TGetCardLables;
+    getContractById: (contract_id: number) => TContractStore;
+    should_show_cancellation_warning: boolean;
+    has_progress_slider: boolean;
+    is_mobile: boolean;
+    is_sold: boolean;
+    onMouseLeave?: () => void;
+    removeToast: (toast_id: string) => void;
+    setCurrentFocus: (name: string) => void;
+    status?: string;
+    toggleCancellationWarning: (state_change?: boolean) => void;
+    progress_slider?: React.ReactNode;
+    is_positions?: boolean;
+};
 export type TContractUpdateFormProps = Pick<
     TGeneralContractCardBodyProps,
     | 'addToast'

packages/components/src/components/contract-card/contract-card-items/toggle-card-dialog.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { isDesktop, isMobile } from '@deriv/shared';
 import ContractCardDialog from './contract-card-dialog';
-import ContractUpdateForm from './contract-update-form';
+import ContractUpdateForm, { TGeneralContractCardBodyProps } from './contract-update-form';
 import PopoverMessageCheckbox from '../../popover-message-checkbox';
 import Icon from '../../icon';
 import DesktopWrapper from '../../desktop-wrapper';
@@ -10,7 +10,6 @@ import MobileWrapper from '../../mobile-wrapper';
 import Popover from '../../popover';
 import Div100vhContainer from '../../div100vh-container';
 import './sass/contract-card-dialog.scss';
-import { TGeneralContractCardBodyProps } from './contract-card-body';
 
 let ContractUpdateFormWrapper: React.ElementType;
 

packages/components/src/components/contract-card/contract-card-items/turbos-card-body.tsx

@@ -7,7 +7,7 @@ import Icon from '../../icon';
 import MobileWrapper from '../../mobile-wrapper';
 import Money from '../../money';
 import { ResultStatusIcon } from '../result-overlay/result-overlay';
-import { TGeneralContractCardBodyProps } from './contract-card-body';
+import { TGeneralContractCardBodyProps } from './contract-update-form';
 
 type TTurbosCardBody = Pick<
     TGeneralContractCardBodyProps,

packages/components/src/components/data-list/data-list-row.tsx

@@ -2,9 +2,22 @@ import classNames from 'classnames';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import { useIsMounted } from '@deriv/shared';
-import { TRowRenderer } from './data-list';
-import { TPassThrough } from '../types/common.types';
-import { TSource } from '../data-table/data-table';
+import { TPassThrough, TRow } from '../types/common.types';
+import { TColIndex, TDataListCell } from './data-list-cell';
+import { TSource } from '../data-table/table-row';
+
+type TMobileRowRenderer = {
+    row?: TRow;
+    is_footer?: boolean;
+    columns_map?: Record<TColIndex, TDataListCell['column']>;
+    server_time?: moment.Moment;
+    onClickCancel: (contract_id?: number) => void;
+    onClickSell: (contract_id?: number) => void;
+    measure?: () => void;
+    passthrough?: TPassThrough;
+};
+
+export type TRowRenderer = (params: Partial<TMobileRowRenderer>) => React.ReactNode;
 
 type TDataListRow = {
     action_desc?: {

packages/components/src/components/data-list/data-list.tsx

@@ -13,27 +13,15 @@ import {
     IndexRange,
 } from 'react-virtualized';
 import { isMobile, isDesktop } from '@deriv/shared';
-import DataListCell, { TColIndex, TDataListCell } from './data-list-cell';
-import DataListRow from './data-list-row';
+import DataListCell from './data-list-cell';
+import DataListRow, { TRowRenderer } from './data-list-row';
 import ThemedScrollbars from '../themed-scrollbars';
 import { MeasuredCellParent } from 'react-virtualized/dist/es/CellMeasurer';
 import { TTableRowItem, TPassThrough, TRow } from '../types/common.types';
 
 const List = _List as unknown as React.FC<ListProps>;
 const AutoSizer = _AutoSizer as unknown as React.FC<AutoSizerProps>;
 const CellMeasurer = _CellMeasurer as unknown as React.FC<CellMeasurerProps>;
-export type TRowRenderer = (params: Partial<TMobileRowRenderer>) => React.ReactNode;
-
-type TMobileRowRenderer = {
-    row?: TRow;
-    is_footer?: boolean;
-    columns_map?: Record<TColIndex, TDataListCell['column']>;
-    server_time?: moment.Moment;
-    onClickCancel: (contract_id?: number) => void;
-    onClickSell: (contract_id?: number) => void;
-    measure?: () => void;
-    passthrough?: TPassThrough;
-};
 
 export type TDataList = {
     className?: string;

packages/components/src/components/data-table/data-table.tsx

@@ -12,7 +12,7 @@ import {
     CellMeasurerCache,
     Grid,
 } from 'react-virtualized';
-import TableRow from './table-row';
+import TableRow, { TSource } from './table-row';
 import ThemedScrollbars from '../themed-scrollbars';
 import { TTableRowItem } from '../types/common.types';
 import { CellMeasurerProps, MeasuredCellParent } from 'react-virtualized/dist/es/CellMeasurer.js';
@@ -21,10 +21,6 @@ const List = _List as unknown as React.FC<ListProps>;
 const AutoSizer = _AutoSizer as unknown as React.FC<AutoSizerProps>;
 const CellMeasurer = _CellMeasurer as unknown as React.FC<CellMeasurerProps>;
 
-export type TSource = {
-    [key: string]: unknown;
-};
-
 type TMeasure = {
     measure?: () => void;
 };

packages/components/src/components/data-table/table-row.tsx

@@ -2,10 +2,12 @@ import classNames from 'classnames';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import { TTableRowItem } from '../types/common.types';
-import { TSource } from './data-table';
 import TableCell from './table-cell';
 import TableRowInfo from './table-row-info';
 
+export type TSource = {
+    [key: string]: unknown;
+};
 type TTableRow<T> = {
     className?: string;
     id?: string;

packages/components/src/components/input-field/increment-buttons.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import classNames from 'classnames';
 import Button from '../button';
 import Icon from '../icon';
-import { TButtonType } from './input-field';
+
+export type TButtonType = 'button' | 'submit' | 'reset';
 
 type IncrementButtonsProps = {
     decrementValue: (

packages/components/src/components/input-field/input-field.tsx

@@ -1,14 +1,12 @@
 import React from 'react';
 import classNames from 'classnames';
 import { isCryptocurrency, getCurrencyDisplayCode } from '@deriv/shared';
-import IncrementButtons from './increment-buttons';
-import Input from './input';
+import IncrementButtons, { TButtonType } from './increment-buttons';
+import Input, { TInputMode } from './input';
 import Tooltip from '../tooltip';
 import Text from '../text';
 
 export type TChangeEvent = { target: { name: string; value: number | string } };
-export type TInputMode = 'search' | 'text' | 'none' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal';
-export type TButtonType = 'button' | 'submit' | 'reset';
 
 // ToDo: Refactor input_field
 // supports more than two different types of 'value' as a prop.

packages/components/src/components/input-field/input.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import React from 'react';
 import { getCurrencyDisplayCode } from '@deriv/shared';
-import { TInputMode } from './input-field';
 
+export type TInputMode = 'search' | 'text' | 'none' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal';
 type TInputProps = {
     ariaLabel?: string;
     changeValue: (

packages/shared/src/utils/files/file-uploader-utils.ts

@@ -1,6 +1,4 @@
-import { compressImg, convertToBase64, isImageType, getFormatFromMIME, TImage } from './image/image_utility';
-
-export type TFile = File & { file: Blob };
+import { compressImg, convertToBase64, isImageType, getFormatFromMIME, TImage, TFile } from './image/image_utility';
 
 export type TSettings = {
     documentType: {

packages/shared/src/utils/files/image/image_utility.ts

@@ -1,5 +1,4 @@
 import 'canvas-toBlob';
-import { TFile } from '../file-uploader-utils';
 
 declare global {
     interface Blob {
@@ -13,6 +12,8 @@ export type TImage = {
     filename: string;
 };
 
+export type TFile = File & { file: Blob };
+
 const compressImg = (image: TImage): Promise<Blob> =>
     new Promise(resolve => {
         const img = new Image();