chore: remove clsx (#460)

chore: remove clsx

Author: rohanchkrabrty

packages/raystack/components/avatar/avatar.tsx

@@ -1,5 +1,4 @@
-import { VariantProps, cva } from 'class-variance-authority';
-import { clsx } from 'clsx';
+import { VariantProps, cva, cx } from 'class-variance-authority';
 import { Avatar as AvatarPrimitive } from 'radix-ui';
 import {
   ComponentPropsWithoutRef,
@@ -185,7 +184,7 @@ const AvatarRoot = forwardRef<
     <Box className={styles.imageWrapper} style={style}>
       <AvatarPrimitive.Root
         ref={ref}
-        className={clsx(avatar({ size, radius, variant, color }), className)}
+        className={cx(avatar({ size, radius, variant, color }), className)}
         asChild={asChild}
         {...props}
       >
@@ -216,7 +215,7 @@ export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
     const firstAvatarProps = getAvatarProps(avatars[0]);
 
     return (
-      <div ref={ref} className={clsx(styles.avatarGroup, className)} {...props}>
+      <div ref={ref} className={cx(styles.avatarGroup, className)} {...props}>
         {avatars.map((avatar, index) => (
           <div key={index} className={styles.avatarWrapper}>
             {avatar}

packages/raystack/components/calendar/calendar.tsx

@@ -2,24 +2,23 @@ import {
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
-  ChevronUpIcon,
+  ChevronUpIcon
 } from '@radix-ui/react-icons';
-import { cva } from 'class-variance-authority';
+import { cva, cx } from 'class-variance-authority';
 import { ChangeEvent, useEffect, useState } from 'react';
 import {
-  dateLib,
   DayPicker,
   DayPickerProps,
   DropdownProps,
+  dateLib
 } from 'react-day-picker';
-import { clsx } from 'clsx';
 
 import { Flex } from '../flex/flex';
+import { IconButton } from '../icon-button';
 import { Select } from '../select';
-import { Tooltip } from '../tooltip';
 import { Skeleton } from '../skeleton';
+import { Tooltip } from '../tooltip';
 import styles from './calendar.module.css';
-import { IconButton } from '../icon-button';
 
 interface OnDropdownOpen {
   onDropdownOpen?: VoidFunction;
@@ -47,7 +46,7 @@ function DropDown({
   value,
   onChange,
   onDropdownOpen,
-  disabled,
+  disabled
 }: DropDownComponentProps) {
   const [open, setOpen] = useState(false);
 
@@ -71,22 +70,22 @@ function DropDown({
       <Select.Trigger
         className={styles.dropdown_trigger}
         iconProps={{
-          className: styles.dropdown_icon,
+          className: styles.dropdown_icon
         }}
-        size="small"
-        variant="text"
+        size='small'
+        variant='text'
         disabled={disabled}
       >
         <Select.Value />
       </Select.Trigger>
       <Select.Content className={styles.dropdown_content}>
         <Select.ScrollUpButton asChild>
-          <Flex justify={'center'}>
+          <Flex justify='center'>
             <ChevronUpIcon />
           </Flex>
         </Select.ScrollUpButton>
         <Select.Viewport>
-          {options.map((opt) => (
+          {options.map(opt => (
             <Select.Item
               value={opt.value.toString()}
               key={opt.value}
@@ -97,7 +96,7 @@ function DropDown({
           ))}
         </Select.Viewport>
         <Select.ScrollDownButton asChild>
-          <Flex justify={'center'}>
+          <Flex justify='center'>
             <ChevronDownIcon />
           </Flex>
         </Select.ScrollDownButton>
@@ -122,57 +121,60 @@ export const Calendar = function ({
       showOutsideDays={showOutsideDays}
       timeZone={timeZone}
       components={{
-        Chevron: (props) => {
-          const icon = props.orientation === 'left' ? (
-            <ChevronLeftIcon />
-          ) : (
-            <ChevronRightIcon />
-          );
+        Chevron: props => {
+          const icon =
+            props.orientation === 'left' ? (
+              <ChevronLeftIcon />
+            ) : (
+              <ChevronRightIcon />
+            );
 
           return (
-            <IconButton 
-              {...props} 
+            <IconButton
+              {...props}
               disabled={loadingData}
-              className={clsx(props.className, loadingData && styles.disabled)}
+              className={cx(props.className, loadingData && styles.disabled)}
               size={3}
-              aria-label={props.orientation === 'left' ? 'Previous month' : 'Next month'}
+              aria-label={
+                props.orientation === 'left' ? 'Previous month' : 'Next month'
+              }
             >
               {icon}
             </IconButton>
           );
         },
         Dropdown: (props: DropdownProps) => (
-          <DropDown 
-            {...props} 
+          <DropDown
+            {...props}
             onDropdownOpen={onDropdownOpen}
             disabled={loadingData}
           />
         ),
-        DayButton: (props) => {
+        DayButton: props => {
           const { day, ...buttonProps } = props;
           const message =
             tooltipMessages[dateLib.format(day.date, 'dd-MM-yyyy')];
           return (
             <Tooltip
-              side="top"
+              side='top'
               disabled={loadingData || !showTooltip || !message}
               message={message}
             >
               <button {...buttonProps} />
             </Tooltip>
           );
         },
-        MonthGrid: (props) =>
+        MonthGrid: props =>
           loadingData ? (
             <Skeleton
               count={5}
-              height="18px"
-              width="252px"
-              style={{ marginBottom: "var(--rs-space-6)" }}
+              height='18px'
+              width='252px'
+              style={{ marginBottom: 'var(--rs-space-6)' }}
             />
           ) : (
             <table {...props} />
-          ),
+          )
       }}
       classNames={{
         caption_label: styles.caption_label,
@@ -195,10 +197,10 @@ export const Calendar = function ({
         range_start: styles.range_start,
         hidden: styles.hidden,
         dropdowns: styles.dropdowns,
-        ...classNames,
+        ...classNames
       }}
       className={root({ className })}
-      mode="single"
+      mode='single'
       {...props}
     />
   );

packages/raystack/components/checkbox/checkbox.tsx

@@ -1,5 +1,4 @@
-import { VariantProps, cva } from 'class-variance-authority';
-import clsx from 'clsx';
+import { VariantProps, cva, cx } from 'class-variance-authority';
 import { Checkbox as CheckboxPrimitive } from 'radix-ui';
 import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react';
 
@@ -71,7 +70,7 @@ export const Checkbox = forwardRef<
     return (
       <CheckboxPrimitive.Root
         className={checkbox({
-          className: clsx(className, {
+          className: cx(className, {
             [styles['checkbox-disabled']]: disabled,
             [styles['checkbox-indeterminate']]: isIndeterminate
           })

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

@@ -1,7 +1,7 @@
 import { TableIcon } from '@radix-ui/react-icons';
 import type { HeaderGroup, Row } from '@tanstack/react-table';
 import { flexRender } from '@tanstack/react-table';
-import clsx from 'clsx';
+import { cx } from 'class-variance-authority';
 import {
   ForwardedRef,
   forwardRef,
@@ -126,7 +126,7 @@ const Rows = forwardRef<HTMLTableRowElement, RowsProps<unknown>>(
           ) : (
             <Table.Row
               key={rowKey}
-              className={clsx(
+              className={cx(
                 styles['row'],
                 onRowClick ? styles['clickable'] : '',
                 classNames?.row
@@ -143,7 +143,7 @@ const Rows = forwardRef<HTMLTableRowElement, RowsProps<unknown>>(
                 return (
                   <Table.Cell
                     key={cell.id}
-                    className={clsx(styles['cell'], columnDef.classNames?.cell)}
+                    className={cx(styles['cell'], columnDef.classNames?.cell)}
                     style={columnDef.styles?.cell}
                   >
                     {flexRender(columnDef.cell, cell.getContext())}

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

@@ -1,16 +1,15 @@
-import clsx from "clsx";
-
-import { Flex } from "../../flex";
-import styles from "../data-table.module.css";
-import { DisplaySettings } from "./display-settings";
-import { Filters } from "./filters";
+import { cx } from 'class-variance-authority';
+import { Flex } from '../../flex';
+import styles from '../data-table.module.css';
+import { DisplaySettings } from './display-settings';
+import { Filters } from './filters';
 
 export function Toolbar<TData, TValue>({ className }: { className?: string }) {
   return (
     <Flex
-      className={clsx(styles["toolbar"], className)}
-      justify={"between"}
-      align={"center"}
+      className={cx(styles['toolbar'], className)}
+      justify='between'
+      align='center'
     >
       <Filters<TData, TValue> />
       <DisplaySettings />

packages/raystack/components/dialog/dialog.tsx

@@ -1,6 +1,5 @@
 import { Cross1Icon } from '@radix-ui/react-icons';
-import { VariantProps, cva } from 'class-variance-authority';
-import { clsx } from 'clsx';
+import { VariantProps, cva, cx } from 'class-variance-authority';
 import { Dialog as DialogPrimitive } from 'radix-ui';
 import {
   ComponentProps,
@@ -9,7 +8,6 @@ import {
   forwardRef
 } from 'react';
 import { Flex } from '../flex';
-
 import styles from './dialog.module.css';
 
 const dialogContent = cva(styles.dialogContent);
@@ -45,7 +43,7 @@ const DialogContent = forwardRef<
   ) => (
     <DialogPrimitive.Portal>
       <DialogPrimitive.Overlay
-        className={clsx(
+        className={cx(
           styles.dialogOverlay,
           overlayClassName,
           overlayBlur && styles.overlayBlur
@@ -80,7 +78,7 @@ const DialogHeader = ({
   <Flex
     justify='between'
     align='center'
-    className={clsx(styles.header, className)}
+    className={cx(styles.header, className)}
   >
     {children}
   </Flex>
@@ -93,7 +91,7 @@ const DialogFooter = ({
   children: React.ReactNode;
   className?: string;
 }) => (
-  <Flex gap={5} justify='end' className={clsx(styles.footer, className)}>
+  <Flex gap={5} justify='end' className={cx(styles.footer, className)}>
     {children}
   </Flex>
 );
@@ -105,7 +103,7 @@ const DialogBody = ({
   children: React.ReactNode;
   className?: string;
 }) => (
-  <Flex direction='column' gap={3} className={clsx(styles.body, className)}>
+  <Flex direction='column' gap={3} className={cx(styles.body, className)}>
     {children}
   </Flex>
 );
@@ -114,7 +112,7 @@ type CloseButtonProps = ComponentProps<typeof DialogPrimitive.Close>;
 export function CloseButton({ className, ...props }: CloseButtonProps) {
   return (
     <DialogPrimitive.Close
-      className={clsx(styles.close, className)}
+      className={cx(styles.close, className)}
       aria-label='Close dialog'
       {...props}
     >
@@ -134,7 +132,7 @@ function DialogTitle({ children, className, ...props }: DialogTitleProps) {
       {...props}
       role='heading'
       aria-level={1}
-      className={clsx(styles.title, className)}
+      className={cx(styles.title, className)}
     >
       {children}
     </DialogPrimitive.Title>
@@ -155,7 +153,7 @@ function DialogDescription({
   return (
     <DialogPrimitive.Description
       {...props}
-      className={clsx(styles.description, className)}
+      className={cx(styles.description, className)}
       id='dialog-description'
       role='document'
     >