refactor: SOL-122: replace classnames with clsx (#656)

refactor: SOL-122: replace classnames with clsx

site/components/cart/CartItem/CartItem.tsx

@@ -1,5 +1,5 @@
 import { ChangeEvent, FocusEventHandler, useEffect, useState } from 'react'
-import cn from 'classnames'
+import cn from 'clsx'
 import Image from 'next/image'
 import Link from 'next/link'
 import s from './CartItem.module.css'

site/components/cart/CartSidebarView/CartSidebarView.tsx

@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import Link from 'next/link'
 import { FC } from 'react'
 import s from './CartSidebarView.module.css'

site/components/checkout/PaymentMethodView/PaymentMethodView.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import cn from 'classnames'
+import cn from 'clsx'
 
 import useAddCard from '@framework/customer/card/use-add-item'
 import { Button, Text } from '@components/ui'

site/components/checkout/ShippingView/ShippingView.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import cn from 'classnames'
+import cn from 'clsx'
 
 import Button from '@components/ui/Button'
 import { useUI } from '@components/ui/context'

site/components/checkout/ShippingWidget/ShippingWidget.tsx

@@ -1,7 +1,6 @@
 import { FC } from 'react'
 import s from './ShippingWidget.module.css'
 import { ChevronRight, MapPin, Check } from '@components/icons'
-import cn from 'classnames'
 
 interface ComponentProps {
   onClick?: () => any

site/components/common/FeatureBar/FeatureBar.tsx

@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import s from './FeatureBar.module.css'
 
 interface FeatureBarProps {

site/components/common/Footer/Footer.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import cn from 'classnames'
+import cn from 'clsx'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import type { Page } from '@commerce/types/page'

site/components/common/I18nWidget/I18nWidget.tsx

@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import Link from 'next/link'
 import { FC, useState } from 'react'
 import { useRouter } from 'next/router'

site/components/common/Layout/Layout.tsx

@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import React, { FC } from 'react'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'

site/components/common/Navbar/NavbarRoot.tsx

@@ -1,6 +1,6 @@
 import { FC, useState, useEffect } from 'react'
 import throttle from 'lodash.throttle'
-import cn from 'classnames'
+import cn from 'clsx'
 import s from './Navbar.module.css'
 
 const NavbarRoot: FC = ({ children }) => {

site/components/common/Searchbar/Searchbar.tsx

@@ -1,5 +1,5 @@
 import { FC, memo, useEffect } from 'react'
-import cn from 'classnames'
+import cn from 'clsx'
 import s from './Searchbar.module.css'
 import { useRouter } from 'next/router'
 

site/components/common/SidebarLayout/SidebarLayout.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import { Cross, ChevronLeft } from '@components/icons'
 import { UserNav } from '@components/common'
-import cn from 'classnames'
+import cn from 'clsx'
 import s from './SidebarLayout.module.css'
 
 type ComponentProps = { className?: string } & (

site/components/common/UserNav/DropdownMenu.tsx

@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import Link from 'next/link'
 import { FC, useRef, useState, useEffect } from 'react'
 import { useTheme } from 'next-themes'

site/components/common/UserNav/UserNav.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import Link from 'next/link'
-import cn from 'classnames'
+import cn from 'clsx'
 import type { LineItem } from '@commerce/types/cart'
 import useCart from '@framework/cart/use-cart'
 import useCustomer from '@framework/customer/use-customer'

site/components/product/ProductCard/ProductCard.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import cn from 'classnames'
+import cn from 'clsx'
 import Link from 'next/link'
 import type { Product } from '@commerce/types/product'
 import s from './ProductCard.module.css'

site/components/product/ProductSlider/ProductSlider.tsx

@@ -6,7 +6,7 @@ import React, {
   useRef,
   useEffect,
 } from 'react'
-import cn from 'classnames'
+import cn from 'clsx'
 import { a } from '@react-spring/web'
 import s from './ProductSlider.module.css'
 import ProductSliderControl from '../ProductSliderControl'

site/components/product/ProductSliderControl/ProductSliderControl.tsx

@@ -1,5 +1,5 @@
 import { FC, MouseEventHandler, memo } from 'react'
-import cn from 'classnames'
+import cn from 'clsx'
 import s from './ProductSliderControl.module.css'
 import { ArrowLeft, ArrowRight } from '@components/icons'
 

site/components/product/ProductTag/ProductTag.tsx

@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import { inherits } from 'util'
 import s from './ProductTag.module.css'
 

site/components/product/ProductView/ProductView.tsx

@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import Image from 'next/image'
 import { NextSeo } from 'next-seo'
 import s from './ProductView.module.css'

site/components/product/Swatch/Swatch.tsx

@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import React from 'react'
 import s from './Swatch.module.css'
 import { Check } from '@components/icons'

site/components/search.tsx

@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import type { SearchPropsType } from '@lib/search-props'
 import Link from 'next/link'
 import { useState } from 'react'

site/components/ui/Button/Button.tsx

@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import React, {
   forwardRef,
   ButtonHTMLAttributes,

site/components/ui/Collapse/Collapse.tsx

@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import React, { FC, ReactNode, useState } from 'react'
 import s from './Collapse.module.css'
 import { ChevronRight } from '@components/icons'

site/components/ui/Container/Container.tsx

@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import React, { FC } from 'react'
 
 interface ContainerProps {

site/components/ui/Grid/Grid.tsx

@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import { FC, ReactNode, Component } from 'react'
 import s from './Grid.module.css'
 

site/components/ui/Input/Input.tsx

@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import s from './Input.module.css'
 import React, { InputHTMLAttributes } from 'react'
 

site/components/ui/Marquee/Marquee.tsx

@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import s from './Marquee.module.css'
 import { FC, ReactNode, Component, Children } from 'react'
 import { default as FastMarquee } from 'react-fast-marquee'

site/components/ui/Quantity/Quantity.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import s from './Quantity.module.css'
 import { Cross, Plus, Minus } from '@components/icons'
-import cn from 'classnames'
+import cn from 'clsx'
 export interface QuantityProps {
   value: number
   increase: () => any

site/components/ui/Rating/Rating.tsx

@@ -1,7 +1,7 @@
 import { FC, memo } from 'react'
 import rangeMap from '@lib/range-map'
 import { Star } from '@components/icons'
-import cn from 'classnames'
+import cn from 'clsx'
 
 export interface RatingProps {
   value: number

site/components/ui/Sidebar/Sidebar.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect, useRef } from 'react'
 import s from './Sidebar.module.css'
-import cn from 'classnames'
+import cn from 'clsx'
 import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'
 
 interface SidebarProps {

site/components/ui/Skeleton/Skeleton.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react'
-import cn from 'classnames'
+import cn from 'clsx'
 import px from '@lib/to-pixels'
 import s from './Skeleton.module.css'
 

site/components/ui/Text/Text.tsx

@@ -3,7 +3,7 @@ import React, {
   JSXElementConstructor,
   CSSProperties,
 } from 'react'
-import cn from 'classnames'
+import cn from 'clsx'
 import s from './Text.module.css'
 
 interface TextProps {

site/components/wishlist/WishlistButton/WishlistButton.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useState } from 'react'
-import cn from 'classnames'
+import cn from 'clsx'
 import { useUI } from '@components/ui'
 import { Heart } from '@components/icons'
 import useAddItem from '@framework/wishlist/use-add-item'

site/components/wishlist/WishlistCard/WishlistCard.tsx

@@ -1,5 +1,5 @@
 import { FC, useState } from 'react'
-import cn from 'classnames'
+import cn from 'clsx'
 import Link from 'next/link'
 import Image from 'next/image'
 import s from './WishlistCard.module.css'

site/package.json

@@ -27,7 +27,7 @@
     "@vercel/commerce-vendure": "^0.0.1",
     "autoprefixer": "^10.4.2",
     "body-scroll-lock": "^4.0.0-beta.0",
-    "classnames": "^2.3.1",
+    "clsx": "^1.1.1",
     "email-validator": "^2.0.4",
     "js-cookie": "^3.0.1",
     "keen-slider": "^6.6.3",

yarn.lock

@@ -1834,11 +1834,6 @@ chokidar@^3.5.2:
   optionalDependencies:
     fsevents "~2.3.2"
 
-classnames@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
-  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
-
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@@ -1922,6 +1917,11 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
+clsx@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"