refactor: TS migration of Reports pakage (binary-com#7300)

* refactor: initial commit

* revert: revert changes

* chore: ts-migration for positions-card.tsx (binary-com#5)

* chore: reports-table-row to tsx (#10)

* chore: migrating error-components to tsx (#8)

* chore: migrating error-components to tsx

* fix: added partial to type

* chore: migrate calendar-icon to tsx (#11)

* chore: migrate calendar-icon to tsx

* fix: updated extensions

* chore: migrate list-item to tsx (#12)

* chore: migrate currency-wrapper to ts (#17)

* chore: migrate empty-portfolio-message to ts (#18)

* chore: migrating reports meta to tsx (#23)

* chore: migrate amount-cell to ts (#16)

* chore: migrate amount-cell to ts

* fix: delete component because it is unused

* chore: migrating EmptyTradeHistoryMessage to tsx (#19)

* chore: migrating EmptyTradeHistoryMessage to tsx

* fix: remove extension

* fix: migrated sidelist to tsx (binary-com#13)

* fix: migrated sidelist to tsx

* fix: circle-ci error

* fix: sidelist types

* chore: migrate composite calendar mobile to typescript (#26)

* chore: migrate composite calendar mobile to typescript

* fix: remove component extension from the name

* refactor: ♻️ removed unused component (#30)

* chore: migrate index file to typescript (#27)

* refactor: ♻️ migrate component to tsx (#29)

* chore: two-month-picker to tsx with one calendar component (#15)

* chore: migrate account statistics to ts (#14)

* chore: migrate account statistics to ts

* fix: typo in comment

* Akmal / chore: migrate routes config to typescript (#31)

* chore: migrate routes config to typescript

* fix: change type for component

* Akmal / chore: migrate data-table-constants to typescript (#33)

* chore: migrate data-table-constants to typescript

* fix: refactor types

* chore: migrate loading component to typescript (#36)

* Aizad/73988/msir ts (#21)

* chore: migrate market-symbol-icon-row to ts

* fix: remove commented lines

* fix: remove classname from IconTradeTypes

* fix: removed action prop

* Sergei / chore: migrate open-positions to tsx (#40)

* chore: convert open-positions to tsx

* fix: add React.PropsWithChildren to tabs.tsx

* fix: change Tabs type

* fix: add/change some types and fix some undefined values

* refactor: use Return Early pattern for contract-card-sell component

* chore: delete commented lines

* chore: add moment as dev dependency

* chore: commit to check circleCI

* fix: change back tabs.tsx

* fix: change React.Fragment to null

* Akmal / chore: convert helpers to typescript (#28)

* chore: convert elpers to typescript

* fix: types

* chore: migrate placeholder to tsx (#42)

* chore: migate placeholder to tsx

* fix: destructure props and remove React.propswithchildre

* Sergei / 73980 / chore: ts migration of route-with-sub-routes (#45)

* chore: ts migration of route-with-sub-routes

* refactor: add common types to separate files

* fix: get back composite-calendar

* refactor: change path from absolute to relative for Types

* Sergei / 73979 / chore: ts migration of binary-routes (#46)

* chore: ts migration of binary-routes.jsx

* chore: add TPassthrough type and add key as index when route.path is undefined

* chore: add export for TBinaryRoutes type

* refactor: use types from common types

* Aizad/73977/binary link ts (#41)

* chore: migrate routes folder to tsx

* fix: change type for component

* fix: migrated test cases to tsx

* chore: migrate binary-links to tsx

* fix: change back function names

* fix: resolved conflict issues

* fix: testcases

* chore: migrated filter component and fix some issues with composite-c… (#20)

* chore: migrated filter component and fix some issues with composite-calendar

* fix: change export to CalendarIcon on index.js and added RootStore type to filter-components

* fix: change TRootStore to RootStore

* fix: replace RootStore to TRootStore

* fix: expand object for filtered_date_range

* Sergei / chore: ts migration of routes (#38)

* chore: ts migration of routes

* chore: change RootStore type

* Aizad/73994/pss ts (#48)

* chore: migrate progress-slider-stream to tsx

* fix: imported TContractInfo inside deriv/shared/

* Sergei / chore: migrate statements to tsx (#39)

* chore: ts migration of statements

* chore: change RootStore type

* chore: change local TRootStore with module property

* fix: return class RootStore to Stores/index.ts

* chore: change core_store type

* chore: migrated indicative cell to tsx (#44)

* chore: migrated indicative cell to tsx

* fix: added types to usestate

* fix: change type

* fix: change function type to boolean

* fix: imported TContractInfo from shared file into indicative-cell

* fix: test

* fix: mockstore

* fix: format-response.ts

* fix: mockstore

* Aizad/73978/routes ts (#50)

* Merge branch 'Improvement/72232/Reports_TS_migration' of github.com:mahdiyeh-deriv/deriv-app into ts-migration

* chore: finalising routes folder migration for Reports package 📦

* Akmal / chore: migrate app.jsx to typescript (#37)

* chore: migrate app.jsx to typescript

* chore: utilize TRootStore type

* chore: replace type

* Akmal / chore: migrate composite calendar to typescript (#25)

* chore: migrate composite calendar to typescript

* chore: refactor composite calendar and related components to properly use moment

* chore: move out index changes

* feat: resolve conflicts

* feat: add deriv stores package

* Kate/73995/TS migration of Reports (#51)

* refactor: migrate reports component into ts

* refactor: add useStore hook

* refactor: delete extra react fragment

Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com>

---------

Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com>

* redeploy: rerun tests

* refactor: remove named import from react

* chore: migrate statement to tsx (#47)

* chore: migrate statement to tsx

* fix: use Statement props from api-types than declaring it in ts file

* fix: imported TAccountStatistics inside statement

* fix: made changes based on comments

* fix: refactor based on suggestions

* fix: types in packages/shared/src/utils/shortcode/shortcode.ts

* fix: regex to prevent sonarcloud bug

* chore: change index.js to index.ts

* Rostislav / 73993 / Task - TS migration of ProfitTable (#34)

* refactor: init pr

* refactor: profit_loss_cell tsx'd

* refactor: profit_loss_cell import problem resolved

* refactor: profit_loss_cell import another problem fix

* refactor: the migration is more or less finished

* refactor: a few extra changes

* refactor: prev commit accidental changes removed

* refactor: TProfitTable type changed a bit

* refactor: moved types to common-prop.type.ts

* refactor: getSupportedContracts and getUnsupportedContracts moved to shared

* refactor: contract.tsx completely replaced by imports from @deriv/shared

* refactor: added alias for Types

* refactor: applied suggested changes

* fix: regex for sonarcloud

* fix: remove props from the name of type declaration

* fix: resolve comments

* fix: fix comments v2

* fix: remove usestate

* fix: date-time test

* fix: comments v3

* thisyahlen/fix: trade table for mobile (#52)

* fix: trade table for mobile

* fix: trade table error

* fix: statement input validation error on date_from

* fix: setdate unix

* fix: responsive input validation error

* fix: remove unix from store

---------

Co-authored-by: aizad-deriv <103104395+aizad-deriv@users.noreply.github.com>
Co-authored-by: Akmal Djumakhodjaev <akmal@binary.com>
Co-authored-by: Likhith Kolayari <98398322+likhith-deriv@users.noreply.github.com>
Co-authored-by: Sergei Baranovski <120570511+sergei-deriv@users.noreply.github.com>
Co-authored-by: kate-deriv <121025168+kate-deriv@users.noreply.github.com>
Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com>
Co-authored-by: Rostik Kayko <119863957+rostislav-deriv@users.noreply.github.com>
Co-authored-by: Thisyahlen Nair <thisyahlen@regentmarkets.com>
Co-authored-by: thisyahlen <104053934+thisyahlen-deriv@users.noreply.github.com>
Co-authored-by: hirad-deriv <hirad@re-work.dev>

packages/components/src/components/label/label.tsx

@@ -18,7 +18,7 @@ const available_sizes = ['regular', 'large'] as const;
 
 type TLabel = {
     mode: typeof available_modes[number];
-    size: typeof available_sizes[number];
+    size?: typeof available_sizes[number];
     className?: string;
 };
 

packages/reports/build/constants.js

@@ -28,6 +28,7 @@ const ALIASES = {
     Modules: path.resolve(__dirname, '../src/Modules'),
     Sass: path.resolve(__dirname, '../src/sass'),
     Stores: path.resolve(__dirname, '../src/Stores'),
+    Types: path.resolve(__dirname, '../src/Types'),
 };
 
 const rules = (is_test_env = false) => [

packages/reports/build/loaders-config.js

@@ -2,9 +2,6 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
 
 const js_loaders = [
-    {
-        loader: '@deriv/shared/src/loaders/react-import-loader.js',
-    },
     {
         loader: '@deriv/shared/src/loaders/deriv-account-loader.js',
     },

packages/reports/build/webpack.config.js

@@ -8,7 +8,7 @@ module.exports = function (env) {
         context: path.resolve(__dirname, '../'),
         devtool: IS_RELEASE ? undefined : 'eval-cheap-module-source-map',
         entry: {
-            reports: path.resolve(__dirname, '../src', 'index.jsx'),
+            reports: path.resolve(__dirname, '../src', 'index'),
         },
         mode: IS_RELEASE ? 'production' : 'development',
         module: {

packages/reports/jest.config.js

@@ -15,5 +15,7 @@ module.exports = {
         '^Utils/(.*)$': '<rootDir>/src/Utils/$1',
         '^Services/(.*)$': '<rootDir>/src/Services/$1',
         '^Stores/(.*)$': '<rootDir>/src/Stores/$1',
+        '^Types/(.*)$': '<rootDir>/src/Types/$1',
+        '^Types$': '<rootDir>/src/Types/index.ts',
     },
 };

packages/reports/package.json

@@ -79,6 +79,7 @@
         "@deriv/components": "^1.0.0",
         "@deriv/deriv-api": "^1.0.11",
         "@deriv/shared": "^1.0.0",
+        "@deriv/stores": "^1.0.0",
         "@deriv/translations": "^1.0.0",
         "@types/react": "^18.0.7",
         "@types/react-dom": "^18.0.0",

packages/reports/src/Components/Elements/ContentLoader/index.ts

@@ -0,0 +1 @@
+export * from './reports-table-row';

packages/reports/src/Components/Elements/ContentLoader/positions-card.jsx → packages/reports/src/Components/Elements/ContentLoader/positions-card.tsx

@@ -1,8 +1,11 @@
 import ContentLoader from 'react-content-loader';
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const PositionsCardLoader = ({ speed }) => (
+type TPositionCardLoader = {
+    speed?: number;
+};
+
+const PositionsCardLoader = ({ speed }: TPositionCardLoader) => (
     <ContentLoader
         height={173}
         width={218}
@@ -28,8 +31,4 @@ const PositionsCardLoader = ({ speed }) => (
     </ContentLoader>
 );
 
-PositionsCardLoader.propTypes = {
-    speed: PropTypes.number,
-};
-
 export { PositionsCardLoader };

packages/reports/src/Components/Elements/ContentLoader/reports-table-row.jsx → packages/reports/src/Components/Elements/ContentLoader/reports-table-row.tsx

@@ -1,8 +1,11 @@
 import ContentLoader from 'react-content-loader';
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const ReportsTableRowLoader = ({ speed }) => (
+type TReportsTableRowLoader = {
+    speed?: number;
+};
+
+const ReportsTableRowLoader = ({ speed }: TReportsTableRowLoader) => (
     <ContentLoader
         height={64}
         width={992}
@@ -21,8 +24,4 @@ const ReportsTableRowLoader = ({ speed }) => (
     </ContentLoader>
 );
 
-ReportsTableRowLoader.propTypes = {
-    speed: PropTypes.number,
-};
-
 export { ReportsTableRowLoader };

packages/reports/src/Components/Errors/error-component.jsx → packages/reports/src/Components/Errors/error-component.tsx

@@ -1,8 +1,8 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Dialog, PageErrorContainer } from '@deriv/components';
 import { routes } from '@deriv/shared';
 import { localize } from '@deriv/translations';
+import { TErrorComponent } from 'Types';
 
 const ErrorComponent = ({
     header,
@@ -11,7 +11,7 @@ const ErrorComponent = ({
     redirect_label,
     redirectOnClick,
     should_show_refresh = true,
-}) => {
+}: Partial<TErrorComponent>) => {
     const refresh_message = should_show_refresh ? localize('Please refresh this page to continue.') : '';
 
     if (is_dialog) {
@@ -21,6 +21,7 @@ const ErrorComponent = ({
                 is_visible
                 confirm_button_text={redirect_label || localize('Ok')}
                 onConfirm={redirectOnClick || (() => location.reload())}
+                has_close_icon={false}
             >
                 {message || localize('Sorry, an error occured while processing your request.')}
             </Dialog>
@@ -29,22 +30,12 @@ const ErrorComponent = ({
     return (
         <PageErrorContainer
             error_header={header ?? ''}
-            error_messages={message ? message[(message, refresh_message)] : []}
+            error_messages={message ? [message, refresh_message] : []}
             redirect_urls={[routes.trade]}
             redirect_labels={[redirect_label || localize('Refresh')]}
             buttonOnClick={redirectOnClick || (() => location.reload())}
         />
     );
 };
 
-ErrorComponent.propTypes = {
-    header: PropTypes.string,
-    is_dialog: PropTypes.bool,
-    message: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.object]),
-    redirect_label: PropTypes.string,
-    redirectOnClick: PropTypes.func,
-    should_show_refresh: PropTypes.bool,
-    type: PropTypes.string,
-};
-
 export default ErrorComponent;

packages/reports/src/Components/Errors/index.ts

@@ -0,0 +1,3 @@
+import ErrorComponent from './error-component';
+
+export default ErrorComponent;

packages/reports/src/Components/Form/CompositeCalendar/calendar-icon.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Icon } from '@deriv/components';
+
+type TCalendarIcon = {
+    onClick: () => void;
+};
+
+const CalendarIcon = ({ onClick }: TCalendarIcon) => (
+    <Icon onClick={onClick} icon='IcCalendarDatefrom' className='inline-icon' />
+);
+
+export default CalendarIcon;

packages/reports/src/Components/Form/CompositeCalendar/composite-calendar-mobile.jsx → packages/reports/src/Components/Form/CompositeCalendar/composite-calendar-mobile.tsx

@@ -1,11 +1,20 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Button, DatePicker, Icon, InputField, MobileDialog, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import { toMoment } from '@deriv/shared';
+import { TInputDateRange } from 'Types';
 
-export const RadioButton = ({ id, className, selected_value, value, label, onChange }) => {
+type TRadioButton = {
+    id: string;
+    className?: string;
+    selected_value?: string;
+    value?: string;
+    label?: string;
+    onChange: (value: { label?: string; value?: string }) => void;
+};
+
+export const RadioButton = ({ id, className, selected_value, value, label, onChange }: TRadioButton) => {
     return (
         <label
             htmlFor={id}
@@ -34,26 +43,47 @@ export const RadioButton = ({ id, className, selected_value, value, label, onCha
 };
 const CUSTOM_KEY = 'custom';
 
+type TCompositeCalendarMobile = {
+    input_date_range: TInputDateRange;
+    current_focus: string;
+    duration_list: Array<TInputDateRange>;
+    onChange: (
+        value: { from: moment.Moment | number | null; to: moment.Moment; is_batch: boolean },
+        extra_data: { date_range: TInputDateRange }
+    ) => void;
+    setCurrentFocus: (focus: string) => void;
+    from: number;
+    to: number;
+};
+
 const CompositeCalendarMobile = React.memo(
-    ({ input_date_range, current_focus, duration_list, onChange, setCurrentFocus }) => {
+    ({
+        input_date_range,
+        current_focus,
+        duration_list,
+        onChange,
+        setCurrentFocus,
+        from,
+        to,
+    }: TCompositeCalendarMobile) => {
         const date_range = input_date_range || duration_list.find(range => range.value === 'all_time');
 
-        const [from, setFrom] = React.useState(from && toMoment(from).format('DD MMM YYYY'));
-        const [to, setTo] = React.useState(to && toMoment(to).format('DD MMM YYYY'));
+        const [from_date, setFrom] = React.useState(from && toMoment(from).format('DD MMM YYYY'));
+        const [to_date, setTo] = React.useState(to && toMoment(to).format('DD MMM YYYY'));
         const [is_open, setIsOpen] = React.useState(false);
 
         const [applied_date_range, setAppliedDateRange] = React.useState(date_range);
         const [selected_date_range, setSelectedDateRange] = React.useState(date_range);
 
-        const selectDateRange = (_selected_date_range, is_today) => {
+        const selectDateRange = (_selected_date_range: TInputDateRange, is_today?: boolean) => {
             const new_from = _selected_date_range.duration;
             onChange(
                 {
                     from:
                         is_today || new_from
                             ? toMoment().startOf('day').subtract(new_from, 'day').add(1, 's').unix()
                             : null,
-                    to: toMoment().endOf('day').unix(),
+                    to: toMoment().endOf('day'),
                     is_batch: true,
                 },
                 {
@@ -65,17 +95,17 @@ const CompositeCalendarMobile = React.memo(
         const selectCustomDateRange = () => {
             const today = toMoment().format('DD MMM YYYY');
 
-            const new_from = from || to || today;
-            const new_to = to || today;
+            const new_from = from_date || to_date || today;
+            const new_to = to_date || today;
 
             const new_date_range = Object.assign(selected_date_range, {
                 label: `${new_from} - ${new_to}`,
             });
 
             onChange(
                 {
-                    from: toMoment(new_from, 'DD MMM YYYY').startOf('day').add(1, 's').unix(),
-                    to: toMoment(new_to, 'DD MMM YYYY').endOf('day').unix(),
+                    from: toMoment(new_from).startOf('day').add(1, 's').unix(),
+                    to: toMoment(new_to).endOf('day'),
                     is_batch: true,
                 },
                 {
@@ -105,7 +135,7 @@ const CompositeCalendarMobile = React.memo(
             setIsOpen(false);
         };
 
-        const selectDate = (e, key) => {
+        const selectDate = (e: React.ChangeEvent<HTMLInputElement>, key: string) => {
             setSelectedDateRange({ value: CUSTOM_KEY });
 
             const value = e.target?.value ? toMoment(e.target.value).format('DD MMM YYYY') : '';
@@ -142,7 +172,7 @@ const CompositeCalendarMobile = React.memo(
             );
         };
 
-        const onDateRangeChange = _date_range => {
+        const onDateRangeChange = (_date_range: TInputDateRange) => {
             setSelectedDateRange(
                 duration_list.find(range => _date_range && range.value === _date_range.value) || _date_range
             );
@@ -154,8 +184,8 @@ const CompositeCalendarMobile = React.memo(
         };
 
         const today = toMoment().format('YYYY-MM-DD');
-        const max_date = to ? toMoment(to, 'DD MMM YYYY').format('YYYY-MM-DD') : today;
-        const min_date = from && toMoment(from, 'DD MMM YYYY').format('YYYY-MM-DD');
+        const max_date = to_date ? toMoment(to_date).format('YYYY-MM-DD') : today;
+        const min_date = from_date && toMoment(from_date).format('YYYY-MM-DD');
 
         return (
             <React.Fragment>
@@ -207,18 +237,18 @@ const CompositeCalendarMobile = React.memo(
                                     className='composite-calendar-modal__custom-date-range-start-date'
                                     is_nativepicker={true}
                                     placeholder={localize('Start date')}
-                                    value={from}
+                                    value={from_date}
                                     max_date={max_date}
-                                    onChange={e => selectDate(e, 'from')}
+                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => selectDate(e, 'from')}
                                 />
                                 <DatePicker
                                     className='composite-calendar-modal__custom-date-range-end-date'
                                     is_nativepicker={true}
                                     placeholder={localize('End date')}
-                                    value={to}
+                                    value={to_date}
                                     max_date={today}
                                     min_date={min_date}
-                                    onChange={e => selectDate(e, 'to')}
+                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => selectDate(e, 'to')}
                                 />
                             </div>
                         </div>
@@ -238,14 +268,4 @@ const CompositeCalendarMobile = React.memo(
 );
 
 CompositeCalendarMobile.displayName = 'CompositeCalendarMobile';
-
-CompositeCalendarMobile.propTypes = {
-    current_focus: PropTypes.string,
-    duration_list: PropTypes.array,
-    from: PropTypes.number,
-    input_date_range: PropTypes.object,
-    onChange: PropTypes.func,
-    setCurrentFocus: PropTypes.func,
-    to: PropTypes.number,
-};
 export default CompositeCalendarMobile;