From 613e011307514992b520f54c4ab732ee2d9c19b6 Mon Sep 17 00:00:00 2001 From: shayan khaleghparast Date: Mon, 11 Jul 2022 11:35:02 +0430 Subject: [PATCH 001/106] checking circle/ci test --- packages/p2p/scripts/extract-string.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/p2p/scripts/extract-string.js b/packages/p2p/scripts/extract-string.js index 252f2f05d522..ddd506873ee3 100644 --- a/packages/p2p/scripts/extract-string.js +++ b/packages/p2p/scripts/extract-string.js @@ -1,7 +1,7 @@ const glob = require('glob'); const getRegexPattern = () => /(i18n_default_text={?|localize\()\s*(['"])\s*(.*?)(? { const messages = []; From 2dc542ba02673c294d9364ced7ba6c64f29bc934 Mon Sep 17 00:00:00 2001 From: shayan khaleghparast Date: Mon, 11 Jul 2022 11:52:45 +0430 Subject: [PATCH 002/106] removed test changes --- packages/p2p/scripts/extract-string.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/p2p/scripts/extract-string.js b/packages/p2p/scripts/extract-string.js index ddd506873ee3..252f2f05d522 100644 --- a/packages/p2p/scripts/extract-string.js +++ b/packages/p2p/scripts/extract-string.js @@ -1,7 +1,7 @@ const glob = require('glob'); const getRegexPattern = () => /(i18n_default_text={?|localize\()\s*(['"])\s*(.*?)(? { const messages = []; From b6d5d3483a1e372896fca14deed28a6cdf42fdfc Mon Sep 17 00:00:00 2001 From: Likhith Kolayari Date: Fri, 11 Nov 2022 11:03:07 +0400 Subject: [PATCH 003/106] feat: :art: migrated component to tsx --- .../file-uploader-container/file-uploader.jsx | 4 +- .../{file-dropzone.jsx => file-dropzone.tsx} | 48 +++++++++++++++---- 2 files changed, 41 insertions(+), 11 deletions(-) rename packages/components/src/components/file-dropzone/{file-dropzone.jsx => file-dropzone.tsx} (84%) diff --git a/packages/account/src/Components/file-uploader-container/file-uploader.jsx b/packages/account/src/Components/file-uploader-container/file-uploader.jsx index 24ac7125ee86..eb2a08f83e61 100644 --- a/packages/account/src/Components/file-uploader-container/file-uploader.jsx +++ b/packages/account/src/Components/file-uploader-container/file-uploader.jsx @@ -96,11 +96,11 @@ const FileUploader = React.forwardRef(({ onFileDrop, getSocket }, ref) => { filename_limit={26} hover_message={localize('Drop files here..')} max_size={max_document_size} - message={} + message={() => } multiple={false} onDropAccepted={handleAcceptedFiles} onDropRejected={handleRejectedFiles} - validation_error_message={document_file.error_message} + validation_error_message={() => document_file.error_message} value={document_file.files} /> {(document_file.files.length > 0 || !!document_file.error_message) && ( diff --git a/packages/components/src/components/file-dropzone/file-dropzone.jsx b/packages/components/src/components/file-dropzone/file-dropzone.tsx similarity index 84% rename from packages/components/src/components/file-dropzone/file-dropzone.jsx rename to packages/components/src/components/file-dropzone/file-dropzone.tsx index 715b9f177c9b..769f2fc7548d 100644 --- a/packages/components/src/components/file-dropzone/file-dropzone.jsx +++ b/packages/components/src/components/file-dropzone/file-dropzone.tsx @@ -1,11 +1,43 @@ import classNames from 'classnames'; -import React from 'react'; +import React, { ReactElement, ReactNode, RefObject } from 'react'; import { CSSTransition } from 'react-transition-group'; -import Dropzone from 'react-dropzone'; +import Dropzone, { DropzoneOptions } from 'react-dropzone'; import { truncateFileName } from '@deriv/shared'; import Text from '../text'; -const FadeInMessage = ({ is_visible, color, children, key, timeout, no_text }) => ( +type TFadeInMessage = { + is_visible: boolean; + color?: string; + key?: string; + timeout: number; + no_text?: boolean; +}; + +type TPreviewSingle = { + dropzone_ref: RefObject; +} & TFileDropzone; + +type TFileDropzone = { + className?: string; + noClick?: boolean; + validation_error_message: (open?: () => void) => ReactNode | null; + max_size?: number; + value: Array<{ name: string }>; + message: (open?: () => void) => ReactNode; + filename_limit?: number; + error_message: string; + hover_message: string; + preview_single?: ReactElement; +} & DropzoneOptions; + +const FadeInMessage = ({ + is_visible, + color, + children, + key, + timeout, + no_text, +}: React.PropsWithChildren) => ( ); -const PreviewSingle = props => { +const PreviewSingle = (props: TPreviewSingle) => { if (props.preview_single) { return
{props.preview_single}
; } @@ -57,7 +89,7 @@ const PreviewSingle = props => { ); }; -const FileDropzone = ({ className, noClick = false, ...props }) => { +const FileDropzone = ({ className, noClick = false, ...props }: TFileDropzone) => { const dropzone_ref = React.useRef(null); return ( { timeout={150} no_text={noClick} > - {noClick ? props.message(open) : props.message} + {props.message(open)} { timeout={150} color='loss-danger' > - {noClick && typeof props.validation_error_message === 'function' - ? props.validation_error_message(open) - : props.validation_error_message} + {props.validation_error_message(open)} From cf53459e403c8b988e91ef0387d6269024f0047f Mon Sep 17 00:00:00 2001 From: Likhith Kolayari Date: Fri, 11 Nov 2022 11:26:23 +0400 Subject: [PATCH 004/106] feat: :art: fixed index --- packages/components/src/components/file-dropzone/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/file-dropzone/index.js b/packages/components/src/components/file-dropzone/index.js index 5e329982b80e..4d70ff0cfd1f 100644 --- a/packages/components/src/components/file-dropzone/index.js +++ b/packages/components/src/components/file-dropzone/index.js @@ -1,4 +1,4 @@ -import FileDropzone from './file-dropzone.jsx'; +import FileDropzone from './file-dropzone'; import './file-dropzone.scss'; export default FileDropzone; From 4eaec357a84ba7ccee8f4ddfcfe8cd5b1ba9b076 Mon Sep 17 00:00:00 2001 From: Likhith Kolayari Date: Fri, 11 Nov 2022 11:41:50 +0400 Subject: [PATCH 005/106] feat: :art: incorporated single logic for props --- .../file-dropzone/file-dropzone.tsx | 22 ++++++++----------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/packages/components/src/components/file-dropzone/file-dropzone.tsx b/packages/components/src/components/file-dropzone/file-dropzone.tsx index 769f2fc7548d..dece1a3067e0 100644 --- a/packages/components/src/components/file-dropzone/file-dropzone.tsx +++ b/packages/components/src/components/file-dropzone/file-dropzone.tsx @@ -91,6 +91,10 @@ const PreviewSingle = (props: TPreviewSingle) => { const FileDropzone = ({ className, noClick = false, ...props }: TFileDropzone) => { const dropzone_ref = React.useRef(null); + + const message = props.message(); + const validationErrorMessage = props.validation_error_message(); + return ( 0, - 'dc-file-dropzone--has-error': - (isDragReject || !!props.validation_error_message) && !isDragAccept, + 'dc-file-dropzone--has-error': (isDragReject || !!validationErrorMessage) && !isDragAccept, 'dc-file-dropzone--is-noclick': noClick, })} ref={dropzone_ref} @@ -121,12 +124,7 @@ const FileDropzone = ({ className, noClick = false, ...props }: TFileDropzone) =
@@ -141,7 +139,7 @@ const FileDropzone = ({ className, noClick = false, ...props }: TFileDropzone) = {/* Handle cases for displaying multiple files and single filenames */} - {props.multiple && props.value.length > 0 && !props.validation_error_message + {props.multiple && props.value.length > 0 && !validationErrorMessage ? props.value.map((file, idx) => ( - )} + !validationErrorMessage && } From b8d666ade0c7961ef81bef418027f54b42bab986 Mon Sep 17 00:00:00 2001 From: Likhith Kolayari Date: Fri, 11 Nov 2022 12:41:35 +0400 Subject: [PATCH 006/106] feat: :art: migrated component to tsx --- .../{drawer.spec.js => drawer.spec.tsx} | 4 +- .../drawer/{drawer.jsx => drawer.tsx} | 40 +++++++++---------- 2 files changed, 21 insertions(+), 23 deletions(-) rename packages/components/src/components/drawer/__tests__/{drawer.spec.js => drawer.spec.tsx} (89%) rename packages/components/src/components/drawer/{drawer.jsx => drawer.tsx} (77%) diff --git a/packages/components/src/components/drawer/__tests__/drawer.spec.js b/packages/components/src/components/drawer/__tests__/drawer.spec.tsx similarity index 89% rename from packages/components/src/components/drawer/__tests__/drawer.spec.js rename to packages/components/src/components/drawer/__tests__/drawer.spec.tsx index 062a013f3b30..454295fc11ea 100644 --- a/packages/components/src/components/drawer/__tests__/drawer.spec.js +++ b/packages/components/src/components/drawer/__tests__/drawer.spec.tsx @@ -1,10 +1,10 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; -import Drawer from '../drawer.jsx'; +import Drawer from '../drawer'; describe('Drawer', () => { it('should Drawer be in the document', () => { - render(); + render(); expect(screen.getByTestId('drawer')).toBeInTheDocument(); }); diff --git a/packages/components/src/components/drawer/drawer.jsx b/packages/components/src/components/drawer/drawer.tsx similarity index 77% rename from packages/components/src/components/drawer/drawer.jsx rename to packages/components/src/components/drawer/drawer.tsx index df9f613d1c49..c529cced9aae 100644 --- a/packages/components/src/components/drawer/drawer.jsx +++ b/packages/components/src/components/drawer/drawer.tsx @@ -1,11 +1,22 @@ import classNames from 'classnames'; -import PropTypes from 'prop-types'; import React from 'react'; import Icon from '../icon'; import { isTabletDrawer } from '@deriv/shared'; +type TDrawer = { + anchor?: string; + className?: string; + contentClassName?: string; + footer?: React.ReactElement; + header?: React.ReactElement; + width?: number; + zIndex?: number; + is_open: boolean; + toggleDrawer?: (prop: boolean) => void; +}; + // TODO: use-from-shared - Use this icon from icons' shared package -const IconDrawer = ({ className }) => ( +const IconDrawer = ({ className }: { className?: string }) => ( { +}: React.PropsWithChildren) => { const [is_open, setIsOpen] = React.useState(props.is_open); React.useEffect(() => { @@ -53,11 +64,11 @@ const Drawer = ({ style={{ zIndex, transform: - is_open && - !is_mobile && - (anchor === 'left' - ? `translateX(calc(${width}px - 16px))` - : `translateX(calc(-${width}px + 16px))`), + is_open && !is_mobile + ? anchor === 'left' + ? `translateX(calc(${width}px - 16px))` + : `translateX(calc(-${width}px + 16px))` + : undefined, }} >
Date: Fri, 11 Nov 2022 14:20:43 +0400 Subject: [PATCH 007/106] feat: :recycle: incorporated review comments --- .../file-uploader-container/file-uploader.jsx | 4 +-- .../file-dropzone/file-dropzone.tsx | 32 ++++++++++++------- 2 files changed, 22 insertions(+), 14 deletions(-) diff --git a/packages/account/src/Components/file-uploader-container/file-uploader.jsx b/packages/account/src/Components/file-uploader-container/file-uploader.jsx index eb2a08f83e61..24ac7125ee86 100644 --- a/packages/account/src/Components/file-uploader-container/file-uploader.jsx +++ b/packages/account/src/Components/file-uploader-container/file-uploader.jsx @@ -96,11 +96,11 @@ const FileUploader = React.forwardRef(({ onFileDrop, getSocket }, ref) => { filename_limit={26} hover_message={localize('Drop files here..')} max_size={max_document_size} - message={() => } + message={} multiple={false} onDropAccepted={handleAcceptedFiles} onDropRejected={handleRejectedFiles} - validation_error_message={() => document_file.error_message} + validation_error_message={document_file.error_message} value={document_file.files} /> {(document_file.files.length > 0 || !!document_file.error_message) && ( diff --git a/packages/components/src/components/file-dropzone/file-dropzone.tsx b/packages/components/src/components/file-dropzone/file-dropzone.tsx index dece1a3067e0..42f03d7d3adf 100644 --- a/packages/components/src/components/file-dropzone/file-dropzone.tsx +++ b/packages/components/src/components/file-dropzone/file-dropzone.tsx @@ -20,10 +20,11 @@ type TPreviewSingle = { type TFileDropzone = { className?: string; noClick?: boolean; - validation_error_message: (open?: () => void) => ReactNode | null; + // validation_error_message: (open?: () => void) => ReactNode; + validation_error_message: ReactNode & ((open?: () => void) => ReactNode); max_size?: number; value: Array<{ name: string }>; - message: (open?: () => void) => ReactNode; + message: ReactNode & ((open?: () => void) => ReactNode); filename_limit?: number; error_message: string; hover_message: string; @@ -92,9 +93,6 @@ const PreviewSingle = (props: TPreviewSingle) => { const FileDropzone = ({ className, noClick = false, ...props }: TFileDropzone) => { const dropzone_ref = React.useRef(null); - const message = props.message(); - const validationErrorMessage = props.validation_error_message(); - return ( 0, - 'dc-file-dropzone--has-error': (isDragReject || !!validationErrorMessage) && !isDragAccept, + 'dc-file-dropzone--has-error': + (isDragReject || !!props.validation_error_message) && !isDragAccept, 'dc-file-dropzone--is-noclick': noClick, })} ref={dropzone_ref} @@ -124,11 +123,16 @@ const FileDropzone = ({ className, noClick = false, ...props }: TFileDropzone) =
- {props.message(open)} + {noClick ? props.message(open) : props.message} {/* Handle cases for displaying multiple files and single filenames */} - {props.multiple && props.value.length > 0 && !validationErrorMessage + {props.multiple && props.value.length > 0 && !props.validation_error_message ? props.value.map((file, idx) => ( } + !props.validation_error_message && ( + + )} - {props.validation_error_message(open)} + {noClick && typeof props.validation_error_message === 'function' + ? props.validation_error_message(open) + : props.validation_error_message}
From 83bbd306bb332139308ac026da017063009c1cbb Mon Sep 17 00:00:00 2001 From: Likhith Kolayari Date: Fri, 11 Nov 2022 14:21:45 +0400 Subject: [PATCH 008/106] feat: :art: remoed comments --- .../components/src/components/file-dropzone/file-dropzone.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/components/file-dropzone/file-dropzone.tsx b/packages/components/src/components/file-dropzone/file-dropzone.tsx index 42f03d7d3adf..0b612fa3280b 100644 --- a/packages/components/src/components/file-dropzone/file-dropzone.tsx +++ b/packages/components/src/components/file-dropzone/file-dropzone.tsx @@ -20,7 +20,6 @@ type TPreviewSingle = { type TFileDropzone = { className?: string; noClick?: boolean; - // validation_error_message: (open?: () => void) => ReactNode; validation_error_message: ReactNode & ((open?: () => void) => ReactNode); max_size?: number; value: Array<{ name: string }>; From 0591b98f3b83ba69598b43d9fd6c1f9c8778a878 Mon Sep 17 00:00:00 2001 From: Likhith Kolayari Date: Fri, 11 Nov 2022 14:31:12 +0400 Subject: [PATCH 009/106] feat: migrated index file --- .../components/src/components/drawer/{index.js => index.ts} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename packages/components/src/components/drawer/{index.js => index.ts} (57%) diff --git a/packages/components/src/components/drawer/index.js b/packages/components/src/components/drawer/index.ts similarity index 57% rename from packages/components/src/components/drawer/index.js rename to packages/components/src/components/drawer/index.ts index d482c44277be..b9191b0cf944 100644 --- a/packages/components/src/components/drawer/index.js +++ b/packages/components/src/components/drawer/index.ts @@ -1,4 +1,4 @@ -import Drawer from './drawer.jsx'; +import Drawer from './drawer'; import './drawer.scss'; export default Drawer; From f98650c2b3f5912d39743f89f30c05440c98ab12 Mon Sep 17 00:00:00 2001 From: Likhith Kolayari Date: Fri, 11 Nov 2022 14:32:01 +0400 Subject: [PATCH 010/106] feat: migrated index file --- .../src/components/file-dropzone/{index.js => index.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/components/src/components/file-dropzone/{index.js => index.ts} (100%) diff --git a/packages/components/src/components/file-dropzone/index.js b/packages/components/src/components/file-dropzone/index.ts similarity index 100% rename from packages/components/src/components/file-dropzone/index.js rename to packages/components/src/components/file-dropzone/index.ts From 85294ff9baf70760772a99b8465a7d36e4fd65d9 Mon Sep 17 00:00:00 2001 From: Likhith Kolayari Date: Fri, 11 Nov 2022 16:07:54 +0400 Subject: [PATCH 011/106] feat: :art: migrated comeponent to tsx --- ...{array-renderer.jsx => array-renderer.tsx} | 22 +++++++++++-------- ...xpansion-panel.jsx => expansion-panel.tsx} | 17 +++++++------- .../expansion-panel/{index.js => index.ts} | 2 +- 3 files changed, 22 insertions(+), 19 deletions(-) rename packages/components/src/components/expansion-panel/{array-renderer.jsx => array-renderer.tsx} (86%) rename packages/components/src/components/expansion-panel/{expansion-panel.jsx => expansion-panel.tsx} (79%) rename packages/components/src/components/expansion-panel/{index.js => index.ts} (55%) diff --git a/packages/components/src/components/expansion-panel/array-renderer.jsx b/packages/components/src/components/expansion-panel/array-renderer.tsx similarity index 86% rename from packages/components/src/components/expansion-panel/array-renderer.jsx rename to packages/components/src/components/expansion-panel/array-renderer.tsx index a2076b8cd065..573bb2dae0c1 100644 --- a/packages/components/src/components/expansion-panel/array-renderer.jsx +++ b/packages/components/src/components/expansion-panel/array-renderer.tsx @@ -1,10 +1,20 @@ import classNames from 'classnames'; -import PropTypes from 'prop-types'; import React from 'react'; import Icon from '../icon'; -const ArrayRenderer = ({ array, open_ids, setOpenIds }) => { - const onArrayItemClick = id => { +type TItem = { + id: string; + value: Array | string; +}; + +type TArrayRenderer = { + array: Array; + open_ids: Array; + setOpenIds: (props: Array) => void; +}; + +const ArrayRenderer = ({ array, open_ids, setOpenIds }: TArrayRenderer) => { + const onArrayItemClick = (id: string) => { if (open_ids.includes(id)) { setOpenIds(open_ids.filter(open_id => open_id !== id)); } else { @@ -48,10 +58,4 @@ const ArrayRenderer = ({ array, open_ids, setOpenIds }) => { ); }; -ArrayRenderer.propTypes = { - array: PropTypes.Array, - open_ids: PropTypes.array, - setOpenIds: PropTypes.func, -}; - export default ArrayRenderer; diff --git a/packages/components/src/components/expansion-panel/expansion-panel.jsx b/packages/components/src/components/expansion-panel/expansion-panel.tsx similarity index 79% rename from packages/components/src/components/expansion-panel/expansion-panel.jsx rename to packages/components/src/components/expansion-panel/expansion-panel.tsx index fcee69b36127..156fb071828e 100644 --- a/packages/components/src/components/expansion-panel/expansion-panel.jsx +++ b/packages/components/src/components/expansion-panel/expansion-panel.tsx @@ -1,11 +1,15 @@ import classNames from 'classnames'; -import PropTypes from 'prop-types'; import React from 'react'; -import ArrayRenderer from './array-renderer.jsx'; +import ArrayRenderer from './array-renderer'; import Icon from '../icon'; -const ExpansionPanel = ({ message, onResize }) => { - const [open_ids, setOpenIds] = React.useState([]); +type TExpansionPanel = { + message: { header: React.ReactNode; content: Array }; + onResize: () => void; +}; + +const ExpansionPanel = ({ message, onResize }: TExpansionPanel) => { + const [open_ids, setOpenIds] = React.useState([]); const [is_open, setIsOpen] = React.useState(false); React.useEffect(() => { @@ -39,9 +43,4 @@ const ExpansionPanel = ({ message, onResize }) => { ); }; -ExpansionPanel.propTypes = { - message: PropTypes.object, - onResize: PropTypes.func, -}; - export default ExpansionPanel; diff --git a/packages/components/src/components/expansion-panel/index.js b/packages/components/src/components/expansion-panel/index.ts similarity index 55% rename from packages/components/src/components/expansion-panel/index.js rename to packages/components/src/components/expansion-panel/index.ts index 889c5afd8591..d21896f24cf4 100644 --- a/packages/components/src/components/expansion-panel/index.js +++ b/packages/components/src/components/expansion-panel/index.ts @@ -1,4 +1,4 @@ -import ExpansionPanel from './expansion-panel.jsx'; +import ExpansionPanel from './expansion-panel'; import './expansion-panel.scss'; export default ExpansionPanel; From 7145ae1c57a062549c44048606e194655846eb7d Mon Sep 17 00:00:00 2001 From: Likhith Kolayari Date: Fri, 11 Nov 2022 16:13:48 +0400 Subject: [PATCH 012/106] feat: :art: incorporated type --- .../components/src/components/file-dropzone/file-dropzone.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/components/file-dropzone/file-dropzone.tsx b/packages/components/src/components/file-dropzone/file-dropzone.tsx index 0b612fa3280b..95c99d37bb8a 100644 --- a/packages/components/src/components/file-dropzone/file-dropzone.tsx +++ b/packages/components/src/components/file-dropzone/file-dropzone.tsx @@ -19,7 +19,6 @@ type TPreviewSingle = { type TFileDropzone = { className?: string; - noClick?: boolean; validation_error_message: ReactNode & ((open?: () => void) => ReactNode); max_size?: number; value: Array<{ name: string }>; From d95fe47c7137743c4d27821ea8f47565ab4df074 Mon Sep 17 00:00:00 2001 From: Likhith Kolayari Date: Fri, 11 Nov 2022 17:02:56 +0400 Subject: [PATCH 013/106] feat: :art: incorporated type --- .../src/components/expansion-panel/array-renderer.tsx | 6 +----- .../src/components/expansion-panel/expansion-panel.tsx | 3 ++- packages/components/src/components/types/common.types.ts | 5 +++++ 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/components/src/components/expansion-panel/array-renderer.tsx b/packages/components/src/components/expansion-panel/array-renderer.tsx index 573bb2dae0c1..5769adde5709 100644 --- a/packages/components/src/components/expansion-panel/array-renderer.tsx +++ b/packages/components/src/components/expansion-panel/array-renderer.tsx @@ -1,11 +1,7 @@ import classNames from 'classnames'; import React from 'react'; import Icon from '../icon'; - -type TItem = { - id: string; - value: Array | string; -}; +import { TItem } from '../types/common.types'; type TArrayRenderer = { array: Array; diff --git a/packages/components/src/components/expansion-panel/expansion-panel.tsx b/packages/components/src/components/expansion-panel/expansion-panel.tsx index 156fb071828e..61ba6abf1653 100644 --- a/packages/components/src/components/expansion-panel/expansion-panel.tsx +++ b/packages/components/src/components/expansion-panel/expansion-panel.tsx @@ -2,9 +2,10 @@ import classNames from 'classnames'; import React from 'react'; import ArrayRenderer from './array-renderer'; import Icon from '../icon'; +import { TItem } from '../types/common.types'; type TExpansionPanel = { - message: { header: React.ReactNode; content: Array }; + message: { header: React.ReactNode; content: Array & Array }; onResize: () => void; }; diff --git a/packages/components/src/components/types/common.types.ts b/packages/components/src/components/types/common.types.ts index c10c3c36f60f..62e0cd5db049 100644 --- a/packages/components/src/components/types/common.types.ts +++ b/packages/components/src/components/types/common.types.ts @@ -3,3 +3,8 @@ import React from 'react'; export type TGenericObjectType = { [key: string]: React.ReactNode; }; + +export type TItem = { + id: string; + value: Array | string; +}; From bd8d4cd23039ce0b69c28ce4bcf624c8489912ba Mon Sep 17 00:00:00 2001 From: Likhith Kolayari Date: Mon, 14 Nov 2022 08:27:56 +0400 Subject: [PATCH 014/106] feat: :recycle: incorporated review comments --- .../src/components/expansion-panel/expansion-panel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/expansion-panel/expansion-panel.tsx b/packages/components/src/components/expansion-panel/expansion-panel.tsx index 61ba6abf1653..5c3d5b83844a 100644 --- a/packages/components/src/components/expansion-panel/expansion-panel.tsx +++ b/packages/components/src/components/expansion-panel/expansion-panel.tsx @@ -6,7 +6,7 @@ import { TItem } from '../types/common.types'; type TExpansionPanel = { message: { header: React.ReactNode; content: Array & Array }; - onResize: () => void; + onResize?: () => void; }; const ExpansionPanel = ({ message, onResize }: TExpansionPanel) => { From 2eb2601c7da00e18e9a44d2ac695238fd445c395 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cyauheni-kryzhyk-deriv=E2=80=9D?= <“yauheni@deriv.me”> Date: Mon, 14 Nov 2022 09:27:00 +0300 Subject: [PATCH 015/106] yauheni/76888/icontradetypes ts migration --- .../{icon-trade-types.jsx => icon-trade-types.tsx} | 14 +++++++------- .../icon-trade-types/{index.js => index.ts} | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) rename packages/components/src/components/icon-trade-types/{icon-trade-types.jsx => icon-trade-types.tsx} (95%) rename packages/components/src/components/icon-trade-types/{index.js => index.ts} (55%) diff --git a/packages/components/src/components/icon-trade-types/icon-trade-types.jsx b/packages/components/src/components/icon-trade-types/icon-trade-types.tsx similarity index 95% rename from packages/components/src/components/icon-trade-types/icon-trade-types.jsx rename to packages/components/src/components/icon-trade-types/icon-trade-types.tsx index b5a6e5b7bafe..b7f0acb5eb68 100644 --- a/packages/components/src/components/icon-trade-types/icon-trade-types.jsx +++ b/packages/components/src/components/icon-trade-types/icon-trade-types.tsx @@ -1,8 +1,13 @@ -import PropTypes from 'prop-types'; import React from 'react'; import Icon from '../icon/icon'; +import { TIconProps } from '../types'; -const IconTradeTypes = ({ type, className, ...props }) => { +type TIconTradeTypes = Omit & { + type: string; + className?: string; +}; + +const IconTradeTypes = ({ type, className, ...props }: TIconTradeTypes) => { switch (type.toLowerCase()) { case 'asiand': return ; @@ -76,9 +81,4 @@ const IconTradeTypes = ({ type, className, ...props }) => { } }; -IconTradeTypes.propTypes = { - type: PropTypes.string, - className: PropTypes.string, -}; - export default IconTradeTypes; diff --git a/packages/components/src/components/icon-trade-types/index.js b/packages/components/src/components/icon-trade-types/index.ts similarity index 55% rename from packages/components/src/components/icon-trade-types/index.js rename to packages/components/src/components/icon-trade-types/index.ts index 72bb933df322..4de2dcf2918e 100644 --- a/packages/components/src/components/icon-trade-types/index.js +++ b/packages/components/src/components/icon-trade-types/index.ts @@ -1,4 +1,4 @@ -import IconTradeTypes from './icon-trade-types.jsx'; +import IconTradeTypes from './icon-trade-types'; import './icon-trade-types.scss'; export default IconTradeTypes; From 47b74d5893135e089f768a7dae8fb62e65cd294b Mon Sep 17 00:00:00 2001 From: Likhith Kolayari Date: Mon, 14 Nov 2022 14:24:30 +0400 Subject: [PATCH 016/106] feat: :bug: resolved fialing testcase --- .../div100vh-container/div100vh-container.tsx | 6 +-- .../mobile-dialog/{index.js => index.ts} | 2 +- .../{mobile-dialog.jsx => mobile-dialog.tsx} | 48 ++++++++++--------- 3 files changed, 29 insertions(+), 27 deletions(-) rename packages/components/src/components/mobile-dialog/{index.js => index.ts} (55%) rename packages/components/src/components/mobile-dialog/{mobile-dialog.jsx => mobile-dialog.tsx} (78%) diff --git a/packages/components/src/components/div100vh-container/div100vh-container.tsx b/packages/components/src/components/div100vh-container/div100vh-container.tsx index ba67ba7f5be5..7a38781af87d 100644 --- a/packages/components/src/components/div100vh-container/div100vh-container.tsx +++ b/packages/components/src/components/div100vh-container/div100vh-container.tsx @@ -17,8 +17,8 @@ import Div100vh from 'react-div-100vh'; type TDiv100vhContainerProps = { id?: string; height_offset?: string; - is_bypassed: boolean; - is_disabled: boolean; + is_bypassed?: boolean; + is_disabled?: boolean; max_height_offset?: string; className?: string; max_autoheight_offset?: string; @@ -38,7 +38,7 @@ const Div100vhContainer = ({ height: max_autoheight_offset ? '' : height_rule, maxHeight: max_autoheight_offset ? `calc(100rvh - ${max_autoheight_offset})` : '', }; - if (is_bypassed) return children; + if (is_bypassed) return {children}; return ( {children} diff --git a/packages/components/src/components/mobile-dialog/index.js b/packages/components/src/components/mobile-dialog/index.ts similarity index 55% rename from packages/components/src/components/mobile-dialog/index.js rename to packages/components/src/components/mobile-dialog/index.ts index c7d101fa36c2..dda0abf95703 100644 --- a/packages/components/src/components/mobile-dialog/index.js +++ b/packages/components/src/components/mobile-dialog/index.ts @@ -1,4 +1,4 @@ -import MobileDialog from './mobile-dialog.jsx'; +import MobileDialog from './mobile-dialog'; import './mobile-dialog.scss'; export default MobileDialog; diff --git a/packages/components/src/components/mobile-dialog/mobile-dialog.jsx b/packages/components/src/components/mobile-dialog/mobile-dialog.tsx similarity index 78% rename from packages/components/src/components/mobile-dialog/mobile-dialog.jsx rename to packages/components/src/components/mobile-dialog/mobile-dialog.tsx index 424a9daab3dc..c0180d363bd5 100644 --- a/packages/components/src/components/mobile-dialog/mobile-dialog.jsx +++ b/packages/components/src/components/mobile-dialog/mobile-dialog.tsx @@ -7,7 +7,21 @@ import Text from '../text/text'; import Icon from '../icon/icon'; import Div100vhContainer from '../div100vh-container'; -const MobileDialog = props => { +type TMobileDialog = { + content_height_offset?: string; + onClose: React.MouseEventHandler; + has_content_scroll?: boolean; + portal_element_id: string; + renderTitle?: () => string; + title?: string; + visible?: boolean; + wrapper_classname?: string; + header_classname?: string; + has_full_height?: boolean; + footer?: React.ReactNode; +}; + +const MobileDialog = (props: React.PropsWithChildren) => { const { title, visible, @@ -20,7 +34,7 @@ const MobileDialog = props => { header_classname, } = props; - const footer_ref = React.useRef(false); + const footer_ref = React.useRef(null); const [footer_height, setHeight] = React.useState(0); React.useLayoutEffect(() => { if (footer_ref.current && !footer_height) { @@ -31,14 +45,14 @@ const MobileDialog = props => { const checkVisibility = () => { if (props.visible) { document.body.style.overflow = 'hidden'; - document.getElementById(portal_element_id).style.overflow = 'hidden'; + (document.getElementById(portal_element_id) as HTMLDivElement).style.overflow = 'hidden'; } else { - document.body.style.overflow = null; - document.getElementById(portal_element_id).style.overflow = null; + document.body.style.overflow = 'null'; + (document.getElementById(portal_element_id) as HTMLDivElement).style.overflow = 'null'; } }; - const scrollToElement = (parent, el) => { + const scrollToElement = (parent: HTMLInputElement, el: HTMLInputElement) => { const viewport_offset = el.getBoundingClientRect(); const hidden = viewport_offset.top + el.clientHeight + 20 > window.innerHeight; if (hidden) { @@ -48,10 +62,11 @@ const MobileDialog = props => { }; // sometimes input is covered by virtual keyboard on mobile chrome, uc browser - const handleClick = e => { + const handleClick = (e: React.MouseEvent) => { e.stopPropagation(); - if (e.target.tagName === 'INPUT' && e.target.type === 'number') { - const scrollToTarget = scrollToElement(e.currentTarget, e.target); + const target = e.target as HTMLInputElement; + if (target.tagName === 'INPUT' && target.type === 'number') { + const scrollToTarget = () => scrollToElement(e.currentTarget, target); window.addEventListener('resize', scrollToTarget, false); // remove listener, resize is not fired on iOS safari @@ -119,21 +134,8 @@ const MobileDialog = props => {
, - document.getElementById(portal_element_id) + document.getElementById(portal_element_id) as HTMLDivElement ); }; -MobileDialog.propTypes = { - content_height_offset: PropTypes.string, - children: PropTypes.any, - onClose: PropTypes.func, - has_content_scroll: PropTypes.bool, - portal_element_id: PropTypes.string.isRequired, - renderTitle: PropTypes.func, - title: PropTypes.string, - visible: PropTypes.bool, - wrapper_classname: PropTypes.string, - header_classname: PropTypes.string, -}; - export default MobileDialog; From c2d1872d17d33f90412c31a245f218d6ceefc226 Mon Sep 17 00:00:00 2001 From: tay suisin Date: Mon, 14 Nov 2022 18:37:18 +0800 Subject: [PATCH 017/106] ts migration for idv expired --- .../{idv-expired.spec.js => idv-expired.spec.tsx} | 9 ++++----- .../idv-expired/{idv-expired.jsx => idv-expired.tsx} | 6 +++++- 2 files changed, 9 insertions(+), 6 deletions(-) rename packages/account/src/Components/poi/idv-status/idv-expired/__tests__/{idv-expired.spec.js => idv-expired.spec.tsx} (87%) rename packages/account/src/Components/poi/idv-status/idv-expired/{idv-expired.jsx => idv-expired.tsx} (90%) diff --git a/packages/account/src/Components/poi/idv-status/idv-expired/__tests__/idv-expired.spec.js b/packages/account/src/Components/poi/idv-status/idv-expired/__tests__/idv-expired.spec.tsx similarity index 87% rename from packages/account/src/Components/poi/idv-status/idv-expired/__tests__/idv-expired.spec.js rename to packages/account/src/Components/poi/idv-status/idv-expired/__tests__/idv-expired.spec.tsx index 522ef9bfa395..a0f151090751 100644 --- a/packages/account/src/Components/poi/idv-status/idv-expired/__tests__/idv-expired.spec.js +++ b/packages/account/src/Components/poi/idv-status/idv-expired/__tests__/idv-expired.spec.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { screen, render, fireEvent } from '@testing-library/react'; -import { Icon } from '@deriv/components'; import { isDesktop, isMobile } from '@deriv/shared'; import IdvExpired from '../idv-expired'; @@ -19,8 +18,8 @@ jest.mock('@deriv/shared', () => ({ })); beforeEach(() => { - isDesktop.mockReturnValue(true); - isMobile.mockReturnValue(false); + (isDesktop as jest.Mock).mockReturnValue(true); + (isMobile as jest.Mock).mockReturnValue(false); jest.clearAllMocks(); }); @@ -41,8 +40,8 @@ describe('', () => { }); it('should render IdvExpired component on mobile', () => { - isDesktop.mockReturnValue(false); - isMobile.mockReturnValue(true); + (isDesktop as jest.Mock).mockReturnValue(false); + (isMobile as jest.Mock).mockReturnValue(true); testComponentRender(); }); diff --git a/packages/account/src/Components/poi/idv-status/idv-expired/idv-expired.jsx b/packages/account/src/Components/poi/idv-status/idv-expired/idv-expired.tsx similarity index 90% rename from packages/account/src/Components/poi/idv-status/idv-expired/idv-expired.jsx rename to packages/account/src/Components/poi/idv-status/idv-expired/idv-expired.tsx index 37c448ab1f38..bac7ec561865 100644 --- a/packages/account/src/Components/poi/idv-status/idv-expired/idv-expired.jsx +++ b/packages/account/src/Components/poi/idv-status/idv-expired/idv-expired.tsx @@ -3,7 +3,11 @@ import { Button, Icon, Text } from '@deriv/components'; import { isMobile } from '@deriv/shared'; import { localize } from '@deriv/translations'; -const IdvExpired = ({ handleRequireSubmission }) => { +type TIdvExpired = { + handleRequireSubmission: () => void; +}; + +const IdvExpired = ({ handleRequireSubmission }: TIdvExpired) => { return (
From 4e2cd2dd7214d327cbda874cbc7d41e81784629f Mon Sep 17 00:00:00 2001 From: Likhith Kolayari Date: Mon, 14 Nov 2022 15:51:45 +0400 Subject: [PATCH 018/106] feat: :art: migrated pageoverlay to tsx --- .../page-overlay/{index.js => index.ts} | 2 +- .../{page-overlay.jsx => page-overlay.tsx} | 38 +++++++++++-------- 2 files changed, 23 insertions(+), 17 deletions(-) rename packages/components/src/components/page-overlay/{index.js => index.ts} (56%) rename packages/components/src/components/page-overlay/{page-overlay.jsx => page-overlay.tsx} (75%) diff --git a/packages/components/src/components/page-overlay/index.js b/packages/components/src/components/page-overlay/index.ts similarity index 56% rename from packages/components/src/components/page-overlay/index.js rename to packages/components/src/components/page-overlay/index.ts index 98c3b1958b38..25d10e1e779a 100644 --- a/packages/components/src/components/page-overlay/index.js +++ b/packages/components/src/components/page-overlay/index.ts @@ -1,4 +1,4 @@ -import PageOverlay from './page-overlay.jsx'; +import PageOverlay from './page-overlay'; import './page-overlay.scss'; export default PageOverlay; diff --git a/packages/components/src/components/page-overlay/page-overlay.jsx b/packages/components/src/components/page-overlay/page-overlay.tsx similarity index 75% rename from packages/components/src/components/page-overlay/page-overlay.jsx rename to packages/components/src/components/page-overlay/page-overlay.tsx index af199f38fffa..76aacdbb52ab 100644 --- a/packages/components/src/components/page-overlay/page-overlay.jsx +++ b/packages/components/src/components/page-overlay/page-overlay.tsx @@ -1,13 +1,29 @@ import classNames from 'classnames'; -import React from 'react'; +import React, { MouseEventHandler } from 'react'; import ReactDOM from 'react-dom'; import { CSSTransition } from 'react-transition-group'; -import PropTypes from 'prop-types'; import Icon from '../icon/icon'; import { useOnClickOutside } from '../../hooks'; -const PageOverlay = ({ children, header, id, is_from_app = false, is_open, onClickClose, portal_id }) => { - const page_overlay_ref = React.useRef(); +type TPageOverlay = { + header?: React.ReactNode; + id?: string; + is_from_app?: boolean; + is_open?: boolean; + onClickClose?: MouseEventHandler; + portal_id?: string; +}; + +const PageOverlay = ({ + children, + header, + id, + is_from_app = false, + is_open, + onClickClose, + portal_id, +}: React.PropsWithChildren) => { + const page_overlay_ref = React.useRef(null); useOnClickOutside(page_overlay_ref, onClickClose, () => is_open && portal_id); @@ -55,21 +71,11 @@ const PageOverlay = ({ children, header, id, is_from_app = false, is_open, onCli > {el_page_overlay} , - document.getElementById(portal_id) + document.getElementById(portal_id) as HTMLElement ); } - return <>{el_page_overlay}; -}; - -PageOverlay.propTypes = { - children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]), - header: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - is_from_app: PropTypes.bool, - is_open: PropTypes.bool, - onClickClose: PropTypes.func, - portal_id: PropTypes.string, + return {el_page_overlay}; }; export default PageOverlay; From 69ca3408086a85cc37774a070352228fb720d87e Mon Sep 17 00:00:00 2001 From: Likhith Kolayari Date: Mon, 14 Nov 2022 16:00:17 +0400 Subject: [PATCH 019/106] feat: :bug: import statement fix --- .../mobile-full-page-modal/mobile-full-page-modal.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/mobile-full-page-modal/mobile-full-page-modal.jsx b/packages/components/src/components/mobile-full-page-modal/mobile-full-page-modal.jsx index d42090b9d3f0..193c0dc1a4f5 100644 --- a/packages/components/src/components/mobile-full-page-modal/mobile-full-page-modal.jsx +++ b/packages/components/src/components/mobile-full-page-modal/mobile-full-page-modal.jsx @@ -3,7 +3,7 @@ import * as React from 'react'; import classNames from 'classnames'; import Div100vhContainer from '../div100vh-container'; import FadeWrapper from '../fade-wrapper'; -import PageOverlay from '../page-overlay/page-overlay.jsx'; +import PageOverlay from '../page-overlay/page-overlay'; import Text from '../text/text'; import Icon from '../icon/icon'; From 7f2c942ab6abf2311d88dc424299e7f6f4576e28 Mon Sep 17 00:00:00 2001 From: Likhith Kolayari Date: Mon, 14 Nov 2022 16:05:14 +0400 Subject: [PATCH 020/106] feat: :art: migrated tooltip to tsx --- .../components/tooltip/{index.js => index.ts} | 2 +- .../tooltip/{tooltip.jsx => tooltip.tsx} | 22 +++++++++---------- 2 files changed, 11 insertions(+), 13 deletions(-) rename packages/components/src/components/tooltip/{index.js => index.ts} (57%) rename packages/components/src/components/tooltip/{tooltip.jsx => tooltip.tsx} (83%) diff --git a/packages/components/src/components/tooltip/index.js b/packages/components/src/components/tooltip/index.ts similarity index 57% rename from packages/components/src/components/tooltip/index.js rename to packages/components/src/components/tooltip/index.ts index 8c6a458a2860..d41a0fa2204f 100644 --- a/packages/components/src/components/tooltip/index.js +++ b/packages/components/src/components/tooltip/index.ts @@ -1,4 +1,4 @@ -import Tooltip from './tooltip.jsx'; +import Tooltip from './tooltip'; import './tooltip.scss'; export default Tooltip; diff --git a/packages/components/src/components/tooltip/tooltip.jsx b/packages/components/src/components/tooltip/tooltip.tsx similarity index 83% rename from packages/components/src/components/tooltip/tooltip.jsx rename to packages/components/src/components/tooltip/tooltip.tsx index 0d9aac2e0c26..904ae455b6cd 100644 --- a/packages/components/src/components/tooltip/tooltip.jsx +++ b/packages/components/src/components/tooltip/tooltip.tsx @@ -1,9 +1,17 @@ import classNames from 'classnames'; -import PropTypes from 'prop-types'; import React from 'react'; import Icon from '../icon'; import { useHover } from '../../hooks/use-hover'; +type TTooltip = { + alignment: string; + className?: string; + classNameIcon: string; + has_error?: boolean; + icon?: string; + message?: string; +}; + const Tooltip = ({ alignment, children, @@ -12,7 +20,7 @@ const Tooltip = ({ has_error, icon, // only question, info and dot accepted message, -}) => { +}: React.PropsWithChildren) => { const [hover_ref, show_tooltip_balloon_icon_on_hover] = useHover(); const icon_class = classNames(classNameIcon, icon); @@ -41,14 +49,4 @@ const Tooltip = ({ ); }; -Tooltip.propTypes = { - alignment: PropTypes.string, - children: PropTypes.node, - className: PropTypes.string, - classNameIcon: PropTypes.string, - has_error: PropTypes.bool, - icon: PropTypes.string, - message: PropTypes.string, -}; - export default Tooltip; From 781767b6a1c7a0c9092f07b0318ffc4179144763 Mon Sep 17 00:00:00 2001 From: tay suisin Date: Tue, 15 Nov 2022 12:15:45 +0800 Subject: [PATCH 021/106] remove .jsx from idv-epired index.js --- .../account/src/Components/poi/idv-status/idv-expired/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/account/src/Components/poi/idv-status/idv-expired/index.js b/packages/account/src/Components/poi/idv-status/idv-expired/index.js index c8447242b422..6a966351c5b5 100644 --- a/packages/account/src/Components/poi/idv-status/idv-expired/index.js +++ b/packages/account/src/Components/poi/idv-status/idv-expired/index.js @@ -1,3 +1,3 @@ -import IdvExpired from './idv-expired.jsx'; +import IdvExpired from './idv-expired'; export default IdvExpired; From 8bd9d04665a7651cdfabbb4b90722512b9c25047 Mon Sep 17 00:00:00 2001 From: Likhith Kolayari Date: Tue, 15 Nov 2022 08:23:55 +0400 Subject: [PATCH 022/106] feat: :recycle: incorporated review comments --- packages/components/src/components/tooltip/tooltip.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/tooltip/tooltip.tsx b/packages/components/src/components/tooltip/tooltip.tsx index 904ae455b6cd..140e0c88e451 100644 --- a/packages/components/src/components/tooltip/tooltip.tsx +++ b/packages/components/src/components/tooltip/tooltip.tsx @@ -6,7 +6,7 @@ import { useHover } from '../../hooks/use-hover'; type TTooltip = { alignment: string; className?: string; - classNameIcon: string; + classNameIcon?: string; has_error?: boolean; icon?: string; message?: string; From 56c7ac7d715813188d9599e89a155d9539147a23 Mon Sep 17 00:00:00 2001 From: Likhith Kolayari Date: Tue, 15 Nov 2022 08:34:38 +0400 Subject: [PATCH 023/106] feat: :recycle: incorporated review comments --- .../src/components/div100vh-container/div100vh-container.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/div100vh-container/div100vh-container.tsx b/packages/components/src/components/div100vh-container/div100vh-container.tsx index 7a38781af87d..5a4a00a9af7e 100644 --- a/packages/components/src/components/div100vh-container/div100vh-container.tsx +++ b/packages/components/src/components/div100vh-container/div100vh-container.tsx @@ -38,7 +38,7 @@ const Div100vhContainer = ({ height: max_autoheight_offset ? '' : height_rule, maxHeight: max_autoheight_offset ? `calc(100rvh - ${max_autoheight_offset})` : '', }; - if (is_bypassed) return {children}; + if (is_bypassed) return children as JSX.Element; return ( {children} From 2beef6eea172350d8def85707664cd4a80b87880 Mon Sep 17 00:00:00 2001 From: tay suisin Date: Tue, 15 Nov 2022 16:41:55 +0800 Subject: [PATCH 024/106] ts migration for idv-rejected --- packages/account/globals.d.ts | 4 ++++ .../{idv-rejected.spec.js => idv-rejected.spec.tsx} | 0 .../idv-rejected/{idv-rejected.jsx => idv-rejected.tsx} | 6 +++++- .../src/Components/poi/idv-status/idv-rejected/index.js | 2 +- packages/account/tsconfig.json | 1 + 5 files changed, 11 insertions(+), 2 deletions(-) create mode 100644 packages/account/globals.d.ts rename packages/account/src/Components/poi/idv-status/idv-rejected/__tests__/{idv-rejected.spec.js => idv-rejected.spec.tsx} (100%) rename packages/account/src/Components/poi/idv-status/idv-rejected/{idv-rejected.jsx => idv-rejected.tsx} (88%) diff --git a/packages/account/globals.d.ts b/packages/account/globals.d.ts new file mode 100644 index 000000000000..60bd434c6f91 --- /dev/null +++ b/packages/account/globals.d.ts @@ -0,0 +1,4 @@ +declare module '*.svg' { + const content: any; + export default content; +} diff --git a/packages/account/src/Components/poi/idv-status/idv-rejected/__tests__/idv-rejected.spec.js b/packages/account/src/Components/poi/idv-status/idv-rejected/__tests__/idv-rejected.spec.tsx similarity index 100% rename from packages/account/src/Components/poi/idv-status/idv-rejected/__tests__/idv-rejected.spec.js rename to packages/account/src/Components/poi/idv-status/idv-rejected/__tests__/idv-rejected.spec.tsx diff --git a/packages/account/src/Components/poi/idv-status/idv-rejected/idv-rejected.jsx b/packages/account/src/Components/poi/idv-status/idv-rejected/idv-rejected.tsx similarity index 88% rename from packages/account/src/Components/poi/idv-status/idv-rejected/idv-rejected.jsx rename to packages/account/src/Components/poi/idv-status/idv-rejected/idv-rejected.tsx index 1121307f9bbe..81a4bbc6f83d 100644 --- a/packages/account/src/Components/poi/idv-status/idv-rejected/idv-rejected.jsx +++ b/packages/account/src/Components/poi/idv-status/idv-rejected/idv-rejected.tsx @@ -3,7 +3,11 @@ import { Button, Text } from '@deriv/components'; import { localize } from '@deriv/translations'; import IdvDocumentRejected from 'Assets/ic-idv-document-rejected.svg'; -const IdvRejected = ({ handleRequireSubmission }) => { +type TIdvRejected = { + handleRequireSubmission: () => void; +}; + +const IdvRejected = ({ handleRequireSubmission }: TIdvRejected) => { return (
diff --git a/packages/account/src/Components/poi/idv-status/idv-rejected/index.js b/packages/account/src/Components/poi/idv-status/idv-rejected/index.js index 012840e44dd9..f35e095598df 100644 --- a/packages/account/src/Components/poi/idv-status/idv-rejected/index.js +++ b/packages/account/src/Components/poi/idv-status/idv-rejected/index.js @@ -1,3 +1,3 @@ -import IdvRejected from './idv-rejected.jsx'; +import IdvRejected from './idv-rejected'; export default IdvRejected; diff --git a/packages/account/tsconfig.json b/packages/account/tsconfig.json index 1a92d82ee4aa..bb5714f527c9 100644 --- a/packages/account/tsconfig.json +++ b/packages/account/tsconfig.json @@ -4,6 +4,7 @@ "outDir": "./dist", "baseUrl": "./", "paths": { + "Assets/*": ["src/Assets/*"], "Components/*": ["src/Components/*"], "Containers/*": ["src/Containers/*"], "Constants/*": ["src/Constants/*"], From dfdd4a873dbad8b1bf7a6746a48597290b88aa50 Mon Sep 17 00:00:00 2001 From: tay suisin Date: Tue, 15 Nov 2022 16:58:43 +0800 Subject: [PATCH 025/106] update any to unknown in globals.d.ts --- packages/account/globals.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/account/globals.d.ts b/packages/account/globals.d.ts index 60bd434c6f91..917e171de25f 100644 --- a/packages/account/globals.d.ts +++ b/packages/account/globals.d.ts @@ -1,4 +1,4 @@ declare module '*.svg' { - const content: any; + const content: unknown; export default content; } From 8a88a1643e7995a4a9a5f1212fb584e0587ac00c Mon Sep 17 00:00:00 2001 From: tay suisin Date: Tue, 15 Nov 2022 17:01:11 +0800 Subject: [PATCH 026/106] revert back to any to solve error --- packages/account/globals.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/account/globals.d.ts b/packages/account/globals.d.ts index 917e171de25f..60bd434c6f91 100644 --- a/packages/account/globals.d.ts +++ b/packages/account/globals.d.ts @@ -1,4 +1,4 @@ declare module '*.svg' { - const content: unknown; + const content: any; export default content; } From c3d662ec04f959b91b6669ea76d90bcabb2b66d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cyauheni-kryzhyk-deriv=E2=80=9D?= <“yauheni@deriv.me”> Date: Tue, 15 Nov 2022 14:25:28 +0300 Subject: [PATCH 027/106] refactor: formcancelbutton ts migration --- .../src/components/button/button.tsx | 2 +- .../form-cancel-button/form-cancel-button.jsx | 36 ------------------- .../form-cancel-button/form-cancel-button.tsx | 35 ++++++++++++++++++ .../form-cancel-button/{index.js => index.ts} | 2 +- 4 files changed, 37 insertions(+), 38 deletions(-) delete mode 100644 packages/components/src/components/form-cancel-button/form-cancel-button.jsx create mode 100644 packages/components/src/components/form-cancel-button/form-cancel-button.tsx rename packages/components/src/components/form-cancel-button/{index.js => index.ts} (55%) diff --git a/packages/components/src/components/button/button.tsx b/packages/components/src/components/button/button.tsx index 146d22e5702e..8f35ef234200 100644 --- a/packages/components/src/components/button/button.tsx +++ b/packages/components/src/components/button/button.tsx @@ -4,7 +4,7 @@ import ButtonLoading from './button_loading'; import Icon from '../icon'; import Text from '../text'; -type TButtonProps = React.PropsWithChildren> & { +export type TButtonProps = React.PropsWithChildren> & { alternate: boolean; blue: boolean; classNameSpan: string; diff --git a/packages/components/src/components/form-cancel-button/form-cancel-button.jsx b/packages/components/src/components/form-cancel-button/form-cancel-button.jsx deleted file mode 100644 index 98eb43cdddb5..000000000000 --- a/packages/components/src/components/form-cancel-button/form-cancel-button.jsx +++ /dev/null @@ -1,36 +0,0 @@ -import classNames from 'classnames'; -import PropTypes from 'prop-types'; -import React from 'react'; -import Button from '../button/button'; - -const FormCancelButton = ({ className, is_center, is_disabled, is_absolute, label, onCancel, ...props }) => { - return ( -
-
- ); -}; - -FormCancelButton.defaultProps = { - className: undefined, - is_disabled: false, - is_center: false, - is_absolute: false, -}; - -FormCancelButton.propTypes = { - className: PropTypes.string, - is_absolute: PropTypes.bool, - is_center: PropTypes.bool, - is_disabled: PropTypes.bool, - label: PropTypes.string, - onCancel: PropTypes.func, -}; - -export default FormCancelButton; diff --git a/packages/components/src/components/form-cancel-button/form-cancel-button.tsx b/packages/components/src/components/form-cancel-button/form-cancel-button.tsx new file mode 100644 index 000000000000..688139873647 --- /dev/null +++ b/packages/components/src/components/form-cancel-button/form-cancel-button.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import classNames from 'classnames'; +import Button, { TButtonProps } from '../button/button'; + +type TFormCancelButton = Partial & { + className?: string; + is_absolute?: boolean; + is_center?: boolean; + is_disabled?: boolean; + label: string; + onCancel: () => void; +}; + +const FormCancelButton = ({ + className, + is_center = false, + is_absolute = false, + label, + onCancel, + ...props +}: TFormCancelButton) => { + return ( +
+
+ ); +}; + +export default FormCancelButton; diff --git a/packages/components/src/components/form-cancel-button/index.js b/packages/components/src/components/form-cancel-button/index.ts similarity index 55% rename from packages/components/src/components/form-cancel-button/index.js rename to packages/components/src/components/form-cancel-button/index.ts index c213ce6120c1..cc895bae947c 100644 --- a/packages/components/src/components/form-cancel-button/index.js +++ b/packages/components/src/components/form-cancel-button/index.ts @@ -1,4 +1,4 @@ -import FormCancelButton from './form-cancel-button.jsx'; +import FormCancelButton from './form-cancel-button'; import './form-cancel-button.scss'; export default FormCancelButton; From edb404948c458af994346e9278ca58bd535d1de5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cyauheni-kryzhyk-deriv=E2=80=9D?= <“yauheni@deriv.me”> Date: Tue, 15 Nov 2022 15:37:59 +0300 Subject: [PATCH 028/106] trigger From f61b542889ef625fbac94c5bee939baab68fbadc Mon Sep 17 00:00:00 2001 From: tay suisin Date: Wed, 16 Nov 2022 11:23:52 +0800 Subject: [PATCH 029/106] refactor: ts migration for idv-submit-complete --- packages/account/globals.d.ts | 4 ++++ ...ubmit-complete.spec.js => idv-submit-complete.spec.tsx} | 0 .../{idv-submit-complete.jsx => idv-submit-complete.tsx} | 7 ++++++- .../Components/poi/idv-status/idv-submit-complete/index.js | 2 +- packages/account/tsconfig.json | 1 + 5 files changed, 12 insertions(+), 2 deletions(-) create mode 100644 packages/account/globals.d.ts rename packages/account/src/Components/poi/idv-status/idv-submit-complete/__tests__/{idv-submit-complete.spec.js => idv-submit-complete.spec.tsx} (100%) rename packages/account/src/Components/poi/idv-status/idv-submit-complete/{idv-submit-complete.jsx => idv-submit-complete.tsx} (87%) diff --git a/packages/account/globals.d.ts b/packages/account/globals.d.ts new file mode 100644 index 000000000000..60bd434c6f91 --- /dev/null +++ b/packages/account/globals.d.ts @@ -0,0 +1,4 @@ +declare module '*.svg' { + const content: any; + export default content; +} diff --git a/packages/account/src/Components/poi/idv-status/idv-submit-complete/__tests__/idv-submit-complete.spec.js b/packages/account/src/Components/poi/idv-status/idv-submit-complete/__tests__/idv-submit-complete.spec.tsx similarity index 100% rename from packages/account/src/Components/poi/idv-status/idv-submit-complete/__tests__/idv-submit-complete.spec.js rename to packages/account/src/Components/poi/idv-status/idv-submit-complete/__tests__/idv-submit-complete.spec.tsx diff --git a/packages/account/src/Components/poi/idv-status/idv-submit-complete/idv-submit-complete.jsx b/packages/account/src/Components/poi/idv-status/idv-submit-complete/idv-submit-complete.tsx similarity index 87% rename from packages/account/src/Components/poi/idv-status/idv-submit-complete/idv-submit-complete.jsx rename to packages/account/src/Components/poi/idv-status/idv-submit-complete/idv-submit-complete.tsx index 09446c67a69b..3bb3241cee53 100644 --- a/packages/account/src/Components/poi/idv-status/idv-submit-complete/idv-submit-complete.jsx +++ b/packages/account/src/Components/poi/idv-status/idv-submit-complete/idv-submit-complete.tsx @@ -4,7 +4,12 @@ import { localize } from '@deriv/translations'; import PoaButton from 'Components/poa/poa-button'; import IdvDocumentPending from 'Assets/ic-idv-document-pending.svg'; -const IdvSubmitComplete = ({ needs_poa, is_from_external }) => { +type TIdvSubmitComplete = { + needs_poa: boolean; + is_from_external: boolean; +}; + +const IdvSubmitComplete = ({ needs_poa, is_from_external }: TIdvSubmitComplete) => { const poa_button = !is_from_external && ; return ( diff --git a/packages/account/src/Components/poi/idv-status/idv-submit-complete/index.js b/packages/account/src/Components/poi/idv-status/idv-submit-complete/index.js index 4cea50b7a850..f64259d144b2 100644 --- a/packages/account/src/Components/poi/idv-status/idv-submit-complete/index.js +++ b/packages/account/src/Components/poi/idv-status/idv-submit-complete/index.js @@ -1,3 +1,3 @@ -import IdvSubmitComplete from './idv-submit-complete.jsx'; +import IdvSubmitComplete from './idv-submit-complete'; export default IdvSubmitComplete; diff --git a/packages/account/tsconfig.json b/packages/account/tsconfig.json index 1a92d82ee4aa..bb5714f527c9 100644 --- a/packages/account/tsconfig.json +++ b/packages/account/tsconfig.json @@ -4,6 +4,7 @@ "outDir": "./dist", "baseUrl": "./", "paths": { + "Assets/*": ["src/Assets/*"], "Components/*": ["src/Components/*"], "Containers/*": ["src/Containers/*"], "Constants/*": ["src/Constants/*"], From 1d3838d7085e1c3a101c3bdcf5170c2d682c2cb8 Mon Sep 17 00:00:00 2001 From: tay suisin Date: Wed, 16 Nov 2022 11:59:38 +0800 Subject: [PATCH 030/106] refactor: ts migration for idv-verified --- packages/account/globals.d.ts | 4 ++++ .../{idv-verified.spec.js => idv-verified.spec.tsx} | 5 +---- .../idv-verified/{idv-verified.jsx => idv-verified.tsx} | 7 ++++++- .../src/Components/poi/idv-status/idv-verified/index.js | 2 +- packages/account/tsconfig.json | 1 + 5 files changed, 13 insertions(+), 6 deletions(-) create mode 100644 packages/account/globals.d.ts rename packages/account/src/Components/poi/idv-status/idv-verified/__tests__/{idv-verified.spec.js => idv-verified.spec.tsx} (93%) rename packages/account/src/Components/poi/idv-status/idv-verified/{idv-verified.jsx => idv-verified.tsx} (88%) diff --git a/packages/account/globals.d.ts b/packages/account/globals.d.ts new file mode 100644 index 000000000000..60bd434c6f91 --- /dev/null +++ b/packages/account/globals.d.ts @@ -0,0 +1,4 @@ +declare module '*.svg' { + const content: any; + export default content; +} diff --git a/packages/account/src/Components/poi/idv-status/idv-verified/__tests__/idv-verified.spec.js b/packages/account/src/Components/poi/idv-status/idv-verified/__tests__/idv-verified.spec.tsx similarity index 93% rename from packages/account/src/Components/poi/idv-status/idv-verified/__tests__/idv-verified.spec.js rename to packages/account/src/Components/poi/idv-status/idv-verified/__tests__/idv-verified.spec.tsx index 3dd7e92c5003..174f7cfa8a39 100644 --- a/packages/account/src/Components/poi/idv-status/idv-verified/__tests__/idv-verified.spec.js +++ b/packages/account/src/Components/poi/idv-status/idv-verified/__tests__/idv-verified.spec.tsx @@ -31,10 +31,7 @@ describe('', () => { expect(screen.getByText(submit_text)).toBeInTheDocument(); expect(history.location.pathname).not.toBe('/account/proof-of-address'); fireEvent.click(screen.getByText(submit_text)); - expect(screen.getByRole('link', { name: submit_text }).closest('a')).toHaveAttribute( - 'href', - '/account/proof-of-address' - ); + expect(screen.getByRole('link', { name: submit_text })).toHaveAttribute('href', '/account/proof-of-address'); expect(history.location.pathname).toBe('/account/proof-of-address'); }); diff --git a/packages/account/src/Components/poi/idv-status/idv-verified/idv-verified.jsx b/packages/account/src/Components/poi/idv-status/idv-verified/idv-verified.tsx similarity index 88% rename from packages/account/src/Components/poi/idv-status/idv-verified/idv-verified.jsx rename to packages/account/src/Components/poi/idv-status/idv-verified/idv-verified.tsx index 3d2ada53fbac..6a29cb45b6d3 100644 --- a/packages/account/src/Components/poi/idv-status/idv-verified/idv-verified.jsx +++ b/packages/account/src/Components/poi/idv-status/idv-verified/idv-verified.tsx @@ -5,7 +5,12 @@ import { localize } from '@deriv/translations'; import PoaButton from 'Components/poa/poa-button'; import IdvDocumentVerified from 'Assets/ic-idv-verified.svg'; -const IdvVerified = ({ needs_poa, is_from_external }) => { +type TIdvVerified = { + needs_poa: boolean; + is_from_external: boolean; +}; + +const IdvVerified = ({ needs_poa, is_from_external }: Partial) => { const header_Text = needs_poa ? localize('Your ID is verified. You will also need to submit proof of your address.') : localize('ID verification passed'); diff --git a/packages/account/src/Components/poi/idv-status/idv-verified/index.js b/packages/account/src/Components/poi/idv-status/idv-verified/index.js index 41a6578c9dfb..d8ec153260d8 100644 --- a/packages/account/src/Components/poi/idv-status/idv-verified/index.js +++ b/packages/account/src/Components/poi/idv-status/idv-verified/index.js @@ -1,3 +1,3 @@ -import IdvVerified from './idv-verified.jsx'; +import IdvVerified from './idv-verified'; export default IdvVerified; diff --git a/packages/account/tsconfig.json b/packages/account/tsconfig.json index 1a92d82ee4aa..bb5714f527c9 100644 --- a/packages/account/tsconfig.json +++ b/packages/account/tsconfig.json @@ -4,6 +4,7 @@ "outDir": "./dist", "baseUrl": "./", "paths": { + "Assets/*": ["src/Assets/*"], "Components/*": ["src/Components/*"], "Containers/*": ["src/Containers/*"], "Constants/*": ["src/Constants/*"], From 4cf9e85b856cb53391ee4016ecc57acfd93db9d9 Mon Sep 17 00:00:00 2001 From: tay suisin Date: Wed, 16 Nov 2022 12:07:01 +0800 Subject: [PATCH 031/106] refactor: ts migration for idv-verified.spec.tsx --- .../poi/idv-status/idv-verified/__tests__/idv-verified.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/account/src/Components/poi/idv-status/idv-verified/__tests__/idv-verified.spec.tsx b/packages/account/src/Components/poi/idv-status/idv-verified/__tests__/idv-verified.spec.tsx index 174f7cfa8a39..fe61dca8ee94 100644 --- a/packages/account/src/Components/poi/idv-status/idv-verified/__tests__/idv-verified.spec.tsx +++ b/packages/account/src/Components/poi/idv-status/idv-verified/__tests__/idv-verified.spec.tsx @@ -36,7 +36,7 @@ describe('', () => { }); it('should render the IdvVerified component when needs_poa is false and is_from_external is true in mobile', () => { - isMobile.mockReturnValue(true); + (isMobile as jest.Mock).mockReturnValue(true); renderWithRouter(); expect(screen.getByTestId('poi_idv_verified_container')).toBeInTheDocument(); expect(screen.getByText(/mockedsvgicon/i)).toBeInTheDocument(); From 39ce7bf616a30f6b07076904797d1e42aa6b7d29 Mon Sep 17 00:00:00 2001 From: Likhith Kolayari Date: Wed, 16 Nov 2022 08:43:13 +0400 Subject: [PATCH 032/106] feat: :art: migrated select-native to tsx --- .../filter-dropdown/filter-dropdown.jsx | 2 +- .../select-native/{index.js => index.ts} | 2 +- .../{select-native.jsx => select-native.tsx} | 137 +++++++++--------- 3 files changed, 73 insertions(+), 68 deletions(-) rename packages/components/src/components/select-native/{index.js => index.ts} (55%) rename packages/components/src/components/select-native/{select-native.jsx => select-native.tsx} (65%) diff --git a/packages/components/src/components/filter-dropdown/filter-dropdown.jsx b/packages/components/src/components/filter-dropdown/filter-dropdown.jsx index 1837657a817b..b1f730aae103 100644 --- a/packages/components/src/components/filter-dropdown/filter-dropdown.jsx +++ b/packages/components/src/components/filter-dropdown/filter-dropdown.jsx @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { isMobile } from '@deriv/shared'; import Dropdown from '../dropdown/dropdown.jsx'; -import SelectNative from '../select-native/select-native.jsx'; +import SelectNative from '../select-native/select-native'; const FilterDropdown = ({ dropdown_className, diff --git a/packages/components/src/components/select-native/index.js b/packages/components/src/components/select-native/index.ts similarity index 55% rename from packages/components/src/components/select-native/index.js rename to packages/components/src/components/select-native/index.ts index 1fa753e1bf4e..def511e46a9d 100644 --- a/packages/components/src/components/select-native/index.js +++ b/packages/components/src/components/select-native/index.ts @@ -1,4 +1,4 @@ -import SelectNative from './select-native.jsx'; +import SelectNative from './select-native'; import './select-native.scss'; export default SelectNative; diff --git a/packages/components/src/components/select-native/select-native.jsx b/packages/components/src/components/select-native/select-native.tsx similarity index 65% rename from packages/components/src/components/select-native/select-native.jsx rename to packages/components/src/components/select-native/select-native.tsx index aa2aee104f3f..f038941ce0d6 100644 --- a/packages/components/src/components/select-native/select-native.jsx +++ b/packages/components/src/components/select-native/select-native.tsx @@ -1,47 +1,90 @@ import classNames from 'classnames'; -import React from 'react'; -import PropTypes from 'prop-types'; +import React, { SelectHTMLAttributes } from 'react'; import Field from '../field/field'; import Text from '../text/text'; import Icon from '../icon/icon'; -const getDisplayText = (list_items, value) => { - const dropdown_items = Array.isArray(list_items) ? list_items : [].concat(...Object.values(list_items)); +type TSelectNative = { + className?: string; + classNameDisplay?: string; + classNameHint?: string; + error?: string; + hint?: string; + label: string; + placeholder?: string; + should_show_empty_option?: boolean; + suffix_icon?: string; + data_testid?: string; + hide_selected_value?: boolean; + value: string | number; + list_items: Array | { [key: string]: Array }; +} & Omit & + Omit, 'value'>; // Default type of value in HTMLSelectElement is only string but here string | number is required + +type TSelectNativeOptions = { + list_items: Array; + should_hide_disabled_options?: boolean; + use_text?: boolean; +}; + +type TListItem = { + text: string; + value: string; + disabled?: boolean; + nativepicker_text?: React.ReactNode; + group?: string; + id?: string; +}; + +const getDisplayText = (list_items: Array | { [key: string]: Array }, value: string | number) => { + const dropdown_items = Array.isArray(list_items) + ? list_items + : ([] as Array).concat(...Object.values(list_items)); //typecasting since [] is inferred to be type never[] const list_obj = dropdown_items.find(item => - typeof item.value !== 'string' ? item.value === value : item.value.toLowerCase() === value.toLowerCase() + typeof item.value !== 'string' + ? item.value === value + : item.value.toLowerCase() === (value as string).toLowerCase() ); if (list_obj) return list_obj.text; return ''; }; -const SelectNativeOptions = ({ list_items, should_hide_disabled_options, use_text }) => { +const SelectNativeOptions = ({ list_items, should_hide_disabled_options, use_text }: TSelectNativeOptions) => { const options = should_hide_disabled_options ? list_items.filter(opt => !opt.disabled) : list_items; const has_group = Array.isArray(list_items) && !!list_items[0]?.group; if (has_group) { - const dropdown_items = options.reduce((dropdown_map, item) => { - dropdown_map[item.group] = dropdown_map[item.group] || []; - dropdown_map[item.group].push(item); + const dropdown_items = options.reduce((dropdown_map: { [key: string]: Array }, item) => { + dropdown_map[item.group as string] = dropdown_map[item.group as string] || []; + dropdown_map[item.group as string].push(item); return dropdown_map; }, {}); const group_names = Object.keys(dropdown_items); - return group_names.map(option => ( - - {dropdown_items[option].map(value => ( - + return ( + <> + {group_names.map(option => ( + + {dropdown_items[option].map((value: TListItem) => ( + + ))} + ))} - - )); + + ); } - return options.map(option => ( - - )); + return ( + <> + {options.map(option => ( + + ))} + + ); }; const SelectNative = ({ @@ -54,16 +97,15 @@ const SelectNative = ({ hint, label, list_items, - onItemSelection, placeholder, - should_hide_disabled_options, + should_hide_disabled_options = true, should_show_empty_option = true, suffix_icon, use_text, value, data_testid, ...props -}) => ( +}: TSelectNative) => (
) : ( - + )}