Skip to content

Commit 32def3d

Browse files
alex-mcgovernalex-mcgovern
authored
chore: remove CVA (#98)
1 parent 606101e commit 32def3d

File tree

4 files changed

+72
-65
lines changed

4 files changed

+72
-65
lines changed

‎package.json

-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@
2626
"@tanstack/react-query": "^5.64.1",
2727
"@types/prismjs": "^1.26.5",
2828
"@types/react-syntax-highlighter": "^15.5.13",
29-
"class-variance-authority": "^0.7.1",
3029
"clsx": "^2.1.1",
3130
"date-fns": "^4.1.0",
3231
"highlight.js": "^11.11.1",

‎src/components/ui/chat/chat-bubble.tsx

+32-25
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,32 @@
11
import * as React from "react";
2-
import { cva, type VariantProps } from "class-variance-authority";
32
import MessageLoading from "./message-loading";
43
import { Avatar, Button } from "@stacklok/ui-kit";
4+
import { tv } from "tailwind-variants";
55
import { twMerge } from "tailwind-merge";
66

77
// ChatBubble
8-
const chatBubbleVariant = cva(
9-
"flex gap-2 max-w-[60%] items-end relative group",
10-
{
11-
variants: {
12-
variant: {
13-
received: "self-start",
14-
sent: "self-end flex-row-reverse",
15-
},
16-
layout: {
17-
default: "",
18-
ai: "max-w-full w-full items-center",
19-
},
8+
const chatBubbleVariant = tv({
9+
base: "flex gap-2 max-w-[60%] items-end relative group",
10+
variants: {
11+
variant: {
12+
received: "self-start",
13+
sent: "self-end flex-row-reverse",
2014
},
21-
defaultVariants: {
22-
variant: "received",
23-
layout: "default",
15+
layout: {
16+
default: "",
17+
ai: "max-w-full w-full items-center",
2418
},
2519
},
26-
);
20+
defaultVariants: {
21+
variant: "received",
22+
layout: "default",
23+
},
24+
});
2725

28-
interface ChatBubbleProps
29-
extends React.HTMLAttributes<HTMLDivElement>,
30-
VariantProps<typeof chatBubbleVariant> {}
26+
interface ChatBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
27+
variant: "received" | "sent";
28+
layout?: "default" | "ai";
29+
}
3130

3231
const ChatBubble = React.forwardRef<HTMLDivElement, ChatBubbleProps>(
3332
({ className, variant, layout, children, ...props }, ref) => (
@@ -64,10 +63,18 @@ const ChatBubbleAvatar: React.FC<ChatBubbleAvatarProps> = ({
6463
fallback,
6564
className,
6665
...rest
67-
}) => <Avatar src={src} name={fallback} className={className} {...rest} />;
66+
}) => (
67+
<Avatar
68+
src={src}
69+
name={fallback}
70+
className={twMerge(className, "rounded-full")}
71+
{...rest}
72+
/>
73+
);
6874

6975
// ChatBubbleMessage
70-
const chatBubbleMessageVariants = cva("p-4 bg-gray-100 text-primary", {
76+
const chatBubbleMessageVariants = tv({
77+
base: "p-4 bg-gray-100 text-primary",
7178
variants: {
7279
variant: {
7380
received: "rounded-r-lg rounded-tl-lg",
@@ -84,9 +91,9 @@ const chatBubbleMessageVariants = cva("p-4 bg-gray-100 text-primary", {
8491
},
8592
});
8693

87-
interface ChatBubbleMessageProps
88-
extends React.HTMLAttributes<HTMLDivElement>,
89-
VariantProps<typeof chatBubbleMessageVariants> {
94+
interface ChatBubbleMessageProps extends React.HTMLAttributes<HTMLDivElement> {
95+
variant: "received" | "sent";
96+
layout?: "default" | "ai";
9097
isLoading?: boolean;
9198
}
9299

‎src/components/ui/sheet.tsx

+19-19
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22

33
import * as React from "react";
44
import * as SheetPrimitive from "@radix-ui/react-dialog";
5-
import { cva, type VariantProps } from "class-variance-authority";
65
import { X } from "lucide-react";
6+
7+
import { tv } from "tailwind-variants";
78
import { twMerge } from "tailwind-merge";
89

910
const Sheet = SheetPrimitive.Root;
@@ -29,28 +30,27 @@ const SheetOverlay = React.forwardRef<
2930
));
3031
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
3132

32-
const sheetVariants = cva(
33-
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
34-
{
35-
variants: {
36-
side: {
37-
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
38-
bottom:
39-
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
40-
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
41-
right:
42-
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
43-
},
44-
},
45-
defaultVariants: {
46-
side: "right",
33+
const sheetVariants = tv({
34+
base: "fixed z-50 gap-4 bg-base p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
35+
variants: {
36+
side: {
37+
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
38+
bottom:
39+
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
40+
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
41+
right:
42+
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
4743
},
4844
},
49-
);
45+
defaultVariants: {
46+
side: "right",
47+
},
48+
});
5049

5150
interface SheetContentProps
52-
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
53-
VariantProps<typeof sheetVariants> {}
51+
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> {
52+
side: "top" | "left" | "right" | "bottom";
53+
}
5454

5555
const SheetContent = React.forwardRef<
5656
React.ElementRef<typeof SheetPrimitive.Content>,

‎src/components/ui/sidebar.tsx

+21-20
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import * as React from "react";
22
import { Slot } from "@radix-ui/react-slot";
3-
import { VariantProps, cva } from "class-variance-authority";
43
import { PanelLeft } from "lucide-react";
54
import { useIsMobile } from "@/hooks/use-mobile";
65
import { Sheet, SheetContent } from "@/components/ui/sheet";
76
import { Tooltip, TooltipTrigger, Button, Skeleton } from "@stacklok/ui-kit";
87
import { twMerge } from "tailwind-merge";
8+
import { tv } from "tailwind-variants";
99

1010
const SIDEBAR_COOKIE_NAME = "sidebar:state";
1111
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
@@ -370,35 +370,36 @@ const SidebarMenuItem = React.forwardRef<
370370
));
371371
SidebarMenuItem.displayName = "SidebarMenuItem";
372372

373-
const sidebarMenuButtonVariants = cva(
374-
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none transition-[width,height,padding] hover:bg-gray-25 focus-visible:ring-2 active:bg-gray-25-accent disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-gray-25-accent data-[active=true]:font-medium data-[state=open]:hover:bg-gray-25 group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
375-
{
376-
variants: {
377-
variant: {
378-
default: "hover:bg-gray-25",
379-
outline:
380-
"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-gray-25 hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
381-
},
382-
size: {
383-
default: "h-8 text-sm",
384-
sm: "h-7 text-sm",
385-
lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
386-
},
373+
const sidebarMenuButtonVariants = tv({
374+
base: "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-brand-600 transition-[width,height,padding] hover:bg-brand-25 hover:text-secondary focus-visible:ring-2 active:bg-gray-25 active:text-secondary disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-gray-25 data-[active=true]:font-medium data-[active=true]:text-secondary data-[state=open]:hover:bg-brand-25 data-[state=open]:hover:text-secondary group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
375+
variants: {
376+
variant: {
377+
default: "hover:bg-brand-25 hover:text-secondary",
378+
outline:
379+
"bg-base shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-brand-25 hover:text-secondary hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
387380
},
388-
defaultVariants: {
389-
variant: "default",
390-
size: "default",
381+
size: {
382+
default: "h-8 text-sm",
383+
sm: "h-7 text-sm",
384+
lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
391385
},
392386
},
393-
);
387+
defaultVariants: {
388+
variant: "default",
389+
size: "default",
390+
},
391+
});
394392

395393
const SidebarMenuButton = React.forwardRef<
396394
HTMLButtonElement,
397395
React.ComponentProps<"button"> & {
398396
asChild?: boolean;
399397
isActive?: boolean;
400398
tooltip?: string;
401-
} & VariantProps<typeof sidebarMenuButtonVariants>
399+
} & {
400+
variant: "default" | "outline";
401+
size: "default" | "sm" | "lg";
402+
}
402403
>(
403404
(
404405
{

0 commit comments

Comments
 (0)