Merge pull request #17 from jim-deriv/Jim/75752/text-component-ts-mig…

…ration-current

Jim/75752/text component ts migration current

packages/components/src/components/app-settings/app-settings-menu-item.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import classNames from 'classnames';
-import Text from '../text/text.jsx';
+import Text from '../text/text';
 
 const AppSettingsMenuItem = ({ is_active, title, refSetter, onClick }) => {
     const text_colour = is_active ? 'prominent' : 'less-prominent';

packages/components/src/components/content-expander/content-expander.jsx

@@ -2,8 +2,8 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
+import Text from '../text/text';
 import Icon from '../icon/icon';
-import Text from '../text/text.jsx';
 
 const ContentExpander = ({
     arrow_style,

packages/components/src/components/dropdown/dropdown.jsx

@@ -7,7 +7,7 @@ import { mobileOSDetect, getPosition } from '@deriv/shared';
 import { listPropType, findNextFocusableNode, findPreviousFocusableNode } from './dropdown';
 import Items from './items.jsx';
 import DisplayText from './display-text.jsx';
-import Text from '../text/text.jsx';
+import Text from '../text/text';
 import { useBlockScroll, useOnClickOutside } from '../../hooks';
 import ThemedScrollbars from '../themed-scrollbars/themed-scrollbars.jsx';
 import Icon from '../icon/icon';

packages/components/src/components/input/input.jsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import Field from '../field';
-import Text from '../text/text.jsx';
+import Text from '../text/text';
 
 const InputWrapper = ({ children, has_footer }) =>
     has_footer ? <div className='dc-input__wrapper'>{children}</div> : children;

packages/components/src/components/loading/loading.jsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
-import Text from '../text/text.jsx';
+import Text from '../text/text';
 
 const Loading = ({ className, id, is_fullscreen = true, is_slow_loading, status, theme }) => {
     const theme_class = theme ? `barspinner-${theme}` : 'barspinner-light';

packages/components/src/components/mobile-dialog/mobile-dialog.jsx

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
+import Text from '../text/text';
 import Icon from '../icon/icon';
-import Text from '../text/text.jsx';
 import Div100vhContainer from '../div100vh-container';
 
 const MobileDialog = props => {

packages/components/src/components/mobile-drawer/mobile-drawer-submenu-section.jsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
+import Text from '../text/text';
 import Icon from '../icon/icon';
-import Text from '../text/text.jsx';
 
 const SubMenuSection = props => {
     const { submenu_toggle_class, section_title, section_icon, children } = props;

packages/components/src/components/mobile-drawer/mobile-drawer-submenu.jsx

@@ -2,8 +2,8 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
+import Text from '../text/text';
 import Icon from '../icon/icon';
-import Text from '../text/text.jsx';
 
 const SubMenu = ({
     children,

packages/components/src/components/mobile-drawer/mobile-drawer.jsx

@@ -8,8 +8,8 @@ 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 Text from '../text/text';
 import Icon from '../icon/icon';
-import Text from '../text/text.jsx';
 
 const MobileDrawer = ({
     className,

packages/components/src/components/mobile-full-page-modal/mobile-full-page-modal.jsx

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 import Div100vhContainer from '../div100vh-container';
 import FadeWrapper from '../fade-wrapper';
 import PageOverlay from '../page-overlay/page-overlay.jsx';
+import Text from '../text/text';
 import Icon from '../icon/icon';
-import Text from '../text/text.jsx';
 
 const MobileFullPageModal = ({
     body_className,

packages/components/src/components/modal/modal.jsx

@@ -5,8 +5,8 @@ import ReactDOM from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
 import Body from './modal-body.jsx';
 import Footer from './modal-footer.jsx';
+import Text from '../text/text';
 import Icon from '../icon/icon';
-import Text from '../text/text.jsx';
 import { useOnClickOutside } from '../../hooks';
 
 const ModalElement = ({

packages/components/src/components/page-error/page-error.jsx

@@ -5,7 +5,7 @@ import { isMobile } from '@deriv/shared';
 import ButtonLink from '../button-link/button-link.jsx';
 import DesktopWrapper from '../desktop-wrapper/desktop-wrapper.jsx';
 import MobileWrapper from '../mobile-wrapper/mobile-wrapper.jsx';
-import Text from '../text/text.jsx';
+import Text from '../text/text';
 
 const PageError = ({
     buttonOnClick,

packages/components/src/components/popover-mobile/popover-mobile.jsx

@@ -5,7 +5,7 @@ import { isMobile } from '@deriv/shared';
 import Modal from '../modal/modal.jsx';
 import Button from '../button/button.jsx';
 import Popover from '../popover/popover.jsx';
-import Text from '../text/text.jsx';
+import Text from '../text/text';
 import './popover-mobile.scss';
 
 const PopoverMobile = ({

packages/components/src/components/popup/popup-overlay.jsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import Button from '../button/button.jsx';
-import Text from '../text/text.jsx';
+import Text from '../text/text';
 
 const PopupOverlay = ({ title, descriptions, overlay_ref, toggleOverlay, done_text }) =>
     createPortal(

packages/components/src/components/select-native/select-native.jsx

@@ -2,8 +2,8 @@ import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Field from '../field/field.jsx';
+import Text from '../text/text';
 import Icon from '../icon/icon';
-import Text from '../text/text.jsx';
 
 const getDisplayText = (list_items, value) => {
     const dropdown_items = Array.isArray(list_items) ? list_items : [].concat(...Object.values(list_items));

packages/components/src/components/text/index.js → packages/components/src/components/text/index.ts

@@ -1,4 +1,4 @@
-import Text from './text.jsx';
+import Text from './text';
 import './text.scss';
 
 export default Text;

packages/components/src/components/text/text.tsx

@@ -0,0 +1,45 @@
+import classNames from 'classnames';
+import React, { CSSProperties, HTMLProps } from 'react';
+import { isEmptyObject } from '@deriv/shared';
+
+type TTextProps = Omit<HTMLProps<HTMLElement>, 'size'> & {
+    align?: string;
+    weight?: string;
+    line_height?: string;
+    styles?: CSSProperties;
+    size: string;
+};
+const Text = ({
+    children,
+    size = 's',
+    color = 'general',
+    align = 'left',
+    weight = 'normal',
+    line_height = 'm',
+    as,
+    className,
+    styles,
+    ...props
+}: TTextProps) => {
+    const class_styles = {
+        '--text-size': `var(--text-size-${size})`,
+        '--text-color': `var(--text-${color})`,
+        '--text-lh': `var(--text-lh-${line_height})`,
+        '--text-weight': `var(--text-weight-${weight})`,
+        '--text-align': `var(--text-align-${align})`,
+    };
+    const [style, setStyle] = React.useState(class_styles);
+    React.useEffect(() => {
+        if (!isEmptyObject(styles)) {
+            const combined_style = { ...class_styles, ...styles };
+            setStyle(combined_style);
+        } else {
+            setStyle(class_styles);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [size, color, line_height, weight, align]);
+    const class_names = classNames('dc-text', className);
+    return React.createElement(as || 'span', { className: class_names, style, ...props }, children);
+};
+
+export default Text;