From 073b000bc9bb97982fd103194ec30e0f965e41e7 Mon Sep 17 00:00:00 2001
From: Matej Lubej <matej.lubej@oasisprotocol.org>
Date: Thu, 7 Mar 2024 11:05:22 +0100
Subject: [PATCH] Add StringUtils clsx

---
 frontend/src/components/Button/index.tsx | 11 ++++++-----
 frontend/src/components/Card/index.tsx   |  3 ++-
 frontend/src/utils/string.utils.ts       |  7 +++++++
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Button/index.tsx b/frontend/src/components/Button/index.tsx
index dce3b50..b5d3f88 100644
--- a/frontend/src/components/Button/index.tsx
+++ b/frontend/src/components/Button/index.tsx
@@ -1,5 +1,6 @@
 import classes from './index.module.css'
 import { FC, MouseEventHandler, PropsWithChildren } from 'react'
+import { StringUtils } from '../../utils/string.utils.ts'
 
 type ButtonSize = 'small' | 'medium'
 type ButtonColor = 'primary' | 'secondary'
@@ -43,15 +44,15 @@ export const Button: FC<Props> = ({
   type,
 }) => (
   <button
-    className={[
+    className={StringUtils.clsx(
       className,
       classes.button,
-      ...(disabled ? [classes.buttonDisabled] : []),
-      ...(fullWidth ? [classes.fullWidth] : []),
+      disabled ? classes.buttonDisabled : undefined,
+      fullWidth ? classes.fullWidth : undefined,
       colorMap[color],
       sizeMap[size],
-      variantMap[variant],
-    ].join(' ')}
+      variantMap[variant]
+    )}
     onClick={onClick}
     disabled={disabled}
     type={type}
diff --git a/frontend/src/components/Card/index.tsx b/frontend/src/components/Card/index.tsx
index c140480..4ab0b74 100644
--- a/frontend/src/components/Card/index.tsx
+++ b/frontend/src/components/Card/index.tsx
@@ -1,10 +1,11 @@
 import { FC, PropsWithChildren } from 'react'
 import classes from './index.module.css'
+import { StringUtils } from '../../utils/string.utils.ts'
 
 interface Props extends PropsWithChildren {
   className?: string
 }
 
 export const Card: FC<Props> = ({ children, className }) => {
-  return <div className={[classes.card, ...(className ? [className] : [])].join(' ')}>{children}</div>
+  return <div className={StringUtils.clsx(classes.card, className)}>{children}</div>
 }
diff --git a/frontend/src/utils/string.utils.ts b/frontend/src/utils/string.utils.ts
index 93513fe..24ea03d 100644
--- a/frontend/src/utils/string.utils.ts
+++ b/frontend/src/utils/string.utils.ts
@@ -12,4 +12,11 @@ export abstract class StringUtils {
   static getTransactionUrl = (baseUrl: string, txHash: string) => `${baseUrl}/tx/${txHash}`
 
   static getAccountUrl = (baseUrl: string, address: string) => `${baseUrl}/address/${address}`
+
+  static clsx = (...classNames: (string | undefined)[]) => {
+    return classNames
+      .map(className => (className ? [className] : []))
+      .flat()
+      .join(' ')
+  }
 }