feat(cn): add support for condition objects

itsjavi · Oct 7, 2023 · e37e798 · e37e798
1 parent c1b9581
commit e37e798
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 14 deletions.
diff --git a/packages/cn/src/cn.test.ts b/packages/cn/src/cn.test.ts
@@ -9,18 +9,32 @@ describe('cn (classNames)', () => {
   })
 
   it('should handle conditional class names', () => {
-    expect(cn([true, 'foo'], [false, 'bar'], [true, 'baz'])).toBe('foo baz')
+    expect(cn(['foo', true], ['bar', false], ['baz', true])).toBe('foo baz')
+  })
+
+  it('should handle objects with conditions', () => {
+    expect(
+      cn({
+        foo: true,
+        bar: [false, 'bar-alt'],
+        baz: true,
+      }),
+    ).toBe('foo bar-alt baz')
   })
 
   it('should handle if-else conditional class names', () => {
-    expect(cn('foo', [true, 'qux', 'baz'])).toBe('foo qux')
-    expect(cn('foo', [false, 'qux', 'baz'])).toBe('foo baz')
+    expect(cn('foo', ['qux', true, 'baz'])).toBe('foo qux')
+    expect(cn('foo', ['qux', false, 'baz'])).toBe('foo baz')
   })
 
   it('should handle undefined and null class names', () => {
     expect(cn(undefined, null, 'foo', null)).toBe('foo')
   })
 
+  it('should return empty string if no conditions match', () => {
+    expect(cn(undefined, null, [null])).toBe('')
+  })
+
   it('should handle empty and whitespace-only class names', () => {
     expect(cn('', ' ', 'foo', '   ', 'bar')).toBe('foo bar')
   })

diff --git a/packages/cn/src/cn.ts b/packages/cn/src/cn.ts
@@ -1,4 +1,4 @@
-import type { CnClassArg } from './types'
+import type { CnClassArg, CnClassCondition, CnClassName } from './types'
 
 /**
  * A utility for conditionally joining classNames together.
@@ -18,23 +18,35 @@ import type { CnClassArg } from './types'
  */
 export function cn(...classNames: CnClassArg[]): string {
   return classNames
-    .flatMap((arg) => {
-      if (
-        Array.isArray(arg) &&
-        arg.length >= 2 &&
-        (typeof arg[0] === 'boolean' || arg[0] === undefined || arg[0] === null)
-      ) {
+    .flatMap((arg): Array<boolean | CnClassName> | boolean | CnClassName => {
+      if (Array.isArray(arg) && arg.length >= 2) {
         if (arg.length > 2) {
-          const [condition, valueIfTruthy, ...valuesIfFalsy] = arg
+          const [valueIfTruthy, condition, elseValue] = arg
 
-          return condition ? valueIfTruthy : valuesIfFalsy
+          return condition ? valueIfTruthy : elseValue
         }
 
-        const [condition, valueIfTruthy] = arg
+        const [valueIfTruthy, condition] = arg
 
         return condition ? valueIfTruthy : undefined
       }
 
+      if (typeof arg === 'object') {
+        if (arg === null) {
+          return []
+        }
+
+        return Object.entries(arg).map(([valueIfTruthy, value]: [string, string | [CnClassCondition, string]]) => {
+          if (Array.isArray(value)) {
+            const [condition, elseValue] = value
+
+            return condition ? valueIfTruthy : elseValue
+          }
+
+          return value ? valueIfTruthy : undefined
+        })
+      }
+
       return arg
     })
     .filter(Boolean)

diff --git a/packages/cn/src/types.ts b/packages/cn/src/types.ts
@@ -3,4 +3,8 @@ export type CnClassName = string | undefined | null
 export type CnClassArg =
   | CnClassName
   | CnClassName[]
-  | [condition: CnClassCondition, ifTrueClass: CnClassName, ...elseClasses: CnClassName[]]
+  | [ifTrueClass: CnClassName, condition: CnClassCondition]
+  | [ifTrueClass: CnClassName, condition: CnClassCondition, elseClass: CnClassName]
+  | {
+      [key: string]: CnClassCondition | [condition: CnClassCondition, elseClass: CnClassName]
+    }