cx to cn

Co-authored-by: Jiachi Liu <inbox@huozhi.im>

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/copy-button/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { noop as css } from '../../helpers/noop-template'
-import { cn } from '../../helpers/merge-class-names'
+import { cx } from '../../helpers/cx'
 
 function useCopyLegacy(content: string) {
   type CopyState =
@@ -185,7 +185,7 @@ export function CopyButton({
       aria-disabled={isDisabled}
       disabled={isDisabled}
       data-nextjs-data-runtime-error-copy-button
-      className={cn(
+      className={cx(
         props.className,
         'nextjs-data-runtime-error-copy-button',
         `nextjs-data-runtime-error-copy-button--${copyState.state}`

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dialog/header.tsx

@@ -1,6 +1,6 @@
 import { DialogHeader } from '../../dialog/dialog-header'
 import { noop as css } from '../../../helpers/noop-template'
-import { cn } from '../../../helpers/merge-class-names'
+import { cx } from '../../../helpers/cx'
 
 type ErrorOverlayDialogHeaderProps = {
   children?: React.ReactNode
@@ -13,7 +13,7 @@ export function ErrorOverlayDialogHeader({
 }: ErrorOverlayDialogHeaderProps) {
   return (
     <DialogHeader
-      className={cn(
+      className={cx(
         'nextjs-container-errors-header',
         isTurbopack && 'nextjs-error-overlay-dialog-header-turbopack-background'
       )}

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-footer/error-feedback/error-feedback.tsx

@@ -2,7 +2,7 @@ import { useState, useCallback } from 'react'
 import { ThumbsUp } from '../../../../icons/thumbs/thumbs-up'
 import { ThumbsDown } from '../../../../icons/thumbs/thumbs-down'
 import { noop as css } from '../../../../helpers/noop-template'
-import { cn } from '../../../../helpers/merge-class-names'
+import { cx } from '../../../../helpers/cx'
 
 interface ErrorFeedbackProps {
   errorCode: string
@@ -44,7 +44,7 @@ export function ErrorFeedback({ errorCode, className }: ErrorFeedbackProps) {
 
   return (
     <div
-      className={cn('error-feedback', className)}
+      className={cx('error-feedback', className)}
       role="region"
       aria-label="Error feedback"
     >
@@ -58,15 +58,15 @@ export function ErrorFeedback({ errorCode, className }: ErrorFeedbackProps) {
           <button
             aria-label="Mark as helpful"
             onClick={() => handleFeedback(true)}
-            className={cn('feedback-button', voted === true && 'voted')}
+            className={cx('feedback-button', voted === true && 'voted')}
             type="button"
           >
             <ThumbsUp aria-hidden="true" />
           </button>
           <button
             aria-label="Mark as not helpful"
             onClick={() => handleFeedback(false)}
-            className={cn('feedback-button', voted === false && 'voted')}
+            className={cx('feedback-button', voted === false && 'voted')}
             type="button"
           >
             <ThumbsDown

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/toast/toast.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { cn } from '../../helpers/merge-class-names'
+import { cx } from '../../helpers/cx'
 export type ToastProps = React.HTMLProps<HTMLDivElement> & {
   children?: React.ReactNode
   onClick?: () => void
@@ -19,7 +19,7 @@ export const Toast: React.FC<ToastProps> = function Toast({
         e.preventDefault()
         return onClick?.()
       }}
-      className={cn('nextjs-toast', className)}
+      className={cx('nextjs-toast', className)}
     >
       <div data-nextjs-toast-wrapper>{children}</div>
     </div>

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/version-staleness-info/version-staleness-info.tsx

@@ -1,5 +1,5 @@
 import type { VersionInfo } from '../../../../../../../server/dev/parse-version-info'
-import { cn } from '../../helpers/merge-class-names'
+import { cx } from '../../helpers/cx'
 import { noop as css } from '../../helpers/noop-template'
 
 export function VersionStalenessInfo({
@@ -17,13 +17,13 @@ export function VersionStalenessInfo({
 
   return (
     <span
-      className={cn(
+      className={cx(
         'nextjs-container-build-error-version-status',
         'dialog-exclude-closing-from-outside-click',
         isTurbopack && 'turbopack-border'
       )}
     >
-      <Eclipse className={cn('version-staleness-indicator', indicatorClass)} />
+      <Eclipse className={cx('version-staleness-indicator', indicatorClass)} />
       <span data-nextjs-version-checker title={title}>
         {text}
       </span>{' '}

packages/next/src/client/components/react-dev-overlay/_experimental/internal/helpers/cx.test.ts

@@ -0,0 +1,27 @@
+import { cx } from './cx'
+
+describe('cx', () => {
+  it('should return an empty string for no arguments', () => {
+    expect(cx()).toBe('')
+  })
+
+  it('should join multiple string arguments with spaces', () => {
+    expect(cx('foo', 'bar', 'baz')).toBe('foo bar baz')
+  })
+
+  it('should filter out falsy values', () => {
+    expect(cx('foo', null, 'bar', undefined, 'baz', false)).toBe('foo bar baz')
+  })
+
+  it('should handle single string argument', () => {
+    expect(cx('foo')).toBe('foo')
+  })
+
+  it('should not add extra spaces when falsy values are between strings', () => {
+    expect(cx('foo', null, 'bar')).toBe('foo bar')
+  })
+
+  it('should handle all falsy values', () => {
+    expect(cx(null, undefined, false)).toBe('')
+  })
+})

packages/next/src/client/components/react-dev-overlay/_experimental/internal/helpers/cx.ts

@@ -0,0 +1,9 @@
+/**
+ * Merge multiple args to a single string with spaces. Useful for merging class names.
+ * @example
+ * cx('foo', 'bar') // 'foo bar'
+ * cx('foo', null, 'bar', undefined, 'baz', false) // 'foo bar baz'
+ */
+export function cx(...args: (string | undefined | null | false)[]): string {
+  return args.filter(Boolean).join(' ')
+}