refactor: move _className directly to the return of the component

Author: mrholek

packages/coreui-react/src/components/accordion/CAccordion.tsx

@@ -32,9 +32,13 @@ export const CAccordionContext = createContext({} as CAccordionContextProps)
 export const CAccordion = forwardRef<HTMLDivElement, CAccordionProps>(
   ({ children, activeItemKey = undefined, alwaysOpen = false, className, flush, ...rest }, ref) => {
     const [_activeItemKey, setActiveKey] = useState(activeItemKey)
-    const _className = classNames('accordion', { 'accordion-flush': flush }, className)
+
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div
+        className={classNames('accordion', { 'accordion-flush': flush }, className)}
+        {...rest}
+        ref={ref}
+      >
         <CAccordionContext.Provider value={{ _activeItemKey, alwaysOpen, setActiveKey }}>
           {children}
         </CAccordionContext.Provider>

packages/coreui-react/src/components/accordion/CAccordionBody.tsx

@@ -16,11 +16,10 @@ export interface CAccordionBodyProps extends HTMLAttributes<HTMLDivElement> {
 export const CAccordionBody = forwardRef<HTMLDivElement, CAccordionBodyProps>(
   ({ children, className, ...rest }, ref) => {
     const { visible } = useContext(CAccordionItemContext)
-    const _className = classNames('accordion-body', className)
 
     return (
       <CCollapse className="accordion-collapse" visible={visible}>
-        <div className={_className} {...rest} ref={ref}>
+        <div className={classNames('accordion-body', className)} {...rest} ref={ref}>
           {children}
         </div>
       </CCollapse>

packages/coreui-react/src/components/accordion/CAccordionButton.tsx

@@ -15,12 +15,10 @@ export const CAccordionButton = forwardRef<HTMLButtonElement, CAccordionButtonPr
   ({ children, className, ...rest }, ref) => {
     const { visible, setVisible } = useContext(CAccordionItemContext)
 
-    const _className = classNames('accordion-button', { collapsed: !visible }, className)
-
     return (
       <button
         type="button"
-        className={_className}
+        className={classNames('accordion-button', { collapsed: !visible }, className)}
         aria-expanded={!visible}
         onClick={() => setVisible(!visible)}
         {...rest}

packages/coreui-react/src/components/accordion/CAccordionHeader.tsx

@@ -13,10 +13,8 @@ export interface CAccordionHeaderProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CAccordionHeader = forwardRef<HTMLDivElement, CAccordionHeaderProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('accordion-header', className)
-
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div className={classNames('accordion-header', className)} {...rest} ref={ref}>
         <CAccordionButton>{children}</CAccordionButton>
       </div>
     )

packages/coreui-react/src/components/accordion/CAccordionItem.tsx

@@ -45,10 +45,8 @@ export const CAccordionItem = forwardRef<HTMLDivElement, CAccordionItemProps>(
       setVisible(Boolean(_activeItemKey === _itemKey.current))
     }, [_activeItemKey])
 
-    const _className = classNames('accordion-item', className)
-
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div className={classNames('accordion-item', className)} {...rest} ref={ref}>
         <CAccordionItemContext.Provider value={{ setVisible, visible }}>
           {children}
         </CAccordionItemContext.Provider>

packages/coreui-react/src/components/alert/CAlert.tsx

@@ -60,19 +60,6 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
       setVisible(visible)
     }, [visible])
 
-    const _className = classNames(
-      'alert',
-      variant === 'solid' ? `bg-${color} text-white` : `alert-${color}`,
-      {
-        'alert-dismissible fade': dismissible,
-      },
-      className,
-    )
-
-    const getTransitionClass = (state: string) => {
-      return state === 'entered' && 'show'
-    }
-
     return (
       <Transition
         in={_visible}
@@ -82,20 +69,25 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
         timeout={150}
         unmountOnExit
       >
-        {(state) => {
-          const transitionClass = getTransitionClass(state)
-          return (
-            <div
-              className={classNames(_className, transitionClass)}
-              role="alert"
-              {...rest}
-              ref={forkedRef}
-            >
-              {children}
-              {dismissible && <CCloseButton onClick={() => setVisible(false)} />}
-            </div>
-          )
-        }}
+        {(state) => (
+          <div
+            className={classNames(
+              'alert',
+              variant === 'solid' ? `bg-${color} text-white` : `alert-${color}`,
+              {
+                'alert-dismissible fade': dismissible,
+                show: state === 'entered',
+              },
+              className,
+            )}
+            role="alert"
+            {...rest}
+            ref={forkedRef}
+          >
+            {children}
+            {dismissible && <CCloseButton onClick={() => setVisible(false)} />}
+          </div>
+        )}
       </Transition>
     )
   },

packages/coreui-react/src/components/alert/CAlertHeading.tsx

@@ -15,10 +15,8 @@ export interface CAlertHeadingProps extends HTMLAttributes<HTMLHeadingElement> {
 
 export const CAlertHeading = forwardRef<HTMLHeadingElement, CAlertHeadingProps>(
   ({ children, className, component: Component = 'h4', ...rest }, ref) => {
-    const _className = classNames('alert-heading', className)
-
     return (
-      <Component className={_className} {...rest} ref={ref}>
+      <Component className={classNames('alert-heading', className)} {...rest} ref={ref}>
         {children}
       </Component>
     )

packages/coreui-react/src/components/alert/CAlertLink.tsx

@@ -13,10 +13,8 @@ export interface CAlertLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement>
 
 export const CAlertLink = forwardRef<HTMLAnchorElement, CAlertLinkProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('alert-link', className)
-
     return (
-      <CLink className={_className} {...rest} ref={ref}>
+      <CLink className={classNames('alert-link', className)} {...rest} ref={ref}>
         {children}
       </CLink>
     )

packages/coreui-react/src/components/alert/__tests__/__snapshots__/CAlert.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`CAlert customize 1`] = `
 <div>
   <div
-    class="alert bg-secondary text-white alert-dismissible fade bazinga show"
+    class="alert bg-secondary text-white alert-dismissible fade show bazinga"
     role="alert"
   >
     Test

packages/coreui-react/src/components/avatar/CAvatar.tsx

@@ -46,20 +46,23 @@ export interface CAvatarProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CAvatar = forwardRef<HTMLDivElement, CAvatarProps>(
   ({ children, className, color, shape, size, src, status, textColor, ...rest }, ref) => {
-    const _className = classNames(
-      'avatar',
-      {
-        [`bg-${color}`]: color,
-        [`avatar-${size}`]: size,
-        [`text-${textColor}`]: textColor,
-      },
-      shape,
-      className,
-    )
     const statusClassName = status && classNames('avatar-status', `bg-${status}`)
 
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div
+        className={classNames(
+          'avatar',
+          {
+            [`bg-${color}`]: color,
+            [`avatar-${size}`]: size,
+            [`text-${textColor}`]: textColor,
+          },
+          shape,
+          className,
+        )}
+        {...rest}
+        ref={ref}
+      >
         {src ? <img src={src} className="avatar-img" /> : children}
         {status && <span className={statusClassName}></span>}
       </div>