Skip to content

Commit 396b2e8

Browse files
thisyahlen-derivthisyahlen-deriv
authored
thisyahlen/TRAH-2986/chore: replace clsx with tailwind-merge (deriv-com#13700)
* chore: replace clsx with tailwind-merge * chore: unkomen * chore: untrue
1 parent f7261b1 commit 396b2e8

File tree

30 files changed

+69
-70
lines changed

30 files changed

+69
-70
lines changed

‎packages/tradershub/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
"react-i18next": "^11.11.0",
3939
"react-router-dom": "^5.2.0",
4040
"react-transition-group": "4.4.2",
41+
"tailwind-merge": "^1.14.0",
4142
"usehooks-ts": "^2.7.0",
4243
"yup": "^0.32.11"
4344
},

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

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { ComponentProps, isValidElement, ReactNode } from 'react';
2-
import { clsx } from 'clsx';
2+
import { twMerge } from 'tailwind-merge';
33
import { Text } from '@deriv-com/ui';
44

55
type TActionScreenProps = {
@@ -29,7 +29,9 @@ const ActionScreen = ({
2929
titleSize = 'md',
3030
}: TActionScreenProps) => {
3131
return (
32-
<div className={clsx('flex flex-col items-center justify-center gap-24 w-auto h-auto rounded-xs', className)}>
32+
<div
33+
className={twMerge('flex flex-col items-center justify-center gap-24 w-auto h-auto rounded-xs', className)}
34+
>
3335
{icon}
3436
<div className='flex flex-col items-center justify-center gap-8'>
3537
{title && (

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { ReactNode } from 'react';
2-
import { clsx } from 'clsx';
2+
import { twMerge } from 'tailwind-merge';
33

44
type TAppContainerProps = {
55
children: ReactNode;
@@ -13,7 +13,7 @@ type TAppContainerProps = {
1313
*/
1414

1515
const AppContainer = ({ children, className }: TAppContainerProps) => (
16-
<div className={clsx('font-sans max-w-[600px] lg:max-w-[1440px] mx-auto lg:py-50 lg:px-0 ', className)}>
16+
<div className={twMerge('font-sans max-w-[600px] lg:max-w-[1440px] mx-auto lg:py-50 lg:px-0 ', className)}>
1717
{children}
1818
</div>
1919
);

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { FC, PropsWithChildren } from 'react';
2-
import { clsx } from 'clsx';
2+
import { twMerge } from 'tailwind-merge';
33

44
type TButtonGroupProps = { className?: string };
55

@@ -13,7 +13,7 @@ type TButtonGroupProps = { className?: string };
1313
*/
1414

1515
const ButtonGroup: FC<PropsWithChildren<TButtonGroupProps>> = ({ children, className }) => (
16-
<div className={clsx('flex flex-col align-center gap-8 lg:flex-row ', className)}> {children}</div>
16+
<div className={twMerge('flex flex-col align-center gap-8 lg:flex-row ', className)}> {children}</div>
1717
);
1818

1919
export default ButtonGroup;

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { Fragment } from 'react';
2-
import { clsx } from 'clsx';
32
import { useHistory } from 'react-router-dom';
3+
import { twMerge } from 'tailwind-merge';
44
import { StaticLink, TitleDescriptionLoader } from '@/components';
55
import { useRegulationFlags } from '@/hooks';
66
import { useIsEuRegion } from '@deriv/api';
@@ -15,7 +15,7 @@ const CompareAccountsButton = ({ className }: { className?: string }) => {
1515

1616
return (
1717
<Button
18-
className={clsx('no-underline', className)}
18+
className={twMerge('no-underline', className)}
1919
color='primary'
2020
onClick={() => history.push('/traders-hub/compare-accounts')}
2121
size='sm'

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useCallback, useEffect, useRef, useState } from 'react';
2-
import { clsx } from 'clsx';
2+
import { twMerge } from 'tailwind-merge';
33
import { useOnClickOutside } from 'usehooks-ts';
44
import { useUIContext } from '@/components';
55
import { useActiveTradingAccount, useAuthorize, useTradingAccountsList } from '@deriv/api';
@@ -66,7 +66,7 @@ const DemoRealSwitcher = () => {
6666
return (
6767
<div className='relative inline-block w-auto ' ref={ref}>
6868
<Button
69-
className={clsx(
69+
className={twMerge(
7070
'cursor-pointer w-full py-2 px-6 border-1 border-solid rounded-xs',
7171
value === 'demo' ? 'border-status-light-information' : 'border-status-light-success '
7272
)}
@@ -76,7 +76,7 @@ const DemoRealSwitcher = () => {
7676
>
7777
<div className='flex items-center'>
7878
<Text
79-
className={clsx(
79+
className={twMerge(
8080
value === 'demo' ? 'text-status-light-information' : 'text-status-light-success'
8181
)}
8282
size='xs'
@@ -85,7 +85,7 @@ const DemoRealSwitcher = () => {
8585
{label}
8686
</Text>
8787
<LabelPairedChevronDownSmRegularIcon
88-
className={clsx(
88+
className={twMerge(
8989
'transform transition duration-200 ease-in-out ml-8',
9090
value === 'demo' ? 'fill-status-light-information' : 'fill-status-light-success',
9191
isDropdownOpen && '-rotate-180'
@@ -97,7 +97,7 @@ const DemoRealSwitcher = () => {
9797
<div className='absolute z-10 items-center w-full top-28 rounded-xs bg-system-light-primary-background shadow-10'>
9898
{accountTypes.map(account => (
9999
<div
100-
className={clsx(
100+
className={twMerge(
101101
'cursor-pointer hover:bg-system-light-hover-background rounded-xs',
102102
account.value === value && 'bg-system-light-active-background'
103103
)}

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { ReactElement } from 'react';
2-
import { clsx } from 'clsx';
2+
import { twMerge } from 'tailwind-merge';
33
import { useEventListener } from 'usehooks-ts';
44
import { Provider } from '@deriv/library';
55
import DialogAction from './DialogAction';
@@ -55,7 +55,7 @@ const Dialog = ({ children, className, shouldPreventCloseOnEscape = false }: TDi
5555

5656
return (
5757
<div
58-
className={clsx(
58+
className={twMerge(
5959
'flex flex-col gap-24 mx-auto w-[auto] p-24 bg-system-light-primary-background rounded-default',
6060
className
6161
)}

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { ReactNode } from 'react';
2-
import { clsx } from 'clsx';
2+
import { twMerge } from 'tailwind-merge';
33
import { DialogActionClass, DialogActionProps } from './Dialog.classnames';
44

55
/**
@@ -18,7 +18,7 @@ export interface TDialogActions extends DialogActionProps {
1818
* @returns {JSX.Element} The DialogAction component.
1919
*/
2020
const DialogAction = ({ align, children, className }: TDialogActions) => (
21-
<div className={clsx(DialogActionClass({ align }), className)}>{children}</div>
21+
<div className={twMerge(DialogActionClass({ align }), className)}>{children}</div>
2222
);
2323

2424
export default DialogAction;

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { ComponentProps } from 'react';
2-
import { clsx } from 'clsx';
2+
import { twMerge } from 'tailwind-merge';
33
import CloseIcon from '@/assets/svgs/ic-close-dark.svg';
44
import { Provider } from '@deriv/library';
55
import { Text } from '@deriv-com/ui';
@@ -27,7 +27,7 @@ const DialogHeader = ({ className, titleSize, hideCloseButton = false, title }:
2727
const { hide } = Provider.useModal();
2828

2929
return (
30-
<div className={clsx('flex items-start', title ? 'justify-between' : 'justify-end', className)}>
30+
<div className={twMerge('flex items-start', title ? 'justify-between' : 'justify-end', className)}>
3131
{title && (
3232
<Text className='flex-1' size={titleSize} weight='bold'>
3333
{title}

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { PropsWithChildren, ReactElement } from 'react';
2-
import { clsx } from 'clsx';
2+
import { twMerge } from 'tailwind-merge';
33
import ModalContent from './ModalContent';
44
import ModalFooter from './ModalFooter';
55
import ModalHeader from './ModalHeader';
@@ -46,7 +46,7 @@ export type TModalComponents = PropsWithChildren<{
4646
const Modal = ({ children, className }: TModal) => {
4747
return (
4848
<div
49-
className={clsx(
49+
className={twMerge(
5050
'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',
5151
className
5252
)}

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { clsx } from 'clsx';
2+
import { twMerge } from 'tailwind-merge';
33
import { TModalComponents } from './Modal';
44

55
/**
@@ -10,7 +10,7 @@ import { TModalComponents } from './Modal';
1010
* @returns {JSX.Element} The ModalContent component.
1111
*/
1212
const ModalContent = ({ children, className }: TModalComponents) => (
13-
<div className={clsx('flex-grow overflow-y-auto p-0 sm:p-8 lg:flex-none', className)}>{children}</div>
13+
<div className={twMerge('flex-grow overflow-y-auto p-0 sm:p-8 lg:flex-none', className)}>{children}</div>
1414
);
1515

1616
export default ModalContent;

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { clsx } from 'clsx';
2+
import { twMerge } from 'tailwind-merge';
33
import { TModalComponents } from './Modal';
44
import { ModalFooterClass, TModalFooterClass } from './Modal.classnames';
55

@@ -20,7 +20,7 @@ type TModalFooter = TModalComponents & TModalFooterClass;
2020
* @returns {JSX.Element} The ModalFooter component.
2121
*/
2222
const ModalFooter = ({ align = 'right', children, className }: TModalFooter) => (
23-
<div className={clsx(ModalFooterClass({ align }), className)}>{children}</div>
23+
<div className={twMerge(ModalFooterClass({ align }), className)}>{children}</div>
2424
);
2525

2626
export default ModalFooter;

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { ComponentProps } from 'react';
2-
import { clsx } from 'clsx';
2+
import { twMerge } from 'tailwind-merge';
33
import CloseIcon from '@/assets/svgs/ic-close-dark.svg';
44
import { Provider } from '@deriv/library';
55
import { Text } from '@deriv-com/ui';
@@ -30,14 +30,14 @@ const ModalHeader = ({ className, hideCloseButton = false, title, titleClassName
3030

3131
return (
3232
<div
33-
className={clsx(
33+
className={twMerge(
3434
'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',
3535
title ? 'justify-between' : 'justify-end',
3636
className
3737
)}
3838
>
3939
{title && (
40-
<Text className={clsx('flex-1 font-sans', titleClassName)} size={titleSize} weight='bold'>
40+
<Text className={twMerge('flex-1 font-sans', titleClassName)} size={titleSize} weight='bold'>
4141
{title}
4242
</Text>
4343
)}

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React from 'react';
2-
import { clsx } from 'clsx';
2+
import { twMerge } from 'tailwind-merge';
33
import { desktopStyle, mobileStyle } from './ProgressBar.classnames';
44

55
const StepConnector = ({ isActive }: { isActive?: boolean }) => (
66
<div
77
aria-current={isActive}
8-
className={clsx(
8+
className={twMerge(
99
'via-solid-grey-default to-solid-grey-default from-solid-coral-700 from-50% via-50% transition-all duration-700 ease-out',
1010
mobileStyle.connector,
1111
desktopStyle.connector

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { clsx } from 'clsx';
2+
import { twMerge } from 'tailwind-merge';
33
import { StandaloneCheckBoldIcon } from '@deriv/quill-icons';
44
import { Text } from '@deriv-com/ui';
55
import { desktopStyle, stepperVariants } from './ProgressBar.classnames';
@@ -15,7 +15,7 @@ type TStepperProps = {
1515
};
1616

1717
const Stepper = ({ isActive, isFilled = false, step, stepCount }: TStepperProps) => (
18-
<div aria-current={isActive} className={clsx('relative items-center', desktopStyle.stepper)}>
18+
<div aria-current={isActive} className={twMerge('relative items-center', desktopStyle.stepper)}>
1919
<div className='flex flex-col items-center self-center'>
2020
{stepCount !== 0 && <StepConnector isActive={isActive} />}
2121
<span className={stepperVariants({ isActive, isFilled })}>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { AnchorHTMLAttributes, ReactNode } from 'react';
2-
import { clsx } from 'clsx';
2+
import { twMerge } from 'tailwind-merge';
33
import { getStaticUrl } from '../../helpers/urls';
44

55
type StaticLinkProps = {
@@ -23,7 +23,7 @@ type StaticLinkProps = {
2323
const StaticLink = ({ children, className, href, staticUrl, onClick }: StaticLinkProps) => {
2424
return (
2525
<a
26-
className={clsx('underline text-brand-coral py-0 px-4 underline-offset-2', className)}
26+
className={twMerge('underline text-brand-coral py-0 px-4 underline-offset-2', className)}
2727
href={href ?? (staticUrl ? getStaticUrl(staticUrl) : '#')}
2828
onClick={onClick}
2929
rel='noopener noreferrer'

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { ReactNode } from 'react';
2-
import { clsx } from 'clsx';
2+
import { twMerge } from 'tailwind-merge';
33
import { Text } from '@deriv-com/ui';
44
import { TooltipClass, TooltipPointerClass } from './Tooltip.classnames';
55

@@ -36,8 +36,8 @@ const Tooltip = ({ alignment = 'bottom', children, className, message }: TToolti
3636
<div className='relative w-max h-max group z-1'>
3737
<div className='border rounded-md border-neutral-12'>{children}</div>
3838

39-
<div className={clsx(TooltipClass({ alignment }), className)}>
40-
<div className={clsx(TooltipPointerClass({ alignment }), className)} />
39+
<div className={twMerge(TooltipClass({ alignment }), className)}>
40+
<div className={twMerge(TooltipPointerClass({ alignment }), className)} />
4141

4242
<span className='p-4 rounded-md bg-system-light-active-background '>
4343
<Text size='sm'>{message}</Text>

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

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

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

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

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { clsx } from 'clsx';
2+
import { twMerge } from 'tailwind-merge';
33
import { LabelPairedChevronLeftMdRegularIcon, LabelPairedChevronRightMdRegularIcon } from '@deriv/quill-icons';
44
import { Button } from '@deriv-com/ui';
55

@@ -11,7 +11,7 @@ type TPrevNextButtonProps = {
1111

1212
const CFDCompareAccountsCarouselButton = ({ enabled, isNext = false, onClick }: TPrevNextButtonProps) => (
1313
<Button
14-
className={clsx(
14+
className={twMerge(
1515
'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',
1616
isNext && 'right-16',
1717
!isNext && 'left-16'

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
2-
import { clsx } from 'clsx';
2+
import { twMerge } from 'tailwind-merge';
3+
import { TPlatforms } from '@/types';
34
import { Text } from '@deriv-com/ui';
4-
import { TPlatforms } from '../../../../types';
55
import {
66
CompareAccountsPlatformLabelClass,
77
CompareAccountsPlatformLabelTextColorClass,
@@ -20,14 +20,14 @@ const CompareAccountsPlatformLabel = ({ platform }: TCompareAccountsPlatformLabe
2020

2121
return (
2222
<div
23-
className={clsx(
23+
className={twMerge(
2424
CompareAccountsPlatformLabelClass({
2525
background: platformType,
2626
} as unknown as TCompareAccountsPlatformLabelClassProps)
2727
)}
2828
>
2929
<Text
30-
className={clsx(
30+
className={twMerge(
3131
CompareAccountsPlatformLabelTextColorClass({
3232
label: platformType,
3333
} as unknown as TCompareAccountsPlatformLabelTextClassProps)

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { clsx } from 'clsx';
2+
import { twMerge } from 'tailwind-merge';
33
import { THooks, TPlatforms } from '../../../../types';
44
import { getHighlightedIconLabel } from './CompareAccountsConfig';
55
import InstrumentsIconWithLabel from './InstrumentsIconWithLabel';
@@ -23,7 +23,7 @@ const InstrumentsLabelHighlighted = ({
2323

2424
return (
2525
<div
26-
className={clsx(
26+
className={twMerge(
2727
'flex flex-col rounded-24 pt-[70px] px-[15px] pb-0 lg:pt-40 lg:px-18 lg:pb-0',
2828
isDemo && 'pt-16'
2929
)}

0 commit comments

Comments
 (0)