thisyahlen/TRAH-2986/chore: replace clsx with tailwind-merge (deriv-c…

…om#13700)

* chore: replace clsx with tailwind-merge

* chore: unkomen

* chore: untrue

packages/tradershub/package.json

@@ -38,6 +38,7 @@
         "react-i18next": "^11.11.0",
         "react-router-dom": "^5.2.0",
         "react-transition-group": "4.4.2",
+        "tailwind-merge": "^1.14.0",
         "usehooks-ts": "^2.7.0",
         "yup": "^0.32.11"
     },

packages/tradershub/src/components/ActionScreen/ActionScreen.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentProps, isValidElement, ReactNode } from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { Text } from '@deriv-com/ui';
 
 type TActionScreenProps = {
@@ -29,7 +29,9 @@ const ActionScreen = ({
     titleSize = 'md',
 }: TActionScreenProps) => {
     return (
-        <div className={clsx('flex flex-col items-center justify-center gap-24 w-auto h-auto rounded-xs', className)}>
+        <div
+            className={twMerge('flex flex-col items-center justify-center gap-24 w-auto h-auto rounded-xs', className)}
+        >
             {icon}
             <div className='flex flex-col items-center justify-center gap-8'>
                 {title && (

packages/tradershub/src/components/AppContainer/AppContainer.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 type TAppContainerProps = {
     children: ReactNode;
@@ -13,7 +13,7 @@ type TAppContainerProps = {
  */
 
 const AppContainer = ({ children, className }: TAppContainerProps) => (
-    <div className={clsx('font-sans max-w-[600px] lg:max-w-[1440px] mx-auto lg:py-50 lg:px-0 ', className)}>
+    <div className={twMerge('font-sans max-w-[600px] lg:max-w-[1440px] mx-auto lg:py-50 lg:px-0 ', className)}>
         {children}
     </div>
 );

packages/tradershub/src/components/ButtonGroup/ButtonGroup.tsx

@@ -1,5 +1,5 @@
 import React, { FC, PropsWithChildren } from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 type TButtonGroupProps = { className?: string };
 
@@ -13,7 +13,7 @@ type TButtonGroupProps = { className?: string };
  */
 
 const ButtonGroup: FC<PropsWithChildren<TButtonGroupProps>> = ({ children, className }) => (
-    <div className={clsx('flex flex-col align-center gap-8 lg:flex-row ', className)}> {children}</div>
+    <div className={twMerge('flex flex-col align-center gap-8 lg:flex-row ', className)}> {children}</div>
 );
 
 export default ButtonGroup;

packages/tradershub/src/components/CFDSection/CFDHeading/CFDHeading.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
-import { clsx } from 'clsx';
 import { useHistory } from 'react-router-dom';
+import { twMerge } from 'tailwind-merge';
 import { StaticLink, TitleDescriptionLoader } from '@/components';
 import { useRegulationFlags } from '@/hooks';
 import { useIsEuRegion } from '@deriv/api';
@@ -15,7 +15,7 @@ const CompareAccountsButton = ({ className }: { className?: string }) => {
 
     return (
         <Button
-            className={clsx('no-underline', className)}
+            className={twMerge('no-underline', className)}
             color='primary'
             onClick={() => history.push('/traders-hub/compare-accounts')}
             size='sm'

packages/tradershub/src/components/DemoRealSwitcher/DemoRealSwitcher.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { useOnClickOutside } from 'usehooks-ts';
 import { useUIContext } from '@/components';
 import { useActiveTradingAccount, useAuthorize, useTradingAccountsList } from '@deriv/api';
@@ -66,7 +66,7 @@ const DemoRealSwitcher = () => {
     return (
         <div className='relative inline-block w-auto ' ref={ref}>
             <Button
-                className={clsx(
+                className={twMerge(
                     'cursor-pointer w-full py-2 px-6 border-1 border-solid rounded-xs',
                     value === 'demo' ? 'border-status-light-information' : 'border-status-light-success '
                 )}
@@ -76,7 +76,7 @@ const DemoRealSwitcher = () => {
             >
                 <div className='flex items-center'>
                     <Text
-                        className={clsx(
+                        className={twMerge(
                             value === 'demo' ? 'text-status-light-information' : 'text-status-light-success'
                         )}
                         size='xs'
@@ -85,7 +85,7 @@ const DemoRealSwitcher = () => {
                         {label}
                     </Text>
                     <LabelPairedChevronDownSmRegularIcon
-                        className={clsx(
+                        className={twMerge(
                             'transform transition duration-200 ease-in-out ml-8',
                             value === 'demo' ? 'fill-status-light-information' : 'fill-status-light-success',
                             isDropdownOpen && '-rotate-180'
@@ -97,7 +97,7 @@ const DemoRealSwitcher = () => {
                 <div className='absolute z-10 items-center w-full top-28 rounded-xs bg-system-light-primary-background shadow-10'>
                     {accountTypes.map(account => (
                         <div
-                            className={clsx(
+                            className={twMerge(
                                 'cursor-pointer hover:bg-system-light-hover-background rounded-xs',
                                 account.value === value && 'bg-system-light-active-background'
                             )}

packages/tradershub/src/components/Dialog/Dialog.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { useEventListener } from 'usehooks-ts';
 import { Provider } from '@deriv/library';
 import DialogAction from './DialogAction';
@@ -55,7 +55,7 @@ const Dialog = ({ children, className, shouldPreventCloseOnEscape = false }: TDi
 
     return (
         <div
-            className={clsx(
+            className={twMerge(
                 'flex flex-col gap-24 mx-auto w-[auto] p-24 bg-system-light-primary-background rounded-default',
                 className
             )}

packages/tradershub/src/components/Dialog/DialogAction.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { DialogActionClass, DialogActionProps } from './Dialog.classnames';
 
 /**
@@ -18,7 +18,7 @@ export interface TDialogActions extends DialogActionProps {
  * @returns {JSX.Element} The DialogAction component.
  */
 const DialogAction = ({ align, children, className }: TDialogActions) => (
-    <div className={clsx(DialogActionClass({ align }), className)}>{children}</div>
+    <div className={twMerge(DialogActionClass({ align }), className)}>{children}</div>
 );
 
 export default DialogAction;

packages/tradershub/src/components/Dialog/DialogHeader.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentProps } from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import CloseIcon from '@/assets/svgs/ic-close-dark.svg';
 import { Provider } from '@deriv/library';
 import { Text } from '@deriv-com/ui';
@@ -27,7 +27,7 @@ const DialogHeader = ({ className, titleSize, hideCloseButton = false, title }:
     const { hide } = Provider.useModal();
 
     return (
-        <div className={clsx('flex items-start', title ? 'justify-between' : 'justify-end', className)}>
+        <div className={twMerge('flex items-start', title ? 'justify-between' : 'justify-end', className)}>
             {title && (
                 <Text className='flex-1' size={titleSize} weight='bold'>
                     {title}

packages/tradershub/src/components/Modal/Modal.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, ReactElement } from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import ModalContent from './ModalContent';
 import ModalFooter from './ModalFooter';
 import ModalHeader from './ModalHeader';
@@ -46,7 +46,7 @@ export type TModalComponents = PropsWithChildren<{
 const Modal = ({ children, className }: TModal) => {
     return (
         <div
-            className={clsx(
+            className={twMerge(
                 'flex flex-col h-[calc(100vh-40px)] w-screen bg-system-light-primary-background lg:mx-auto lg:h-full lg:w-full lg:rounded-default',
                 className
             )}

packages/tradershub/src/components/Modal/ModalContent.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { TModalComponents } from './Modal';
 
 /**
@@ -10,7 +10,7 @@ import { TModalComponents } from './Modal';
  * @returns {JSX.Element} The ModalContent component.
  */
 const ModalContent = ({ children, className }: TModalComponents) => (
-    <div className={clsx('flex-grow overflow-y-auto p-0 sm:p-8 lg:flex-none', className)}>{children}</div>
+    <div className={twMerge('flex-grow overflow-y-auto p-0 sm:p-8 lg:flex-none', className)}>{children}</div>
 );
 
 export default ModalContent;

packages/tradershub/src/components/Modal/ModalFooter.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { TModalComponents } from './Modal';
 import { ModalFooterClass, TModalFooterClass } from './Modal.classnames';
 
@@ -20,7 +20,7 @@ type TModalFooter = TModalComponents & TModalFooterClass;
  * @returns {JSX.Element} The ModalFooter component.
  */
 const ModalFooter = ({ align = 'right', children, className }: TModalFooter) => (
-    <div className={clsx(ModalFooterClass({ align }), className)}>{children}</div>
+    <div className={twMerge(ModalFooterClass({ align }), className)}>{children}</div>
 );
 
 export default ModalFooter;

packages/tradershub/src/components/Modal/ModalHeader.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentProps } from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import CloseIcon from '@/assets/svgs/ic-close-dark.svg';
 import { Provider } from '@deriv/library';
 import { Text } from '@deriv-com/ui';
@@ -30,14 +30,14 @@ const ModalHeader = ({ className, hideCloseButton = false, title, titleClassName
 
     return (
         <div
-            className={clsx(
+            className={twMerge(
                 'flex items-center pl-16 pr-24 py-16 lg:px-24 border border-solid border-b-2 border-system-light-secondary-background w-full rounded-t-default',
                 title ? 'justify-between' : 'justify-end',
                 className
             )}
         >
             {title && (
-                <Text className={clsx('flex-1 font-sans', titleClassName)} size={titleSize} weight='bold'>
+                <Text className={twMerge('flex-1 font-sans', titleClassName)} size={titleSize} weight='bold'>
                     {title}
                 </Text>
             )}

packages/tradershub/src/components/ProgressBar/StepConnector.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { desktopStyle, mobileStyle } from './ProgressBar.classnames';
 
 const StepConnector = ({ isActive }: { isActive?: boolean }) => (
     <div
         aria-current={isActive}
-        className={clsx(
+        className={twMerge(
             'via-solid-grey-default to-solid-grey-default from-solid-coral-700 from-50% via-50% transition-all duration-700 ease-out',
             mobileStyle.connector,
             desktopStyle.connector

packages/tradershub/src/components/ProgressBar/Stepper.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { StandaloneCheckBoldIcon } from '@deriv/quill-icons';
 import { Text } from '@deriv-com/ui';
 import { desktopStyle, stepperVariants } from './ProgressBar.classnames';
@@ -15,7 +15,7 @@ type TStepperProps = {
 };
 
 const Stepper = ({ isActive, isFilled = false, step, stepCount }: TStepperProps) => (
-    <div aria-current={isActive} className={clsx('relative items-center', desktopStyle.stepper)}>
+    <div aria-current={isActive} className={twMerge('relative items-center', desktopStyle.stepper)}>
         <div className='flex flex-col items-center self-center'>
             {stepCount !== 0 && <StepConnector isActive={isActive} />}
             <span className={stepperVariants({ isActive, isFilled })}>

packages/tradershub/src/components/StaticLink/StaticLink.tsx

@@ -1,5 +1,5 @@
 import React, { AnchorHTMLAttributes, ReactNode } from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { getStaticUrl } from '../../helpers/urls';
 
 type StaticLinkProps = {
@@ -23,7 +23,7 @@ type StaticLinkProps = {
 const StaticLink = ({ children, className, href, staticUrl, onClick }: StaticLinkProps) => {
     return (
         <a
-            className={clsx('underline text-brand-coral py-0 px-4 underline-offset-2', className)}
+            className={twMerge('underline text-brand-coral py-0 px-4 underline-offset-2', className)}
             href={href ?? (staticUrl ? getStaticUrl(staticUrl) : '#')}
             onClick={onClick}
             rel='noopener noreferrer'

packages/tradershub/src/components/Tooltip/Tooltip.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { Text } from '@deriv-com/ui';
 import { TooltipClass, TooltipPointerClass } from './Tooltip.classnames';
 
@@ -36,8 +36,8 @@ const Tooltip = ({ alignment = 'bottom', children, className, message }: TToolti
         <div className='relative w-max h-max group z-1'>
             <div className='border rounded-md border-neutral-12'>{children}</div>
 
-            <div className={clsx(TooltipClass({ alignment }), className)}>
-                <div className={clsx(TooltipPointerClass({ alignment }), className)} />
+            <div className={twMerge(TooltipClass({ alignment }), className)}>
+                <div className={twMerge(TooltipPointerClass({ alignment }), className)} />
 
                 <span className='p-4 rounded-md bg-system-light-active-background '>
                     <Text size='sm'>{message}</Text>

packages/tradershub/src/components/TotalAssets/TotalAssets.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { TotalAssetsLoader } from '@/components';
 import { useTotalAssets } from '@/hooks';
 import { useActiveTradingAccount } from '@deriv/api';
@@ -18,7 +18,7 @@ const TotalAssets = () => {
             {isDesktop && <Text size='sm'>Total assets</Text>}
             <Text
                 as='p'
-                className={clsx(
+                className={twMerge(
                     'underline text-status-light-information decoration-dotted decoration-system-light-less-prominent-text underline-offset-8 flex flex-col items-end text-4xl',
                     !activeTrading?.is_virtual && 'text-status-light-success'
                 )}

packages/tradershub/src/components/TradingAccountsList/TradingAccountsList.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { IconToCurrencyMapper } from '@/constants';
 import { useRegulationFlags } from '@/hooks';
 import { useActiveTradingAccount, useAuthorize, useTradingAccountsList } from '@deriv/api';
@@ -22,7 +22,7 @@ const TradingAccountsList = () => {
                         const iconCurrency = account.currency ?? 'USD';
                         return (
                             <button
-                                className={clsx(
+                                className={twMerge(
                                     'flex items-center self-stretch py-8 px-16 gap-16 rounded-xs cursor-pointer hover:bg-system-light-active-background',
                                     activeAccount?.loginid === account.loginid && 'bg-system-light-active-background'
                                 )}

packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { LabelPairedChevronLeftMdRegularIcon, LabelPairedChevronRightMdRegularIcon } from '@deriv/quill-icons';
 import { Button } from '@deriv-com/ui';
 
@@ -11,7 +11,7 @@ type TPrevNextButtonProps = {
 
 const CFDCompareAccountsCarouselButton = ({ enabled, isNext = false, onClick }: TPrevNextButtonProps) => (
     <Button
-        className={clsx(
+        className={twMerge(
             'bg-system-light-primary-background z-10 absolute lg:flex items-center justify-center top-1/2 cursor-pointer w-40 h-40 rounded-[50%] border-solid-coral-100 border-solid border-1 disabled:opacity-8 disabled:hidden',
             isNext && 'right-16',
             !isNext && 'left-16'

packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsPlatformLabel.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { TPlatforms } from '@/types';
 import { Text } from '@deriv-com/ui';
-import { TPlatforms } from '../../../../types';
 import {
     CompareAccountsPlatformLabelClass,
     CompareAccountsPlatformLabelTextColorClass,
@@ -20,14 +20,14 @@ const CompareAccountsPlatformLabel = ({ platform }: TCompareAccountsPlatformLabe
 
     return (
         <div
-            className={clsx(
+            className={twMerge(
                 CompareAccountsPlatformLabelClass({
                     background: platformType,
                 } as unknown as TCompareAccountsPlatformLabelClassProps)
             )}
         >
             <Text
-                className={clsx(
+                className={twMerge(
                     CompareAccountsPlatformLabelTextColorClass({
                         label: platformType,
                     } as unknown as TCompareAccountsPlatformLabelTextClassProps)

packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/InstrumentsLabelHighlighted.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { THooks, TPlatforms } from '../../../../types';
 import { getHighlightedIconLabel } from './CompareAccountsConfig';
 import InstrumentsIconWithLabel from './InstrumentsIconWithLabel';
@@ -23,7 +23,7 @@ const InstrumentsLabelHighlighted = ({
 
     return (
         <div
-            className={clsx(
+            className={twMerge(
                 'flex flex-col rounded-24 pt-[70px] px-[15px] pb-0 lg:pt-40 lg:px-18 lg:pb-0',
                 isDemo && 'pt-16'
             )}