Use classcat to clean up logic around className props (#46)

Author: chadian

components/button.tsx

@@ -2,6 +2,7 @@
 import React, { MouseEventHandler } from 'react';
 import { useTheme } from '../hooks/theme/index';
 import { ReactChildrenProps } from '../types';
+import cc from 'classcat';
 
 type ButtonProps = {
   onClick?: MouseEventHandler;
@@ -48,7 +49,7 @@ export default function Button({
       {...buttonAttrs}
       type={buttonType || 'button'}
       onClick={onClick}
-      className={`${className} ${sizeClassName}`}
+      className={cc([className, sizeClassName])}
     >
       {children}
     </button>

components/link.tsx

@@ -2,6 +2,7 @@
 import React, { FunctionComponent } from 'react';
 import { default as NextLink } from 'next/link';
 import { useTheme } from '../hooks/theme/index';
+import cc from 'classcat';
 
 const underlineClassNames = {
   sm: 'underline-offset-sm',
@@ -43,11 +44,9 @@ const Link: FunctionComponent<LinkProps> = ({
     classNames.push(underlineOffsetClassName);
   }
 
-  const className = classNames.join(' ');
-
   return (
     <NextLink passHref={true} href={href}>
-      <a {...attrs} className={className}>
+      <a {...attrs} className={cc(classNames)}>
         {children}
       </a>
     </NextLink>

components/modal.tsx

@@ -1,6 +1,7 @@
 import React, { KeyboardEventHandler } from 'react';
 import FocusLock from 'react-focus-lock';
 import { ReactChildrenProps } from '../types';
+import cc from 'classcat';
 
 type ModalProps = {
   onClose: () => void;
@@ -37,7 +38,7 @@ export default function Modal({
       <div
         role="dialog"
         aria-modal="true"
-        className={classNames.join(' ')}
+        className={cc(classNames)}
         onKeyDown={onKeyDown}
       >
         {children}

components/rhythm-edit/rhythm-edit.tsx

@@ -4,6 +4,7 @@ import { denominatorTerm } from '../../utils/denominator-term';
 import { numeratorTerm } from '../../utils/numerator-term';
 import { ValidationWrapper } from './validated-wrapper';
 import { Rhythm, UnsavedRhythm } from '../../types';
+import cc from 'classcat';
 
 const sharedSelectAndInputClassNames = [
   'text-gray-800',
@@ -19,13 +20,13 @@ const inputClassNames = [
   'py-1',
   'px-2',
   'placeholder-gray-300',
-].join(' ');
+];
 
 const selectClassNames = [
   ...sharedSelectAndInputClassNames,
   'p-1',
   'w-48',
-].join(' ');
+];
 
 const generateNumeratorSelect = (
   selected: string,
@@ -41,7 +42,7 @@ const generateNumeratorSelect = (
 
   return (
     <select
-      className={selectClassNames}
+      className={cc(selectClassNames)}
       onChange={onChange}
       aria-label="Rhythm action count"
       value={selected}
@@ -65,7 +66,7 @@ const generateDenominatorSelect = (
 
   return (
     <select
-      className={selectClassNames}
+      className={cc(selectClassNames)}
       onChange={onChange}
       aria-label="Rhythm action count time span"
       value={selected}
@@ -188,7 +189,7 @@ export default function RhythmEdit({
             error={validationResult.errors.action}
           >
             <input
-              className={inputClassNames}
+              className={cc(inputClassNames)}
               aria-label="Rhythm action description"
               aria-required="true"
               placeholder="get into a rhythm"
@@ -215,7 +216,7 @@ export default function RhythmEdit({
             error={validationResult.errors.reason}
           >
             <input
-              className={inputClassNames}
+              className={cc(inputClassNames)}
               aria-label="Rhythm reason description"
               aria-required="true"
               placeholder="it will bring positive change"

components/rhythm/occurrence.tsx

@@ -3,6 +3,7 @@ import { format } from 'date-fns';
 import chroma from 'chroma-js';
 import { useTheme } from '../../hooks/theme/index';
 import { pullBackgroundColor } from '../../utils/pull-background-color';
+import cc from 'classcat';
 
 function createCooldownStyle(
   cooldown: number,
@@ -67,7 +68,7 @@ export default function Occurrence({
         onClick={onClick}
         className="flex p-4 -m-4"
       >
-        <div className={classNames.join(' ')}></div>
+        <div className={cc(classNames)}></div>
       </button>
     );
   } else {
@@ -86,7 +87,7 @@ export default function Occurrence({
         role="img"
         aria-label={ariaLabel}
         style={style}
-        className={classNames.join(' ')}
+        className={cc(classNames)}
       ></div>
     );
   }

components/stripe.tsx

@@ -1,13 +1,25 @@
 import React from 'react';
 import { useTheme } from '../hooks/theme/index';
+import cc from 'classcat';
 
 export default function Stripe() {
   const [theme] = useTheme();
   const { stripeBgClass } = theme;
 
+  const className = cc([
+    stripeBgClass,
+    'absolute',
+    'top-0',
+    'right-0',
+    'w-8',
+    'md:w-12',
+    'h-full',
+    'z-20',
+  ]);
+
   return (
     <div
-      className={`${stripeBgClass} absolute top-0 right-0 w-8 md:w-12 h-full z-20`}
+      className={className}
     ></div>
   );
 }

package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "chroma-js": "^2.4.2",
+    "classcat": "^5.0.4",
     "date-fns": "^2.28.0",
     "immer": "^9.0.12",
     "mockdate": "^3.0.5",

yarn.lock

@@ -5042,6 +5042,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classcat@^5.0.4:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/classcat/-/classcat-5.0.4.tgz#e12d1dfe6df6427f260f03b80dc63571a5107ba6"
+  integrity sha512-sbpkOw6z413p+HDGcBENe498WM9woqWHiJxCq7nvmxe9WmrUmqfAcxpIwAiMtM5Q3AhYkzXcNQHqsWq0mND51g==
+
 classnames@^2.2.5:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"