Move Verbum comments from classnames to clsx (#37789)

Automattic · Jun 11, 2024 · 51d436e · 51d436e
1 parent 1d97e67
commit 51d436e
Show file tree

Hide file tree

Showing 14 changed files with 39 additions and 44 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/projects/packages/jetpack-mu-wpcom/changelog/move-verbum-to-clsx b/projects/packages/jetpack-mu-wpcom/changelog/move-verbum-to-clsx
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Move Verbum comments to clsx
diff --git a/projects/packages/jetpack-mu-wpcom/package.json b/projects/packages/jetpack-mu-wpcom/package.json
@@ -57,6 +57,7 @@
 		"@wordpress/i18n": "5.0.0",
 		"@wordpress/plugins": "7.0.0",
 		"@wordpress/url": "4.0.0",
+		"clsx": "2.1.1",
 		"preact": "^10.13.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",

diff --git a/...packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/EmailForm/index.tsx b/...packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/EmailForm/index.tsx
@@ -1,9 +1,10 @@
 import { signal, effect, batch, computed } from '@preact/signals';
+import clsx from 'clsx';
 import { useState, useEffect } from 'preact/hooks';
 import { translate } from '../../i18n';
 import { Name, Website, Email } from '../../images';
 import { mailLoginData, isMailFormInvalid, shouldStoreEmailData } from '../../state';
-import { classNames, getUserInfoCookie, isAuthRequired } from '../../utils';
+import { getUserInfoCookie, isAuthRequired } from '../../utils';
 import { NewCommentEmail } from '../new-comment-email';
 import { NewPostsEmail } from '../new-posts-email';
 import { EmailFormCookieConsent } from './email-form-cookie-consent';
@@ -76,7 +77,7 @@ export const EmailForm = ( { shouldShowEmailForm }: EmailFormProps ) => {
 
 	return (
 		<div
-			className={ classNames( 'verbum-form', {
+			className={ clsx( 'verbum-form', {
 				open: shouldShowEmailForm,
 			} ) }
 		>
@@ -86,7 +87,7 @@ export const EmailForm = ( { shouldShowEmailForm }: EmailFormProps ) => {
 						<label className="verbum__label">
 							<Email />
 							<input
-								className={ classNames( 'verbum-form__email', {
+								className={ clsx( 'verbum-form__email', {
 									'invalid-form-data': isValidEmail.value === false && isEmailTouched.value,
 								} ) }
 								type="email"
@@ -109,7 +110,7 @@ export const EmailForm = ( { shouldShowEmailForm }: EmailFormProps ) => {
 						<label className="verbum__label">
 							<Name />
 							<input
-								className={ classNames( 'verbum-form__name', {
+								className={ clsx( 'verbum-form__name', {
 									'invalid-form-data': isValidAuthor.value === false && isNameTouched.value,
 								} ) }
 								type="text"

diff --git a/...tpack-mu-wpcom/src/features/verbum-comments/src/components/SimpleSubscribeModal/index.tsx b/...tpack-mu-wpcom/src/features/verbum-comments/src/components/SimpleSubscribeModal/index.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { useEffect, useState, useRef } from 'preact/hooks';
 import { translate } from '../../i18n';
 import { userInfo, userLoggedIn, commentUrl, subscribeModalStatus } from '../../state';
@@ -6,7 +7,6 @@ import {
 	getSubscriptionModalViewCount,
 	setSubscriptionModalViewCount,
 	shouldShowSubscriptionModal,
-	classNames,
 } from '../../utils';
 import { SimpleSubscribeModalLoggedIn, SimpleSubscribeSetModalShowLoggedIn } from './logged-in';
 import { SimpleSubscribeModalLoggedOut } from './logged-out';
@@ -90,7 +90,7 @@ export const SimpleSubscribeModal = ( { closeModalHandler, email }: SimpleSubscr
 	return (
 		<div ref={ modalContainerRef } className="verbum-simple-subscribe-modal">
 			<div
-				className={ classNames( 'verbum-simple-subscribe-modal__content', {
+				className={ clsx( 'verbum-simple-subscribe-modal__content', {
 					'has-iframe': hasIframe,
 				} ) }
 			>

diff --git a/.../packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/comment-footer.tsx b/.../packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/comment-footer.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { translate } from '../i18n';
 import {
 	commentParent,
@@ -6,7 +7,6 @@ import {
 	isTrayOpen,
 	userLoggedIn,
 } from '../state';
-import { classNames } from '../utils';
 import { SettingsButton } from './settings-button';
 
 interface CommentFooterProps {
@@ -16,7 +16,7 @@ interface CommentFooterProps {
 export const CommentFooter = ( { toggleTray }: CommentFooterProps ) => {
 	return (
 		<div
-			className={ classNames( 'verbum-footer', {
+			className={ clsx( 'verbum-footer', {
 				'logged-in': userLoggedIn.value,
 			} ) }
 		>
@@ -30,7 +30,7 @@ export const CommentFooter = ( { toggleTray }: CommentFooterProps ) => {
 					name="submit"
 					type="submit"
 					id="comment-submit"
-					className={ classNames( {
+					className={ clsx( {
 						'is-busy': isSavingComment.value,
 					} ) }
 					disabled={ isReplyDisabled.value }

diff --git a/...ages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/comment-input-field.tsx b/...ages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/comment-input-field.tsx
@@ -1,8 +1,9 @@
+import clsx from 'clsx';
 import { forwardRef, type TargetedEvent } from 'preact/compat';
 import { useEffect, useState } from 'preact/hooks';
 import { translate } from '../i18n';
 import { commentParent, commentValue } from '../state';
-import { classNames, isFastConnection } from '../utils';
+import { isFastConnection } from '../utils';
 import { EditorPlaceholder } from './editor-placeholder';
 
 type CommentInputFieldProps = {
@@ -99,7 +100,7 @@ export const CommentInputField = forwardRef(
 							id="comment"
 							name="comment"
 							ref={ ref }
-							className={ classNames( {
+							className={ clsx( {
 								'editor-enabled': isGBEditorEnabled,
 							} ) }
 							style={ {

diff --git a/...packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/comment-message.tsx b/...packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/comment-message.tsx
@@ -1,4 +1,4 @@
-import { classNames } from '../utils';
+import clsx from 'clsx';
 
 interface ErrorMessageProps {
 	message: string | null;
@@ -11,7 +11,7 @@ export const CommentMessage = ( { message, isError }: ErrorMessageProps ) => {
 	}
 	return (
 		<div
-			className={ classNames( 'verbum-message', {
+			className={ clsx( 'verbum-message', {
 				'is-error': isError,
 			} ) }
 		>

diff --git a/...kages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/editor-placeholder.tsx b/...kages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/editor-placeholder.tsx
@@ -1,6 +1,6 @@
+import clsx from 'clsx';
 import { translate } from '../i18n';
 import { commentParent } from '../state';
-import { classNames } from '../utils';
 import { CustomLoadingSpinner } from './custom-loading-spinner';
 
 export const EditorPlaceholder = ( { onClick, loading } ) => {
@@ -12,7 +12,7 @@ export const EditorPlaceholder = ( { onClick, loading } ) => {
 			onKeyDown={ onClick }
 		>
 			<div
-				class={ classNames( 'editor__main loading-placeholder', {
+				class={ clsx( 'editor__main loading-placeholder', {
 					loading,
 				} ) }
 			>

diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/logged-in.tsx b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/logged-in.tsx
@@ -1,8 +1,9 @@
+import clsx from 'clsx';
 import useSubscriptionApi from '../hooks/useSubscriptionApi';
 import { translate } from '../i18n';
 import { Close } from '../images';
 import { isTrayOpen, subscriptionSettings, userInfo } from '../state';
-import { serviceData, classNames, isFastConnection } from '../utils';
+import { serviceData, isFastConnection } from '../utils';
 import { NewCommentEmail } from './new-comment-email';
 import { NewPostsEmail } from './new-posts-email';
 import { NewPostsNotifications } from './new-posts-notifications';
@@ -74,7 +75,7 @@ export const LoggedIn = ( { toggleTray, logout }: LoggedInProps ) => {
 
 	return (
 		<div
-			className={ classNames( 'verbum-subscriptions logged-in', {
+			className={ clsx( 'verbum-subscriptions logged-in', {
 				'no-options': ! hasSubOptions,
 			} ) }
 		>

diff --git a/...ects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/logged-out.tsx b/...ects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/logged-out.tsx
@@ -1,7 +1,8 @@
+import clsx from 'clsx';
 import { useEffect, useState } from 'preact/hooks';
 import { translate } from '../i18n';
 import { commentParent } from '../state';
-import { classNames, serviceData } from '../utils';
+import { serviceData } from '../utils';
 import { EmailForm } from './EmailForm';
 
 const { mustLogIn, requireNameEmail, commentRegistration } = VerbumComments;
@@ -87,12 +88,12 @@ export const LoggedOut = ( { login, canWeAccessCookies, loginWindow }: LoggedOut
 						<>
 							<div className="verbum-subscriptions__login-header">{ getLoginCommentText() }</div>
 							<div
-								className={ classNames( 'verbum-logins', {
+								className={ clsx( 'verbum-logins', {
 									'logging-in': activeService,
 								} ) }
 							>
 								<div
-									className={ classNames( 'verbum-logins__social-buttons', {
+									className={ clsx( 'verbum-logins__social-buttons', {
 										'show-form-content': ! mustLogIn,
 									} ) }
 								>
@@ -108,7 +109,7 @@ export const LoggedOut = ( { login, canWeAccessCookies, loginWindow }: LoggedOut
 												type="button"
 												key={ service }
 												onClick={ e => handleClick( e, service ) }
-												className={ classNames( 'social-button', service, {
+												className={ clsx( 'social-button', service, {
 													active: service === activeService,
 												} ) }
 											>
@@ -119,7 +120,7 @@ export const LoggedOut = ( { login, canWeAccessCookies, loginWindow }: LoggedOut
 								</div>
 								{ [ 'wordpress', 'facebook' ].includes( activeService ) && (
 									<div
-										className={ classNames( 'verbum-login__social-loading', {
+										className={ clsx( 'verbum-login__social-loading', {
 											'must-login': mustLogIn,
 										} ) }
 									>

diff --git a/...packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/settings-button.tsx b/...packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/settings-button.tsx
@@ -1,5 +1,6 @@
+import clsx from 'clsx';
 import { userInfo } from '../state';
-import { classNames, hasSubscriptionOptionsVisible } from '../utils';
+import { hasSubscriptionOptionsVisible } from '../utils';
 
 interface SettingsButtonProps {
 	expanded: boolean;
@@ -20,7 +21,7 @@ export const SettingsButton = ( { expanded, toggleSubscriptionTray }: SettingsBu
 			type="button"
 			aria-pressed={ expanded }
 			aria-expanded={ expanded }
-			className={ classNames( 'user-settings-button', {
+			className={ clsx( 'user-settings-button', {
 				open: expanded,
 				'no-subscriptions': ! subscriptionOptionsVisible,
 			} ) }

diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/index.tsx b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/index.tsx
@@ -1,4 +1,5 @@
 import { effect } from '@preact/signals';
+import clsx from 'clsx';
 import { render } from 'preact';
 import { useState, useEffect, useRef, useCallback } from 'preact/hooks';
 import { SimpleSubscribeModal } from './components/SimpleSubscribeModal';
@@ -24,7 +25,6 @@ import {
 	subscribeModalStatus,
 } from './state';
 import {
-	classNames,
 	canWeAccessCookies,
 	setUserInfoCookie,
 	addWordPressDomain,
@@ -219,7 +219,7 @@ const Verbum = ( { siteId }: VerbumComments ) => {
 		<>
 			<CommentInputField ref={ commentTextarea } handleOnKeyUp={ showTrayIfNewUser } />
 			<div
-				className={ classNames( 'comment-form__subscription-options', {
+				className={ clsx( 'comment-form__subscription-options', {
 					open: isTrayOpen.value,
 				} ) }
 			>

diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/utils.ts b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/utils.ts
@@ -2,24 +2,6 @@ import { translate } from './i18n';
 import { Facebook, Mail, WordPress } from './images';
 import type { UserInfo, VerbumComments } from './types';
 
-/**
- * Returns a string of class names from the arguments.
- * @param {...any} args - The arguments to be passed to the function.
- */
-export function classNames( ...args: Array< string | Record< string, boolean | string > > ) {
-	const result = [];
-	for ( let i = 0; i < args.length; i++ ) {
-		if ( typeof args[ i ] === 'object' ) {
-			result[ i ] = Object.keys( args[ i ] )
-				.filter( key => args[ i ][ key ] )
-				.join( ' ' );
-		} else if ( args[ i ] ) {
-			result[ i ] = args[ i ];
-		}
-	}
-	return result.join( ' ' );
-}
-
 export const serviceData = {
 	wordpress: {
 		cookieName: 'wpc_wpc',