use clsx instead of classnames for consistency

sourcegraph · Feb 19, 2024 · 884c12e · 884c12e
1 parent 5b757ed
commit 884c12e
Show file tree

Hide file tree

Showing 3 changed files with 2,820 additions and 4,941 deletions.
diff --git a/lib/ui-react/package.json b/lib/ui-react/package.json
@@ -30,7 +30,7 @@
   "dependencies": {
     "@opencodegraph/schema": "workspace:*",
     "@opencodegraph/ui-standalone": "workspace:*",
-    "classnames": "^2.3.2"
+    "clsx": "^2.0.0"
   },
   "devDependencies": {
     "@types/react": "18.2.37",

diff --git a/lib/ui-react/src/itemChip/ItemChip.tsx b/lib/ui-react/src/itemChip/ItemChip.tsx
@@ -1,5 +1,5 @@
 import { type Item } from '@opencodegraph/schema'
-import classNames from 'classnames'
+import clsx from 'clsx'
 import React, { useCallback, useRef, useState } from 'react'
 import styles from './ItemChip.module.css'
 import { Popover } from './Popover'
@@ -21,14 +21,14 @@ export const ItemChip: React.FunctionComponent<{
     const anchorRef = useRef<HTMLElement>(null)
 
     return (
-        <aside className={classNames(styles.item, hasDetail ? styles.itemHasDetail : null, className)} ref={anchorRef}>
+        <aside className={clsx(styles.item, hasDetail ? styles.itemHasDetail : null, className)} ref={anchorRef}>
             <header onMouseEnter={showPopover} onMouseLeave={hidePopover} onFocus={showPopover} onBlur={hidePopover}>
                 <ItemTitle title={item.title} />
                 {item.url && <a className={styles.stretchedLink} aria-hidden={true} href={item.url} />}
             </header>
             {hasDetail && anchorRef.current && (
                 <Popover anchor={anchorRef.current} visible={popoverVisible}>
-                    <aside className={classNames(styles.popoverContent, popoverClassName)}>
+                    <aside className={clsx(styles.popoverContent, popoverClassName)}>
                         <ItemDetail title={item.title} detail={item.detail} image={item.image} />
                     </aside>
                 </Popover>
@@ -65,7 +65,7 @@ export const ItemChipList: React.FunctionComponent<{
     chipClassName?: string
     popoverClassName?: string
 }> = ({ items, className, chipClassName, popoverClassName }) => (
-    <div className={classNames(styles.list, className)}>
+    <div className={clsx(styles.list, className)}>
         {items.map(item => (
             <ItemChip key={item.id} item={item} className={chipClassName} popoverClassName={popoverClassName} />
         ))}