Kate / DTRA-375 / [Package 5] Tech debt (deriv-com#9809)

* fix: ts-migrate trade-params * fix: sonarcloud * fix: pull in changes from tech debt 2 package * fix: resolve comments * fix: move type to common prop types * fix: move type to common prop types * fix: move type to common prop types file * fix: resolve comments * Kate / DTRA-321 / TS migration of trade-params and trade-params-mobile (#6) * refactor: migrate trade params and started mobile version * refactor: ts migration of trade params mobile * chore: add nessasary prop * refactor: apply suggestions * chore: change todo text * refactor: add import * fix: circleCI error * fix: ts migrate trade-footer-extensions.jsx * fix: fix import * fix: remove progress-slider-stream since its not used * fix: resolve comments * fix: reset with master * fix: reset with master * fix: reset with master * fix: reset with master * fix: circleCI * fix: togglePositions folder * fix: dtra-346 marketisclosed and marketcountdowntimer migration * fix: bug * Maryia/dtra-270/TS migration: trade-store (#5) * chore: prepare for migration * chore: add more types to trade-store * chore: add more types to trade-store * chore: add more types to trade-store * chore: add more types to trade-store * chore: migrated trade-store to ts * chore: improve types in trade-store * fix: type * revert: hooks package installation * refactor: address review * fix: resolve comments * feat: add ts migartion of store * refactor: add prev changes * chore: empty commit * fix: add lost mocked * fix: resolve comments * Kate / DTRA-354 / Components/Form/Purchase files in Trader package (#21) * refactor: ts migartion of purchase files * refactor: remove duplicated types * refactor: apply suggestions * maryia/fix: sonarcloud warnings (#7) * fix: sonarcloud warnings * fix: Unexpected end of JSON input * fix: bug * fix: sonarcloud * fix: reorder props * fix: test cases * fix: coveralls * fix: coveralls * fix: this component doesnt exist anymore, hence test was also removed * henry/dtra-356/fix: ts-migration-digitsJSX (#24) * fix: initial commit * fix: ts migrate digits JSX * fix: small type change * fix: comment * chore: removed unused state * Maryia/dtra-355/Migrate ContractDrawer files to TS (#22) * feat: migrated swipeable-components to TS * feat: migrated market-closed-contract-overlay & index to TS * chore: migrated contract-drawer-card.tsx to ts * build: fix type * chore: migrated contract-drawer to ts * chore: fixed existing types in digits and logic * chore: sort types properties in alphabetical order * Kate/dtra 357/ts contract audit files (#23) * refactor: apply suggestion from prev pr * refactor: start ts migration of contract audit * chore: change comment * refactor: ts of contract audit item * refactor: ts migration of contract details * refactor: ts migration of contract history * refactor: add preprepared types * refactor: tests * chore: apply nit * refactor: apply suggestions * refactor: apply suggestions * chore: fix of sonar cloud * Maryia/dtra-373/remove localize from ContractCardHeader component (#25) * refactor: remove localize from contract-card-header * refactor: use Localize component instead of localize helper * build: install RTL deps in shared package * feat: merge previous tech debt branch * fix: sonar cloud codesmells * Merge branch kate/ts_migration_trader_package_4 into kate/ts_migration_trader_package_5 * Kate / DTRA-378 / TS migration: Multiplier components and containers in Trader package (#26) * refactor: ts of cancel deal and risk managment info * fix: types in dialog tsx * refactor: start ts of multiplier options * refactor: ts of mult amount modal * refactor: remove default val from basis component * fix: type of amount mobile * refactor: applied suggestions * refactor: ts of multiplier info (#28) * Henry/dtra 376/fix: ts migration positionsdrawer folder (#27) * fix: positions drawer folder * fix: coveralls * fix: where is my commit * fix: found commits * fix: file rename * fix: comments * fix: comments * fix: correct logic * fix: remove unused props * fix: types * refactor: remove code mells * fix: ts-migrate-populate header (#30) * Maryia/DTRA-377/TS migration: TradingDatePicker + TradingTimePicker + TimePicker + Dialog (#29) * chore: timepicker to ts * chore: trading timepicker to ts * chore: add types for TradingDatePicker & DatePicker * refactor: added default values * refactor: remove code small * chore: empty commit * fix: not using index as key (#31) * fix: ternary bug * fix: build TS errors (#32) * refactor: apply suggestions * refactor: change type of time * chore: empty commit * refactor: tests * fix: conflicts * fix: conflicts * fix: tests * fix: types in tests * fix: test extention * fix: add turbos to types back * fix: add backup for target name * fix: revert empty strings --------- Co-authored-by: Henry Hein <henry@regentmarkets.com> Co-authored-by: Maryia <103177211+maryia-deriv@users.noreply.github.com> Co-authored-by: henry-deriv <118344354+henry-deriv@users.noreply.github.com>
kate-deriv · Oct 11, 2023 · ec0f96e · ec0f96e
1 parent c70bffc
commit ec0f96e
Show file tree

Hide file tree

Showing 65 changed files with 543 additions and 505 deletions.
diff --git a/packages/components/src/components/calendar/calendar-body.tsx b/packages/components/src/components/calendar/calendar-body.tsx
@@ -5,13 +5,13 @@ import { CommonPropTypes } from './views/types';
 type TBodyProps = CommonPropTypes & {
     calendar_view: string;
     date_format: string;
-    disabled_days: number[];
+    disabled_days?: number[];
     start_date: string;
-    events: Array<{
+    events?: Array<{
         dates: string[];
         descrip: string;
     }>;
-    has_range_selection: boolean;
+    has_range_selection?: boolean;
     hovered_date: string | null;
     onMouseLeave?: React.MouseEventHandler<HTMLSpanElement>;
     onMouseOver?: React.MouseEventHandler<HTMLSpanElement>;

diff --git a/packages/components/src/components/calendar/calendar-footer.tsx b/packages/components/src/components/calendar/calendar-footer.tsx
@@ -6,7 +6,7 @@ type TFooterProps = {
     clear_text?: string;
     footer: string;
     has_clear_btn?: boolean;
-    has_today_btn: boolean;
+    has_today_btn?: boolean;
     onClick?: React.MouseEventHandler<HTMLSpanElement>;
     onClear?: React.MouseEventHandler<HTMLSpanElement>;
     use_icon?: string;

diff --git a/packages/components/src/components/calendar/calendar.tsx b/packages/components/src/components/calendar/calendar.tsx
@@ -7,30 +7,30 @@ import { getDate } from './helpers/constants';
 
 type TCalendarProps = {
     date_format?: string;
-    footer: string;
-    has_today_btn: boolean;
-    holidays: Array<{
+    footer?: string;
+    has_today_btn?: boolean;
+    holidays?: Array<{
         dates: string[];
         descrip: string;
     }>;
     max_date?: string;
     min_date?: string;
-    onChangeCalendarMonth: (start_of_month: string) => void;
+    onChangeCalendarMonth?: (start_of_month: string) => void;
     onSelect: (formatted_date: string, keep_open: boolean) => void;
-    start_date: string;
+    start_date?: string;
     value: string;
-    disable_days: number[];
+    disable_days?: number[];
     calendar_view?: string;
     calendar_el_ref: React.RefObject<HTMLDivElement>;
-    disabled_days: number[];
-    events: Array<{
+    disabled_days?: number[];
+    events?: Array<{
         dates: string[];
         descrip: string;
     }>;
-    has_range_selection: boolean;
-    keep_open: boolean;
+    has_range_selection?: boolean;
+    keep_open?: boolean;
     onHover?: (selected_date: moment.MomentInput | null) => void;
-    should_show_today: boolean;
+    should_show_today?: boolean;
 };
 
 type TCalendarRef = {
@@ -52,7 +52,7 @@ const Calendar: React.MemoExoticComponent<
                 date_format = 'YYYY-MM-DD',
                 disabled_days,
                 events,
-                footer,
+                footer = '',
                 has_today_btn,
                 has_range_selection,
                 keep_open,
@@ -61,7 +61,7 @@ const Calendar: React.MemoExoticComponent<
                 onChangeCalendarMonth,
                 onHover,
                 onSelect,
-                start_date,
+                start_date = '',
                 value,
                 should_show_today,
             },
@@ -137,7 +137,7 @@ const Calendar: React.MemoExoticComponent<
                 setSelectedDate(formatted_date);
 
                 if (onSelect) {
-                    onSelect(formatted_date, keep_open);
+                    onSelect(formatted_date, !!keep_open);
                 }
             };
 
@@ -211,7 +211,7 @@ const Calendar: React.MemoExoticComponent<
                         hovered_date={hovered_date}
                         onMouseOver={onMouseOver}
                         onMouseLeave={onMouseLeave}
-                        should_show_today={should_show_today}
+                        should_show_today={!!should_show_today}
                     />
                     <Footer footer={footer} has_today_btn={has_today_btn} onClick={setToday} />
                 </div>

diff --git a/packages/components/src/components/calendar/views/calendar-days.tsx b/packages/components/src/components/calendar/views/calendar-days.tsx
@@ -17,7 +17,7 @@ import Text from '../../text';
 
 type TDaysProps = CommonPropTypes & {
     date_format: string;
-    has_range_selection: boolean;
+    has_range_selection?: boolean;
     events?: Array<{
         dates: string[];
         descrip: string;

diff --git a/packages/components/src/components/contract-card/result-overlay/result-overlay.tsx b/packages/components/src/components/contract-card/result-overlay/result-overlay.tsx
@@ -88,7 +88,9 @@ const ResultOverlay = ({
                         <span
                             id={`dc_contract_card_${contract_id}_result_close_icon`}
                             className='dc-result__close-btn'
-                            onClick={() => onClickRemove?.(contract_id)}
+                            onClick={() => {
+                                if (contract_id) onClickRemove?.(contract_id);
+                            }}
                         />
                     )}
                     {getContractPath && (

diff --git a/packages/components/src/components/date-picker/date-picker-calendar.tsx b/packages/components/src/components/date-picker/date-picker-calendar.tsx
@@ -11,29 +11,29 @@ type TDatePickerCalendarProps = {
     is_datepicker_visible: boolean;
     calendar_el_ref: React.RefObject<HTMLDivElement>;
     parent_ref: React.RefObject<HTMLElement>;
-    portal_id: string;
+    portal_id?: string;
     style: React.CSSProperties;
     placement: string;
     onSelect: (formatted_date: string, keep_open: boolean) => void;
     calendar_view?: 'date' | 'month' | 'year' | 'decade';
-    keep_open: boolean;
-    footer: string;
-    has_today_btn: boolean;
-    holidays: Array<{
+    keep_open?: boolean;
+    footer?: string;
+    has_today_btn?: boolean;
+    holidays?: Array<{
         dates: string[];
         descrip: string;
     }>;
-    onChangeCalendarMonth: (start_of_month: string) => void;
-    start_date: string;
-    disable_days: number[];
-    disabled_days: number[];
-    events: Array<{
+    onChangeCalendarMonth?: (start_of_month: string) => void;
+    start_date?: string;
+    disable_days?: number[];
+    disabled_days?: number[];
+    events?: Array<{
         dates: string[];
         descrip: string;
     }>;
-    has_range_selection: boolean;
+    has_range_selection?: boolean;
     onHover?: (selected_date: moment.MomentInput | null) => void;
-    should_show_today: boolean;
+    should_show_today?: boolean;
 };
 
 type TCalendarRef = {

diff --git a/packages/components/src/components/date-picker/date-picker-native.tsx b/packages/components/src/components/date-picker/date-picker-native.tsx
@@ -4,21 +4,21 @@ import { toMoment } from '@deriv/shared';
 import Icon from '../icon';
 import Text from '../text';
 
-type TDatePickerNativeProps = Omit<React.HTMLAttributes<HTMLInputElement>, 'onSelect'> & {
+type TDatePickerNativeProps = Omit<React.HTMLAttributes<HTMLInputElement>, 'onSelect' | 'onChange'> & {
     value: string | null;
-    label: string;
-    placeholder: string;
-    max_date: moment.Moment;
-    min_date: moment.Moment;
-    display_format: string;
-    data_testid: string;
-    name: string;
+    label?: string;
+    placeholder?: string;
+    max_date?: moment.Moment | string;
+    min_date?: moment.Moment | string;
+    display_format?: string;
+    data_testid?: string;
+    name?: string;
     error?: string;
-    disabled: boolean;
+    disabled?: boolean;
     hint?: string;
     onSelect: (selected_date: string) => void;
-    onBlur: React.FocusEventHandler<HTMLInputElement>;
-    onFocus: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
 };
 
 const Native = ({

diff --git a/packages/components/src/components/date-picker/date-picker.tsx b/packages/components/src/components/date-picker/date-picker.tsx
@@ -6,20 +6,26 @@ import Native from './date-picker-native';
 import MobileWrapper from '../mobile-wrapper';
 import DesktopWrapper from '../desktop-wrapper';
 import { useOnClickOutside } from '../../hooks/use-onclickoutside';
-import { MomentInput } from 'moment';
+import moment, { MomentInput } from 'moment';
 import { TDatePickerOnChangeEvent } from '../types';
 
 type TDatePicker = Omit<
     React.ComponentProps<typeof Native> & React.ComponentProps<typeof Input> & React.ComponentProps<typeof Calendar>,
-    'value' | 'onSelect' | 'is_datepicker_visible' | 'placement' | 'style' | 'calendar_el_ref' | 'parent_ref'
+    | 'date_format'
+    | 'onSelect'
+    | 'is_datepicker_visible'
+    | 'is_placeholder_visible'
+    | 'placement'
+    | 'style'
+    | 'calendar_el_ref'
+    | 'parent_ref'
+    | 'onChange'
+    | 'onChangeInput'
 > & {
-    mode: string;
-    start_date: moment.Moment;
+    mode?: string;
     value: moment.Moment | string;
     onChange: (e: TDatePickerOnChangeEvent) => void;
-    footer: React.ReactElement;
-    date_format: string;
-    has_range_selection: boolean;
+    date_format?: string;
 };
 
 type TCalendarRef = {
@@ -42,7 +48,7 @@ const DatePicker = React.memo((props: TDatePicker) => {
         max_date,
         min_date,
         start_date,
-        name,
+        name = '',
         onBlur,
         onChange,
         onFocus,

diff --git a/packages/components/src/components/dialog/dialog.tsx b/packages/components/src/components/dialog/dialog.tsx
@@ -98,7 +98,7 @@ const Dialog = ({
         }
     };
 
-    const validateClickOutside = () => !!(dismissable || (has_close_icon && is_visible && is_closed_on_cancel));
+    const validateClickOutside = () => !!dismissable || !!(has_close_icon && is_visible && is_closed_on_cancel);
 
     useOnClickOutside(wrapper_ref, handleClose, validateClickOutside);
 

diff --git a/packages/components/src/components/input-field/input-field.tsx b/packages/components/src/components/input-field/input-field.tsx
@@ -41,7 +41,7 @@ type TInputField = {
     is_autocomplete_disabled?: boolean;
     is_disabled?: boolean;
     is_error_tooltip_hidden?: boolean;
-    is_float: boolean;
+    is_float?: boolean;
     is_hj_whitelisted?: boolean;
     is_incrementable_on_long_press?: boolean;
     is_incrementable?: boolean;
@@ -53,16 +53,16 @@ type TInputField = {
     max_length?: number;
     max_value?: number;
     min_value?: number;
-    name: string;
+    name?: string;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
-    onChange: (e: TChangeEvent) => void;
+    onChange?: (e: TChangeEvent) => void;
     onClick?: React.MouseEventHandler<HTMLInputElement>;
     onClickInputWrapper?: React.MouseEventHandler<HTMLDivElement>;
     placeholder?: string;
     prefix?: string;
     required?: boolean;
     setCurrentFocus: (name: string | null) => void;
-    type: string;
+    type?: string;
     unit?: string;
     value: number | string;
 };
@@ -105,7 +105,7 @@ const InputField = ({
     max_length,
     max_value,
     min_value,
-    name,
+    name = '',
     format,
     onBlur,
     onChange,
@@ -115,7 +115,7 @@ const InputField = ({
     prefix,
     required,
     setCurrentFocus,
-    type,
+    type = '',
     unit,
     value,
     data_testid,
@@ -170,7 +170,7 @@ const InputField = ({
             }
         }
 
-        onChange(e);
+        onChange?.(e);
         if (callback) {
             callback(e);
         }
@@ -269,7 +269,7 @@ const InputField = ({
             if (is_signed && /^\d+/.test(formatted_value) && +formatted_value > 0) {
                 formatted_value = `+${formatted_value}`;
             }
-            onChange({ target: { value: formatted_value, name } });
+            onChange?.({ target: { value: formatted_value, name } });
         }
     };