Util classname 2

GoldGroove06 · GoldGroove06 · commit 080dc86b173d · 2024-12-11T12:53:16.000+05:30
diff --git a/src/components/ui/Collapsible/Collapsible.tsx b/src/components/ui/Collapsible/Collapsible.tsx
@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, ReactNode, useState } from 'react';
 import ButtonPrimitive from '~/core/primitives/Button';
-
+import { clsx } from 'clsx';
 /*
  * CHECKLIST
  *
@@ -14,13 +14,13 @@ import ButtonPrimitive from '~/core/primitives/Button';
 export type CollapsibleProps = { open?: boolean, title?: string, trigger?: ReactNode} & PropsWithChildren;
 
 const ExpandIcon = () => (
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={clsx('size-6')}>
         <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
     </svg>
 );
 
 const CollapseIcon = () => (
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={clsx('size-6')}>
         <path strokeLinecap="round" strokeLinejoin="round" d="M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25" />
     </svg>
 );
diff --git a/src/components/ui/Dropdown/Dropdown.tsx b/src/components/ui/Dropdown/Dropdown.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Popper from '~/components/tools/Popper/Popper';
-
+import { clsx } from 'clsx';
 // TODO: fix any
 export type DropdownProps ={
     list: {value: any}[];
@@ -9,13 +9,13 @@ export type DropdownProps ={
 
 const Dropdown = ({ list = [], selected }: DropdownProps) => {
     const PopElem = () => {
-        return <ul className='bg-white px-2 py-2 shadow-lg rounded-md'>
+        return <ul className={clsx('bg-white px-2 py-2 shadow-lg rounded-md')}>
             {list.map((item, index) => {
                 return <li key={index}>{item.value}</li>;
             })}
         </ul>;
     };
-    return <div className='relative'>
+    return <div className={clsx('relative')}>
         <Popper open={false} placement="bottom-start" popperName="dropdown" pop={<PopElem/>}>
             <span>Dropdown</span>
         </Popper>
diff --git a/src/components/ui/Em/Em.tsx b/src/components/ui/Em/Em.tsx
@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
 import { customClassSwitcher } from '~/core';
-
+import { clsx } from 'clsx';
 const COMPONENT_NAME = 'Em';
 
 export type EmProps = {
@@ -13,7 +13,7 @@ export type EmProps = {
 
 const Em = ({ children, customRootClass, className, ...props }: EmProps) => {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
-    return <em className={`${rootClass} ${className}`} {...props}>
+    return <em className={clsx(rootClass, className)} {...props}>
         {children}
     </em>;
 };
diff --git a/src/components/ui/Heading/Heading.tsx b/src/components/ui/Heading/Heading.tsx
@@ -1,6 +1,6 @@
 'use client';
 import React from 'react';
-
+import { clsx } from 'clsx';
 import { customClassSwitcher } from '~/core';
 
 const RENDER_AS_ENUMS = [
@@ -35,9 +35,9 @@ const Heading = ({ children, as = undefined, customRootClass = '', className = '
 
     if (as !== undefined && RENDER_AS_ENUMS.find((item) => item.tag === as)) {
         const { tag: Tag } = RENDER_AS_ENUMS.find((item) => item.tag === as);
-        return <Tag className={`${rootClass} ${className}`} {...props}>{children}</Tag>;
+        return <Tag className={clsx(rootClass, className)} {...props}>{children}</Tag>;
     }
-    return <h1 className={`${rootClass} ${className}`} {...props}>{children}</h1>;
+    return <h1 className={clsx(rootClass, className)} {...props}>{children}</h1>;
 };
 Heading.displayName = 'Heading';
 
diff --git a/src/components/ui/HoverCard/fragments/HoverCardArrow.tsx b/src/components/ui/HoverCard/fragments/HoverCardArrow.tsx
@@ -1,12 +1,12 @@
 import React, { useContext } from 'react';
-
+import { clsx } from 'clsx';
 import Floater from '~/core/primitives/Floater';
 import HoverCardContext from '../contexts/HoverCardContext';
 
 const HoverCardArrow = ({ ...props }) => {
     const { floatingContext, arrowRef, rootClass } = useContext(HoverCardContext);
 
-    return <Floater.Arrow className={`${rootClass}-arrow`} {...props} context={floatingContext} ref={arrowRef} />;
+    return <Floater.Arrow className={clsx(`${rootClass}-arrow`)} {...props} context={floatingContext} ref={arrowRef} />;
 };
 
 export default HoverCardArrow;
diff --git a/src/components/ui/HoverCard/fragments/HoverCardContent.tsx b/src/components/ui/HoverCard/fragments/HoverCardContent.tsx
@@ -1,5 +1,5 @@
 import React, { useContext, useEffect } from 'react';
-
+import { clsx } from 'clsx';
 import HoverCardContext from '../contexts/HoverCardContext';
 
 type HoverCardContentProps = {
@@ -32,7 +32,7 @@ const HoverCardContent = ({ children, ...props }: HoverCardContentProps) => {
     return <div
         onPointerEnter={openWithDelay}
         onPointerLeave={closeWithDelay}
-        className={`${rootClass}`} {...props}
+        className={clsx(rootClass)} {...props}
         ref={floatingRefs.setFloating}
         style={floatingStyles}
         {...getFloatingProps()}>{children}</div>;
diff --git a/src/components/ui/HoverCard/fragments/HoverCardRoot.tsx b/src/components/ui/HoverCard/fragments/HoverCardRoot.tsx
@@ -3,7 +3,7 @@ import React, { useState, useRef } from 'react';
 import HoverCardContext from '../contexts/HoverCardContext';
 import Floater from '~/core/primitives/Floater';
 import { customClassSwitcher } from '~/core';
-
+import { clsx } from 'clsx';
 const COMPONENT_NAME = 'HoverCard';
 
 type HoverCardRootProps = {
@@ -114,7 +114,7 @@ const HoverCardRoot = ({ children, open: controlledOpen = undefined, onOpenChang
     };
 
     return <HoverCardContext.Provider value={sendValues}>
-        <div className={rootClass} {...props}>{children}</div>
+        <div className={clsx(rootClass)} {...props}>{children}</div>
     </HoverCardContext.Provider>;
 };
 
diff --git a/src/components/ui/HoverCard/fragments/HoverCardTrigger.tsx b/src/components/ui/HoverCard/fragments/HoverCardTrigger.tsx
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-
+import { clsx } from 'clsx';
 import HoverCardContext from '../contexts/HoverCardContext';
 
 import Primitive from '~/core/primitives/Primitive';
@@ -14,7 +14,7 @@ const HoverCardTrigger = ({ children, className = '', ...props }: HoverCardTrigg
 
     return <>
         <Primitive.span
-            className={`${rootTriggerClass} ${className}`}
+            className={clsx(rootTriggerClass, className)}
             onClick={() => {}}
             onMouseEnter={openWithDelay} onMouseLeave={closeWithDelay}
             ref={floatingRefs.setReference}
diff --git a/src/components/ui/Kbd/Kbd.tsx b/src/components/ui/Kbd/Kbd.tsx
@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
 import { customClassSwitcher } from '~/core';
-
+import { clsx } from 'clsx';
 const COMPONENT_NAME = 'Kbd';
 
 export type KbdProps = {
@@ -13,7 +13,7 @@ export type KbdProps = {
 
 const Kbd = ({ children, customRootClass, className, ...props }: KbdProps) => {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
-    return <kbd className={`${rootClass} ${className}`} {...props}>{children}</kbd>;
+    return <kbd className={clsx(rootClass, className)} {...props}>{children}</kbd>;
 };
 
 export default Kbd;
diff --git a/src/components/ui/Link/Link.tsx b/src/components/ui/Link/Link.tsx
@@ -1,6 +1,6 @@
 'use client';
 import React from 'react';
-
+import { clsx } from 'clsx';
 import { customClassSwitcher } from '~/core';
 
 const COMPONENT_NAME = 'Link';
@@ -15,11 +15,11 @@ export type LinkProps = {
 }
 
 // TODO: in the previous return value
-// return <a href={href} alt={alt} className={`${rootClass} ${className}`} {...props}>{children}</a>;
+// return <a href={href} alt={alt} className={clsx(rootClass, className)} {...props}>{children}</a>;
 // 'alt' prop does not exist on an anchor element
 const Link = ({ children, href = '#', alt, customRootClass, className, ...props }: LinkProps) => {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
-    return <a href={href} className={`${rootClass} ${className}`} {...props}>{children}</a>;
+    return <a href={href} className={clsx(rootClass, className)} {...props}>{children}</a>;
 };
 
 Link.displayName = COMPONENT_NAME;
diff --git a/src/components/ui/Progress/fragments/ProgressIndicator.tsx b/src/components/ui/Progress/fragments/ProgressIndicator.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { ProgressProps, COMPONENT_NAME } from '../Progress';
 import { customClassSwitcher } from '~/core';
-
+import { clsx } from 'clsx';
 interface IndicatorProps
   extends Pick<
     ProgressProps,
@@ -28,7 +28,7 @@ export default function ProgressIndicator({
     return (
         <div
             role="progressbar"
-            className={`${rootClass}-indicator`}
+            className={clsx(`${rootClass}-indicator`)}
             style={{ transform: `translateX(-${maxValue - value}%)` }}
             aria-valuenow={value}
             aria-valuemax={maxValue}
diff --git a/src/components/ui/Progress/fragments/ProgressRoot.tsx b/src/components/ui/Progress/fragments/ProgressRoot.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-
+import { clsx } from 'clsx';
 import { customClassSwitcher } from '~/core';
 
 import { ProgressProps, COMPONENT_NAME } from '../Progress';
@@ -9,5 +9,5 @@ interface ProgressRootProps extends Partial<ProgressProps> {}
 export default function ProgressRoot({ children, customRootClass }: ProgressRootProps) {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
 
-    return (<div className={rootClass}>{children}</div>);
+    return (<div className={clsx(rootClass)}>{children}</div>);
 }
diff --git a/src/components/ui/Quote/Quote.tsx b/src/components/ui/Quote/Quote.tsx
@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
 import { customClassSwitcher } from '~/core';
-
+import { clsx } from 'clsx';
 const COMPONENT_NAME = 'Quote';
 
 export type QuoteProps = {
@@ -13,7 +13,7 @@ export type QuoteProps = {
 
 const Quote = ({ children, customRootClass, className, ...props }: QuoteProps) => {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
-    return <q className={`${rootClass} ${className}`} {...props}>{children}</q>;
+    return <q className={clsx(rootClass, className)} {...props}>{children}</q>;
 };
 
 Quote.displayName = COMPONENT_NAME;
diff --git a/src/components/ui/RadioGroup/RadioGroup.tsx b/src/components/ui/RadioGroup/RadioGroup.tsx
@@ -2,6 +2,7 @@ import React, { DetailedHTMLProps, InputHTMLAttributes, PropsWithChildren } from
 import { customClassSwitcher } from '~/core';
 import RadioPrimitive from '~/core/primitives/Radio';
 const COMPONENT_NAME = 'RadioGroup';
+import { clsx } from 'clsx';
 
 export type RadioGroupProps = {
 
@@ -14,7 +15,7 @@ const RadioGroup = ({ children, type = 'radio', className = '', customRootClass
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
 
     return (
-        <div className={`${rootClass} ${className}`} role='radiogroup'>
+        <div className={clsx(rootClass, className)} role='radiogroup'>
             <RadioPrimitive
                 type={type}
                 {...props}>
