[dev-overlay] add and apply merge class names util (#75758)

Add and apply the merge multiple class names util.

Closes NDX-664

---------

Co-authored-by: Jiachi Liu <[email protected]>

Author: devjiwonchoi

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

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

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

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

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

@@ -2,6 +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 { cx } from '../../../../helpers/cx'
 
 interface ErrorFeedbackProps {
   errorCode: string
@@ -43,7 +44,7 @@ export function ErrorFeedback({ errorCode, className }: ErrorFeedbackProps) {
 
   return (
     <div
-      className={`error-feedback${className ? ` ${className}` : ''}`}
+      className={cx('error-feedback', className)}
       role="region"
       aria-label="Error feedback"
     >
@@ -57,15 +58,15 @@ export function ErrorFeedback({ errorCode, className }: ErrorFeedbackProps) {
           <button
             aria-label="Mark as helpful"
             onClick={() => handleFeedback(true)}
-            className={`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={`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 { 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={`nextjs-toast${className ? ' ' + 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,4 +1,5 @@
 import type { VersionInfo } from '../../../../../../../server/dev/parse-version-info'
+import { cx } from '../../helpers/cx'
 import { noop as css } from '../../helpers/noop-template'
 
 export function VersionStalenessInfo({
@@ -16,11 +17,13 @@ export function VersionStalenessInfo({
 
   return (
     <span
-      className={`nextjs-container-build-error-version-status dialog-exclude-closing-from-outside-click ${
-        isTurbopack ? 'turbopack-border' : ''
-      }`}
+      className={cx(
+        'nextjs-container-build-error-version-status',
+        'dialog-exclude-closing-from-outside-click',
+        isTurbopack && 'turbopack-border'
+      )}
     >
-      <Eclipse className={`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(' ')
+}