replaces classnames with clsx

Vizzuality · Sep 25, 2023 · f862a90 · f862a90
1 parent 56f8afd
commit f862a90
Show file tree

Hide file tree

Showing 80 changed files with 252 additions and 310 deletions.
diff --git a/app/.eslintrc.js b/app/.eslintrc.js
@@ -62,11 +62,6 @@ module.exports = {
             pattern: '@react**',
             group: 'builtin',
           },
-          {
-            pattern: 'classnames',
-            group: 'builtin',
-            position: 'after',
-          },
           {
             pattern: 'lodash-es/**',
             group: 'builtin',

diff --git a/app/components/breadcrumb/component.tsx b/app/components/breadcrumb/component.tsx
@@ -1,8 +1,7 @@
 import React, { ButtonHTMLAttributes } from 'react';
 
-import cx from 'classnames';
-
 import Icon from 'components/icon';
+import { cn } from 'utils/cn';
 
 import ARROW_LEFT_SVG from 'svgs/ui/arrow-left.svg?sprite';
 import FOLDER_SVG from 'svgs/ui/folder.svg?sprite';
@@ -21,7 +20,7 @@ export const Breadcrum: React.FC<BreadcrumProps> = ({
   <div className="inline-flex">
     <button
       type="button"
-      className={cx({
+      className={cn({
         'flex h-6 items-center overflow-hidden text-sm text-primary-500 hover:text-primary-300 focus:outline-none':
           true,
         [className]: !!className,

diff --git a/app/components/carousel/component.tsx b/app/components/carousel/component.tsx
@@ -1,10 +1,9 @@
 import React, { ReactElement, useEffect, useRef, useState } from 'react';
 
-import cx from 'classnames';
-
 import Flicking, { ERROR_CODE, FlickingError } from '@egjs/react-flicking';
 
 import Icon from 'components/icon';
+import { cn } from 'utils/cn';
 
 import ARROW_LEFT_SVG from 'svgs/ui/arrow-left.svg?sprite';
 import ARROW_RIGHT_SVG from 'svgs/ui/arrow-right.svg?sprite';
@@ -104,7 +103,7 @@ export const Carousel: React.FC<CarouselProps> = ({ slides }: CarouselProps) =>
               onClick={() => {
                 slider.current.moveTo(i);
               }}
-              className={cx({
+              className={cn({
                 'relative w-20': true,
                 'h-1 bg-blue-600': slide === i,
                 'h-0.5 bg-gray-400': slide !== i,

diff --git a/app/components/confirmation-prompt/component.tsx b/app/components/confirmation-prompt/component.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
 
-import classnames from 'classnames';
-
 import Button from 'components/button';
 import Icon from 'components/icon';
 import Modal from 'components/modal';
+import { cn } from 'utils/cn';
 
 import { ConfirmationPromptProps } from './types';
 
@@ -31,7 +30,7 @@ export const ConfirmationPrompt: React.FC<ConfirmationPromptProps> = ({
           {title}
         </div>
         <p
-          className={classnames({
+          className={cn({
             'my-4 text-sm sm:pr-32': true,
             'text-black underline': !!danger,
             'text-gray-100': !danger,
@@ -41,7 +40,7 @@ export const ConfirmationPrompt: React.FC<ConfirmationPromptProps> = ({
         </p>
       </header>
       <div
-        className={classnames({
+        className={cn({
           'flex items-end justify-between': true,
           'mt-10 sm:mt-12': !icon && !description,
           'mt-8': !icon && !!description,
@@ -50,7 +49,7 @@ export const ConfirmationPrompt: React.FC<ConfirmationPromptProps> = ({
         })}
       >
         <div
-          className={classnames({
+          className={cn({
             flex: true,
             'flex-row-reverse': !!danger,
           })}
@@ -81,7 +80,7 @@ export const ConfirmationPrompt: React.FC<ConfirmationPromptProps> = ({
         {icon && (
           <Icon
             icon={icon}
-            className={classnames({
+            className={cn({
               'flex-shrink-1 flex-grow-1 hidden sm:block': true,
               'ml-auto w-36': !iconClassName,
               [iconClassName]: !!iconClassName,

diff --git a/app/components/disclaimer/component.tsx b/app/components/disclaimer/component.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 
-import cx from 'classnames';
-
 import Icon from 'components/icon';
+import { cn } from 'utils/cn';
 
 import WARNING_SVG from 'svgs/notifications/warning.svg?sprite';
 
@@ -19,13 +18,13 @@ export interface DisclaimerProps {
 
 export const Disclaimer: React.FC<DisclaimerProps> = ({ children, type }: DisclaimerProps) => (
   <div
-    className={cx({
+    className={cn({
       'flex w-full items-center space-x-4 rounded-xl bg-gray-600 px-4 py-3 text-sm': true,
     })}
   >
     <Icon
       icon={WARNING_SVG}
-      className={cx({
+      className={cn({
         'z-10 h-6 w-6': true,
         [TYPE[type]]: true,
       })}

diff --git a/app/components/features/intersect-item/component.tsx b/app/components/features/intersect-item/component.tsx
@@ -2,11 +2,10 @@ import React, { ReactNode, MutableRefObject, useCallback, useMemo } from 'react'
 
 import { useInView } from 'react-intersection-observer';
 
-import cx from 'classnames';
-
 import Checkbox from 'components/forms/checkbox';
 import Select from 'components/forms/select';
 import Icon from 'components/icon';
+import { cn } from 'utils/cn';
 
 import SPLIT_SVG from 'svgs/ui/split.svg?sprite';
 
@@ -113,14 +112,14 @@ export const Item: React.FC<ItemProps> = ({
   return (
     <div
       ref={ref}
-      className={cx({
+      className={cn({
         'bg-white text-gray-600': true,
         [className]: !!className,
         invisible: !inView,
       })}
     >
       <header
-        className={cx({
+        className={cn({
           'px-4 pb-4 pt-2': true,
         })}
       >

diff --git a/app/components/features/raw-item/component.tsx b/app/components/features/raw-item/component.tsx
@@ -1,11 +1,10 @@
-import React, { MutableRefObject } from 'react';
+import React, { ComponentProps, MutableRefObject } from 'react';
 
 import { useInView } from 'react-intersection-observer';
 
-import cx from 'classnames';
-
 import Button from 'components/button';
 import InfoButton from 'components/info-button';
+import { cn } from 'utils/cn';
 
 export interface ItemProps {
   id: string | number;
@@ -38,7 +37,7 @@ export const Item: React.FC<ItemProps> = ({
   return (
     <div
       ref={ref}
-      className={cx({
+      className={cn({
         'bg-white px-0 py-6 text-black': true,
         [className]: !!className,
         invisible: !inView,
@@ -60,10 +59,12 @@ export const Item: React.FC<ItemProps> = ({
         </div>
         <div>
           <Button
-            theme={cx({
-              secondary: selected,
-              'secondary-alt': !selected,
-            })}
+            theme={
+              cn({
+                secondary: selected,
+                'secondary-alt': !selected,
+              }) as ComponentProps<typeof Button>['theme']
+            }
             size="xs"
             onClick={onToggleSelected}
           >

diff --git a/app/components/features/selected-item/component.tsx b/app/components/features/selected-item/component.tsx
@@ -1,7 +1,5 @@
 import React, { useCallback, useMemo, useState, ReactNode } from 'react';
 
-import cx from 'classnames';
-
 import { useFeatureFlags } from 'hooks/feature-flags';
 
 import Button from 'components/button';
@@ -10,6 +8,7 @@ import Select from 'components/forms/select';
 import Icon from 'components/icon';
 import InfoButton from 'components/info-button';
 import Tooltip from 'components/tooltip';
+import { cn } from 'utils/cn';
 
 import STRAT_1_IMG from 'images/info-buttons/img_strat_1.png';
 import STRAT_2_IMG from 'images/info-buttons/img_strat_2.png';
@@ -128,13 +127,13 @@ export const Item: React.FC<ItemProps> = ({
   // RENDER
   return (
     <div
-      className={cx({
+      className={cn({
         'bg-gray-800 text-white': true,
         [className]: !!className,
       })}
     >
       <header
-        className={cx({
+        className={cn({
           'border-l-4 px-4 py-2': true,
           'border-yellow-500': true,
         })}
@@ -153,7 +152,7 @@ export const Item: React.FC<ItemProps> = ({
                   aria-label="manage-see-on-map"
                   type="button"
                   onClick={() => setSplitOpen(!splitOpen)}
-                  className={cx({
+                  className={cn({
                     'flex h-5 w-5 items-center justify-center ': true,
                     'text-white': !splitSelected,
                     'text-yellow-500': !!splitSelected,
@@ -177,7 +176,7 @@ export const Item: React.FC<ItemProps> = ({
                 aria-label="manage-see-on-map"
                 type="button"
                 onClick={onSeeOnMap}
-                className={cx({
+                className={cn({
                   'flex h-5 w-5 items-center justify-center text-white': true,
                   'text-gray-400': !isShown,
                 })}

diff --git a/app/components/forms/error/component.tsx b/app/components/forms/error/component.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 
-import cx from 'classnames';
+import { cn } from 'utils/cn';
 
 export interface ErrorProps {
   children: ReactNode;
@@ -13,7 +13,7 @@ export const Error: React.FC<ErrorProps> = ({ children, visible, className }: Er
 
   return (
     <div
-      className={cx({
+      className={cn({
         'mb-5 rounded border border-red-600 bg-red-200 px-3 py-1 text-sm text-red-600': true,
         [className]: !!className,
       })}

diff --git a/app/components/forms/field/component.tsx b/app/components/forms/field/component.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import cx from 'classnames';
+
+import { cn } from 'utils/cn';
 
 export interface FieldProps {
   id: string;
@@ -41,7 +42,7 @@ export const Field: React.FC<FieldProps> = ({
 
   return (
     <div
-      className={cx({
+      className={cn({
         [className]: !!className,
       })}
     >

diff --git a/app/components/forms/input/component.tsx b/app/components/forms/input/component.tsx
@@ -1,10 +1,9 @@
 import React, { InputHTMLAttributes } from 'react';
 
-import cx from 'classnames';
-
 import { useFocus } from '@react-aria/interactions';
 
 import Icon from 'components/icon';
+import { cn } from 'utils/cn';
 
 const THEME = {
   dark: {
@@ -77,7 +76,7 @@ export const Input: React.FC<InputProps> = ({
       {icon && (
         <Icon
           icon={icon}
-          className={cx({
+          className={cn({
             'absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 transform': true,
             [THEME[theme].icon]: true,
           })}
@@ -88,7 +87,7 @@ export const Input: React.FC<InputProps> = ({
         {...props}
         ref={onReady}
         disabled={disabled}
-        className={cx({
+        className={cn({
           'form-input': true,
           [THEME[theme].base]: true,
           [THEME[theme].status[st]]: true,

diff --git a/app/components/forms/radio/component.tsx b/app/components/forms/radio/component.tsx
@@ -1,6 +1,6 @@
 import React, { InputHTMLAttributes } from 'react';
 
-import cx from 'classnames';
+import { cn } from 'utils/cn';
 
 const THEME = {
   dark: {
@@ -42,7 +42,7 @@ export const Radio: React.FC<RadioProps> = ({
       {...props}
       type="radio"
       disabled={disabled}
-      className={cx({
+      className={cn({
         'form-radio': true,
         [THEME[theme].base]: true,
         [THEME[theme].status[st]]: true,

diff --git a/app/components/forms/select/menu/component.tsx b/app/components/forms/select/menu/component.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 
-import cx from 'classnames';
-
 import THEME from 'components/forms/select/constants/theme';
 import { SelectMenuProps } from 'components/forms/select/types';
+import { cn } from 'utils/cn';
 
 export const SelectMenu: React.FC<SelectMenuProps> = ({
   theme,
@@ -13,7 +12,7 @@ export const SelectMenu: React.FC<SelectMenuProps> = ({
 }: SelectMenuProps) => {
   return (
     <div
-      className={cx({
+      className={cn({
         'overflow-hidden focus:outline-none': true,
         'pointer-events-none invisible': attributes?.popper?.['data-popper-reference-hidden'],
         [THEME[theme].open]: opened,