Merge pull request #1 from jim-deriv/Jim/75837/icon-component-ts-migr…

…ation Jim/75837/icon component ts migration
shayan-deriv · Sep 22, 2022 · 6e01d99 · 6e01d99
2 parents 71b2327 + bb2cc02
commit 6e01d99
Show file tree

Hide file tree

Showing 25 changed files with 68 additions and 42 deletions.
diff --git a/packages/components/src/components/circular-progress/circular-progress.jsx b/packages/components/src/components/circular-progress/circular-progress.jsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import Icon from '../icon/icon.jsx';
+import Icon from '../icon/icon';
 
 const CircularProgress = ({ className, danger_limit, icon, is_clockwise, progress, radius, stroke, warning_limit }) => {
     const normalizedRadius = radius - stroke / 2;

diff --git a/packages/components/src/components/content-expander/content-expander.jsx b/packages/components/src/components/content-expander/content-expander.jsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
-import Icon from '../icon/icon.jsx';
+import Icon from '../icon/icon';
 import Text from '../text/text.jsx';
 
 const ContentExpander = ({

diff --git a/packages/components/src/components/dialog/dialog.jsx b/packages/components/src/components/dialog/dialog.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
 import Button from '../button/button.jsx';
-import Icon from '../icon/icon.jsx';
+import Icon from '../icon/icon';
 import Text from '../text';
 import { useOnClickOutside } from '../../hooks';
 

diff --git a/packages/components/src/components/dropdown/dropdown.jsx b/packages/components/src/components/dropdown/dropdown.jsx
@@ -10,7 +10,7 @@ import DisplayText from './display-text.jsx';
 import Text from '../text/text.jsx';
 import { useBlockScroll, useOnClickOutside } from '../../hooks';
 import ThemedScrollbars from '../themed-scrollbars/themed-scrollbars.jsx';
-import Icon from '../icon/icon.jsx';
+import Icon from '../icon/icon';
 
 const DropdownList = React.forwardRef((props, list_ref) => {
     const {

diff --git a/packages/components/src/components/form-submit-error-message/form-submit-error-message.jsx b/packages/components/src/components/form-submit-error-message/form-submit-error-message.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import Icon from '../icon/icon.jsx';
+import Icon from '../icon/icon';
 import Text from '../text';
 
 const FormSubmitErrorMessage = ({ className, message }) => (

diff --git a/packages/components/src/components/hint-box/hint-box.jsx b/packages/components/src/components/hint-box/hint-box.jsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import Icon from '../icon/icon.jsx';
+import Icon from '../icon/icon';
 
 const HintBox = ({ className, icon, is_info, is_warn, is_danger, message }) => {
     return (

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.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import Icon from '../icon/icon.jsx';
+import Icon from '../icon/icon';
 
 const IconTradeTypes = ({ type, className, ...props }) => {
     switch (type.toLowerCase()) {

diff --git a/...s/components/src/components/icon/icon.jsx → ...s/components/src/components/icon/icon.tsx b/...s/components/src/components/icon/icon.jsx → ...s/components/src/components/icon/icon.tsx
@@ -1,8 +1,8 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { getKebabCase, getUrlBase } from '@deriv/shared';
 import * as icons_manifest from './icons-manifest';
+import { TIconsManifest, TIconProps } from '../types';
 
 const Icon = React.forwardRef(
     (
@@ -19,12 +19,12 @@ const Icon = React.forwardRef(
             onMouseLeave,
             size = 16,
             width,
-        },
-        ref
+        }: TIconProps,
+        ref?: React.ForwardedRef<SVGSVGElement | null>
     ) => {
         if (!icon) return null;
 
-        let category = 'common';
+        let category: keyof TIconsManifest = 'common';
         const category_match = new RegExp(`^Ic(${Object.keys(icons_manifest).join('|')})`, 'gi').exec(icon);
         if (category_match?.[1]) {
             category = getKebabCase(category_match[1]);
@@ -59,11 +59,11 @@ const Icon = React.forwardRef(
                 onMouseLeave={onMouseLeave}
                 ref={ref}
                 style={
-                    custom_color
+                    (custom_color
                         ? {
                               '--fill-color1': custom_color,
                           }
-                        : undefined
+                        : undefined) as React.CSSProperties & { '--fill-color1': string }
                 }
             >
                 <use xlinkHref={`${getUrlBase(`/public/sprites/${filename}.svg`)}#${sprite_id}`} />
@@ -74,19 +74,4 @@ const Icon = React.forwardRef(
 
 Icon.displayName = 'Icon';
 
-Icon.propTypes = {
-    className: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-    color: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-    custom_color: PropTypes.string,
-    data_testid: PropTypes.string,
-    height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    icon: PropTypes.string,
-    onClick: PropTypes.func,
-    onMouseEnter: PropTypes.func,
-    onMouseLeave: PropTypes.func,
-    size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    id: PropTypes.string,
-};
-
 export default React.memo(Icon);
diff --git a/...s/components/src/components/icon/index.js → ...s/components/src/components/icon/index.ts b/...s/components/src/components/icon/index.js → ...s/components/src/components/icon/index.ts
@@ -1,4 +1,4 @@
-import Icon from './icon.jsx';
+import Icon from './icon';
 import './icon.scss';
 
 export default Icon;
diff --git a/packages/components/src/components/mobile-dialog/mobile-dialog.jsx b/packages/components/src/components/mobile-dialog/mobile-dialog.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
-import Icon from '../icon/icon.jsx';
+import Icon from '../icon/icon';
 import Text from '../text/text.jsx';
 import Div100vhContainer from '../div100vh-container';
 

diff --git a/packages/components/src/components/mobile-drawer/mobile-drawer-submenu-section.jsx b/packages/components/src/components/mobile-drawer/mobile-drawer-submenu-section.jsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import Icon from '../icon/icon.jsx';
+import Icon from '../icon/icon';
 import Text from '../text/text.jsx';
 
 const SubMenuSection = props => {

diff --git a/packages/components/src/components/mobile-drawer/mobile-drawer-submenu.jsx b/packages/components/src/components/mobile-drawer/mobile-drawer-submenu.jsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
-import Icon from '../icon/icon.jsx';
+import Icon from '../icon/icon';
 import Text from '../text/text.jsx';
 
 const SubMenu = ({

diff --git a/packages/components/src/components/mobile-drawer/mobile-drawer.jsx b/packages/components/src/components/mobile-drawer/mobile-drawer.jsx
@@ -8,7 +8,7 @@ import SubHeader from './mobile-drawer-subheader.jsx';
 import Item from './mobile-drawer-item.jsx';
 import SubMenu from './mobile-drawer-submenu.jsx';
 import SubMenuSection from './mobile-drawer-submenu-section.jsx';
-import Icon from '../icon/icon.jsx';
+import Icon from '../icon/icon';
 import Text from '../text/text.jsx';
 
 const MobileDrawer = ({

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
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import Div100vhContainer from '../div100vh-container';
 import FadeWrapper from '../fade-wrapper';
 import PageOverlay from '../page-overlay/page-overlay.jsx';
-import Icon from '../icon/icon.jsx';
+import Icon from '../icon/icon';
 import Text from '../text/text.jsx';
 
 const MobileFullPageModal = ({

diff --git a/packages/components/src/components/modal/modal.jsx b/packages/components/src/components/modal/modal.jsx
@@ -5,7 +5,7 @@ import ReactDOM from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
 import Body from './modal-body.jsx';
 import Footer from './modal-footer.jsx';
-import Icon from '../icon/icon.jsx';
+import Icon from '../icon/icon';
 import Text from '../text/text.jsx';
 import { useOnClickOutside } from '../../hooks';
 

diff --git a/packages/components/src/components/page-overlay/page-overlay.jsx b/packages/components/src/components/page-overlay/page-overlay.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
 import PropTypes from 'prop-types';
-import Icon from '../icon/icon.jsx';
+import Icon from '../icon/icon';
 import { useOnClickOutside } from '../../hooks';
 
 const PageOverlay = ({ children, header, id, is_from_app = false, is_open, onClickClose, portal_id }) => {

diff --git a/packages/components/src/components/select-native/select-native.jsx b/packages/components/src/components/select-native/select-native.jsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Field from '../field/field.jsx';
-import Icon from '../icon/icon.jsx';
+import Icon from '../icon/icon';
 import Text from '../text/text.jsx';
 
 const getDisplayText = (list_items, value) => {

diff --git a/packages/components/src/components/send-email-template/send-email-template.jsx b/packages/components/src/components/send-email-template/send-email-template.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { PlatformContext } from '@deriv/shared';
 import Button from '../button/button.jsx';
-import Icon from '../icon/icon.jsx';
+import Icon from '../icon/icon';
 import Text from '../text';
 
 const SendEmailTemplate = ({

diff --git a/packages/components/src/components/types/common.types.ts b/packages/components/src/components/types/common.types.ts
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export type TGenericObjectType = {
+    [key: string]: React.ReactNode;
+};
diff --git a/packages/components/src/components/types/icons.types.ts b/packages/components/src/components/types/icons.types.ts
@@ -0,0 +1,33 @@
+import { TGenericObjectType } from './common.types';
+
+export type TIconsManifest = Readonly<{
+    // If a new icon category is added, be sure to add it here as well. This is part of the fix for ts(7053)
+    brand: string;
+    cashier: string;
+    common: string;
+    contract: string;
+    currency: string;
+    dxtrade: string;
+    flag: string;
+    mt5: string;
+    option: string;
+    stock: string;
+    tradetype: string;
+    underlying: string;
+    wallet: string;
+}>;
+
+export type TIconProps = {
+    className?: string | TGenericObjectType;
+    color?: string;
+    custom_color?: string;
+    data_testid?: string;
+    height?: number | string;
+    icon: string;
+    onClick?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    size?: number | string;
+    width?: number | string;
+    id?: string;
+};
diff --git a/packages/components/src/components/types/index.ts b/packages/components/src/components/types/index.ts
@@ -0,0 +1,3 @@
+import { TIconsManifest, TIconProps } from './icons.types';
+
+export type { TIconsManifest, TIconProps };
diff --git a/packages/components/src/components/vertical-tab/vertical-tab-content-container.jsx b/packages/components/src/components/vertical-tab/vertical-tab-content-container.jsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import { usePrevious } from '../../hooks';
-import Icon from '../icon/icon.jsx';
+import Icon from '../icon/icon';
 
 const SideNotes = ({ class_name, side_notes }) => {
     return (

diff --git a/packages/components/src/components/vertical-tab/vertical-tab-header-group.jsx b/packages/components/src/components/vertical-tab/vertical-tab-header-group.jsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
-import Icon from '../icon/icon.jsx';
+import Icon from '../icon/icon';
 
 const HeaderIcon = ({ icon, is_active }) => (
     <Icon

diff --git a/packages/components/src/components/vertical-tab/vertical-tab-header.jsx b/packages/components/src/components/vertical-tab/vertical-tab-header.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { NavLink } from 'react-router-dom';
 import { getKebabCase } from '@deriv/shared';
 import Counter from '../counter';
-import Icon from '../icon/icon.jsx';
+import Icon from '../icon/icon';
 
 const HeaderIcon = ({ icon, is_active }) => (
     <Icon

diff --git a/packages/components/src/components/vertical-tab/vertical-tab.jsx b/packages/components/src/components/vertical-tab/vertical-tab.jsx
@@ -9,7 +9,7 @@ import VerticalTabHeaders from './vertical-tab-headers.jsx';
 import VerticalTabHeaderTitle from './vertical-tab-header-title.jsx';
 import VerticalTabLayout from './vertical-tab-layout.jsx';
 import VerticalTabWrapper from './vertical-tab-wrapper.jsx';
-import Icon from '../icon/icon.jsx';
+import Icon from '../icon/icon';
 
 const setSelectedIndex = ({ current_path, list, is_routed, selected_index, setCurrTabIndex, setVerticalTabIndex }) => {
     let index;