Skip to content

Commit 45caba8

Browse files
rohanchkrabrtyrohanchkrabrty
authored
chore: remove clsx (#460)
chore: remove clsx
1 parent 52d21f4 commit 45caba8

File tree

13 files changed

+194
-190
lines changed

13 files changed

+194
-190
lines changed

‎packages/raystack/components/avatar/avatar.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { VariantProps, cva } from 'class-variance-authority';
2-
import { clsx } from 'clsx';
1+
import { VariantProps, cva, cx } from 'class-variance-authority';
32
import { Avatar as AvatarPrimitive } from 'radix-ui';
43
import {
54
ComponentPropsWithoutRef,
@@ -185,7 +184,7 @@ const AvatarRoot = forwardRef<
185184
<Box className={styles.imageWrapper} style={style}>
186185
<AvatarPrimitive.Root
187186
ref={ref}
188-
className={clsx(avatar({ size, radius, variant, color }), className)}
187+
className={cx(avatar({ size, radius, variant, color }), className)}
189188
asChild={asChild}
190189
{...props}
191190
>
@@ -216,7 +215,7 @@ export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
216215
const firstAvatarProps = getAvatarProps(avatars[0]);
217216

218217
return (
219-
<div ref={ref} className={clsx(styles.avatarGroup, className)} {...props}>
218+
<div ref={ref} className={cx(styles.avatarGroup, className)} {...props}>
220219
{avatars.map((avatar, index) => (
221220
<div key={index} className={styles.avatarWrapper}>
222221
{avatar}

‎packages/raystack/components/calendar/calendar.tsx‎

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,23 @@ import {
22
ChevronDownIcon,
33
ChevronLeftIcon,
44
ChevronRightIcon,
5-
ChevronUpIcon,
5+
ChevronUpIcon
66
} from '@radix-ui/react-icons';
7-
import { cva } from 'class-variance-authority';
7+
import { cva, cx } from 'class-variance-authority';
88
import { ChangeEvent, useEffect, useState } from 'react';
99
import {
10-
dateLib,
1110
DayPicker,
1211
DayPickerProps,
1312
DropdownProps,
13+
dateLib
1414
} from 'react-day-picker';
15-
import { clsx } from 'clsx';
1615

1716
import { Flex } from '../flex/flex';
17+
import { IconButton } from '../icon-button';
1818
import { Select } from '../select';
19-
import { Tooltip } from '../tooltip';
2019
import { Skeleton } from '../skeleton';
20+
import { Tooltip } from '../tooltip';
2121
import styles from './calendar.module.css';
22-
import { IconButton } from '../icon-button';
2322

2423
interface OnDropdownOpen {
2524
onDropdownOpen?: VoidFunction;
@@ -47,7 +46,7 @@ function DropDown({
4746
value,
4847
onChange,
4948
onDropdownOpen,
50-
disabled,
49+
disabled
5150
}: DropDownComponentProps) {
5251
const [open, setOpen] = useState(false);
5352

@@ -71,22 +70,22 @@ function DropDown({
7170
<Select.Trigger
7271
className={styles.dropdown_trigger}
7372
iconProps={{
74-
className: styles.dropdown_icon,
73+
className: styles.dropdown_icon
7574
}}
76-
size="small"
77-
variant="text"
75+
size='small'
76+
variant='text'
7877
disabled={disabled}
7978
>
8079
<Select.Value />
8180
</Select.Trigger>
8281
<Select.Content className={styles.dropdown_content}>
8382
<Select.ScrollUpButton asChild>
84-
<Flex justify={'center'}>
83+
<Flex justify='center'>
8584
<ChevronUpIcon />
8685
</Flex>
8786
</Select.ScrollUpButton>
8887
<Select.Viewport>
89-
{options.map((opt) => (
88+
{options.map(opt => (
9089
<Select.Item
9190
value={opt.value.toString()}
9291
key={opt.value}
@@ -97,7 +96,7 @@ function DropDown({
9796
))}
9897
</Select.Viewport>
9998
<Select.ScrollDownButton asChild>
100-
<Flex justify={'center'}>
99+
<Flex justify='center'>
101100
<ChevronDownIcon />
102101
</Flex>
103102
</Select.ScrollDownButton>
@@ -122,57 +121,60 @@ export const Calendar = function ({
122121
showOutsideDays={showOutsideDays}
123122
timeZone={timeZone}
124123
components={{
125-
Chevron: (props) => {
126-
const icon = props.orientation === 'left' ? (
127-
<ChevronLeftIcon />
128-
) : (
129-
<ChevronRightIcon />
130-
);
124+
Chevron: props => {
125+
const icon =
126+
props.orientation === 'left' ? (
127+
<ChevronLeftIcon />
128+
) : (
129+
<ChevronRightIcon />
130+
);
131131

132132
return (
133-
<IconButton
134-
{...props}
133+
<IconButton
134+
{...props}
135135
disabled={loadingData}
136-
className={clsx(props.className, loadingData && styles.disabled)}
136+
className={cx(props.className, loadingData && styles.disabled)}
137137
size={3}
138-
aria-label={props.orientation === 'left' ? 'Previous month' : 'Next month'}
138+
aria-label={
139+
props.orientation === 'left' ? 'Previous month' : 'Next month'
140+
}
139141
>
140142
{icon}
141143
</IconButton>
142144
);
143145
},
144146
Dropdown: (props: DropdownProps) => (
145-
<DropDown
146-
{...props}
147+
<DropDown
148+
{...props}
147149
onDropdownOpen={onDropdownOpen}
148150
disabled={loadingData}
149151
/>
150152
),
151-
DayButton: (props) => {
153+
DayButton: props => {
152154
const { day, ...buttonProps } = props;
153155
const message =
154156
tooltipMessages[dateLib.format(day.date, 'dd-MM-yyyy')];
155157
return (
156158
<Tooltip
157-
side="top"
159+
side='top'
158160
disabled={loadingData || !showTooltip || !message}
159161
message={message}
160162
>
161163
<button {...buttonProps} />
162164
</Tooltip>
163165
);
164166
},
165-
MonthGrid: (props) =>
167+
MonthGrid: props =>
166168
loadingData ? (
167169
<Skeleton
168170
count={5}
169-
height="18px"
170-
width="252px"
171-
style={{ marginBottom: "var(--rs-space-6)" }}
171+
height='18px'
172+
width='252px'
173+
style={{ marginBottom: 'var(--rs-space-6)' }}
172174
/>
173175
) : (
174176
<table {...props} />
175-
),
177+
)
176178
}}
177179
classNames={{
178180
caption_label: styles.caption_label,
@@ -195,10 +197,10 @@ export const Calendar = function ({
195197
range_start: styles.range_start,
196198
hidden: styles.hidden,
197199
dropdowns: styles.dropdowns,
198-
...classNames,
200+
...classNames
199201
}}
200202
className={root({ className })}
201-
mode="single"
203+
mode='single'
202204
{...props}
203205
/>
204206
);

‎packages/raystack/components/checkbox/checkbox.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { VariantProps, cva } from 'class-variance-authority';
2-
import clsx from 'clsx';
1+
import { VariantProps, cva, cx } from 'class-variance-authority';
32
import { Checkbox as CheckboxPrimitive } from 'radix-ui';
43
import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react';
54

@@ -71,7 +70,7 @@ export const Checkbox = forwardRef<
7170
return (
7271
<CheckboxPrimitive.Root
7372
className={checkbox({
74-
className: clsx(className, {
73+
className: cx(className, {
7574
[styles['checkbox-disabled']]: disabled,
7675
[styles['checkbox-indeterminate']]: isIndeterminate
7776
})

‎packages/raystack/components/data-table/components/content.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { TableIcon } from '@radix-ui/react-icons';
22
import type { HeaderGroup, Row } from '@tanstack/react-table';
33
import { flexRender } from '@tanstack/react-table';
4-
import clsx from 'clsx';
4+
import { cx } from 'class-variance-authority';
55
import {
66
ForwardedRef,
77
forwardRef,
@@ -126,7 +126,7 @@ const Rows = forwardRef<HTMLTableRowElement, RowsProps<unknown>>(
126126
) : (
127127
<Table.Row
128128
key={rowKey}
129-
className={clsx(
129+
className={cx(
130130
styles['row'],
131131
onRowClick ? styles['clickable'] : '',
132132
classNames?.row
@@ -143,7 +143,7 @@ const Rows = forwardRef<HTMLTableRowElement, RowsProps<unknown>>(
143143
return (
144144
<Table.Cell
145145
key={cell.id}
146-
className={clsx(styles['cell'], columnDef.classNames?.cell)}
146+
className={cx(styles['cell'], columnDef.classNames?.cell)}
147147
style={columnDef.styles?.cell}
148148
>
149149
{flexRender(columnDef.cell, cell.getContext())}

‎packages/raystack/components/data-table/components/toolbar.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
import clsx from "clsx";
2-
3-
import { Flex } from "../../flex";
4-
import styles from "../data-table.module.css";
5-
import { DisplaySettings } from "./display-settings";
6-
import { Filters } from "./filters";
1+
import { cx } from 'class-variance-authority';
2+
import { Flex } from '../../flex';
3+
import styles from '../data-table.module.css';
4+
import { DisplaySettings } from './display-settings';
5+
import { Filters } from './filters';
76

87
export function Toolbar<TData, TValue>({ className }: { className?: string }) {
98
return (
109
<Flex
11-
className={clsx(styles["toolbar"], className)}
12-
justify={"between"}
13-
align={"center"}
10+
className={cx(styles['toolbar'], className)}
11+
justify='between'
12+
align='center'
1413
>
1514
<Filters<TData, TValue> />
1615
<DisplaySettings />

‎packages/raystack/components/dialog/dialog.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Cross1Icon } from '@radix-ui/react-icons';
2-
import { VariantProps, cva } from 'class-variance-authority';
3-
import { clsx } from 'clsx';
2+
import { VariantProps, cva, cx } from 'class-variance-authority';
43
import { Dialog as DialogPrimitive } from 'radix-ui';
54
import {
65
ComponentProps,
@@ -9,7 +8,6 @@ import {
98
forwardRef
109
} from 'react';
1110
import { Flex } from '../flex';
12-
1311
import styles from './dialog.module.css';
1412

1513
const dialogContent = cva(styles.dialogContent);
@@ -45,7 +43,7 @@ const DialogContent = forwardRef<
4543
) => (
4644
<DialogPrimitive.Portal>
4745
<DialogPrimitive.Overlay
48-
className={clsx(
46+
className={cx(
4947
styles.dialogOverlay,
5048
overlayClassName,
5149
overlayBlur && styles.overlayBlur
@@ -80,7 +78,7 @@ const DialogHeader = ({
8078
<Flex
8179
justify='between'
8280
align='center'
83-
className={clsx(styles.header, className)}
81+
className={cx(styles.header, className)}
8482
>
8583
{children}
8684
</Flex>
@@ -93,7 +91,7 @@ const DialogFooter = ({
9391
children: React.ReactNode;
9492
className?: string;
9593
}) => (
96-
<Flex gap={5} justify='end' className={clsx(styles.footer, className)}>
94+
<Flex gap={5} justify='end' className={cx(styles.footer, className)}>
9795
{children}
9896
</Flex>
9997
);
@@ -105,7 +103,7 @@ const DialogBody = ({
105103
children: React.ReactNode;
106104
className?: string;
107105
}) => (
108-
<Flex direction='column' gap={3} className={clsx(styles.body, className)}>
106+
<Flex direction='column' gap={3} className={cx(styles.body, className)}>
109107
{children}
110108
</Flex>
111109
);
@@ -114,7 +112,7 @@ type CloseButtonProps = ComponentProps<typeof DialogPrimitive.Close>;
114112
export function CloseButton({ className, ...props }: CloseButtonProps) {
115113
return (
116114
<DialogPrimitive.Close
117-
className={clsx(styles.close, className)}
115+
className={cx(styles.close, className)}
118116
aria-label='Close dialog'
119117
{...props}
120118
>
@@ -134,7 +132,7 @@ function DialogTitle({ children, className, ...props }: DialogTitleProps) {
134132
{...props}
135133
role='heading'
136134
aria-level={1}
137-
className={clsx(styles.title, className)}
135+
className={cx(styles.title, className)}
138136
>
139137
{children}
140138
</DialogPrimitive.Title>
@@ -155,7 +153,7 @@ function DialogDescription({
155153
return (
156154
<DialogPrimitive.Description
157155
{...props}
158-
className={clsx(styles.description, className)}
156+
className={cx(styles.description, className)}
159157
id='dialog-description'
160158
role='document'
161159
>

0 commit comments

Comments
 (0)