feat(shared): add array support to cx utility (#18)

* feat(shared): add array support to cx utility

* Apply suggestions from code review

Co-authored-by: Aymeric Giraudet <[email protected]>

Co-authored-by: Aymeric Giraudet <[email protected]>

Author: Haroenv

Diff for: packages/shared/src/__tests__/cx.test.ts

@@ -17,4 +17,16 @@ describe('cx', () => {
     expect(cx('')).toBe(undefined);
     expect(cx(false, undefined, null)).toBe(undefined);
   });
+
+  test('recursively concatenates arrays', () => {
+    expect(cx(['class1', 'class2'], ['class3', 'class4'])).toBe(
+      'class1 class2 class3 class4'
+    );
+    expect(cx(['class1', 'class2'], false && ['class3', 'class4'])).toBe(
+      'class1 class2'
+    );
+    expect(
+      cx(['class1', false && 'class2'], ['class3', false && 'class4'])
+    ).toBe('class1 class3');
+  });
 });

Diff for: packages/shared/src/cx.ts

@@ -1,5 +1,15 @@
-export function cx(
-  ...classNames: Array<string | number | boolean | undefined | null>
-) {
-  return classNames.filter(Boolean).join(' ') || undefined;
+type ClassValue = string | undefined | boolean | null | number;
+
+export function cx(...cssClasses: Array<ClassValue | ClassValue[]>) {
+  return (
+    cssClasses
+      .reduce<ClassValue[]>((acc, className) => {
+        if (Array.isArray(className)) {
+          return acc.concat(className);
+        }
+        return acc.concat([className]);
+      }, [])
+      .filter(Boolean)
+      .join(' ') || undefined
+  );
 }