chore: swap out classnames package for cn utility (clsx) (#4477)

* swap out classnames package * update package
cds-snc · Oct 28, 2024 · 97eab15 · 97eab15
1 parent e843f41
commit 97eab15
Show file tree

Hide file tree

Showing 21 changed files with 43 additions and 114 deletions.
diff --git a/...rms)/[locale]/(app administration)/admin/(no nav)/view-templates/components/TextInput.tsx b/...rms)/[locale]/(app administration)/admin/(no nav)/view-templates/components/TextInput.tsx
@@ -1,4 +1,4 @@
-import classnames from "classnames";
+import { cn } from "@lib/utils";
 import { InputFieldProps, HTMLTextInputTypeAttribute } from "@lib/types";
 import { ErrorMessage } from "@clientComponents/forms";
 
@@ -20,7 +20,7 @@ export const TextInput = ({
   autoComplete,
   error,
 }: TextInputProps): React.ReactElement => {
-  const classes = classnames("gc-input-text", className);
+  const classes = cn("gc-input-text", className);
   return (
     <>
       {error && <ErrorMessage id={"errorMessage" + id}>{error}</ErrorMessage>}

diff --git a/app/(gcforms)/[locale]/(form filler)/id/[...props]/page.tsx b/app/(gcforms)/[locale]/(form filler)/id/[...props]/page.tsx
@@ -1,5 +1,5 @@
 import { getPublicTemplateByID } from "@lib/templates";
-import classnames from "classnames";
+import { cn } from "@lib/utils";
 import { TextPage, ClosedPage } from "@clientComponents/forms";
 import { getRenderedForm } from "@lib/formBuilder";
 import { dateHasPast } from "@lib/utils";
@@ -56,7 +56,7 @@ export default async function Page({
   }
 
   const language = locale as "en" | "fr";
-  const classes = classnames("gc-form-wrapper");
+  const classes = cn("gc-form-wrapper");
   const currentForm = getRenderedForm(formRecord, language);
   const formTitle = formRecord.form[getLocalizedProperty("title", language)] as string;
   const isAllowGrouping = allowGrouping();

diff --git a/app/(gcforms)/[locale]/(support)/components/client/TextArea.tsx b/app/(gcforms)/[locale]/(support)/components/client/TextArea.tsx
@@ -1,4 +1,4 @@
-import classnames from "classnames";
+import { cn } from "@lib/utils";
 import { ErrorMessage } from "@clientComponents/forms";
 import { InputFieldProps } from "@lib/types";
 
@@ -18,7 +18,7 @@ export const TextArea = ({
   placeholder,
   error,
 }: TextAreaProps & JSX.IntrinsicElements["textarea"]): React.ReactElement => {
-  const classes = classnames("gc-textarea", className);
+  const classes = cn("gc-textarea", className);
   return (
     <>
       {error && <ErrorMessage id={"errorMessage" + id}>{error}</ErrorMessage>}

diff --git a/app/(gcforms)/[locale]/(support)/components/client/TextInput.tsx b/app/(gcforms)/[locale]/(support)/components/client/TextInput.tsx
@@ -1,4 +1,4 @@
-import classnames from "classnames";
+import { cn } from "@lib/utils";
 import { InputFieldProps, HTMLTextInputTypeAttribute } from "@lib/types";
 import { ErrorMessage } from "@clientComponents/forms";
 
@@ -20,7 +20,7 @@ export const TextInput = ({
   autoComplete,
   error,
 }: TextInputProps): React.ReactElement => {
-  const classes = classnames("gc-input-text", className);
+  const classes = cn("gc-input-text", className);
   return (
     <>
       {error && <ErrorMessage id={"errorMessage" + id}>{error}</ErrorMessage>}

diff --git a/app/(gcforms)/[locale]/(user authentication)/components/client/forms/Alert.tsx b/app/(gcforms)/[locale]/(user authentication)/components/client/forms/Alert.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from "react";
-import classnames from "classnames";
+import { cn } from "@lib/utils";
 import { useTranslation } from "@i18n/client";
 import { Button } from "@clientComponents/globals";
 
@@ -35,7 +35,7 @@ export const Alert = ({
 }: AlertProps & JSX.IntrinsicElements["div"]): React.ReactElement => {
   const { t } = useTranslation("common");
   const refFocus = useRef<HTMLDivElement>(null);
-  const classes = classnames(
+  const classes = cn(
     "gc-alert",
     {
       "gc-alert--success": type === ErrorStatus.SUCCESS,

diff --git a/app/(gcforms)/[locale]/(user authentication)/components/client/forms/Description.tsx b/app/(gcforms)/[locale]/(user authentication)/components/client/forms/Description.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import classnames from "classnames";
+import { cn } from "@lib/utils";
 
 export interface DescriptionProps {
   children: string | undefined;
@@ -10,7 +10,7 @@ export interface DescriptionProps {
 export const Description = (props: DescriptionProps): React.ReactElement => {
   const { children, className, id } = props;
 
-  const classes = classnames("gc-description", className);
+  const classes = cn("gc-description", className);
   return (
     <div id={`desc-${id}`} className={classes} data-testid="description">
       {children &&

diff --git a/app/(gcforms)/[locale]/(user authentication)/components/client/forms/Dropdown.tsx b/app/(gcforms)/[locale]/(user authentication)/components/client/forms/Dropdown.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import classnames from "classnames";
+import { cn } from "@lib/utils";
 import { useTranslation } from "@i18n/client";
 import { ErrorMessage } from "@clientComponents/forms";
 import { InputFieldProps } from "@lib/types";
@@ -38,7 +38,7 @@ export const Dropdown = (props: DropdownProps): React.ReactElement => {
     onChange,
   } = props;
   const { t } = useTranslation("common");
-  const classes = classnames("gc-dropdown", className);
+  const classes = cn("gc-dropdown", className);
 
   const initialDropdownOption = <option value="">{t("dropdown-initial-option-text")}</option>;
 

diff --git a/app/(gcforms)/[locale]/(user authentication)/components/client/forms/Label.tsx b/app/(gcforms)/[locale]/(user authentication)/components/client/forms/Label.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import classnames from "classnames";
+import { cn } from "@lib/utils";
 import { useTranslation } from "@i18n/client";
 import { ValidationProperties } from "@lib/types";
 
@@ -32,7 +32,7 @@ export const Label = (props: LabelProps): React.ReactElement => {
     lang,
   } = props;
 
-  const classes = classnames(
+  const classes = cn(
     {
       "gc-label": !srOnly,
       "gc-sr-only": srOnly,

diff --git a/app/(gcforms)/[locale]/(user authentication)/components/client/forms/TextInput.tsx b/app/(gcforms)/[locale]/(user authentication)/components/client/forms/TextInput.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import classnames from "classnames";
+import { cn } from "@lib/utils";
 import { ErrorMessage } from "@clientComponents/forms";
 import { InputFieldProps, HTMLTextInputTypeAttribute } from "@lib/types";
 import { useTranslation } from "@i18n/client";
@@ -24,7 +24,7 @@ export const TextInput = (
     maxLength,
     validationError,
   } = props;
-  const classes = classnames("gc-input-text", className);
+  const classes = cn("gc-input-text", className);
   const { t } = useTranslation("common");
 
   const [remainingCharacters, setRemainingCharacters] = useState(maxLength ?? 0);

diff --git a/components/clientComponents/forms/AddressComplete/ManagedCombobox.tsx b/components/clientComponents/forms/AddressComplete/ManagedCombobox.tsx
@@ -1,7 +1,6 @@
 "use client";
 import React, { useState, useImperativeHandle, useEffect } from "react";
 import { InputFieldProps } from "@lib/types";
-import classnames from "classnames";
 import { useField } from "formik";
 import { ErrorMessage } from "@clientComponents/forms";
 import { useCombobox } from "downshift";
@@ -29,7 +28,7 @@ export const ManagedCombobox = React.forwardRef(
       useFilter = true,
       placeholderText = "",
     } = props;
-    const classes = classnames("gc-combobox gcds-input-wrapper relative", className);
+    const classes = cn("gc-combobox gcds-input-wrapper relative", className);
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [field, meta, helpers] = useField(props);
@@ -100,7 +99,7 @@ export const ManagedCombobox = React.forwardRef(
         />
 
         <ul
-          className={classnames({ hidden: !isOpen || items.length === 0 })}
+          className={cn({ hidden: !isOpen || items.length === 0 })}
           {...getMenuProps()}
           data-testid="combobox-listbox"
         >

diff --git a/components/clientComponents/forms/Alert/Alert.tsx b/components/clientComponents/forms/Alert/Alert.tsx
@@ -1,6 +1,6 @@
 "use client";
 import React, { useEffect, useRef } from "react";
-import classnames from "classnames";
+import { cn } from "@lib/utils";
 import { useTranslation } from "@i18n/client";
 import { Button } from "@clientComponents/globals";
 
@@ -36,7 +36,7 @@ export const Alert = ({
 }: AlertProps & JSX.IntrinsicElements["div"]): React.ReactElement => {
   const { t } = useTranslation("common");
   const refFocus = useRef<HTMLDivElement>(null);
-  const classes = classnames(
+  const classes = cn(
     "gc-alert",
     {
       "gc-alert--success": type === ErrorStatus.SUCCESS,

diff --git a/components/clientComponents/forms/Description/Description.tsx b/components/clientComponents/forms/Description/Description.tsx
@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import classnames from "classnames";
+import { cn } from "@lib/utils";
 
 export interface DescriptionProps {
   children: string | undefined;
@@ -11,7 +11,7 @@ export interface DescriptionProps {
 export const Description = (props: DescriptionProps): React.ReactElement => {
   const { children, className, id } = props;
 
-  const classes = classnames("gc-description", className);
+  const classes = cn("gc-description", className);
   return (
     <div id={`desc-${id}`} className={classes} data-testid="description">
       {children &&

diff --git a/components/clientComponents/forms/DynamicRow/DynamicRow.tsx b/components/clientComponents/forms/DynamicRow/DynamicRow.tsx
@@ -1,6 +1,6 @@
 "use client";
 import React, { useState, useEffect, createRef, useRef } from "react";
-import classnames from "classnames";
+import { cn } from "@lib/utils";
 import { useField } from "formik";
 import { GenerateElement } from "@lib/formBuilder";
 import { FormElement } from "@lib/types";
@@ -113,7 +113,7 @@ export const DynamicGroup = (props: DynamicGroupProps): React.ReactElement => {
     focusedRow.current = index > 0 ? index - 1 : 0;
   };
 
-  const classes = classnames("gc-form-group", { "gc-form-group--error": error }, className);
+  const classes = cn("gc-form-group", { "gc-form-group--error": error }, className);
 
   const addButtonLabel = addButtonText || t("dynamicRow.add") + " " + rowLabel;
   const deleteButtonLabel = removeButtonText || t("dynamicRow.delete") + " " + rowLabel;

diff --git a/components/clientComponents/forms/ErrorMessage/ErrorMessage.tsx b/components/clientComponents/forms/ErrorMessage/ErrorMessage.tsx
@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import classnames from "classnames";
+import { cn } from "@lib/utils";
 
 export interface ErrorMessageProps {
   children: React.ReactNode;
@@ -11,7 +11,7 @@ export interface ErrorMessageProps {
 export const ErrorMessage = (props: ErrorMessageProps): React.ReactElement => {
   const { children, className, id } = props;
 
-  const classes = classnames("gc-error-message", className);
+  const classes = cn("gc-error-message", className);
 
   return (
     <p data-testid="errorMessage" className={classes} id={id} role="alert">

diff --git a/components/clientComponents/forms/FileInput/FileInput.tsx b/components/clientComponents/forms/FileInput/FileInput.tsx
@@ -1,14 +1,13 @@
 "use client";
 import React, { useState, useRef } from "react";
 import { useField } from "formik";
-import classNames from "classnames";
+import { cn } from "@lib/utils";
 import { useTranslation } from "@i18n/client";
 import { ErrorMessage } from "@clientComponents/forms";
 import { InputFieldProps } from "@lib/types";
 import { htmlInputAccept } from "@lib/validation/fileValidationClientSide";
 import { CancelIcon } from "@serverComponents/icons";
 import { themes } from "@clientComponents/globals/Buttons/themes";
-import { cn } from "@lib/utils";
 
 interface FileInputProps extends InputFieldProps {
   error?: boolean;
@@ -41,7 +40,7 @@ export const FileInput = (props: FileInputProps): React.ReactElement => {
     setFileSize(0);
     setValue({});
   };
-  const classes = classNames(
+  const classes = cn(
     "gc-file-input",
     disabled ? "is-disabled" : "",
     allowMulti ? "file-up--compact" : ""

diff --git a/components/clientComponents/forms/Form/Form.tsx b/components/clientComponents/forms/Form/Form.tsx
@@ -9,7 +9,7 @@ import { logMessage } from "@lib/logger";
 import { useTranslation } from "@i18n/client";
 import { TFunction } from "i18next";
 import Loader from "../../globals/Loader";
-import classNames from "classnames";
+import { cn } from "@lib/utils";
 import { Responses, PublicFormRecord, Validate } from "@lib/types";
 import { ErrorStatus } from "../Alert/Alert";
 import { submitForm } from "app/(gcforms)/[locale]/(form filler)/id/[...props]/actions";
@@ -75,7 +75,7 @@ const SubmitButton: React.FC<SubmitButtonProps> = ({ getFormDelay, formID, formT
   return (
     <>
       <div
-        className={classNames({
+        className={cn({
           "border-l-2": submitTooEarly,
           "border-red-default": submitTooEarly && formTimerState.remainingTime > 0,
           "border-green-default": submitTooEarly && formTimerState.remainingTime === 0,

diff --git a/components/clientComponents/forms/FormGroup/FormGroup.tsx b/components/clientComponents/forms/FormGroup/FormGroup.tsx
@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import classnames from "classnames";
+import { cn } from "@lib/utils";
 
 interface FormGroupProps {
   children: React.ReactNode;
@@ -13,12 +13,7 @@ interface FormGroupProps {
 export const FormGroup = (props: FormGroupProps): React.ReactElement => {
   const { children, name, className, ariaDescribedBy, error } = props;
 
-  const classes = classnames(
-    "gc-form-group",
-    "focus-group",
-    { "gc-form-group--error": error },
-    className
-  );
+  const classes = cn("gc-form-group", "focus-group", { "gc-form-group--error": error }, className);
 
   return (
     <fieldset

diff --git a/components/clientComponents/forms/Label/Label.tsx b/components/clientComponents/forms/Label/Label.tsx
@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import classnames from "classnames";
+import { cn } from "@lib/utils";
 import { useTranslation } from "@i18n/client";
 import { ValidationProperties } from "@lib/types";
 
@@ -33,7 +33,7 @@ export const Label = (props: LabelProps): React.ReactElement => {
     lang,
   } = props;
 
-  const classes = classnames(
+  const classes = cn(
     {
       "gc-label": !srOnly,
       "gc-sr-only": srOnly,

diff --git a/components/clientComponents/forms/RichText/RichText.tsx b/components/clientComponents/forms/RichText/RichText.tsx
@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import classnames from "classnames";
+import { cn } from "@lib/utils";
 import Markdown from "markdown-to-jsx";
 
 interface RichTextProps {
@@ -62,7 +62,7 @@ export const RichText = (props: RichTextProps): React.ReactElement | null => {
     return null;
   }
 
-  const classes = classnames("gc-richText", className);
+  const classes = cn("gc-richText", className);
   return (
     <div data-testid="richText" className={classes} id={id} {...(lang && { lang: lang })}>
       <Markdown

diff --git a/package.json b/package.json
@@ -67,8 +67,7 @@
     "@radix-ui/react-tooltip": "^1.1.1",
     "@zitadel/node": "^2.0.21",
     "axios": "1.7.7",
-    "classnames": "2.4.0",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.1",
     "copy-to-clipboard": "3.3.3",
     "csv-writer": "^1.6.0",
     "d3-hierarchy": "^3.1.2",
@@ -128,7 +127,6 @@
     "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
-    "@types/classnames": "^2.3.1",
     "@types/cypress": "^1.1.3",
     "@types/d3-hierarchy": "^3",
     "@types/formidable": "^2.0.6",