Skip to content

Commit 010c5f4

Browse files
alecananianalecananian
committed
react: remove tailwind-merge dependency
1 parent 0b6a789 commit 010c5f4

16 files changed

+266
-258
lines changed

‎.changeset/famous-glasses-sleep.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@treasure-dev/tdk-react": minor
3+
---
4+
5+
Removed `tailwind-merge` dependency for ~70Kb savings in gzipped package

‎packages/react/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,12 +45,12 @@
4545
"@radix-ui/react-visually-hidden": "catalog:",
4646
"@treasure-dev/tdk-core": "workspace:*",
4747
"@treasure-dev/launcher": "workspace:*",
48+
"class-variance-authority": "catalog:",
4849
"clsx": "catalog:",
4950
"i18next": "catalog:",
5051
"i18next-browser-languagedetector": "catalog:",
5152
"input-otp": "catalog:",
52-
"react-i18next": "catalog:",
53-
"tailwind-merge": "catalog:"
53+
"react-i18next": "catalog:"
5454
},
5555
"devDependencies": {
5656
"@storybook/addon-essentials": "catalog:",

‎packages/react/src/components/connect/ConnectButtonAuthenticatedView.tsx‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1+
import clsx from "clsx";
12
import type { ButtonHTMLAttributes } from "react";
23

3-
import { cn } from "../../utils/classnames";
4-
import { Button } from "../ui/Button";
54
import { UserAvatar } from "../user/UserAvatar";
65
import { UserDisplayName } from "../user/UserDisplayName";
76

@@ -19,22 +18,20 @@ export const ConnectButtonAuthenticatedView = ({
1918
...buttonProps
2019
}: Props) => {
2120
return (
22-
<Button
23-
variant="tertiary"
24-
className={cn(
25-
"tdk-px-2 tdk-flex tdk-items-center tdk-gap-1.5 tdk-bg-night-700 tdk-border tdk-border-night-500",
21+
<button
22+
type="button"
23+
className={clsx(
24+
"tdk-min-h-9 tdk-flex tdk-items-center tdk-gap-1.5 tdk-px-2 tdk-py-1 tdk-rounded-lg tdk-text-sm tdk-text-cream tdk-bg-night-700 tdk-border tdk-border-solid tdk-border-night-500 hover:tdk-border-night-200 hover:tdk-bg-night-300 active:tdk-border-night-400 active:tdk-bg-night-600 tdk-transition-colors",
2625
className,
2726
)}
2827
{...buttonProps}
2928
>
30-
<span className="tdk-flex tdk-items-center tdk-gap-1.5">
31-
<UserAvatar
32-
address={address}
33-
pfp={pfp}
34-
className="tdk-w-6 tdk-h-6 tdk-rounded-lg"
35-
/>
36-
<UserDisplayName address={address} tag={tag} />
37-
</span>
38-
</Button>
29+
<UserAvatar
30+
address={address}
31+
pfp={pfp}
32+
className="tdk-w-6 tdk-h-6 tdk-rounded-lg"
33+
/>
34+
<UserDisplayName address={address} tag={tag} />
35+
</button>
3936
);
4037
};

‎packages/react/src/components/connect/ConnectMethodSelectionView.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@ import {
33
DEFAULT_TDK_APP_ICON_URI,
44
DEFAULT_TDK_APP_NAME,
55
} from "@treasure-dev/tdk-core";
6+
import clsx from "clsx";
67
import { type ButtonHTMLAttributes, useRef, useState } from "react";
7-
88
import { Trans, useTranslation } from "react-i18next";
9+
910
import { AppleIcon } from "../../icons/AppleIcon";
1011
import { DiscordIcon } from "../../icons/DiscordIcon";
1112
import { GoogleIcon } from "../../icons/GoogleIcon";
1213
import { PasskeyIcon } from "../../icons/PasskeyIcon";
1314
import { WalletIcon } from "../../icons/WalletIcon";
1415
import { XIcon } from "../../icons/XIcon";
15-
import { cn } from "../../utils/classnames";
1616
import { Button } from "../ui/Button";
1717
import { ConnectFooter } from "./ConnectFooter";
1818

@@ -131,7 +131,7 @@ export const ConnectMethodSelectionView = ({
131131
</ConnectMethodButton>
132132
{!disablePasskey ? (
133133
<ConnectMethodButton
134-
className="tdk-flex tdk-items-center tdk-gap-1 tdk-justify-center tdk-py-2 tdk-col-span-full"
134+
className="tdk-py-2 tdk-col-span-full"
135135
onClick={() => onConnect("passkey")}
136136
disabled={isLoading}
137137
>
@@ -141,7 +141,7 @@ export const ConnectMethodSelectionView = ({
141141
) : null}
142142
{!disableWallet ? (
143143
<ConnectMethodButton
144-
className="tdk-flex tdk-items-center tdk-gap-1 tdk-justify-center tdk-py-2 tdk-col-span-full"
144+
className="tdk-py-2 tdk-col-span-full"
145145
onClick={() => onConnect("wallet")}
146146
disabled={isLoading}
147147
>
@@ -162,8 +162,8 @@ const ConnectMethodButton = ({
162162
return (
163163
<button
164164
type="button"
165-
className={cn(
166-
"tdk-flex tdk-items-center tdk-justify-center tdk-bg-night-500 tdk-border tdk-border-solid tdk-border-night-400 tdk-p-3 tdk-text-xs tdk-text-silver-100 tdk-transition-colors tdk-rounded-lg",
165+
className={clsx(
166+
"tdk-flex tdk-items-center tdk-justify-center tdk-gap-1 tdk-bg-night-500 tdk-border tdk-border-solid tdk-border-night-400 tdk-p-3 tdk-text-xs tdk-text-silver-100 tdk-transition-colors tdk-rounded-lg",
167167
props.disabled
168168
? "tdk-opacity-50 tdk-cursor-not-allowed"
169169
: "tdk-cursor-pointer hover:tdk-bg-cream hover:tdk-border-cream hover:tdk-text-night-800",

‎packages/react/src/components/connect/ConnectMigrateUserView.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import type { LegacyProfile } from "@treasure-dev/tdk-core";
2+
import clsx from "clsx";
23
import { useState } from "react";
34
import { useTranslation } from "react-i18next";
45
import { ZERO_ADDRESS } from "thirdweb";
56
import { shortenAddress } from "thirdweb/utils";
67

78
import { TreasureSparklesIcon } from "../../icons/TreasureSparklesIcon";
8-
import { cn } from "../../utils/classnames";
99
import { Button } from "../ui/Button";
1010

1111
type Props = {
@@ -50,10 +50,11 @@ export const ConnectMigrateUserView = ({
5050
<button
5151
key={id}
5252
type="button"
53-
className={cn(
54-
"tdk-relative tdk-px-4 tdk-py-2.5 tdk-rounded-lg tdk-overflow-hidden tdk-cursor-pointer tdk-bg-night-500 tdk-border-2 tdk-border-solid tdk-border-night-200 hover:tdk-border-night-100 tdk-text-left",
55-
id === selectedProfileId &&
56-
"tdk-border-ruby-500/60 hover:tdk-border-ruby-500/60 tdk-shadow",
53+
className={clsx(
54+
"tdk-relative tdk-px-4 tdk-py-2.5 tdk-rounded-lg tdk-overflow-hidden tdk-cursor-pointer tdk-bg-night-500 tdk-border-2 tdk-border-solid tdk-text-left",
55+
id === selectedProfileId
56+
? "tdk-border-ruby-500/60 hover:tdk-border-ruby-500/60 tdk-shadow"
57+
: "tdk-border-night-200 hover:tdk-border-night-100",
5758
)}
5859
onClick={() => setSelectedProfileId(id)}
5960
>
@@ -74,7 +75,7 @@ export const ConnectMigrateUserView = ({
7475
"https://images.treasure.lol/tdk/login/treasure_icon.png"
7576
}
7677
alt=""
77-
className={cn(
78+
className={clsx(
7879
"tdk-w-12 tdk-h-12 tdk-rounded-md tdk-border tdk-border-solid tdk-border-night-200",
7980
!pfp && "tdk-opacity-60",
8081
)}

‎packages/react/src/components/connect/ConnectModal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,14 @@ import {
1010
isSocialConnectMethod,
1111
sendEmailVerificationCode,
1212
} from "@treasure-dev/tdk-core";
13+
import clsx from "clsx";
1314
import { useEffect, useState } from "react";
1415
import { useConnect, useConnectModal } from "thirdweb/react";
1516
import { type Wallet, authenticateWithRedirect } from "thirdweb/wallets";
1617

1718
import { Trans, useTranslation } from "react-i18next";
1819
import { useTreasure } from "../../contexts/treasure";
1920
import { getLocaleId } from "../../i18n";
20-
import { cn } from "../../utils/classnames";
2121
import { getErrorMessage } from "../../utils/error";
2222
import { Dialog, DialogContent, DialogTitle } from "../ui/Dialog";
2323
import {
@@ -350,7 +350,7 @@ export const ConnectModal = ({
350350
return (
351351
<Dialog open={open} onOpenChange={onOpenChange}>
352352
<DialogContent
353-
className={cn(
353+
className={clsx(
354354
size === "lg" && "tdk-max-w-lg",
355355
size === "xl" && "tdk-max-w-xl",
356356
size === "2xl" && "tdk-max-w-2xl",

‎packages/react/src/components/launcher/AccountModal.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
22
import { DEFAULT_TDK_APP_ICON_URI } from "@treasure-dev/tdk-core";
3+
import clsx from "clsx";
34
import { Trans } from "react-i18next";
45
import { MediaRenderer, useWalletImage } from "thirdweb/react";
56
import { shortenAddress } from "thirdweb/utils";
7+
68
import { useTreasure } from "../../contexts/treasure";
7-
import { cn } from "../../utils/classnames";
89
import { Dialog, DialogContent, DialogTitle } from "../ui/Dialog";
910

1011
type Props = {
@@ -34,7 +35,7 @@ export const AccountModal = ({ open, size = "lg", onOpenChange }: Props) => {
3435
return (
3536
<Dialog open={open} onOpenChange={onOpenChange}>
3637
<DialogContent
37-
className={cn(
38+
className={clsx(
3839
size === "lg" && "tdk-max-w-lg",
3940
size === "xl" && "tdk-max-w-xl",
4041
size === "2xl" && "tdk-max-w-2xl",

‎packages/react/src/components/ui/Button.stories.tsx‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,3 @@ export const Secondary: Story = {
3131
variant: "secondary",
3232
},
3333
};
34-
35-
export const Tertiary: Story = {
36-
args: {
37-
variant: "tertiary",
38-
},
39-
};

‎packages/react/src/components/ui/Button.tsx‎

Lines changed: 57 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1+
import { cva } from "class-variance-authority";
2+
import clsx from "clsx";
13
import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from "react";
24

3-
import { cn } from "../../utils/classnames";
45
import { Spinner } from "./Spinner";
56

67
type BaseProps = {
7-
variant?: "primary" | "secondary" | "tertiary";
8+
variant?: "primary" | "secondary";
89
isLoading?: boolean;
910
};
1011

@@ -20,31 +21,48 @@ type AsLinkProps = BaseProps &
2021

2122
type Props = AsButtonProps | AsLinkProps;
2223

24+
const buttonClassName = cva(
25+
[
26+
"tdk-rounded-lg tdk-px-4 tdk-py-1 tdk-transition-colors tdk-text-sm tdk-border tdk-border-solid tdk-min-h-9 disabled:tdk-cursor-not-allowed disabled:tdk-opacity-90",
27+
],
28+
{
29+
variants: {
30+
intent: {
31+
primary: [
32+
"tdk-text-cream tdk-border-ruby-600 tdk-bg-ruby-700 hover:tdk-border-ruby-400 hover:tdk-bg-ruby-500 active:tdk-border-ruby-700 active:tdk-bg-ruby-800 disabled:hover:tdk-border-ruby-600 disabled:hover:tdk-bg-ruby-700",
33+
],
34+
secondary: [
35+
"tdk-text-black tdk-border-honey-400 tdk-bg-honey-500 hover:tdk-border-honey-300 hover:tdk-bg-honey-400 active:tdk-border-honey-500 active:tdk-bg-honey-800 disabled:hover:tdk-border-honey-400 disabled:hover:tdk-bg-honey-500",
36+
],
37+
},
38+
isLoading: {
39+
false: "tdk-cursor-pointer",
40+
true: "tdk-flex tdk-items-center tdk-justify-center tdk-cursor-wait",
41+
},
42+
},
43+
compoundVariants: [
44+
{
45+
intent: "primary",
46+
isLoading: true,
47+
class:
48+
"tdk-border-ruby-700 tdk-bg-ruby-800 hover:tdk-border-ruby-700 hover:tdk-bg-ruby-800",
49+
},
50+
{
51+
intent: "secondary",
52+
isLoading: true,
53+
class:
54+
"tdk-border-honey-500 tdk-bg-honey-800 hover:tdk-border-honey-500 hover:tdk-bg-honey-800",
55+
},
56+
],
57+
defaultVariants: {
58+
intent: "primary",
59+
isLoading: false,
60+
},
61+
},
62+
);
63+
2364
export const Button = (props: Props) => {
2465
const { variant = "primary", isLoading = false } = props;
25-
const className = cn(
26-
"tdk-rounded-lg tdk-px-4 tdk-py-1 tdk-transition-colors tdk-text-sm tdk-border tdk-border-solid tdk-min-h-9",
27-
isLoading
28-
? "tdk-flex tdk-items-center tdk-justify-center tdk-cursor-wait"
29-
: "tdk-cursor-pointer",
30-
variant === "primary" &&
31-
"tdk-text-cream tdk-border-ruby-600 tdk-bg-ruby-700 hover:tdk-border-ruby-400 hover:tdk-bg-ruby-500 active:tdk-border-ruby-700 active:tdk-bg-ruby-800",
32-
variant === "primary" &&
33-
isLoading &&
34-
"tdk-border-ruby-700 tdk-bg-ruby-800 hover:tdk-border-ruby-700 hover:tdk-bg-ruby-800",
35-
variant === "secondary" &&
36-
"tdk-text-black tdk-border-honey-400 tdk-bg-honey-500 hover:tdk-border-honey-300 hover:tdk-bg-honey-400 active:tdk-border-honey-500 active:tdk-bg-honey-800",
37-
variant === "secondary" &&
38-
isLoading &&
39-
"tdk-border-honey-500 tdk-bg-honey-800 hover:tdk-border-honey-500 hover:tdk-bg-honey-800",
40-
variant === "tertiary" &&
41-
"tdk-text-cream tdk-border-night-400 tdk-bg-night-500 hover:tdk-border-night-200 hover:tdk-bg-night-300 active:tdk-border-night-400 active:tdk-bg-night-600",
42-
variant === "tertiary" &&
43-
isLoading &&
44-
"tdk-border-night-400 tdk-bg-night-600 hover:tdk-border-night-400 hover:tdk-bg-night-600",
45-
"disabled:tdk-cursor-not-allowed disabled:tdk-text-cream disabled:tdk-border-night-600 disabled:tdk-bg-night-900",
46-
props.className,
47-
);
4866

4967
const children = isLoading ? (
5068
<Spinner className="tdk-w-3.5 tdk-h-3.5 tdk-mx-auto" />
@@ -55,7 +73,13 @@ export const Button = (props: Props) => {
5573
if (props.as === "link") {
5674
const { as: _, variant: __, isLoading: ___, ...linkProps } = props;
5775
return (
58-
<a {...linkProps} className={className}>
76+
<a
77+
{...linkProps}
78+
className={clsx(
79+
buttonClassName({ intent: variant, isLoading }),
80+
props.className,
81+
)}
82+
>
5983
{children}
6084
</a>
6185
);
@@ -65,7 +89,13 @@ export const Button = (props: Props) => {
6589
return (
6690
<button
6791
{...buttonProps}
68-
className={className}
92+
className={clsx(
93+
buttonClassName({
94+
intent: variant,
95+
isLoading,
96+
}),
97+
buttonProps.className,
98+
)}
6999
onClick={isLoading ? undefined : props.onClick}
70100
>
71101
{children}

‎packages/react/src/components/ui/Dialog.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import * as DialogPrimitive from "@radix-ui/react-dialog";
2+
import clsx from "clsx";
23
import * as React from "react";
3-
44
import { useTranslation } from "react-i18next";
5+
56
import { CloseIcon } from "../../icons/CloseIcon";
6-
import { cn } from "../../utils/classnames";
77

88
const Dialog = DialogPrimitive.Root;
99

@@ -17,10 +17,7 @@ const DialogOverlay = React.forwardRef<
1717
>(({ className, ...props }, ref) => (
1818
<DialogPrimitive.Overlay
1919
ref={ref}
20-
className={cn(
21-
"tdk-fixed tdk-inset-0 tdk-z-50 tdk-bg-black/30 tdk-backdrop-blur-sm data-[state=open]:tdk-animate-in data-[state=closed]:tdk-animate-out data-[state=closed]:tdk-fade-out-0 data-[state=open]:tdk-fade-in-0",
22-
className,
23-
)}
20+
className="tdk-fixed tdk-inset-0 tdk-z-50 tdk-bg-black/30 tdk-backdrop-blur-sm data-[state=open]:tdk-animate-in data-[state=closed]:tdk-animate-out data-[state=closed]:tdk-fade-out-0 data-[state=open]:tdk-fade-in-0"
2421
{...props}
2522
/>
2623
));
@@ -36,7 +33,7 @@ const DialogContent = React.forwardRef<
3633
<DialogOverlay />
3734
<DialogPrimitive.Content
3835
ref={ref}
39-
className={cn(
36+
className={clsx(
4037
"tdk-fixed tdk-max-h-screen tdk-p-4 sm:tdk-px-6 tdk-overflow-y-auto tdk-left-1/2 tdk-top-1/2 tdk-z-50 tdk-w-full -tdk-translate-x-1/2 -tdk-translate-y-1/2 tdk-shadow-none tdk-drop-shadow-xl data-[state=open]:tdk-animate-in data-[state=closed]:tdk-animate-out data-[state=closed]:tdk-fade-out-0 data-[state=open]:tdk-fade-in-0 data-[state=closed]:tdk-zoom-out-95 data-[state=open]:tdk-zoom-in-95 data-[state=closed]:tdk-slide-out-to-left-1/2 data-[state=closed]:tdk-slide-out-to-top-[48%] data-[state=open]:tdk-slide-in-from-left-1/2 data-[state=open]:tdk-slide-in-from-top-[48%] tdk-outline-none focus:tdk-outline-none focus:tdk-ring-0",
4138
className,
4239
)}

0 commit comments

Comments
 (0)