thisyahlen/chore: update version and imports (deriv-com#13238)

* chore: update version and imports

* revert icon

* chore: eslint

* chore: komen

Author: thisyahlen-deriv

packages/account-v2/package.json

@@ -11,7 +11,7 @@
         "start": "rimraf dist && npm run test && npm run serve"
     },
     "dependencies": {
-        "@deriv-com/ui": "0.0.1-beta.9",
+        "@deriv-com/ui": "1.0.1",
         "@deriv/api": "^1.0.0",
         "@deriv/library": "^1.0.0",
         "@deriv/quill-design": "^1.3.2",

packages/p2p-v2/package.json

@@ -12,7 +12,7 @@
         "start": "rimraf dist && npm run test && npm run serve"
     },
     "dependencies": {
-        "@deriv-com/ui": "0.0.1-beta.9",
+        "@deriv-com/ui": "1.0.1",
         "@deriv/api": "^1.0.0",
         "@deriv/integration": "^1.0.0",
         "@deriv/react-joyride": "^2.6.2",

packages/p2p-v2/src/components/AdvertiserName/AdvertiserName.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { UserAvatar } from '../UserAvatar';
+import { Text } from '@deriv-com/ui';
 import { useAdvertiserStats, useDevice } from '../../hooks';
-import AdvertiserNameStats from './AdvertiserNameStats';
+import { UserAvatar } from '../UserAvatar';
 import AdvertiserNameBadges from './AdvertiserNameBadges';
+import AdvertiserNameStats from './AdvertiserNameStats';
 import AdvertiserNameToggle from './AdvertiserNameToggle';
-import { Text } from '@deriv-com/ui/dist/components/Text';
 import './AdvertiserName.scss';
 
 const AdvertiserName = () => {

packages/p2p-v2/src/components/AdvertiserName/AdvertiserNameStats.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
+import { Text } from '@deriv-com/ui';
 import { useAdvertiserStats, useDevice } from '../../hooks';
-import { StarRating } from '../StarRating';
 import ThumbUpIcon from '../../public/ic-thumb-up.svg';
 import BlockedUserOutlineIcon from '../../public/ic-user-blocked-outline.svg';
-import { Text } from '@deriv-com/ui/dist/components/Text';
+import { StarRating } from '../StarRating';
 import './AdvertiserNameStats.scss';
 
 /**

packages/p2p-v2/src/components/AdvertiserName/AdvertiserNameToggle.tsx

@@ -1,6 +1,6 @@
 import React, { memo, useEffect, useState } from 'react';
 import { p2p } from '@deriv/api';
-import { Text } from '@deriv-com/ui/dist/components/Text';
+import { Text } from '@deriv-com/ui';
 import { useAdvertiserStats } from '../../hooks';
 import { ToggleSwitch } from '../ToggleSwitch';
 import './AdvertiserNameToggle.scss';

packages/p2p-v2/src/components/Badge/Badge.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import clsx from 'clsx';
-import { Text } from '@deriv-com/ui/dist/components/Text';
+import { Text } from '@deriv-com/ui';
 import './Badge.scss';
 
 type TBadgeProps = {

packages/p2p-v2/src/components/Checklist/Checklist.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Button } from '@deriv-com/ui/dist/components/Button';
-import { Text } from '@deriv-com/ui/dist/components/Text';
+import { Button, Text } from '@deriv-com/ui';
 import { useDevice } from '../../hooks';
 import ArrowRightIcon from '../../public/ic-arrow-right.svg';
 import CheckmarkIcon from '../../public/ic-checkmark.svg';

packages/p2p-v2/src/components/CloseHeader/CloseHeader.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
+import { Text } from '@deriv-com/ui';
 import { useDevice } from '../../hooks';
 import CrossIcon from '../../public/ic-cross.svg';
 import './CloseHeader.scss';
-import { Text } from '@deriv-com/ui/dist/components/Text';
 
 const CloseHeader = () => {
     const { isMobile } = useDevice();

packages/p2p-v2/src/components/Dropdown/Dropdown.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import clsx from 'clsx';
 import { useCombobox } from 'downshift';
-import { Text } from '@deriv-com/ui/dist/components/Text';
+import { Text } from '@deriv-com/ui';
 import ArrowDown from '../../public/ic-chevron-down.svg';
 import reactNodeToString from '../../utils/react-node-to-string';
 import TextField, { TextFieldProps } from '../TextField/TextField';

packages/p2p-v2/src/components/Input/Input.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, ReactElement } from 'react';
 import clsx from 'clsx';
-import { Text } from '@deriv-com/ui/dist/components/Text';
+import { Text } from '@deriv-com/ui';
 import { useDevice } from '../../hooks';
 import './Input.scss';
 

packages/p2p-v2/src/components/MobileTabs/MobileTabs.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text } from '@deriv-com/ui/dist/components/Text';
+import { Text } from '@deriv-com/ui';
 import RightArrowIcon from '../../public/ic-chevron-right.svg';
 import './MobileTabs.scss';
 

packages/p2p-v2/src/components/Modals/AvailableP2PBalanceModal/AvailableP2PBalanceModal.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import Modal from 'react-modal';
-import { Text } from '@deriv-com/ui/dist/components/Text';
-import { Button } from '@deriv-com/ui/dist/components/Button';
+import { Button, Text } from '@deriv-com/ui';
 import { customStyles } from '../helpers';
 import './AvailableP2PBalanceModal.scss';
 

packages/p2p-v2/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect } from 'react';
 import Modal from 'react-modal';
 import { p2p } from '@deriv/api';
-import { Text } from '@deriv-com/ui/dist/components/Text';
-import { Button } from '@deriv-com/ui/dist/components/Button';
+import { Button, Text } from '@deriv-com/ui';
 import { customStyles } from '../helpers';
 import './BlockUnblockUserModal.scss';
 

packages/p2p-v2/src/components/Modals/DailyLimitModal/DailyLimitModal.tsx

@@ -1,9 +1,7 @@
 import React, { useEffect } from 'react';
 import Modal from 'react-modal';
 import { p2p } from '@deriv/api';
-import { Button } from '@deriv-com/ui/dist/components/Button';
-import { Loader } from '@deriv-com/ui/dist/components/Loader';
-import { Text } from '@deriv-com/ui/dist/components/Text';
+import { Button, Loader, Text } from '@deriv-com/ui';
 import { useDevice } from '../../../hooks';
 import { customStyles } from '../helpers';
 import './DailyLimitModal.scss';

packages/p2p-v2/src/components/Modals/NicknameModal/NicknameModal.tsx

@@ -3,8 +3,7 @@ import { debounce } from 'lodash';
 import { Controller, useForm, useWatch } from 'react-hook-form';
 import Modal from 'react-modal';
 import { p2p } from '@deriv/api';
-import { Button } from '@deriv-com/ui/dist/components/Button';
-import { Text } from '@deriv-com/ui/dist/components/Text';
+import { Button, Text } from '@deriv-com/ui';
 import { useDevice } from '../../../hooks';
 import P2PUserIcon from '../../../public/ic-cashier-p2p-user.svg';
 import { Input } from '../../Input';

packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/PaymentMethodErrorModal.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import ReactModal from 'react-modal';
-import { Button } from '@deriv-com/ui/dist/components/Button';
-import { Text } from '@deriv-com/ui/dist/components/Text';
+import { Button, Text } from '@deriv-com/ui';
 import { customStyles } from '../../helpers';
 import '../styles.scss';
 import './PaymentMethodErrorModal.scss';

packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodModal/PaymentMethodModal.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import ReactModal from 'react-modal';
-import { Button } from '@deriv-com/ui/dist/components/Button';
-import { Text } from '@deriv-com/ui/dist/components/Text';
+import { Button, Text } from '@deriv-com/ui';
 import { customStyles } from '../../helpers';
 import '../styles.scss';
 

packages/p2p-v2/src/components/PageReturn/PageReturn.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
-import { Text } from '@deriv-com/ui/dist/components/Text';
+import { Text } from '@deriv-com/ui';
 import ArrowLeftIcon from '../../public/ic-arrow-left.svg';
 import './PageReturn.scss';
 

packages/p2p-v2/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TAdvertiserPaymentMethods } from 'types';
-import { Text } from '@deriv-com/ui/dist/components/Text';
+import { Text } from '@deriv-com/ui';
 import './PaymentMethodCardBody.scss';
 
 type TPaymentMethodCardBodyProps = {

packages/p2p-v2/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx

@@ -1,6 +1,6 @@
 import React, { ComponentType, SVGAttributes } from 'react';
 import { TAdvertiserPaymentMethods } from 'types';
-import { Button } from '@deriv-com/ui/dist/components/Button';
+import { Button } from '@deriv-com/ui';
 import IcCashierBankTransfer from '../../../public/ic-cashier-bank-transfer.svg';
 import IcCashierEwallet from '../../../public/ic-cashier-ewallet.svg';
 import IcCashierOther from '../../../public/ic-cashier-other.svg';

packages/p2p-v2/src/components/PaymentMethodField/PaymentMethodField.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Input } from '@deriv-com/ui/dist/components/Input';
+import { Input } from '@deriv-com/ui';
 import { VALID_SYMBOLS_PATTERN } from '../../constants';
 import { TextArea } from '..';
 

packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodForm.tsx

@@ -2,9 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { TSelectedPaymentMethod } from 'types';
 import { p2p } from '@deriv/api';
-import { Button } from '@deriv-com/ui/dist/components/Button';
-import { Input } from '@deriv-com/ui/dist/components/Input';
-import { Text } from '@deriv-com/ui/dist/components/Text';
+import { Button, Input, Text } from '@deriv-com/ui';
 import CloseCircle from '../../public/ic-close-circle.svg';
 import { TFormState } from '../../reducers/types';
 import { Dropdown } from '../Dropdown';

packages/p2p-v2/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '@deriv-com/ui/dist/components/Button';
+import { Button } from '@deriv-com/ui';
 import { TFormState } from '../../reducers/types';
 import './PaymentMethodsFormFooter.scss';
 

packages/p2p-v2/src/components/PaymentMethodsHeader/PaymentMethodsHeader.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text } from '@deriv-com/ui/dist/components/Text';
+import { Text } from '@deriv-com/ui';
 import ArrowLeftBold from '../../public/ic-arrow-left-bold.svg';
 import './PaymentMethodsHeader.scss';
 

packages/p2p-v2/src/components/RadioGroup/Radio.tsx

@@ -1,6 +1,6 @@
 import React, { ChangeEvent, PropsWithChildren, useEffect, useState } from 'react';
 import clsx from 'clsx';
-import { Text } from '@deriv-com/ui/dist/components/Text';
+import { Text } from '@deriv-com/ui';
 import './RadioGroup.scss';
 
 type TRadio = {

packages/p2p-v2/src/components/RadioGroup/RadioGroup.tsx

@@ -1,6 +1,6 @@
 import React, { ChangeEvent, HTMLAttributes, PropsWithChildren, useEffect, useState } from 'react';
 import clsx from 'clsx';
-import { Text } from '@deriv-com/ui/dist/components/Text';
+import { Text } from '@deriv-com/ui';
 import './RadioGroup.scss';
 
 type TItem = HTMLAttributes<HTMLDivElement> & {

packages/p2p-v2/src/components/TextArea/TextArea.tsx

@@ -1,6 +1,6 @@
 import React, { HtmlHTMLAttributes, useState } from 'react';
 import clsx from 'clsx';
-import { Text } from '@deriv-com/ui/dist/components/Text';
+import { Text } from '@deriv-com/ui';
 import './TextArea.scss';
 
 type TTextAreaProps = HtmlHTMLAttributes<HTMLTextAreaElement> & {

packages/p2p-v2/src/components/TextField/HelperMessage.tsx

@@ -1,5 +1,5 @@
-import React, { InputHTMLAttributes, memo } from 'react';
-import { Text, TextProps } from '@deriv-com/ui/dist/components/Text';
+import React, { ComponentProps, InputHTMLAttributes, memo } from 'react';
+import { Text } from '@deriv-com/ui';
 
 export type HelperMessageProps = {
     inputValue?: InputHTMLAttributes<HTMLInputElement>['value'];
@@ -11,7 +11,7 @@ export type HelperMessageProps = {
 
 const HelperMessage: React.FC<HelperMessageProps> = memo(
     ({ inputValue, isError, maxLength, message, messageVariant = 'general' }) => {
-        const HelperMessageColors: Record<string, TextProps['color']> = {
+        const HelperMessageColors: Record<string, ComponentProps<typeof Text>['color']> = {
             error: 'error',
             general: 'less-prominent',
             warning: 'warning',

packages/p2p-v2/src/components/UserAvatar/UserAvatar.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import clsx from 'clsx';
-import { Text } from '@deriv-com/ui/dist/components/Text';
+import { Text } from '@deriv-com/ui';
 import { getShortNickname, TGenericSizes } from '../../utils';
 import './UserAvatar.scss';
 

packages/p2p-v2/src/components/Verification/Verification.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Loader } from '@deriv-com/ui/dist/components/Loader';
-import { Text } from '@deriv-com/ui/dist/components/Text';
 import { useHistory } from 'react-router-dom';
+import { Loader, Text } from '@deriv-com/ui';
 import { useDevice, usePoiPoaStatus } from '../../hooks';
 import SendEmailIcon from '../../public/ic-send-email.svg';
 import { Checklist } from '../Checklist';

packages/p2p-v2/src/pages/my-profile/screens/MyProfile/MyProfile.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { Tab, Tabs } from '@deriv-com/ui/dist/components/Tabs';
+import { Tab, Tabs } from '@deriv-com/ui';
 import { useDevice, useQueryString } from '../../../../hooks';
 import { MyProfileAdDetails } from '../MyProfileAdDetails';
 import { MyProfileContent } from '../MyProfileContent';
 import { MyProfileCounterparties } from '../MyProfileCounterparties';
 import { MyProfileStats } from '../MyProfileStats';
+import { PaymentMethods } from '../PaymentMethods';
 import MyProfileMobile from './MyProfileMobile';
 import './MyProfile.scss';
-import { PaymentMethods } from '../PaymentMethods';
 
 const TABS = ['Stats', 'Payment methods', 'Ad details', 'My counterparties'];
 

packages/p2p-v2/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { p2p } from '@deriv/api';
-import { Button } from '@deriv-com/ui/dist/components/Button';
+import { Button } from '@deriv-com/ui';
 import { FullPageMobileWrapper, TextArea } from '../../../../components';
 import { useDevice, useQueryString } from '../../../../hooks';
 import './MyProfileAdDetails.scss';

packages/p2p-v2/src/pages/my-profile/screens/MyProfileBalance/MyProfileBalance.tsx

@@ -1,12 +1,12 @@
 import React, { useMemo, useState } from 'react';
-import { Text } from '@deriv-com/ui/dist/components/Text';
+import { useActiveAccount } from '@deriv/api';
+import { Text } from '@deriv-com/ui';
 import { AvailableP2PBalanceModal, DailyLimitModal } from '../../../../components';
 import { useAdvertiserStats, useDevice } from '../../../../hooks';
 import InfoOutlineIcon from '../../../../public/ic-info-outline.svg';
 import { numberToCurrencyText } from '../../../../utils';
-import './MyProfileBalance.scss';
 import { MyProfileDailyLimit } from '../MyProfileDailyLimit';
-import { useActiveAccount } from '@deriv/api';
+import './MyProfileBalance.scss';
 
 const MyProfileBalance = () => {
     const { data: advertiserInfo, isLoading } = useAdvertiserStats();

packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterparties.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useState } from 'react';
-import { Text } from '@deriv-com/ui/dist/components/Text';
+import { Text } from '@deriv-com/ui';
 import { FullPageMobileWrapper } from '../../../../components';
 import { BlockUnblockUserFilterModal } from '../../../../components/Modals/BlockUnblockUserFilterModal';
 import { useDevice, useQueryString } from '../../../../hooks';

packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesEmpty/MyProfileCounterpartiesEmpty.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text } from '@deriv-com/ui/dist/components/Text';
+import { Text } from '@deriv-com/ui';
 import EmptyCounterpartiesIcon from '../../../../../public/ic-empty-blocked-advertisers.svg';
 import './MyProfileCounterpartiesEmpty.scss';
 

packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
-import { Button } from '@deriv-com/ui/dist/components/Button';
-import { Text } from '@deriv-com/ui/dist/components/Text';
-import { Search } from '../../../../../components/Search';
+import { Button, Text } from '@deriv-com/ui';
 import { Dropdown } from '../../../../../components/Dropdown';
+import { Search } from '../../../../../components/Search';
 import { useDevice } from '../../../../../hooks';
-import { COUNTERPARTIES_DROPDOWN_LIST } from '../../../../../utils/constants';
 import SortIcon from '../../../../../public/ic-cashier-sort.svg';
+import { COUNTERPARTIES_DROPDOWN_LIST } from '../../../../../utils/constants';
 import './MyProfileCounterpartiesHeader.scss';
 
 type MyProfileCounterpartiesHeaderProps = {

packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
-import { Loader } from '@deriv-com/ui/dist/components/Loader';
-import { Text } from '@deriv-com/ui/dist/components/Text';
 import { p2p } from '@deriv/api';
+import { Loader, Text } from '@deriv-com/ui';
 import { Table } from '../../../../../components';
 import { MyProfileCounterpartiesEmpty } from '../MyProfileCounterpartiesEmpty';
 import { MyProfileCounterpartiesTableRow } from '../MyProfileCounterpartiesTableRow';

packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/MyProfileCounterpartiesTableRow.tsx

@@ -1,6 +1,5 @@
 import React, { memo, useState } from 'react';
-import { Text } from '@deriv-com/ui/dist/components/Text';
-import { Button } from '@deriv-com/ui/dist/components/Button';
+import { Button, Text } from '@deriv-com/ui';
 import { UserAvatar } from '../../../../../components';
 import { BlockUnblockUserModal } from '../../../../../components/Modals/BlockUnblockUserModal';
 import { useDevice } from '../../../../../hooks';

packages/p2p-v2/src/pages/my-profile/screens/MyProfileDailyLimit/MyProfileDailyLimit.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { useActiveAccount } from '@deriv/api';
-import { Button } from '@deriv-com/ui/dist/components/Button';
-import { Text } from '@deriv-com/ui/dist/components/Text';
+import { Button, Text } from '@deriv-com/ui';
 import DailyLimitModal from '../../../../components/Modals/DailyLimitModal/DailyLimitModal';
 import { useAdvertiserStats, useDevice } from '../../../../hooks';
 import './MyProfileDailyLimit.scss';

packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsMobile.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Text } from '@deriv-com/ui/dist/components/Text';
+import { Text } from '@deriv-com/ui';
 import { FullPageMobileWrapper } from '../../../../components';
-import { MyProfileStats } from './MyProfileStats';
 import { useQueryString } from '../../../../hooks';
+import { MyProfileStats } from './MyProfileStats';
 
 const MyProfileStatsMobile = () => {
     const { setQueryString } = useQueryString();

packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethods.tsx

@@ -1,7 +1,7 @@
 import React, { useReducer } from 'react';
 import { TSelectedPaymentMethod } from 'types';
 import { p2p } from '@deriv/api';
-import { Loader } from '@deriv-com/ui/dist/components/Loader';
+import { Loader } from '@deriv-com/ui';
 import { PaymentMethodForm } from '../../../../components/PaymentMethodForm';
 import { advertiserPaymentMethodsReducer } from '../../../../reducers';
 import { PaymentMethodsEmpty } from './PaymentMethodsEmpty';