From b1d94063d2067d2e0c9049ffb5caeeff6c8951d9 Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Mon, 16 Oct 2023 11:27:56 +0800 Subject: [PATCH] Ako/ fix bot package circular dependecies (#10687) * chore: move types to prevent circular dependency * fix: temporarily use any to prevent circular deps --- .../bot-web-ui/src/stores/blockly-store.ts | 5 ++-- .../bot-web-ui/src/stores/dashboard-store.ts | 6 ++-- .../bot-web-ui/src/stores/load-modal-store.ts | 5 ++-- .../src/stores/quick-strategy-store.ts | 5 ++-- .../bot-web-ui/src/stores/save-modal-store.ts | 5 ++-- .../bot-web-ui/src/stores/toolbar-store.ts | 5 ++-- .../contract-card-body.tsx | 27 +---------------- .../contract-update-form.tsx | 29 ++++++++++++++++--- .../toggle-card-dialog.tsx | 3 +- .../contract-card-items/turbos-card-body.tsx | 2 +- .../components/data-list/data-list-row.tsx | 19 ++++++++++-- .../src/components/data-list/data-list.tsx | 16 ++-------- .../src/components/data-table/data-table.tsx | 6 +--- .../src/components/data-table/table-row.tsx | 4 ++- .../input-field/increment-buttons.tsx | 3 +- .../components/input-field/input-field.tsx | 6 ++-- .../src/components/input-field/input.tsx | 2 +- .../src/utils/files/file-uploader-utils.ts | 4 +-- .../src/utils/files/image/image_utility.ts | 3 +- 19 files changed, 70 insertions(+), 85 deletions(-) diff --git a/packages/bot-web-ui/src/stores/blockly-store.ts b/packages/bot-web-ui/src/stores/blockly-store.ts index 08729aff403f..5c6b18a6de20 100644 --- a/packages/bot-web-ui/src/stores/blockly-store.ts +++ b/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, diff --git a/packages/bot-web-ui/src/stores/dashboard-store.ts b/packages/bot-web-ui/src/stores/dashboard-store.ts index 3bf83b1e15e0..e5948d5d7a5f 100644 --- a/packages/bot-web-ui/src/stores/dashboard-store.ts +++ b/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, diff --git a/packages/bot-web-ui/src/stores/load-modal-store.ts b/packages/bot-web-ui/src/stores/load-modal-store.ts index acf1871b7320..70038f898415 100644 --- a/packages/bot-web-ui/src/stores/load-modal-store.ts +++ b/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, diff --git a/packages/bot-web-ui/src/stores/quick-strategy-store.ts b/packages/bot-web-ui/src/stores/quick-strategy-store.ts index efdf5c6212c3..47570e645044 100644 --- a/packages/bot-web-ui/src/stores/quick-strategy-store.ts +++ b/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, diff --git a/packages/bot-web-ui/src/stores/save-modal-store.ts b/packages/bot-web-ui/src/stores/save-modal-store.ts index 5ac3581c7163..16b6f86a7e28 100644 --- a/packages/bot-web-ui/src/stores/save-modal-store.ts +++ b/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, diff --git a/packages/bot-web-ui/src/stores/toolbar-store.ts b/packages/bot-web-ui/src/stores/toolbar-store.ts index 57535ab010e4..ce3a141ba73f 100644 --- a/packages/bot-web-ui/src/stores/toolbar-store.ts +++ b/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, diff --git a/packages/components/src/components/contract-card/contract-card-items/contract-card-body.tsx b/packages/components/src/components/contract-card/contract-card-items/contract-card-body.tsx index f9fe7c825133..29dca482ecf2 100644 --- a/packages/components/src/components/contract-card/contract-card-items/contract-card-body.tsx +++ b/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; diff --git a/packages/components/src/components/contract-card/contract-card-items/contract-update-form.tsx b/packages/components/src/components/contract-card/contract-card-items/contract-update-form.tsx index a337de1179df..9e9579ad2166 100644 --- a/packages/components/src/components/contract-card/contract-card-items/contract-update-form.tsx +++ b/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' diff --git a/packages/components/src/components/contract-card/contract-card-items/toggle-card-dialog.tsx b/packages/components/src/components/contract-card/contract-card-items/toggle-card-dialog.tsx index 1ef02a0e921f..bc0492b385b4 100644 --- a/packages/components/src/components/contract-card/contract-card-items/toggle-card-dialog.tsx +++ b/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; diff --git a/packages/components/src/components/contract-card/contract-card-items/turbos-card-body.tsx b/packages/components/src/components/contract-card/contract-card-items/turbos-card-body.tsx index 0213f01463a0..87aaa687d541 100644 --- a/packages/components/src/components/contract-card/contract-card-items/turbos-card-body.tsx +++ b/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, diff --git a/packages/components/src/components/data-list/data-list-row.tsx b/packages/components/src/components/data-list/data-list-row.tsx index 37189cc6c5d1..14cdab84b9c0 100644 --- a/packages/components/src/components/data-list/data-list-row.tsx +++ b/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; + server_time?: moment.Moment; + onClickCancel: (contract_id?: number) => void; + onClickSell: (contract_id?: number) => void; + measure?: () => void; + passthrough?: TPassThrough; +}; + +export type TRowRenderer = (params: Partial) => React.ReactNode; type TDataListRow = { action_desc?: { diff --git a/packages/components/src/components/data-list/data-list.tsx b/packages/components/src/components/data-list/data-list.tsx index 01d829796f3b..b417c2435c75 100644 --- a/packages/components/src/components/data-list/data-list.tsx +++ b/packages/components/src/components/data-list/data-list.tsx @@ -13,8 +13,8 @@ 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'; @@ -22,18 +22,6 @@ import { TTableRowItem, TPassThrough, TRow } from '../types/common.types'; const List = _List as unknown as React.FC; const AutoSizer = _AutoSizer as unknown as React.FC; const CellMeasurer = _CellMeasurer as unknown as React.FC; -export type TRowRenderer = (params: Partial) => React.ReactNode; - -type TMobileRowRenderer = { - row?: TRow; - is_footer?: boolean; - columns_map?: Record; - server_time?: moment.Moment; - onClickCancel: (contract_id?: number) => void; - onClickSell: (contract_id?: number) => void; - measure?: () => void; - passthrough?: TPassThrough; -}; export type TDataList = { className?: string; diff --git a/packages/components/src/components/data-table/data-table.tsx b/packages/components/src/components/data-table/data-table.tsx index 9cf27567f909..89f920bf65f9 100644 --- a/packages/components/src/components/data-table/data-table.tsx +++ b/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; const AutoSizer = _AutoSizer as unknown as React.FC; const CellMeasurer = _CellMeasurer as unknown as React.FC; -export type TSource = { - [key: string]: unknown; -}; - type TMeasure = { measure?: () => void; }; diff --git a/packages/components/src/components/data-table/table-row.tsx b/packages/components/src/components/data-table/table-row.tsx index 07a723467826..806c2cbf53c2 100644 --- a/packages/components/src/components/data-table/table-row.tsx +++ b/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 = { className?: string; id?: string; diff --git a/packages/components/src/components/input-field/increment-buttons.tsx b/packages/components/src/components/input-field/increment-buttons.tsx index c9388893c647..8a3c9950bfd7 100644 --- a/packages/components/src/components/input-field/increment-buttons.tsx +++ b/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: ( diff --git a/packages/components/src/components/input-field/input-field.tsx b/packages/components/src/components/input-field/input-field.tsx index 0f70c30ca4bc..425c57cb839e 100644 --- a/packages/components/src/components/input-field/input-field.tsx +++ b/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. diff --git a/packages/components/src/components/input-field/input.tsx b/packages/components/src/components/input-field/input.tsx index 8c5df9dd49e3..1ac6f7190537 100644 --- a/packages/components/src/components/input-field/input.tsx +++ b/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: ( diff --git a/packages/shared/src/utils/files/file-uploader-utils.ts b/packages/shared/src/utils/files/file-uploader-utils.ts index 8eac3f283cd9..0608bf1cab04 100644 --- a/packages/shared/src/utils/files/file-uploader-utils.ts +++ b/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: { diff --git a/packages/shared/src/utils/files/image/image_utility.ts b/packages/shared/src/utils/files/image/image_utility.ts index f0f140b8be57..c205bece28a0 100644 --- a/packages/shared/src/utils/files/image/image_utility.ts +++ b/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 => new Promise(resolve => { const img = new Image();